Создание списков

ЗАДАНИЕ. Создадим 3 списка: нумерованный, маркированный, определений

1. Откройте 1.htm в Блокноте. Между <body>..</body> всё удалите и вставьте:

 Вставьте тег <OL type="1">, он начинает нумерованный список.

 Вставьте элементы списка, предваряя каждый тегом <LI>.

 Завершите список тегом </OL>.

<html> <head> <title>Пример 7</title> </head> <body> <OL type="1"> <LI>Диван <LI>Кровать <LI>Тумба <LI>Сервант </OL> </body> </html>

 Сохраните документ под именем list.htm. Откройте его в Internet Explorer.

 Посмотрите, как нумерованный список отображается в браузере, какова нумерация, заданная атрибутом type=.

Вообще атрибутом type (тэга <OL>) можно задать такие способы нумерации:

TYPE=1 – арабские цифры; TYPE=A – прописные буквы;

TYPE=a – строчные буквы; TYPE=i – римские цифры.

Атрибутом start= (в тэге <OL>) можно задать номер, с которого начинается нумерация элементов списков.

2. Вернитесь в Блокнот, установите курсор после окончания списка.

 Вставьте тег <UL type="square">, он начинает маркированный список.

 Вставьте элементы списка, предваряя их тегом <LI>. Завершите список тегом </UL>. Получится так:

<UL type="square"> <LI>Диван <LI>Кровать <LI>Тумба <LI>Сервант </UL>

 Сохраните документ под тем же именем.

 Вернитесь в Internet Explorer, щелкните Обновить. Как отобразился маркированный список, его маркировка, заданная атрибутом type= ?

3. Вернитесь в Блокнот и щелкните в конец введенного списка.

 Вставьте тег <DL>, он начинает список определений.

 Вставьте список определяемых слов (терминов), предваряя их тегом <DT>

 Вставьте список соответствующих определений, предваряя их тегом <DD>

Завершите список тегом </DL>. Например, сделайте так:

<html> <head><title> Пример 8 </title> </head> <body> <OL type="1"> <LI>Диван <LI>Кровать <LI>Тумба <LI>Сервант </OL> <UL type="square"> <LI>Диван <LI>Кровать <LI>Тумба <LI>Сервант </UL> <DL> <DT>Диван <DT>Кровать <DT>Тумба <DT>Сервант <DD>На нём отдыхают <DD>На ней спят <DD>На ней сидят <DD>Для посуды </DL> </body> </html>

 Сохраните документ под тем же именем. В Internet Explorer щелкните Обновить. Посмотрите, как выглядит на web-странице список определений.

Создание таблиц

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

Начинают и заканчивают таблицу тэгами <table> … </table>.

Тэг <TR> начинает каждую строку таблицы, внутри ряда содержание каждой ячейки начинает тэг <TD>. Поэтому структура таблицы выглядит так:

<table> <TR>

<TD>Ряд 1, ячейка 1</TD> <TD>Ряд 1, ячейка 2</TD>

</TR>

<TR>

<TD>Ряд 2, ячейка 1</TD> <TD>Ряд 2, ячейка 2</TD>

</TR>

</table>

На экране такая таблица будет выглядеть так:

Ряд 1, ячейка 1	Ряд 1, ячейка 2
Ряд 2, ячейка 1	Ряд 2, ячейка 2

Ячейки 1й строки (ряда) можно оформить как заголовки столбцов: тэг <TH> начинает каждый заголовок столбца таблицы. Например:

<TR> <TH>заголовок столбца 1 <TH>заголовок столбца 2

Заголовок над всей таблицей задаёт парный тэг <caption> с атрибутами, напр.:

<caption align="top">Заголовок таблицы </caption>

Для установки разных параметров всей таблицы к тэгу <table> добавляют:

 атрибут border=n задаёт толщину рамки вокруг таблицы. По умолчанию толщина =0 (текст стоит в табличной форме, но сетка таблицы не видна). Например: при <table border=5> вид таблицы такой:

Ряд 1, ячейка 1	Ряд 1, ячейка 2
Ряд 2, ячейка 1	Ряд 2, ячейка 2

 атрибут width=n задаёт ширину таблицы в пикселях, или в % по отношению к ширине всего экрана. Например: <table border=1 width=400>

 атрибут height=n задаёт высоту таблицы в пикселях,

например: <table height=200 border=1>

 атрибут cellpadding=n задаёт поля внутри ячеек таблицы (т.е. текст будет отступать от края ячейки на заданное количество пикселей). По умолчанию эти поля =2 пикселя. Например: <table cellpadding=10 border=1>

 атрибут cellspacing=n задаёт ширину поля между ячейками (тогда у каждой ячейки появится своя рамка, и между этими рамками будет расстояние, заданное атрибутом cellspacing). По умолчанию ширина границ 2 пикселя.

При создании таблиц применяют атрибуты, задающие параметры и для отдельных рядов таблицы (если они заключены между тэгами <TR>..</TR>) или ее ячеек

 атрибут align выравнивает содержимое ячеек по горизонтали. По умолчанию содержимое выравнивается по левому краю. Пример:

Тип атрибута	Align=Left	Align=Center	Align=Right
Вид в таблице	Текст слева	Текст по центру	Текст справа

 атрибут valign выравнивает содержимое ячеек по вертикали. Атрибут может принимать значения top, middle или bottom. По умолчанию – выравнивание middle. Атрибут используется, если высота ячейки больше, чем занимает ее содержимое. Пример:

Тип атрибута	Valign= Top	Valign= Middle	Valign =Bottom
Вид текста в таблице	Текст вверху ячейки	Текст по середине ячейки	Текст внизу ячейки

 атрибут colspan=n объединяет n ячеек ряда, начиная с данной, в 1 ячейку

A	B	C
D	E (данная ячейка занимает два столбца)
F	G	H

В данном случае описание 2го ряда таблицы содержит описание только 2х ячеек (в остальных рядах по 3 ячейки) и выглядит так:

<TR>

<TD>D</TD>

<TD colspan=2>E (данная ячейка занимает 2 столбца)</TD>

</TR>

 атрибут rowspan=n объединяет n ячеек столбца, начиная с данной, в 1ячейку

A	B	C
D	E (данная ячейка занимает 2 ряда)	F
G		H

Html-код для создания такой таблицы выглядит так:

<table cellpadding=5 border=1>

<TR>

<TD>A</TD> <TD>B</TD> <TD>C</TD>

</TR>

<TR>

<TD>D</TD><TD rowspan=2>E (данная ячейка занимает 2 ряда)</TD>

<TD>F</TD>

</TR>

<TR>

<TD>G</TD> <TD>H</TD>

</TR> </table>

 атрибут width=n – установка ширины ячейки. Ширина задается в пикселях или в % от ширины всей таблицы.

 атрибут height=n – установка высоты ячейки. Задается в пикселях.

ЗАДАНИЕ. Откройте 1.htm в Блокноте. Между <body>..</body> всё удалите и далее создадим таблицу номеров телефонов.

 Для вставки таблицы, причем с заданной толщиной линий (border) и шириной таблицы (width) введите тег: <table border="10" width="100%">

 Для заголовка введите: <caption align="top">Список телефонов</caption>

 Для задания 1й строки таблицы (с двумя заголовками столбцов) так:

<TR bgcolor="yellow" align="center"> <TH>Фамилия <TH>Номер телефона

 Создайте следующие строки таблицы, предваряя каждую тегом <TR> и помещая содержимое каждой ячейки после тега <TD>. Заполните 5-10 строк

 Последнюю строку задайте так:

<TR> <TD align="center" colspan="2"> На 1 этаже здания - бесплатный телефон

 Завершите таблицу тегом </table> Сохраните файл под именем таблица.htm

<html> <head><title> Пример 9 </title></head> <body> <table border=10 width=100%> <caption align="top"> Список телефонов </caption> <TR bgcolor="yellow" align="center"> <TH>Фамилия <TH>Номер телефона <TR> <TD>Иванов <TD>41-23-15 <TR> <TD>Петров <TD>61-20-15 <TR> <TD>Сидоров <TD>70-90-09 <TR> <TD>Кузнецов <TD>61-10-89 <TR> <TD align="center" colspan="2"> На 1этаже здания - бесплатный телефон </table> </body> </html>

 Откройте файл таблица.htm в Internet Explorer. Изучите, как заданные атрибуты влияют на вид таблицы в браузере.

 Измените ширину окна браузера. Как при этом изменяется вид таблицы?