суббота, 12 октября 2013 г.

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

Как уже упоминалось выше, HTML - язык разметки гипертекста, но это не значит, что его требования предъявляются только к тексту. Стандарт языка HTML так же описывает и требования к структуре документа в целом, его частей и элементов, которые не видны простому пользователю.
В этом посте мы рассмотрим структуру страницы и устраним неудобства, которые проявлялись при работе с нашими страничками в предыдущих работах. С помощью нескольких строчек кода мы уйдем от необходимости вручную указывать кодировку страницы и очищать кеш, чтобы увидеть результат изменений в структуре страницы.


В общем случае html-документ состоит из "головы" и "тела". Голова (head) - содержит служебную информацию для браузера и не будет видна конечному пользователю. К такой информации относятся сведения о кодировке страницы, времени хранения в кеше, какие дополнительные файлы использовать для правильного отображения страницы и тому подобное. Голова в веб-документе выделяется тегами <head> ... </head>.
В теле (body) страницы находится собственно описание страницы - какие элементы в каком месте располагаются. Тело документа ограничено тегами <body> ... </body>.
Сам HTML документ должен начинаться и заканчиваться тегами <html> ... <html>.

Таким образом, структура документа должна быть следующей:

<!DOCTYPE HTML>

<html>

<head>
 </head>

<body>
</body>

</html>

Из листинга видно, что теги "head" и "body" находятся внутри тега "html". Первая строчка указывает, что тип этого документа - HTML.
Приступим к устранению неудобств, о которых я упоминал во вступлении.

Указываем кодировку


Для того, чтобы браузер корректно отображал нашу страничку явно укажем кодировку, в которой она сохранена. Для этого в "head" добавим метатег <meta charset="UTF-8">.
Создайте новый документ и введите код страницы как в листинге:

<html>
<head>
<meta charset="UTF-8">
</head>

<body>
<p>Проверяем корректность указания кодировки</p>
</body>
</html>

Рекомендую вам выделять части документа отступами, как в данном примере. Это позволит вам легко читать (понимать) ваш документ и поможет находить некоторые ошибки.
Сохраните документ в папку "c:\www\test\" с именем "primer3.html". Не забудьте проверить расширение файла и кодировку. Как это сделать читайте в посте "Основы HTML". Откройте новую вкладку браузера и в адресной строке укажите путь к новой странице - "test/primer.php". В результате ваших стараний браузер сразу корректно отобразит новый документ.



Таким образом, разместив специальный тег с указанием кодировки страницы в head-части документа мы ушли от необходимости в ручную менять набор символов. Этот маленький тег очень важен, так как неподготовленный пользователь, столкнувшись с нечитаемой информацией на вашей странице, скорее всего уйдет с нее, подумав "что-то сломалось" и не затрудняясь поиском правильного решения проблемы.

Запрещаем сохранять в кеш


Ранее,после каждого изменения, внесенного нами в нашу страницу, нам приходилось очищать кеш браузера, чтобы увидеть изменения. Добавим в head тег для решения этой проблемы.
<meta http-equiv="cache-control" content="no-cache">

После изменения документа вам придется сбросить кеш браузера еще раз, чтобы изменения вступили в силу. Но затем, когда браузер "увидит" новый тег, наша страница страница кешироваться не будет. Попробуйте проверить это самостоятельно добавив новые элементы в раздел body и обновив страницу.
На этом пока все. В следующем посте мы познакомимся с основами программирования и алгоритмами.

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

Отправить комментарий