Управляющие структуры Microsoft Office Front Page

Базовым элементом языка разметки гипертекста является — ТЕГ (дескриптор, маркер). Тег всегда заключен между скобками и имеет следующий вид:

Теги бывают одиночными и контейнерными. Контейнером называется пара: открывающий и закрывающий .

Контейнер

Открывающий тег служит для указания программе-браузеру начала какого-либо объекта или задания свойств объектов помещенных в контейнер. Закрывающий тег служит для указания программе-браузеру о конце объекта или окончания применения свойств, заданных в открывающем теге[2].

Атрибуты тега задают значения свойств данного объекта или объектов помещенных в контейнер. Значения свойств, содержащие пробелы, берутся в кавычки, в остальных случаях кавычки можно опустить.

HTML документ представляет собой обычный текстовый файл, содержащий маркированный тегами форматирования текст, а так же заданные специальными тегами ссылки на графические и прочие файлы мультимедиа, ссылки на другие документы HTML и ресурсы Internet.

Документ HTML начинается открывающим тегом и заканчивается закрывающим тегом. Между данной парой контейнерных тегов располагаются две другие основные части HTML документа: заголовок, заключенный в контейнер … и тело документа в контейнере …. Таким образом, структура простого HTML документа выглядит так:

Структура HTML документа [1].

— Начало документа.

ЗАГОЛОВОК ДОКУМЕНТА.

ТЕЛО ДОКУМЕНТА.

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

Ссылка состоит из двух компонентов: так называемого якоря (anchor) или элемента привязки и URL (Universal Resurse Locator) связанного с ним ресурса Internet.

Первый компонент ссылки — якорь это текстовый или графический объект, который, как правило, служит органом управления на Web-странице. Каждый раз при просмотре Web-страниц мы видим множество различных элементов-якорей. Это и красочные рекламные баннеры, всевозможные кнопки и иконки, выделенные подчеркнутым курсивом элементы текста, адреса электронной почты.

Второй компонент ссылки не отображается Web-браузером, но служит конкретным указанием, где в Internet найти, и что сделать при активизации пользователем соответствующего ему якоря. Адреса ресурсов бывают относительные и абсолютные.

Относительный адрес это адрес ресурса относительно компьютера и каталога загрузки HTML-документа, если иной базовый адрес не указан в заголовке документа, тег. Относительный адрес задается в сокращенной форме (путь/файл). Например, если ваша начальная страница index. htm загружена браузером c httр://www.site.ru, то использование в ней относительной ссылки resume. htm означает загрузку httр://www.site.ru/resume.htm.

Абсолютные адреса используются для привязки к ресурсам других узлов Internet и задаются полным форматом записи (httр://компьютер/путь/файл).

Например: httр://www.sitename.ru/filename.htm.

Ссылки в документах задаются при помощи контейнера …, следующей структуры:

Элемент — якорь Атрибут HREF в открывающем теге задает ресурс который необходимо обработать браузеру при выборе на Web-странице, соответствующего ему якоря. Рассмотрим наиболее часто используемые ресурсы:

— ссылки на другие документы HTML и файлы.

 — ссылки на файлы FTP-сервера.

 — ссылки на адреса электронной почты.

 — ссылки на группы новостей.

Атрибут TITLE задает текстовую подсказку в стиле ToolTip, отображаемую браузером при позиционировании указателя-курсора в зоне элемента-якоря.

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

Теперь рассмотрим несколько конкретных примеров использования ссылок в документах:

Заходите к нам — абсолютная ссылка: переход на сайт www.site.ru, текстовый якорь — Заходите к нам, с подсказкой.

Модельный ряд VW — относительная ссылка: открытие станицы cars. htm в подразделе VW относительно раздела основной страницы, текстовый якорь — Модельный ряд VW, без подсказки.

Связь с вебмастером — загрузка интерфейса к почтовой системе пользователя с автозаполнением реквизитов получателя, текстовый якорь — Связь с вебмастером, без подсказки.

Новый драйвер здесь — доступ на FTP-сервере к файлу драйвера, текстовый якорь-Новый драйвер здесь, без подсказки.

При использовании графического файла в качестве элемента-якоря необходимо вместо текста в контейнере … использовать конструкцию. Например:

- относительная ссылка: открытие станицы passat. htm в подразделе VW относительно раздела основной страницы, графический якорь-passat.gif, без подсказки.

Кроме вышеперечисленных ссылок существуют еще внутренние ссылки или закладки. Этот тип ссылок используется для удобства перемещения в пределах документа. Для использования в HTML-документе закладок необходимо задать имена тех областей документа, на которые необходимо ссылаться.

Имя закладки в теле документа задается использованием атрибута NAME=ИмяЗакладки в контейнере …. Причем в данном случае текст, заключенный в контейнер, не является элементом-якорем (но выводится).

Например, для перехода на начало документа необходимо поместить там закладку:

Начало документа

Внутренняя ссылка на закладку в документе имеет следующий формат:

Элемент — якорь Например для размещения в документе ссылки на внутреннюю закладку (содержащуюся в данном документе) необходимо применить:

Перейти к началу документа

А для размещения в документе ссылки на внешнюю закладку (например содержащуюся в файле Doc1. htm) необходимо применить:

Перейти к началу документа Doc1.htm.

В заключении надо описать еще один важный атрибут тега ссылки, это атрибут TARGET. Данный атрибут задает окно либо фрейм назначения для документа заданного атрибутом HREF. По умолчанию загрузка происходит в текущее окно браузера, но можно указать имя нового или существующего окна, а так же одно из предопределенных имен объектов браузера: _blank, _self, _parent, _top. Например:

Пример — загрузка документа sample. htm в новое окно браузера с именем «new_win» .

Заголовок HTML документа Заголовок является необязательной частью структуры HTML документа и служит для определения служебной информации и названия документа. В случае использования в документе контейнера заголовка … единственным обязательным его элементом является контейнер …, который задает имя документа. Именно это имя пользователь видит в заголовке окна браузера при просмотре Web-страниц в Internet.

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

Разложим теперь по полочкам все то, что мы написали в примере. Первый и обязательный элемент заголовка это контейнер …, задающий имя документа, отображаемое в шапке окна браузера.

Далее следует последовательность тегов, задающих так называемую мета (или внешнюю) информацию о документе. У тегов наиболее часто используются следующие атрибуты:

HTTP-EQUIV — задать имя мета-записи в документе;

NAME — задать имя дополнительной мета-записи (по умолчанию NAME=HTTP-EQUIV);

CONTENT — присвоить значение мета-записи заданной атрибутом NAME или HTTP-EQUIV;

LANG — язык описания значений мета-записи;

В нашем примере первый тег описывает тип и кодировку содержимого документа.

Два следующих тега служат для передачи информации о содержании документа поисковым службам Internet.

Таким образом, тег задает список ключевых слов, содержащихся в документе, а тег является словесным описанием содержимого документа.

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

Завершает наш заголовок тег. Данный тег не отображает информацию в окне браузера и предназначен для формирования различных типов отношений между документами и другими объектами. Данные отношения помогают разработчикам ориентироваться в структуре сложного документа и используются поисковыми системами. Рассмотрим, какие бывают отношения и как они задаются. У тега наиболее часто используются следующие атрибуты:

REV — отношение текущего документом с другим, заданным HREF (обратное REL);

REL — отношение между документом заданным HREF и текущим документом (обратное REV);

HREF — задает URL документа или объекта;

LANG — языковая версия;

MEDIA — назначение документа (Print/Screen);

TYPE — тип содержимого связанного объекта (листа стилей);

Данный тег довольно редко используется, как правило, его применение ограничивается привязкой листа стилей (stylesheet) к документу, но в HTML-документах со сложной иерархической структурой иногда встречается множество тегов с довольно запутанным синтаксисом. Наиболее понятные из них связи типа: следующий/предыдущий (next/prev), документ/автор (author), документ/оглавление (index). В нашем примере тег использован для формирования связи документ/автор.

Вот еще несколько примеров использования отношений в документах:

— означает, что документ chapter7. htm предыдущий по отношению к документу (chapter8.htm) содержащему заданную данным тегом связь;

— означает, что документ chapter9. htm следующий по отношению к документу (chapter8.htm) содержащему заданную данным тегом связь;

— обратное отношение, которое говорит о том, что документ (chapter10.htm), содержащий заданную данным тегом связь, является следующим для chapter9. htm;

— означает, что для печати текущего документа использовать лист стилей из style/PrnStyle.css;

Тело HTML документа Тело HTML документа располагается после заголовка и ограничено контейнером …. Содержимое тела документа отображается в окне Web-браузера и состоит из маркированного тегами форматирования текста, таблиц, графических и прочих мультимедиа-элементов, ссылок на другие ресурсы и различных органов управления. В приведенном в предыдущей главе примере, тело документа состоит из одной единственной строки «В разработке» .

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

BGCOLOR — цвет фона документа;

BACKGROUND — URL графического изображения, для создания фона;

BGPROPERTIES — режим прокрутки фона по отношению к тексту документа (по умолчанию прокрутка вместе с текстом, BGPROPERTIES=FIXED — стационарный фон);

TEXT — цвет текста документа;

LINK — цвет выделения элементов-якорей ссылок;

ALINK — цвет выделения активных элементов-якорей ссылок;

VLINK — цвет выделения элементов-якорей просмотренных ссылок;

Для определения цветов в HTML применяются шестнадцатеричные коды RGB компонентов, но стандартные 16 цветов можно задавать по их общепринятым названиям, они представлены на Рис.1:

Рис. 1 Коды RGB компонентов