тогда как настоящий документ предназначен в основном для
advertisement
ВВЕДЕНИЕ
Изучение дисциплины «Информационные технологии» является составной
частью фундаментальной подготовки студентов специальности 071900. Она
преподается в течение пятого и шестого семестров. В данной методичке изложены
правила создания гипертекстовых документов на языке HTML, описаны
распространенные программные продукты для подготовки документов на HTML.
Выполнив лабораторную работу, студент должен знать структуру
соответствующего программного обеспечения, его основные функции, правила
использования его по назначению.
Технология выполнения лабораторных работ единообразна и включает в
себя следующие этапы:
- теоретическое усвоение материала в объеме данных методических
указаний и соответствующих разделов курса лекций;
- получение задания на работу, осмысление его и проведение
необходимых подготовительных работ;
- выполнение задания с использованием вычислительной системы;
- оформление отчета;
- защиту выполненной лабораторной работы в виде теста.
Каждая лабораторная работа рассчитана на два или четыре аудиторных
часа.
3
ЛАБОРАТОРНАЯ РАБОТА №1
Тема: Создание простейшей Web - страницы.
Цель работы: Изучить структуру HTML документа, научиться
практически применять полученные знания при создании Web - страницы.
1. Структура HTML-документа
Документ HTML начинается с <HTML>, заголовок (HEAD) и тело (BODY)
документа:
<HTML>
<HEAD>
<TITLE>Наименование документа</TITLE>
... Заголовок документа
</HEAD>
<BODY>
... Тело документа
</BODY>
</HTML>
На практике, элементы HTML, HEAD и BODY не являются
обязательными.
1.1. Заголовок (элемент HEAD)
Метки <HEAD> и </HEAD> указывать не обязательно. Заголовок может
содержать в любом порядке любые из указанных ниже элементов:
1. Title - определяет наименование документа (обязательный элемент)
2. Style - зарезервирован для будущего использования со списками стилей
3. Script - зарезервирован для будущего использования со скриптами
4. IsIndex - предназначен для организации простого поиска по ключевому
слову;
5. Base - определяет базовый ресурс, относительно которого происходит
адресация по относительным ссылкам
6. Meta - содержит мета-информацию в виде пар имя/значение
7. Link - определяет отношение к другим документам
Элементы TITLE, SCRIPT и STYLE должны иметь открывающую и
закрывающую метки. Для остальных элементов закрывающие метки
запрещены. Обратите внимание: содержимое элементов SCRIPT и STYLE в
настоящее время не стандартизовано.
TITLE
Документ HTML должен содержать один элемент TITLE в заголовке. В
наименовании документа могут использоваться символьные объекты. Метки
внутри элемента TITLE, запрещены.
4
Пример элемента TITLE:
<TITLE>Заголовок документа HTML 3.2</TITLE>
STYLE и SCRIPT
Зарезервированы для использования со списками стилей и скриптами,
исполняемыми клиентом, в будущих версиях HTML. Могут содержать только
латинские буквы и разделители ETAGO ("/>").
ISINDEX
Элемент ISINDEX показывает, что документ представляет собой
оглавление, в котором можно производить поиск по ключевому слову.
Ограничений на длину запроса нет. Для определения текста подсказки можно
использовать атрибут PROMPT
например:
<ISINDEX PROMPT="Поиск по ключевому слову:">
Семантика элемента ISINDEX в настоящее время определена только для
случая, когда в качестве базового ресурса указан ресурс, доступный по
протоколу передачи гипертекстов (http://). Как правило, когда пользователь
нажимает клавишу Enter (Return), на сервер, определенный как базовый ресурс,
отправляется соответствующий запрос. Например, если пользователь ввел
запрос "ten green apples", а в качестве базового ресурса указано:
http://www.acme.com/
генерируется вот такой запрос:
http://www.acme.com/?ten+green+apples"
Обратите внимание: пробелы конвертируются в плюсы (+).
BASE
Элемент BASE указывает базовый ресурс, относительно которого
выполняются относительные ссылки, например:
<BASE href="http://www.acme.com/intro.html">
...
<IMG SRC="icons/logo.gif">
В
этом
случае
изображение
загружается
из
файла
http://www.acme.com/icons/logo.gif
В отсутствие элемента BASE в качестве базы используется
местонахождение текущего документа. Обратите внимание: фактическое
местонахождение документа может отличаться от имени ресурса, к которому
был адресован HTTP-запрос, поскольку базовое местонахождение может быть
переопределено заголовком HTTP, сопровождающим документ.
META
Элемент META определяет пару имя/значение, описывающую некоторое
свойство документа: информацию об авторе, список ключевых слов и т.п.
Атрибут NAME указывает имя переменной, а атрибут CONTENT — значение
переменной.
<META NAME="Author" CONTENT="Dave Raggett">
5
Вместо атрибута NAME можно использовать атрибут HTTP-EQUIV.
Серверы протокола передачи гипертекстов (HTTP) могут использовать
свойства, определенные атрибутом HTTP-EQUIV для создания заголовка в
соответствии с RFC 822, хотя некоторые элементы заголовков HTTP таким
образом создать нельзя. Более подробную информацию можно найти в
спецификации HTTP.
Пример:
<META HTTP-EQUIV="Expires" CONTENT="Tue, 20 Aug 1996 14:25:27
GMT">
приведет к генерации заголовка HTTP:
Expires: Tue, 20 Aug 1996 14:25:27 GMT
Такая переменная может использоваться в кэше для определения того, до
какого времени действительна кэшированная копия документа.
LINK
LINK позволяет определять отношение текущего документа к другим
документам и ресурсам. LINK входит в спецификации HTML уже очень давно,
хотя очень немногие браузеры поддерживают этот элемент (большинство все
еще его игнорирует).
В принципе, элемент LINK можно использовать:
- для навигации (создание меню или кнопок),
- для контроля за печатью HTML-файлов,
- для компоновки дополнительных ресурсов (списков стилей и скриптов),
- для показа альтернативных форм текущего документа.
Допустимые атрибуты элемента LINK:
Href - Указывает ресурс для компоновки.
Rel - Прямое отношение, или "тип связки". Определяет отношение
текущего документа к ресурсу, указанному в атрибуте HREF. Отношения в
HTML пока не стандартизованы, хотя уже существуют некоторые соглашения
на этот счет.
Rev - Определяет обратное отношение. Связка от документа A к
документу B с указанием REV=отношение отражает то же самое отношение,
что связка из B к A with REL=отношение. Иногда для указания автора
(домашней страницы или адреса электронной почты в виде ресурса типа
mailto:) используется отношение REV=made.
Title - Необязательное наименование скомпонованного ресурса.
Вот некоторые предлагаемые отношения:
rel=top (Ссылка на вершину иерархии: первую или заглавную страницу в
коллекции).
rel=contents (Ссылка на документ, выполняющий функции оглавления
коллекции).
rel=index (Ссылка на документ, выполняющий функции оглавления
текущего документа).
6
rel=glossary (Ссылка на документ, в котором находится словарь терминов,
относящихся к текущему документу).
rel=copyright (Ссылка на документ, в котором находится информация об
авторском праве на текущий документ).
rel=next (Ссылка на следующий документ в последовательности).
rel=previous (Ссылка на предыдущий документ в последовательности).
rel=help (Ссылка на документ, содержащий систему помощи: описание
более широкого контекста и дополнительные ссылки).
rel=search (Ссылка на поисковый механизм, связанный с коллекцией).
Примеры элементов LINK:
<LINK REL=Contents HREF=toc.html>
<LINK REL=Previous HREF=doc31.html>
<LINK REL=Next HREF=doc33.html>
<LINK REL=Chapter REV=Contents HREF=chapter2.html>
1.2. Основные атрибуты метки <BODY>
bgcolor - Определяет цвет фона документа. Синтаксис цвета см. ниже.
text - Определяет цвет текста.
link - Определяет цвет гипертекстовых ссылок.
vlink - Определяет цвет использованных гипертекстовых ссылок.
alink - Определяет цвет гипертекстовой ссылки в момент нажатия на
нее.
6. background - Определяет изображение, служащее фоном.
Цвета определяются в формате RGB в виде шестнадцатеричных чисел
(например, COLOR="#C0FFC0"); существует также 16 распознаваемых имен
цветов:
Black = "#000000"
Green = "#008000"
Silver = "#C0C0C0"
Lime = "#00FF00"
Gray = "#808080"
Olive = "#808000"
White = "#FFFFFF"
Yellow = "#FFFF00"
Maroon = "#800000"
Navy = "#000080"
Red = "#FF0000"
Blue = "#0000FF"
Purple = "#800080"
Teal = "#008080"
Fuchsia = "#FF00FF"
Aqua = "#00FFFF"
1.
2.
3.
4.
5.
Пример:
<body bgcolor=white text=black link=red vlink=maroon alink=fuchsia>
2.Специальные элементы уровня текста
7
2.1.Элемент A (анкер)
Анкеры не могут находиться один внутри другого. Открывающая и
закрываюшая метки обязательны. Анкеры используются для определения
гипертекстовых ссылок, например,
Путь к <a href="hands-on.html">с частью </a>, а также конкретных точек
внутри документа, на которые могут указывать гипертекстовые ссылки,
например, <h2><a name=mit>Тек-Сквер 545 - рай для хакера</a></h2>.
Name - Строка, определяющая имя анкера. Имена анкеров в одном
документе не должны повторяться.
Href - Указывает адрес ресурса, на который будет производиться переход
по гипертекстовой ссылке. Это может быть другой HTML-документ, PDF-файл,
изображение и т.п.
Title - Указывает наименование ресурса, на который сделана ссылка.
2.2. IMG – изображения
Используется для вставки изображений. Закрывающая метка запрещена.
Изображения можно либо выравнивать вертикально по отношению к текущей
строке, либо выравнивать по правому или левому полю. Информацию об
управлении потоком текста можно найти в разделе, описывающем атрибут
CLEAR метки BR.
<IMG SRC="canyon.gif" ALT="Большой Каньон">
Для элементов IMG допустимы следующие атрибуты:
Src - Обязательный атрибут. Указывает путь к изображению - файлу
формата GIF, JPEG или PNG.
Alt - Содержит текстовое описание изображения, очень важное для
совместимости с речевыми и текстовыми браузерами.
Align - Устанавливает позиционирование изображения по отношению к
текущей строке:
align=top (Выравнивает верхний край изображения по верхнему краю
текущей строки).
align=middle (Выравнивает центр изображения по базовой линии текущей
строки).
align=left (Выравнивает изображение по левому полю. Текст, следующий
за изображением, "обтекает" изображение справа).
Обратите внимание: некоторые браузеры не обеспечивают адекватного
показа документов, в которых содержится несколько изображений,
выравненных по левому или правому краю. В результате авторы не могут быть
уверены, что документ, содержащий такие изображения, будет выглядеть
одинаково на разных браузерах.
Width - Указывает предполагаемую ширину изображения в пикселах. При
указании высоты позволяет браузеру зарезервировать место на экране до того,
как изображение будет передано по сети.
8
Height - Указывает предполагаемую выстоу изображения в пикселах. При
указании ширины позволяет браузеру зарезервировать место на экране до того,
как изображение будет передано по сети.
Border - Когда элемент IMG входит в состав гипертекстовой ссылки,
бруазер, как правило, показывает это отрисовкой цветной окантовки вокруг
изображения. Этот атрибут устанавливает ширину окантовки в пикселах.
Чтобы отменить окантовку, можно использовать атрибут border=0.
Разработчикам браузеров рекомендуется вводить дополнительные средства,
которые показывали бы, что изображение является ссылкой, например,
изменение формы курсора мыши при его прохождении над изображением.
Hspace - Используется для указания ширины поля слева и справа от
изображения. Атрибут HSPACE устанавливает ширину такого поля в пикселах.
По умолчанию HSPACE - небольшое положительное число.
Vspace - Используется для указания ширины поля сверху и снизу от
изображения. Атрибут VSPACE устанавливает ширину такого поля в пикселах.
По умолчанию VSPACE - небольшое положительное число.
Usemap - Используется для присвоения идентификатора фрагменту
изображения-карты, определенного элементом MAP.
Ismap - Когда элемент IMG входит в состав гипертекстовой ссылки,
атрибут ISMAP служит браузеру указанием передать обработчику координаты
точки, на которой пользователь щелкнул мышью. Такой механизм вызывает
проблемы у текстовых и речевых браузеров. Рекомендуется использовать
элемент MAP.
Пример использования ISMAP:
<a href="/cgibin/navbar.map"><img src=navbar.gif ismap border=0></a>
Браузер осуществляет переход по ссылке, добавляя к адресу, указанному в
атрибуте HREF, знак вопроса (?), координату x, запятую (,) и координату y.
Координаты указываются в пикселах. Например, если пользователь указал
точку с координатами x=10, y=27, адрес перехода в приведенном выше примере
будет: "/cgibin/navbar.map?10,27". Рекомендуется отключать рисование
окантовки.
2.3. APPLET (Java-апплеты)
Открывающая и закрывающая метка обязательны. Этот элемент
поддерживается всеми браузерами, допускающими работу с Java. Элемент
позволяет встроить Java-апплет в HTML-документ. APPLET передает апплету
переметры с помощью элементов Param. После элементов PARAM содержимое
элемента APPLET должно представлять альтернативу апплету для браузеров,
не поддерживающих Java. Допускаются только элементы уровня текста,
определенные объектом text в определении типа документа (DTD). Javaсовместимые браузеры игнорируют этот дополнительный HTML-текст. Это
можно использовать, чтобы показать изображение работающего апплета и
9
текст, объясняющий назначение апплета. Кроме того, в этом разделе можно
поместить ссылки на страницу, более информативную для браузера, не
поддерживающего Java, или текст, высмеивающий пользователя за
использование браузера, несовместимого с Java.
Вот простой пример Java-апплета:
<applet code="Bubbles.class" width=500 height=500>
Java-апплет, рисующий всплывающие пузырьки.
</applet>
Еще один пример, на сей раз с использованием элемента PARAM:
<applet code="AudioItem" width=15 height=15>
<param name=snd value="Hello.au|Welcome.au">
Java-апплет, проигрывающий приветственный звук.
</applet>
Codebase = базовый адрес.
Этот необязательный атрибут указывает базовый адрес апплета - каталог,
где находится код апплета. Если этот атрибут не указан, используется каталог,
где находится текущий документ.
Code = файл апплета.
Этот обязательный атрибут указывает имя файла, в котором находится
откомпилированный подкласс Applet. Имя файла должно быть указано
относительно базового адреса. Его нельзя указывать как абсолютный адрес.
Name = имя экземпляра апплета.
Этот необязательный атрибут присваивает имя данному экземпляру
апплета, что позволяет апплетам, находящимся на одной и той же странице,
отыскивать друг друга и обмениваться информацией.
Width = число пикселов.
Height = число пикселов.
Эти обязательные атрибуты указывают первоначальную ширину и высоту
апплета в пикселах, не считая окон и иных элементов интерфейса, которые
создает апплет.
Align = выравнивание,
Этот атрибут устанавливает выравнивание апплета. Допустимые значения:
top, middle, bottom, left и right. По умолчанию принято bottom.
Vspace = число пикселов,
Hspace = число пикселов,
Эти необязательные атрибуты устанавливают верхнее и нижнее (VSPACE)
и правое и левое (HSPACE) поля вокруг апплета. Браузеры показывают их
аналогично атрибутам VSPACE и HSPACE элемента IMG .
Элемент PARAM используется для передачи параметров апплету:
<PARAM NAME = параметр VALUE = значение>
Элементы PARAM - единственный способ указать параметры, присущие
только конкретному апплету. Апплеты считывают переданные пользователям
значения с помощью метода getParameter().
10
Name = имя параметра,
Value = значение параметра.
Символьные объекты SGML (&eacute;, &#185; и т.п.) передаются апплету
в "длинном" виде. При необходимости передать апплету символ & можно
воспользоваться объектом &amp;.
Обратите внимание: элементы PARAM следует помещать в начале
элемента APPLET element. Это требование не включено в определение типа
документа (DTD) в связи с техническими особенностями моделей смешанного
содержания в SGML.
2.4. FONT
FONT - Открывающая и закрывающая метки обязательны. Позволяет
изменить размер и/или цвет текста. Атрибуты: SIZE и COLOR. Размеры
шрифта даются в условных единицах без прямой привязки к фактическому
размеру шрифта. Элемент FONT может быть упразднен в будущих версиях
HTML.
Size - Устанавливает размер шрифта внутри элемента FONT. Размер
устанавливается цифрой от 1 до 7 или относительно текущего размера с
использованием целого числа со знаком, например, size="+1" или size="-2".
Color - Устанавливает цвет шрифта. Цвета устанавливаются в
шестнадцатиричной нотации RGB.
2.5. BASEFONT
BASEFONT - Используется для установки базового размера шрифта.
Закрывающая метка запрещена. Атрибут SIZE - целое число от 1 до 7. Базовый
размер шрифта используется для нормального и предварительно
форматированного текста, но не для заголовков, за исключением случаев, когда
заголовки модифицируются с использованием элемента FONT с
относительным размером шрифта.
2.6.BR
BR - Используется для разрыва строки. Закрывающая метка запрещена.
Атрибут CLEAR используется для перемещения ниже изображений,
выравненных по правому или левому полю. <BR CLEAR=LEFT> переводит
текст ниже изображений, выравненных по левому полю, <BR CLEAR=RIGHT>
делает то же самое для изображений, выравненных по правому полю, <BR
CLEAR=ALL> переводит текст независимо от выравнивания изображений.
11
2.7. MAP
MAP - Элемент MAP позволяет создавать изображения-карты (image
maps). Открывающая и закрывающая метки обязательны. Внутри элемента
MAP находится один или более элементов AREA, которые определяют
"горячие" области на указанном изображении и связывают эти области с
адресами ресурсов.
Вот простой пример средства навигации:
<img src="navbar.gif" border=0 usemap="#map1">
<map name="map1">
<area href=guide.html alt="Доступ" shape=rect coords="0,0,118,28">
<area href=search.html alt="Поиск" shape=rect coords="184,0,276,28">
<area
href=shortcut.html
alt="Перейти"
shape=rect
coords="118,0,184,28">
<area
href=top10.html
alt="Десятка
лучших"
shape=rect
coords="276,0,373,28">
</map>
Элемент MAP включает единственный атрибут NAME, определяющий имя
карты. Имя используется атрибутом USEMAP элемента IMG. Обратите
внимание: значение атрибута NAME чувствительно к регистру.
В элементе AREA запрещена закрывающая метка. Возможные атрибуты:
SHAPE, COORDS, HREF, NOHREF и ALT. Атрибуты SHAPE и COORDS
определяют области на изображении. Если атрибут SHAPE опущен,
предполагается SHAPE="RECT".
shape=rect coords="лево-x, верх-y, право-x, низ-y"
shape=circle coords="центр-x, центр-y, радиус"
shape=poly coords=" x1,y1, x2,y2, x3,y3, ..."
Координаты x и y измеряются в пикселах от левого верхнего угла
изображения. Если значения x и y даны в процентах, они интерпретируются как
проценты ширины и высоты изображения. Пример:
SHAPE=RECT COORDS="0, 0, 50%, 100%"
Атрибут HREF указывает адрес перехода по гипертекстовой ссылке.
Атрибут NOHREF используется, когда необходимо определить область,
которая не является "горячей". Это полезно, когда необходимо "прорезать
дыру" в "горячей" области.
Если две или более области перекрываются, регион, определенный
первым, имеет преимущество. Это означает, что элементы AREA с атрибутом
NOHREF следует помещать перед элементами с атрибутом HREF.
Атрибут ALT используется для определения текстовых меток, которые
могут использоваться для показа в строке статуса при прохождении курсора
мыши над соответствующей областью или для создания текстового меню
браузерами, не поддерживающими графику. Авторам настоятельно
12
рекомендуется использовать информативные атрибуты ALT, чтобы поддержать
совместимость с речевыми или текстовыми браузерами.
Контрольные вопросы:
1. Опишите основные элементы заголовка HTML-документа
2. Какие управляющие последовательности могут быть использованы в
теле HTML-документа
3. Перечислите специальные элементы уровня текста, их назначение.
Задание:
1. Используя любой текстовой редактор, создайте Web – страницу.
13
ЛАБОРАТОРНАЯ РАБОТА №2
Тема: Изучение приемов форматирования абзацев.
Цель работы: Изучить возможности форматирования абзацев в HTML
документе, научится практически применять полученные знания при создании
Web - страницы.
1. Элементы уровня блока
Большая часть элементов, которые могут находиться в теле документа,
относится либо к элементам уровня блока, либо к элементам уровня текста.
Различие состоит в том, что новый элемент уровня блока всегда открывает
собой новый абзац. Наиболее часто встречающиеся элементы уровня блока —
это H1 ... H6 (заголовки), P (абзацы), LI (элементы списков) и HR
(горизонтальные линии). Наиболее часто встречающиеся элементы уровня
текста — это EM, I, B и FONT (метки форматирования шрифта), A
(гипертекстовые ссылки), IMG и APPLET (встроенные объекты) и BR (разрывы
строк). Обратите внимание: элементы-блоки могут содержать в себе другие
элементы уровня блока и элементы уровня текста, а элементы уровня текста —
только другие элементы уровня текста.
1.1. Заголовки
В заголовках документов используются элементы H1, H2, H3, H4, H5 и H6.
Открывающие и закрывающие метки обязательны. Заголовки H1 — самые
крупные, H6 — самые мелкие. С помощью необязательного атрибута ALIGN
можно установить выравнивание заголовка,
например:
<H1 ALIGN=CENTER> ... центрированный заголовок ... </H1>.
1.2. Абзацы
Для маркировки абзацев используется элемент P. Открывающая метка
обязательна. Закрывающая метка необязательна. В большинстве случаев
абзацы выводятся на всю доступную ширину экрана.
Пример:
<P>Это первый абзац.
<P>Это второй абзац.
Абзацы обычно выравниваются по левому краю. Для указания
горизонтального выравнивания можно использовать атрибут ALIGN:
1. align=left (Абзац выравнивается по левому краю).
2. align=center (Абзац выравнивается по центру).
14
3. align=right (Абзац выравнивается по правому краю).
Примеры:
<p align=center>Центрированный абзац.
<p align=right>Абзац, выравненный по правому краю.
1.3. Списки
Пункты списка могут содержать элементы уровня блока и уровня текста, в
том числе и другие списки. Список не может содержать заголовков и адресов.
Ненумерованные списки
Ненумерованные списки имеют вид:
<UL>
<LI> ... первый пункт
<LI> ... второй пункт
...
</UL>
Для обозначения ненумерованных списков используется элемент UL.
Открывающая и закрывающая метки обязательны. Элемент LI используется для
обозначения пунктов списка. Закрывающая метка элемента LI не обязательна.
Обратите внимание: элементы LI могут содержать в себе вложенные списки. С
помощью атрибута COMPACT можно установить более компактное
размещение пунктов списка.
Для указания символа, открывающего пункт списка, с элементами UL и LI
можно использовать атрибут TYPE. Допустимые значения — disc, square и
circle.
Нумерованные списки
Нумерованные списки имеют вид:
<OL>
<LI> ... первый пункт
<LI> ... второй пункт
...
</OL>.
Для указания того, с какого номера начинать отсчет, можно использовать
атрибут OL START (по умолчанию — 1). Можно установить начальный номер
и с помощью атрибута VALUE в элементе LI. Числа должны быть целыми.
С помощью атрибута COMPACT можно установить более компактное
размещение пунктов списка. Атрибут OL TYPE позволяет установить стиль
нумерации пунктов:
Списки определений
Списки определений имеют вид:
15
<DL>
<DT> термин
<DD> определение термина
...
</DL>
Элементы DT могут включать в себя только элементы уровня текста, а
элементы DD, кроме того, и элементы уровня блока, за исключением
заголовков и элементов ADDRESS.
Пример:
<DL>
<DT>Teрмин 1<dd>Определение первого термина.
<DT>Teрмин 2<dd>Определение второго термина.
</DL>
Выводится на экран так:
Teрмин 1
Определение первого термина.
Teрмин 2
Определение второго термина.
С элементом DL можно использовать атрибут COMPACT для установки
более компактного размещения пунктов списка.
1.3. Предварительно форматированный текст
PRE
Элемент PRE используется для вывода предварительно форматированного
текста. Браузеры показывают его со всеми пробелами и символами конца
строки с использованием шрифта фиксированной ширины.
Внутри элемента PRE нельзя использовать ссылки на изображения и
элементы, изменяющие размер шрифта, в частности IMG, BIG, SMALL, SUB,
SUP и FONT.
Пример элемента PRE — фрагмент стихотворения Перси Шелли (To a
Skylark):
<PRE>
Higher still and higher
From the earth thou springest
Like a cloud of fire;
The blue deep thou wingest,
And singing still dost soar, and soaring ever singest.
</PRE>
Вывод на экран:
Higher still and higher
From the earth thou springest
Like a cloud of fire;
16
The blue deep thou wingest,
And singing still dost soar, and soaring ever singest.
Символ табуляции (номер 9 в кодировках Unicode, US ASCII и ISO 8859-1)
интерпретируется как наименьшее ненулевое число пробелов, приводящее
курсор в позицию с порядковым номером, кратным 8. Использовать его не
рекомендуется, поскольку при составлении документов число пробелов,
эквивалентных символу табуляции, часто устанавливается отличным от восьми,
что может привести к нарушению форматирования при выводе текста.
DIV и CENTER
Элементы DIV можно использовать для разбиения HTML-документа на
несколько разделов (англ. division — раздел). Для указания горизонтального
выравнивания внутри элемента DIV можно использовать атрибут ALIGN с
допустимыми значениями LEFT, CENTER и RIGHT (аналогично принятому для
абзацев <P>).
Обратите внимание: элемент DIV по определению закрывает открытый
абзац P. За исключением этого случая, браузеры не показывают элемент DIV на
экране. Элемент <CENTER> полностью равнозначен <DIV ALIGN=CENTER>.
В элементах DIV и CENTER обязательны открывающие и закрывающие метки.
BLOCKQUOTE
Используется для цитат. Открывающие и закрывающие метки
обязательны. Выводится на экран с увеличенными полями:
They went in single file, running like hounds on a strong scent, and an eager
light was in their eyes. Nearly due west the broad swath of the marching Orcs
tramped its ugly slot; the sweet grass of Rohan had been bruised and blackened as
they passed.
from "The Two Towers" by J.R.R. Tolkien.
FORM
Используется для определения форм. В одном документе может быть
несколько форм. Открывающие и закрывающие метки обязательны. Формы
могут содержать различные метки, в том числе несколько видов полей:
однострочные и многострочные окна для ввода текста, группы радиокнопок,
помечаемые квадраты и меню.
Action - Указывает на ресурс, который будет обрабатывать форму —
указание
на
отсылку
формы
электронной
почтой
(например,
action="mailto:foo@bar.com") или путь к программе-обработчику (например,
action="http://www.acme.com/cgi-bin/register.pl")
Method - Когда атрибут action указывает на сервер HTTP, атрибут method
указывает, какой метод HTTP следует использовать для пересылки
содержимого формы серверу. Допустимые значения — GET и POST, по
умолчанию принято значение GET.
17
Enctype - Устанавливает механизм кодирования формы. По умолчанию
принято application/x-www-form-urlencoded.
Дополнительная информация об обработке форм имеется в RFC 1867.
HR - горизонтальные линии
Горизонтальные линии можно использовать, чтобы указать на изменение
темы.
Закрывающие метки в элементах HR запрещены. Допустимые атрибуты:
ALIGN, NOSHADE, SIZE и WIDTH.
Align - Определяет размещение линии: align=left, align=center или
align=right. По умолчанию, линия выравнивается по центру.
Noshade - Этот атрибут используется, чтобы указать, что линия должна
выводиться в виде полосы одного цвета, а не в виде традиционной двухцветной
"канавки".
Size - Устанавливает высоту линии в пикселах.
Width - Устанавливает размах линии в пикселах (например, width=100)
или в процентах ширины поля вывода (например, width="50%"). По умолчанию
установлено 100%.
Таблицы
Общий вид таблицы:
<TABLE
BORDER=3
CELLSPACING=2
CELLPADDING=2
WIDTH="80%">
<CAPTION> ... заголовок таблицы ... </CAPTION>
<TR><TD> первая ячейка <TD> вторая ячейка
<TR> ...
...
</TABLE>
Атрибуты метки TABLE не обязательны. По умолчанию, таблица
выводится без рамки. Как правило, размер ячеек таблицы устанавливается
автоматически, чтобы наилучшим образом разместить содержимое, однако
можно установить ширину таблицы с помощью атрибута WIDTH. Атрибуты
BORDER, CELLSPACING и CELLPADDING предоставляют дополнительные
возможности для контроля за внешним видом таблицы. Заголовок размещается
над или под таблицей в зависимости от значения атрибута ALIGN.
Горизонтальный ряд ячеек определяется элементом TR, закрывающая
метка не обязательна. Ячейки таблицы определяются элементами TD (для
данных) и TH (для заголовков). Как и TR, эти элементы могут не иметь
закрывающей метки. TH и TD могут включать несколько атрибутов: ALIGN и
VALIGN для выравнивания содержимого ячейки, ROWSPAN и COLSPAN для
указания того, что ячейка занимает более одного горизонтального ряда или
колонки. Ячейка таблицы может содержать другие элементы уровня блока и
текста, включая формы и другие таблицы.
18
Для элемента TABLE обязательны открывающая и закрывающая метки.
Допустимые атрибуты:
Align - Допустимые значения: LEFT, CENTER и RIGHT. Определяет
положение таблицы по отношению к полям документа.
Width - При отсутствии этого атрибута ширина таблицы определяется
автоматически в зависимости от содержимого. Атрибут WIDTH можно
использовать для установки фиксированной ширины в пикселах (например,
WIDTH=212) или в процентах от пространства между левым и правым полем
(например, WIDTH="80%").
Border - Используется для указания ширины внешней окантовки таблицы
в пикселах (например, BORDER=4). Значение можно установить равным нулю,
в результате чего окантовка не будет видна. В отсутствие этого атрибута
окантовка также не должна показываться на экране. Обратите внимание:
некоторые браузеры воспринимают метку <TABLE BORDER> точно так же,
как BORDER=1.
Nowrap - Этот атрибут запрещает автоматический перевод текста со
строки на строку внутри ячейки таблицы (например, <TD NOWRAP>). Эффект
применения этого атрибута аналогичен использованию объекта &nbsp; вместо
пробела по всему содержимому ячейки.
Rowspan - Используется с положительным целым значением числа строк
таблицы, занятых ячейкой. По умолчанию принято равным единице.
Colspan - Используется с положительным целым значением числа колонок
таблицы, занятых ячейкой. По умолчанию принято равным единице.
Таблицы, как правило, показываются на экране "приподнятыми" над
поверхностью страницы, а ячейки - "вдавленными" в тело таблицы. Ячейки
выделяются окантовкой, только если в них есть содержимое. Если содержимое
ячейки состоит только из пробелов, ячейка считается пустой, за исключением
случаев, когда в ней есть хотя бы один объект &nbsp;.
Контрольные вопросы:
1. Какие средства HTML предоставляются для форматирования абзацев
2. Посредством какого элемента можно создать встроенные в HTML документ
формы
3. Таблицы, как они создаются.
Задание:
1. Примените все виды форматирования абзацев к документу созданному в
предыдущей лабораторной работе.
2. Для улучшения отображения информации в документе используйте
таблицы.
19
ЛАБОРАТОРНАЯ РАБОТА №3
Тема: Гипертекстовые ссылки в HTML документе.
Цель работы: Изучить возможности гипертекстовых переходов в HTML
документах, посредством гипертекстовых ссылок. Научится практически
применять полученные знания при создании Web - страницы.
1. Введение в ссылки и якоря
HTML предлагает множество условных оборотов для текстовых и
структурированных документов, но что отличает его от большинства других
языков разметки - его возможности разметки гипертекста и интерактивных
документов. В этом разделе вводится понятие ссылки (или гиперссылки или
ссылки Web), основной гипертекстовой конструкции. Ссылки связывают один
ресурс Web с другим. Несмотря на простоту, ссылки стали основным залогом
успеха Web.
Ссылка имеет два конца - называемых anchors - и направление. Ссылка
начинается в "исходном" anchor (источнике) и указывает на "целевой" anchor,
который может быть любым ресурсом Web (например, изображением,
видеоклипом, звуковым файлом, программой, документом HTML, элементом в
документе HTML и т.д.).
1.1. Переход к ресурсу, на который указывает ссылка
По умолчанию со ссылкой связана загрузка другого ресурса Web. Это
поведение достигается обычно путем выбора ссылки (например, с помощью
щелчка мыши, ввода с клавиатуры и т.д.).
В следующем HTML-фрагменте содержится две ссылки, у одной целевым
anchor является документ HTML с именем "chapter2.html", а у второй целевой
anchor - изображение в формате GIF, расположенное в файле "forest.gif":
<BODY>
...какой-то текст...
<P>Подробнее см. в <A href="chapter2.html">главе два</A>.
См. также <A href="../images/forest.gif">карту леса.</A>
</BODY>
Путем активизации этих ссылок (с помощью щелчка мыши, ввода с
клавиатуры, голосовых команд и т.д.) пользователи могут перейти к этим
ресурсам. Обратите внимание, что атрибут href в каждом исходном anchor
указывает адрес целевого anchor с использованием URI.
Целевой anchor ссылки может быть элементом в документе HTML.
Целевому anchor должно даваться имя и адрес URI, адресующий этот anchor,
Должен содержать это имя в качестве идентификатора объекта.
20
Целевые anchors в документах HTML могут указываться с помощью
элемента А (именующего его с помощью атрибута name) или с помощью
любого другого элемента (именующего с помощью атрибута id).
Таким образом, например, автор может создавать оглавление, элементы
которого являются ссылками на элементы заголовков H2, H3 и т.д. в том же
документе. Используя элемент A для создания целевых anchors, можно
записать:
<H1>Содержание;/H1>
<P><A href="#section1">Введение</A><BR>
<A href="#section2">Предыстория</A><BR>
<A href="#section2.1">Более конкретные заметки</A><BR>
...продолжение содержания...
...тело документа...
<H2><A name="section1">Введение</A></H2>
...раздел 1...
<H2><A name="section2">Предыстория</A></H2>
...раздел 2...
<H3><A name="section2.1">Более конкретные заметки</A></H3>
...раздел 2.1...
Этого же эффекта можно достигнуть, сделав якорями сами элементы
заголовка:
<H1>Содержание</H1>
<P><A href="#section1">Введение</A><BR>
<A href="#section2">Предыстория</A><BR>
<A href="#section2.1">Более конкретные заметки</A><BR>
...продолжение содержания...
...тело документа...
<H2 id="section1">Введение</H2>
... раздел 1...
<H2 id="section2">Предыстория</H2>
... раздел 2...
<H3 id="section2.1">Более конкретные заметки</H3>
...раздел 2.1...
1.2. Другие отношения ссылок
Наиболее часто сейчас ссылки используются для загрузки других ресурсов
Web, как показано в предыдущих примерах. Однако авторы могут помещать в
свои документы ссылки, выражающие иные отношения между ресурсами, чем
просто "использование ссылки для Просмотра связанного ресурса". Для ссылок,
выражающих другие типы отношений, в исходном якоре указываются один или
более типов ссылок.
21
Роли ссылок, определяемых элементом A или LINK, указываются с
помощью атрибутов rel и rev.
Например, ссылки, определяемые элементом LINK, могут описывать
положение документа в последовательности документов. В следующем
примере ссылка в документе "Глава 5" указывает на предыдущую и
последующую главы:
<HEAD>
...другая заголовочная информация...
<TITLE>Глава 5</TITLE>
<LINK rel="prev" href="chapter4.html">
<LINK rel="next" href="chapter6.html">
</HEAD>
Тип первой ссылки - "prev", второй - "next". Ссылки, задаваемые элементов
LINK, не генерируются с содержимым документа, хотя агенты пользователей
могут отображать их различными способами (например, в виде средств
перехода).
Даже если они не используются для перехода, эти ссылки могут
интерпретироваться интересными способами. Например, агент пользователя,
выполняющий печать ряда документов в формате HTML в виде одного
документа, может использовать эту информацию для формирования
последовательного линейного документа.
1.3. Задание якорей и ссылок
Хотя некоторые элементы и атрибуты языка HTML создают ссылки на
другие ресурсы (например, элемент IMG, элемент FORM и т.д.), сейчас
обсуждаются ссылки и якоря, создаваемые элементами LINK и A. Элемент
LINK может присутствовать только в заголовке документа. Элемент A может
присутствовать только в теле документа.
Если для элемента A установлен атрибут href, этот элемент определяет
исходный якорь для ссылки, которая может активизироваться пользователем
для загрузки ресурса Web. Исходный якорь - это местоположение экземпляра
элемента A и целевой якорь ресурса Web.
Загруженный ресурс может обрабатываться агентом пользователя
различными способами: открытием нового документа HTML в том же окне
агента, открытием нового документа HTML в другом окне, запуском новой
программы для обработки ресурса и т.д. Поскольку элемент A имеет
содержание (текст, изображения и т.д.), агенты пользователей могут
генерировать это содержимое так, чтобы показать наличие ссылки (например,
подчеркивая содержимое).
Если установлены атрибуты naem или id элемента A, этот элемент
определяет якорь, который может служить целью других ссылок.
22
Авторы могут устанавливать атрибуты name и href одновременно в одном
экземпляре элемента A.
Элемент LINK определяет отношение между текущим документом и
другим ресурсом. Хотя элемент LINK не имеет содержимого, определяемые им
отношения могут отображаться некоторыми агентами пользователей.
1.4. Заголовки ссылок
Атрибут title может устанавливаться как для элемента A, так и для
элемента LINK; в нем указывается информация о природе ссылки. Эта
информация может проговариваться агентом пользователя, отображаться в
виде подсказки, изменять вид курсора и т.д.
<BODY>
...некоторый текст...
<P>Подробнее Вы можете узнать об этом в <A href="chapter2.html"
title="Перейдите к главе 2">главе 2</A>.
<A href="./chapter2.html"
title="Переход к главе 2.">глава 2</A>.
См. также <A href="../images/forest.gif"
title="Изображение леса в формате GIF">карту леса.</A>
</BODY>
1.4. Интернационализация и ссылки
Поскольку ссылки могут указывать на документы, использующие другие
кодировки символов, элементы A и LINK поддерживают атрибут charset. Этот
атрибут позволяет авторам рекомендовать агентам пользователей кодировку
данных в связанном документе.
Атрибут hreflang предоставляет агенту пользователя информацию о языке
связанного ресурса, точно так же, как атрибут lang предоставляет информацию
о языке содержимого элемента или значениях атрибутов.
Имея дополнительные знания, агенты пользователей должны иметь
возможность не представлять пользователю "мусор". Вместо этого они могут
находить ресурсы, необходимые для корректного представления документа
или, если они не могут найти эти ресурсы, по крайней мере, уведомить
пользователя о невозможности прочтения документа с указанием причины.
2. Элемент A
<!ELEMENT A- - (%inline;)* -(A) -- якорь (точка ссылки) -->
<!ATTLIST A
%attrs; -- %coreattrs, %i18n, %events -charset %Charset; #IMPLIED -- кодировка символов связанного ресурса -type %ContentType; #IMPLIED -- рекомендуемый тип содержимого -23
name CDATA #IMPLIED -- конец именованной ссылки -href %URI; #IMPLIED -- URI связанного ресурса -hreflang %LanguageCode; #IMPLIED -- код языка -rel %LinkTypes; #IMPLIED -- типы прямых ссылок -rev %LinkTypes; #IMPLIED -- типы обратных ссылок -accesskey %Character; #IMPLIED -- клавиша доступа -shape %Shape; rect -- для использования с клиентскими навигационными
картами -coords %Coords; #IMPLIED -- для использования с клиентскими
навигационными картами -tabindex NUMBER #IMPLIED -- положение в последовательности
перехода -onfocus %Script; #IMPLIED -- фокус на элементе -onblur %Script; #IMPLIED -- фокус вне элемента ->
Начальный тэг - обязателен, конечный тэг – обязателен.
Определения атрибутов:
Name = cdata [CS]
Этот атрибут дает якорю имя, так что он может служить целью другой
ссылки. Значением этого атрибута должно быть уникальное имя. Область
действия имени - текущий документ. Обратите внимание, что этот атрибут
использует общее пространство имен с атрибутом id.
Href = uri [CT]
Этот атрибут определяет местоположение ресурса Web, определяя связь
между текущим элементом (исходным якорем) и целевым якорем,
определяемым этим атрибутом.
Hreflang = langcode [CI]
Этот атрибут задает базовый язык ресурса, назначаемого атрибутом href, и
может использоваться, только если указан атрибут href.
Type = content-type [CI]
Если этот атрибут задан, он определяет тип части содержимого, например,
результат обратного действия ссылки на ресурс. Типы содержимого
определены в разделе [MIMETYPES].
Rel = link-types [CI]
Этот атрибут описывает отношение из текущего документа к якорю,
заданному атрибутом href. Значением этого атрибута является разделенный
пробелами список типов ссылок.
Rev = link-types [CI]
Этот атрибут используется для описания обратной ссылки из якоря,
задаваемого атрибутом href, в текущий документ. Значением этого атрибута
является разделенный пробелами список типов ссылок.
Charset = charset [CI]
Этот атрибут задает кодировку символов назначаемого ссылкой ресурса.
24
Каждый элемент A определяет якорь. Содержимое элемента A определяет
положение якоря.
Атрибут name задает имя якоря, так что он может служить пунктом
назначения любого числа ссылок (см. также якоря с атрибутом id).
Атрибут href назначает якорь пунктом назначения ровно одной ссылки.
Авторы также могут создавать элемент A, не определяющий ни одного
якоря, и не указывающий href, name или id. Значения этих атрибутов могут
устанавливаться позднее с помощью скриптов.
В следующем примере элемент A определяет ссылку. Исходным якорем
является текст " Web-сайте W3C", а пунктом назначения - "http://www.w3.org/":
Подробнее о W3C Вы можете узнать на
<A href="http://www.w3.org/"> Web-сайте W3C</A>.
Эта ссылка указывает на страницу World Wide Web Consortium. Если
пользователь активизирует эту ссылку в своем агенте, агент загрузит ресурс, в
данном случае - документ HTML.
Обычно агенты пользователей представляют ссылки так, чтобы они были
очевидны для пользователей (подчеркивание, обратное видео и т.д.).
Конкретное представление зависит от агента пользователя. Представление
может различаться в зависимости от того, посещал ли уже пользователь
указанную ссылку.
Чтобы дать агентам пользователей явное указание кодировки символов
целевой страницы, установите атрибут charset:
Подробнее о W3C Вы можете узнать на:
<A href="http://www.w3.org/" charset="ISO-8859-1">Web-сайте W3C</A>.
Предположим, мы определяем якорь с именем "anchor-one" в файле
"one.html".
...текст до якоря...
<A name="anchor-one">Это местоположение первого якоря.</A>
...текст после якоря...
В данном фрагменте вокруг текста "Это местоположение первого якоря"
создается якорь. Обычно содержимое элемента A не представляется какимлибо особым образом, если элемент A определяет только якорь.
Определив якорь, мы можем связать его с этим же или с другим
документом. URI, назначающие якорь, включают символ "#", за которым
следует имя якоря (идентификатор фрагмента). Вот несколько примеров таких
URI:
Абсолютный URI: http://www.mycompany.com/one.html#anchor-one.
Относительный URI: ./one.html#anchor-one или one.html#anchor-one.
Если ссылка определена в том же документе: #anchor-one.
Таким образом, ссылка, определенная в файле "two.html", который
находится в одном каталоге с файлом "one.html", будет указывать на этот якорь
следующим образом:
...текст до ссылки...
25
Подробнее см. <A href="./one.html#anchor-one"> первый якорь</A>.
...текст после ссылки...
Примечание. Агенты пользователей должны уметь находить якоря,
созданные пустыми элементами A, но некоторые агенты не могут этого делать.
Например, некоторые агенты пользователей могут не найти "empty-anchor" в
следующем фрагменте HTML:
<A name="empty-anchor"></A>
<EM>...некоторые текст в формате HTML...</EM>
<A href="#empty-anchor">Ссылка на пустой якорь</A>.
2.1. Синтаксис имен якорей
Именем якоря является значение атрибута name или атрибута id,
используемого в контексте якоря. К именам якорей применяются следующие
правила:
Уникальность: Имена якорей должны быть уникальны в пределах
документа. Имена якорей в одном документе не могут отличаться только
регистром.
Соответствие строк: Сравнение между идентификаторами фрагментов и
именами якорей должно проводиться на основе полного (с учетом регистра)
совпадения.
Таким образом, следующий пример является корректным в смысле
соответствия строк и должен рассматриваться агентами пользователей как
совпадение:
<P><A href="#xxx">...</A>
...некоторый текст...
<P><A name="xxx">...</A>.
Следующий пример не является корректным в смысле уникальности,
поскольку два имени отличаются только регистром:
<P><A name="xxx">...</A>
<P><A name="XXX">...</A>.
Хотя далее приводится допустимый код HTML, поведение агента
пользователя в данном случае не определено; некоторые агенты пользователей
могут (ошибочно) считать это совпадением, другие могут так не считать.
<P><A href="#xxx">...</A>
...некоторый текст...
<P><A name="XXX">...</A>.
Имена якорей должны содержать только символы набора ASCII.
Подробнее см. в разделе об использовании символов, не входящих в набор
ASCII, в значениях атрибутов URI.
2.2. Вложенные ссылки недопустимы
26
Ссылки и якоря, определяемые элементом A, не могут быть вложенными;
элемент A не должен содержать других элементов A.
Поскольку DTD определяет элемент LINK как пустой, элементы LINK
также не могут быть вложенными.
2.3. Недоступные и неопределяемые ресурсы
Ссылка на недоступный или неопределяемый ресурс является ошибкой.
Хотя агенты пользователей могут по-разному обрабатывать такие ошибки,
рекомендуется следующее поведение:
Если агент пользователя не может найти связанный ресурс, он должен
уведомить об этом пользователя.
Если агент пользователя не может идентифицировать тип связанного
ресурса, он должен попытаться обработать его. Он должен уведомить
пользователя и позволить пользователю вмешаться и определить тип
документа.
3. Отношения документов: элемент LINK
<!ELEMENT LINK - O EMPTY -- независимая от устройства ссылка -->
<!ATTLIST LINK
%attrs; -- %coreattrs, %i18n, %events -charset %Charset; #IMPLIED -- кодировка символов связанного ресурса -href %URI; #IMPLIED -- URI связанного ресурса -hreflang %LanguageCode; #IMPLIED -- код языка -type %ContentType; #IMPLIED -- рекомендуемый тип содержимого -rel %LinkTypes; #IMPLIED -- тип прямой связи -rev %LinkTypes; #IMPLIED -- тип обратной связи -media %MediaDesc; #IMPLIED -- для представления на этих устройствах ->
Начальный тэг - обязателен, конечный тэг – запрещен.
Этот элемент определяет связь. В отличие от элемента A, он может
присутствовать только в разделе HEAD документа, хотя может присутствовать
неограниченное число раз. Хотя элемент LINK не имеет содержимого, он
содержит информацию об отношениях, которая может представляться агентами
пользователей различными способами (например, в виде панели с выпадающим
списком ссылок).
В данном примере показано, как несколько определений элемента LINK
могут быть представлены в разделе HEAD документа. Текущим документом
является "Chapter2.html". Атрибут rel указывает отношение связанного
документа с текущим документом. Значения "Index", "Next" и "Prev" описаны в
разделе, посвященном типам ссылок.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
27
"http://www.w3.org/TR/REC-html40/strict.dtd">
<HTML>
<HEAD>
<TITLE>Глава 2</TITLE>
<LINK rel="Index" href="../index.html">
<LINK rel="Next" href="Chapter3.html">
<LINK rel="Prev" href="Chapter1.html">
</HEAD>
...продолжение документа...
3.1. Прямые и обратные ссылки
Атрибуты rel и rev играют дополнительные роли - атрибут rel задает
прямую ссылку, а атрибут rev - обратную.
Рассмотрим два документа - A и B.
Документ A: <LINK href="docB" rel="foo">
имеет точно то же значение, что и:
Документ B: <LINK href="docA" rev="foo">
Оба атрибута могут определяться одновременно.
3.2. Ссылки и внешние таблицы стилей
Если элемент LINK ссылается на внешнюю таблицу стилей для документа,
атрибут type указывает язык таблицы стилей, а атрибут media - предполагаемое
устройство или устройства для представления документа. Агенты
пользователей могут сэкономить время, загружая из сети только те таблицы
стилей, которые применяются к текущему устройству.
Типы устройств обсуждаются в разделе, посвященном таблицам стилей.
3.3. Ссылки и поисковые машины
Авторы могут использовать элемент LINK для указания различной
информации для поисковых машин, включая:
Ссылки на альтернативные версии документа, написанные на других
языках.
Ссылки на альтернативные версии документа, разработанные для других
устройств, например, на версии, предназначенные специально для печати.
Ссылки на начальные страницы набора документов.
В примерах ниже показано, как информация о языке, типах устройств и
типах ссылок может использоваться для улучшения обработки документа
поисковыми машинами.
В следующем примере мы используем атрибут hreflang, чтобы сообщить
поисковым машинам, где находятся голландская, португальская и арабская
28
версии документа. Обратите внимание на использование атрибутов dir и charset
для руководства на арабском языке, а также на использование атрибута lang для
указания того, что значением атрибута title для элемента LINK, указывающего
руководство на французском языке, задано по-французски.
<HEAD>
<TITLE>Руководство на английском языке</TITLE>
<LINK title="Руководство на голландском языке"
type="text/html"
rel="alternate"
hreflang="nl"
href="http://someplace.com/manual/dutch.html">
<LINK title="Руководство на португальском языке"
type="text/html"
rel="alternate"
hreflang="pt"
href="http://someplace.com/manual/portuguese.html">
<LINK title="Руководство на арабском языке"
dir="rtl"
type="text/html"
rel="alternate"
charset="ISO-8859-6"
hreflang="ar"
href="http://someplace.com/manual/arabic.html">
<LINK lang="fr" title="La documentation en Fran&ccedil;ais"
type="text/html"
rel="alternate"
hreflang="fr"
href="http://someplace.com/manual/french.html">
</HEAD>
В следующем примере мы сообщаем поисковым машинам, где находится
печатная версия руководства.
<HEAD>
<TITLE>Руководство</TITLE>
<LINK media="print" title="Руководство в формате postscript"
type="application/postscript"
rel="alternate"
href="http://someplace.com/manual/postscript.ps">
</HEAD>
В следующем примере мы сообщаем поисковым машинам, где находится
первая страница набора документов.
<HEAD>
<TITLE>Руководство - страница 5</TITLE>
<LINK rel="Start" title="Первая страница руководства"
29
type="text/html"
href="http://someplace.com/manual/start.html">
</HEAD>
Дальнейшая информация приведена в замечаниях в приложении о том, как
помочь поисковым машинам проиндексировать Ваш Web-сайт.
4. Информация о пути: элемент BASE
<!ELEMENT BASE - O EMPTY -- базовый URI документа -->
<!ATTLIST BASE
href %URI; #REQUIRED -- URI, служащий базовым -- >.
Начальный тэг - обязателен, конечный тэг – запрещен.
Определения атрибутов:
Href = uri [CT]
Этот атрибут задает абсолютный URI, служащий базовым URI для
разрешения относительных URI.
В HTML ссылки на внешние изображения, апплеты, программы для
обработки форм, таблицы стилей и т.д. всегда задаются с помощью URI.
Относительные URI разрешаются в соответствии с базовым URI, который
может определяться из различных источников. Элемент BASE позволяет
авторам явно указать базовый URI документа.
Если элемент BASE указан, он должен присутствовать в разделе HEAD
документа HTML, до элементов, ссылающихся на внешние ресурсы.
Информация о пути, указанная в элементе BASE, влияет только на URI в
документе, в котором присутствует этот элемент.
Например, даны следующее объявление BASE и объявление A:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
"http://www.w3.org/TR/REC-html40/strict.dtd">
<HTML>
<HEAD>
<TITLE> Наши продукты</TITLE>
<BASE href="http://www.aviary.com/products/intro.html">
</HEAD>
<BODY>
<P>Вы видели наши <A href="../cages/birds.gif">клетки для птиц</A>?
</BODY>
</HTML>
относительный URI "../cages/birds.gif" будет разрешен в:
http://www.aviary.com/cages/birds.gif.
4.1. Разрешение относительных URI
30
Агенты пользователей должны вычислять базовый URI для разрешения
относительных URI в соответствии с [RFC1808], раздел 3. Далее описано, как
[RFC1808] применяется именно к HTML.
Агенты пользователей должны вычислять базовый URI в соответствии со
следующим приоритетом (от высшего приоритета к низшему).
Базовый URI, задаваемый метаданными, обнаруженными в процессе
работы по протоколу, такими как заголовок HTTP (см. [RFC2068]).
По умолчанию базовым URI является URI текущего документа. Не все
документы HTML имеют базовый URI (например, документ HTML может
присутствовать в сообщении электронной почты и может не определяться
никаким URI). Такие документы HTML считаются erroneous, если они содержат
относительные URI и используют базовый URI по умолчанию.
Кроме того, элементы OBJECT и APPLET определяют атрибуты, имеющие
преимущество над значением, установленным для элемента BASE. Подробнее
об относящихся к ним определениям URI см. в определениях этих элементов.
Ссылки, указанные в заголовках HTTP, обрабатываются в точности так,
как элементы LINK, явно установленные в документе.
Контрольные вопросы:
1. Какую роль несут ссылки и якоря, чем они отличаются.
2. Посредством какого атрибута предоставляется информация о языке
связанного ресурса
3. Допустимы ли вложенные ссылки, объясните свое мнение.
4. Какие отличия, по месту положения в тексе HTML документа, между LINK
иA
Задание:
1. Добавьте ссылки и якоря к документу созданному в предыдущей
лабораторной работе.
2. Создайте несколько взаимосвязанных Web страниц.
31
ЛАБОРАТОРНАЯ РАБОТА №4
Тема: Объекты, изображения и апплеты в HTML документе.
Цель работы: Изучить объекты, изображениями и аплеты в HTML
документах. Научится практически применять полученные знания при
создании Web - страницы.
1. Введение в объекты, изображения и апплеты
Функции мультимедиа языка HTML позволяют авторам включать в свои
страницы изображения, апплеты (программы, которые автоматически
загружаются и выполняются на машине пользователя), видеоклипы и другие
документы в формате HTML.
Например, чтобы включить в документ изображение в формате PNG,
авторы могут использовать следующий код:
<BODY>
<P>Около Большого Каньона:
<OBJECT data="canyon.png" type="image/png">
<EM>Около</EM> Большого Каньона.
</OBJECT>
</BODY>
В предыдущих версиях HTML авторы могли включать изображения (с
помощью IMG) и апплеты (с помощью APPLET). Эти элементы имеют несколько
ограничений:
Они не могут решить более общей проблемы - включение новых и возможных в
будущем типов устройств.
Элемент APPLET работает только с апплетами языка Java. Этот элемент теперь
нежелателен, вместо него используется элемент OBJECT.
Для решения всех этих вопросов в HTML 4.0 вводится элемент OBJECT,
обеспечивающий всестороннее решение для включения объектов. Элемент OBJECT
позволяет авторам документов в формате HTML указывать всю информацию,
необходимую для представления объекта агентом пользователя: исходный код,
начальные значения и рабочие данные. В данной спецификации термин "объект"
используется для описания всех объектов, которые Вы захотите включить в HTMLдокументы; другие термины: апплеты, подключаемые модули (plug-ins),
дескрипторы устройств и т.д.
Новый элемент OBJECT, таким образом, subsumes некоторые задачи,
выполняемые существующими элементами. Рассмотрим следующую
классификацию функций:
32
Тип включения
Изображение
Апплет
Другой документ HTML
Конкретный элемент
IMG
APPLET (Нежелателен.)
IFRAME
Общий элемент
OBJECT
OBJECT
OBJECT
Из таблицы видно, что каждый тип включения имеет конкретное и общее
решение. Общий элемент OBJECT служит решением для использования
возможных в будущем типов устройств.
Для включения изображений авторы могут использовать элемент OBJECT
или элемент IMG.
Для включения апплетов авторам следует использовать элемент OBJECT,
поскольку использование элемента APPLET нежелательно.
Для включения одного документа HTML в другой авторы могут
использовать новый элемент IFRAME или элемент OBJECT. В обоих случаях
внедренный документ не зависит от основного документа. Визуальные агенты
пользователей могут представлять внедренный документ в виде отдельного
окна в основном документе. Для сравнения элементов OBJECT и IFRAME
обратитесь к замечаниям о внедряемых документов.
С изображениями и другими включаемыми объектами могут быть связаны
ссылки, с помощью стандартных механизмов ссылок, а также и с помощью
навигационных карт (image maps). На навигационной карте задаются
геометрические области включаемого объекта, и каждой из них назначается
ссылка. При активизации эти ссылки могут вызывать загрузку документа,
запускать программу на сервере и т.д.
В следующих разделах мы обсудим различные механизмы, которые
авторы могут использовать для включения мультимедиа и создания
навигационных карт для этих объектов.
2. Включение изображения: элемент IMG
Определения атрибутов:
Src = uri [CT]
Этот атрибут задает местоположение изображения. Примерами широко
распознаваемых форматов являются GIF, JPEG и PNG.
Longdesc = uri[CT]
Этот атрибут определяет ссылку на длинное описание изображения. Это
описание должно дополнять краткое описание, задаваемое атрибутом alt. Если с
изображением связана навигационная карта, в этом атрибуте должна
приводиться информация о ее содержимом. Это особенно важно для серверных
навигационных карт.
Элемент IMG внедряет изображение в текущий документ по адресу из
определения элемента. Элемент IMG не имеет содержимого; обычно он
замещается изображением, назначаемым атрибутом src, исключение при этом
33
составляют выровненные влево или вправо изображения, которые "floated" out
of line.
В приведенном ранее примере мы определили ссылку на семейную
фотографию. Здесь мы вставим фотографию непосредственно в текущий
документ:
<BODY>
<P>Я только что вернулся из отпуска! Вот фотография моей семьи на
озере:
<IMG src="http://www.somecompany.com/People/Ian/vacation/family.png"
alt="Фотография моей семьи на озере">
</BODY>
Этого же эффекта можно достичь с помощью элемента OBJECT
следующим образом:
<BODY>
<P>Я только что вернулся из отпуска! Вот фотография моей семьи на
озере:
<OBJECT
data="http://www.somecompany.com/People/Ian/vacation/family.png"
type="image/png">
Фотография моей семьи на озере.
</OBJECT>
</BODY>
Атрибут alt задает альтернативный текст, который генерируется, если
изображение невозможно отобразить (информацию о том, как указать
альтернативный текст, см. ниже). Агенты пользователей должны генерировать
альтернативный текст, если они не поддерживают изображение, если они не
поддерживают определенный тип изображений или если они сконфигурированы так,
чтобы не выводить изображений.
В следующем примере показано, как можно использовать атрибут longdesc
для ссылки на более подробное описание:
<BODY>
<P>
<IMG src="sitemap.gif"
alt="Карта узла лабораторий HP"
longdesc="sitemap.html">
</BODY>
Атрибут alt задает краткое описание изображения. Его должно быть
достаточно для того, чтобы пользователи могли решить, хотят ли они следовать
по ссылке, определяемой атрибутом longdesc для более получения подробного
описания, здесь это ссылка "sitemap.html".
Информацию о размере изображения, выравнивании и границах см. в
разделе о визуальном представлении объектов, изображений и апплетов.
34
3. Общее включение: элемент OBJECT
<!ELEMENT OBJECT - - (PARAM | %flow;)*
-- общий внедренный объект -->
<!ATTLIST OBJECT
%attrs; -- %coreattrs, %i18n, %events -declare (declare) #IMPLIED -- объявить, но не instantiate флаг -classid %URI; #IMPLIED -- определяет применение -codebase %URI; #IMPLIED -- базовый URI для classid, data, archive-data %URI; #IMPLIED -- ссылка на данные объекта -type %ContentType; #IMPLIED -- тип содержимого для данных -codetype %ContentType; #IMPLIED -- тип содержимого для кода -archive %URI; #IMPLIED -- разделенный пробелами список архивов -standby %Text; #IMPLIED -- сообщение, отображаемое при загрузке -height %Length; #IMPLIED -- переопределение высоты -width %Length; #IMPLIED -- переопределение ширины -usemap %URI; #IMPLIED -- использовать клиентскую навигационную
карту -name CDATA #IMPLIED -- представить в качестве части формы -tabindex NUMBER #IMPLIED -- положение в последовательности
перехода ->
Начальный тег - обязателен, конечный тег – обязателен.
Определения атрибутов
Classid = uri [CT]
Этот атрибут может использоваться для указания местоположения объекта
с помощью URI. Он может использоваться вместе с атрибутом data или как
альтернатива ему, в зависимости от типа объекта.
Codebase = uri [CT]
Этот атрибут определяет базовый путь, используемый для разрешения
относительных адресов URI, задаваемых в атрибутах classid, data и archive.
Если этот атрибут отсутствует, значением по умолчанию является базовый
адрес URI текущего документа.
Codetype = content-type [CI]
Этот атрибут определяет тип содержимого данных, получения которых
следует ожидать при загрузке объекта, задаваемого атрибутом classid. Этот
атрибут не является обязательным, но рекомендуется, если используется
атрибут classid, поскольку он позволяет агенту пользователя избежать загрузки
информации для типа содержимого, который он не поддерживает. Если этот
атрибут отсутствует, по умолчанию используется значение атрибута type.
Data = uri [CT]
Этот атрибут может использоваться для указания местоположения данных
объекта, например, данных изображения для объектов, определяющих
35
изображения, или в более общем случае - serialized формы объекта, который
может использоваться для повторного его создания. Если дается относительный
адрес URI, он должен интерпретироваться относительно атрибута codebase.
Type = content-type [CI]
Этот атрибут определяет тип содержимого для данных, задаваемых
атрибутом data. Этот атрибут не является обязательным, но рекомендуется,
если используется атрибут data, поскольку он позволяет агенту пользователя
избежать загрузки информации для типа содержимого, который они не
поддерживают.
Archive = uri list [CT]
Этот атрибут может использоваться для определения разделенного
пробелами списка адресов URI архивов, содержащих относящиеся к объекту
ресурсы, который может включать ресурсы, задаваемые атрибутами classid и
data. Предварительная загрузка архивов приведет к уменьшению времени
загрузки объекта. Архивы, указанные в виде относительных адресов URI,
должны интерпретироваться относительно атрибута codebase.
Declare [CI]
Если этот логический атрибут указан, он делает текущее определение
OBJECT только объявлением. Объект должен быть instantiated последующим
определением OBJECT, ссылающимся на это объявление.
Standby = text [CS]
Этот атрибут определяет сообщение, которое агент пользователя может
генерировать при загрузке implementation и данных объекта.
В большинстве агентов пользователей имеются встроенные механизмы для
генерации основных типов данных, таких как текст, изображения в формате
GIF, цвета, шрифты и ряд графических элементов. Для генерации типов данных
типов данных, которые агенты пользователей не поддерживают по умолчанию,
они обычно запускают внешние приложения. Элемент OBJECT позволяет
авторам управлять генерацией данных - задавать внешнюю генерацию или
использование некоторой определяемой автором программы, генерирующей
данные в агенте пользователя.
В более общем случае автор должен будет определить три типа
информации:
1. Реализация включенного объекта. Например, если включенный объект апплет, автор должен указать местоположение исполняемого кода апплета.
2. Генерируемые данные. Например, если включенный объект является
программой, генерирующей данные шрифта, автор должен указать
местоположение этих данных.
3. Дополнительные значения, необходимые объекту. Например, некоторым
апплетам могут быть нужны исходные значения для их параметров.
Элемент OBJECT позволяет авторам указать все три типа данных объекта,
но авторы не обязательно должны указывать их все. Например, некоторым
объектам не требуются данные (например, апплет, выполняющий анимацию).
36
Другим может быть не нужна инициализация. Другим же может не
понадобиться дополнительная информация о реализации, то есть сам агент
пользователя может уже знать, как генерировать этот тип данных (например,
изображения в формате GIF).
Авторы задают реализацию объекта и местоположение данных,
генерируемых с помощью элемента OBJECT. Однако для указания рабочих
значений авторы используют элемент PARAM, обсуждаемый в разделе об
инициализации объекта.
Элемент OBJECT может также присутствовать внутри элемента HEAD.
Поскольку агенты пользователей обычно не генерируют элементы в HEAD,
авторам следует убедиться, что во всех элементах OBJECT в HEAD нет
содержимого, которое можно генерировать. Пример включения элемента
OBJECT в элемент HEAD см. в разделе о совместном использовании данных
кадра.
Информацию об элементе OBJECT в формах см. в разделе об управлении
формами.
3.1. Правила генерации объектов
Агент пользователя должен интерпретировать элемент OBJECT в
соответствии со следующими правилами старшинства:
Сначала агент пользователя должен попытаться сгенерировать объект. Он
не должен генерировать содержимое элемента, но должен проверить его на
случай, если элемент содержит дополнительные дочерние элементы PARAM
или элементы.
Если агент пользователя по какой-либо причине не может сгенерировать
объект (не сконфигурирован для этого, недостаточно ресурсов, ошибочная
архитектура и т.д.), он должен попытаться сгенерировать его содержимое.
Авторам не следует включать содержимое в элементы OBJECT,
расположенные в элементе HEAD.
В следующем примере мы вставляем в документ апплет, представляющий
часы, с помощью элемента OBJECT. Апплету, написанный на языке Python, не
нужны дополнительные и рабочие значения. Атрибут classid определяет
местоположение апплета:
<P><OBJECT classid="http://www.miamachina.it/analogclock.py">
</OBJECT>
Обратите внимание на то, что часы будут генерироваться, как только агент
пользователя интерпретирует это объявление OBJECT. Можно отложить
генерацию объекта, начав с объявления объекта (описывается ниже).
Авторы должны выполнять объявление, включая альтернативный текст в
качестве содержимого элемента OBJECT в случае, если агент пользователя не
может сгенерировать часы.
<P><OBJECT classid="http://www.miamachina.it/analogclock.py">
37
Часы с анимацией.
</OBJECT>
Одним важным последствием создания элемента OBJECT является то, что
он предлагает механизм задания альтернативной генерации объектов; в каждом
внедренном объявлении OBJECT могут задаваться альтернативные типы
содержимого. Если агент пользователя не может сгенерировать outermost
OBJECT, он пытается сгенерировать содержимое, которое может юыть другим
элементом OBJECT и т.д.
В следующем примере мы внедряем несколько объявлений OBJECT для
того, чтобы показать работу альтернативной генерации. Агент пользователя
попытается сгенерировать первый элемент OBJECT, который он может, в
следующем порядке: (1) апплет Earth, написанный на языке Python, (2) клип
Земли в формате MPEG, (3) изображение Земли в формате GIF, (4)
альтернативный текст.
<P> <!- Сначала попробовать апплет на языке Python -->
<OBJECT title="Вид Земли из космоса"
classid="http://www.observer.mars/TheEarth.py">
<!- Затем попробовать воспроизвести видеоклип
в формате MPEG -->
<OBJECT data="TheEarth.mpeg" type="application/mpeg">
<!- Затем попробовать изображение в формате GIF -->
<OBJECT data="TheEarth.gif" type="image/gif">
<!- Затем сгенерировать текст -->
Вид <STRONG>Земли</STRONG> из космоса.
</OBJECT>
</OBJECT>
</OBJECT>
Внешнее объявление определяет апплет, которому не нужны данные или
начальные значения. Второе объявление определяет клип в формате MPEG и,
поскольку местоположение обработчика формата MPEG не указано,
предполагается, что клип будет обрабатываться агентом пользователя. Мы
также установили атрибут type, так что агент пользователя, который знает, что
он не может сгенерировать клип в формате MPEG, не будет загружать файл
"TheEarth.mpeg" из сети. В третьем объявлении задается местоположение файла
в формате GIF и определяется альтернативный текст на случай, если все прочие
механизмы не сработают.
Встроенные и внешние данные. Данные, которые должны генерироваться,
могут указываться двумя способами: в виде встроенного или внешнего ресурса.
Последний метод обычно обеспечивает более быструю генерацию, но неудобен
при генерации большого объема данных.
Пример, со встроенными данными:
<P>
<OBJECT id="clock1"
38
classid="clsid:663C8FEF-1EF9-11CF-A3DB-080036F12502"
data="data:application/x-oleobject;base64, ...данные base64...">
Часы.
</OBJECT>
Информацию о размере, выравнивании и границах объекта см. в разделе
визуальное представление объектов, изображений и апплетов.
3.2. Инициализация объекта: элемент PARAM
<!ELEMENT PARAM - O EMPTY -- значение именованного свойства -->
<!ATTLIST PARAM
id ID #IMPLIED -- идентификатор в пределах
документа -name CDATA #REQUIRED -- имя свойства -value CDATA #IMPLIED -- значение свойства -valuetype (DATA|REF|OBJECT) DATA -- Как интерпретировать значение type %ContentType; #IMPLIED -- тип содержимого для значения,
если valuetype=ref ->
Начальный тег - обязателен, конечный тег – запрещен.
Определения атрибутов:
Name = cdata
Этот атрибут определяет имя рабочего параметра, которое должно быть
понятно вставляемому объекту. Учитывает ли имя свойства регистр, зависит от
конкретной реализации объекта.
Value = cdata
Этот атрибут определяет значение рабочего параметра, задаваемого
атрибутом name. Значения свойств не имеют значения в HTML; их значение
определяется объектом.
Valuetype = data|ref|object [CI]
Этот атрибут определяет тип атрибута value. Возможные значения:
Data: Это значение используется по умолчанию. Оно означает, что
значение, задаваемое атрибутом value, будет определяться и передаваться в
объект в виде строки.
Ref: Значение, задаваемое атрибутом value, является адресом URI ресурса,
где хранятся рабочие значения. Это позволяет средствам поддержки
идентифицировать адреса URI, данные в качестве параметров. Адрес URI
должен передаваться в объект как есть, то есть неразрешенным.
Object: Значение, задаваемое атрибутом value, является идентификатором,
ссылающимся на объявление OBJECT в этом же документе. Идентификатором
должно быть значение атрибута id для объявленного элемента OBJECT.
Type = content-type [CI]
39
Этот атрибут задает тип содержимого ресурса, назначаемого атрибутом
value только в случае, если значением атрибута valuetype является "ref". Таким
образом, этот атрибут определяет для агента пользователя тип значений,
которые будут находиться по адресу URI, назначенному атрибутом value.
Элементы PARAM определяют набор значений, которые могут
понадобиться объекту во время работы. В элементах OBJECT или APPLET
может присутствовать любое число атрибутов PARAM в любом порядке, но
они должны помещаться в начале тела включающего элемента OBJECT или
APPLET.
Синтаксис имен и значений считается понятным обработчику объекта.
Данный документ не указывает, как агенты пользователей должны загружать
пары имя/значение, а также того, как они должны интерпретировать
повторяющиеся имена параметров.
Вернемся к примеру с часами и покажем использование элемента PARAM:
предположим, что апплет может принимать два рабочих параметра,
определяющих его начальную высоту и ширину. Мы можем установить
исходные размеры 40x40 пикселов с помощью двух элементов PARAM.
<P><OBJECT classid="http://www.miamachina.it/analogclock.py">
<PARAM name="height" value="40" valuetype="data">
<PARAM name="width" value="40" valuetype="data">
Этот агент пользователя не может сгенерировать приложение на языке
Python.
</OBJECT>
В следующем примере рабочие данные для параметра "Init_values" объекта
задаются в виде внешнего ресурса (файл GIF). Таким образом для атрибута
valuetype устанавливается значение "ref", а атрибутом value является адрес URI
ресурса.
<P><OBJECT classid="http://www.gifstuff.com/gifappli"
standby="Загрузка Элвиса...">
<PARAM name="Init_values"
value="./images/elvis.gif">
valuetype="ref">
</OBJECT>
Обратите внимание, что мы также установили атрибут standby, так что
агент пользователя может отобразить сообщение во время загрузки
генерирующего механизма.
Когда элемент OBJECT сгенерирован, агенты пользователя должны
выполнить поиск содержимого только для тех элементов PARAM, которые
являются их прямыми дочерними элементами и "feed" их to the OBJECT.
Таким образом, в следующем примере, если сгенерирован "obj1", "param1"
применяется к "obj1" (и не применяется к "obj2"). Если "obj1" не сгенерирован,
а "obj2" сгенерирован, "param1" игнорируется, а "param2" применяется к "obj2".
Если ни один OBJECT не сгенерирован, ни один PARAM не применяется.
40
<P>
<OBJECT id="obj1">
<PARAM name="param1">
<OBJECT id="obj2">
<PARAM name="param2">
</OBJECT>
</OBJECT>
3.3. Глобальные схемы именования объектов
Местоположение обработчика объекта задается адресом URI. Как было
сказано во введении в URI, первый сегмент абсолютного адреса URI задает
схему именования, используемую для передачи данных, назначаемых адресом
URI. Для документов в формате HTML этой схемой часто является "http".
Некоторые апплеты могут использовать внешние схемы именования.
Например, при указании апплета Java авторы могут использовать адреса URI,
начинающиеся с "java", я для аппелтов ActiveX авторы могут использовать
"clsid".
В следующем примере мы вставляем апплет на языке Java в документ в
формате HTML.
<P><OBJECT classid="java:program.start">
</OBJECT>
Установив атрибут codetype, агент пользователя может определить, нужно
ли загружать ли приложение Java, в зависимости от своих возможностей.
<OBJECT codetype="application/java-archive"
classid="java:program.start">
</OBJECT>
Некоторым схемам генерации для определения обработки необходима
дополнительная информация, поэтому им необходимо указать, где находится
эта информация. Авторы могут указать путь к обработчику объекта с помощью
атрибута codebase.
<OBJECT codetype="application/java-archive"
classid="java:program.start">
codebase="http://foooo.bar.com/java/myimplementation/"
</OBJECT>
В следующем примере (с помощью атрибута classid) задается объект
ActiveX в виде адреса URI, начинающегося со схемы именования "clsid".
Атрибут data определяет местоположение генерируемых данных (еще одни
часы).
<P><OBJECT classid="clsid:663C8FEF-1EF9-11CF-A3DB-080036F12502"
data="http://www.acme.com/ole/clock.stm">
Это приложение не поддерживается.
</OBJECT>
41
3.4. Объявление и инициализация объекта
В приведенных выше примерах были показаны отдельные определения
объектов. Если в документе должно содержаться несколько экземпляров одного
и того же объекта, объявление и инициализацию объекта можно разделить.
Такой способ имеет несколько преимуществ:
Данные могут загружаться агентом пользователя из сети один раз (во
время объявления) и повторно использоваться в каждой инициализации.
Инициализировать объект можно из местоположения, отличного от того, в
котором объект объявлялся, например, из ссылки.
Объекты можно определять в качестве рабочих данных для других
объектов.
Чтобы объявить объект так, чтобы он не обрабатывался агентом
пользователя при чтении, установите логический атрибут declare элемента
OBJECT. В то же время авторы должны идентифицировать объявление,
установив уникальное значение для атрибута id в элементе OBJECT.
Инициализация объекта позже будет ссылаться на этот идентификатор.
Объявленный OBJECT должен присутствовать в документе до первого
экземпляра OBJECT.
Объект, определенный с атрибутом declare, инициализируется каждый раз,
когда необходима генерация элемента, ссылающегося на этот объект
(например, активизируется ссылка на него, активизируется объект,
ссылающийся на него и т.д.).
В следующем примере мы объявляем OBJECT и вызываем его
инициализацию, указав его в ссылке. Таким образом, объект можно
активизировать, щелкнув, например, на выделенном тексте.
<P><OBJECT declare
id="earth.declaration"
data="TheEarth.mpeg"
type="application/mpeg">
Вид <STRONG>Земли</STRONG> из космоса.
</OBJECT>
...далее в документе...
<P>Красивое<A href="#earth.declaration"> анимационное изображение
Земли!</A>
В следующем примере показано, как указать рабочие значения,
являющиеся другими объектами. В этом примере мы отправляем текст
(стихотворение) гипотетическому механизму для просмотра стихотворений.
Объект распознает рабочий параметр с именем "font" (скажем, для генерации
текста стихотворения с использованием определенного шрифта). Значение
этого параметра само является объектом, вставляющим (но не генерирующим)
объект шрифта. Отношение между объектом шрифта и объектом механизма
42
просмотра стихотворений достигается с помощью (1) назначения атрибута id в
объявлении объекта шрифта и (2) ссылки на него в элементе PARAM объекта
механизма просмотра стихотворений (с помощью valuetype и value).
<P><OBJECT declare
id="tribune"
type="application/x-webfont"
data="tribune.gif">
</OBJECT>
...просмотр стихотворения из файла KublaKhan.txt...
<P><OBJECT classid="http://foo.bar.com/poem_viewer"
data="KublaKhan.txt">
<PARAM name="font" valuetype="object" value="#tribune">
<P>У вас нет такой классной программы просмотра стихотворений...
</OBJECT>
Агенты пользователей, не поддерживающие атрибут declare, должны
генерировать содержимое объявления OBJECT.
4. Включение апплета: элемент APPLET
Элемент APPLET является нежелательным (как и все атрибуты этого
элемента), вместо него следует использовать элемент OBJECT.
Определения атрибутов:
Codebase = uri [CT]
Этот атрибут определяет базовый адрес URI апплета. Если этот атрибут не
указан, по умолчанию используется базовый адрес URI, используемый для
всего документа. Значениями этого атрибута могут быть только подкаталоги
каталога, в котором расположен текущий документ.
Code = cdata [CS]
Этот
атрибут
определяет
имя
файла
класса,
содержащего
скомпилированный подкласс апплета или путь, по которому можно получить
класс, включая сам файл класса. Он интерпретируется с учетом кода апплета.
Для этого должен быть указан один из атрибутов code или object.
Name = cdata [CS]
Этот атрибут определяет имя экземпляра апплета, что дает возможность
апплетам на одной странице находить друг друга и взаимодействовать друг с
другом.
Archive = uri-list [CT]
Этот атрибут определяет разделенный запятыми список адресов URI
архивов, содержащих классы и другие ресурсы, которые будут "предварительно
загружаться". Классы загружаются с помощью экземпляра AppletClassLoader с
заданным codebase. Относительные адреса URI архивов интерпретируются
относительно codebase апплета. Предварительная загрузка ресурсов может
существенно увеличить производительность апплетов.
43
Object = cdata [CS]
Этот атрибут определяет имя ресурса, содержащего serialized
представление состояния апплета. Он интерпретируется относительно codebase
апплета. serialized данные содержат имя класса апплета, но не обработчика.
Имя класса используется для загрузки обработчика из файла класса или архива.
Если апплет "deserialized", метод start() вызывается вместо метода init().
Атрибуты, допустимые при serialized исходного объекта, не восстанавливаются.
Атрибуты, переданные в этот экземпляр APPLET, будут доступны апплету.
Авторам следует очень осторожно использовать это свойство. Перед serialized
вапплет должен быть остановлен.
Должен присутствовать один из атрибутов code или object. Если даны оба
атрибута code и object, и в них указаны разные имена классов, это является
ошибкой.
Width = длина [CI]
Этот атрибут определяет начальную ширину области отображения апплета
(не включая окна и диалоги, создаваемые апплетом).
Height = длина [CI]
Этот атрибут определяет начальную высоту области отображения апплета
(не включая окна и диалоги, создаваемые апплетом).
Этот элемент, поддерживаемый всеми программами просмотра с
поддержкой Java, позволяет дизайнерам внедрять апплеты Java в документы
HTML. Он является нежелательным, и вместо него следует использовать
элемент OBJECT.
Содержимое элемента APPLET служит альтернативной информацией для
агентов пользователей, не поддерживающих этот элемент или не
сконфигурированных для поддержки апплетов. В противном случае агенты
пользователей должны игнорировать содержимое.
ПРИМЕР НЕЖЕЛАТЕЛЬНОГО ИСПОЛЬЗОВАНИЯ:
В следующем примере элемент APPLET включает в документ апплет на
языке Java. Поскольку атрибут codebase не установлен, предполагается, что
апплет находится в том же каталоге, что и сам документ.
<APPLET code="Bubbles.class" width="500" height="500">
Java-апплет, рисующий движущиеся пузыри.
</APPLET>
Этот пример можно переписать с использованием элемента OBJECT
следующим образом:
<P><OBJECT codetype="application/java"
classid="java:Bubbles.class"
width="500" height="500">
Java-апплет, рисующий движущиеся пузыри.
</OBJECT>
Задать для апплета исходные значения можно с помощью элемента
PARAM.
44
ПРИМЕР НЕЖЕЛАТЕЛЬНОГО ИСПОЛЬЗОВАНИЯ:
Следующий апплет на языке Java:
<APPLET code="AudioItem" width="15" height="15">
<PARAM name="snd" value="Hello.au|Welcome.au">
Java-апплет, воспроизводящий звуковой файл приветствия.
</APPLET>
можно определить с использованием элемента OBJECT следующим
образом:
<OBJECT codetype="application/java"
classid="AudioItem"
width="15" height="15">
<PARAM name="snd" value="Hello.au|Welcome.au">
Java-апплет, воспроизводящий звуковой файл приветствия.
</OBJECT>
5. Визуальное представление изображений, объектов и апплетов
Все атрибуты элементов IMG и OBJECT, относящиеся к визуальному
выравниванию и представлению, являются устаревшими, вместо них следует
использовать таблицы стилей.
5.1. Ширина и высота
Определения атрибутов:
Width = длина [CN]
Переопределение ширины изображения и объекта.
Height = длина [CN]
Переопределение для изображения и объекта.
Если указаны атрибуты width и height, они сообщают агентам пользователя
о необходимости переопределения исходного размера изображения или объекта
этими значениями.
Если объектом является изображение, оно масштабируется. Агенты
пользователей должны наилучшим образом масштабировать объект или
изображение, чтобы они соответствовали ширине и высоте, определенным
автором. Обратите внимание, что длины, выраженные в процентах, зависят от
доступного горизонтального или вертикального пространства, а не от
исходного размера изображения, объекта или апплета.
Атрибуты height и width дают агентам пользователей представление о
размере изображения или объекта, чтобы они могли зарезервировать
соответствующее пространство и продолжать генерацию документа, ожидая
данных об изображении.
45
5.2. Пространство вокруг изображений и объектов
Атрибуты vspace и hspace определяют свободное пространство слева и
справа (hspace) и над и под (vspace) IMG, APPLET, OBJECT. По умолчанию
значение этого атрибута не определено, но обычно это небольшое ненулевое
значение. Оба атрибута имеют значение типа длина.
5.3. Границы
Изображение или объект может окружать граница (например, если она
указана пользователем или изображение имеет содержимое элемента A).
Определения атрибутов:
Border = пикселы
Нежелателен. Атрибут border определяет ширину границы в пикселах.
Значение этого атрибута, используемое по умолчанию, зависит от агента
пользователя.
5.4. Выравнивание
Атрибут align определяет положение IMG, OBJECT или APPLET
относительно его содержимого.
Следующие значения атрибута align относятся к положению объекта
относительно окружающего текста:
bottom: означает, что окно объекта должно быть вертикально выровнено
относительно текущей базовой линии. Это значение используется по
умолчанию.
middle: означает, что центр объекта должен быть выровнен вертикально
относительно текущей базовой линии.
top: означает, что верх объекта должен быть вертикально выровнен
относительно верха текущей текстовой строки.
Два других значения, left и right, приводят к перемещению изображения к
текущему левому или правому полю. Они обсуждаются в разделе о плавающих
объектах.
Различие интерпретаций атрибута align. Агенты пользователей по-разному
интерпретируют атрибут align. Некоторые принимают в расчет только
текстовую строку, находящуюся перед элементом, некоторые учитывают текст
по обеим сторонам элемента.
6. Как указать альтернативный текст
Определения атрибутов:
Alt = текст [CS]
46
Для агентов пользователей, не имеющих возможности вывести
изображения, формы или апплеты, этот атрибут определяет альтернативный
текст. Язык альтернативного текста определяется атрибутом lang.
Для некоторых нетекстовых элементов (IMG, AREA, APPLET и INPUT)
авторы должны указывать альтернативный текст, служащий содержимым, если
элемент нельзя нормально сгенерировать. Задание альтернативного текста
помогает пользователям, не имеющих графических дисплеев, пользователям,
браузеры которых не поддерживают формы, visually impaired users,
пользователям синтезаторов речи, пользователям, графический агент которых
сконфигурирован так, чтобы не выводить изображения и т.д.
Атрибут alt должен быть указан для элементов IMG и AREA. Он не
является обязательным для элементов INPUT и APPLET.
В то время как альтернативный текст может быть очень полезным,
использовать его нужно осторожно. Авторы должны иметь в виду следующее:
Не указывайте несоответствующий альтернативный текст, включая
изображения, предназначенные для форматирования страницы, например,
alt="red ball" не соответствует изображению, определяющему красный круг для
отметки заголовка абзаца. В этих случаях в качестве альтернативного текста
следует указать пустую строку (""). Авторам в любом случае рекомендуется не
использовать изображения для форматирования страниц; вместо этого следует
использовать таблицы стилей.
Не указывайте бессмысленный альтернативный текст (например, "dummy
text"). Он не только будет озадачивать пользователей, но также будет замедлять
агенты пользователей, преобразующие текст в речь или текст Бройля.
Контрольные вопросы:
1. Какие проблемы существовали в ранних версиях языка HTML по
отношению к изображениям и аплетам.
2. Какой атрибут задает краткое описания изображения.
3. Какие типы данных должны быть указаны при использовании OBJECT.
4. Какие ограничения накладываются на местоположение объявленного
OBJECT и экземпляра OBJECT.
5. Как можно помочь людям чьи броузеры не могут отображать изображения
находящиеся на Web странице.
Задание:
1. Встройте изображения, объекты и аплеты в документ созданный в
предыдущей лабораторной работе.
2. Примените альтернативный текст в добавление к изображениям.
47
ЛАБОРАТОРНАЯ РАБОТА №5
Тема: Фреймы в HTML документе.
Цель работы: Изучить возможности предоставления нескольких
документов в одном, размещая их в окнах основного HTML документа.
Научится практически применять полученные знания при создании Web страницы.
1. Введение в фреймы
Фреймы в HTML позволяют авторам представлять документы в
нескольких разделах, которые могут быть независимыми или вложенными
окнами. Это обеспечивает дизайнерам способ оставлять некоторую
информацию видимой, в то время как другая информация прокручивается или
заменяется. Например, в одном окне в одном фрейме может отображаться
статический баннер, во втором навигационное меню, а в третьем - сам
документ, который можно прокручивать или переходить к другому с помощью
навигации во втором фрейме.
Вот простой документ с использованием фреймов:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN"
"_THE_LATEST_VERSION_/frameset.dtd">
<HTML>
<HEAD>
<TITLE>Простой документ с фреймами</TITLE>
</HEAD>
<FRAMESET cols="20%, 80%">
<FRAMESET rows="100, 200">
<FRAME src="contents_of_frame1.html">
<FRAME src="contents_of_frame2.gif">
</FRAMESET>
<FRAME src="contents_of_frame3.html">
<NOFRAMES>
<P>В этом документе содержится:
<UL>
<LI><A href="contents_of_frame1.html">Миленький текстик</A>
<LI><IMG src="contents_of_frame2.gif" alt="Симпатичная картинка">
<LI><A href="contents_of_frame3.html">Еще славный текстик</A>
</UL>
</NOFRAMES>
</FRAMESET>
</HTML>
Это может привести примерно к следующей структуре экрана:
48
Фрейм 1
Фрейм 1
Фрейм 1
Если агент пользователя не может представлять фреймы или
сконфигурирован так, чтобы не делать этого, он должен генерировать
содержимое элемента NOFRAMES.
2. Расположение фреймов
Документ HTML, в котором описывается компоновка фреймов
(называемый документом с фреймами), выглядит не так, как документ HTML
без фреймов. Стандартный документ имеет один раздел HEAD и один раздел
BODY. Документ с фреймами имеет раздел HEAD и раздел FRAMESET,
который заменяет раздел BODY.
В разделе FRAMESET задается расположение фреймов в основном окне
агента пользователя. Кроме того, в разделе FRAMESET может присутствовать
элемент NOFRAMES с альтернативным содержимым для агентов
пользователей, не поддерживающих фреймы или сконфигурированных так,
чтобы их не показывать.
Элементы, обычно помещаемые в раздел BODY, не должны
присутствовать до первого элемента FRAMESET, иначе элемент FRAMESET
будет игнорироваться.
2.1. Элемент FRAMESET
<![ %HTML.Frameset; [
<!ELEMENT FRAMESET - - ((FRAMESET|FRAME)+ & NOFRAMES?) подразделение окон-->
<!ATTLIST FRAMESET
%coreattrs; -- id, class, style, title -rows %MultiLengths; #IMPLIED -- список длин,
по умолчанию: 100% (1 строка) -cols %MultiLengths; #IMPLIED -- список длин,
по умолчанию: 100% (1 столбец) -onload %Script; #IMPLIED -- все фреймы загружены -onunload %Script; #IMPLIED -- все фреймы удалены ->
]]>
Определения атрибутов:
49
Rows = multi-length-list [CN]
Этот атрибут определяет расположение горизонтальных фреймов. Это
разделенный запятыми список пикселов, процентов и относительных длин. По
умолчанию используется 100%, что означат одну строку.
Cols = = multi-length-list [CN]
Этот атрибут определяет расположение вертикальных фреймов. Это
разделенный запятыми список пикселов, процентов и относительных длин. По
умолчанию используется 100%, что означат один столбец.
Элемент FRAMESET определяет макет основного окна пользователя в
виде прямоугольных пространств.
Строки и столбцы
Установка атрибута rows определяет число горизонтальных отрезков
пространства в наборе фреймов. Устанвока атрибута cols определяет число
вертикальных отрезков. Для создания сетки можно установить оба атрибута
одновременно.
Если атрибут rows не установлен, каждый столбец занимает всю длину
страницы. Если атрибут cols не установлен, каждая строка занимает всю
ширину страницы. Если не установлен ни один из этитх атрибутов, фрейм
занимает всю страницу.
Фреймы создаются в направлении слева направо для столбцов и сверху
вниз для строк. Если указаны оба атрибута, разделы окон создаются слева
направо в верхней строке, слева направо во второй строке и т.д.
В первом примере экран разделяется горизонтально на две части (то есть
создаются верхняя и нижняя части).
<FRAMESET rows="50%, 50%">
...продолжение определения...
</FRAMESET>
В следующем примере создается три столбца: второй имеет
фиксированную ширину 250 пикселов (это полезно, например, для
представления изображения известной ширины). Первый фрейм получает 25%
оставшегося пространства, а третий - 75%.
<FRAMESET cols="1*,250,3*">
...продолжение определения...
</FRAMESET>
В следующем примере создается сетка 2x3.
<FRAMESET rows="30%,70%" cols="33%,34%,33%">
...продолжение определения...
</FRAMESET>
Для следующего примера предположим, что окно браузера имеет высоту
строго 1000 пикселов. Первый раздел получает 30% общей высоты (300
пикселов). Второй имеет высоту ровно 400 пикселов. Остается 300 пикселов на
два другие фрейма. Для четвертого фрейма задана высота "2*", так что он
50
должен быть вдвое выше третьего, для которого заданы высота "*"
(эквивалентно 1*). Таким оразом, третий фрейм будет иметь высоту 100
пикселов, а четвертый - 200.
<FRAMESET rows="30%,400,*,2*">
...продолжение определения...
</FRAMESET>
Абсолютные длины, если они не дают в сумме 100% реально доступного
пространства, должны корректироваться агентом пользователя. Если указана
длина менее фактической, оставшееся пространство должно равномерно
распределяться между всеми разделами. Если указана длина, превышающая
фактическую, каждый раздел должен уменьшаться в зависимости от того,
какую часть пространства он занимает.
Вложенные наборы фреймов
Число уровней вложенности фреймов не ограничено.
В следующем примере внешний элемент FRAMESET разделяет доступное
пространство на три равных столбца. Внутренний элемент FRAMESET
разделяет вторую область на две строки неравной высоты.
<FRAMESET cols="33%, 33%, 34%">
...содержимое первого фрейма...
<FRAMESET rows="40%, 50%">
...содержимое второго фрейма, первая строка...
...содержимое второго фрейма, вторая строка...
</FRAMESET>
...содержимое третьего фрейма...
</FRAMESET>
Разделение данных между фреймами
Авторы могут разделять данные между несколькими фреймами, включая
эти данные с помощью элемента OBJECT. Элемент OBJECT следует включать
в элемент HEAD документа с фреймами и давать ему имя с помощью атрибута
id. Любой документ, являющийся содержимым фрейма, может ссылаться на
этот идентификатор.
В следующем примере показано обращение скрипта к элементу OBJECT,
определенному для всего набора фреймов:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN"
"_THE_LATEST_VERSION_/frameset.dtd">
<HTML>
<HEAD>
<TITLE>Это набор фреймов с элементом OBJECT в разделе
HEAD</TITLE>
<!-Этот элемент OBJECT не представляется! -->
<OBJECT id="myobject" data="data.bar"></OBJECT>
51
</HEAD>
<FRAMESET>
<FRAME src="bianca.html" name="bianca">
</FRAMESET>
</HTML>
<!-- In bianca.html -->
<HTML>
<HEAD>
<TITLE>Страница Бьянки</TITLE>
</HEAD>
<BODY>
...начало документа...
<P>
<SCRIPT type="text/javascript">
parent.myobject.myproperty
</SCRIPT>
...продолжение документа...
</BODY>
</HTML>
2.2. Элемент FRAME
<![ %HTML.Frameset; [
<!-- зарезервированные имена фреймов начинаются с символа "_",
остальные - с буквы -->
<!ELEMENT FRAME - O EMPTY -- вложенное окно -->
<!ATTLIST FRAME
%coreattrs; -- id, class, style, title -longdesc %URI; #IMPLIED -- ссылка на длинное описание
(дополняет заголовок) -name CDATA #IMPLIED -- имя целевого фрейма -src %URI; #IMPLIED -- исходный документ для фрейма -frameborder (1|0) 1 -- нужны границы фрейма? -marginwidth %Pixels; #IMPLIED -- ширина полей в пикселах -marginheight %Pixels; #IMPLIED -- высота полей в пикселах -noresize (noresize) #IMPLIED -- разрешить пользователям изменять размер
фреймов? -scrolling (yes|no|auto) auto -- наличией полосы прокрутки ->
]]>
Определения атрибутов:
Name = cdata [CI]
52
Назначает имя текущему фрейму. Это имя может использоваться в
качестве цели в последующих ссылках.
Longdesc = uri [CT]
Ссылка на длинное описание фрейма. Это объявление должно дополнять
краткое описание, задаваемое атрибутом title, и может быть особенно полезно
для невизуальных агентов пользователей.
Src = uri [CT]
Определяет местонахождение начального содержимого фрейма.
Noresize [CI]
Если этот атрибут присутствует, он сообщает агенту пользователя, что
размеры фрейма изменять нельзя.
Scrolling = auto|yes|no [CI]
Этот атрибут задает информацию о прокрутке фрейма. Возможные
значения
auto: При необходимости предоставлять возможности прокрутки. Это
значение используется по умолчанию.
yes: Всегда предоставлять возможности прокрутки.
no: Не предоставлять возможности прокрутки.
Frameborder = 1|0 [CN]
Этот атрибут предоставляет агенту пользователя информацию о границе
фрейма. Возможные значения:
1: Агент пользователя должен изобразить разделитель между этим
фреймам и всеми прилежащими фреймами. Это значение используется по
умолчанию.
0: Агент пользователя не должен отображать разделитель. Обратите
внимание, что разделители могут все равно отображаться, если они заданы в
других фреймах.
Marginwidth = пикселы [CN]
Этот атрибут задает пространство, оставляемое во фрейме в качестве
левого и правого полей. Значение должно превышать один пиксел. Значение по
умолчанию зависит от агента пользователя.
Marginheight = пикселы [CN]
Этот атрибут определяет верхнее и нижнее поля в фрейме. Значение
должно превышать один пиксел. Значение по умолчанию зависит от агента
пользователя.
Элемент FRAME определяет содержимое и вид одного фрейма.
Задание исходного содержимого фрейма
Атрибут src определяет исходный документ, содержащийся в фрейме.
В следующем примере документа HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN"
"_THE_LATEST_VERSION_/frameset.dtd">
<HTML>
53
<HEAD>
<TITLE>Документ с фреймами</TITLE>
</HEAD>
<FRAMESET cols="33%,33%,33%">
<FRAMESET rows="*,200">
<FRAME src="contents_of_frame1.html">
<FRAME src="contents_of_frame2.gif">
</FRAMESET>
<FRAME src="contents_of_frame3.html">
<FRAME src="contents_of_frame4.html">
</FRAMESET>
</HTML>
должна создаваться примерно следующая страница:
Фрейм 1
Фрейм 3
Фрейм 4
Фрейм 2
Агент пользователя должен загружать каждый файл в отдельный раздел.
Содержимое фрейма и его определение не должны находиться в одном
документе.
ПРИМЕР НЕДОПУСТИМОГО ИСПОЛЬЗОВАНИЯ:
Следующее определение фреймов не является допустимым в HTML,
поскольку содержимое второго фрейма находится в документе, описывающем
набор фреймов.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN"
"_THE_LATEST_VERSION_/frameset.dtd">
<HTML>
<HEAD>
<TITLE>Документ с фреймами</TITLE>
</HEAD>
<FRAMESET cols="50%,50%">
<FRAME src="contents_of_frame1.html">
<FRAME src="#anchor_in_same_document">
<NOFRAMES>
...некоторый текст...
<H2><A name="anchor_in_same_document">Important section</A></H2>
...некоторый текст...
</NOFRAMES>
</FRAMESET>
</HTML>
54
Визуальное представление фрейма
В следующем примере показано использование декоративных атрибутов
FRAME. Фрейм 1 не должен содержать полос прокрутки. В фрейме 2 вокруг
содержимого (изображения) останется пустое пространство, и размер фрейма
нельзя будет изменять. Между фреймами 3 и 4 не будет границы. Границы (по
умолчанию) будут присутствовать между фреймами 1, 2 и 3.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN"
"_THE_LATEST_VERSION_/frameset.dtd">
<HTML>
<HEAD>
<TITLE>Документ с фреймами</TITLE>
</HEAD>
<FRAMESET cols="33%,33%,33%">
<FRAMESET rows="*,200">
<FRAME src="contents_of_frame1.html" scrolling="no">
<FRAME src="contents_of_frame2.gif"
marginwidth="10" marginheight="15"
noresize>
</FRAMESET>
<FRAME src="contents_of_frame3.html" frameborder="0">
<FRAME src="contents_of_frame4.html" frameborder="0">
</FRAMESET>
</HTML>
3. Определение цели фрейма
Определения атрибутов:
Target = frame-target [CI]
Задает имя фрейма, в котором должен открываться документ.
Назначая фрейму имя с помощью атрибута name, авторы могут ссылаться
на него как на "target" для ссылок, определяемый другими элементами. Атрибут
target может устанавливаться для элементов, создающих ссылки (A, LINK),
навигационных карт (AREA) и форм (FORM).
Информацию о рспознаваемых именах фреймов Вы можете найти в
разделе о именах целевых фреймов.
В этом примере показано, как цели обеспечивают динамическое изменение
содержимого фрейма. Сначала определим набор фреймов в показанном здесь
документе frameset.html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN"
"_THE_LATEST_VERSION_/frameset.dtd">
<HTML>
<HEAD>
<TITLE>Документ с фреймами</TITLE>
55
</HEAD>
<FRAMESET rows="50%,50%">
<FRAME name="fixed" src="init_fixed.html">
<FRAME name="dynamic" src="init_dynamic.html">
</FRAMESET>
</HTML>
Затем в файле init_dynamic.html мы будем ссылаться на фрейм с именем
"dynamic".
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN"
"_THE_LATEST_VERSION_/frameset.dtd">
<HTML>
<HEAD>
<TITLE>Документ с якорями с определенными целями</TITLE>
</HEAD>
<BODY>
...начало документа...
<P>Теперь можно перейти к
<A href="slide2.html" target="dynamic">слайду 2.</A>
...продолжение документа...
<P>Все отлично. Переходим к
<A href="slide3.html" target="dynamic">слайду 3.</A>
</BODY>
</HTML>
Активизация любой из ссылок приведет к открытию нового документа в
фрейме с именем "dynamic", в то время как в другом фрейме, "fixed",
сохраняется исходное содержимое.
Примечание. Определение набора фреймов никогда не изменяется, но
содержимое одного из фреймов может изменяться. При изменении исходного
содержимого одного из фреймов определение набора фреймов более не
отражает текущего состояния фреймов.
В настоящий момент невозможно кодировать полностью состояние набора
фреймов в URI. Таким образом, многие агенты пользователей не позволяют
пользователям вносить наборы фреймов в закладки.
Наборы фреймов могут затруднять переход вперед или назад по списку
просомтренных в агенте пользователя страниц.
3.1. Установка цели по умолчанию для ссылок
Если во многих ссылках в документе используется одна и та же цель,
можно указать ее один раз и использовать везде с помощью атрибута target
каждого элемента. Это делается с помощью утсановки атрибута target элемента
BASE.
56
Вернемся к предыдущему примеру и определим информацию о цели в
элементе BASE и удалим ее из элементов A.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN"
"_THE_LATEST_VERSION_/frameset.dtd">
<HTML>
<HEAD>
<TITLE>Документ с определением цели в элементе BASE</TITLE>
<BASE href="http://www.mycom.com/Slides" target="dynamic">
</HEAD>
<BODY>
...начало документа...
<P>Теперь Вы можете перейти к <A href="slide2.html">слайду 2.</A>
...продолжение документа...
<P>Все отлично. Переходим к
<A href="slide3.html">слайду 3.</A>
</BODY>
</HTML>.
3.2. Семантика целей
Агенты пользователей должны определять целевой фрейм, в который
должен загружаться связанный ресурс в соответствии со следующими
приоритетами (от высшего к низшему):
Если в элементе установлен атрибут target и используется известный
фрейм, при активизации элемента (то есть щелчке на ссылки или обработке
формы) назначаемый элементом ресурс должен загружаться в указанном
целевом фрейме.
Если для элемента не установлен атрибут target, а в элементе BASE он
установлен, фрейм определяется атрибутом target элемента BASE.
Если ни в самом элементе, ни в элементе BASE цель не указана,
назначенный элементом ресурс должен загружаться во фрейм, в котором
содержится сам элемент.
Если в атрибуте target указан неизвестный фрейм F, агент пользователя
должен создать новое окно и фрейм, назначить фрейму имя F и загрузить
назначаемый элементом ресурс в новый фрейм.
Агенты пользователей могут обеспечивать для пользователей механизм
переопределения атрибута target.
4. Альтернативное содержимое
Авторы должны указывать альтернативное содержимое для агентов
пользователей, не поддерживающих фреймы или сконфигурированных так,
чтобы не отображать их.
57
4.1. Элемент NOFRAMES
<![ %HTML.Frameset; [
<!ENTITY % noframes.content "(BODY) -(NOFRAMES)">
]]>
<!ENTITY % noframes.content "(%flow;)*">
<!ELEMENT NOFRAMES - - %noframes.content;
-- контейнер альтернативного содержимого для представления без
фреймов -->
<!ATTLIST NOFRAMES
%attrs; -- %coreattrs, %i18n, %events ->
Элемент NOFRAMES задает содержимое, которое должно отображаться,
только
если
не
отображаются
фреймы.
Агенты
пользователей,
поддерживающие фреймы, должны отображать содержимое объявления
NOFRAMES, только если они сконфигурированы так, чтобы не отображать
фреймы. Агенты пользователей, не поддерживающие фреймы, должны
отображать содержимое элемента NOFRAMES в любом случае.
Элемент NOFRAMES можно использовать в разделе FRAMESET
документа с фреймами.
Например:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN"
"_THE_LATEST_VERSION_">
<HTML>
<HEAD>
<TITLE>Документс фреймами и NOFRAMES</TITLE>
</HEAD>
<FRAMESET cols="50%, 50%">
<FRAME src="main.html">
<FRAME src="table_of_contents.html">
<NOFRAMES>
<P>Это <A href="main-noframes.html">
версия документа без фреймов.</A>
</NOFRAMES>
</FRAMESET>
</HTML>
4.2. Длинные описания фреймов
Атрибут longdesc позволяет авторам сделать документы с использованием
фреймов более доступными для людей, использующих невизуальные агенты. В
этом атрибуте назначается ресурс, предоставляющий длинное описание
фрейма. Авторам следует обратить внимание, что длинные описания,
58
связанные с фреймами, прикрепляются к фрейму, а не к его содержимому.
Поскольку содержимое может изменяться, исходное длинное описание, скорее
всего, перестанет соответствовать содержимому фрейма. В частности, не
следует включать изображение как единственное содержимое фрейма.
В следующем документе с фреймами описываются два фрейма. В левом
фрейме находится содержание, а в правом сначала - изображение устрицы:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN"
"_THE_LATEST_VERSION_">
<HTML>
<HEAD>
<TITLE>Плохо составленный документ с фреймами</TITLE>
</HEAD>
<FRAMESET cols="20%, 80%">
<FRAME src="table_of_contents.html">
<FRAME src="ostrich.gif" longdesc="ostrich-desc.html">
</FRAMESET>
</HTML>
Обратите внимание, что изображение включено в фрейм независимо от
любого элемента HTML, так что у автора нет другой возможности указать
альтернативный текст, кроме атрибута longdesc. Если содержимое правого
фрейма изменится (например, пользователь выберет в содержании змею), у
пользователя не будет текстового доступа к новому содержимому фрейма.
Таким образом, авторы не должны помещать изображение
непосредственно в фрейм. Вместо этого изображение должно включаться в
отдельный документ HTML и снабжаться там соответствующим
альтернативным текстом:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN"
"_THE_LATEST_VERSION_">
<HTML>
<HEAD>
<TITLE>Хорошо составленный документ с фреймами</TITLE>
</HEAD>
<FRAMESET cols="20%, 80%">
<FRAME src="table_of_contents.html">
<FRAME src="ostrich-container.html">
</FRAMESET>
</HTML>
<!-Файл ostrich-container.html: -->
<HTML>
<HEAD>
<TITLE>Быстрая и мощная устрица</TITLE>
59
</HEAD>
<P>
<OBJECT data="ostrich.gif" type="image/gif">
Эти устрицы здорово вкусные!
</OBJECT>
</HTML>
5. Встроенные фреймы: элемент IFRAME
<!ELEMENT IFRAME - - (%flow;)* -- встроенное окно второго уровня -->
<!ATTLIST IFRAME
%coreattrs; -- id, class, style, title -longdesc %URI; #IMPLIED -- ссылка на длинное описание
(дополняет заголовок) -name CDATA #IMPLIED -- имя целевого фрейма -src %URI; #IMPLIED -- исходный документ для фрейма -frameborder (1|0) 1 -- запросить границы фрейма? -marginwidth %Pixels; #IMPLIED -- ширина полей в пикселах -marginheight %Pixels; #IMPLIED -- высота полей в пикселах -scrolling (yes|no|auto) auto -- наличие полосы прокрутки -align %IAlign; #IMPLIED -- вертикальное или горизонтальное
выравнивание -height %Length; #IMPLIED -- высота фрейма -width %Length; #IMPLIED -- ширина фрейма ->
Определения атрибутов:
Longdesc = uri [CT]
Этот атрибут определяет ссылку на длинное описание фрейма. Это
описание должно дополнять краткое описание, задаваемое атрибутом title, и
особенно полезно для невизуальных агентов пользователей.
Name = cdata [CI]
Этот атрибут назначает имя текущего фрейма. Имя может использоваться
в качестве цели в ссылках.
Width = длина [CN]
Длина встроенного фрейма.
Height = длина [CN]
Высота встроенного фрейма.
Элемент IFRAME позволяет авторам вставлять фрейм в блок текста.
Вставка встроенного фрейма в раздел текста скорее похожа на вставку объекта
с помощью элемента OBJECT: оба они позволяют Вам вставить один документ
HTML в другой, оба могут выравниваться относительно окружающего текста и
т.д.
60
Встраиваемая инфомрация назначается атрибутом src этого элемента.
Содержимое элемента IFRAME, с другой стороны, должно отображаться
только агентами пользователей, не поддерживающими фреймы или
сконфигурированными так, чтобы не поддерживать их.
Для поддерживающих фреймы агентов пользователей в следующем
примере в текст будет помещен отделенный границей встроенный фрейм.
<IFRAME src="foo.html" width="400" height="500"
scrolling="auto" frameborder="1">
[Ваш агент не поддерживает фреймы или сконфигурирован так, чтобы
не отображать их. Однако Вы можете просмотреть
<A href="foo.html">этот документ.</A>]
</IFRAME>
Изменять размер встроенных фреймов нельзя (и поэтому у них нет
атрибута noresize).
Контрольные вопросы:
1. Какие отличия в структуре документа у Web страниц с фреймами и без
фреймов.
2. Как ограничено число уровней вложенности фреймов.
3. Какой атрибут определяет исходный документ, содержащийся в фрейме.
4. Что такое альтернативное содержимое.
5. В чем сходство и различия IFRAME и OBJECT.
6. В каких пределах можно изменять размеры встроенных фреймов.
Задание:
1. Примените фреймы и встроеные фреймы в документе созданном в
предыдущей лабораторной работе.
61
ЛАБОРАТОРНАЯ РАБОТА №6
Тема: Таблицы стилей в HTML документе.
Цель работы: Изучить расширенные возможности дизайна HTML
документа. Научится практически применять полученные знания при создании
Web - страницы.
1. Введение в таблицы стилей
Таблицы стилей представляют наибольшее достижение для дизайнеров
Web-страниц, расширяя возможности улучшения внешнего вида страниц. В
научных средах, в которых и зародилась Web, люди более сосредоточены на
содержании документов, нежели на их представлении. По мере открытия Web
прочими людьми ограничения HTML стали источником разочарований, и
авторам пришлось уклоняться от стилистических ограничений HTML. Хотя
намерения и были добрыми - улучшение представления Web-страниц,
технологии имели нежелательные побочные эффекты. Сюда включаются:
Использование собственных расширений HTML
Преобразование текста в изображения
Использование изображений для управления пустым пространством
Использование таблиц для размещения объектов на станице
Написание программ вместо использования HTML
Эти технологии существенно усложняют Web-страницы, ограничивают
гибкость, создают проблемы взаимодействия и создают сложности для людей с
физическими недостатками.
Таблицы стилей решают эти проблемы, одновременно превосходя
ограниченные механизмы представления в HTML. Таблицы стилей упрощают
определение интервалов между строками текста, отступов, цветов,
используемых для текста и фона, размера и стиля шрифтов и другой
информации.
Например, следующая таблица стилей CSS (хранящаяся в файле
"special.css") зеленый устанавливает цвет текста абзаца и окружает его
сплошной красной рамкой:
P.special {
color : green;
border: solid red;
}
Авторы могут связывать таблицы стилей с исходным документом HTML с
помощью элемента LINK:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
"http://www.w3.org/TR/REC-html40">
<HTML>
62
<HEAD>
<LINK href="special.css" rel="stylesheet" type="text/css">
</HEAD>
<BODY>
<P class="special">В этом абзаце текст должен быть зеленым.
</BODY>
</HTML>
HTML 4.0 обеспечивает поддержку следующих функций таблиц стилей:
Гибкое размещение информации о стиле - Помещение таблиц стилей в
отдельные файлы упрощает их повторное использование. Иногда
полезно включать инструкции по представлению в документ, к
которому они применяются, в начало документа или в атрибуты
элементов в теле документа. Для упрощения управления стилем сайта в
данной спецификации описывается использование заголовков HTTP для
установки таблиц стилей, применяемых к документу.
Независимость от языков таблиц стилей - Данная спецификация не
привязывает HTML к конкретному языку таблиц стилей. Это позволяет
использовать широкий диапазон таких языков, например, простые
языки для большинства пользователей и более сложные для более
специализированных случаев. Во всех примерах, приведенных ниже,
используется язык CSS (Каскадные таблицы стилей) [CSS1], но можно
использовать и другие языки.
Каскады - Эта возможность обеспечивается некоторыми языками
таблиц стилей, такими как CSS, для объединения информации о стиле
из нескольких источников. Это может быть, например, корпоративные
положения о стиле, стили, общие для группы документов, а также
стили, специфичные для одного документа. С использованием
раздельного хранения эти таблицы стилей могут использоваться
повторно, что упрощает работу авторов и повышает эффективность
сетевого
кэширования.
Каскад
определяет
упорядоченную
последовательность таблиц стилей, в которой правила более поздних
таблиц имеют приоритет над более ранними. Не все языки таблиц
стилей поддерживают каскады.
Зависимость от устройств - HTML позволяет авторам разрабатывать
документы независимо от устройств. Это позволяет пользователям
обращаться к Web-страницам с использованием различных устройств,
например, графических дисплеев для компьютеров под управлением
Windows, Macintosh OS и X11, телевизионных устройств, специальным
образом адаптированных телефонов и портативных устройств на базе
PDA, речевых браузеров и тактильных устройств на базе азбуки Бройля.
Таблицы стилей, напротив, применяются к конкретным устройствам
или группам устройств. Таблица стилей, предназначенная для экрана,
63
может применяться при печати, но бесполезна для речевых браузеров.
Данная спецификация позволяет Вам определить широкие категории
устройств, к которым применяется конкретная таблица стилей. Это
позволяет агентам пользователей избежать загрузки ненужных таблиц
стилей. Языки таблиц стилей могут включать функции описания
зависимости от устройств в одной таблице.
Альтернативные стили - Авторы могут предлагать читателям несколько
способов просмотра документа. Например, таблица стилей для
представления компактных документов с мелким шрифтом, или
таблица, задающая крупные шрифты для удобства чтения. Данная
спецификация позволяет авторам указать предпочитаемую таблицу
стилей, а также альтернативные таблицы для определенных
пользователей или устройств. Агенты пользователей должны
предоставлять пользователям возможность выбора одной из
альтернативных таблиц или отключать все таблицы стилей.
Вопросы производительности - Некоторые пользователи высказывали
сомнения относительно скорости работы таблиц стилей. Например,
загрузка внешней таблицы стилей может привести к задержке общего
представления материала для пользователя. Подобные ситуации
возникают и в том случае, если в заголовок документа включен
длинный набор правил относительно стиля. Эти проблемы решаются
путем предоставления авторам возможности включать инструкции по
представлению в каждый элемента HTML. Благодаря этому
информация о представлении всегда доступна ко времени
представления элемента агентом пользователя. Во многих случаях
авторы воспользуются преимуществами использования общей таблицы
стилей для группы документов. В этом случае распределение правил
стиля в документе приведет к снижению производительности по
сравнению с использованием связанной таблице стилей, поскольку для
большинства документов таблицы стилей уже будет находиться в
локальном кэше. К этому эффекту приведет общедоступность хороших
таблиц стилей.
2. Как добавить стиль в HTML
Примечание. В примере таблицы стилей по умолчанию для HTML 4.0,
включенном в [CSS2], выражена общепринятая информация о стиле для
каждого элемента. Авторы могут воспользоваться этим ресурсом.
Документы в формате HTML могут содержать правила таблиц стилей
непосредственно или могут импортировать таблицы стилей.
В HTML можно использовать все языки таблиц стилей. Простого языка
таблиц стилей может быть достаточно для большинства пользователей, в то
время как другие языки могут подходить для более специализированных задач.
64
В примерах в данной спецификации используется язык "Каскадные таблицы
стилей" ([CSS1]), сокращенно CSS.
Синтаксис данных стиля зависит от языка таблицы стилей.
2.1. Установка языка таблицы стилей по умолчанию
Авторы должны указывать язык таблицы стилей для информации о стиле,
связанной с документом HTML.
Для установки языка таблицы стилей для документа по умолчанию следует
использовать элемент META. Например, чтобы установить по умолчанию язык
CSS, следует поместить в раздел HEAD следующее объявление:
<META http-equiv="Content-Style-Type" content="text/css">
Язык таблиц стилей по умолчанию можно также установить с помощью
заголовков HTTP. Показанное выше объявление с использованием тэга META
эквивалентно заголовку HTTP:
Content-Style-Type: text/css.
Агенты пользователей должны определять язык таблиц стилей по
умолчанию для документа в соответствии со следующими шагами (от высшего
приоритета к низшему):
1. Если в объявлении META задается "Content-Style-Type", язык таблиц
стилей определяет последнее объявление в потоке символов.
В противном случае, если "Content-Style-Type" задается в заголовках
HTTP, язык таблиц стилей определяет последний заголовок в потоке символов.
В противном случае по умолчанию используется язык "text/css".
2. Документы, включающие элементы, в которых устанавливается атрибут
style, но не определяется язык таблиц стилей по умолчанию, являются
некорректными. Средства разработки должна генерировать информацию о
языке таблиц стилей по умолчанию (обычно с помощью объявлений META),
чтобы агенты пользователей не полагались на язык по умолчанию "text/css".
2.2. Встроенная информация о стиле
Определения атрибутов:
Style = style [CN]
Этот атрибут определяет информацию о стиле текущего элемента.
Атрибут style определяет информацию о стиле одного элемента. Язык
таблиц стилей встроенных правил стиля определяется языком таблиц стилей по
умолчанию. Синтаксис данных стиля зависит от языка таблиц стилей.
В данном примере устанавливается информация о цвете и размере шрифта
текста определенного абзаца.
<P style="font-size: 12pt; color: fuchsia">Что за прелесть эти таблицы
стилей!
В CSS объявления свойств имеют форму "имя : значение" и разделяются
точкой с запятой.
65
Атрибут style может использоваться для применения определенного стиля
к отдельному элементу HTML. Если стиль повторно используется для
нескольких элементов, авторы должны использовать элемент STYLE для
перегруппировки этой информации. Для оптимальной гибкости авторам
следует определять стили во внешних таблицах стилей.
2.3. Информация о стиле в заголовке: элемент STYLE
<!ELEMENT STYLE - - %StyleSheet -- информация о стиле -->
<!ATTLIST STYLE
%i18n; -- lang, dir, для использования с заголовком -type %ContentType; #REQUIRED - тип содержимого языка стилей -media %MediaDesc; #IMPLIED -- для использования с этими устройствами - title %Text; #IMPLIED -- рекомендуемый заголовок ->
Начальный тэг - обязателен, конечный тэг – обязателен.
Определения атрибутов:
Type = content-type [CI]
Этот атрибут определяет язык таблиц стилей для содержимого элемента и
имеет приоритет над языком таблиц стилей, ипользуемы. Язык таблиц стилей
указывается как тип содержимого (например, "text/css"). Авторы должны
указать значение для этого атрибута; для него нет значения по умолчанию.
Media = дескрипторы устройств [CI]
Этот атрибут задает целевое устройство для информации о стиле. Это
может быть один дескриптор устройства или список дескрипторов,
разделенных запятыми. По умолчанию устанавливается значение "screen".
Элемент STYLE позволяет авторам помещать правила таблиц стилей в
раздел head документа. В HTML допустимо любое число элементов STYLE в
разделе HEAD.
Агенты пользователей, не поддерживающие таблицы стилей или не
поддерживающие определенный язык таблиц стилей, используемый в элементе
STYLE, не должны показывать элемент STYLE. Ошибкой будет генерировать
его содержимое как часть текста документа. Некоторые языки таблиц стилей
поддерживают синтаксис для того, чтобы не показывать содержимое
несоответствующим спецификации агентам пользователей.
Синтаксис данных стиля зависит от языка таблицы стилей.
Некоторые реализации таблиц стилей могут поддерживать большее
разнообразие правил для элемента STYLE, чем в атрибуте style. Например, в
CSS правила могу объявляться в элементе STYLE для:
Всех экземпляров определенного элемента языка HTML (например, для
всех элементов P, всех элементов H1 и т.д.)
Всех экземпляров элемента HTML, принадлежащих определенному классу
(т.е. для атрибута class которых установлено определенное значение).
66
Отдельных экземпляров элемента языка HTML (т.е. для атрибута id
которого установлено определенное значение).
Правила приоритета и наследования правил таблиц стилей зависят от
языка таблиц.
Следующее объявление CSS STYLE приводит к появлению границы
вокруг всех элементов H1 в документе и центрированию их на странице.
<HEAD>
<STYLE type="text/css">
H1 {border-width: 1; border: solid; text-align: center}
</STYLE>
</HEAD>
Чтобы указать, что эта информация о стиле должна применяться только к
элементам H1 определенного класса, можно изменить определение следующим
образом:
<HEAD>
<STYLE type="text/css">
H1.myclass {border-width: 1; border: solid; text-align: center}
</STYLE>
</HEAD>
<BODY>
<H1 class="myclass"> Наш стиль влияет на этот заголовок уровня
H1</H1>
<H1> А на этот заголовок наш стиль не влияет</H1>
</BODY>
И, наконец, для ограничения области действия информации о стиле
единственным экземпляром элемента H1, установите атрибут id:
<HEAD>
<STYLE type="text/css">
#myid {border-width: 1; border: solid; text-align: center}
</STYLE>
</HEAD>
<BODY>
<H1 class="myclass"> На этот заголовок H1 стиль не влияет</H1>
<H1 id="myid"> А на этот влияет </H1>
<H1> На этот опять не влияет </H1>
</BODY>
Хотя информация о стиле может устанавливаться почти для всех
элементов HTML, два элемента, DIV и SPAN, особенно полезны тем, что они
не накладывают никакой семантики представления (кроме block-level vs. inline).
Вместе с таблицами стилей эти элементы позволяют пользователям
неограниченно расширять язык HTML, особенно при использовании атрибутов
class и id.
67
В следующем примере элемент SPAN используется для установки малых
прописных букв для стиля шрифта первых нескольких слов абзаца.
<HEAD>
<STYLE type="text/css">
SPAN.sc-ex { font-variant: small-caps }
</STYLE>
</HEAD>
<BODY>
<P><SPAN class="sc-ex">Первые несколько</SPAN> слов абзаца
выделены малыми прописными буквами.
</BODY>
В следующем примере мы используем элемент DIV и атрибут class для
установки выравнивания текста для ряда абзацев, составляющих введение в
научную статью. Информация о стиле может повторно использоваться для
других разделов введения путем установки атрибута class в любом месте
документа.
<HEAD>
<STYLE type="text/css">
DIV.Abstract { text-align: justify }
</STYLE>
</HEAD>
<BODY>
<DIV class="Abstract">
<P>The Chieftain product range is our market winner for
the coming year. This report sets out how to position
Chieftain against competing products.
<P>Chieftain replaces the Commander range, which will
remain on the price list until further notice.
</DIV>
</BODY>
2.4. Типы устройств
HTML позволяет авторам создавать документы, использующие
характеристики устройства, на котором будет представляться документ
(например, графические дисплеи, телевизионные экраны, переносные
устройства, речевые браузеры, тактильные устройства на базе азбуки Бройля и
т.д.). С помощью атрибута media авторы могут позволить агентам
пользователей загружать и применять таблицы стилей выборочно.
Объявления в следующем примере применяются к элементам H1. При
показе на проекторе во время встречи все экземпляры будут отображаться
синим цветом. При печати они будут отцентрированы.
68
<HEAD>
<STYLE type="text/css" media="projection">
H1 { color: blue}
</STYLE>
<STYLE type="text/css" media="print">
H1 { text-align: center }
</STYLE>
Этот пример добавляет звуковые эффекты для устройства речевого
вывода:
<STYLE type="text/css" media="aural">
A { cue-before: uri(bell.aiff); cue-after: uri(dong.wav)}
</STYLE>
</HEAD>
Управление устройствами особенно интересно при использовании с
внешними таблицами стилей, поскольку агенты пользователей могут
сэкономить время, загружая из сети только таблицы стилей, применяющиеся к
текущему устройству. Например, речевые браузеры могут не загружать
таблицы стилей, разработанные для визуального представления. Подробнее см.
в разделе о зависящих от устройств каскадах.
3. Внешние таблицы стилей
Авторы могут отделять таблицы стилей от документов HTML. Это дает
следующие преимущества:
Авторы и менеджеры Web-сайтов могут совместно использовать
таблицы стилей в ряде документов (и сайтов).
Авторы могут изменять таблицы стилей без изменения документа.
Агенты пользователей могут загружать таблицы стилей выборочно (в
зависимости от описаний устройств).
3.1. Предпочитаемые и альтернативные таблицы стилей
HTML позволяет авторам связывать с документом любое число внешних
таблиц стилей. Язык таблиц стилей определяет взаимодействие нескольких
внешних таблиц стилей (например, правила "каскадов" CSS).
Авторы могут указать ряд взаимоисключающих таблиц стилей,
называемых альтернативными. Пользователи могут выбирать таблицы, которые
им больше нравятся. Например, автор может указать один стиль для небольших
экранов, другой - для слабовидящих пользователей (например, с
использованием крупного шрифта). Агенты пользователей должны
предоставлять пользователям возможности выбора одной из альтернативных
таблиц.
69
Автор может указать, что одна из альтернатив является предпочтительной.
Агенты пользователей должны применять предпочитаемые автором таблицы
стилей, если пользователь не выбрал другую альтернативу.
Авторы могут сгруппировать несколько альтернативных таблиц стилей
(включая предпочитаемые автором) под одним именем стиля. Если
пользователь выбирает именованный стиль, агент пользователя должен
применять все таблицы стилей с этим именем. Агенты пользователей не
должны применять альтернативные таблицы стилей с другим именем стиля.
Как присвоить имя группе стилей, описано в разделе об определении внешних
таблиц стилей.
Авторы также могут указать постоянные таблицы стилей, которые агенты
пользователей должны применять в дополнение к альтернативным таблицам
стилей.
При применении таблицы стилей агенты пользователей должны учитывать
дескрипторы устройств.
Агенты пользователей также должны позволять пользователям полностью
отключать таблицы стилей автора; в этом случае агент пользователя не должен
применять ни одну из таблиц стилей.
3.2. Указание внешних таблиц стилей
Авторы указывают внешние таблицы стилей с помощью атрибутов
элемента LINK.
Установите в атрибуте href местоположение файла таблицы стилей.
Значением атрибута href должен быть URI.
Установите для атрибута type значение, указывающее язык связанного
ресурса (таблицы стилей). Это позволяет агентам пользователей не загружать
таблицы стилей, использующие неподдерживаемые языки.
Укажите, является ли таблицы стилей постоянно, предпочитаемой или
альтернативной:
Чтобы таблицы была постоянной, установите для атрибута rel значение
"stylesheet", и не устанавливайте атрибут title.
Чтобы таблица была предпочитаемой, установите для атрибута rel
значение "stylesheet", и дайте таблице имя с помощью атрибута title.
Чтобы указать альтернативную таблицу, установите для атрибута rel
значение "alternate stylesheet" а дайте таблице имя с помощью атрибута title.
Агенты пользователей должны обеспечивать пользователям средства
просмотра и выбора таблицы стилей из списка альтернатив. Для атрибута title
рекомендуется устанавливать значение, которое будет представлять эту
таблицу в списке.
В этом примере мы сначала определяем постоянную таблицу стилей,
находящуюся в файле mystyle.css:
70
<LINK href="mystyle.css" rel="stylesheet" type="text/css">
Установка атрибута title назначает ее предпочитаемой автором таблицей:
<LINK href="mystyle.css" title="Compact" rel="stylesheet" type="text/css">
Добавление ключевого слова "alternate" а атрибут rel сделает ее
альтернативной таблицей стилей:
<LINK href="mystyle.css" title="Medium" rel="alternate stylesheet"
type="text/css">
Подробнее о внешних таблицах стилей Вы можете узнать в разделе о
ссылках и внешних таблицах стилей.
Авторы также могут использовать для установки предпочитаемой таблицы
стилей элемент META. Например, чтобы установить предпочитаемую таблицу
стилей "compact" (см. предыдущий пример), авторы могут включить в элемент
HEAD следующую строку:
<META http-equiv="Default-Style" content="compact">
Предпочитаемую таблицу стилей можно также указать с помощью
заголовков HTTP. Объявление META выше эквивалентно заголовку HTTP:
Default-Style: "compact"
Если предпочитаемая таблица стилей указывается двумя или более
элементами META или заголовками HTTP, преимущество имеет последнее
объявление. Считается, что заголовки HTTP обрабатываются раньше, чем
объявления HEAD.
Если предпочитаемая таблица стилей задается двумя или более
элементами LINK, преимущество имеет первая.
Предпочитаемые таблицы стилей, задаваемые с помощью META или
заголовков HTTP имеют преимущество над таблицами, задаваемыми
элементом LINK.
4. Каскады таблиц стилей
Каскадные языки таблиц стилей, такие как CSS, позволяют использовать
информацию о стиле из нескольких источников. Однако не все языки таблиц
стилей поддерживают каскады. Чтобы определить каскад, авторы указывают
последовательность элементов LINK и/или STYLE. Каскад информации таблиц
стилей производится в порядке указания элементов в разделе HEAD.
Примечание. В данной спецификации не описано каскадирование таблиц
стилей разных языков. Авторам следует избегать смешивания языков.
В следующем примере мы определяем две альтернативные таблицы стилей
с именем "compact". Если пользователь выбирает стиль "compact", агент
пользователя должен применять обе внешние таблицы, а также постоянную
таблицу "common.css". Если пользователь выбирает стиль "big print",
применяться будут только альтернативная таблица "bigprint.css" и постоянная
таблица "common.css".
71
<LINK rel="alternate stylesheet" title="compact" href="small-base.css"
type="text/css">
<LINK rel="alternate stylesheet" title="compact" href="small-extras.css"
type="text/css">
<LINK rel="alternate stylesheet" title="big print" href="bigprint.css"
type="text/css">
<LINK rel="stylesheet" href="common.css" type="text/css">
Вот пример каскада, в котором задействованы оба элемента - LINK и
STYLE.
<LINK rel="stylesheet" href="corporate.css" type="text/css">
<LINK rel="stylesheet" href="techreport.css" type="text/css">
<STYLE type="text/css">
p.special { color: rgb(230, 100, 180) }
</STYLE>
4.1. Каскады, зависящие от устройств
Каскад может включать таблицы стилей, применяемые к различным
устройствам. Элементы LINK и STYLE могут использоваться с атрибутом
media. Агент пользователя несет ответственность за отфильтровывание таблиц
стилей, не применяющихся к текущему устройству.
В следующем примере мы определяем каскад, в котором таблица стилей
"corporate" представляется в нескольких версиях: одна для печати, другая для
экранного представления, третья для речевых браузеров (полезная, например,
при чтении электронной почты в машине). Таблица "techreport" применяется ко
всем устройствам. Цветная rule, определяемая элементом STYLE, используется
для печати и для экрана, но не для звукового представления.
<LINK
rel="stylesheet"
media="aural"
href="corporate-aural.css"
type="text/css">
<LINK
rel="stylesheet"
media="screen"
href="corporate-screen.css"
type="text/css">
<LINK
rel="stylesheet"
media="print"
href="corporate-print.css"
type="text/css">
<LINK rel="stylesheet" href="techreport.css" type="text/css">
<STYLE type="text/css">
p.special { color: rgb(230, 100, 180) }
</STYLE>
72
4.2. Наследование и каскады
Если агент пользователя собирается представлять документ, ему
необходимо найти значения для свойств стиля, например, семейство шрифтов,
начертание, размер шрифта, длину строки, цвет текста и т.д. Точный механизм
зависит от языка таблиц стилей, но, в общем, применяется следующее:
Механизм каскадирования используется, если к элементу применяется ряд
правил стиля. Этот механизм позволяет агенту пользователя сортировать
правила по специфичности и определять, какое правило нужно применить.
Если правило невозможно найти, следующий шаг зависит от наследования
свойства. Не все свойства могут наследоваться. Для этих свойств язык таблиц
стилей обеспечивает значения по умолчанию для использования в случае
отсутствия явных правил для конкретного элемента.
Если свойство может наследоваться, агент пользователя проверяет
непосредственно элемент, в который вложен текущий элемент, и ищет правило,
применяющееся к нему. Этот процесс продолжается до тех пора, пока
применимое правило не будет обнаружено. Этот механизм обеспечивает
компактное задание таблиц стилей. Например, авторы могут указать семейство
шрифтов для всех элементов в разделе BODY с помощью одного правила для
элемента BODY.
5. Как скрыть информацию о стиле от агентов пользователей
Некоторые языки таблиц стилей поддерживают синтаксис, позволяющий
авторам скрывать содержимое элементов STYLE от несоответствующих
агентов пользователей.
В данном примере для CSS показано, как можно скрыть содержимое
элементов STYLE, чтобы гарантировать, что более старые несоответствующие
спецификации агенты пользователей не будут представлять их в виде текста.
<STYLE type="text/css">
<!-H1 { color: red }
P { color: blue}
-->
</STYLE>
6. Привязка таблиц стилей с помощью заголовков HTTP
Менеджеры Web-серверов могут сконфигурировать сервер таким образом,
чтобы таблица стилей применялась к группе страниц. Заголовок HTTP Link,
описанный в [RFC2068], раздел 19.6.1.2, действует так же, как элемент LINK, с
73
теми же атрибутами и значениями. Несколько заголовков Link соответствуют
нескольким элементам LINK в том же порядке. Например,
Link: <http://www.acme.com/corporate.css>; REL=stylesheet
соответствует:
<LINK rel="stylesheet" href="http://www.acme.com/corporate.css">
Можно задать несколько альтернативных стилей с помощью нескольких
заголовков Link, а затем использовать атрибут rel для определения стиля по
умолчанию.
В следующем примере стиль "compact" применяется по умолчанию,
поскольку в нем отсутствует ключевое слово "alternate" для атрибута rel.
Link: <compact.css>; rel="stylesheet"; title="compact"
Link: <bigprint.css>; rel="alternate stylesheet"; title="big print"
Это работает и при отправке документов HTML по электронной почте.
Некоторые агенты электронной почты могут изменять порядок заголовков
[RFC822]. Чтобы защитить стиль от изменения порядка каскадов для таблиц,
задаваемых заголовками Link, авторы могут использовать объединение
заголовков для объединения нескольких экземпляров одного и того же поля
заголовка. Кавычки необходимы только в случае, если значения атрибутов
включают пробелы. Используйте SGML entities для ссылок на символы,
недопустимые в заголовках HTTP или электронной почты или символов,
которые могут быть изменены при передаче через шлюзы.
Контрольные вопросы:
1.
2.
3.
4.
5.
Для чего нужны таблицы стилей.
Какие функции таблиц стилей вам известны.
От чего зависит синтаксис данных стиля
Имеет ли смысл отделение таблиц стилей от документов HTML
Что такое - каскады таблиц стилей
Задание:
1. Примените таблицы стилей в документе созданном в предыдущей
лабораторной работе.
74
СПИСОК ЛИТЕРАТУРЫ
1. Хеслоп Б. Бадник Л. –HTML с самого начала – СПб: «Издательство
Питер», 1997. – 406с.:ил.
2. Электронный HTML 4.0 – М.: АСТ-ПРЕСС; Инфорком-Пресс, 2000.
576с.: ил.
3. Коуров Л.В. – Информационные технологии – Мн.: Амалфея, 2000. –
192с.
75
ОГЛАВЛЕНИЕ
Л/р №1 «Создание простейшей Web - страницы»…………………………… 4
Л/р №2 «Изучение приемов форматирования абзацев» ……………………14
Л/р №3 «Гипертекстовые ссылки в HTML документе»……………………..20
Л/р №4 «Объекты, изображения и апплеты в HTML документе»………….32
Л/р №5 «Фреймы в HTML документе»……………………………………….48
Л/р №6 «Таблицы стилей в HTML документе»………………………………62
76