Создание статического содержания. HTML
Презентацию к данной лекции Вы можете скачать 
здесь.
2.1. Основы языка разметки HTML
2.1.1. Основные сведения
HTML (HyperText Markup Language – "язык разметки гипертекста") – стандартный язык разметки документов во Всемирной паутине [1]. Большинство веб-страниц создаются при помощи языка HTML. Язык HTML интерпретируется браузером и отображается в виде документа, в удобной для человека форме. HTML является приложением SGML (стандартного обобщенного языка разметки) и соответствует международному стандарту ISO 8879.
Язык HTML был разработан британским ученым Тимом Бернерсом-Ли приблизительно в 1991-1992 годах в стенах Европейского совета по ядерным исследованиям в Женеве (Швейцария). HTML создавался как язык для обмена научной и технической документацией, пригодный для использования людьми, не являющимися специалистами в области верстки. HTML успешно справлялся с проблемой сложности SGML путем определения небольшого набора структурных и семантических элементов – дескрипторов [2]. Дескрипторы также часто называют " тегами ". С помощью HTML можно легко создать относительно простой, но красиво оформленный документ. Помимо упрощения структуры документа, в HTML внесена поддержка гипертекста. Мультимедийные возможности были добавлены позже.
Изначально язык HTML был задуман и создан как средство структурирования и форматирования документов без их привязки к средствам воспроизведения (отображения). В идеале, текст с разметкой HTML должен был без стилистических и структурных искажений воспроизводиться на оборудовании с различной технической оснащенностью. Однако современное применение HTML очень далеко от его изначальной задачи.
Текстовые документы, содержащие код на языке HTML (файлы с расширением .html или .htm), обрабатываются специальными приложениями, которые отображают документ в его форматированном виде. Такие приложения, называемые " Веб-браузерами " (просто "браузерами") или " Интернет-обозревателями ", предоставляют пользователю удобный интерфейс для запроса веб-страниц, их просмотра и, при необходимости, отправки введенных пользователем данных на сервер.
Наиболее популярными на сегодняшний день браузерами являются (по данным на январь 2010 г.) [3]:
- Internet Explorer – 62,12%;
- Mozilla Firefox – 24,43%;
- Google Chrome – 5,22%;
- Safari – 4,53%;
- Opera – 2,38%.
Спецификация HTML имеет несколько версий:
- RFC 1866 – HTML 2.0, одобренный как стандарт 22 сентября 1995 года;
- HTML 3.2 [4] – 14 января 1997 года;
- HTML 4.0 [5] – 18 декабря 1997 года;
- HTML 4.01 [6] – 24 декабря 1999 года;
- ISO/IEC 15445:2000 [7] (так называемый ISO HTML, основан на HTML 4.01 Strict) – 15 мая 2000 года;
- HTML 5 – в разработке.
Официальной спецификации HTML 1.0 не существует. До 1995 года существовало множество неофициальных стандартов HTML. Чтобы стандартная версия отличалась от них, ей сразу присвоили второй номер.
Версия 3 была предложена Консорциумом всемирной паутины ( W3C ) в марте 1995 года и обеспечивала много новых возможностей, таких как создание таблиц, "обтекание" изображений текстом и отображение сложных математических формул. Даже притом, что этот стандарт был совместим со второй версией, реализация его была сложна для браузеров того времени. Версия 3.1 официально никогда не предлагалась, и следующей версией стандарта HTML стала 3.2, в которой были опущены многие нововведения версии 3.0, но добавлены нестандартные элементы, поддерживаемые браузерами "Netscape" и "Mosaic".
HTML версии 4.0 содержит много элементов, специфичных для отдельных браузеров, но в то же время произошла некоторая "очистка" стандарта. Многие элементы были отмечены как устаревшие и нерекомендованные. В частности, элемент font, используемый для изменения свойств шрифта, был помечен как устаревший (вместо него рекомендуется использовать таблицы стилей CSS).
Начиная с 2004 года сообществом WHATWG (Web Hypertext Application Technology Working Group) ведется разработка HTML версии 5. Черновой вариант спецификации языка появился в Интернете 20 ноября 2007 года [7].
Также группой WHATWG разрабатывается спецификация Web Applications 1.0, часто неофициально называемая " HTML 5", которая расширяет HTML для лучшего представления семантики различных типичных страниц, например форумов, сайтов аукционов, поисковых систем, онлайн-магазинов и т. д.
2.1.2. Структура HTML-документа
HTML – это теговый язык разметки документов. Чтобы браузер понимал, что имеет дело не с простым текстом, а с особым элементом, который задает его форматирование, применяются теги [8]. Теги являются основой HTML и берутся в угловые скобки. Общий синтаксис написания тегов следующий.
<тег параметр1="значение" параметр2="значение"> <тег параметр1="значение" параметр2="значение">...</тег>
Теги бывают одиночными и парными (контейнеры). Одиночный тег используется самостоятельно, а парный может включать внутри себя другие теги или текст. У тегов допустимы различные параметры, которые разделяются между собой пробелом. Впрочем, есть теги, без всяких дополнительных атрибутов. Параметры условно можно подразделить на обязательные, они непременно должны присутствовать, и необязательные, их добавление зависит от цели применения.
Далее описаны некоторые рекомендации и свойства, которые относятся к тегам:
- теги не чувствительны к регистру;
- если для тега не добавлен какой-либо допустимый параметр, браузер будет подставлять значение, заданное по умолчанию;
- внутри тега между его параметрами допустимо ставить перенос строк;
- все параметры тегов рекомендуется брать в двойные или одинарные кавычки (хотя в современном браузере отсутствие кавычек не приведет к ошибкам);
- если какой-либо тег или его параметр был написан неверно, то браузер проигнорирует подобный тег ;
- существует определенная иерархия вложенности тегов (например, метатеги должны находиться внутри контейнера <HEAD>), причем если теги между собой равноценны в иерархии, то их последовательность не имеет значения;
- существует три состояния закрывающего тега:
- обязателен – закрывающий тег должен присутствовать всегда, иначе это приведет к ошибке при отображении документа;
- не требуется – для некоторых тегов вроде <BR> закрывающего тега нет в принципе;
- не обязателен – говорит о том, что разработчик может его, как добавить, так и опустить, к ошибке это не приведет;
- порядок параметров в любом теге не имеет значения и на результат отображения элемента не влияет.
Обычные веб-страницы состоят из двух разделов – заголовка (<HEAD>) и тела документа (<BODY>) [9]. Раздел заголовка может содержать текст и теги, но содержимое этого раздела не показывается напрямую на странице. Тело документа предназначено для размещения тегов и содержательной части.
Пример. Простейший HTML -документ
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<!-- Этот раздел предназначен для заголовка страницы и технической информации. -->
</head>
<body>
<!-- Этот раздел предназначен для размещения содержимого страницы. -->
</body>
</html>2.1.3. Состав HTML-документа
Рассмотрим более подробно структуру и состав HTML -документа на следующем примере:
Данный HTML -код отображается в браузере, как показано на Рис. 2.1.
Замечание: В представленном HTML -коде используется CSS, о котором будет рассказано в следующем разделе. Разберем отдельные строки нашего HTML -кода.