Лекция№8 Форматирование

Лекция № 8
Тема: Форматирование HTML документа
Цель: рассмотреть как форматировать HTML документ
Каждый текст имеет определенную структуру, элементами которой
являются заголовки, подзаголовки, таблицы, абзацы и т.п. В отличие от
текстового редактора браузер размещает текст, пользуясь своими внутренними
правилами.
Одним из первых правил составления практических любых
документов является разбиение его текста на отдельные абзацы, выражающие
законченную мысль. HTML–документы не являются исключением из этого
правила. При создании документов с помощью текстовых редакторов
разбиение на абзацы
выполняется вводом символа перевода строки.
Большинство редакторов реализует это при нажатии клавиши Enter. Однако в
HTML–документах символы перевода строки не приводят к образованию
нового абзаца.
Разделение текста на абзацы
Поскольку
символы
перевода
строки
оригинального
документа
игнорируются, то текст, отлично смотревшийся в окне редактора автора
документа, может превратиться в сплошной неудобочитаемый текст в окне
программы просмотра. Избежать этого позволяет применение тэга разделения
на абзацы <P>. Перед началом каждого абзаца текста следует поместить тэг
<P>. Закрывающий тэг </P> не обязателен. Браузеры отделяют абзацы друг от
друга пустой строкой.
Тэг <P> может задаваться с параметром горизонтального выравнивания
ALIGN, возможные значения которого перечислены ниже:
- LEFT -Выравнивание текста по левой границе окна браузера
- CENTER- Выравнивание по центру окна браузера.
- RIGHT- Выравнивание по правой границе окна браузера.
- JUSTIFY- Выравнивание по ширине (по двум сторонам)
Перевод строки
1
Перенос строки может осуществляться только по символам–разделителям
слов
(например,
пробелам).
Иногда
в
документах
требуется
задать
принудительный перевод строки, реализующийся независимо от параметров
настроек браузера. Для этого служит тэг принудительного перевода строки
<BR>, который не имеет соответствующего закрывающего тэга. Включение
тэга <BR> в текст документа обеспечит размещение последующего текста с
начала новой строки.
Атрибуты <BR CLEAR={LEFT | RIGHT | ALL | NONE}>
Атрибут CLEAR может быть использован, чтобы передвинуть перемещаемый
образ на другой край. <BR CLEAR=LEFT> передвинет образ к левому краю,
< BR CLEAR=RIGHT> - к правому краю, в то время как <BR CLEAR=ALL>
сделает то же самое и к левому и к правому краям одновременно. Например,
если рядом с текстом слева встречается рисунок, то можно использовать тег
<BR> для смещения текста ниже рисунка.
Замечание.

В отличие от тэга абзаца <P> при использовании тэга <BR> не будет
образована пустая строка.

Использование тэга <BR> требует осторожности – возможно, что
браузер уже сделал перевод строки за одно – два слова до того, как встретил
тэг <BR>. Это бывает, если ширина окна программы просмотра меньше, чем
этот же параметр программы, с помощью которой тестировался документ.
Может получиться так, что в строке посреди абзаца останется только одно
слово, нарушая тем самым красоту компоновки документа.
Тэги <NOBR> и <WBR>
Бывают ситуации, когда необходимо запретить перевод строки. Для этого
существует тэг–контейнер <NOBR>. Текст будет располагаться в одной строке,
независимо от ее длины. Если строка будет выходить за пределы окна браузера,
то появится горизонтальная полоса прокрутки. Размечая текст с помощью тэга
неразрывной строки <NOBR> можно получить очень длинные строки. Чтобы
избежать этого, можно указать браузеру место возможного перевода строки.
2
Это можно осуществить, поставив в нужном месте текста тэг <WBR>, который
так же, как и тэг <BR>, не нуждается в закрывающем тэге.
Заголовки внутри HTML–документа
Наряду с названием всего документа, на Web–странице могут располагаться
заголовки отдельных частей документа. Эти заголовки могут иметь шесть
разных уровней (размеров) и представляют собой фрагменты текста, которые
выделяются браузером на экране при отображении страницы.
Для разметки заголовков используются тэги <H1>, <H2>, <H3>, <H4>, <H5>
и <H6>. Эти тэги требуют соответствующего закрывающего тэга. Заголовок с
номером 1 является самым крупным, а заголовок с номером 6 – самым мелким.
При использовании тэгов заголовка осуществляется вставка пустой строки
до и после заголовка, поэтому тэгов абзаца или перевода строки не
требуется.
Тэги
заголовка
выравнивания
могут
ALIGN,
задаваться
возможные
с
параметром
значения
параметра
горизонтального
совпадают
с
параметрами выравнивания тэга абзаца <P>.
Приведем пример использования заголовков разного размера с различным
выравниванием:
<H1 ALIGN=CENTER> Весенняя гроза</H1>
<H3 ALIGN=CENTER>Федор Тютчев</H3>
<P ALIGN=LEFT>
Люблю грозу в начале мая,<BR>
Когда весенний, первый гром,<BR>
Как бы резвятся и играя,<BR>
Грохочет в небе голубом.
<P ALIGN=CENTER>
Гремят раскаты молодые,<BR>
Вот дождик брызнул, пыль летит,<BR>
Повисли перлы дождевые,<BR>
И солнце нити золотит.
3
<P ALIGN=RIGHT>
С горы бежит поток проворный,<BR>
В лесу не молкнет птичий гам,<BR>
И гам лесной, и шум нагорный --<BR>
Все вторит весело громам.
<P>
Ты скажешь: ветреная Геба,<BR>
Кормя Зевесова орла,<BR>
Громокипящий кубок с неба<BR>
Смеясь, на землю пролила.
<H6 ALIGN=RIGHT> 1828,1854</H6>
Форматирование HTML–документа. Горизонтальные линии
Другим методом разделения документа на части является проведение
горизонтальных линий. Они визуально подчеркивают законченность той или
иной области страницы.
Тэг <HR> позволяет провести рельефную горизонтальную линию в окне
большинства программ просмотра. Этот тэг не является контейнером, поэтому
не требует закрывающего тэга. До и после линии
автоматически
вставляется пустая строка.
С тэгом <HR> могут использоваться параметры:
1.ALIGN- Выравнивание линии по краю или центру. Возможные значения:
LEFT, CENTER, RIGHTLEFT.
2. WIDTH- Задание длины линии. Единицы измерения: пиксели или проценты
от ширины окна браузера. Если параметр не задан, то линия занимает всю
ширину окна.
3. SIZE- Задание толщины линии в пикселях.
4. NOSHADE- Отмена рельефности линии.
5. COLOR- Задание цвета линии. Цвет задается, используя стандартное имя
или число в формате RGB.
4
Замечания.
1. Параметр ALIGN используется тогда, когда линия не занимает всю
ширину окна браузера, то есть тогда, когда применяется параметр WIDTH.
2. Значения параметра WIDTH могут задаваться как в пикселях, так и в
процентах. Рекомендуется использовать проценты, так как при изменении
размеров окна браузер будет автоматически изменять длину линии в
соответствии с заданными пропорциями. Задание длины линии в пикселях
приводит к тому, что она будет иметь фиксированный размер, и,
соответственно, не будет меняться при изменении размеров окна браузера.
Приведем пример использования параметров тэга <HR>:
<HTML>
<HEAD>
<TITLE> Примеры использования горизонтальных линий. </TITLE>
</HEAD>
<BODY>
<HR ALIGN=LEFT WIDTH=100 SIZE=5 COLOR=#0000FF>
Линия выровнена по левому краю.<BR>
<HR ALIGN=CENTER WIDTH=100 SIZE=5 COLOR=#800080>
Линия выровнена по центру.<BR>
<HR ALIGN=RIGHT WIDTH=100 SIZE=5 COLOR=#FF0000>
Линия выровнена по правой границе.<BR>
<HR SIZE=24 COLOR=#008080>
Толщина линии в пикселях равна 24.
<HR WIDTH=50 COLOR=#FFFF00>
Задание длины линии.
</BODY>
</HTML>
В браузере этот HTML-документ будет выглядеть следующим образом:
5
Использование комментариев и специальных символов в HTMLдокументе
Для разбивки текста необходимо пользоваться специальными тэгами. Однако
бывают случаи, когда в HTML–документ необходимо включить текст, не
требующий форматирования. В этом случае можно воспользоваться тэгом–
контейнером <PRE>, после которого располагается уже отформатированный
текст.
Таким образом, текст, отмеченный тэгом <PRE>, будет отображаться так,
как он выглядит в обычном текстовом редакторе. Для его отображения всегда
будет использоваться моноширинный шрифт.
Данный тэг может использоваться, например, для отображения таблиц,
построенных без применения специальных тэгов разметки таблиц.
Включение комментариев в документ
В HTML–документ можно включать комментарии, которые не выводятся
браузером. Они состоят из произвольного числа строк и начинаются тэгом <!-- ,
а заканчиваются тэгом -->.
Комментарии
используются
для
заметок.
Большинство
браузеров
предоставляют возможность просмотра исходного кода, поэтому не следует
включать в комментарии информацию, не предназначенную для чужих глаз.
Специальные символы HTML-документа
Обычно каждый абзац начинается с абзацного отступа. Однако Webбраузеры обычно игнорируют дополнительные символы пробела, введенные в
текст страницы.
6
Ввод этих символов осуществляется одним из перечисленных способов:

заданием числового кода - сначала идут символы &#; затем число,
определяющее код символа, а затем символ ; (точка с запятой), например:
< ;

заданием мнемонического кода – сначала располагается символ &, затем
наименование символа и точка с запятой, например: > .
изображение
символ
код
описание
"
"
"
двойная кавычка
&
&
&
амперсанд
<
<
<
меньше, чем
>
>
>
больше, чем
 
 
непрерывный пробел
©
©
©
копирайт
®
®
®
зарегистрировано
º
º
º
копье Марса
ª
ª
ª
зеркало Венеры
‰
‰
‰
промилле
π
π
π
пи
7