[ назад ] [ содерж ] [ вперед ]
  [ в конец ]  

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

Для придания презентабельного вида вашим документам в HTML есть масса средств, но как бы вы хорошо их не использовали, главное это: чувство стиля, наличие художественного воображения и умеренное использование всяческих "прибамбасов", замедляющих загрузку документов и раздражающих посетителей (не у всех хороший модем или провайдер).

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

Данные текстового формата по прежнему являются доминирующими в HTML документах (если конечно ваш сайт не относится к категории ХХХ или посвящен изобразительному искусству). Для форматирования текстовых данных в HTML применяются следующие теги:

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

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

<P>...</P> или <P>

Этот абзац выравнивается по левому краю.

И этот абзац тоже.

<P ALIGN=CENTER>

Этот абзац выравнивается по центру.

И этот абзац тоже.

<P ALIGN=RIGHT>

Этот абзац выравнивается по правому краю.

И этот абзац тоже.

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

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

<BR> Используется для указания места принудительного разрыва.

Пример: <P>ФИО: <BR> Иванов С.С.</P>

Будет выглядеть так:

ФИО:
Иванов С.С.

<NOBR>...</NOBR> Используется для запрета разрыва текста, помещенного в данный контейнер.

Пример: <NOBR>Это лучше не разрывать</NOBR> при необходимости переноситься на новую строку целиком, а не так:

Это лучше
не разрывать

<WBR> Используется для указания рекомендуемого места для разрыва строки. Может быть вложенным в контейнер <NOBR>...</NOBR>.

Пример: <NOBR>42301<WBR>810600000000001</NOBR> - номер счета заданный таким образом при помещении в поле уже своей ширины, разорвется после балансового счета:

42301
810600000000001

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

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

<H1>...</H1>

Заголовок 1 уровня

<H2>...</H2>

Заголовок 2 уровня

<H3>...</H3>

Заголовок 3 уровня

<H4 ALIGN=LEFT>...</H4>

Заголовок 4 уровня по левому краю

<H5 ALIGN=CENTER >...</H5>
Заголовок 5 уровня по центу
<H6 ALIGN=RIGHT>...</H6>
Заголовок 6 уровня по правому краю

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

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

<CODE>...</CODE> Компьютерный код - Function Sum(a,b);
<CITE>...</CITE> Выделение цитат - Цитата
<KBD>...</KBD> Клавиатурный шрифт - Клавиатура
<SAMP>...</SAMP> Выделение примеров -Пример
<STRONG>...</STRONG> Выделение важных фрагментов - Важно
<VAR>...</VAR> Выделение имен (i, j, k ) переменных
<DFN>...</DFN> Выделение определений - Определение
<EM>...</EM> Расставить акценты - Акцент
<BLOCKQUOTE>...</BLOCKQUOTE> Выделение фрагмента текста в большом блоке текстовом блоке на странице.
Вот фрагмент который мы хотели выделить из текстового блока в документе.
Таким образом выделенные фрагменты текста отображаются броузером.

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

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

<B>...</B> Выделение полужирным шрифтом
<I>...</I> Выделение курсивом
<TT>...</TT> Выделение телетайпным шрифтом
<U>...</U> Выделение подчеркиванием
<STRIKE>...</STRIKE> Выделение перечеркиванием
<SUP>...</SUP> Шрифт в верхнем индексе
<SUB>...</SUB> Шрифт в нижнем индексе
<SMALL>...</SMALL> Мелкий шрифт
<BIG>...</BIG> Крупный шрифт

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

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

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

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

<HR>


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


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

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

<!-- После праздников (на свежую голову), эту главу надо переработать 31/12/2000 -->.

Кроме комментариев в 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> используются следующие атрибуты:

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

Пример 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).

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


  [ на начало ]  
[ назад ] [ содерж ] [ вперед ]

Ваши вопросы и замечания прошу направлять dmitriy_v_k@hotmail.com
© 2001 Дмитрий Красюк
Дата последней модификации: Пятница Март 30, 2001.

Hosted by uCoz