Типы нумерации упорядоченных списков в html

Тип	Стиль
1	Стандартный способ нумерации с помощью арабских цифр
a	Строчные буквы английского алфавита
A	Прописные буквы английского алфавита
i	Строчные римские цифры
I	Прописные римские цифры

Код неупорядоченного списка очень похож на код нумерованного списка:

<UL TYPE=тип>

<LI>Первый элемент списка</LI>

<LI>Второй элемент списка</LI>

…

<LI>Последний элемент списка</LI>

</UL>

Здесь параметр тип может принимать одно из значений, приведенных в табл. 7, например: <UL TYPE=”square”>

Таблица 7

Типы маркеров для маркированных списков

Тип	Рекомендуемый внешний вид (зависит от браузера)
disc	Заполненный кружок
square	Заполненный квадратик
circle	Незаполненный кружок

В списках определений каждому термину соответствует абзац определения, оформленный с отступом. Такие списки могут использоваться, например, в каталогах с описанием товаров. Список определений содержится в контейнере <DL> </DL>, где DL – definition list. Элементы списка определений создаются с использованием тегов <DT> и <DD>, которые отмечают термин (definition term) и его определение (definition). Например:

<DL>

<DT>Первый термин</DT>

<DD>Первое определение</DD>

<DT>Второй термин</DT>

<DD>Второе определение</DD>

</DL>

Web-графика

Для вставки графического изображения используется одиночный тег <IMG>, имеющий следующий синтаксис:

<IMG SRC=URL_изображения HEIGHT=”число” WIDTH=”число”>,

где SRC – источник (source) – место, где хранится изображение, HEIGHT и WIDTH – размеры изображения в пикселах (соответственно высота и ширина). Например:

<IMG SRC=”image/picture.jpg” WIDTH=”50” HEIGHT=”50”<BR>

<IMG SRC=”http://www.spbstu.ru/mmf/logo500.gif” WIDTH=”120” HEIGHT=”120”

Здесь picture.jpg – картинка размером 50 на 50 пикселов, размещенная в каталоге image на том же сервере, что и исходная страница; logo500.gif – картинка размером 120 на 120 пикселов, размещенная на другом сервере по адресу: http://www.spbstu.ru/mmf/.

Для выравнивания текста относительно изображений используется атрибут ALIGN тега IMG. Некоторые его значения приведены в табл. 8.

Таблица 8

Стандартные значения атрибута align тега img

Значение	Результат
TOP	Нижний край текста выравнивается по верхнему краю изображения
MIDDLE	Нижний край текста выравнивается по центру изображения
BOTTOM	Нижний край текста выравнивается по нижнему краю изображения
LEFT	Изображение располагается слева от текста
RIGHT	Изображение располагается справа от текста

Например:

<IMG SRC=”image/picture.jpg” WIDTH=”50” HEIGHT=”50” ALIGN=”LEFT”>

Для задания пустого пространства (полей) вокруг изображения используются атрибуты HSPACE и VSPACE, например:

<IMG SRC=”image/picture.jpg” WIDTH=”50” HEIGHT=”50” ALIGN= ”LEFT” HSPACE=”5” VSPACE=”5”>

Изображения можно использовать для создания ссылок. В этом случае тег <IMG> помещается в контейнер <A HREF=”URL”></A>. Например:

<A HREF=”page2.html”><IMG SRC=”image/picture.jpg” WIDTH=”50” HEIGHT=”50” </A>

В этом примере рисунок picture.jpg является изображением-ссылкой на страницу с именем page2.html.

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

<IMG SRC=”logo.gif” ALT=”Logotype”>

Таблицы

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

Код таблицы в HTML содержится в контейнере <TABLE> </TABLE>. Между ними последовательно описывается каждая строка таблицы, заключаемая в теги <TR> и </TR>, а уже внутри каждой строки описываются ячейки столбцов, причем столбцы всегда должны находиться в обрамлении тегов <TD> и </TD>.

Заголовки столбцов и строк в таблицах размещаются при помощи тегов <TH> и </TH>. Название таблицы заключается между тегами <CAPTION> и </CAPTION>. По умолчанию заголовок располагается над таблицей. С помощью параметра ALIGN и атрибутов BOTTOM, TOP, LEFT и RIGHT можно задать другое положение заголовка таблицы.

Иногда одну ячейку надо растянуть на несколько столбцов или несколько строк. Например: <TD COLSPAN=3> - ячейка растягивается на три столбца; <TD ROWSPAN=2> - ячейка растягивается на две строки.

Рассмотрим пример.

<TABLE BORDER=3 WIDTH=”70%” ALIGN=CENTER>

<CAPTION ALIGN=BOTTOM>Подпись к таблице</CAPTION>

<TR>

<TH ALIGN=CENTER ROWSPAN=2>Фамилия, и., о.</TH>

<TH ALIGN=CENTER COLSPAN=2>Оценки</TH>

</TR>

<TR>

<TH ALIGN=CENTER>Физика</TH>

<TH ALIGN=CENTER>Химия</TH>

</TR>

<TR>

<TD ALIGN=LEFT>Иванов А.И.</TD>

<TD ALIGN=RIGHT>5</TD>

<TD ALIGN=RIGHT>5</TD>

</TR>

<TR>

<TD ALIGN=LEFT>Петров С.Б.</TD>

<TD ALIGN= RIGHT>4</TD>

<TD ALIGN= RIGHT>5</TD>

</TR>

<TR>

<TD ALIGN=LEFT>Сидоров В.В.</TD>

<TD ALIGN=RIGHT>3</TD>

<TD ALIGN= RIGHT>4</TD>

</TR>

</TABLE>

В этом листинге в первой строке BORDER=3 назначает толщину границы таблицы в 3 пиксела; WIDTH=”70%” определяет ширину таблицы в 70% от ширины экрана; ALIGN=CENTER центрирует таблицу. Между тегами <TH> и </TH> размещают заголовки строк и столбцов. Таблица, созданная в соответствии с приведенным листингом, приведена на рис. 7.

Рис. 7. Окно браузера с результатами просмотра файла с таблицей

У тегов <TABLE>, <TR>, <TD>, <TH> есть общие параметры. Параметр BORDERCOLOR задает цвет границы объекта; параметры BORDERCOLORDARK и BORDERCOLORLIGHT задают темный и светлый цвета для трехмерного изображения рамки вокруг объекта. В параметре BACKGROUND указывается имя графического файла, который будет служить фоном для таблицы. Если файл не используется, то параметром BGCOLOR можно задать цвет фона объекта.

Фреймы

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

При создании документа с фреймовой структурой в главном HTML-файле нет нужды употреблять тег <BODY>. Вместо него используются теги <FRAMESET> и </FRAMESET>. Между ними вставляются теги <FRAME>, которые определяют содержимое каждого отдельного фрейма.

Положение фреймов указывается в теге <FRAMESET> с помощью параметров. Если фреймы расположены в виде таблицы, то используются параметры COLS и ROWS, задающие размеры колонок и строк. Ширина и высота каждого фрейма задается либо в пикселах, либо в процентах от размера окна браузера. Например: <FRAMESET ROWS=”110,*”>. Здесь установлены фреймы в виде строк, высота верхнего фрейма – 110 пикселов, а нижнего – все свободное место окна браузера. В случае <FRAMESET COLS=”20%,60%,*”> фреймы расположены вертикально в виде трех колонок, ширина левого фрейма – 20% от окна браузера, ширина среднего фрейма – 60%, ширина правого фрейма – оставшееся пространство окна браузера.

В теге <FRAMESET> используются параметры FRAMEBORDER и FRAMESPACING. Если значение первого из них равно единице, то каждый фрейм будет иметь трехмерную рамку, а если нулю, то рамки не будет. Второй параметр указывает расстояние между соседними фреймами в пикселах.

Параметр FRAMEBORDER применяется и в теге <FRAME>. Делается это в случае, когда наличие рамки необходимо указывать для отдельных фреймов. В теге <FRAME> могут быть использованы параметры MARGINHEIGHT и MARGINWIDTH для задания отступа по вертикали и горизонтали от границ фрейма в пикселах.

Еще один параметр тега <FRAME> - NORESIZE. Если он указан при определении фрейма, то пользователь не сможет изменять границы фрейма. Параметр SCROLLING задает, нужно или нет создавать полосы прокрутки для просмотра содержимого фрейма. Значение YES заставляет отображать полосы прокрутки в каждом случае, значение NO не позволяет их отображать, а значение AUTO создает их только в случае необходимости.

Наконец, параметр SRC тега <FRAME> указывает на HTML-файл с содержимым данного фрейма. Например:

<FRAMESET COLS=”20%,*” FRAMEBORDER=1>

<FRAME SCROLLING=AUTO SRC=”1.html”>

<FRAME SCROLLING=AUTO SRC=”2.html”>

</FRAMESET>

Здесь заданы два фрейма шириной 20% и 80% от ширины окна браузера. В левом окне будет помещен файл 1.html, в правом – файл 2.html.

Таблицы стилей

С помощью таблиц стилей (style sheets) можно контролировать внешний вид Web-страниц в гораздо большей степени, чем с помощью «простого» HTML. При использовании таблиц стилей функциональные возможности Web-страниц будут доступны всем пользователям без исключения. Перед пользователями, имеющими современные компьютеры и браузеры, Web-страницы предстанут в оригинальном виде. Все остальные пользователи увидят страницы в упрощенном варианте; тем не менее, они в полном объеме получат ту же информацию, что и пользователи современных браузеров.

Для того, чтобы все страницы Web-сайта выглядели единообразно, создают отдельный файл с таблицами стилей, и с ним связывают все Web-страницы. Расширение такого файла - .css (css – cascading style sheets). В результате появляется возможность для контроля внешнего вида Web-страниц, а также значительной экономии времени.

Структура файла с описанием стилей достаточно проста. Указывается тег, обозначающий способ форматирования текста, а за ним в фигурных скобках – переопределение стиля для этого тега. Ниже приводится текст файла style1.css:

.back {background: yellow}

.bigletter {font-family: Garamond, "Times New Roman"; font-size: 130pt; font-style: italic; color: #666633}

.maintext {font-family: "Times New Roman", Times, serif; font-size: 14pt; color: #990000; text-align: center; font-weight: bold }

a.changecolor {color:black; text-decoration: none}

a.changecolor:Hover {color:blue; text-decoration: underline}

В этом файле первая строка задает желтый фон элемента (background: yellow), вторая строка определяет, что текст класса bigletter пишется шрифтом Garamond или Times New Roman, размер шрифта – 130 пунктов, начертание – курсив (italic), цвет #666633, третья строка – что текст класса maintext пишется шрифтом Times New Roman, Times или serif, размер шрифта – 14 пунктов, цвет #990000, текст центрируется (text-align:center). Четвертая и пятая строки определяют, что ссылка <a> класса changecolor имеет черный цвет и не подчеркнута (text-decoration:none); при подводе к ней курсора мыши она меняет цвет на синий и становится подчеркнутой (text-decoration:underline). Этот эффект поддерживается только в Internet Explorer.

Для того, чтобы использовать стиль из файла style1.css, надо в HTML-файле к соответствующему тегу добавить параметр CLASS. Например,

<BODY CLASS=”BACK”>, <H1 CLASS=”BIGLETTER”>, <P CLASS=”MAINTEXT”>.

Для того, чтобы HTML-документ связать с файлом по имени style1.css, содержащим таблицы стилей, надо добавить в него внутри контейнера <HEAD></HEAD> тег <LINK REL=STYLESHEET HREF=”style1.css” TYPE = ”text/css”>. Например:

<!--Этот пример иллюстрирует работу таблицы стилей-->

<html>

<head>

<title>style</title>

<link href=" style1.css" rel=stylesheet>

</head>

<body class="back">

<div class="bigletter">Это bigletter </div>

<p class="maintext">Это maintext</p>

<p class="maintext">Эта <a class = "changecolor" href = "http:// www.spbstu.ru/mmf/index.html"> ссылка</a> меняет цвет на синий только в Internet Explorer</p>

</body>

</html>