Лекция № 6. Основные понятия языка HTML

Лекция № 6. Основные понятия языка HTML
1. HTML и CSS – языки создания статических веб-страниц
Информация в сети Интернет хранится на специальных компьютерах, называемых
серверами. Обмен между сервером и клиентом (пользовательским компьютером) осуществляется
через протокол HTTP. HTTP – это простой запросно-ответный протокол, протокол передачи
гипертекстовых файлов (HyperText Transfer Protocol). При вводе адреса в адресную строку
браузера по определённым правилам ищется соответствующий сервер, и ему передаётся запрос
на ту или иную веб-страницу. В ответ сервер передаёт содержимое файла. Кроме того, протокол
HTTP позволяет передавать изображения и файлы любых других типов, которые могут
понадобиться веб-странице.
Однако если бы веб-страница содержала только информацию в текстовом виде, то она бы
и отображалась в виде чистого текста без какого-либо форматирования, картинок и т.п. Для того
чтобы было не так, в HTML-файл вставляются так называемые теги, которые указывают
браузеру, как нужно отображать информацию, хранящуюся в HTML-файле.
Современные принципы разработки веб-страниц предполагают чёткое разделение
средств разметки и средств форматирования. Язык HTML (HyperText Markup Language)
используется для разметки структуры документа, а язык CSS (Cascading Style Sheets) – для
описания форматирования документа (шрифты, цвета, границы и т.д.). В итоге для разработки
веб-страницы нужно использовать оба языка. Но такое разделение упрощает как разметку, так и
форматирование документа.
В настоящее время самыми последними (и даже до конца не утверждёнными) являются
стандарты HTML5 и CSS3. В настоящем курсе мы будем ориентироваться именно на них.
Разработкой стандартов занимается комитет W3C (World Wide Web Consortium). На сайте
комитета W3C по адресу http://www.w3.org можно найти всю информацию по текущему
состоянию языков HTML и CSS.
Технологии HTML5 и CSS3 закладывают основу для следующего поколения вебприложений. Сайты, созданные с применением этих технологий, более просты в разработке и
сопровождении и более удобны для пользователей. В HTML5 появились новые элементы для
определения структуры сайта и встроенного контента, которые избавляют разработчика от
необходимости использовать дополнительную разметку или плагины. CSS3 предоставляет
расширенные селекторы, графические усовершенствования и улучшенную поддержку работы со
шрифтами, которые позволяют сделать сайты более привлекательными.
2. Понятие элемента
HTML и CSS являются компьютерными языками, но это не языки программирования,
такие как Паскаль, С++ или VBA. Языки HTML и CSS не описывают действия, которые должен
выполнить компьютер. Это, скорее, декларативные языки, которые указывают, как нужно
относиться к той или иной части веб-страницы и как нужно её форматировать. Браузер же
выполняет определённые действия для того, чтобы отобразить веб-страницу так, как это указано
с помощью HTML и CSS. Это, правда, является одной из самых больших проблем вебразработчиков – разные браузеры могут по-разному отображать одну и ту же страницу. Поэтому
веб-разработчикам приходится тестировать свои страницы в разных браузерах и, при
необходимости, модифицировать их так, чтобы минимизировать различия.
Основным понятием в языке HTML является элемент. Элемент – это часть документа,
имеющая определённое назначение. Обычно элемент состоит из открывающего
тега,
содержимого и закрывающего тега. Тег – это специальная последовательность символов, которая
распознаётся браузером и интерпретируется в соответствии со значением этого тега.
<h1>Заголовок</h1>
Здесь мы видим пример элемента h1 (элементы обычно называются так же, как и
соответствующие теги). Встретив такой элемент, браузер отображает его содержимое,
форматируя это содержимое по правилам, предназначенным для данного элемента. Правила
форматирования либо задаются в CSS-файле, либо браузер использует встроенные правила. Теги
присутствуют в HTML-файле, но не отображаются в браузере.
27
3. Структура веб-страницы
По сути весь HTML-файл является одним большим элементом html, который в свою
очередь состоит из двух элементов – head и body.
<!doctype html>
<html lang = "ru-RU">
<head>
<meta http-equiv = "Content-Type" content = "text/html; charset=windows-1251">
<title> HTML и CSS </title>
<link rel = stylesheet href = "style.css" type = "text/css">
<link rel = icon href = "Images/icon.gif" type = "image/gif">
<meta name = "description" content = "HTML и CSS">
<meta name = "keywords" content = "HTML,CSS,тег,атрибут,веб-страница">
</head>
<body>
...
<!-- Комментарий.
Комментарий.
Комментарий.
</body>
</html>
-->
Первая строка содержит объявление doctype, определяющее стандарт, которому должен
соответствовать HTML-документ. В нашем примере приведённое простейшее объявление
doctype говорит о том, что в документе используется стандарт HTML5. По объявлению doctype
браузеры, программы валидации и редакторы определяют, какие теги и атрибуты будут
использоваться в HTML-документе, и как должен отображаться документ.
После объявления doctype идёт элемент html, который, как уже было сказано, является
корневым элементом веб-страницы. Элемент имеет атрибут lang, который определяет язык
содержимого элемента.
Содержимое элемента html состоит из двух других элементов – head и body.
Элемент head представляет собой набор так называемых метаданных документа.
Метаданные описывают тип содержимого документа, ключевые слова, связи с другими файлами
и т.п. Элемент head должен быть первым элементом в элементе html, и его содержимое должно
состоять лишь из набора определённых элементов, к которым относятся title, link, style и meta.
Элемент title определяет заголовок документа, который отображается в верхней строке
браузера, а также в истории и закладках. Каждая веб-страница должна содержать элемент title,
причём только один раз.
Элемент link позволяет связать документ с некоторыми ресурсами. Элемент head каждой
веб-страницы может содержать несколько элементов link. Элемент link должен иметь два
обязательных атрибута – rel, который определяет тип создаваемой связи, и href, который
указывает url-адрес связанного ресурса. Кроме того, элемент link может иметь два
необязательных атрибута – type, который описывает тип содержимого ресурса, и media, который
указывает оптимальную среду для ресурса.
В приведённом выше примере используются элементы link, устанавливающие две
наиболее часто используемых связи. Элемент link, у которого атрибут rel имеет значение
stylesheet, устанавливает связь с CSS-файлом, содержащим таблицу стилей для данной вебстраницы. Элемент link, у которого атрибут rel имеет значение icon, устанавливает связь с
графическим файлом, содержащим иконку веб-страницы.
Элемент style содержит таблицу стилей для веб-страницы, записанную по стандартным
синтаксическим правилам для CSS. Однако запись таблицы стилей в отдельном файле и
организация связи с этим файлом с помощью элемента link обычно является более удобным
способом задания форматирования.
Элемент meta используется для предоставления метаданных, которые не могут быть
представлены с помощью других элементов. Элемент head каждой веб-страницы может
содержать несколько элементов meta.
В приведённом выше примере используются три элемента meta. Первый из них
описывает содержимое файла и устанавливает используемую кодировку. Этот элемент должен
28
выглядеть именно так, как в примере, добавлять пробелы и иные символы нельзя. Второй и
третий элементы meta имеют по два атрибута – name и content. Атрибут name задаёт тип
метаданных, определяемых элементом, а атрибут content – значение этих метаданных. В
приведённом выше примере элементы meta задают описание и ключевые слова веб-страницы.
Эти данные могут использоваться поисковыми системами. Однако поисковые системы не
обязаны ориентироваться на значения, заданные автором веб-страницы, т.к. их, к сожалению,
можно использовать для фальсификации результатов работы поисковых систем.
Элемент body должен быть вторым элементом в элементе html. Он представляет
содержимое веб-страницы. Веб-страница может содержать только один элемент body.
Как и другие компьютерные языки HTML позволяет включать комментарии, которые
должны начинаться с сочетания символов <!-- и заканчиваться сочетанием символов -->.
4. Основные правила использования элементов
Как и все компьютерные языки, язык HTML имеет определённые синтаксические правила.
Все HTML-теги не зависят от регистра и могут быть написаны как прописными, так и
строчными буквами.
Большинство элементов относятся к группе обычных элементов. Обычные элементы
состоят из открывающего тега, содержимого и закрывающего тега.
Открывающий тег имеет следующий формат:
 открывающая угловая скобка;
 имя тега;
 необязательные атрибуты, отделённые одним или несколькими пробелами;
 закрывающая угловая скобка.
Закрывающий тег имеет следующий формат:
 открывающая угловая скобка;
 слеш;
 имя тега;
 закрывающая угловая скобка.
В некоторых случаях закрывающий тег обычного элемента может быть опущен. В
частности, можно опускать закрывающий тег элемента li, если за ним следует другой элемент li
или закрывающий тег родительского элемента. Можно опускать закрывающий тег элемента p,
если за ним следует другой элемент p. Существует ещё несколько элементов, которые «закрывают» элемент p. Также можно опускать закрывающий тег некоторых элементов, используемых
для создания таблиц. Более подробное описание можно найти на сайте комитета W3C.
Обычно содержимое элемента body состоит из набора других элементов, вложенных друг
в друга. Однако существуют определённые ограничения.
Кроме обычных элементов, существуют так называемые пустые элементы. Пустые
элементы состоят только из открывающего тега. К пустым элементам относятся br, hr, img, link,
meta и несколько других элементов.
Разделители (пробел, табуляция, перевод строки), расположенные в начале и в конце
содержимого элемента, игнорируются. Другие подряд идущие разделители группируются в один
пробел. Таким образом, расположение текста в HTML-файле и в веб-странице, открытой в
браузере, может существенно отличаться. В частности, в HTML-файле, как и файлах на других
компьютерных языках, принято располагать вложенные элементы со смещением. На
отображение текста в веб-странице это никак не влияет. Однако есть специальный элемент pre,
который позволяет сохранить разделители HTML-файла при отображении веб-страницы в
браузере. Это может быть полезно при вставке в веб-страницу, например, текстов программ.
Каскадные таблицы стилей также позволяют при необходимости добиться сохранения
разделителей в веб-странице.
Некоторые символы являются специальными, т.к. входят в синтаксические структуры
языка HTML. К таким символам относятся, прежде всего, знаки «больше» и «меньше», а также
амперсанд. Но в то же время, эти символы бывает необходимо использовать в содержимом
элементов. Для вставки специальных символов в текст существуют специальные именованные
последовательности, с помощью которых можно вставить в веб-страницу символы Юникода –
математические символы, буквы греческого алфавита, буквы с надстрочными знаками и т.д. Эти
последовательности символов начинаются со знака «амперсанд», затем идёт ряд символов,
29
описывающий новый знак, и заканчивается последовательность точкой с запятой. Приведём
некоторые примеры.
>
<
&
 
¾
⅝
®
∩
∑
>
<
&
¾
⅝
®
∩
∑
⊂
⊃
ε
μ
Μ
π
Π
φ
Φ
⊂
⊃
ε
μ
Μ
π
Π
ϕ
Φ
ρ
Ρ
á
Á
é
É
è
È
ù
ρ
Ρ
á
Á
é
É
è
È
ù
Ù
û
Û
ô
Ô
õ
Õ
ñ
Ñ
Ù
û
Û
ô
Ô
õ
Õ
ñ
Ñ
5. Атрибуты элементов
Открывающий тег элемента может содержать атрибуты, которые влияют на поведение и
отображение элемента. Описание элемента содержит описание атрибутов, которые могут
использоваться в элементе. Атрибуты имеют имя и значение. Имя атрибута состоит из набора
символов и не может содержать пробельные символы, знаки «больше» и «меньше», кавычки,
апострофы и знак равенства.
Значение атрибута может быть задано несколькими способами.
 Пустое значение. В некоторых случаях достаточно указания имени атрибута, например, <input
disabled>.
 Запись значения атрибута без ограничителей. Если значение атрибута не содержит
пробельных символов, амперсандов, апострофов, кавычек, знаков «больше» и «меньше» и
знака равенства, то значение атрибута можно записывать без кавычек и апострофов,
например, <input value = yes>.
 Запись значения атрибута в апострофах. Значение атрибута может быть записано в
апострофах. В этом случае значение может содержать любые символы, кроме амперсанда и
апострофов, например, <input type = 'checkbox'>.
 Запись значения атрибута в кавычках. Значение атрибута может быть записано в кавычках. В
этом случае значение может содержать любые символы, кроме амперсанда и кавычек,
например, <input type = "checkbox">.
Существует ряд глобальных атрибутов, которые могут использоваться во всех элементах.
5.1. Атрибут title
Атрибут title задаёт дополнительную информацию для элемента. Для ссылок это может
быть название целевой страницы, для рисунков – название рисунка, для параграфа – примечание
или комментарий и т.п. Значение атрибута title выводится в виде всплывающей подсказки при
наведении мыши на элемент.
5.2. Атрибут lang
Атрибут lang задаёт язык содержимого элемента.
5.3. Атрибут style
Атрибут style позволяет задать оформление элемента по стандартным синтаксическим
правилам CSS. Использование атрибута style позволяет изменить какие-либо характеристики
оформления одного элемента без использования обычной таблицы стилей CSS. Но использование
атрибута style удобно только для изменения формата в единичных случаях. Задание оформления
каждого элемента с помощью атрибута style неудобно и может привести к значительному
увеличению размера HTML-файла.
5.4. Атрибут id
Атрибут id задаёт уникальный идентификатор элемента. Этот идентификатор может
использоваться для создания ссылок и для задания стиля элемента.
30
5.5. Атрибут class
Атрибут class позволяет определить принадлежность элемента к одному или нескольким
классам. Значение атрибута class состоит из имён классов, разделённых пробелами. В отличие от
идентификатора класс не является уникальной характеристикой элемента. Обычно к одному
классу принадлежит несколько элементов. Атрибут class позволяет сослаться на все элементы,
принадлежащие этому классу, в таблицах стилей CSS.
6. Основные элементы
Предполагается, что элементы будут использоваться в соответствии с их семантикой. Все
элементы могут иметь глобальные атрибуты.
6.1. Элемент img
Элемент img представляет изображение. Элемент имеет следующие атрибуты:
 src – задаёт url-адрес изображения;
 alt – задаёт описание изображения, которое отображается, если изображение не доступно или
если в браузере отключены изображения;
 width и height – задают ширину и высоту изображения, которые могут отличаться от реальных
размеров изображения.
При задании адреса лучше использовать относительные пути – тогда при изменении
имени папки или сайта не придётся изменять все адреса в HTML-файлах. Путь может содержать
имена папок, которые находится в той же папке, что и текущий файл. С помощью двух точек
можно также сослаться на родительскую папку.
<img src = "HTML.gif" alt = "HTML и CSS">
<img src = "Images/HTML.gif" alt = "HTML и CSS">
<img src = "../Images/HTML.gif" alt = "HTML и CSS">
6.2. Элемент a
Элемент a представляет гиперссылку на другую веб-страницу или на другую часть
текущей страницы. Элемент должен содержать атрибут href, который задаёт url-адрес для
перехода.
<a
<a
<a
<a
href
href
href
href
=
=
=
=
"lection1.html">Лекция № 1. Алфавит и основные понятия языка C++</a>
"#l1_4">Типы данных языка C++</a>
"lection1.html#l1_4">Типы данных языка C++</a>
"index.html"><img src = "home.jpg" alt = "Home"></a>
6.3. Элемент p
Элемент p представляет абзац текста. Элемент не имеет атрибутов.
<p> Язык C++ – это язык программирования общего назначения, цель которого – сделать
работу серьёзных программистов более приятным занятием. За исключением несущественных
деталей, язык C++ является надмножеством языка С. Помимо возможностей, предоставляемых
языком С, язык C++ обеспечивает гибкие и эффективные средства определения новых
типов.</p>
6.4. Элементы h1, h2, h3, h4, h5 и h6
Данные элементы представляют заголовки соответствующего уровня. Элементы не
имеют атрибутов.
<h1>2. Структура программы</h1>
<p>Программа на языке С++ состоит из директив препроцессора, указаний
объявлений переменных и/или констант, объявлений и определений функций.</p>
<h2>2.1. Объявление переменной</h2>
<p>Объявление переменной задаёт имя и атрибуты переменной.</p>
компилятору,
6.5. Элемент hr
Элемент hr представляет тематический разрыв между частями документа. Отображается в
виде линии. Элемент не имеет атрибутов.
31
<p>Абзац 1</p>
<hr>
<p>Абзац 2</p>
6.6. Элемент li
Элемент li представляет элемент нумерованного или маркированного списка. Если
элемент входит в нумерованный список, он может иметь атрибут value, который задаёт номер
элемента списка. Таким образом, элементы списка могут иметь непоследовательную нумерацию.
6.7. Элемент ol
Элемент ol представляет нумерованный список. Элементы списка должны быть
элементами li. Элемент ol может иметь следующие атрибуты – start, type и reversed. Атрибут start
задаёт номер первого элемента списка. Атрибут type задаёт тип нумерации: 1 – числа, a – малые
латинские буквы, A – большие латинские буквы, i – римские цифры, I – большие римские цифры.
Атрибут reversed задаёт нумерацию в обратном порядке.
<ol>
<li>
<li>
<li>
<li>
<li>
</ol>
Элемент
Элемент
Элемент
Элемент
Элемент
1
2
3
4
5
<ol>
<li> Элемент 1
<li> Элемент 2
<li value = 5> Элемент 3
<li> Элемент 4
<li> Элемент 5
</ol>
<ol type = i>
<li> Элемент
<li> Элемент
<li> Элемент
<li> Элемент
<li> Элемент
</ol>
1
2
3
4
5
<ol type = a start = 5>
<li> Элемент 1
<li> Элемент 2
<li> Элемент 3
<li> Элемент 4
<li> Элемент 5
</ol>
6.8. Элемент ul
Элемент ul представляет маркированный список. Элементы списка должны быть
элементами li. Элемент не имеет атрибутов. Хотя элемент ul не имеет атрибута type, как элемент
ol, тип маркировки можно изменить с помощью таблиц стилей CSS.
<ul>
<li>
<li>
<li>
<li>
<li>
</ul>
Элемент
Элемент
Элемент
Элемент
Элемент
1
2
3
4
5
32
6.9. Элемент br
Элемент br представляет разрыв строки. Элемент не имеет атрибутов.
<p> Строка 1 <br> Строка 2 </p>
6.10. Элементы i и b
Элементы i и b позволяют выделить определённые части текста. По историческим
причинам содержимое элемента i выделяется курсивом, а содержимое элемента b – жирным
шрифтом. Однако таблицы стилей CSS позволяют изменить способ выделения содержимого
элементов. Элементы не имеют атрибутов.
Различные <i>способы</i> <b>выделения</b> <b><i>текста</i></b>.
6.11. Элементы em и strong
Элемент em позволяет выделить часть текста. Элемент strong позволяет выделить особо
важные части текста. Элементы не имеют атрибутов.
Различные <em>способы</em> <strong>выделения</strong> <strong><em>текста</em></strong>.
6.12. Элементы sub и sup
Элементы sub и sup позволяют задать надстрочные и подстрочные индексы. Элементы не
имеют атрибутов.
x<sup>2</sup> <br> x<sub>2</sub>
6.13. Элемент span
Элемент span не имеет определённого значения. Он используется для выделения части
текста. Атрибут class позволяет отнести выделение к тому или иному классу, а таблицы стилей –
задать способ выделения содержимого элемента. Элемент не имеет атрибутов.
6.14. Элемент div
Элемент div не имеет определённого значения. Это элемент-контейнер, который
используется для объединения нескольких элементов в единое целое. Однако этот элемент
должен использоваться лишь в тех случаях, когда не подходят другие элементы-контейнеры.
Элемент не имеет атрибутов.
6.15. Элемент section
Элемент section представляет семантически объединённую часть документа, например,
главу или раздел. Элемент не имеет атрибутов.
6.16. Элемент article
Элемент article представляет независимую часть содержимого документа. Элемент не
имеет атрибутов.
6.17. Элемент nav
Элемент nav представляет часть веб-страницы, содержащую ссылки на части страницы
или на другие страницы сайта. Элемент не имеет атрибутов. В принципе, нет необходимости
использовать этот элемент для группировки ссылок документа, но использование элемента nav
подчёркивает смысловое наполнение выделенной части страницы.
6.18. Элемент aside
Элемент aside представляет часть страницы, которая содержит дополнительную
информацию. Этот элемент обычно отделяется от основного содержимого. Элемент не имеет
атрибутов.
6.19. Элементы header и footer
Данные элементы представляют заголовок раздела и заключительную информацию
раздела. Элементы не имеют атрибутов.
33
6.20. Элемент address
Элемент address содержит контактную информацию. Элемент не имеет атрибутов.
6.21. Элемент pre
Элемент pre представляет часть текста документа, которая отображается в соответствии с
форматированием, используемым в HTML-файле. Обычно используется для вывода
компьютерного кода. Элемент не имеет атрибутов.
6.22. Элемент blockquote
Элемент blockquote представляет цитату из другого источника. Элемент может иметь
атрибут cite, который должен содержать url-адрес источника цитаты.
6.23. Элемент q
Элемент q представляет часть текста, являющуюся цитатой. Элемент может иметь
атрибут cite, который должен содержать url-адрес источника цитаты.
6.24. Элемент abbr
Элемент abbr представляет аббревиатуру или сокращение. Элемент может иметь атрибут
title, который в этом случае должен содержать расшифровку аббревиатуры.
34