В HTML предусмотрено 6 стандартных размеров шрифта для оформления заголовков. Они устанавливаются при помощи тегов:
<H1>Заголовок стиля 1</H1>;
<H2>Заголовок стиля 2</H2>;
<H3>Заголовок стиля 3</H3>;
<H4>Заголовок стиля 3</H4>;
<H5>Заголовок стиля 3</H5>;
<H6>Заголовок стиля 6</H6>.
Пример 1.
<HTML>
<HEAD>
<TITLE>
Первый пример простого документа на языке гипертекстовой разметки
</TITLE>
</HEAD>
<BODY>
Стили форматирования в HTML
<H1>Стиль заголовка первого уровня. Самый крупный и тяжёлый
</H1>
<H2>Стиль заголовка второго уровня с меньшими размерами и толщиной шрифта
</H2>
<H3>Стиль заголовка третьего уровня ещё меньше
</H3>
<H4> Стиль заголовка четвёртого уровня
</H4>
<H5> Стиль заголовка пятого уровня
</H5>
<H6> Стиль заголовка шестого уровня. Самый маленький и светлый из базовых шрифтов
</H6>
<P>Тег для выделения абзаца. Его можно использовать без завершающего тега, так как новый тег Р по смыслу означает не только начало, но и конец предыдущего абзаца. Грамотно с точки зрения языка HTML и удобно для броузера завершать абзац закрывающим тегом
</P>
</BODY>
</HTML>
Для форматирования абзаца используются теги <P> - создание нового абзаца и <Br> - код пропуска строки или большой отступ.
Для выравнивания, видоизменения и выделения текста используются теги <P> с атрибутами ALIGN. Теги <P ALIGN="right"> . . </P> выполняют выравнивание по правому краю. При задании выравнивания по правому краю концы строк находятся на одном уровне, а начало на разных.
При задании выравнивания по левому краю с помощью тегов<P ALIGN="left"> . . </P> начальные элементы строк находятся на одном уровне, а концы на разных. Этот вид выравнивания часто используется при написании эпиграфов или просто для оригинальности.
Теги < P ALIGN="center"> . . </P> выполняют выранивание по центру.
Форматирование шрифта выполняют теги: <B> </B> - жирный текст; <I> </I> - курсив;<U> </U> - подчеркнутый текст.
Вид шрифта - очень важная часть дизайна Web-страниц. Он позволяет придавать тексту определенную выразительность, эмоциональность. Строгие шрифты показывают важность текста, его официальность. Рукописные шрифты придают тексту некоторую красоту, поэтичность и т.д. Существует огромное множество шрифтов, но HTML сейчас только начинает развиваться в области использования шрифтов. В классической версии языка HTML 3.0 эта проблема решена единственным образом - доступны шрифты, установленные в системе пользователя с помощью атрибута FACE= в теге FONT. Сейчас появляются новые технологии. Например, загрузка шрифтов из Интернета или встраивание шрифтов непосредственно в документ. Ещё одной новаторской идеей в этой области является использование графических литер с определенным начертанием вместо текста. После загрузки 2-3 листов, написанных таким методом, почти все буквы оказываются загруженными в кеш броузера, и открытие последующих страниц происходит очень быстро.
Для задания размера шрифта используется атрибут SIZE= в теге FONT. Можно задавать базовый размер шрифта тегом <BASEFONT SIZE=x> для использования на всей странице, а в нужных участках текста использовать атрибут SIZE= для задания размера определенного участка. По умолчанию используется тег <BASEFONT SIZE=3>. Заголовок <H1> имеет размер 6. Чтобы сделать шрифт больше, чем <H1>, можно выбрать размер шрифта, равный 7. Основное отличие тега <FONT> от <Hx> заключается в том, что он не разбивает строку. В HTML можно использовать вышеуказанный список шрифтов в теге <FONT>. Можно перечислить в этом списке несколько шрифтов, из которых броузер выберет первый, установленный в системе, и использует его для отображения текста. Например <FONT FACE=" Arial, COMIC SANS MS, Tahoma, AG_Cooper"> текст</FONT>.
Размеры символов (1,3,5,7) в тексте указываются тегами:
<FONT SIZE="1">, < FONT SIZE="3">, < FONT SIZE="5">, < FONT SIZE="7">. Поместив текст между каким-либо из этих тегов и закрывающим тегом </FONT> получим шрифт нужного размера.
Вид шрифта в тексте:
<FONT FACE="Times New Roman">ABC</FONT>.
<FONT FACE="System">DEF</FONT>.
<FONT FACE="Arial">GHI</FONT>.
<FONT FACE="Courier">xyz</FONT> .
Для задания размера текста существуют и другие теги. Это теги <BIG> </BIG> и <SMALL> </SMALL>. Заключенный между ними текст будет соответственно больше или меньше окружающего текста.
Можно использовать все виды красок на странице, применяя тег <FONT> с атрибутом COLOR=.
Цвета текста в документе задаются в кодировке RGB - шестью шестнадцатеричными числами или именованными цветами, например:
<FONT COLOR="#FF0000"> Красный текст</FONT>.
< FONT COLOR ="#CF2CD4">Лиловый текст</FONT>
<FONT COLOR ="#0000FF"> Синий текст </FONT>
< FONT COLOR="#00FF00"> Зелёный текст</FONT>
<FONT COLOR="#808080"> Серый текст</FONT>
<FONT COLOR="silver"> Серебряный текст </FONT>
<FONT COLOR="green" SIZE="4"> Зелёный текст с размерами шрифта 4. </FONT>
Наименования цветов приведены в Таблице 4.1.
Атрибуты тега <BODY> для задания цвета фона документа - BGCOLOR; цвета текста - TEXT; цвета ссылок - LINK; цвета просмотренных ссылок – VLINK; ссылок в момент нажатия на них правой кнопкой – ALINK. Цвета текста, ссылок и фона задаются в кодировке RGB - шестью шестнадцатеричными числами или именованными цветами, например:
<BODY BGCOLOR="# FFFF88 " TEXT="# 0000FF " LINK="# FF0000 " VLINK="# CF2CD4 " ALINK="# C033FF ">
С помощью атрибута BACKGROUND тега <BODY> можно вставить небольшие рисунки (размножаемые Web-броузером) в формате gif (файл - background.gif) или jpg (файл - background.jpg), т.е. создать графический фон:
<BODY BACKGROUND="background.gif"> - размноженный рисунок возникает на заднем плане.
Для наилучшего усвоения информации используют различные способы выделения абзацев. Тег списка <DL> (Definition List) позволяет создавать списки определений, т.е. отдельные абзацы с отступом без нумерации или маркеров. В конце определения необходимо поместить закрывающий тег </DL>. Списки состоят из двух частей: определения (DT) и описания (DD). Атрибут title показывает текст в виде всплывающей подсказки.