ИНФ

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

Для наглядного представления информации на Web-страницах часто используются списки. Списки могут быть нумерованными и ненумерованными. Создадим новую страницу нашего сайта, на которой вставим ненумерованный список.

Создайте структуру Web-документа, напечатав основные тэги:

<html>

<head>

</head>

<body>

</body>

</html>

В качестве заголовка документа в тэге <title></title> введите: Чем мы занимаемся?:

<title>Чем мы занимаемся?</title>

Такой же заголовок для списка введите в теле документа между тэгами <body> и </body>, использовав для его отображения тэги <h2></h2> с атрибутом align=center, выравнивающим заголовок по центру страницы:

<h2 align=center>Чем мы занимаемся?</h2>

Самостоятельно подберите цвет фона страницы и цвет текста, указав соответствующие значения для атрибутов bgcolor и text в открывающемся тэге <body>, например, так:

<body bgcolor=aqua text=navy>

Помните, однако, что цвет текста должен быть таким, чтобы текст хорошо читался на выбранном фоне. Если атрибуты цвета не указывать, то по умолчанию текст будет отображаться черным цветом на белом фоне.

Теперь вставим на страницу ненумерованный список с информацией о сфере деятельности нашего лицея. Ненумерованные списки создаются с помощью пары тэгов <ul></ul>, которые ограничивают список.

Между ними располагается столько элементов, начинающихся с тэга <li>, сколько элементов в списке.

Вставьте пустую строку под строкой с кодом <h2 align=center>Чем мы занимаемся?</h2> и введите в теле документа следующий код:

<ul>

<li>Изучением фундаментальных курсов физико-математических дисциплин.

<li>Изучением курсов дисциплин, составляющих основу современной теоретической и прикладной экономики.

<li>Изучением цикла гуманитарных дисциплин.

<li>Изучением сценического искусства.

</ul>

Обратите внимание: тэг <li> может использоваться как одиночный, т.е. без парного, закрывающего тэга </li>.

Полный HTML-код документа должен иметь следующий вид:

<html>

<head>

<title>Чем мы занимаемся?</title>

</head>

<h2 align=center>Чем мы занимаемся?</h2>

<ul>

<li>Изучением фундаментальных курсов физико-математических дисциплин.

<li>Изучение курсов дисциплин, составляющих основу современной теоретической и прикладной экономики.

<li>Изучением цикла гуманитарных дисциплин.

<li>Изучением сценического искусства.

</ul>

</body>

</html>

После сохранения Вы увидите, что каждый элемент ненумерованного списка выделяется специальным маркером.

В нумерованном списке каждый элемент будет отмечаться его порядковым номером. Для создания нумерованных списков используются тэги <оl></оl>, между которыми помещаются элементы <li>.

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

Создадим в новом файле таблицу из одной колонки, в ячейках которой, как в меню, представим ссылки на имеющиеся и другие, еще не созданные страницы сайта. Ведь сайт может содержать десятки страниц. Поэтому очень важно иметь возможность быстро выбирать нужную страницу из меню. Это меню мы затем поместим у левого края экрана так, чтобы оно постоянно оставалось в поле зрения пользователя.

Введите основные тэги, создающие структуру документа. В заголовке документа укажите Меню. Цвет фона и текста документа самостоятельно выберите такими, чтобы ссылки были хорошо видны:

<html>

<head>

</head>

</body>

</html>

Каждая таблица начинается тэгом <table> и заканчивается тэгом </table>. Строки таблицы образуются парой тэгов <tr></tr>, между которыми располагаются пары тэгов <td></td>. Каждая пара этих тэгов образует один столбец. Между открывающим <td> и закрывающим </td> тэгами помещается текст или любое другое содержимое ячейки.

Учитывая сказанное, код HTML, описывающий нашу таблицу, состоящую из одного столбца и содержащую пункты меню с названиями страниц сайта, должен иметь следующий вид:

<table>

<tr><td>Главная страница</td></tr>

<tr><td>Чем мы занимаемся?</td></tr>

<tr><td>О нашем лицее</td></tr>

<tr><td>Новости</td></tr>

<tr><td>Учебный процесс</td></tr>

<tr><td>Связь с лицеем</td></tr>

</table>

Вставьте пустую строку между открывающим <body> и закрывающим </body> тэгами и, начиная с нее, введите указанный код.

Созданная нами таблица располагается у левого края экрана. Это положение можно изменить, использовав в открывающем тэге <table> атрибут align=center для выравнивания таблицы по центру или атрибут align=right - для выравнивания по правому краю окна браузера. Пункты меню расположены один под другим, а края таблицы и ячеек не видны. Это связано с тем, что по умолчанию рамка и ячейки таблицы не показываются. Чтобы включить их отображение, следует использовать в тэге <table> атрибут border, указав в качестве его значения толщину рамки в пикселах.

Добавьте в тэг <table> атрибут border=1, чтобы показать рамку и ячейки таблицы толщиной 1 пиксел:

Размер таблицы обычно устанавливается браузером автоматически так, чтобы отображалось все ее содержимое. Однако вы можете установить фиксированную ширину таблицы в пикселах с помощью атрибута width.

Установите для таблицы ширину 140 пикселов, добавив атрибут width=140 в открывающий тэг <table> так, чтобы он принял вид:

В окне браузера ширина таблицы уменьшится так, что в большинстве ячеек текст будет отображаться в двух строках.

При использовании для формирования столбцов таблицы тэгов <td></td> данные в ячейках представляются шрифтом нормального текста и по умолчанию выравниваются по левому краю ячеек. Если же требуется выделить данные в ячейках, например, заголовки столбцов или строк таблицы, то вместо тэгов <td></td> удобно использовать тэги <th></th>. Текст в элементах <th></th> обычно выделяется полужирным начертанием и выравнивается по центру ячеек.

Наше меню будет выглядеть лучше, если его пункты будут центрированы в ячейках и выделены полужирным шрифтом. Поэтому заменим в HTML-коде элементы <td></td> элементами <th></th>.

В тэгах <td> и <th> вы можете использовать следующие атрибуты:

align - для горизонтального выравнивания содержимого ячеек по центру (center), левому (left) и правому (right) краям ячейки;

width - для указания ширины ячейки в пикселах;

height - для определения высоты ячейки;

valign - для вертикального выравнивания данных в ячейке по верхнему (top) и нижнему (bottom) краям и середине (middle) ячейки; по умолчанию valign=middle.

Вы можете также изменить цвет любой ячейки, столбца, строки или всей таблицы, вставив атрибут bgcolor соответственно в тэг <th>, <tr> или <table>

Содержание