- •1. Общие сведения
- •Структура html-документа и элементы разметки заголовка документа
- •Назначение заголовка
- •Отображение содержания элемента title
- •Основные контейнеры заголовка
- •Элемент разметки head
- •Элемент разметки title
- •Элемент разметки base
- •Элемент разметки isindex
- •Применение элемента isindex
- •Применение атрибута prompt
- •Элемент разметки meta
- •Элемент разметки link
- •Элемент разметки style
- •Элемент разметки script
- •Контейнеры тела документа Теги тела документа
- •Тело документа – контейнер body
- •Теги управления разметкой Заголовки
- •Атрибут аlign
- •Теги управления отображением символов
- •Теги, управляющие формой отображения
- •Верхние и нижние индексы
- •Атрибут sizе
- •Атрибут соlоr
- •Создание списков в html
- •Атрибуты маркеров в ненумерованном списке
- •Комментарии в языке html
- •Гипертекстовые ссылки
- •Графика Использование графики в html
- •Атрибуты и их аргументы
- •Атрибут src
- •Атрибут alt
- •Атрибут аlign
- •Атрибут usemap
- •Средства описания таблиц в html
- •Создание таблиц в html
- •Атрибут nowrap
- •Атрибут соlspan
- •Атрибут rowspan
- •Атрибут widтн
- •Применение пустых ячеек
- •Атрибут сеllраdding
- •Атрибуты аlign и valign
- •Атрибут border
- •Атрибут cellspacing
- •Атрибут bgcolor
- •Атрибут background
- •Использование таблиц в дизайне страницы
- •Создание разноцветных таблиц
- •Html-формы
- •Задание формы — элемент form
- •Атрибут cols
- •Как работают фреймы
- •Создание простой страницы с фреймами
- •Задание фреймовой структуры
- •Подготовка содержимого фрейма
- •Подготовка фрейма main
- •Списки Definition: элементы dl, dt и dd
- •Визуальное представление списков
- •Элементы dir и menu
- •Гиперссылки Гиперссылки и якоря. Введение
- •"Посещение" связанного ресурса
- •Другие соотношения гиперссылок
- •Спецификация якорей и гиперссылок
- •Заголовки гиперссылок
- •Интернационализация и гиперссылки
- •Синтаксис имён якорей
- •Вложение ссылок не допускается
- •Якоря с атрибутом id
- •Недоступные и неидентифицируемые ресурсы
- •Взаимосвязи документов: элемент link
- •Гиперссылки вперёд и назад
- •Гиперссылки и внешние таблицы стилей
- •Гиперссылки и машины поиска
- •Информация пути: элемент base
- •Добавление стиля в html
- •Установка языка по умолчанию для таблиц стилей
- •Инлайн-стиль (внедрённый)
- •Информация о стиле в заголовках: элемент style
- •Типы носителя
- •Внешние таблицы стилей
- •Основные и альтернативные таблицы стилей
- •Спецификация внешней таблицы стилей
- •Каскадные таблицы стилей
- •Media-зависимые каскады
- •Наследование и каскадирование
- •Скрытие данных стиля от пользовательских агентов (па)
- •Ссылки на таблицы стилей в заголовках http
- •Выравнивание, стили шрифта и горизонтальные линии Форматирование Цвет фона
- •Выравнивание
- •Плавающие объекты
- •"Всплывание" объекта
- •Обтекание текста вокруг объекта
- •Элементы стиля шрифта: tt, I, b, big, small, strike, s и u
- •Элементы модификатора шрифта: font и basefont
- •Сценарии (скрипты) Введение
- •Дизайн документов для па, поддерживающих скрипты
- •Элемент script
- •Установка языка скриптов
- •Язык сценариев по умолчанию
- •Локальное объявление языка скриптов
- •Ссылки на элементы html из скрипта
- •Динамическое изменение документов
- •Дизайн документов для па, не поддерживающих сценарии
- •Элемент noscript
- •Скрытие данных скрипта от па
- •Дополнительные возможности html Компоновка документа в html
- •Компоновка html - использование таблиц
- •Использование стилей в html
- •Как использовать стили
- •Внешняя таблица стилей
- •Внутренняя таблица стилей
- •Встроенные стили
- •Раздел заголовка html
- •Элемент head
- •Универсальные указатели ресурсов в html Ссылки в html
- •Универсальные указатели ресурсов
- •Схемы обращения к ресурсу url
- •Сценарии в html
- •Добавление сценария на страницу html
- •Как работать со старыми браузерами
- •Стандартные атрибуты html 4.0
- •Атрибуты событий клавиатуры
- •Атрибуты событий мыши
- •Вы изучили html, что дальше? Краткое заключение
- •Теперь вы знаете html, что дальше?
- •Каскадные таблицы стилей (css)
Гиперссылки и машины поиска
Авторы могут использовать элемент LINK для предоставления поисковым машинам различной информации, в том числе:
для ссылок на альтернативные версии документа на других языках;
для ссылок на альтернативные версии документа, разработанные для других носителей, Например, специальные версии для печати документов;
для ссылок на начальную страницу коллекции документов.
Ниже пример иллюстрирует, как информация о языке, типах носителя и типах ссылок может быть объединена для упрощения обработки документа поисковой машиной.
Здесь мы используем атрибут hreflang, чтобы сообщить поисковой машине, где найти датскую, португальскую и арабскую версии документа. Обратите внимание на использование атрибута 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="Учебник на арабском"
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ç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="Первая страница"
type="text/html"
href="http://someplace.com/manual/start.html">
</HEAD>
Дополнительная информация находится в лекциях в теме индексации сайта.
Информация пути: элемент base
<!ELEMENT BASE - O EMPTY -- базовый URI документа -->
<!ATTLIST BASE
href %URI; #НЕОБХОДИМ -- URI, действующий как базовый URI --
>
Начальный тег: необходим, Конечный тег: запрещён
Определение атрибута
href = uri [CT]
Этот атрибут определяет абсолютный URI, действующий как базовый URI для разрешения (расширения) относительных URI.
Атрибут, определённый в другом месте
target (целевой фрэйм)
В HTML гиперссылки и ссылки на внешние изображения, аплеты, программы обработки форм, таблицы стилей и т.д. всегда специфицируются в URI. Относительные URI разрешаются (расширяются) в соответствии с базовым URI, который может поступать из различных источников. Элемент BASE позволяет авторам явно указать базовый URI.
При наличии, элемент BASE должен появляться в разделе HEAD документа HTML перед любым элементом, ссылающимся на внешний ресурс. Специфицированная элементом BASE информация о пути действует только на URI в том документе, где элемент BASE появляется.
Например, при объявлении следующих BASE и A:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/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
Таблицы стилей
Введение
Таблицы стилей являются грандиозным прорывом в области Web-дизайна. В научных кругах, там, где был придуман Web, больше интересуются содержимым документов, чем их внешним видом. Поскольку всё больше людей открывают для себя Web, ограничения 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.01//RU"
"http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<LINK href="special.css" rel="stylesheet" type="text/css">
</HEAD>
<BODY>
<P class="special">Текст в этом параграфе должен быть зелёного цвета.
</BODY>
</HTML>
HTML 4 поддерживает следующие возможности таблиц стилей:
Гибкость размещения информации о стиле
Размещение таблиц стилей в отдельных файлах облегчает их повторное использование. Иногда необходимо включить инструкции представления в документ, к которому они применяются, путём группировки их в начале документа или установкой в атрибутах по всему телу документа. Чтобы облегчить работу со стилями на базе сайта, эта спецификация описывает, как использовать заголовки-"шапки"/headers HTTP для установки применения таблиц стилей в документах.
Независимость от конкретного языка таблицы стилей
Эта спецификация не привязывает HTML к какому-то определённому языку таблиц стилей. Это позволяет использовать разные языки, например, простой для большинства пользователей и более сложный - для пользователей с узко специализированными потребностями. Примеры, данные ниже, используют язык CSS (Cascading Style Sheets) [CSS1], но возможны и другие языки таблиц стилей.
Каскадирование
Это возможность, предоставляемая некоторыми языками таблиц стилей, такими как CSS, соединять информацию стилей из различных источников. Это могут быть, например, корпоративные руководства по стилям, стили для групп документов и стили, специфические для отдельного документа. Сохраняя эту информацию раздельно, таблицы стилей могут быть повторно использованы, облегчая творчество и более эффективное использование сетей. Каскад определяет упорядоченную последовательность таблиц стилей, где правила более поздних таблиц имеют преимущество перед правилами более ранних таблиц. Не все языки таблиц стилей поддерживают каскадирование.
Зависимость от типа носителя
HTML позволяет авторам определять media-независимые документы. Это даёт пользователям возможность использовать Web-страницы на разных устройствах и носителях информации, например, графические дисплеи компьютеров, использующих Windows, Macintosh OS и X11, телевизионные устройства, специально адаптированные телефоны и портативные устройства на базе PDA, речевые браузеры и тактильные брайль-устройства.
Таблицы стилей, наоборот, применяются к конкретным носителям или группам носителей. Таблица, предполагаемая для использования с экраном, может функционировать при печати на принтере, но мало подходит для речевых браузеров.
Эта спецификация позволяет Вам определить устройства из широкого набора, в которых данная таблица стилей может быть применена. Это позволяет пользовательским агентам (ПА) исключить употребление неподходящих таблиц стилей. Языки таблиц стилей могут включать возможности описания в той же самой таблице зависимости от типа носителя.
Альтернативные стили
У авторов может появиться желание предоставить пользователям различные способы просмотра документа. Например, создав таблицу стилей для компактного просмотра документов со шрифтом небольшого размера, или таблицу, определяющую более крупный шрифт для удобства чтения. Эта спецификация даёт авторам возможность определять основную таблицу стилей, а также альтернативы в зависимости от условий конечного пользователя и типа носителя. ПА должны давать пользователям возможность выбора из нескольких таблиц стилей или объединения этих таблиц.
Возражения в связи с ухудшением параметров работы
Некоторыми высказывается озабоченность в связи с ухудшением параметров работы, связанным с использованием таблиц стилей. Например, загрузка внешней таблицы стилей может задержать вывод документа. Такие ситуации возникают чаще, если "шапки" документов содержат большое количество информации о стиле.
В настоящее время предлагается для решения этой проблемы включать соответствующие инструкции непосредственно в каждый элемент HTML. Информация о представлении в этом случае всегда доступна для ПА при отображении конкретного элемента.
Во многих случаях, авторы предпочитают использовать обычные таблицы стилей для групп документов. При использовании внедрённых таблиц стилей, передача стилевых установок документам действительно приводит к значительному снижению параметров работы, поскольку, для большинства документов, таблицы стилей будут размещены в локальном кэше. Общедоступность хороших таблиц стилей способствует этому.