Приветствую Вас, Гость
Тема3: «Коммуникационные технологии»(16ч)
Урок 26. Форматирование текста на веб-странице

Самоучитель "Создание веб-сайтов"
Веб-учебник HTML

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

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

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

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

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

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

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

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

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