Выделение фрагментов текста
Язык HTML позволяет выделять отдельные слова и даже символы документа. В таблице 2 приведены основные теги, используемые при выделении.
Для управления параметрами шрифта используется тег <FONT>. Он должен обязательно содержать один из трех атрибутов: COLOR, FACE, SIZE.
Способы задания цвета с помощью атрибута COLOR были описаны выше. Использование атрибута FACE позволяет задать название шрифта используемого для отображения текста. Однако следует помнить, что у посетителей вашей страницы может и не оказаться этого шрифта.
Атрибут SIZE позволяет управлять высотой символов, которая может находиться в пределах от 1 до 7 (в относительных единицах). Для этого атрибута можно определять значение со знаком (плюс или минус), которое определяет увеличение или уменьшение шрифта относительно текущего размера.
Параметры шрифта, используемые по умолчанию (как базовые) задаются с помощью непарного тега <BASEFONT>, который лучше располагать в начале документа. Он может использовать те же атрибуты что и FONT.
Таблица 2 - Парные теги выделения текста.
|
Тег |
Назначение |
|
B,STRONG |
Полужирный шрифт |
|
I,EM |
Курсив |
|
U |
Подчеркнутый текст |
|
S, STRIKE |
Вычеркнутый текст |
|
CITE |
Отображение цитат (выводятся курсивом) |
|
BLOCKQUOTE |
Отображение цитат (выделяются увеличенным отступом с двух сторон) |
|
SUP иSUB |
Верхний и нижний индексы, соответственно. |
|
CODE, VAR,SAMP |
Исходный текст, описание переменных и результат работы программы, соответственно. |
|
KBD |
Текст, вводимый с клавиатуры |
|
TT |
Имитация телетайпного текста, т.е. с постоянной шириной символов. |
|
DIV |
Создает новый раздел в документе. Чаще всего служит для задания выравнивания текста из нескольких разделов (атрибут ALIGN). |
|
PRE |
Отображает текст с постоянной шириной символов, не пропуская пробелы, символы табуляции и переносы строк, т.е. отображает предварительно отформатированный текст. |
|
BIGиSMAL |
Увеличивают и уменьшают (соответственно) размер шрифта на единицу относительно текущего (базового) размера. Аналогично <font size=+1>. |
|
CENTER |
Аналогично <div align=center>. |
Таблицы
Таблицы удобны для представления больших объемов данных, а многие Web-дизайнеры используют их также для точного размещения элементов Web-страниц. Таблица в языкеHTML задается при помощи парного тега <TABLE>. Таблица может содержатьзаголовок таблицы, определяемый парным тегом <CAPTION>, истроки таблицы, задаваемые при помощи парных тегов <TR>. Закрывающие теги <TR>можно опускать.
Каждая строка таблицы содержит ячейки таблицы, которые могут относиться к двум разным типам. Ячейки в заголовках столбцов и строк задают парным тегом <TH>, а обычные ячейки – парным тегом <TD>. Закрывающие теги <TН> и <TD> можно опускать. Отличие этих тегов заключается только в том, что <TH> задает ячейку, текст внутри которой отображается жирным шрифтом (т.е. эквивалентен <td><b>…</b>)
Каждая ячейка может содержать произвольный текст, а также любые теги HTML, допустимые в «теле» документа. В частности, ячейка таблицы может содержать вложенную таблицу или изображение.
При отображении таблицы на экране компьютера происходит ее автоматическое форматирование с подбором размеров ячеек в соответствии с объемом размещаемой информации и заданными атрибутами. Атрибуты элементов позволяют сколь угодно причудливо оформить таблицу по своему вкусу. В таблице 3 приведена краткий перечень допустимых атрибутов.
Таблица 3 -Атрибуты элементов, используемых при создании таблицы.
|
Атрибут |
Элемент |
Назначение |
|
ALIGN |
Таблица, строка, ячейка, заголовок |
Выравнивание таблицы по горизонтали (по умолчанию выравнивается по левому краю) Выравнивание данных по горизонтали Размещение заголовка над или под таблицей (topилиbottom). |
|
VALIGN |
Строка, ячейка |
Выравнивание по вертикали. Возможные значения: top– по верху,middle– по середине,bottom– по низу,baseline– по базисной линии (по умолчанию выравнивается по середине) |
|
Продолжение таблицы 3 | ||
|
WIDTH |
Таблица, ячейка |
Ширина задается в пикселях или в процентах от ширины документа (для таблицы) или от ширины таблицы (для ячейки) |
|
HEIGHT |
Ячейка |
Высота |
|
BORDER |
Таблица |
Ширина границы (рамки) таблицы в пикселях (по умолчанию 0). |
|
CELLSPASING |
Таблица |
Расстояние между ячейками. |
|
CELPADDING |
Таблица |
Расстояние между рамкой ячейки и ее содержимым. |
|
BGCOLOR |
Таблица, строка, ячейка |
Задает цвет фона. |
|
BACKGROUND |
Таблица, строка, ячейка |
Задает фоновое изображение для соответствующего элемента. |
|
ROWSPAN |
Ячейка |
Объединяет указанное количество ячеек в одну по вертикали. |
|
COLSPAN |
Ячейка |
Объединяет указанное количество ячеек в одну по горизонтали. |
Поскольку многие атрибуты могут определяться в различных элементах таблицы, при этом их действие зависит от тега, в котором они определены. Основное правило: атрибут, расположенный в элементе более низкого уровня, имеет приоритет над атрибутами, определенными ранее.
В заключение приведем пример объединения ячеек:
<table border=2>
<Caption align=bottom>Таблица</Caption>
<tr><th colspan=2>1<th colspan=3>2
<tr><td>1<td>2<td>3<td>4<td>5
<tr><td colspan=2 rowspan=2>6<td colspan=2>7<td rowspan=2>8
<tr><td>9<td>10
<tr><td>11<td>12<td>13<td>14<td>15
<table>
Результат будет иметь следующий вид:
