Горизонтальные линейки

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

Тег

Тег
предлагает броузеру вставить горизонтальную линейку, пересекающую окно броузера от края до края. В языке HTML у него нет за-крывающего тега. В XHTML-документе требуется либо косая, закрывающая тег перед знаком ">" после атрибутов (
), либо закрывающий тег сразу после открывающего (
).

Подобно тегу
,
заставляет выравнивание абзаца вернуться к принятому по умолчанию (по левому краю). Броузер размещает линейку непосредственно под текущей строкой, а поток текста возобновляется сразу под линейкой.

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

Над линейкой и под ней нет добавочных интервалов.


Если вы хотите отделить ее от окружающего текста, то должны поместить линейку в новый абзац, за которым последует другой абзац, содержащий текст.

Обратите внимание на дополнительные интервалы вокруг линейки в следующем примере:

This text is directly above the rule.


And this text is immediately below.


Whereas this text will have space before the rule.





And this text has space after the rule.

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

Атрибут size
Обычно броузеры изображают горизонтальные линейки в два или три пиксела толщиной, имитируя трехмерный эффект прорези или глубокой царапины на странице. Вы можете сделать линейку толще, используя атрибут size. Его значение определяет толщину в пикселах.


This is conventional document text,
followed by the standard 2-pixel tall rule line.



The next three rule lines are 12, 36, and 72 pixels tall, respectively.







Атрибут size признан нежелательным в HTML 4 и XHTML, поскольку его действие может быть достигнуто при подходящем использовании таблиц стилей.

Атрибут noshade
Этот атрибут для тех, кому не нравится трехмерное изображение и кто предпочитает плоскую, или двумерную, линейку.


Чтобы убрать эф-фект трехмерности, просто добавьте в тег
атрибут noshade. HTML не требует для него никакого значения. В XHTML используйте noshade= "noshade". Посмотрите, чем отличаются «нормальная» трехмерная и плоская noshade-линейка. (Как видно из исходного HTML-фрагмента, мы сильно увеличили толщину линеек, чтобы сделать различие более явным.)







Интересно, что в броузере Internet Explorer линейка noshade имела тупые концы, а не скругленные, как в других броузерах.

Как бы то ни было, атрибут noshade признан нежелательным в HTML 4 и XHTML, поскольку его действие может быть достигнуто при подходящем использовании таблиц стилей.5.1.1.3. Атрибут width По умолчанию линейка проводится во всю ширину окна броузера. Ее можно укорачивать и удлинять с помощью атрибута width, проводя линейку шириной в заданное число пикселов или распространяя ее на определенную долю ширины окружающего текста. Большинство броузеров автоматически выравнивают укороченные линейки по центру. Другое выравнивание обеспечивается атрибутом align.

Приведем несколько примеров горизонтальных линеек с установленной шириной.

The following rules are 40 and 320 pixels wide
no matter the actual width of the browser window:




Whereas these next two rules will always extend across
10 and 75 percent of the window, regardless of its width:



Заметьте, что относительное (указанное в процентах) значение атрибута width заключено в кавычки, тогда как абсолютное (целое) число пикселов – нет.


В действительности кавычки не обязательны в стандарте HTML (хотя и требуются в XHTML). Но поскольку значок процента обычно подразумевает, что за ним следует закодированный символ, пропуск кавычек при записи относительного размера ширины может запутать броузер и испортить вывод части вашего документа.

Вообще говоря, не очень разумно обозначать ширину линейки определенным числом пикселов. Окна броузеров различаются по ширине, и то, что было коротенькой чертой на одном из них, может оказаться неприятно большой на другом. Поэтому мы рекомендуем указывать ширину линейки в процентах от ширины окна. Тогда, если величина окна изменяется, линейка сохраняет свой относительный размер.Атрибут width признан нежелательным в HTML 4 и XHTML, поскольку его действие может быть достигнуто при подходящем использовании таблиц стилей.

Атрибут align
Атрибут align для горизонтальной линейки может принимать одно из трех значений: left, center, right. Линейки, ширина которых меньше ширины окна, будут прижаты к соответствующему краю. По умолчанию линейка центрируется. Меняющееся выравнивание годится для красивого оформления заголовков. Например, в приведенном ниже тексте линейка шириной в 35% окна перемещается в центр из положения «справа», а затем – налево:



Fruit Packing Advice


...


Shipping Kumquats


...


Juice Processing


...

Атрибут align признан нежелательным в HTML 4 и XHTML, поскольку результат его действия может быть достигнут при использовании таблиц стилей.

Атрибут color
Поддерживаемый только Internet Explorer и Netscape Navigator версий 7 и 8, но не другими популярными броузерами (например, Opera)атрибут color позволяет устанавливать цвет линейки. Значение данного атрибута – это или название, или шестнадцатеричный триплет, обозначающий определенный цвет. Полный список названий цветов и их числовых обозначений содержится в приложении G.

По умолчанию линейка отображается тем же цветом, что и фон документа, с более темной или светлой окантовкой. Определяя другой цвет линейки с помощью таблиц стилей или атрибута color, вы теряете эффект трехмерности.

Комбинирование атрибутов линейки
Можно комбинировать атрибуты линейки, при этом их порядок не имеет значения. Например, для создания больших прямоугольников скомбинируйте атрибуты size и width:




В действительности некоторые атрибуты необходимо комбинировать – align и width, например. В одиночку атрибут align не произведет никакого действия, поскольку по умолчанию линейка занимает всю ширину окна.

Атрибуты class, dir, event, id, lang, style и title
Многие теги содержимого документа обладают рядом почти универсальных атрибутов. Эти атрибуты дают стандартный способ пометить (id) или назвать (title) содержимое тега для дальнейших ссылок или автоматической обработки, изменить характеристики отображения содержимого тега (class, style), указать используемый язык (lang) и связанное с ним направление отображения текста (dir). Разумеется, неизвестно, как будут действовать на горизонтальную линейку атрибуты dir и lang. Тем не менее они являются стандартными атрибутами тега.

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

Использование линеек для разбиения документа
Горизонтальные линейки помогают читателю зрительно ориентироваться в документе. Чтобы эффективно использовать тег
для отделения друг от друга частей документа, прикиньте вначале, сколько в нем будет уровней заголовков и какова приблизительно длина его разделов. Затем решите, какие из заголовков следует отделять линейками. Горизонтальная линейка может также отмечать завершение вводной части документа, проводя границу, например, между оглавлением и основным текстом. Кроме того, используйте их для отделения основного текста от следующих за ним индексов, библиографических списков, списков иллюстраций.

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

Горизонтальные линейки в начале и конце документа
Принцип единого оформления семейства документов состоит в придании каждому из них общих стилистических и художественных особенностей. Это касается и входящих в каждый документ вводных и закрывающих частей. Обычно вводная часть (шапка) содержит средства навигации, которые помогают читателю легко перемещаться к внутренним разделам и другим объектам семейства, тогда как в завершающей части (подвале) располагается информация об авторах и о документе вместе с механизмом обратной связи, таким как ссылка на адрес электронной почты веб-мастера.

Чтобы гарантировать, что шапка и подвал документа не сольются с основным текстом, попробуйте вставить линейки сразу под шапкой и перед подвалом. Вот пример:


Kumquat Growers Handbook - Growing Season Guidelines


Growing Season Guidelines


Growing season for the noble fruit varies throughout
North America, as shown in the following map:





Provided as a public service by the
Kumquat Lovers of America


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

Оцените статью: (0 голосов)
0 5 0

Статьи из раздела HTML на эту тему:
Анимация текста
Другое мультимедийное содержимое
Звуковой фон
Изображения в документе
Цвета документа и фоновые изображения