5. Форматирование текста

При разработке Web-страницы необходимо учитывать различные виды форматирование текста, для лучшего восприятия текста, оформления странички в целом. Практически любой HTML-документ начинается с заголовка или названия статьи. Естественно предположить, что заголовки форматируются специальными тегами языка HTML (причём не только заголовки).

Все теги, используемые для форматирования текста, исполняют свои функции на логическом и физическом уровне.

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

Для описания заголовков используются парные дескрипторы <hn> </hn>, n=1…6 – определяет уровень данного заголовка.

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

Для создания нового абзаца используют <p>, для перехода на новую строку без абзаца – <br>; – их закрывать не обязательно, если в дескрипторе <p> не используется элемент align, которым можно задавать выравнивание абзаца.

Значение параметра align:

Left – выравнивание текста по левому краю;

Center – выравнивание текста по центру;

Right – выравнивание текста по правому краю;

Justify – выравнивание текста по ширине. Начертание шрифта:

<b> </b> – полужирное начертание;

<i> </i> – курсивное начертание;

<u> </u>– подчёркнутый текст;

 – верхний индекс;

 – нижний индекс;

<strike> </strike> – перечёркнутый текст;

<big> </big> – увеличение размер отображаемого шрифта;

<blink> </blink> – эффект «мигающего» текста;

<small> </small> – шрифт меньшего размера;

<tt> </tt> – моноширинный текст.

22

К одному фрагменту можно применять сразу несколько дескрипторов. Например: <b><i> Ваш текст </i></b> (см. рисунок 4).

Рисунок 4 – Применение к тексту несколько дескрипторов

Некоторые теги можно или должны применяться с определёнными атрибутами (или параметрами), которые указываются в открывающем элементе тега.

Параметры <font>:

size – задаёт размер шрифта (по умолчанию =3), например, <font size=”n”> <|font>. Чем больше число, тем крупнее шрифт, n=1..6.

face – задаёт стандартное имя используемого шрифта. Важно использовать шрифты, которые с большой вероятностью могут быть установлены на компьютере пользователя, иначе браузер поставит шрифт, определённый по умолчанию (Time New Roman). К стандартным шрифтам можно отнести шрифты, поставляемые с Windows, пакетом MS Office. Можно указать семейство шрифтов, причём имя каждого отдельного шрифта пишется через запятую. Например, <font face=”Comic Sans MS, Tahoma”> Ваш текст

</font>

color – предназначен для указания цвета, которым выводится текст (по умолчанию – чёрный, код которого #000000), цвет определяется его названием или шестнадцатеричным кодом. Например, <font color=”red”> красный </font>; <font color=”#ff0000”> красный </font> (см. рисунок 5).

Параметры можно использовать как все вместе, так и в любых сочетаниях. Например, зададим шрифт Verdana синего цвета размера 2 для отображения

текста:

<font face=”Verdana” color=”blue” size= ”2”> текст </font>

23

Атрибут style парного тега <span> можно задавать выделение текста любым цветом.

Например, <span style=background-color: ”yellow”> жёлтый </span>.

Рисунок 5 – Задание цвета фона разными способами

Теги<pre> </pre> используются, если текст нужно вывести с точностью до пробелов так, как он был набран в приложении Блокнот (например, для форматирования отступов в стихотворениях, см. рисунок 6).

Рисунок 6 – Пример использования тегов Теги<pre> и </pre>

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

24

Выделяют следующие дескрипторы, определяющие логическое форматирование текста:

<abbr> – выделяет соответствующий ему текст в качестве аббревиатуры; <cite> – для выделения ссылок на книги, а также отдельных цитат в тексте; <code> – отмечает заключённый текст в виде блока программного

кода(обычно применяется моноширинный шрифт Courier New);

<del> – выделяет текст как удалённый. Отмеченный текст выделяется с помощью перечёркивания;

<dfn> – для выделения фрагмента текста в качестве определения;

<em> – обеспечивает выделение важных (по мнению автора) фрагментов текста, при отображении имитирует курсив;

<kbd> – для выделения текста, вводимого пользователем с клавиатуры, обычно отображается как моноширинный текст;

<q> – для отметки коротких цитат в текстовой строке; параметр cite этого тега, позволяет указывать источник заимствованной цитаты;

<samp> – для выделения текста в виде образца, обычно применяется для выделения результатов

<strong> – для очень важных фрагментов текста (имитация полужирного шрифта);

<var> – позволяет выделять имена программных переменных.

Контрольные вопросы и задания

1.На какие две группы можно разделить все теги форматирования?

2.Какой дескриптор используется для перехода на новую строку? Для перехода на новый абзац?

3.Перечислите теги, используемые для начертание шрифта.

4.Прокомментируйте следующий тег: <font face=”Arial” color=” red ” size= “2”> текст </font>

5.В каком случае удобно использовать теги<pre> </pre>?

6.Создайте HTML-документ, в котором напишите поздравление (повод выберите сами), примените к тексту разные теги форматирования.

25