Лабораторная работа №2

Тема: использование списков, таблиц и графических изображений в HTML- документе.

1. Списки.

В HTML-документах используется три типа списков:

• Ненумерованный или неупорядоченный список (unordered list) с маркерами возле каждого элемента.

• Нумерованный или упорядоченный список (order list), в котором каждый элемент снабжается цифровой или символьной нумерацией.

• Список с определениями (definition list).

Шаблоны для создания списков:

• Ненумерованный список:

<UL>

<LI> Пункт 1 списка

<LI> Пункт 2 списка

<LI> Пункт 3 списка

</UL>

Используемые атрибуты:

type - определяет тип маркера.

Значения атрибута type:

• type = " circle " - вид маркера - окружность.

• type = " disc " - вид маркера - круг.

• type = " square " - вид маркера - квадрат

• Нумерованный список:

<OL type =" ">

<LI> Пункт 1

<LI> Пункт 2

<LI> Пункт 3

</OL>

Используемые атрибуты:

type - определяет тип нумерации.

Значения атрибута type:

• type = " 1 " - вид нумерации - 1,2,3….

• Type = " i " - вид нумерации - i,ii,iii,iv….

• Type = " I " - вид нумерации - I,II,III,IV…

• Type = "a " - вид нумерации - a,b,c,d…

• Type = " A " - вид нумерации - A,B,C,D…

Start = номер - определяет начальное значение для нумерации списка. Например, Start = 4 при буквенной нумерации означает, что нумерация списка начинается с литеры D.

Value = номер - определяет номер для текущего пункта списка.

• Список с определениями:

<DL> <DT> Пункт 1 <DD> Определение пункта 1 <DD> Другое определение пункта 1

<DT> Пункт 2 <DD> Определение пункта 2 <DT> Пункт 3 <DD> Определение пункта 3 </DL>

2. Таблицы.

Таблицы являются удобным средством форматирования данных на Web- странице. Рамка таблицы прорисовывается броузером автоматически. При создании таблиц используется принцип вложения: внутри элементов таблицы (table) создается ряд элементов, определяющих строки (tr), а внутри элемента строки размещаются элементы для описания каждой ячейки в строке (td,th).

Элементы для создания таблиц:

• <TABLE> </TABLE> - внешний элемент таблицы, позволяющий задавать общие свойства таблицы и отделяет структуру таблицы от остальной части Web-страницы.

Используемые атрибуты:

• align - выравниване таблицы по горизонтали (left, right,center);

• width - ширина таблицы в пикселях или процентах;

• border - ширина боковой грани таблицы (border=0 - рамка отсутствует);

• cellspacing - ширина фронтальной грани таблицы;

• cellpadding - размер пустого пространства, окружающего данные в ячейках;

• bgcolor - цвет фона для всей таблицы;

• background - использование в качестве фона таблицы файла изображения;

• frame - задает вид рамки таблицы :

• void - рамка отсутствует;

• above - верхняя сторона рамки;

• below- нижняя сторона таблицы;

• hsides- части рамки сверху и снизу;

• vsides- части рамки слева и справа;

• lhs - левая часть рамки;

• rhs - правая часть рамки;

• border или box - рамка показана полностью;

• rules - определяет вид сетки внутри таблицы:

• none - сетка отсутствует;

• groups - сетка вокруг групп ячеек;

• rows - горизонтальные линии между строками;

• cols - вертикальные линии между колонками;

• all - обычная сетка.

Стандартные атрибуты: id, class, lang, dir, title, style.

• <CAPTION> </CAPTION> - задание заголовка таблицы.

Используемые атрибуты:

• align - расположение заголовка относительно таблицы:

• top - заголовок над таблицей;

• bottom - заголовок под таблицей;

• left - заголовок над таблицей и выровнен влево;

• right - заголовок над таблицей и выровнен вправо.

Стандартные атрибуты: id, class, lang, dir, title, style.

• <TR> - создает строку таблицы. Элемент не имеет конечного тега, заканчивается там, где начинается следующая строка, т.е. следующий элемент <TR>.

Используемые атрибуты:

• align - выравнивание всех элементов в строке:

• center - по центру;

• left - по левому краю;

• right - по правому краю.

• valign - выравнивание содержимого ячеек по вертикали:

• center - по центру;

• top - по верхнему краю;

• bottom – по нижнему краю.

Стандартные атрибуты: id, class, lang, dir, title, style.

• <TH> - задает заголовок столбца или строки таблицы. Элемент должен располагаться внутри элемента <TR>.

Используемые атрибуты:

• rowspan = n - объединение по строкам n ячеек в одну ячейку;

• colspan = n - объединение по столбцам n ячеек в одну ячейку;

• width = ширина;

• height = высота.

• <TD> - определяет содержимое обычной ячейки. Элемент может не иметь конечного тега, допустимы атрибуты, что и для <TН>.

• Элементы, используемые для группировки строк:

• <THEAD> - элемент блока заголовка;

• <TFOOT> - элемент нижнего блока строк;

• <TBODY> - элемент обычного блока строк.

Каждый элемент может не содержать конечный тег и содержать любое количество строк (элементов TR). При использовании этих элементов

необходимо придерживаться следующих правил:

• В таблице можно указывать по одному элементу THEAD и TFOOT, но несколько элементов TBODY.

• Последовательность элементов следующая: <THEAD>, <TFOOT>, <TBODY>. Но в таблице на экране блок <TBODY> окажется последним.

• Все блоки должны содержать одинаковое количество колонок.

• Элементы, используемые для группировки колонок:

• <COLGROUP> - создает группы колонок с одинаковыми свойствами. Атрибут span = n определяет число колонок в группе.

• <COL> - определяет свойства одной колонки.

Пример создания таблицы.