2. Лекция: Структура HTML-документа и элементы разметки заголовка документа
2. Лекция: Структура HTML-документа и элементы разметки за.........
Сообщений 1 страница 10 из 15
Поделиться22009-03-11 13:34:48
HTML-документ — это один большой контейнер, который начинается с тега <HTML> и заканчивается тегом </HTML>:
<HTML>Содержание документа</HTML>
Контейнер HTML или гипертекстовый документ состоит из двух других вложенных контейнеров: заголовка документа (HEAD) и тела документа (BODY). Рассмотрим простейший пример классического документа.
<HTML>
<HEAD>
<TITLE>Простейший документ</TITLE>
</HEAD>
<BODY TEXT=#0000ff BGCOLOR=#f0f0f0>
<H1>Пример простого документа</H1>
<HR>
Формы HTML-документов
<UL>
<LI>Классическая
<LI>Фреймовая
</UL>
<HR>
</BODY>
</HTML>
Компания Netscape Communication расширила классическую форму документа возможностью организации фреймов (кадров), позволяющих разделить рабочее окно программы просмотра на несколько независимых фреймов. В каждый фрейм можно загрузить свою страницу HTML. Приведем пример документа с фреймами.
<HTML>
<HEAD>
<TITLE>Документ с фреймами</TITLE>
</HEAD>
<FRAMESET COLS="30%,*">
<FRAME SRC=frame1.htm NAME=LEFT>
<FRAME SRC=frame2.htm NAME=RIGHT>
</FRAMESET>
</HTML>
Поделиться32009-03-11 13:35:20
Назначение заголовка
Заголовок HTML-документа является необязательным элементом разметки. В HTML 2.0 предлагалось вообще отказаться от элементов HEAD и BODY. В то время в HTML не было элементов, которые использовались одновременно и в заголовке, и в теле документа. Современная практика HTML-разметки такова, что почти в каждом документе есть HTML-заголовок.
Первоначально существование заголовка определялось необходимостью именования окна браузера. Это достигалось за счет элемента разметки TITLE:
<HTML>
<HEAD>
<TITLE>Это заголовок</TITLE>
...
</HEAD>
<BODY>
...
</BODY>
</HTML>
Поделиться42009-03-11 13:35:45
Отображение содержания элемента TITLE
Однако задумывался заголовок для несколько иных целей. Исходя из общих соображений, связанных с теорией и практикой разработки и эксплуатации гипертекстовых систем, все гипертекстовые связи информационных узлов принято разделять на контекстные и общие.
Контекстные гипертекстовые связи соответствуют определенному месту документа — контексту. В HTML такие связи реализованы в виде гипертекстовых ссылок (элемент A (anchor)). Фактически до реализации таблиц описателей стилей в современных браузерах это был единственный вид связей, которыми мог управлять автор HTML-документа.
Общие гипертекстовые связи определяются не частью документа (контекстом), а всем документом целиком. Например, быть предыдущим по отношению к другому документу или следующим — это общая гипертекстовая связь, которая позволяет организовать так называемый "линейный" просмотр информационных узлов гипертекстовой сети.
Реализация такого сорта ссылок уже давно является частью проектов W3C (Arena, Amaya). В коммерческих браузерах такой механизм реализован только для описателей стилей (элемент разметки LINK).
Важную роль заголовок HTML-документа играет в JavaScript. Существует принципиальная разница между заголовком и телом документа при использовании элемента разметки SCRIPT. Она заключается в определении зоны видимости функций и переменных. Переменные и функции, определенные в заголовке документа, относятся ко всему окну браузера. Это значит, что к ним можно обратиться из любого места документа и изменить их значения. Кроме того, к ним можно обратиться из другого окна или фрейма. Фактически, это глобальные переменные. При работе с многослойными документами переменные и функции тела относятся к слоям, что делает доступ к ним неудобным.
Еще одной функцией заголовка HTML-документа является управление HTTP-обменом через элемент разметки META. При современной практике размещения Web-узлов компаний на серверах провайдеров администраторы этих узлов могут не иметь возможности управлять программой-сервером. В этом случае для управления обменом остается только одна возможность — через заголовок HTML-документа.
Нельзя также не упомянуть еще об одном важном назначении заголовка HTML-документа — поисковом образе документа для индексирования роботами поисковых систем. Элемент META позволяет хранить списки ключевых слов и описания документа, которые будут использоваться для составления индекса поисковой системы и появляться в качестве описания документа в случае выдачи ссылки на него при поиске по ключевым словам.
Поделиться52009-03-11 13:36:03
Основные контейнеры заголовка
Основные контейнеры заголовка — это элементы HTML-разметки, которые наиболее часто встречаются в заголовке HTML-документа, т.е. внутри элемента разметки HEAD.
Мы рассмотрим только восемь элементов разметки, включая сам элемент разметки HEAD:
HEAD (элемент разметки HEAD);
TITLE (заглавие документа);
BASE (база URL);
ISINDEX (поисковый шаблон);
META (метаинформация);
LINK (общие ссылки);
STYLE (описатели стилей);
SCRIPT (скрипты).
Чаще всего применяются элементы TITLE, SCRIPT, STYLE. Использование элемента META говорит об осведомленности автора о правилах индексирования документов в поисковых системах и возможности управления HTTP-обменом данными. BASE и ISINDEX в последнее время практически не применяются. LINK указывают только при использовании внешних относительно данного документа описателей стилей.
Поделиться62009-03-11 13:36:26
Элемент разметки HEAD
Элемент разметки HEAD содержит заголовок HTML-документа. Данный элемент разметки не является обязательным. При наличии тега начала элемента разметки желательно использовать и тег конца элемента разметки. По умолчанию элемент HEAD закрывается, если встречается либо тег начала контейнера BODY, либо тег начала контейнера FRAMESET. Атрибутов у тега начала контейнера нет, хотя в DTD HTML один необязательный атрибут прописан. Синтаксис контейнера HEAD в общем виде выглядит следующим образом:
<HEAD profile="restor.rusff.me">
Это пример
</HEAD>
Контейнер заголовка служит для размещения информации, относящейся ко всему документу в целом. Необязательный атрибут PROFILE указывает на внешний файл META-тегов. В качестве значения этого атрибута указывается URL данного файла.
Поделиться72009-03-11 13:38:22
Элемент разметки TITLE
Элемент разметки TITLE служит для именования документа в World Wide Web. Более прозаическое его назначение — именование окна браузера, в котором просматривается документ. Состоит контейнер из тега начала, содержания и тега конца. Наличие тега конца обязательно. Тег начала элемента не имеет специфических атрибутов.
В различных браузерах алгоритм отображения элемента TITLE может отличаться. Так, в некоторых руководствах предлагается создать бегущую строку в заголовке документа, указав несколько последовательных контейнеров TITLE:
<TITLE>И</TITLE>
<TITLE>Ин</TITLE>
<TITLE>Инт</TITLE>
<TITLE>Инте</TITLE>
<TITLE>Интер</TITLE>
...
<TITLE>Интернет-Restor</TITLE>
<TITLE>Интернет-Форум</TITLE>
Такой механизм на современных компьютерах не работает. При этом следует учитывать, что в отличие от реализации "бегущей" строки средствами JavaScript, лидирующие пробелы в заголовке игнорируются.
При выборе текста для содержания контейнера TITLE следует учитывать, что отображается он системным шрифтом, так как является заголовком окна браузера. В нелокализованных версиях операционных систем и графических оболочек русский текст содержания элемента TITLE будет отображаться абракадаброй.
Синтаксис контейнера TITLE в общем виде выглядит следующим образом:
<TITLE>название документа</TITLE>
Заголовок не является обязательным контейнером документа. Его можно опустить. Роботы многих поисковых систем используют содержание элемента TITLE для создания поискового образа документа. Слова из TITLE попадают в индекс поисковой системы. Из этих соображений элемент TITLE всегда рекомендуется использовать на страницах Web-узла.
Поделиться82009-03-11 13:39:40
Элемент разметки BASE
Элемент разметки BASE служит для определения базового URL для гипертекстовых ссылок документа, заданных в неполной (частичной) форме. Кроме того, BASE позволяет определить мишень (окно) загрузки документа по умолчанию при выборе гипертекстовой ссылки текущего документа.
Разметка гипертекстовых ссылок обычно выполняется как разметка в частично заданных (относительных) адресах, когда URL задается относительно текущего местоположения документа.
<A HREF=../next_level/document.html>...</A>
В этом случае в качестве базы по умолчанию выбирается каталог, в котором размещен HTML-документ (../). Такой стиль разметки удобен тем, что при переносе всего дерева документов в другое место не потребуется менять систему гипертекстовых ссылок внутри документов. Кроме того, распространению этого стиля способствует и сама архитектура World Wide Web. Наиболее тесные связи между документами задаются только в рамках одного Web-узла. Связей данного узла с остальными существенно меньше, и их можно прописать непосредственно в ссылках в полной форме.
Контейнер BASE можно использовать вне документа, в заголовке или теле документа. При этом область действия базового адреса определяется от места размещения контейнера до следующего контейнера BASE.
<BASE HREF=https://restor.rusff.me/index.php>
<HTML>
<HEAD>
<BASE HREF=https://restor.rusff.me/viewtopic.php>
... </HEAD>
<BODY>
<BASE HREF=https://restor.rusff.me/viewtopic.php>
... </BODY>
</HTML>
Поделиться92009-03-11 13:41:37
Наиболее часто BASE встречается на страницах узлов, которые имеют "зеркала". Часть документов основного сервера по разным причинам на "зеркальный" сервер не переносится. В этом случае документ с принудительно заданным базовым URL всегда будет ссылаться на основной сервер. Он оказывается "белой вороной" среди прочих документов Web-узла. При этом такая схема часто используется в совокупности с запретом на кэширование данного документа как клиентом (браузером), так и proxy-серверами.
Существуют различия и при определении базового URL по умолчанию при обращении к страницам, которые различны по своей природе. Если для обычного файла базовым адресом по умолчанию является адрес каталога, где хранится данный файл, то для страниц, которые генерируются "на лету", возможны и другие базовые адреса по умолчанию. Например, для страниц, сгенерированных CGI-скриптом, адресом по умолчанию является URL данного скрипта. Если из такой страницы снова вызвать скрипт, как частично заданную ссылку, то имя скрипта будет передано в качестве параметра скрипту, который сгенерировал данную страницу.
<A HREF=https://restor.rusff.me/viewtopic.php?name=value>...</A>
Базовый адрес: http://https://restor.rusff.me/cgi-bin/script/restor.rusff.me
Если скрипт вызовет сам себя по частично заданной ссылке, то он себя не найдет.
Возможность определения мишени загрузки позволяет не указывать атрибут TARGET в теге начала контейнера A (anchor):
<A HREF=restor.rusff.me TARGET=left>Restor</A>
Потребность в этом возникает при организации постоянно отображаемых меню. Такое меню может быть реализовано либо во фрейме, либо в окне. При этом информационные страницы Web-узла, которые загружаются при активизации гипертекстовых ссылок, будут загружаться в другое окно или фрейм.
Особенно полезен атрибут TARGET на страницах с вызовом скриптов, если результат работы скрипта нужно загрузить в определенное окно (фрейм).
Тег начала контейнера содержит один обязательный атрибут HREF, и может содержать один необязательный атрибут TARGET. Синтаксис контейнера BASE в общем виде выглядит следующим образом:
<BASE HREF="https://restor.rusff.me/userlist.php">
<BASE HREF=https://restor.rusff.me/userlist.php
TARGET=new>
Применение BASE в современных документах ограничено в силу разных причин. В сложных случаях можно пользоваться указаниями URL в полной форме.
Поделиться102009-03-11 13:41:59
Элемент разметки ISINDEX
Элемент разметки ISINDEX используется для указания поискового шаблона и унаследован от ранних версий HTML. В HTML 4.0 этот контейнер не определен. Утрата данного контейнера объясняется широким применением форм и CGI-скриптов. Тем не менее все браузеры его поддерживают.
Шаблон ввода ключевых слов при наличии данного контейнера в заголовке HTML-документа отображается в виде дополнительного поля ввода рабочей области браузера, что нарушает компоновку HTML-страниц, выполненных с применением современных средств разметки. Больше всего ISINDEX подходит для документов с компоновкой в стиле HTML 2.0.
<HTML>
<HEAD>
<ISINDEX>
</HEAD>
<BODY>
...
</BODY>
</HTML>