HTML/Структура веб-страницы

Курс HTML является частью курса «Основы создания сайтов». Обучение проводится по учебному плану.

На первом уроке мы уже создали первую веб-страницу. Но мы забыли некоторые важные «мелочи», которые необходимы создания для корректного кода.

Структура веб-страницы.

Веб-страница состоит из трёх частей:

Информация о версии HTML,
Шапка веб-страницы, в которой содержится техническая информация (<head>),
Тело веб-страницы (<body>).

Информация о версии HTML

Информация об используемой версии HTML представляется в виде первой строки в исходном коде веб-страницы. Стандартом HTML предусмотрены три варианта такой информации:

1. HTML 4.01 Strict DTD^[1] — строгое соответствие стандарту. Это означает, что в исходный код веб-страницы входят только рекомендуемые стандартом элементы и атрибуты. Исходный код:

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

2. HTML 4.01 Transitional DTD — переходный тип, исходный код содержит и нерекомендуемые элементы и атрибуты (был создан для перехода со старых версий HTML). Исходный код:

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

3. HTML 4.01 Frameset DTD — аналогичен переходному, но исходный код может содержать фреймы. Исходный код:

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

4. HTML 5 Исходный код:

<!DOCTYPE html>

Шапка веб-страницы

Шапка веб-страницы содержит различную техническую информацию о веб-странице (например, название, ключевые слова, метаданные) и представляет собой набор элементов, которые не входят в графическое представление веб-страницы.

Шапка веб-страницы ограничивается элементом <head>, который мы изучили на первом уроке.

Мета-теги

Мета-теги описывают страницу с технической стороны.

Браузер сам может определить кодировку документа. Но лучше явно указать кодировку.

<!DOCTYPE html>
<html>
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      ...
   </head>
   <body>
      ...
   </body>
</html>

Вероятно, что http-equiv произошло от equivalent. Также имеется альтернативный вариант указания кодировки, который был добавлен в HTML5:

      <meta charset="utf-8">

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

      <meta name="keywords" lang="ru" content="слова, через, запятую">
      <meta name="description" lang="ru" content="Описание конкретно для текущей страницы">

Тело веб-страницы

Тело веб-страницы содержит графическое и информационное представление веб-страницы.

Тело веб-страницы ограничивается элементом <body>, который мы изучили на первом уроке.

Комментарии в HTML

Комментарии — это информация для разработчика веб-страницы, которая размещается в исходном коде, но не отображается на самой странице.

<!-- Это комментарий. -->
<!--
   Так тоже можно. 
-->

Задания

Добавьте в вашу учебную веб-страницу информацию о версии HTML.
Добавьте данные о кодировке на вашу веб-страницу.
Добавьте в исходный код вашей учебной веб-страницы информацию о себе, как об авторе, в виде комментария.
Создайте ещё несколько HTML-файлов для Вашего будущего сайта: page1.html, page2.html, ..., pageN.html, contacts.html, подготовьте и добавьте в них тексты. Не обязательно создавать оригинальные тексты и тем более не нужно их генерировать программно. Лучше, например, взять тексты из каких-нибудь старых энциклопедий или других книг (с истёкшими авторскими правами). См. также рерайтинг.

Примечания

↑ DTD (от англ. Document type declaration — объявление типа документа)

Смотри также

Учебный проект "15 puzzle"

Ссылки

HTML 4.01 Specification:The global structure of an HTML document

Перевод стандарта HTML 4.01

[1] DTD (от англ. Document type declaration — объявление типа документа)

[1]