Язык HTML: создание html-страницы

Следующим этапом необходимо указать, какому стандарту будет соответствовать создаваемый html-документ. Соответствие определенному стандарту указывается с помощью определения типа документа (DTD) в начале страницы после объявления XML. Если страница соответствует стандарту XHTML 1.1, то необходимо добавить данный фрагмент кода:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

Существуют три версии стандарта XHTML 1.0, который основывается на более старых методах кодирования, которые применяются и распознаются большинством современных браузеров.

XHTML 1.0 Strict – html-документ строго соответствует стандартам XHTML 1.0, что означает использование методов кодирования, очень близких по ограничениям стандартам XHTML 1.1. Если страница соответствует данному стандарту, то необходимо добавить данный фрагмент кода:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

XHTML 1.0 Transitional – html-документ в переходном соответствии, что позволяет использовать исторически распространенные методы кодирования, которые не разрешают более строгие стандарты.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

XHTML 1.0 Frameset – html-документ находится в соответствии с фреймами, что позволяет разделить окно браузера на отдельные подокна (фреймы), каждое из которых может выводить разные страницы Web.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

3. Корневой элемент <html>

После объявления типа документа DTD начинается собственно создание самого html-документа с корневого элемента <html>. Элемент <html> является корневым элементом для любого html-документа, именно пара тегов <html>... </html> обозначает, что всё, находящееся внутри данной пары тэгов, должно интерпретироваться как документ, написанный на языке HTML.

Но в языке XHTML к открывающемуся тегу <html> необходимо добавить еще один компонент, указывающий пространство имен применяемого стандарта, то есть, расположение в Web применяемого для страницы стандарта XHTML. Для любого стандарта XHTML корневой элемент кодируется следующим образом:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">
.....
</html>

4. Элементы head и title. Кодировка.

После открывающегося тега <html> необходимо создать раздел head, добавив пару тегов <head>...</head>. Раздел head - содержит служебные элементы, необходимые для отображения документа, но которые не отображаются в окне браузера.

Элементы в разделе head

элемент	назначение
title	позволяет задать заголовок документа. Данный заголовок будет отображаться в строке заголовка браузера. Единственный обязательный элемент раздела head!
meta	используется для множества целей, в основном для указания кодировки
script	позволяет включать скрипты непосредственно в документ или, что предпочтительней, с его помощью указывается ссылка на необходимый для использования скрипт.
style	позволяет размещать информацию о стиле (встроенный стиль)
link	чаще всего служит для связи с внешней таблицей стилей

Итак после открывающего тега <head> необходимо обязательно включить теги <title> ...</title>. Любой текст, содержащийся в этом элементе, вместе с названием браузера, будет отображаться в строке заголовка браузера.

Затем необходимо указать используемую кодировку. В настоящее время самой распространенной кодировкой русского алфавита является Кириллица-windows.

5. Элемент body

После закрывающегося тега </head> следует элемент body. Между тегам

<body>
...
</body>

размещается вся отображаемая часть html-документа, тело документа.

6. Валидация страниц Web

Консорциум WWW обеспечивает службу валидации страниц Web для проверки страницы на соответствие стандартам. Хотя проверка страниц на соответствие не требуется для вывода страниц в браузере, но все-таки желательно выполнять валидацию страниц, чтобы убедиться, что они на самом деле соответствуют стандартам. Служба валидации W3C доступна по адресу:

http://validator.w3.org

Существует три возможности для проверки страниц. Можно ввести URL страницы (убедившись, что страница доступна в Web), можно загрузить документ Web со своего локального ПК или можно скопировать свой код в текстовое поле. После нажатия кнопки "Check" выполняется валидация и выводится страница отчета.

6. Особенности тегов разметки в стандарте XHTML

1. Имена атрибутов и элементов (теги) должны быть набраны строчными буквами (в нижнем регистре).

2. Значения атрибутов должны всегда заключаться в кавычки

ПРАВИЛЬНО: значения атрибутов в кавычках

НЕПРАВИЛЬНО: значения атрибутов без кавычек

3. Все теги либо должны иметь закрывающие теги, либо записываться в специальной форме (как описано ниже).

Большинство тегов разметки имеют контейнерный тип т.е. состоят из открывающего и закрывающего тегов. Например тег заголовка <h1>…</h1>. Эта пара контейнерных тегов охватывает данные, к которым применяется форматирование заголовок. Не все теги являются контейнерными, то есть они не "окружают" данные, которые будут форматироваться, а кодируются единственным, автономным тегом. Такие пустые теги кодируются специальным образом, чтобы соответствовать стандартам XHTML: Они должны содержать символ наклонной черты (/) непосредственно перед закрывающей угловой скобкой. Например, одиночный тег для создания разрыва строки в пределах абзаца кодируется как <br />. Такое специальное кодирование указывает, что тег служит одновременно открывающим и закрывающим.

4. Все теги должны вкладываться друг в друга

ПРАВИЛЬНО: вложенные элементы.

<p>это выделенный <em>абзац</em>.</p>

НЕПРАВИЛЬНО: перекрывающиеся элементы

<p>это выделенный <em>абзац.</p></em>

7. Комментарии в XHTML

Для описания различных разделов документа Web желательно помещать в нем комментарии, которые являются общими описаниями или пояснениями кода XHTML. Они служат полезным напоминанием назначения или содержания разделов кода, когда придется через какое-то время вернуться к редактированию документа.

Комментарии помещают между парой тегов . Эти теги могут окаймлять однострочный комментарий, как показано выше, или несколько строк кода XHTML. Любой код или текст, находящийся между этими символами, игнорируется браузером и не выводится на странице. Кроме размещения примечаний и заметок в документе, теги комментариев можно использовать для временного отключения вывода браузером части кода. Это часто бывает полезно во время "отладки" страницы, то есть во время поиска ошибок с помощью частичного удаления разделов кода, пока проблема не будет изолирована.

Задание

1. Создайте web-страницу соответствующую стандарту XHTML 1.1 или XHTML 1.0 Strict (в блокноте: Утилиты – Блокнот Wine или Kwriter)

2. Создайте заголовок документа и основное содержание страницы (3-4 строчки) используя теги абзаца, разрыв в пределах абзаца и заголовка, добавьте комментарий.

3. Зайдите на сайт службы валидации W3C и проверьте созданную страницу на соответствие стандартам.

Язык HTML: создание html-страницы

1. Стандарты кодирования XHTML

2. Объявление и идентификация документа