Побудова списків, таблиць, форм

 

 

Элемент HTML — это основная структурная единица веб-страницы, написанная на языке HTML

<UL>

<LI> первый элемент </LI>

<LI> второй элемент </LI>

<LI> третий элемент </LI>

</UL>

 

создаёт список

первый элемент

второй элемент

третий элемент

 

Если вместо <UL> (Unordered List, что означает ненумерованный список) поставить <OL> (Ordered List, нумерованный список), список получится нумерованным:

первый элемент

второй элемент

третий элемент

 

У этих тегов есть параметры:

«type»="тип"

 

где тип — форма цифр или букв (может быть в ul -

square — квадрат

round — пустой круг

disk — полный круг, по умолчанию,

 

а в ol -

«A» или «а» (латинскими буквами) — Буквенный список, соответственно заглавными или обычными буквами.

«I» или «i» — Римские цифры

«1» — арабские цифры

 

пишется так:

<ol type="i">

 

<li> Первое </li>

 

<li> Второе </li>

 

<li> И т.д. </li>

 

</ol>

 

, параметр «start» (для <ol), определяющий начало нового отсчета, например, не 1, 2, 3, а 14, 15, 16

 

Пишется так:

<ol start="24">

 

<li> Двадцать четыре </li>

 

<li> Двадцать пять </li>

 

<li> И т.д. </li>

 

и, наконец для тега <li параметр «value» - если необходимо перескочить с одной цифры на другую, например, не 1, 2, 3, а 1, 2, 4, 5, и т.д.

<ol>

 

<li> Один </li>

 

<li> Два </li>

 

<li value="22"> Двадцать два </li>

 

<li> Двадцать три </li>

 

.

 

Наконец, третьим, и последним, списком, является список определений:

 

<DL>

<DT> Кошка </DT> <DD> мяукающее домашнее животное </DD>

<DT> Кот </DT> <DD> муж кошки </DD>

<DT> Крокодил </DT> <DD> большой африканский зверь с острыми зубами </DD>

</DL>

 

создаст следующее:

Кошка

мяукающее домашнее животное

Кот

муж кошки

Крокодил

большой африканский зверь с острыми зубами

 

Между прочим, теги <LI>, <DT>, <DD> можно и не закрывать.

Таблицы

TABLE — создание таблицы. Параметры тега:

BORDER — толщина разделительных линий в таблице

CELLSPACING — расстояние между клетками

CAPTION — заголовок таблицы (этот тег необязателен)

TR — строка таблицы

TH — заголовок столбца таблицы (этот тег необязателен)

TD — ячейка таблицы

height — высота таблицы

width — ширина таблицы

 

Так, например,

<TABLE BORDER="1" CELLSPACING="0">

<CAPTION> Улов крокодилов в Мумбе-Юмбе </CAPTION>

<TH> Год </TH>

<TH> Улов </TH>

<TR>

<TD> 1997 </TD>

<TD> 214 </TD>

</TR>

<TR>

<TD> 1998 </TD>

<TD> 216 </TD>

</TR>

<TR>

<TD> 1999 </TD>

<TD> 207 </TD>

</TR>

</TABLE>

 

Создаст таблицу:

Улов крокодилов в Мумбе-ЮмбеГод Улов

1997 214

1998 216

1999 207

 

 

У тега TABLE есть ещё параметр CELLPADDING. Он определяет расстояние в пикселях между рамкой ячейки и её содержимым. Например, если заменить первую строку таблицы на

<TABLE BORDER="1" CELLSPACING="0" CELLPADDING="5">

 

таблица получится такой:

Улов крокодилов в Мумбе-ЮмбеГод Улов

1997 214

1998 216

1999 207

 

 

Другой параметр тегов TABLE, TR, TH, TD — ALIGN. Он определяет выравнивание. Возможные значения — center (по центру), left (по левому краю), right (по правому краю).

 

Параметр ALIGN в TD или TH определяет выравнивание для содержимого внутри данной ячейки, в TR — для содержимого всех ячеек строки, TABLE — для самой таблицы на страничке. Для каждой ячейки берётся выравнивание из TD или TH, если оно не задано — из TR, если и оно не задано — по центру для TH или по левому краю для TD.

 

Например, если заменить первые строки таблицы на

<TABLE BORDER="1" CELLSPACING="0" ALIGN="center">

<CAPTION> Улов крокодилов в Мумбе-Юмбе </CAPTION>

<TH> Год </TH>

<TH> Улов </TH>

<TR>

<TD> 1997 </TD> <TD ALIGN="CENTER"> 214 </TD>

 

таблица получится такой:

Улов крокодилов в Мумбе-ЮмбеГод Улов

1997 214

1998 216

1999 207

 

 

Незакрытые теги TD, TR и TH приводят к некорректному отображению, особенно при работе с вложенными таблицами.

[править]

Формы

 

Создание форм в HTML является довольно сложным делом. Здесь приводятся только названия основных тегов.

FORM — создание формы

INPUT — элемент ввода (может иметь разные функции — от ввода текста до отправки формы)

TEXTAREA — текстовая область (многострочное поле для ввода текста)

SELECT — список (обычно в виде выпадающего меню)

OPTION — пункт списка