2. Работа с текстом
В этом разделе мы поговорим о том, как можно улучшить наш простой HTML-документ.
Форматирование текста
<br> - этот тег используется, если необходимо перейти на новую строку, не прерывая абзаца. Удобен при публикации стихов (см. Пример 3).
<
html>
<head>
<title>Пример 3</title>
</head>
<body>
<h1> "Вредные советы"</h1>
<h2> Григорий Остер </h2>
<p> Главным делом жизни вашей<br>
Может стать любой пустяк.<br>
Надо только твердо верить,<br>
Что важнее дела нет.</p >
<p> И тогда не помешает<br>
Вам ни холод, ни жара,<br>
Задыхаясь от восторга,<br>
Заниматься чепухой.</p>
</body> </html>
<hr> - тег, который описывает вот такую горизонтальную линию:
Тег <hr> может дополнительно включать разные атрибуты, например:
<hr align=right> (center или left)
<hr width=50%> - ширина линии в процентах/пикселях
<hr size=8> - толщина линии
<hr Noshade> - отмена объемности
Вышеприведенные атрибуты могут употребляться одновременно.
В
примере приведена небольшая коллекция
горизонтальных линий.
<html>
<head>
<title>Пример 4</title>
</head>
<body>
<h1>Коллекция горизонтальных линий</h1>
<hr size=2 width=100%><br>
<hr size=4 width=50%><br>
<hr size=8 width=25%><br>
<hr size=16 width=12%><br>
</body>
</html>
&-последовательности
Поскольку символы < и > воспринимаются браузерами как начало и конец тегов, возникает вопрос: а как показать эти символы на экране? В HTML это делается с помощью &-последовательностей (их еще называют символьными объектами или эскейп-последовательностями). Браузер показывает на экране символ <, когда встречает в тексте последовательность < (по первым буквам английских слов less than — меньше, чем). Знак > кодируется последовательностью > (по первым буквам английских слов greater than — больше, чем).
Символ & кодируется последовательностью &
Двойные кавычки (" ") кодируются последовательностью "
Помните: точка с запятой — обязательный элемент &-последовательности. Кроме того, все буквы, составляющие последовательность, должны быть в нижнем регистре (т.е., маленькие). Не допускается использование меток типа " или &.
Комментарии
Файл HTML может содержать комментарии, дающие пояснение человеку, читающему HTML код. Комментарии начинаются с четырехсимвольной последовательности <!-- и завершаются трехсимвольной последовательностью -->. Комментарии игнорируются браузером и не влияют на представление документа на экране.
Например: <--! этот текст является комментарием-->
Форматирование шрифта
HTML допускает два подхода к шрифтовому выделению фрагментов текста. С одной стороны, можно прямо указать, что шрифт на некотором участке текста должен быть жирным или наклонным, то есть изменить физический стиль текста. С другой стороны, можно пометить некоторый фрагмент текста как имеющий некоторый отличный от нормального логический стиль, оставив интерпретацию этого стиля браузеру. Поясним это на примерах.
Физические стили
Под физическим стилем принято понимать прямое указание браузеру на модификацию текущего шрифта. К таким указывающим элементам, относятся следующие теги:
<b>...</b > полужирный текст;
<i > ...</i > наклонный текст (курсив);
<tt> ...</tt> телетайпный текст (пишущая машинка);
<u > ...</u> подчеркивание;
Логические стили
При использовании логических стилей автор документа не может знать заранее, что увидит на экране читатель. Разные браузеры толкуют одни и те же теги логических стилей по-разному. Некоторые браузеры игнорируют отдельные теги вообще и показывают нормальный текст вместо выделенного логическим стилем. Вот самые распространенные логические стили.
<em>...</em> - курсивное начертание (от английского emphasis — акцент);
<strong> ...</strong> - полужирное начертание (от английского strong emphasis — сильный акцент)
<cite>...</cite> - цитированный текст
<sup>...</sup> - верхний индекс
<sub>...</sub> - нижний индекс
<big>...</big> - увеличить размер шрифта
<small>...</small> - уменьшить размер шрифта
Подытожим наши знания о логических и физических стилях с помощью примера.
<
html>
<head>
<title>Пример 5</title>
</head>
<body>
<h1>Шрифтовое выделение фрагментов текста</h1>
<p>Теперь мы знаем, что фрагменты текста можно выделять
<b>жирным</b> или <i>наклонным</i> шрифтом. Кроме того, можно
включать в текст фрагменты с фиксированной шириной символа
<tt>(имитация пишущей машинки)</tt></p>
<p>Кроме того, существует ряд логических стилей:</p>
<p><em> em - курсивное начертание </em><br>
<p><strong> strong - полужирное начертание</strong><br>
<p><cite> cite - цитированный текст </cite><br>
<p><sup> sup - верхний индекс</sup> <br>
<p><sub> sub - нижний индекс</sub> <br>
<p><big> big - увеличить размер шрифта</big><br>
<p><small> small - уменьшить размер шрифта</small><br>
</body>
</html>
Кроме вышеперечисленных, форматирование текста Web-страницы выполняет еще целая группа тегов. Приведем некоторые из них:
<pre>...</pre> предварительно форматированный текст выводится браузером на экран как есть — со всеми пробелами, символами табуляции и конца строки. Это очень удобно при создании простых таблиц.
<blockquote>...</blockquote> текст, заключенный между данными тегами, выводится браузером на экран с увеличенным левым полем.
<font>...</font> тег для определения размера и цвета шрифта. Все эти характеристики тега <FONT> определяются с помощью специальных атрибутов:
size – абсолютный размер шрифта (значение от 1 до 7). Размер может задаваться и в относительном виде по отношению к базовому размеру, например, size=+число или , size=-число;
color- атрибут цвета шрифта, задается в виде color=цвет.
<bdo>...</bdo> изменение направления текста. Используется с атрибутом dir. Шаблон записи выглядит так:<bdo dir="rtl"> Текст, направление которого меняется </bdo>.
<marguee>...</marguee> текст представляется в виде бегущей строки. Для определения движения текста слева направо или справа налево используется атрибут direction.
Например: <marguee direction=left, right>текст</marquee>
Ниже приводится пример, в котором используются основные теги форматирования текста.
<
html>
<head>
<title>Форматирование текста. Пример 6</title>
</head>
<body>
<h3>Задание абсолютных размеров шрифтов</h3>
<hr>
<p><font size=7> Шрифт размера 7 </font>
<p><font size=6> Шрифт размера 6 </font>
<p><font size=5> Шрифт размера 5 </font>
<p><font size=4> Шрифт размера 4 </font>
<p><font size=3> Шрифт размера 3 </font>
<p><font size=2> Шрифт размера 2 </font>
<p><font size=1 >Шрифт размера 1 </font>
<hr size=4>
<h3>Задание относительных размеров шрифтов</h3>
<hr>
<p><font size=+4> Шрифт размера +4 </font>
<p><font size=+3> Шрифт размера +3 </font>
<p><font size=+2> Шрифт размера +2 </font>
<p><font size=+1> Шрифт размера +1 </font>
<p><font size=+0> Шрифт размера +0 </font>
<p><font size=-1> Шрифт размера –1 </font>
<p><font size=-2> Шрифт размера –2 </font>
<hr size=4>
<pre> Использование элемента pre.
Он запрещает форматирование
текста браузером и выводит его так,
как определил пользователь. </pre>
<hr>
<p> Направление текста можно изменить
<p>
<bdo dir="rtl"> Направление текста можно изменить </bdo>
<hr width=50%>
</body>
</html>