Государственные и региональные информационные системы
Атрибуты
С элементами могут быть связаны свойства, называемые атрибутами, которые могут иметь значения (стандартные или устанавливаемые авторами или сценариями). Пары "атрибут=значение" помещаются перед закрывающей скобкой ">" начального тэга элемента. В начальном тэге элемента может быть любое число (допустимых) пар "атрибут=значение", разделенных пробелами. Они могут указываться в любом порядке.
В данном примере для элемента H1 установлен атрибут id: <H1 id="section1"> Это определенный заголовок, спасибо атрибуту id </H1>
По умолчанию необходимо, чтобы все значения атрибутов были разделены с помощью двойных (десятичный код ASCII 34) или одинарных кавычек (десятичный код ASCII 39). Одинарные кавычки могут включаться в значение атрибута, если значение отделяется двойными кавычками, и наоборот. Авторы могут также использовать цифровые ссылки на символы для представления двойных (") и одинарных кавычек ('). Для двойных кавычек авторы могут также использовать character entity reference ". В определенных случаях авторы могут указывать значение атрибута без кавычек. Значение атрибута может включать только буквы (a-z и A-Z), цифры (0-9), знаки переноса (десятичный код ASCII 45) и точки (десятичный код ASCII 46). Рекомендуется всегда использовать кавычки.
Имена атрибутов всегда учитывают регистр
Значения атрибутов обычно учитывают регистр. Определение каждого атрибута в списке атрибутов указывается, учитывает ли значение регистр.
Список всех атрибутов, определенных в этой спецификации, приводится в указателе атрибутов.
Комментарии
Комментарии в HTML имеют следующий синтаксис:
<!-- это комментарий -->
<!-- это тоже комментарий,
он занимает несколько строк -->
Проблемы между открывающим разделителем разметки ("<!") и открывающим разделителем комментария ("--") недопустимы, но их можно использовать между закрывающим разделителем комментария ("--") и закрывающим разделителем разметки (">"). Распространенной ошибкой является включение строки символов переноса ("---") в комментарий. Следует избегать использования в комментариях двух или более символов переноса.
Цвета
Значение атрибута типа "color" (%Color;) относится к определениям цветов, как указано в [SRGB]. Значение цвета может быть шестнадцатеричным числом (которому предшествует знак диеза) или одним из следующих шестнадцати названий цветов. Названия цветов учитывают регистр.
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"
|
|
|
То есть, значения "#800080" и "Purple" оба означают пурпурный цвет.
Замечания об использовании цветов
Хотя цвета могут существенно добавлять информации в документ и повышать удобство чтения, при использовании цветов имейте в виду следующие основные принципы:
· Использование элементов и атрибутов HTML для указания цвета нежелательно. Вместо этого следует использовать таблицы стилей.
· Не используйте комбинации цветов, вызывающие проблемы у пользователей.
· Если Вы используете изображение в качестве фона или устанавливаете цвет фона, не забудьте установить и цвета текста.
· Цвета, указанные в элементах BODY и FONT и в bgcolor в таблицах выгладят по-разному на разных платформах (на рабочих станциях, Mac, Windows и на панелях LCD и CRT), поэтому не рассчитывайте на определенный эффект. В будущем поддержка цветовой модели [SRGB] вместе с цветовыми профилями ICC должна устранить эти проблемы.
· При возможности принимайте общие соглашения.
Длина
HTML определяет три типа значений длины для атрибутов:
1. Пикселы: Значение ( %Pixels; в DTD) - это целое, представляющее число пикселов (на экране, на бумаге). Таким образом, значение "50" означает пятьдесят пикселов. Нормативную информацию об определении пиксела см. в [CSS1].
2. Длина: Значение ( %Length; в DTD) может быть %Pixel; или доля вертикального или горизонтального расстояния в процентах. Таким образом, значение "50%" означает половину доступного пространства.
3. МультиДлина: Значение ( %MultiLength; в DTD) может быть %Length; или относительной длиной. Относительная длина имеет форму "i*", где "i" - целое число. При распределении пространства между элементами, конкурирующими за это пространства, агенты пользователя сначала отводят место для длин, определенных в пикселах и процентах, а затем делят оставшееся место между относительными длинами. Каждая относительная длина получает часть доступного пространства, пропорциональную целому числу, предшествующему "*". Значение "*" эквивалентно "1*". Таким образом, если имеется 60 пикселов пространства после того, как агент пользователя распределит пространство для длин, определенных в пикселах и процентах, а конкурирующими относительными длинами являются 1*, 2* и 3*, 1* получит 10 пикселов, 2* - 20 пикселов, а 3* - 30 пикселов.
Введение в структуру документа HTML
Документ в формате HTML 4.0 состоит из трех частей:
1. строки, содержащей информацию о том, что это документ HTML,
2. раздела заголовков (определяемого элементом HEAD),
3. тела, которое включает собственно содержимое документа. Тело может вводиться элементом BODY или элементом FRAMESET.
Перед каждым элементом или после каждого элемента может находиться пустое пространство (пробелы, переход на новую строку, табуляции и комментарии). Разделы 2 и 3 должны отделяться элементом HTML.
Вот пример простого документа HTML:
<HTML>
<HEAD>
<TITLE>Мой первый документ HTML</TITLE>
</HEAD>
<BODY>
<P>Всем привет!
</BODY>
</HTML>
Элемент HTML: Начальный тэг: не обязательный, конечный тэг: не обязательный
После объявления типа документа остальная часть документа HTML содержится в элементе HTML. Таким образом, типичный документ HTML имеет такую структуру:
<HTML>
...Здесь идут заголовок, тело и т.д...
</HTML>
Заголовок документа
Элемент HEAD
Элемент HEAD содержит информацию о текущем документе, такую как заголовок, ключевые слова, которые могут использоваться поисковыми машинами, и другие данные, которые не считаются содержимым документа. Агенты пользователей обычно не используют при генерации элементы из раздела HEAD. Однако они могут предоставлять пользователям информацию из раздела HEAD с помощью своих собственных механизмов.
Элемент TITLE:
<!-- Элемент TITLE не считается частью текста.
Он должен отображаться, например, в качестве заголовка страницы
или окна. В документе должен быть ровно один заголовок.
-->
Начальный тэг: обязателен, Конечный тэг: обязателен
Каждый документ HTML должен иметь элемент TITLE в разделе HEAD.
Авторы должны использовать элемент TITLE для идентификации содержимого документа. Поскольку пользователи часто обращаются к документам за пределами контекста, авторам следует обеспечивать заголовки в широком контексте. Таким образом, вместо заголовков типа "Введение", ничего не говорящих о контексте, авторам следует использовать заголовки типа "Введение в средневековое пчеловодство".
Из соображений доступности агенты пользователей всегда должны делать содержимое элемента TITLE доступным пользователям (включая элементы TITLE в кадрах). Механизм этого зависит от агента пользователя (например, в виде заголовка или произносимый).
<HTML>
<HEAD>
<TITLE>Исследование динамики популяции</TITLE>
... другие элементы заголовка...
</HEAD>
<BODY>
... тело документа...
</BODY>
</HTML>
Тело документа
Элемент BODY: Начальный тэг: не обязателен, конечный тэг: не обязателен
Определения атрибутов background = uri[CT]
Значение этого атрибута - URI, указывающий на изображение. Это изображение является фоном (для визуальных браузеров).
text = color[CI]
Этот атрибут устанавливает цвет текста (для визуальных браузеров).
link = color [CI]
Этот атрибут устанавливает цвет текста гипертекстовых ссылок, по которым Вы не переходили (для визуальных браузеров).
vlink = color [CI]
Этот атрибут устанавливает цвет текста ссылок, по которым Вы переходили (для визуальных браузеров).
alink = color [CI]
Этот атрибут устанавливает цвет текста ссылок, когда они выбраны пользователем (для визуальных браузеров).
Атрибуты, определяемые в любом другом месте
В теле документа располагается содержание документа. Содержимое может представляться агентом пользователя несколькими способами. Например, для визуальных браузеров Вы можете считать тело документа полотном, на котором отображается содержимое: текст, изображения, цвета, рисунки и т.д. Для аудиоагентов пользователей оно может произноситься.
<HTML>
<HEAD>
<TITLE>Динамика популяции</TITLE>
</HEAD>
<BODY bgcolor="white" text="black"
link="red" alink="fuchsia" vlink="maroon">
... тело документа...
</BODY>
</HTML>
Элементы уровня блока и встроенные элементы
Некоторые элементы HTML, которые могут присутствовать внутри тэга BODY, называются элементами "уровня блока", в то время как другие - "встроенными" (также называемыми элементами "уровня текста"). Разница между ними описана ниже:
Модель содержимого
Обычно элементы уровня блока могут содержать встроенные элементы и другие элементы уровня блока. Обычно встроенные элементы могут содержать только данные и другие встроенные элементы. Этому структурному различию свойственна идея о том, что элементы блока создают "большие" структуры, чем встроенные элементы.
Форматирование
По умолчанию элементы уровня блока форматируются иначе, чем встроенные элементы. Обычно элементы уровня блока начинаются с новой строки, а встроенные элементы - нет. Информацию о пробелах, переносах строки и форматировании блоков см. в разделе о тексте.
Заголовки
Элементы H1, H2, H3, H4, H5, H6
<"H1|H2|H3|H4|H5|H6">
<!--
Существует шесть уровней заголовков - с H1 (наиболее важный) до H6 (наименее важный).
-->
Начальный тэг: обязателен, Конечный тэг: обязателен
Заголовок кратко описывает содержание раздела, которому он предшествует. Информация из заголовка может использоваться агентами пользователей, например, для автоматического построения оглавления документа.
В языке HTML существует шесть уровней заголовков: H1 - наиболее важный - и H6 - наименее важный. Визуальные браузеры обычно отображают более важные заголовки более крупным шрифтом.
<H1>Лесные слоны</H1>
<P>В этом разделе мы обсуждаем менее известных лесных слонов.
...продолжение раздела...
<H2>Ариал</H2>
<P>Лесные слоны не живут в деревьях, а среди них.
...продолжение раздела...
Некоторые люди считают пропуск уровней заголовков дурным тоном. Они принимают порядок заголовков H1 H2 H1, но не принимают порядок H1 H3 H1, поскольку пропущен уровень H2.
Неотображаемые символы
Набор символов документа включает множество различных неотображаемых символов. Многие из них являются типографскими элементами, используемым в некоторых приложениях для достижения специальных визуальных эффектов отображения. В языке HTML только следующие символы определяются как неотображаемые:
· пробел набора символов ASCII ( )
· табуляция набора символов ASCII (	)
· ASCII form feed ()
· пробел нулевой ширины (​)
Символы перевода строки также являются неотображаемыми. Помните, что хотя символы 
 и 
 определены в спецификации [ISO10646] как разделители строк и абзацев соответственно, это не определяет символы перевода строки в HTML, а также в этой спецификации они не включены в более общую категорию неотображаемых символов.
В этой спецификации не определяется поведение, отображение и пр. символов пробелов, если они явно не определены как неотображаемые символы. По этой причине для достижения визуальных эффектов форматирования, использующих неотображаемые символы вместо пробелов, авторам следует использовать соответствующие элементы и таблицы стилей.
Форматирование может включать пробелы между словами (называемые межсловными пробелами), но соглашения относительно межсловных пробелов меняются в зависимости от сценария. Например, в латинских сценариях межсловный пробел обычно отображается как пробел набора символов ASCII ( ), в то время как в таиландской кодировке это разделитель слов нулевой ширины (​). В японской и китайской кодировке межсловный пробел обычно вообще не генерируется.
Помните, что последовательность неотображаемых символов между словами в исходном документе может вызвать отображение совершенно другого межсловного пробела (кроме элемента PRE). В частности, агенты пользователей должны прекращать ввод последовательностей неотображаемых символов при выводе межсловного пробела. Это можно и нужно делать, даже при отсутствии информации о языке (из атрибута lang, полях заголовка HTTP "Content-Language" (см. [RFC2068], раздел14.13), настроек агента пользователя и т.д.).
Элемент PRE используется для форматированного текста, в котором неотображаемые символы имеют важное значение.
Для того, чтобы избежать проблем с правилами переноса строк SGML и несоответствия между существующими применениями, авторы не должны полагаться на агенты пользователей при генерации неотображаемых символов непосредственно после начального тега или непосредственно перед конечным тегом. Таким образом, авторы и особенно средства разработки, должны писать, например:
<P>Мы предлагаем бесплатную <A>техническую поддержку</A> для зарегистрированных пользователей.</P>
и не должны писать:
<P>Мы предлагаем бесплатную<A> техническую поддержку </A>для зарегистрированных пользователей.</P>
Структурированный текст
Элементы фраз: EM, STRONG, DFN, CODE, SAMP, KBD, VAR, CITE, ABBR и ACRONYM. Начальный тег: обязателен, Конечный тег: обязателен
Фразовые элементы добавляют в текстовые фрагменты структуру. Обычное значение фразовых элементов следующее:
EM: Выделение.
STRONG: Более сильное выделение.
CITE: Содержит цитату или ссылку на другие ресурсы.
DFN: Указывает, что это является определением вложенного термина.
CODE: Фрагмент компьютерного кода.
SAMP: Вывод примера программ, сценариев и т.д.
KBD: Текст, который должен ввести пользователь.
VAR: Экземпляр переменной или аргумента программы.
ABBR: Сокращенная форма (например, WWW, HTTP, URI, Mass., и т.д.).
ACRONYM: Акроним (например, WAC, радар и т.д.).
Элементы EM и STRONG используются для выделения. Другие фразовые элементы имеют определенное значение в технических документах. В следующих примерах показано использование некоторых фразовых элементов:
Как сказал <CITE>Гари Трумэн</CITE>,
<Q lang="en-US">The buck stops here.</Q>
Подробнее см. <CITE>[ISO-0000]</CITE>.
В дальнейшем используйте следующий номер ссылки: <STRONG>1-234-55</STRONG>
Представление фразовых элементов зависит от агента пользователя. Обычно визуальные агенты пользователей представляют текст элемента EM курсивом, а текст элемента STRONG полужирным шрифтом. Синтезаторы речи могут изменять параметры синтеза, например, громкость, повышение тона и скорости соответственно.
Элементы ABBR и ACRONYM позволяют авторам явно показывать использование аббревиатур и акронимов. Западные языки широко используют акронимы, такие как "GmbH", "НАТО" и "ФБР", а также аббревиатуры типа "M.", "Inc.", "et al.", "etc.". В китайском и японском языках используются аналогичные механизмы аббревиатур, когда длинное название заменяется последовательностью символов Han из оригинала. Разметка этих конструкций предоставляет агентам пользователей и вспомогательным средствам, таким как средства проверки орфографии, синтезаторы речи, переводящие системы и индексаторы поисковых машин, полезную информацию.
Содержимое элементов ABBR и ACRONYM определяет саму аббревиатуру, как она обычно отображается в тексте. Атрибут title этих элементов может использоваться для указания полной развернутой формы выражения.
Несколько примеров использования элемента ABBR:
<P>
<ABBR title="World Wide Web">WWW</ABBR>
<ABBR lang="fr"
title="Société Nationale des Chemins de Fer">
SNCF
</ABBR>
<ABBR lang="es" title="Doña">Doña</ABBR>
<ABBR title="Abbreviation">abbr.</ABBR>
Помните, что аббревиатуры и акронимы часто имеют различное произношение. Например, если слова "США" и "BBC" обычно произносятся побуквенно, слова "НАТО" и "ЮНЕСКО" произносятся фонетически. Другие формы аббревиатур (например, "URI" и "SQL") некоторыми людьми произносятся побуквенно, а другими - как слова. При необходимости авторам следует использовать таблицы стилей для указания произношения аббревиатур.
Кавычки
Элементы BLOCKQUOTE и Q: Начальный тег: обязателен, конечный тег: обязателен
Определения атрибутов cite = uri [CT]
Значением этого атрибута является URI, определяющий источник документа или сообщения. Этот атрибут предназначен для предоставления информации об источнике, из которого заимствована цитат.
Эти два элемента определяют текст в кавычках. Элемент BLOCKQUOTE предназначен для длинных цитат (содержимое уровня блока) и Q предназначен для коротких цитат (встроенное содержимое), в которых не нужно разбиение на абзацы.
В этом примере цитата из книги "Две твердыни" Дж. Р. Р. Толкиена отформатирована с помощью элемента blockquote.
<BLOCKQUOTE cite="http://www.mycom.com/tolkien/twotowers.html">
<P>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.</P>
</BLOCKQUOTE>
Отображение информации в кавычках: Визуальные агенты пользователей обычно генерируют элемент BLOCKQUOTE как блок с отступом.
Визуальные агенты пользователей должны обеспечивать отображение содержимого элемента Q с кавычками в начале и в конце. Авторы не должны помещать кавычки в начало и в конец текста в элементе Q.
Агенты пользователей должны генерировать кавычки с учетом принятого в данном языке стиля (см. атрибуты lang). Во многих языках используются различные стили для внешних и внутренних (вложенных) кавычек, которые должны соответственно отображаться агентами пользователей.
В примере ниже показаны вложенные кавычки в элементе Q.
John said, <Q lang="en">I saw Lucy at lunch, she says <Q lang="en">Mary wants you to get some ice cream on your way home.</Q> I think I will get some at Ben and Jerry's, on Gloucester Road.</Q>
Поскольку в обеих цитатах используется английский язык, агенты пользователей должны генерировать их соответственно - одиночные кавычки во внутренних кавычках и двойные - во внешних:
John said, "I saw Lucy at lunch, she told me 'Mary wants you to get some ice cream on your way home.' I think I will get some at Ben and Jerry's, on Gloucester Road."
Примечание.В реализации таблиц стилей рекомендуется обеспечение механизма вставки кавычек перед цитатой, определяемой элементом BLOCKQUOTE, и после нее в соответствии с текущим языком и степенью вложенности кавычек.
Однако, поскольку некоторые авторы использовали элемент BLOCKQUOTE в основном для отступа текста, чтобы не нарушать намерения авторов, агенты пользователей не должны вставлять кавычки в стиль по умолчанию.
В связи с этим использование элемента BLOCKQUOTE для смещения текста нежелательно.
Верхние и нижние индексы
Элементы SUB и SUP: Начальный тег: обязателен, Конечный тег: обязателен
Часто для правильной генерации необходимы верхние и нижние индексы (например, во французском языке). В этих случаях для разметки текста должны использоваться элементы SUB и SUP.
H<sub>2</sub>O
E = mc<sup>2</sup>
<SPAN lang="fr">M<sup>lle</sup> Dupont</SPAN>
Строки и абзацы
Авторы традиционно разделяют свои тексты на последовательности абзацев. Организация информации в абзацы не влияет на представление абзаца: абзацы с двойным выравниванием содержат те же мысли, что и абзацы с выравниванием влево.
Разметка HTML для определения абзаца проста: элемент P определяет новый абзац.
Визуальное представление абзаца не так просто. Имеется ряд проблем, стилистических и технических:
· Обработка непечатных символов
· Перенос строки и продолжение слов
· Выравнивание
· Перенос
· Соглашения относительного письменного языка и направления текста
· Форматирование абзацев относительно окружающего
Эти вопросы обсуждаются ниже. Выравнивание абзаца и плавающие объекты обсуждаются далее в этом документе.
Элемент P представляет абзац. В нем не могут содержаться элементы уровня блока (включая и сам элемент P).
Мы призываем авторов не использовать пустой элемент P. Агенты пользователей должны игнорировать пустые элементы P.
Управление переходом на следующую строку
Переходом на следующую строку считается возврат каретки (
), перевод строки (�OA;) или пара возврат каретки/перевод строки. Все переходы на другую строку являются непечатными символами.
Принудительный переход на новую строку - элемент BR : Начальный тег: обязателен, Конечный тег: запрещен
Элемент BR принудительно разбивает (заканчивает) текущую строку текста.
Для визуальных агентов пользователей можно использовать атрибут clear для определения того, обтекает ли следующая за элементом BR разметка изображения и другие объекты, плавающие относительно левого или правого поля или начинается ниже объекта. Дальнейшая информация приведена в разделе о выравнивании и плавающих объектах. Авторам рекомендуется использовать таблицы стилей для управления обтеканием текстом изображений и других объектов.
С использованием двунаправленного форматирования, элемент BR должен действовать так же, как действует символ РАЗДЕЛИТЕЛЬ СТРОКИ [ISO10646] в двунаправленном алгоритме.
Запрет перехода на новую строку: Иногда авторам нужно избежать перехода на новую строку между двумя определенными словами. Комбинация символов (  или  ) действует как неразрывный пробел.
Переносы: В HTML имеется два типа переносов: простой и мягкий перенос. Простой перенос должен интерпретироваться агентами пользователя просто как любой другой символ. Мягкий перенос показывает агенту пользователя, где можно сделать переход на новую строку.
Браузеры, которые интерпретируют мягкие переносы, должны обеспечивать следующую семантику: если строка прекращается в месте мягкого переноса, в конце первой строки должен отображаться символ переноса. Если строка не прерывается в месте мягкого переноса, символ переноса отображаться не должен. При выполнении таких операций как поиск и сортировка мягкие переносы всегда должны игнорироваться.
В языке HTML простой перенос представляется символом "-" (- или -). Мягкий перенос представляется комбинацией символов ­ (­ или ­)
Форматирование текста
Элемент PRE: Начальный тег: обязателен, Конечный тег: обязателен
Определения атрибутов width = number[CN]
Этот атрибут предоставляет визуальным агентам пользователей подсказку относительно желаемой ширины блока форматированного текста. Агент пользователя может использовать эту информацию для выбора соответствующего размера шрифта или для создания соответствующего отступа. Ширина выражается числом символов. Этот атрибут часто не поддерживается.
Элемент PRE сообщает визуальным агентам пользователей, что содержащийся в нем текст "отформатирован". При обработке форматированного текста визуальные агенты пользователей:
· Могут оставлять непечатные символы так, как они указаны.
· Могут использовать для отображения текста шрифт с символами одинаковой ширины.
· Могут отключать автоматическое продолжение слов.
· Не должны отключать обработку двунаправленности.
Невизуальные агенты пользователей не обязаны учитывать дополнительные непечатные символы в содержимом элемента 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;
The blue deep thou wingest,
And singing still dost soar, and soaring ever singest.
Введение в списки
Язык HTML предлагает авторам несколько механизмов создания списков информации. В каждом списке должен быть один или несколько элементов списков. Списки могут содержать:
· Неупорядоченную информацию.
· Упорядоченную информацию.
· Определения.
Предыдущий список, например, не упорядочен, он создан с помощью элемента UL:
<UL>
<LI>Неупорядоченную информацию.
<LI>Упорядоченную информацию.
<LI>Определения.
</UL>
Упорядоченный список, создаваемый с помощью элемента OL, может содержать информацию, в которой важен порядок, например, рецепт:
1. Тщательно смешать сухие ингредиенты.
2. Влить жидкость.
3. Смешивать 10 минут.
4. Выпекать в течение часа при температуре 300 градусов.
Списки определений, создаваемые с помощью элемента DL, могут содержать ряд пар термин/определение (хотя списки определений могут иметь и иные применения). Например, список определений можно использовать в рекламе изделия:
Низкая цена
Новая модель этого изделия существенно дешевле предыдущей!
Проще работа
Мы изменили изделие, так что с ним теперь легко работать!
Безопасно для детей
Вы можете оставить своих детей в комнате, и изделие не причинит им вреда (не гарантируется).
На языке HTML он определяется следующим образом:
<DL>
<DT><STRONG>Низкая цена</STRONG>
<DD> Новая модель этого изделия существенно дешевле предыдущей!
<DT><STRONG>Проще работа</STRONG>
<DD>Мы изменили изделие, так что с ним теперь легко работать!
<DT><STRONG> Безопасно для детей </STRONG>
<DD> Вы можете оставить своих детей в комнате, и изделие не причинит им вреда (не гарантируется).
</DL>
Списки могут быть вложенными: разные типы списков можно использовать вместе, как в следующем примере, где список определений содержит неупорядоченный список (ингредиенты) и упорядоченный список (процедуру):
Ингредиенты:
· 100 г муки
· 10 г сахара
· 1 стакан воды
· 2 яйца
· соль, перец
Процедура:
1. Тщательно смешайте сухие ингредиенты.
2. Влейте жидкие ингредиенты.
3. Смешивайте 10 минут.
4. Выпекайте в течение часа при температуре 300 градусов.
Примечания:
Можно добавить изюм.
Точное представление трех типов списков зависит от агента пользователя. Не стоит использовать списки для создания отступов в тексте. Это делается с помощью таблиц стилей.
Неупорядоченные списки (UL), упорядоченные списки (OL) и элементы списков (LI), списки определений (DL, DT и DD): Начальный тег: обязателен, Конечный тег: не обязателен
Определения атрибутов type = информация о стиле [CI]
Этот атрибут устанавливает стиль элемента списка. Доступные в настоящее время значения предназначены для визуальных агентов пользователей. Возможные значения описаны ниже (включая информацию о регистре).
start = число [CN]
Только для OL. Этот атрибут задает начальный номер первого элемента в упорядоченном списке. По умолчанию начальный номер - "1". Помните, что, хотя значением этого атрибута является целое число, соответствующая метка может быть нецифровая. Если в качестве стиля выбраны латинские буквы верхнего регистра (A, B, C, ...), start=3 означает "C". Если в качестве стиля выбраны римские цифры нижнего регистра, start=3 означает "iii" и т.д.
value = число [CN]
Только для LI. Этот атрибут устанавливает номер текущего элемента списка. Помните, что, хотя значением атрибута является целое число, соответствующая метка может быть нечисловая (см. атрибут start).
compact [CI]
Если этот логический атрибут установлен, он сообщает визуальным агентам пользователей о том, что генерировать список нужно более компактно. Интерпретация этого атрибута зависит от агента пользователя.
Упорядоченные и неупорядоченные списки генерируются одинаково за исключением того, что визуальные агенты пользователей нумеруют упорядоченные списки. Агенты пользователей могут представлять эти номера несколькими способами. Элементы неупорядоченного списка не нумеруются. Оба эти типа списков состоят из последовательностей элементов списков, определяемых элементом LI (конечный тег которого можно опустить). В этом примере показана общая структура списка.
<UL>
<LI> ... первый элемент списка...
<LI> ... второй элемент списка...
</UL>
Списки могут быть вложенными:
<UL>
<LI> ... Уровень один, номер один...
<OL>
<LI> ... Уровень два, номер один...
<LI> ... Уровень два, номер два...
<OL start="10">
<LI> ... Уровень три, номер один...
</OL>
<LI> ... Уровень два, номер три...
</OL>
<LI> ... Уровень один, номер два...
</UL>
Информация о порядке номеров. В упорядоченных списках невозможно продолжать нумерацию автоматически из предыдущего списка или убрать нумерацию для некоторых элементов. Однако авторы могут пропустить несколько элементов списка, установив для них атрибут value. Нумерация для последующих элементов списка продолжается с нового значения. Например:
<ol>
<li value="30"> элемент списка номер 30.
<li value="40"> элемент списка номер 40.
<li> элемент списка номер 41.
</ol>
Списки определений незначительно отличаются от других типов списков - тем, что элементы состоят из двух частей: термина и определения. Термин обозначается с помощью элемента DT и может иметь только встроенное содержимое. Описание указывается с помощью элемента DD, имеющим содержимое уровня блока.
Пример:
<DL>
<DT>Dweeb
<DD>young excitable person who may mature
into a <EM>Nerd</EM> or <EM>Geek</EM>
<DT>Cracker
<DD>hacker on the Internet
<DT>Nerd
<DD>male so into the Net that he forgets
his wife's birthday
</DL>
Вот пример с несколькими терминами и определениями:
<DL>
<DT>Center
<DT>Centre
<DD> A point equidistant from all points
on the surface of a sphere.
<DD> In some field sports, the player who
holds the middle position on the field, court, or forward line.
</DL>
Другим применением элемента DL, например, может быть разметка диалогов, где каждый элемент DT означает говорящего, а в каждом элементе DD содержатся его слова.
Визуальное отображение списков
Примечание.Ниже приводится информативное описание поведения некоторых имеющихся на настоящий момент визуальных агентов пользователей при форматировании списков. Таблицы стилей предоставляют большие возможности управления форматированием списков (например, в отношении нумерации, соглашений, используемых в разных языках, отступов и т.д.).
Визуальные агенты пользователей обычно сдвигают вложенные списки соответственно уровню вложенности.
Для элементов OL и UL атрибут type определяет параметры генерации для визуальных агентов пользователей.
Для элемента UL возможными значениями атрибута type являются disc, square и circle. Значение, используемое по умолчанию, зависит от уровня вложенности текущего списка. Эти значения не учитывают регистр.
Представление каждого значения зависит от агента пользователя. Агенты пользователей должны пытаться представлять "disc" в виде небольшого заполненного кружка, "circle" - в виде окружности, а "square" в виде небольшого квадрата.
Для элемента OL возможные значения атрибута type приведены в следующей таблице (они учитывают регистр):
Type
|
Стиль нумерации
|
|
1
|
арабские цифры
|
1, 2, 3, ...
|
|
a
|
буквы нижнего регистра
|
a, b, c, ...
|
|
A
|
буквы верхнего регистра
|
A, B, C, ...
|
|
i
|
римские цифры в нижнем регистре
|
i, ii, iii, ...
|
|
I
|
римские цифры в верхнем регистре
|
I, II, III, ...
|
|
|
Генерация списка определений также зависит от агента пользователя. Например, список:
<DL>
<DT>Dweeb
<DD>young excitable person who may mature
into a <EM>Nerd</EM> or <EM>Geek</EM>
<DT>Cracker
<DD>hacker on the Internet
<DT>Nerd
<DD>male so into the Net that he forgets his wife's birthday
</DL>
может генерироваться следующим образом:
Dweeb
young excitable person who may mature into a Nerd or Geek
Cracker
hacker on the Internet
Nerd
male so into the Net that he forgets his wife's birthday
Введение в ссылки и якоря
HTML предлагает множество условных оборотов для текстовых и структурированных документов, но что отличает его от большинства других языков разметки - его возможности разметки гипертекста и интерактивных документов. В этом разделе вводится понятие ссылки (или гиперссылки или ссылки Web), основной гипертекстовой конструкции. Ссылки связывают один ресурс Web с другим. Несмотря на простоту, ссылки стали основным залогом успеха Web.
Ссылка имеет два конца - называемых anchors -- и направление. Ссылка начинается в "исходном" anchor (источнике) и указывает на "целевой" anchor, который может быть любым ресурсом Web (например, изображением, видеоклипом, звуковым файлом, программой, документом HTML, элементом в документе HTML и т.д.).
Переход к ресурсу, на который указывает ссылка
По умолчанию со ссылкой связана загрузка другого ресурса 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, Должен содержать это имя в качестве идентификатора фрагмента. Целевые anchors в документах HTML могут указываться с помощью элемента A (именующего его с помощью атрибута name). Таким образом, например, автор может создавать оглавление, элементы Которого являются ссылками на элементы заголовков 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...
Другие отношения ссылок
Наиболее часто сейчас ссылки используются для загрузки других ресурсов Web, как показано в предыдущих примерах. Однако авторы могут помещать в свои документы ссылки, выражающие иные отношения между ресурсами, чем просто "использование ссылки для Просмотра связанного ресурса". Для ссылок, выражающих другие типы отношений, В исходном якоре указываются один или более типов ссылок.
Роли ссылок, определяемых элементом 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 в виде одного документа, может использовать эту информацию для формирования последовательного линейного документа. Дальнейшая информация об использовании ссылок для поисковых систем приведена ниже.
Задание якорей и ссылок
Хотя некоторые элементы и атрибуты языка HTML создают ссылки на другие ресурсы (например, элемент IMG, элемент FORM и т.д.), в этой главе обсуждаются ссылки и якоря, создаваемые элементами LINK и A. Элемент LINK может присутствовать только в заголовке документа. Элемент A может присутствовать только в теле документа.
Если для элемента A установлен атрибут href, этот элемент определяет исходный якорь для ссылки, которая может активизироваться пользователем для загрузки ресурса Web. Исходный якорь - это местоположение экземпляра элемента A и целевой якорь ресурса Web.
Загруженный ресурс может обрабатываться агентом пользователя различными способами: открытием нового документа HTML в том же окне агента, открытием нового документа HTML в другом окне, запуском новой программы для обработки ресурса и т.д. Поскольку элемент A имеет содержание (текст, изображения и т.д.), агенты пользователей могут генерировать это содержимое так, чтобы показать наличие ссылки (например, подчеркивая содержимое).
Если установлены атрибуты name или id элемента A, этот элемент определяет якорь, который может служить целью других ссылок.
Авторы могут устанавливать атрибуты name и href одновременно в одном экземпляре элемента A.
Элемент LINK определяет отношение между текущим документом и другим ресурсом. Хотя элемент LINK не имеет содержимого, определяемые им отношения могут отображаться некоторыми агентами пользователей.
Заголовки ссылок
Атрибут title может устанавливаться как для элемента A, так и для элемента LINK; в нем указывается информация о природе ссылки. Эта информация может проговариваться агентом пользователя, отображаться в виде подсказки, изменять вид курсора и т.д.
Таким образом можно augment предыдущий пример, указав для каждой ссылки заголовок:
<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>
Элемент A
Начальный тэг: обязателен, Конечный тэг: обязателен
Определения атрибутов 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]
Этот атрибут задает кодировку символов назначаемого ссылкой ресурса. Подробнее см. в разделе о кодировках символов.
Каждый элемент A определяет якорь
1. Содержимое элемента A определяет положение якоря.
2. Атрибут name задает имя якоря, так что он может служить пунктом назначения любого числа ссылок (см. также якоря с атрибутом id).
3. Атрибут href назначает якорь пунктом назначения ровно одной ссылки.
В следующем примере элемент A определяет ссылку. Исходным якорем является текст " Web-сайте W3C", а пунктом назначения - "http://www.w3.org/":
Подробнее о W3C Вы можете узнать на <A href="http://www.w3.org/"> Web-сайте W3C</A>.
Эта ссылка указывает на страницу World Wide Web Consortium. Если пользователь активизирует эту ссылку в своем агенте, агент загрузит ресурс, в данном случае - документ HTML.
Обычно агенты пользователей представляют ссылки так, чтобы они были очевидны для пользователей (подчеркивание, обратное видео и т.д.). Конкретное представление зависит от агента пользователя. Представление может различаться в зависимости от того, посещал ли уже пользователь указанную ссылку. Возможное визуальное представлением предыдущей ссылки: Подробнее о W3C Вы можете узнать на Web-сайте W3C.
Чтобы дать агентам пользователей явное указание кодировки символов целевой страницы, установите атрибут 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", будет указывать на этот якорь следующим образом:
...текст до ссылки...
Подробнее см. <A href="./one.html#anchor-one"> первый якорь</A>.
...текст после ссылки...
Элемент A в следующем примере задает ссылку (с помощью атрибута href) и одновременно создает именованный якорь (с помощью атрибута name):
Я только что вернулся из отпуска! Вот
<A name="anchor-two"
href="http://www.somecompany.com/People/Ian/vacation/family.png">
фотография моей семьи на озере.</A>.
В этом примере содержится ссылка на другой тип ресурса Web (изображение в формате PNG). Активизация ссылки должна привести к загрузке изображения из Web (и, возможно, его отображению, если система сконфигурирована соответствующим образом).
Примечание. Агенты пользователей должны уметь находить якоря, созданные пустыми элементами A, но некоторые агенты не могут этого делать. Например, некоторые агенты пользователей могут не найти "empty-anchor" в следующем фрагменте HTML:
<A name="empty-anchor"></A>
<EM>...некоторые текст в формате HTML...</EM>
<A href="#empty-anchor">Ссылка на пустой якорь</A>
Синтаксис имен якорей
Именем якоря является значение атрибута name или атрибута id, используемого в контексте якоря. К именам якорей применяются следующие правила:
· Уникальность: Имена якорей должны быть уникальны в пределах документа. Имена якорей в одном документе не могут отличаться только регистром.
· Соответствие строк: Сравнение между идентификаторами фрагментов и именами якорей должно проводиться на основе полного (с учетом регистра) совпадения.
Таким образом, следующий пример является корректным в смысле соответствия строк и рассматриваться агентами как совпадение:
<P><A href="#xxx">...</A>
...некоторый текст...
<P><A name="xxx">...</A>
Вложенные ссылки недопустимы
Ссылки и якоря, определяемые элементом A, не могут быть вложенными; элемент A не должен содержать других элементов A.
Индивидуальные задания
1. Используя команды языка HTML, создать пять HTML - страниц, посвященных определенной тематике.
2. Cвязать созданные HTML - страницы между собой ссылками.
3. HTML - страницы обязательно должны содержать все команды по работе с текстом (абзац, шрифт, выделение и т.д.), а также три вида списков (маркированный, нумерованный и определений).
4. Оформить лабораторную работу на листах формата А4.
Варианты заданий приведены в таблице № 1. Вариант задания соответствует порядковому номеру студента в журнале преподавателя.
Таблица № 1
Индивидуальные задания
|
|
1
|
Интернет - сайт ДГТУ (образовательного учреждения)
|
|
2
|
Интернет - сайт кафедры ИСЭ
|
|
3
|
Интернет - сайт факультета информационных систем
|
|
4
|
Интернет - сайт адвокатской конторы
|
|
5
|
Интернет-магазин по продаже косметики
|
|
6
|
Интернет-магазин по продаже автомобилей
|
|
7
|
Интернет-магазин по продаже сотовых телефонов
|
|
8
|
Интернет - сайт санаторно-курортного учреждения
|
|
9
|
Интернет - сайт гостиницы
|
|
10
|
Интернет-магазин по продаже книг
|
|
11
|
Интернет-магазин по продаже одежды
|
|
12
|
Интернет - сайт юридической фирмы
|
|
13
|
Интернет - сайт Правительства РД
|
|
14
|
Интернет-магазин по продаже мебели
|
|
15
|
Интернет-магазин продажи продуктов питания
|
|
16
|
Интернет-магазин продажи компьютеров и оргтехники
|
|
17
|
Интернет - сайт турагента
|
|
18
|
Интернет - сайт туроператора
|
|
19
|
Интернет - сайт средней образовательной школы
|
|
20
|
Интернет - сайт салона красоты
|
|
21
|
Интернет - сайт медицинского учреждения
|
|
22
|
Интернет - сайт аэрофлота
|
|
23
|
Интернет - сайт для курсов английского языка
|
|
24
|
Интернет - сайт для курсов обучения бухгалтерскому учету
|
|
25
|
Интернет - сайт о достопримечательностях города Махачкалы
|
|
26
|
Интернет - сайт краеведческого музея
|
|
27
|
Интернет - сайт студенческой группы
|
|
28
|
Интернет - сайт на свободную тему (города РФ)
|
|
29
|
Интернет - сайт строительной фирмы
|
|
30
|
Интерне т- сайт на свободную тему (для организации)
|
|
|
Структура отчета по лабораторной работе
1. Титульный лист (см. Приложение 4);
2. Название лабораторной работы;
3. Постановка задачи;
4. Краткие теоретические сведения, необходимые для выполнения лабораторной работы;
5. Индивидуальное задание (Интернет - страница);
6. HTML - код созданной Интернет-страницы;
7. Список использованной литературы.
Оформление отчета по лабораторной работе
Текст отчета пишется с одной стороны стандартного машинописного листа формата А4. Межстрочное расстояние 1 интервал, размер шрифта - 12, шрифт - Times new Roman. Слева и справа на листах оставляются поля: слева 3 см., справа 1-1.5 см., сверху и снизу 2.0-2.5 см. Абзацный отступ - 1.25 см.
Список литературы должен оформляться согласно существующим правилам.
Литература
1. Матросов А. В., Сергеев А. О., Чаунин М. П. HTML 4.0 - СПб.: БХВ - Петербург, 2007. - 672с.
2. Финков М.В. Интернет. Шаг второй: от пользователя к профессионалу - Спб.: Наука и Техника, 2002. - 768с.
3. Левин А.Ш. Самоучитель работы на компьютере. 8-е изд. - СПб.: Питер, 2005. - 655с.
4. Леонтьев В.П. Новейшая энциклопедия персонального компьютера 2004 - М.: Олма-Пресс, 2004. - с.
5. www.w3c.com
6. Никамин В.А. Цифровая звукозапись: технологии и стандарты - СПб.: Наука и Техника, 2002.
7. Спецификация HTML 4.0
Приложение № 1
Федеральное агентство по образованию
ГОУ ВПО "ДГТУ"
Кафедра информационных систем
В экономике
Отчет
по лабораторной работе №______
по дисциплине "Государственные и региональные
информационные системы"
Выполнил (а) :
студент(ка) _______________
фамилия и инициалы студента
_________________________
номер группы, курс
________________________
факультет
Руководитель:
________________________
ученая степень
________________________
фамилия и инициалы
Махачкала - 2008
Страницы: 1, 2
|