Урок #1: Введение в HTML, термины, понятия

13 декабря, 2017 Максим Метелев 5454 просмотров Комментариев нет

Всем привет дорогие друзья! У меня буквально давно зрела, но не находила практического применения идея создания дополнительно обучающего портала в рамках блога smarticle.ru, где новичок мог бы почерпнуть с нуля все знания по верстке, а именно по html, CSS и другим языкам. Я ведь не могу назвать себя профессионалом, поскольку сам постоянно нахожусь в процессе постижения нового.

Сегодняшняя статья будет являться вводной на тему изучения вопроса: а что же такое html код страницы, теги и вообще язык гипертекстовой разметки документа. Я определился с тем, что статьи будут короткие, емкие и отражать исключительно практику, чтобы вы могли после прочтения взять и повторить на своем примере и каждодневно прилежно учиться, не пропускать занятия. Это совершенно бесплатно! Я за это не беру денег. Да, да, я есть и я существую! 🙂

Итак, приступим к делу, други мои верные, читатели хорошие и преданные.

Что же такое HTML и с чем его едят

HTML — это стандартный язык разметки для создания веб-страниц как статических, так и динамических.

Обозначает язык разметки гипертекста
Описывает структуру веб-страниц с использованием разметки
HTML-элементы являются строительными блоками HTML-страниц
Элементы HTML представлены в виде тегов, которые являются парными
HTML-теги обозначают фрагменты контента, такие как «заголовок», «абзац», «таблица» и т. д.
Современные браузеры не отображают теги HTML, но используют их для показа содержимого страницы.

Пример простого кода языка html документа

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>My First Heading</h1>
<p>My first paragraph.</p>

</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Page Title</title>

</head>

<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>

</html>

Попробуйте самостоятельно.

Примечание: Для того, чтобы посмотреть в браузере результат, вам необходимо данный код вставить в обычном блокноте и сохранить его с расширением .html

Вот, что должно получиться на выходе:

Пример простого html документа, ваша первая страница

Разъяснение примера выше:

Конструкция <! DOCTYPE html> определяет этот документ как HTML5
Тег <html> является корневым элементом HTML-страницы или самым главным «контейнером» для всех других тегов, которые в него войдут
Тег <head> содержит всю метаинформацию о документе, в него же будут помещены таблицы стилей, скрипты (хотя их не рекомендуют размещать в верхней части, а советуют в нижней, т.е в футере)
Тег <title> указывает на заголовок документа, который отображается во вкладке браузера и играет одну из определяющих ролей при seo продвижении.
Тег <body> содержит видимое содержимое страницы, дословно перевести можно, как «тело» для всех тегов и контейнеров.
Тег <h1> определяет заголовок первого уровня страницы. Если мы говорим про SEO, а здесь я будут проводить эти параллели, то он должен присутствовать ТОЛЬКО 1 РАЗ на странице, не больше. В противном случае это будет являться ошибкой.
Тег <p> определяет простой текстовый абзац в документе.

HTML теги документа

Теги – это название или имя элемента, которое помещено в угловые скобки:

<начало тега>здесь контент...</конец тега>

1	<начало тега>здесь контент...</конец тега>

Все теги на странице документа обычно всегда представлены парно, например тег параграфа <p> и </p>

Первый тег в паре начальный, а второй конечный. Отличие в том, что закрывающий представлен косой чертой перед тегом.

Совет. Начальный тег также называется открывающим тегом, а конечный тег — закрывающим тегом.

Веб браузеры

Цель и функциональное назначение всех браузеров (Chrome, IE, FireFox, Safari) – читать такие документы и отображать их пользователю.

Браузер не отображает сами теги html, но показывает или «транслирует» их содержимое:

Отображение содержимого тегов

Структура html страницы документа

Представлена визуализация самой структуры для большей наглядности примера:

Структура HTML документа

Примечание. В браузере отображается только контент внутри раздела <body> (белая область выше).

Декларация DOCTYPE

Объявление <! DOCTYPE> представляет тип документа и позволяет браузерам правильно отображать веб-страницы.

Он должен появляться только один раз, в верхней части страницы (перед любыми тегами HTML).
Не чувствительно к регистру.

Как представлен <! DOCTYPE> для HTML5:

HTML Doctype

Эволюция версий html документа

Буквально с первых дней существования интернет html претерпел множество самых разных версий, которые представлены ниже:

Version	Year
HTML	1991
HTML 2.0	1995
HTML 3.2	1997
HTML 4.01	1999
XHTML	2000
HTML5	2014

На этом вводный урок по основам языка гипертекстовой разметки документа html закончен. Я думаю, что он получился продуктивным, простым и интересным. Не упускайте возможность потренироваться. Здесь будет много полезного и интересного контента. Это я вам обещаю! Приятного изучения и не забывайте делиться полезным материалом со своими друзьями по кнопочкам социальных сетей ниже. До скорого!

Рубрики: Обучение html