Опубликован: 04.05.2010 | Уровень: для всех | Доступ: платный
Лекция 2:

Создание статического содержания. HTML

< Лекция 1 || Лекция 2: 1234 || Лекция 3 >
Аннотация: Данная лекция освещает основы языка разметки HTML. Рассматривается структура HTML-документа, определение типа документа (DTD), основные теги. В конце лекции приводятся основные различия XHTML и 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 -документа на следующем примере:

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html>
3 <head>
4 <!-- Этот раздел предназначен для заголовка страницы и технической информации. -->
5 <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
6 <meta http-equiv="Content-Language" content="ru"/>
7 <meta name="description" content="Это тестовая страница." />
8 <meta name="keywords" content="HTML, CSS, DTD, теги" />
9 <meta name="robots" content="index, follow" />
10 <title>Тестовая страница</title>
11 <link type="image/x-icon" href="images/favicon.ico" rel="shortcut icon" />
12 <link type="text/css" href="reset.css" rel="Stylesheet" />
13 <link type="text/css" href="main.css" rel="Stylesheet" />
14 <script type="text/javascript" src="jquery-1.3.2.min.js"></script>
15 </head>
16 <body>
17 <div class="container">
18 <NOINDEX>
19 <div class="header">
20 <div class="navArea">
21 <table cellpadding="0" cellspacing="0" border="0">
22 <tr>
23 <td>
24 <h1>
25 <a href="index.html" title="На главную">Главная<span /> </a>
26 </h1>
27 </td>
28 <td>
29 <a href="http://www.yandex.ru" title="Яндекс">Яндекс</a>
30 </td>
31 <td>
32 <a href="#" title="Услуги">Услуги</a>
33 </td>
34 <td>
35 <a href="#" title="Товары">Товары</a>
36 </td>
37 <td>
38 <a href="#" title="Контактная информация">Контактная информация</a>
39 </td>
40 </tr>
41 </table>
42 </div>
43 </div>
44 </NOINDEX>
45 <div class="textArea">
46 <div class="leftMenu">
47 <ul>
48 <li>
49 <span>Общее описание</span>
50 </li>
51 <li>
52 <a href="advantages.html" title="Преимущества">Преимущества</a>
53 </li>
54 </ul>
55 </div>
56 <div class="mainText">
57 <h2>Описание тестовой страницы</h2>
58 <p>HTML (от&nbsp;англ. HyperText Markup Language&nbsp;&mdash; &laquo;язык разметки гипертекста&raquo;)&nbsp;&mdash; стандартный язык разметки документов во&nbsp;Всемирной паутине. Большинство веб-страниц создаются при помощи языка HTML (или XHTML). Язык HTML интерпретируется браузером и&nbsp;отображается в&nbsp;виде документа, в&nbsp;удобной для человека форме.</p>
59 <p>HTML является приложением (&laquo;частным случаем&raquo;) SGML (стандартного обобщенного языка разметки) и&nbsp;соответствует международному стандарту ISO 8879. XHTML&nbsp;же является приложением XML.</p>
60 <p><img src="images/ex.jpg" alt="Картинка" /></p>
61 </div>
62 </div>
63 <NOINDEX>
64 <div class="footer">
65 <div class="downMenu">
66 <div style="padding-top:7px; padding-bottom: 5px;">&copy;&nbsp;2009-2010 Examle</div>
67 <div>E-mail:&nbsp;<a href="mailto:mailbox@example.com">mailbox@example.com</a></div>
68 </div>
69 </div>
70 </NOINDEX>
71 </div>
72 </body>
73 </html>

Данный HTML -код отображается в браузере, как показано на Рис. 2.1.

 Пример отображения HTML-страницы

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

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

< Лекция 1 || Лекция 2: 1234 || Лекция 3 >
Владимир Тадеуш
Владимир Тадеуш
Украина
Кирилл Дубовик
Кирилл Дубовик
Россия, Петрозаводск