Лекция: Язык разметки гипертекста HTML

HTML (HyperText Markup Language, язык разметки гипертекста) определяет, как и какие элементы должны располагаться на веб-странице. HTML не является языком программирования, это язык разметки документов (гипертекста). HTML определяет логическую структуру документа. Отметим, что в HTML имеются элементы(например font ), отвечающие за внешний вид (отображение) документа. Однако эти элементы крайне не рекомендуется использовать в HTML. Вид отображения документов устанавливается средствами CSS.

HTML отвечает за струстуру, CSS – внешний вид.

Стандарт HTML, как и другие стандарты для веб, разработан под руководством консорциума World Wide Web (World Wide Web Consortium, W3C). Стандарты и спецификации, в том числе и для языка HTML, можно найти на сайте World Wide Web Consortium www.3w.org

Сущестует несколько версий HTML. В 1999 году вышла последняя редакция языка — HTML 4.01. Эту версию часто называют динамический HTML (DHTML). DHTML использует объектную модель документа (DOM), которая описывает способ организации и названия объектов в браузере, а также определяет, какие объекты и свойства могут быть изменены и какие значения они могут принимать. Событийная модель описывает способ передачи управления сценариям, для реализации которых может быть использован язык сценариев JavaScript. С использованием динамического HTML сценарии могут вставлять, удалять и заменять блоки HTML. Браузер автоматически обновляет новые свойства и новый HTML-код.

Объявленная версия HTML 5.0 до настоящего времени (2012г.) не сертифицирована, хотя и полностью реализована.

Язык HTML используется для создания самых разных интерактивных документов с гиперссылками и элементами мультимедиа — Web-страниц, интерфейсов, презентаций, электронных книг и учебных пособий. Файлы с HTML-кодом — это обычные текстовые файлы, доступные для чтения, как программе, так и человеку. Благодаря этому HTML-страницы можно редактировать и просматривать на любом компьютере и в любой операционной системе.

HTML-документ создается с помощью HTML-редактора и сохраняется в виде текстового файла со стандартными расширением .html или .htm. Для просмотра HTML-документов используются Web-браузеры, интерпретирующие эти документы.

Разметка гипертекста средствами HTML происходит путем вставки в текст тегов (дескрипторов) — специальных кодовых слов, определяющих элементы форматирования. Для того чтобы теги отличались от остального текста, их заключают между знаками «больше» и «меньше», например: <b>, <a>, <img>. Рассмотрим пример:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" «www.w3.org/TR/html4/strict.dtd»>

<html>

<head>

<title>Моя первая веб-страница</title>

</head>

<body>

<h1>Заголовок страницы</h1>

<p align=center>Основной текст.</p>

</body>

</html>

Дескрипторы бывают контейнерные (парные) и неконтейнерные (одинарные). Контейнерный дескриптор состоит из двух частей — открывающего(старт-тега) и закрывающего(стоп-тега), — между которыми находится форматируемый текст, например:

<html> текст html документа </html>

Закрывающий тег отличается от открывающего наличием косой черты. Контейнерные теги бывают вложенными, например:

<i> курсив <b> жирный курсив </b> курсив </i>

При использовании вложенных тегов нужно следить за их последовательностью: тег, открытый первым, закрывается последним.

Одинарный тег состоит только из открывающего и не требует закрывающего тега. Встретив, например, такой тег <hr>, браузер выведет на экран горизонтальную разделительную линию. По правилам XHTML присутствие закрывающего тега обязательно, например, в конце тега можно поставить />.

DOCTYPE.

В начале html – документа помещается тег DOCTYPE, содержащий информацию о типе документа и используемой версии HTML. Указание типа документа позволяет браузеру проверить структуру документа на соответствие этим правилам и правильно его отобразить. В HTML существуют три варианта правил (dtd – описаний, загружаемых с сайта w3.org) HTML 4.01, устанавливаемых в DOCTYPE: Strict, HTML 4.01Transitional и HTML 4.01Frameset.

Строгий (Strict)- не содержит элементов, помеченных как «устаревшие» или «не одобряемые» (deprecated), например:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" «www.w3.org/TR/html4/strict.dtd»>

Переходный (Transitional) –может содержать устаревшие теги в целях совместимости для старых версий HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" «www.w3.org/TR/html4/loose.dtd»>

С фреймами (Frameset) – может содержать теги для создания наборов фреймов:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" «www.w3.org/TR/html4/frameset.dtd»>

Для последней версии HTML5 элемент DOCTYPE выглядит наиболее просто

<!DOCTYPE html>

Теги, атрибуты, значения

За названием тега через пробел могут помещатся атрибуты(параметры) тега и их значения.

<тег атрибут1=”значение” атрибут2=”значение”> Теги или Текст </тег>

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

· после имени открывающего тега через пробел могут следовать атрибуты

· атрибуты отделяют друг от друга пробелами

· порядок следования атрибутов произволен

· значения атрибутов записывают в ординарных или двойных кавычках после знака равенства

Спецификация html позволяет опускать кавычки, если значение атрибута состоит из одного слова из латинских букв и цифр. Если значение содержит несколько слов, разделенных запятыми или пробелами, либо специальные символы, то кавычки обязательны. В качестве примера приведем атрибут align=left|right| center. Этот атрибут может использоваться вместе с большим числом тегов и используется для выравнивания гипертекста.

В языке HTML безразлично, в каком регистре вы записываете названия тегов и их атрибуты. В одном документе можно использовать для написания тегов и верхний, и нижний регистр. В XML и XHTML используются только строчные буквы.

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

Любой html-документ заключается между тегами <html> и </html>, т.е. тег <html> открывает документ, а тег </html> закрывает его. Между этими двумя основными тегами располагается заголовочная часть документа <head> и его тело <body>.

<html>

<head>

</head>

<body>

</body>

</html>

Заголовочная часть документа <head>

Тег заголовочной части документа используется сразу после тега <html>. Данный тег описывает общие правила отображения документа в браузере, содержит вспомогательную информацию о документе, а также информацию для индексирования документа поисковыми машинами. Тег meta содержит служебную информацию, не отображаемую в окне браузера. Подробнее этот тег будет рассмотрен ниже.

Заголовок документа, ограниченный тегами <title> и </title>, отображается вверху экрана, отдельно от содержимого документа. Рассмотрим пример:

<html>

<head>

<title> Иванов И.И. </title>

</head>

<body>

Моя первая HTML-страница!

</body>

Тело документа <body>

Тело документа служит контейнером для контента сайта, а также параметров отображения сайта и размещается между тегами <body> и </body>. Это та часть документа, которая отображается как текстовая и графическая информация документа. Технически стартовые и завершающие теги типа <html>, <head> и <body> необязательны. Но настоятельно рекомендуется их использовать, поскольку использование данных тегов позволяет Web-браузеру разделить заголовочную и смысловую часть документа.

<html>

<head>

<title>Домашняя страница </title>

</head>

<body>

<h1> заголовок </h1>

<p> абзац </p>

</body>

</html>

Тег <body> может иметь атрибуты, которые в настоящее время являются устаревшими. Вместо них рекомендуется использовать таблицы стилей CSS. Атрибуты тега <body>:

Атрибуты	Описание
background	Атрибут задает графическое изображение, которое как черепица заполнит фон документа: body background="(url)(путь) имя файла"> Если файл с изображением разместить в том же каталоге, то (путь) указывать не нужно. Файл хранится в формате GIF или JPEG. Допускается использовать анимированное gif-изображение
bgcolor	задает цвет фона при помощи шестнадцатеричных значений интенсивности цветов RGB, или при помощи литерала. Синтаксис: <body bgcolor="#ff0000"> или <body bgcolor=«red»>
text	задает используемый цвет текста. По умолчанию текст будет черным. Синтаксис: <body text=" цвет ">
link	задает цвет гиперссылки (по умолчанию темно синий). Синтаксис: <body link=«цвет» >
alink	задает цвет активной гиперссылки, он меняет цвет гиперссылки в момент щелчка по ней мышью. Синтаксис: <body alink=«цвет» >
vlink	задает цвет посещенной гиперссылки: <body vlink=«цвет» >
topmargin	задает верхнюю границу страницы в пикселях: <body topmargin=”число”>
bottommargin	задает нижнюю границу страницы: <body bottommargin=”число”>
leftmargin	задает границу страницы слева: <body leftmargin=”число”>
rightmargin	задает границу страницы справа: <body rightmargin=”число”>

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

В следующем примере рассматривается документ в формате HTML 5. Отличие от HTML 4.01 начинаются в теге <!DOCTYPE HTML>

<!DOCTYPE html>

<html>

<head>

<title> Html-5 документ, заголовок</title>

</head>

<body>

<nav>Навигация</nav>

Секция

</section>

</article>

<footer>Подвал</footer>

</body>

В HTML5 введено несколько тегов для улучшения структуры документа:

header: в этом теге, конечно, лучше размещать заголовок секции;

footer: футер(подвал);

nav: для навигации появился отдельный тег;

section: тег относится к описанию части документа, и может использоваться с тегами h1-h6, а также быть частью статьи;

article: в теге лучше всего описывать запись в блоге или новостную заметку;

aside: в этом теге предлагается описывать некие данные, которые в целом не связаны с основным контентом страницы;

dialog: этим тегом может быть отмечен какой-либо разговор или интервью;

figure: в этом теге рекомендовано заключать встраиваемый контент – к примеру, видео, графику или аудио.

Чтобы новые элементы HTML5 отображались правильно как элементы уровня блоков, необходимо назначить им стиль:

header, footer, article, section, nav, menu, hgroup {

display: block;

}

HTML 5 вводит несколько новых элементов и атрибутов. Некоторые из них технически являются эквивалентами ‹div› и ‹span›, но имеют своё семантическое значение, например ‹nav› (навигационная панель) и ‹footer›. Другие элементы предоставляют новую функциональность, такие как ‹audio› и ‹video›. HTML 5 разработан так, что не поддерживающие его браузеры могут игнорировать элементы HTML 5. В отличие от четвёртой, пятая версия чётко прописывает правила лексического разбора, чтобы различные браузеры отображали один и тот же результат в случае некорректного синтаксиса. Некоторые устаревшие элементы HTML 4, такие как ‹font› и ‹center›, были удалены из HTML 5.
Пример веб-страницы HTML 5

<!DOCTYPE html>

<html>

<head>

<title> Html-5 документ, заголовок</title>

</head>

<body>

<h3>Header — Демонстрация</h3> <h6>Демонстрационный сайт</h6>

</hgroup>

</header>

<nav>

<ul>