Неупорядоченные списки
На листинге 12 приводится пример вывода текста в виде неупорядоченного списка. Элемент неупорядоченный список создает список, элементы которого помечаются маркером. Начинаться и заканчиваться неупорядоченный список должен тегами <UL> и </UL>.
Листинг 12.
<HTML> <HEAD>
<TITLE> СПИСКИ </TITLE> </HEAD>
<BODY BGCOLOR="#CDCDCD"> <CENTER>
<UL> <LI> МОСКВА </LI> <LI> МИНСК </LI> <LI> ЛОНДОН </LI>
<LI> РИМ </LI> </UL> </BODY> </HTML>
На рис.8 показан результат выполнения данного файла в окне браузера.
Рис. 8.
Каждый элемент неупорядоченного списка должен вводиться тегом <LI> . Закрывающий тег </LI> не является обязательным.
Вложенные и упорядоченные списки
Вложенные списки составляются так же, как и простой список, рассмотренный нами ранее, просто вложенные списки содержатся внутри другого списка. Каждый новый вложенный список сдвигается вправо относительно того, в который он вложен, и у него меняется маркер. Далее приведен пример вложенного списка (листинг 13), а результат отображения данного файла в окне браузера показан на рис.9.
Листинг 13.
<HTML> <HEAD>
<TITLE> СПИСКИ пример2 </TITLE>
</HEAD><BODY BGCOLOR="#CDCDCD">
<UL> <LI> МОСКВА </LI>
<UL> <LI> Шатура </LI> <LI> Красногорск </LI>
<LI> Химки </LI> </UL>
<LI> НИЖНИЙ НОВГОРОД </LI> <UL>
<LI> Кстово </LI> <LI> Бор </LI> </UL> </UL>
</BODY> </HTML>
Рис. 9.
Упорядоченные списки начинают и заканчиваются с помощью тегов <OL> и </OL>. Рассмотрим следующий файл на данную тему (листинг 14). Здесь значение параметра TYPE определяет какая (в виде букв или цифры) нумерация элементов списка будет производиться. Например, в данном примере задается автоматическая нумерация сначала римскими, а затем арабскими цифрами. Если бы нам понадобилось задать нумерацию в виде букв, то тогда мы бы определили упорядоченный список следующим образом:
<OL TYPE="a">
Таким образом, мы можем создавать вложенные упорядоченные списки. Пример приведен на рис.10.
Листинг 14.
<HTML> <HEAD>
<TITLE> СПИСКИ пример 3 </TITLE> </HEAD>
<BODY BGCOLOR="#CDCDCD">
<OL TYPE="I">
<LI> МОСКВА </LI> <OL TYPE="1">
<LI> Шатура </LI> <LI> Красногорск </LI>
<LI> Химки </LI> </OL>
<LI> НИЖНИЙ НОВГОРОД </LI> <OL TYPE="1">
<LI> Кстово </LI> <LI> Бор </LI> </OL> </OL>
</BODY> </HTML>
Рис.10.
Основы таблиц html
Другой способ форматирования – использование таблиц и на листинге 15 приведен пример файла, создающего простую таблицу.
Листинг 15.
<HTML> <HEAD>
<TITLE> Таблица </TITLE> </HEAD>
<BODY BGCOLOR="#CDCDCD">
<TABLE BORDER="3" ALIGN ="center" WIDTH ="70%">
<CAPTION> Пример простой таблицы</CAPTION>
<TR> <TH> Заголовок 1 </TH> <TH> Заголовок 2 </TH> </TR>
<TR> <TD> 1 ELEMENT </TD> <TD> 2 ELEMENT </TD> </TR>
<TR> <TD> 3 ELEMENT </TD> <TD> 4 ELEMENT </TD> </TR>
<TR> <TD> 5 ELEMENT </TD> <TD> 6 ELEMENT </TD> </TR>
<TR> <TD>7 ELEMENT </TD> <TD> 8 ELEMENT </TD> </TR>
</TABLE> </BODY> </HTML>
Результат отображения данного файла в окне браузера показан на рис.11.
Рис. 11.
Все теги и содержание таблицы должны размещаться между тегами <TABLE> и </TABLE >. Первый из этих тегов имеет несколько атрибутов. В атрибуте BORDER можно задать толщину рамки в пикселях. Если Вы хотите сделать рамку невидимой, то следует указать значение BORDER=”0”. Горизонтальное выравнивание (таблицы в целом) определяется атрибутом ALIGN. Атрибут WIDTH задает ширину таблицы. Вы можете этот параметр задавать количеством пикселей и в процентах относительно ширины окна браузера. В рассматриваемом случае ширина таблицы задается - 70 процентов от ширины окна браузера. В строке <CAPTION> Пример простой таблицы</CAPTION> задается заголовок таблицы. Этот текст выводится непосредственно над таблицей. Элемент строки таблицы <TR> выполняет форматирование ячеек отдельной строки таблицы. В строку попадают все ячейки, перечисленные между тегами <TR> и </TR>. Самым мелким объектом таблицы является ячейка данных. Существуют только два типа ячеек: размещаемые в разделе заголовка <TH>…</TH> и в разделе тела таблицы <TD>…</TD>. Отличие этих элементов в том, что для заголовка автоматически выполняется выделение содержимого ячеек жирным шрифтом.
Рассмотрим теперь каким образом можно создать следующую таблицу (рис.12).
Рис.12.
Для этого следует создать следующий HTML-файл.
Листинг 16.
<HTML> <HEAD> <TITLE> Таблица </TITLE> </HEAD>
<BODY BGCOLOR="#CDCDCD">
<TABLE BORDER="3" ALIGN ="center" WIDTH ="70%">
<CAPTION> Пример таблицы c объединением ячеек</CAPTION>
<TR > <TH colspan="3" ALIGN ="center"> Заголовок </TH> </TR>
<TR ><TD align="center"> 1 ELEMENT </TD>
<TD align="center"> 2 ELEMENT </TD> <TD> 3 ELEMENT </TD> </TR>
<TR><TD colspan="2" align="center"> 5 ELEMENT </TD> <TD align="center"> 7 ELEMENT </TD> </TR></TABLE> </BODY> </HTML>
Поясним данный фрагмент. В таблице есть возможность увеличить размер некоторых ячеек по сравнению с остальными. Для этого нужно в открывающем ячейку теге указать атрибут COLSPAN. Этому атрибуту присваивается числовое значение определяющее число объединяемых ячеек.