Форматирование текста. В HTML предусмотрено 6 стандартных размеров шрифта для оформления заголовков

В 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>. Заключенный между ними текст будет соответственно больше или меньше окружающего текста.

Можно использовать все виды красок на странице, задавая цвет в атрибуте COLOR= тега < FONT>.

Цвета текста в документе задаются в кодировке 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; атрибутом COLOR= просмотренных ссылок – 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 показывает текст в виде всплывающей подсказки.

Таблица 4.1.

Пример 2.

< HTML>

< BODY>

< DL title = «это список»>

< DT> HTML

< DD> Это язык разметки гипертекста

< DT> Броузер

< DD> Это программа для просмотра гипертекста в интернете

< /DL>

< /BODY>

< /HTML>

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

HTML

Это язык разметки гипертекста

Броузер

Это программа для просмотра гипертекста в интернете

Тег < BLOCKQUOTE> создает поля слева и справа от текста.

Атрибуты LEFTMARGIN=n, RIGHTMARGIN=n, TOPMARGIN=n, где n - ширина поля в пикселях, указываются в теге < BODY> для задания левого, правого и верхнего полей для всей страницы.

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

Теги < MULTICOL> и < /MULTICOL> выводят текст в несколько колонок (используются только для броузера Netscape 3.0 и выше).

Они имеют следующий полный формат: < MULTICOL COLS=" x" GUTTER=" у" > текст < /MULTICOL>, где x - количество столбцов, у - расстояние между столбцами.

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

- поместить текст между тегами < NOBR>;

- если надо оборвать строку в определенном месте, - поставить там тег < BR>;

- если надо задать места переноса текста - поставить там тег < WBR>.

Для задания отступа перед новым абзацем используется тег < TAB INDENT=n>, где n - число так называемых n-пробелов.

Пример. Установка пяти подряд расположенных пробелов между буквами А и Я с применением символа неразрушающего пробела - & nbsp:

А& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; Я

Для создания линий используется тег < HR> с атрибутами SIZE=, WIDTH=, ALIGN=, задающими соответственно высоты в пикселях, ширины в пикселях или в процентах от размера окна и выравнивание. Дополнительный атрибут NOSHADE создает линию без рельефности. С помощью этих атрибутов можно создавать очень разнообразные размещения текста. Например, тег < HR NOSHADE SIZE=30 WIDTH=" 30%" ALIGN=LEFT> создаёт толстую линию на треть страницы, расположенную слева.