 |
Теги форматирования текста
|
|
|
|
Теги форматирования используются для оформления информационного содержания страницы. Ниже перечислены основные теги этой группы:
<B>содержание</B> - жирный текст;
<U>содержание</U> - подчеркнутый текст;
<S>содержание</S> - перечеркнутый текст;
<PRE>содержание</PRE> - сохранения форматирования текста;
<I> содержание</I> - курсивный текст;
<TT>содержание</TT> - моноширинный шрифт.
При форматировании текста страницы надо помнить, что интерпретатор HTML рассматривает содержание страницы как последовательность символов, на которые воздействует определенный тег. При этом управляющие коды конца строки игнорируются, ведущие пробелы строки также игнорируются. Если нужно что бы содержание выводилось «как есть» используют специальный тег PRE. Его содержание не изменяется. Например, если требуется вывести в окно браузера текст:
HTML
TEST
OK!!!
То его нужно разметить в виде:
<PRE>
HTML
TEST
OK!!!
</PRE>
Формирование строк в разметке выполняется тегом <BR>, его указывают в конце строки или между словами строки.
Пример:
<b>Hello World!</b><BR><i>Привет МИР!</i>
В окне браузера такой текст будет иметь вид:
Hello World!
Привет МИР!
Использование тега TT позволяет получить оформление текста шрифтом похожим на шрифт пишущей машинки. Размеры символов такого шрифта по высоте и ширине одинаковые.
Формирование абзацев в тексте выполняется тегом P. Форматы тега
<P> - начать новый абзац.
<P ALIGN="Type">содержание</P> - создать абзац с выравниванием. Параметр Type определяет тип выравнивания содержания внутри абзаца: сenter (по центру), right (по правому краю), left (по левому краю).
Создание заголовков в тексте выполняется тегом H. Принято говорить о заголовках определенного типа размера n.
|
|
|
Формат тега:
<Hn></Hn>, где n=1...6 размер символов. Размер символов текста условный и определяется браузером. Типоразмер 1 крупные символы, далее символы уменьшаются.
Текст на странице можно разделить линиями с помощью тега HR.
Формат тега:
<HR color="цвет"> - вывод линии.
Текст страницы может центрироваться по границам окна браузера тегом <CENTER>содержание</CENTER>. Выделить текст можно как цитатный блок тегом <BLOCKQUOTE>содержание</BLOCKQUOTE>.
Управление видом отдельных частей страницы можно выполнить, используя тег FONT. С помощью этого тега изменяют цвет символов, шрифт текста, размер символов текста. В составе теги используют параметры:
FACE- в него записывают системное имя шрифта;
COLOR- хранит цветовой код;
SIZE- хранит размер символов шрифта.
Пример.
Размер шрифта задается в относительных единицах от 1 до 7. Размер 1 символы наименьшего размера.
Пример.
<font size="7" face="Courier">
<blockquote>Hello World!<br>Привет Мир!</blockquote>
</font>
Наименование шрифта вводится с соблюдением регистра, если такого шрифта нет на компьютере клиента сети, то используется шрифт по умолчанию браузера.
При создании информационного содержания страницы могут применяться специальные символы. Такие символы используются, если нужно ввести символ, которого нет в явном виде на клавиатуре, либо его использование вызывает противоречие в разметке.
Специальные символы вводятся по ссылке &name; здесь name идентификатор символа. Ссылки на специальные символы приводятся в таблице 2.1.
Таблица 2.1
Таблица специальных символов
| Символ | Назначение | Символ | Назначение |
| © | Символ авторского права © | > | Знак > |
| ® | Зарегистрированная торговая марка ® | < | Знак < |
| | Неразрывный пробел | & | Символ & |
| " | Символ “ |
C помощью ссылки на неразрывный пробел можно получить красную строку, при выводе текста в окно браузера.
|
|
|
Например, нужно вывести текст.
Hello World!
Привет МИР!
Разметка примет вид:
<b>Hello World!</b><br>
<i>Привет МИР!</i>
В разметке можно использовать комментарий. Это поясняющий текст, который не выводится в окно браузера. Оформляется комментарий тегом <! - -Текст комментария - ->. Комментарий должен начинаться с символа!.
Упорядочивание информации на странице
Упорядочивание информации на странице может быть выполнено с помощью следующих средств языка разметки:
· Списков.
· Таблиц.
Списки
С помощью списков можно упорядочить строки текста, снабдив их определенными маркерами и получить определенное взаимное расположение.
Существуют три вида списков, показанных в таблице 2.2.
Таблица 2.2
Типы списков
| Нумерованный список | Маркированный список | Список определений |
| <OL> <LI>строка1 <LI>строка2 ... <LI>строкаi </OL> | <UL> <LI>строка1 <LI>строка2 ... <LI>строкаi </UL> | <DL> <DT>Термин1<DD>Определение1 <DT>Термин2<DD>Определение2 ... <DT>Терминi<DD>Определениеi </DL> |
Теги OL, UL и DL отмечают область страницы, где находится список. Тег LI отмечает строку-элемент списка его можно закрыть парным тегом </LI>. Тег DT отмечает строку термин, а тег DD строку определение этого термина, она выводится ниже термина с отступом.
В таблице 2.3 приведены теги для формирования трех разных типов списков.
Таблица 2.3
Примеры списков
| Нумерованный список | Маркированный | Список определений |
| <ol> <li>Yes <li>No <li>Ignore </ol> | <ul> <li>Yes <li>No <li>Ignore </ul> | <dl> <dt>Yes<dd>Да <dt>No<dd>Нет <dt>Ignore<dd>Отмена </dl> |
Результат действия тегов показан на рисунке 2.1.
Рис.2.1. Фрагмент страницы со списками в браузере
Таблицы
Создание таблицы требует использовать ряд тегов. Тегом TABLE отмечают область страницы, где будет находиться таблица. Строки таблицы размечаются тегом TR. Для создания ячеек таблицы служит тег TD, а для создания ячеек шапки таблицы можно использовать тег TH, его содержание выводится жирным шрифтом.
Таблицу можно снабдить подписью - заголовком, используя тег CAPTION. Формат тега:
|
|
|
<CAPTION ALIGN="Type"></CAPTION> - заголовок таблицы
Тип выравнивания Typе может принимать значения Top (заголовок над таблицей), Bottom (заголовок под таблицей).
Теги формирования ячеек можно снабдить параметром ALIGN, который задает выравнивание содержания ячеек. Форматы этих тегов примут вид: <TH ALIGN="Type"></TD>
<TD ALIGN="Type"></TD>
Здесь значение Type – тип выравнивания в ячейке: center (выравнивание по центру), left (выравнивание по левому краю), right (выравнивание по правому краю).
При создании сложных таблиц в тегах TH и TD используют параметры COLSPAN и ROWSPAN, которые позволяют задавать ширину ячейки в клетках и высоту ячейки в строках соответственно.
Пример. Дана таблица, нужно сформировать разметку для ее вывода.
| One | Two | Three | |
| Yes | Ok | One | Four |
| No | Two | Five | |
| Cancel | Three | Six |
Table sample
Разметка для вывода данной таблицы примет вид:
<table border>
<caption align="top"><b>Table sample</b></caption><tr>
<th>One</th><th>Two</th><th colspan="2">Three</th>
</tr><tr>
<td>Yes</td><td rowspan="3" align="center">Ok</td>
<td>One</td><td>Four</td>
</tr><tr>
<td>No</td><td>Two</td><td>Five</td>
</tr><tr>
<td>Cancel</td><td>Three</td><td>Six</td></tr>
</table>
Параметр BORDER тега TABLE предписывает выводить разделительные линии в таблице. Вид таблице в окне браузера показан на рисунке 2.2.
Рис.2.2. Таблица в браузере
Допускается задавать толщину линий разграфки таблицы с помощью параметра BORDER. Например, BORDER="2" задает толщину линий в 2 пиксела.
|
|
|
