Побудова списків, таблиць, форм
Элемент 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 — пункт списка