Добавил:
Upload Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз: Предмет: Файл:
Ekzamen_IP.doc
Скачиваний:
29
Добавлен:
19.03.2016
Размер:
625.15 Кб
Скачать

Структура гипертекстового документа.

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

Начнем со структуры HTML документа. В простом виде можно записать ее в следующем виде:

<html> <head> <!-- Заголовок документа --> </head> <body> <!-- тело документа --> </body>

</html>

Сохраняем документ под именем index.html и открываем его в браузере. Что мы видим? Ничего - пустая страница. Разберем этот пример и начнем ее заполнение.

Элементы HTML представляют собой теги. Теги - это ключевые слова, заключенные в угловые скобки. Теги могут быть одинарными (например, горизонтальная черта <hr>) или парными. Во втором случае элемент состоит из открывающегося тега (например, <html>) и закрывающегося тега (</html>). Действие элемента распространяется на область между открывающимся и закрывающимся тегом.

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

Приведенной структуры достаточно для создания простых HTML документов для личных целей, но она не удовлетворяет стандарту. Главная ошибка заключается в том, что не указан в каком стандарте представлен документ. Стандарт прописывается первой строкой до тега <html>. Посмотрим какие основные стандарты существуют.

Для HTML 4.01

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"

"http://www.w3.org/TR/html4/frameset.dtd">

Для XHTML 1.0

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

Для XHTML 1.1

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"

"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

Strict, Transitional, Frameset - означают строгую (верстка не должна содержать отклонений от стандарта) спецификацию, переходную (ошибки игнорируются, для чайников) и для сайтов использующих фреймы (а такие еще есть?). Указание типа документа чувствительно к регистру, поэтому лучше ее копировать из приведенных здесь примеров для избежания ошибок.

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

Перейдем к разделу заголовка. В нем указывается заголовок страницы (элемент title), META-данные и другая служебная информация. Здесь мы остановимся только на заголовке, остальные элементы рассмотрим в соответствующих темах (отметим только два элемента, отвечающих за кодировку и CSS).

Добавим внутри элемента head строку <title>Структура документа</title> и откроем страницу в браузере. В верхней верхней строке браузера мы видет то, что указали внутри элемента title. Кроме того, эта информация используется браузером для обозначения ссылок, когда вы добавляете страницу в закладки.

Для правильного отображения страницы мы должны задать в какой кодировке написан наш документ. Для этого добавляет строку

<meta http-equiv="content-type" content="text/html;charset=windows-1251" />

Здесь мы указываем стандартную виндоуз-кодировку windows-1251. Конечно, указать это мало, необходимо, чтобы сам документ был набран в этой кодировке. Также стандартной является кодировка utf-8 (уникод, поддерживает расширенный набор символов).

Так же укажем формат для каскадных таблиц стилей с помощью строки

<meta http-equiv="Content-Style-Type" content="text/css" />

Тело документа (элемент body) содержит визуальную информацию, т.е. ту, что будет непосредственно отображаться в окне браузера. Добавим строчку "Код документа содержит правильную структуру".

Итак, окончательный строгий вариант (который мы можем использовать в качестве шаблона для других документов) следующий:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<!-- Заголовок документа -->

<title>Структура документа</title>

<meta http-equiv="content-type"

content="text/html;charset=windows-1251" />

<meta http-equiv="Content-Style-Type" content="text/css" />

</head>

<body>

<!-- тело документа -->

Код документа содержит правильную структуру

</body>

</html>

В итоге мы получили шаблон документа для выбранного нами стандарта.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">

HTML5: Для всех документов.

HTML 4.01: Строгий синтаксис HTML. Переходный синтаксис HTML. В HTML-документе применяются фреймы.

XHTML 1.0: Строгий синтаксис XHTML. Переходный синтаксис XHTML. Документ написан на XHTML и содержит фреймы. XHTML мобильного профиля, добавляет специфические элементы для мобильных телефонов.

XHTML 1.1: Никакого деления на виды это определение не имеет, синтаксис один и подчиняется четким правилам.

Элемент <!DOCTYPE> предназначен для указания типа текущего документа — DTD (document type definition, описание типа документа). Это необходимо, чтобы браузер понимал, как следует интерпретировать текущую веб-страницу, поскольку HTML существует в нескольких версиях, кроме того, имеется XHTML (EXtensible HyperText Markup Language, расширенный язык разметки гипертекста), похожий на HTML, но различающийся с ним по синтаксису. Чтобы браузер «не путался» и понимал, согласно какому стандарту отображать веб-страницу и необходимо в первой строке кода задавать <!DOCTYPE>.

Существует несколько видов <!DOCTYPE>, они различаются в зависимости от версии языка, на которого ориентированы. В табл. 1. приведены основные типы документов с их описанием.

Табл. 1. Допустимые DTD

DOCTYPE

Описание

HTML 4.01

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

Строгий синтаксис HTML.

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

Переходный синтаксис HTML.

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

В HTML-документе применяются фреймы.

HTML 5

<!DOCTYPE html>

Для всех документов.

XHTML 1.0

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

Строгий синтаксис XHTML.

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

Переходный синтаксис XHTML.

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

Документ написан на XHTML и содержит фреймы.

XHTML 1.1

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

Разработчики XHTML 1.1 предполагают, что он постепенно вытеснит HTML. Никакого деления на виды это определение не имеет, синтаксис один и подчиняется четким правилам.

Тут вы можете оставить комментарий к выбранному абзацу или сообщить об ошибке.

Оставленные комментарии видны всем.

Соседние файлы в предмете [НЕСОРТИРОВАННОЕ]