СС ЭВМ лекция

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

В 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 - шестью шестнадцатеричными числами или именованными цветами, например:

С помощью атрибута BACKGROUND тега <BODY> можно вставить небольшие рисунки (размножаемые Web-броузером) в формате gif (файл - background.gif) или jpg (файл - background.jpg), т.е. создать графический фон:

<BODY BACKGROUND="background.gif"> - размноженный рисунок возникает на заднем плане.

Для наилучшего усвоения информации используют различные способы выделения абзацев. Тег списка <DL> (Definition List) позволяет создавать списки определений, т.е. отдельные абзацы с отступом без нумерации или маркеров. В конце определения необходимо поместить закрывающий тег </DL>. Списки состоят из двух частей: определения (DT) и описания (DD). Атрибут title показывает текст в виде всплывающей подсказки.

Таблица 4.1.

Именованные	цвета
black
Maroon
Green
Olive
Navy
Purple
Teal
Gray
Silver
Red
Lime
Yellow
Blue
Fuchsia
Aqua
White

Пример 2.

<HTML>

<BODY>

<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:

А     Я

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

Yandex.RTB R-A-252273-3

Содержание

Yandex.RTB R-A-252273-4