HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов

Дронов Владимир

Листинг 3.2

Теги HTML служат для создания элементов Web-страниц.

<STRONG>Соблюдайте порядок вложенности тегов!</STRONG>

Тег <CODE>P</CODE> служит для создания <DFN>абзаца</DFN> HTML.

Язык <ABBR>HTML</ABBR> служит для создания <INS>содержимого</INS>

Web-страниц.

Наберите в Web-обозревателе интернет-адрес

<KBD>http://www.w3.org</KBD>.

Из всех рассмотренных нами тегов чаще всего встречаются <STRONG> и <EM>. Остальные теги так и не снискали большой популярности среди Web-дизайнеров.

Для практики давайте откроем Web-страницу index.htm и выделим

некоторые фрагменты ее текста с помощью тегов, перечисленных в табл. 3.1 (листинг 3.3).

Листинг 3.3

Приветствуем на нашем Web-сайте всех, кто занимается Web-дизайном! Здесь вы сможете найти информацию обо всех интернет-технологиях, применяемых при создании Web-страниц. А именно, о языках <DFN>HTML</DFN> и <DFN>CSS</DFN>.

.

<CODE>!DOCTYPE</CODE>, <CODE>BODY</CODE>, <CODE>EM</CODE>,

<CODE>HEAD</CODE>, <CODE>HTML</CODE>, <CODE>META</CODE>, <CODE>P</CODE>,

<CODE>STRONG</CODE>, <CODE>TITLE</CODE>

Все эти фрагменты так и просятся: оформите нас надлежащим образом! Мы ведь особенные!

Разрыв строк

Мы совсем забыли поместить на Web-страницы сведения об авторских правах их разработчика, т. е. о нас. Давайте сделаем это. Поместим их в самый низ Web- страниц посредством изученного в главе 2 тега <ADDRESS>:

<ADDRESS>Все права защищены. Читатели, 2010 год.</ADDRESS>

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

Можно, конечно, использовать два тега <ADDRESS>: один — для предупреждения, а другой — для имени разработчика. Но тогда строки будут разделены довольно большим расстоянием. (Вспомним — тег <ADDRESS> ведет себя как абзац, т. е. отделяется от соседних абзацев отступом.) А это будет выглядеть некрасиво.

Выход — добавить разрыв строк HTML. Он выполняет безусловный перевод строки, в которой он присутствует, в том месте, где проставлен. Разрыв строки определяется одиночным тегом <BR>:

Этот абзац будет разорван на две строки в этом<BR>месте.

Разрыв строки также относится к встроенным элементам Web-страницы.

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

<ADDRESS>Все права защищены.<BR>Читатели, 2010 год.</ADDRESS>

Откроем исправленную Web-страницу в Web-обозревателе и посмотрим на результат (рис. 3.1). Видно, что текст сведений об авторских правах разделен на строки в том самом месте, куда мы вставили тег <BR>.

Рис. 3.1. Абзац с разрывом строк

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

Вставка недопустимых символов. Литералы

Давайте откроем Web-страницу t_title.htm и посмотрим на код приведенного там примера использования тега <TITLE>. Чего там не хватает? Правильно — символов < и >, с помощью которых и создается тег HTML. Эти символы являются недопустимыми и не должны встречаться в обычном тексте.

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

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

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

Литералы HTML начинаются с символа & и заканчиваются символом; (точка с запятой). Между ними помещается определенная последовательность букв. Так, символ < определяется литералом &lt;, а символ > — литералом &gt;.

Сразу же исправим код примера (листинг 3.4).

Листинг 3.4

<!DOCTYPE html>

<HTML>

.

<BODY>

.

<H6>Пример:</H6>

<PRE>&lt;HEAD&gt;

&lt;TITLE&gt;Я — заголовок Web-страницы&lt;/TITLE&gt;

&lt;HEAD&gt;</PRE>

.

</BODY>

</HTML>

Откроем исправленную Web-страницу в Web-обозревателе. Вот теперь теги в примере отображаются со всеми положенными символами < и >!

Литералов в HTML довольно много. Самые часто применяемые из них перечислены в табл. 3.2.

Недопустимый символ	Литерал HTML
— (длинное тире)	—
— (короткое тире)	–
"	"
&	&
<	&lt;
>	&gt;
©	&copy;
®	&reg;
Левая двойная кавычка	&ldquo;
Левая угловая кавычка	&laquo;
Левый апостроф	&lsquo;
Многоточие	&hellip;
Неразрывный пробел	&nbsp;
Правая двойная кавычка	&rdquo;
Правая угловая кавычка	&raquo;
Правый апостроф	&rsquo;
Символ евро	&euro;

Среди перечисленных в табл. 3.2 литералов и обозначаемых ими недопустимых символов особенно выделяется один. Это неразрывный пробел, обозначаемый литералом &nbsp;. По этому пробелу Web-обозреватель никогда не будет выполнять перенос строк.

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