Создание статического содержания. 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.

увеличить изображение
Рис. 2.1. Пример отображения HTML-страницы

Замечание: В представленном HTML -коде используется CSS, о котором будет рассказано в следующем разделе. Разберем отдельные строки нашего HTML -кода.