Точные интервалы и макет

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

Тег

Тег
прерывает нормальный процесс заполнения строк и расстановки переносов текста абзацев в HTML или XHTML-документе. В HTML у него нет закрывающего тега, он просто отмечает в потоке текста точку1, с которой должна начинаться новая строка. Большинство броузеров просто перестают добавлять слова и изображения в текущую строку, спускаются на следующую, отступают до левого края и возобновляют вывод.

Такой эффект полезен при форматировании традиционного текста с фиксированными разрывами строк, например адреса, текста песни или стихотворения.


Посмотрите для примера, как разбивается на строки текст песни, отображаемой GUI-броузером:


Heartbreak Hotel



Ever since my baby left me

I've found a new place to dwell.

It's down at the end of lonely street

Called Heartbreak Hotel.



Отметьте еще и то, что тег
просто заставляет текст начинаться с новой строки, тогда как появление тега

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

, 4.1.2]

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

HTML и XHTML предоставляют возможность добиться этого при помощи атрибута clear тега
. Данный атрибут принимает одно из трех значений: left, right, all. Каждое из значений относится к соответствующему краю или к обеим сторонам окна (all). Там, где указанный в атрибуте край или оба края свободны от таблиц и рисунков, броузер возобновляет отображение текста.

Вот как выглядит эффект атрибута clear при отображении следующего HTML-документа:


This text should wrap around the image, flowing between the
image and the right margin of the document.


This text will flow as well, but will be below the image,
extending across the full width of the page.
There will be white space above this text and
to the right of the image.

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


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

). Следовательно, атрибут clear тега
имеет смысл только с выровненными влево или вправо изображениями или таблицами. [тег , 5.2.6] [атрибут align (нежелателен), 10.2.1.1]

Следующий фрагмент XHTML-кода показывает, как используются тег
и его атрибут clear в сочетании с атрибутами тега для помещения подписей прямо над рисунком, справа по центру от рисунка и под рисунком, который выровнен по левому краю окна броузера:

Paragraph tags separate leading and following text flow from the captions.


I'm the caption on top of the image.



This one's centered on the right.


This caption should be directly below the image.




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


[тег , 5.2.6]

Атрибуты class, id, style и title
Можно ассоциировать с тегом
дополнительные правила отображения его содержимого, используя таблицы стилей. Новые правила применяются к тегу
, например, при помощи атрибута style или атрибута class. [встроенные стили: атрибут style, 8.1.1] [стилевые классы, 8.3]

Вы можете также присвоить каждому тегу
свой уникальный id, как и менее строгое название (title), используя соответствующие атрибуты и их значения в виде заключенных в кавычки строк. [атрибут id,4.1.1.4] [атрибут title, 4.1.1.5]

Тег (расширение)
Иногда хочется, чтобы некая фраза была представлена в окне пользовательского броузера в точности одной строкой текста, даже если при этом она не поместится в окне целиком. Хороший пример – это компьютерные команды. Как правило, вы набираете команды, пусть и состоящие из многих слов, в одну строку. Поскольку невозможно знать,
сколько слов помещается в строку окна пользовательского броузера, не исключено, что последовательность, составляющая компьютерную команду, окажется разбита на две или большее число строк. Синтаксис команды и так сложен, нет необходимости запутывать читателя еще сильнее, сворачивая строку в несколько раз.

В стандартах HTML и XHTML существует способ предохранить текст от вторжения броузера.


Вы можете заключить текст в теги

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

Вот
в действии в примере со строкой компьютерной команды:

When prompted by the computer, enter

find . -name \*.html -exec rm \\;.



After a few moments, the load on your server will begin
to diminish and will eventually drop to zero.


Тег не отменяет и не останавливает нормальный процесс заполнения строк, осуществляемый броузером.


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

. Единственный эффект применения тега состоит в подавлении автоматического перехода на новую строку по достижении текущей строкой правого края окна.

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

Тег – это последнее слово в расширениях HTML, предлагаемых броузером Internet Explorer (и только им) для достижения настоящего изящества в макетировании текста. Используемый вместе с тегом
, тег отмечает те места в защищенном от разрывов тексте, в которых броузеру разрешается прервать строку. В отличие от тега
,появление которого всегда, даже внутри тега
, влечет за собой переход на новую строку, тег действует, находясь только в сегменте текста, уже заключенном в теге , и вызывает переход на новую строку лишь в том случае, когда текущая строка уже вышла за пределы окна броузера.Если показался вам слишком заумным, не спешите сердиться.

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


This is a very long sequence of text that is
forced to be on a single line, even if doing so causes

the browser to extend the document window beyond the
size of the viewing pane and the poor user must scroll right

to read the entire line.


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

В этом случае только второй сработает – весь текст, находящийся до него, продолжит строку и скроется за краем окна.

Хороший тон при разбиении на строки
В отличие от большинства своих собратьев, упоминаемые в этой книге популярные броузеры, и это делает им честь, не рассматривают теги в качестве хорошего повода перейти на новую строку. Задумайтесь над неприятными последствиями для вашего документа, если бы, отображая нижеследующий пример, броузер поместил бы запятую, смежную с «du», или точку, смежную с «df», на отдельной строке. Убедитесь, что вы набрали du, а не df.

Тег


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

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

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


The processing program is:


main(int argc, char **argv)
{
FILE *f;
int i;
if (argc != 2)
fprintf(stderr, "usage: %s %lt;file>\n",
argv[0]);
process(argv[1]);
exit(0);
}


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

Теги, вызывающие переход на новую строку (например, заголовки,

,

), не следует употреблять внутри
-блока. Хотя некоторые броузеры проинтерпретируют тег 

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

Поскольку внутри

-блока допустимо применение тегов, вам придется пользоваться кодировкой для некоторых символов: < для <,> для > и & для амперсанда (&).
В
-блок теги вставляются точно так же, как в любое другое место в HTML/XHTML-документе. Рассмотрите в качестве примера гиперссылку для функции process() в предыдущем примере. С помощью тега  она указывает на исходный файл process.c.

Атрибут width
У тега
 есть необязательный атрибут width, указывающий число символов, которые следует поместить в одной строке 
-блока. Броузер может использовать это значение, подбирая шрифт и его размер таким образом, чтобы строка указанной ширины целиком поместилась в окне. Это не значит, что броузер станет автоматически переносить текст, если его ширина превышает значение, равное значению параметра width. Напротив, строки, которые окажутся длиннее указанной ширины, просто выйдут за пределы окна.
Атрибут width – это только пожелание, сообщаемое броузеру пользователя. Броузер может суметь, а может и не суметь подобрать нужный шрифт.

Атрибуты dir и lang
Атрибут dir советует броузеру, в каком направлении следует выводить текст
-блока, а атрибут lang позволяет определить язык, который употребляется в теге. [атрибут dir, 3.6.1.1] [атрибут lang, 3.6.1.2]

Атрибуты class, id, style и title
Хотя содержимое
-блока выводится броузерами с применением определенного стиля, эти установки можно отменить и добавить специальные эффекты, такие как фоновая картинка, назначив для тега новый стиль. Этот новый стиль может быть применен к тегам 
 при помощи атрибута style или атрибута class. [встроенные стили: атрибут style, 8.1.1] [стилевые классы, 8.3]

Также можно присвоить каждому тегу
 свой уникальный id, как и менее строгое название (title), используя соответствующие атрибуты и их значения в виде заключенных в кавычки строк. [атрибут id, 4.1.1.4] [атрибут title, 4.1.1.5]

Атрибуты событий
Как и в случае большинства других заключенных в теги сегментов содержимого, инициированные пользователем события с мышью и клавиатурой могут происходить как внутри тега
, так и вне его. Множество таких событий распознаются современными броузерами, и с помощью соответствующих on-атрибутов и их значений можно реагиро-вать на эти события, отображая окно диалога с пользователем или активизируя какое-нибудь мультимедийное событие. [обработчики событий JavaScript, 12.3.3]

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

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



Copyright 2000 by QuatCo Enterprises.
All rights reserved.



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

Тег
годится и для создания заголовков, четко отделяющих разделы один от другого, хотя того же эффекта можно достигнуть при помощи явного присвоения значения атрибуту align=center в соответствующем теге заголовка. Нетрудно центрировать текст, используя align=center в тегах
или

. В целом, тег

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

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

Атрибуты dir и lang
Атрибут dir советует броузеру, в каком направлении следует выводить текст в сегменте
, а атрибут lang позволяет определить язык, который будет употребляться в этом теге. [атрибут dir, 3.6.1.1] [атрибут lang, 3.6.1.2]

Атрибуты class, id, style и title
Используйте атрибут style для встроенного в тег определения стиля содержимого тега
. Атрибут class позволяет применять к содержимому тега заранее определенный для данного класса стиль. [встроенные стили: атрибут style, 8.1.1] [стилевые классы, 8.3]
Также можно присвоить каждому тегу
свой уникальный id, как и менее строгое название (title), используя соответствующие атрибуты и их значения в виде заключенных в кавычки строк. [атрибут id,4.1.1.4] [атрибут title, 4.1.1.5]

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

Множество таких событий распознаются современными броузерами, и с помощью соответствующих on-атрибутов и их значений вы можете реагировать на эти события, отображая окно диалога с пользователем или активизируя какое-нибудь мультимедийное событие. [обработчики событий JavaScript, 12.3.3]

Тег (архаизм)
Тег – это устаревший тег, он явным образом исключен из стандарта HTML 4, а значит, вам не следует его употреблять. Мы включили его сюда из исторических соображений, поскольку он поддерживается некоторыми броузерами и действует почти так же, как тег
.

Единственное различие между
 и  состоит в том, что внутри тега  не допускается никакой разметки, следовательно, нет необходимости заменять символы "<", ">" и "&" их кодировкой, как это приходится делать в 
-блоке.

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

Тег (архаизм)</b><br /> Подобно тегу <listing>, тег <xmp> устарел, и его не следует употреблять, несмотря на то, что популярные броузеры его поддерживают. Мы включили его сюда в основном по историческим соображениям.<br /> <br /> Тег <xmp> форматирует текст так же, как тег <pre> с шириной, определенной в 80 символов. В отличие от тега <pre>, внутри <xmp> нет необходимости заменять символы "<", ">" и "&" их кодами. Имя <xmp> – это сокращение слова «example» (пример). Разработчики языка предполагали, что тег будет использоваться для изображения текста подобно тому, как он выглядел на дисплеях шириной в 80 символов. <br /> <br /> Посколькувосьмидесятисимвольные дисплеи ушли той же дорогой, что и зеленые экраны текстовых терминалов или телетайпы, а действие тега <xmp>, по существу, совпадает с действием тега <pre width=80>, не употребляйте его. Он может исчезнуть в последующих версиях HTML.<br /> <br /> <b>Тег <plaintext> (архаизм)</b><br /> Выбросьте тег <plaintext> из вашей коллекции HTML-приемов, он устарел так же, как <xmp> и <listing>. Включение его в эту книгу – дань истории. Прежде авторы использовали <plaintext>, приказывая броузеру обращаться со всем последующим текстом так, как он написан, причем за тегом <plaintext> разметка уже не допускалась. У <plaintext><br /> нет закрывающего тега (поскольку нет разметки вообще), но сам он пришел к своему завершению. Забудьте о нем. <br><br> <div class="rating" itemscope itemtype="http://schema.org/CollectionPage"> <input type="hidden" id="stars_width" value="0"> <div class="rat"> <span class="title"><b>Оцените статью:</b> </span> <span class="stars"> <span class="star_bg"></span> <span class="star_bg_act" style="width:0%;"></span> <span class="s1" data-id="915"></span> <span class="s2" data-id="915"></span> <span class="s3" data-id="915"></span> <span class="s4" data-id="915"></span> <span class="s5" data-id="915"></span> <span class="star_bg_block"></span> </span> <span class="vote">(<span id="vote">0</span> голосов)</span> <div class="rateNumbers"> <div itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating"> <div> <span itemprop="ratingValue">0</span> <span itemprop="bestRating">5</span> <span itemprop="ratingCount">0</span> </div> </div> </div> </div> <script> $(document).ready(function() { if ($.cookie("stars").indexOf("915") > 0) { $(".rating .rat .stars .star_bg_block").show(); } }); </script> <div align=right class="ya-share2" data-lang="en" data-services="vkontakte,facebook,gplus,twitter,odnoklassniki,moimir,lj"></div></div><br><div class=name>Статьи из раздела HTML на эту тему:</div><img src=/img/ar.gif align=absmiddle border=0 widht=11 height=7 vspace=5> <a href=/?cat=article&id=917>Адреса</a><br><img src=/img/ar.gif align=absmiddle border=0 widht=11 height=7 vspace=5> <a href=/?cat=article&id=916>Блоки цитат</a><br><img src=/img/ar.gif align=absmiddle border=0 widht=11 height=7 vspace=5> <a href=/?cat=article&id=919>Использование расширенной HTML-модели шрифтов (нежелательно)</a><br><img src=/img/ar.gif align=absmiddle border=0 widht=11 height=7 vspace=5> <a href=/?cat=article&id=918>Кодирование специальных символов</a><br><img src=/img/ar.gif align=absmiddle border=0 widht=11 height=7 vspace=5> <a href=/?cat=article&id=910>Разделы и абзацы</a><br> </div> <hr><div align=right class=back>Вернуться в раздел: <a href=/?cat=razdel&id=5>HTML</a> / <a href=/?cat=category&id=69>4. Текст</a></div></p> <p><br><noindex><script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <!-- portal --> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-8225920053667131" data-ad-slot="4865787728" data-ad-format="auto"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script></noindex><br></p> </td> </tr> </table> <div id="footer"> <div class="bg"> <div id="copyright"> <span>ПОРТАЛ</span> <p>2004 г. - 2016 г.</p> </div> <ul id="bottom-menu"> <li><a href="/">На главную</a>|</li> <li><a href="/?cat=news">Новости</a>|</li> <li><a href="http://medkarta.com/?cat=razdel&id=60" target="_blank">Как бросить курить?</a>|</li> <li><a href="/?cat=map">Карта сайта</a>|</li> <li><a href="/?cat=contacts">Контакты</a></li> </ul><br> <ul id="bottom-link"> <li>Создание и продвижение сайтов в г. Казань от ООО "Портал" тел.: +7 (843) 248-68-89</li> </ul> <noindex> <script type="text/javascript" src="//yastatic.net/share2/share.js" charset="utf-8"></script> <script src="//code.jquery.com/jquery-1.12.0.min.js"></script> <script type="text/javascript" src="/img/jquery.cookie.js"></script> <script type="text/javascript" src="/img/stars.js"></script> <!-- Yandex.Metrika counter --> <script type="text/javascript"> (function (d, w, c) { (w[c] = w[c] || []).push(function() { try { w.yaCounter42571059 = new Ya.Metrika({ id:42571059, clickmap:true, trackLinks:true, accurateTrackBounce:true, webvisor:true }); } catch(e) { } }); var n = d.getElementsByTagName("script")[0], s = d.createElement("script"), f = function () { n.parentNode.insertBefore(s, n); }; s.type = "text/javascript"; s.async = true; s.src = "https://mc.yandex.ru/metrika/watch.js"; if (w.opera == "[object Opera]") { d.addEventListener("DOMContentLoaded", f, false); } else { f(); } })(document, window, "yandex_metrika_callbacks"); </script> <noscript><div><img src="https://mc.yandex.ru/watch/42571059" style="position:absolute; left:-9999px;" alt="" /></div></noscript> <!-- /Yandex.Metrika counter --> </noindex> </div> </div> </div> </body> </html>