2. Язык гипертекстовой разметки
HTML (от англ. HyperText Markup Language - язык гипертекстовой разметки, который
используется для создания веб-страниц. Он состоит из набора структурных и семантических
элементов, которые описывают, как должны быть представлены части документа
(заголовки, абзацы, списки, изображения, и т.д.) в браузере.
Он интерпретируется (переводится) браузерами и отображается в виде документа в
удобной для пользователя форме.
Язык HTML понимается браузерами, а HTML-страницы, как правило, передаются по
протоколам HTTP или HTTPS в виде простого текста или с использованием шифрования.
Полученный в результате форматированный текст отображается на экране монитора
компьютера или мобильного устройства.
3. История развития HTML
Язык HTML был разработан британским ученым Тимом Бернерсом-Ли в Церне (Женева,
Швейцария) в 1991-1993 годах. Из года в год язык совершенствовался и как только
стандартная версия языка существенно менялась, ей присваивался следующий номер.
4. Дальнейшее развитие языка HTML
Версия Год
HTML 1991
HTML+ 1993
HTML 2.0 1995
HTML 3.2 1997
HTML 4.01 1999
XHTML 1.0 2000
HTML5 2012
XHTML5 2013
5. Теги HTML
HTML теги используются для определения структуры контента на веб-странице. При
помощи тегов мы размечаем контент и даем понять браузеру, как именно показывать ту
или иную часть контента (к примеру, текст, изображение, гиперссылка, и т.д.). Сами теги в
браузере не показываются.
Тег (дескриптор) – это элемент языка разметки, который обозначается начальным
(открывающим) тегом и конечным (закрывающим) тегом. Внутри скобок содержится имя
тега (элемента). Имя может содержать цифры и латинские буквы. Зачастую теги являются
сокращением от какого-то англоязычного термина.
Теги могут быть: обязательными, парными, непарными, с атрибутами
6. Строение тега
Открывающий тег: Он состоит из названия (обозначения) элемента (в нашем случае, p),
помещённого внутри угловых скобок. Данный тег служит признаком начала элемента, с
этого момента тег начинает влиять на следующее после него содержимое.
Закрывающий тег: выглядит как и открывающий, но содержит слеш (/) перед названием
тега. Он служит признаком конца элемента. Пропуски закрывающих тегов — типичная
ошибка, которая может приводить к неопределённым результатам — в лучшем случае всё
сработает правильно, в других - страница может вовсе не прорисоваться или прорисоваться
не как ожидалось.
Содержимое: Обычно содержимым является простой текст.
Элемент: открывающий тег + закрывающий тег + содержимое = элемент.
Атрибут, значение атрибута: используются для представления информации о теге.
7. Структура web-страницы
<!DOCTYPE html>
<html>
<head>
…
</head>
<body>
…
</body>
</html>
Тег <!DOCTYPE> предназначен для указания типа текущего документа и версии
языка HTML. Необходим для понимания браузером, как следует обрабатывать
(проверять) и отображать текущую веб-страницу.
Тег <html> является контейнеров, который заключает в себе все содержимое
веб-страницы, включая теги <head> и <body>. Открывающий и закрывающий
теги <html> в документе необязательны.
Тег <head> содержит в себе информацию о странице. В нем содержится
заголовок, ключевые слова, описание страницы и другие служебные данные.
Тег <body> является контейнером для всего содержимого, которое будет
отображено пользователю. Все пробельные символы более одного пробела
игнорируются, в том числе переносы строк и табуляция.
9. HTML редакторы и программы
Для эффективной работы с HTML и написания кода нам понадобятся следующие
инструменты и программы:
◦ текстовый редактор или редактор HTML для написания и редактирования кода;
◦ браузер для просмотра результатов;
◦ валидатор - специальная программа, проверяющая соответствие HTML-кода страниц
сайта современным стандартам и выявления ошибок в коде.
10. Основные правила использования
HTML и разметки
◦ Каждый тег должен начинаться с открывающей угловой скобки < и заканчиваться закрывающей
угловой скобкой > ;
◦ Все открытые теги должны быть закрыты;
◦ При записи имен тегов рекомендуется использовать нижний регистр и нельзя ставить пробелы
после и перед угловыми скобками;
◦ Нельзя нарушать вложенность тегов (<em> <b> … </em> </b>);
◦ Практически любой тег может содержать атрибуты;
◦ Атрибуты со значениями должны иметь такой вид: <em атрибут="значение атрибута"></em>;
◦ Порядок атрибутов не имеет значение и не влияет на результат отображения элемента.
Все правила описаны организацией W3C. Для проверки ошибок рекомендуется использовать сервис
http://w3c.org
11. Блочные и строчные HTML элементы
Элементы в HTML также делятся на блочные и строчные. Блочными называют элементы, которые
являются строительными блоками веб-страниц. Их используют для разделения содержимого веб-
страницы на логические блоки, такие как меню, шапка сайта, блок с контентом, “подвал” сайта и т.д.
Блочные элементы пишутся с новой строки; до и после этих элементов в браузере автоматически
добавляется разрыв строки.
У всех блочных элементов есть открывающие и закрывающие теги.
Строчными элементами размечают части содержимого элементов. Они занимают только
ограниченное тегами пространство, браузер не добавляет автоматически разрыв строки.
◦ Строчные элементы могут содержать только данные или другие строчные элементы, а в блочные
допустимо вкладывать другие блочные элементы, строчные элементы и данные;
◦ Строчные элементы не могут хранить блочные элементы;
◦ Строчные элементы можно превращать в блочные;
◦ Блочные элементы всегда начинаются с новой строки и занимают всю ширину.
