3. Основы форматирования

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

Теги управления абзацами

<P ALIGN=CENTER/LEFT/RIGHT >...</P> - тег нового абзаца, используется в формате одиночного тега или контейнера. При использовании в форме одиночного тега концом абзаца считается начало следующего т.е следующий тег <P>. Атрибут ALIGN задает выравнивание элементов абзаца, значение по умолчанию LEFT

Теги управления переносом

<BR>,<NOBR>...</NOBR>, <WBR> - теги управления разрывами и переносом строк в тексте документа. При разрыве строки межстрочный интервал не увеличивается.

Теги выделения структуры документа

<H1>...</H1>, ... ,<H6>...</H6> - контейнерные теги шестиуровневых заголовков документа. Имеют атрибут ALIGN ( по умолчанию LEFT) для выравнивания заголовка.

Теги смыслового выделения текста.

Контейнеры для смыслового выделения заключенного в них текста на Web-страницах. Способ выделения зависит от типа используемого броузера, но главное назначение этих тегов передача читателям логики автора.

Теги стилистического выделения текста

Данная группа контейнерных тегов применяется для стилистического выделения элементов текста. Допускается любая комбинация нижеперечисленных тегов.

Дополнительные теги форматирования

<PRE>...</PRE> - контейнер предварительного форматирования текста. Используется для размещения на Web-страницах предварительно отформатированных текстовых фрагментов с сохранением их формата. Содержимое контейнера выводится моноширинным шрифтом. Внутри контейнера можно использовать теги абзаца, переноса строк, а так же теги стилистического и логического выделения. Данный контейнер в основном применяется для опубликования исходного кода программ, так как броузер своим форматированием может нарушить принятые синтаксические конструкции языка программирования.

<SCRIPT LANGUAGE="JavaScript">
Function aversum(p1, p2, p3, p4) {
 var result = 0;
 result = (p1+p2+p3+p4)/4;
return result;
}
</SCRIPT>

Приведенный выше текст программы, вычисляющий среднее значение по четырем аргументам, (JavaScript вам ничего не напоминает ?) оформлен при помощи заключения фрагмента, предварительно отформатированного в текстовом редакторе, в контейнер <PRE>...</PRE>.

<HR> - тег вставки линии-разделителя. Применяется для визуального разделения текста, при помощи горизонтальных линий (не путайте с графическими изображениями в форме разделителей). При отображении линии-разделителя в документе, до и после нее, броузер добавляет разделение абзацев. Формат линии-разделителя задается при помощи следующих атрибутов:

• ALIGN - выравнивание (LEFT / RIGHT / CENTER);

• WIDTH - ширина линии (пикселы или проценты к ширине окна WIDTH=50%);

• SIZE - высота линии (пикселы);

• COLOR - цвет линии;

• NOSHADE - отключить эффекты 3-х мерности;

Примеры тега <HR>:

<HR>

<HR ALIGN=LEFT SIZE=5 WIDTH=50% COLOR=RED>

Комментарии и специальные символы

Для добавления комментариев в HTML документы используется контейнер <!-- ...-->. Например:

Кроме комментариев в HTML документах можно использовать специальные символы. Для внедрения специального символа в документ применяется конструкция следующего формата: &ИМЯ СИМВОЛА. Специальные символы используются для отображения элементов математических символов (&divide это ÷, &frac34 это ¾), редких символов национальных алфавитов и общепринятых символов (&copy это ©, &reg это ®).

Например, для отображения на Web-странице HTML тегов (именно так я и делал эти страницы) необходимо использовать символы заменители угловых скобок (< это &lt) и (> это &gt). Еще один часто используемый при форматировании (например создание пустых ячеек в таблицах) спецсимвол это неразрывный пробел &nbsp.

Полный список специальных символов HTML можно поглядеть здесь Перечень спецсимволов HTML от MANUAL.RU, а можно глянуть и у первоисточникаПеречень спецсимволов HTML от W3.ORG

Использование шрифтов в документах

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

А знаете ли вы о технологии внедрения шрифтов в Web-страницы ? Существуют технологии внедрения необходимых разработчику шрифтов в Web-страницы. У Microsoft это технология Embedded fonts, а у их конкурентов Netscape, это называетсяDinamic fonts. Оба подхода примерно одинаковы, но форматы шрифтов (OpenType и TrueDoc), а так же утилиты для их создания, упаковки и внедрения в документы различаются.

Для определения шрифта текста в HTML документах применяется контейнер <FONT>...</FONT> и одиночный тег <BASEFONT>.

Тег <BASEFONT> задает базовые параметры шрифта, общие для всего документа. Действие базовых установок может быть отменено атрибутами нового тега <BASEFONT>.

Kонтейнер <FONT> применяется для изменения параметров шрифта отдельных элементов документа, которые необходимо отобразить шрифтом отличным от базового. Действие его атрибутов ограничивается фрагментом документа, заключенным в данный контейнер, и он может быть вложенным по отношению к другим тегам форматирования текста.

Для задания характеристик шрифта в тегах <FONT>...</FONT> и <BASEFONT> используются следующие атрибуты:

• FACE - Задает имя шрифта (или перечня шрифтов - по мере убывания предпочтения) на компьютере пользователя. В случае отсутствия текст отображается шрифтом, заданным по умолчанию в броузере пользователя. Например:

  <FONT FACE="Arial">Пример Arial</FONT> - Пример Arial

• SIZE - абсолютный или относительный размер шрифта. Относительный размер это размер шрифта относительно стиля Normal (SIZE=3) или размера заданного тегом <BASEFONT>. Минимальное абсолютное значение размера шрифта 1, максимальное 7. Например:

  <FONT SIZE=4>4 абсолютный шрифт</FONT> - 4 абсолютный шрифт

  <FONT SIZE=+1>4 относительный шрифт</FONT> - 4 относительный шрифт

• COLOR - цвет шрифта. Например:

  <FONT COLOR=RED>Красный шрифт</FONT> - Красный шрифт

  <FONT COLOR=#FF0000>Красный шрифт</FONT> - Красный шрифт

Полученные в данном разделе навыки, по форматированию текста, закрепим конкретным примером:

Пример 3. Формирование текста. [просмотр примера в окне]

<HTML>
<HEAD>
<TITLE>Форматирование текстовых данных</TITLE>
</HEAD>
<BODY BGCOLOR ="WHITE", TEXT="BLACK", LINK="BLUE", ALINK="RED", VLINK="NAVY" > 
<BASEFONT FACE="Times New Roman","Arial" SIZE=4>
<H1 ALIGN=CENTER>АНЕКДОТЫ</H1>
<HR SIZE=5 COLOR=BLACK>
<FONT SIZE=+2><U>Анекдот 1</U></FONT>
<P>
Программист едет в трамвае, читает книгу.<BR>
Старушка смотрит на программиста, смотрит на книгу, крестится <BR>
и в ужасе выбегает на следующей остановке.<BR>
Программист читал книгу <DFN>"Язык Ада"</DFN>.
</P> 
<FONT SIZE=+2><U>Анекдот 2</U></FONT>
<P>
Программист ставит себе на тумбочку перед сном два стакана. <BR>
Один с водой - на случай, если захочет ночью пить.<BR>
А второй пустой - на случай, если не захочет.
</P>
<FONT SIZE=+2><U>Анекдот 3</U></FONT>
<P>
Программист заходит в лифт, нажимает клавишу с номером этажа<BR>
и мучительно ищет клавишу <KBD>"enter"</KBD>. 
</P>
<HR SIZE=5 COLOR=BLACK>
<P ALIGN=CENTER>&copy 2001 Вебмастер 
<A HREF="mailto:myname@mail.ru">Попробуй связаться со мной</A>
</BODY>
</HTML>


В заключении следует отметить, что теги управления шрифтами, в последних спецификациях HTML, объявлены выведенными из употребления. На смену данным тегам пришли свойства шрифтов (font-family, font-size, font-style, font-variant, font-weight) из листов стилей CSS (См. раздел 3.6.).

Та же участь постигла и некоторые теги форматирования символов. Они заменены свойствами текста CSS (например тег <U>...</U> заменен свойством text-decoration:underline, а тег <STRIKE>...</STRIKE> заменен свойством text-decoration:line-through).

Вы можете продолжать использовать данные теги, но в современных проектах они поддерживаться не будут.

Практическое задание

Откройте страничку О себе. Перейдите в визуальный редактор , выделите свою фамилию жирным шрифтом, нажав на значок B в панели форматирования

Теперь откройте редактор html  на панели редактирования. Обратите внимание, что ваша фамилия выделена тегами B: <b>Фамилия</b>. Выделите тегами u и i имя и отчество:

<u>Имя</u>

<i>Отчество</i>

Нажмите кнопку Сохранить и посмотрите на изменения в тексте.