4.3. Списки
В HTML используются маркированные и нумерованные списки. Каждый список размечается с помощью тегов двух типов: первый определяет параметры всего списка, второй – параметры каждого элемента.
Маркированные списки описываются дескриптором <ul>. Его атрибут type определяет вид маркера – квадратики (type=square), кружки (disc) и "пустые" окружности (circle). По умолчанию type=disc.
Нумерованные списки описываются дескриптором <ol>. Этот дескриптор имеет два параметра: type – определяющий способ нумерации, и start – определяющий, с какой буквы или цифры она будет начинаться. Параметр type принимает значения 1, I, i, А или а, что соответствует нумерации арабскими, большими и малыми римскими цифрами, а также большими или малыми латинскими буквами.
Каждый элемент нумерованных или маркированных списков размечается затем с помощью дескрипторов <li>. Этот тег имеет те же атрибуты, что и тег всего списка. Параметры дескриптора <li> имеют более высокий приоритет, чем параметры всего списка и позволяют изменить порядок нумерации или вид маркера.
Для организации многоуровневых списков со смешанной нумерацией используются вложенные дескрипторы <ul> и <ol>: вместо очередного блока <li>...</li> ставится соответствующий вложенный список.
<!Doctype html>
<!--пример pr12: Ненумерованные и нумерованные списки-->
<html><head>
<title>Использование списков </title>
</head>
<body>
<h3 align="center">Домашняя страница </h3>
<h4>Маркированный (ненумерованный) список - мои интересы:</h4>
<ul>
<b> Занятия в свободное время:</b>
<li> Компьютеры</li>
<li> Чтение книг</li>
<li> Бассейн</li>
<li> Отдых на природе</li>
</ul> <hr>
<h4> Нумерованный (упорядоченный) список:</h4>
<ol type="1">
<b>страны, которые я посетил:</b>
<li> Польша</li>
<li> Чехия</li>
<li> Германия</li>
</ol> <hr>
<ol type="a">
<b> Страны, которые я хочу посетить:</b>
<li> Америка</li>
<li> Китай</li>
<li> Франция</li>
</ol>
</body></html>
Для задания заголовка списка используется тег <lh>.
Кроме маркированных и нумерованных списков, в HTML предусмотрена конструкция, образующая список определений. Каждый элемент такого списка состоит из термина и его определения. Термины и определения находятся в отдельных абзацах, причем последние выводятся с увеличенным горизонтальным отступом относительно остального текста. Разметка списка определений осуществляется с помощью трех дескрипторов – <dl>, <dt> и <dd>. Дескриптор <dl> описывает весь список в целом, <dt> – определяемый термин, a <dd> – определение.
<!--пример: списки определений-->
<html>
<head><title>использование списков</title></head>
<body>
<h2 align=”center”>Толковый словарь</h2>
<dl>
<lh><big><b> cписок терминов</b></big></lh>
<dt><b>"Anchor"</b></dt>
<dd><i>то, что образует гипертекстовую ссылку</i></dd>
<dt><b>"Lamer"</b></dt>
<dd><i>неквалифицированный юзер</i></dd>
<dt><b>"Cookies "</b></dt>
<dd><i>технология, позволяющая сохранять информацию о посетителе </i></dd>
</dl>
</body></html>
Таблицы. Теги <table> </table> служат контейнером для элементов таблицы. Таблица состоит из строк, которые задаются с помощью тегов <tr> и являются контейнерами для ячеек-столбцов <td>. Для слияния горизонтальных и вертикальных смежных ячеек применяются параметры тега <td> – colspan и rowspan.
Тег <th> определяет заголовок для каждого столбца.
Атрибуты тега <table> : align – выравнивание таблицы; background – фоновый рисунок в таблице; bgcolor – цвет фона таблицы; border – толщина рамки в пикселах; bordercolor – цвет рамки; cellpadding – отступ от рамки до содержимого ячейки; cellspacing – расстояние между ячейками; cols – число колонок в таблице; height – высота, width – ширина таблицы.
Таблицы с невидимой границей долгое время использовались для табличной верстки веб-страниц. Им на смену пришел более современный способ верстки с помощью слоев и блоков. Пример:
<!Doctype html>
<!--пример pr13: Таблицы-->
<html> <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Тег TABLE</title>
</head>
<body>
<table width="100%" border="1" cellspacing="0" cellpadding="4">
<tr align="center" bgcolor="#999999">
<td colspan="3" style="font-size: 160%; font-family: sans-serif">
Фирма Рога и Копытца</td> </tr>
<tr>
<td><img src="img/logo.gif" alt="ris1" width="120" height="70"
border="1" style="background: #CC9"></td>
<td align="center"><img src="img/fract.gif" alt="ris2" width="100"
height="70" style="background: #CF9"></td>
<td> <a href="pr1.htm">One</a><br>
<a href="pr2.htm">Two</a><br>
<a href="pr3.htm">Three</a>
</td>
</tr>
<tr> <td colspan="3">
<table width="100%" border="1" cellpadding="0" cellspacing="0"
bgcolor="#999999">
<tr><td align="center">Фирма веников не вяжет - фирма делает гробы </td></tr>
</table>
</td>
</tr>
</table>
</body></html>
Для задания отступов текста от границ ячеек и расстояния между ячейками используются два атрибута тега <table> – cellpadding и cellspacing. Отступы задаются в пикселях.
При создании таблицы использовались устаревшие атрибуты типа align внутри тегов <td>,<tr>, а не стили CSS. Атрибут align в теге <table> означает выравнивание таблицы относительно окна броузера, а в тегах <tr> и <td> – выравнивание текста относительно ячейки. Внутри <TABLE> допустимо также использовать элементы: <COL>, <COLGROUP>, <TBODY>, <TFOOT>, <THEAD>.
Для определения заголовка и "шапки" таблицы используются дескрипторы <caption> и <th>. Первый из них помещается внутри конструкции <table>... </table> и содержит заголовок всей таблицы. Второй применяется вместо дескриптора <td> для ячеек, которые нужно выделить.
<!--пример: Простая таблица-->
<html>
<head><title> Использование таблиц</title></head>
<body>
<table border=”1”>
<caption align=”top”> Лучшие нападающие года</caption>
<tr>
<th>Имя</th>
<th>Команда</th>
<th>Очки</th>
</tr>
<tr>
<td>small</td>
<td> Барселона</td>
<td>5</td>
</tr>
<tr>
<td>superman</td>
<td>dinamo</td>
<td>10</td>
</tr>
<tr>
<td>bigman</td>
<td>батэ</td>
<td>7</td>
</tr>
</table>
</body></html>
Для частичного отображения рамок используются атрибуты frame и rules. Для слияния горизонтальных и вертикальных смежных ячеек применяются параметры тега <td> – colspan и rowspan.
<!Doctype html>
<!--пример pr15: Таблицы-->
<html>
<head><title>Таблицы </title></head>
<body >
<br> <hr> <br>
<table border=”4” cellspacing=”3”>
<caption><b>Cтандартная таблица</b> </caption>
<tr>
<th bgcolor="yellow">Заголовок 1</th>
<th bgcolor="yellow">Заголовок 2</th>
</tr>
<tr> <td> Ячейка 1</td>
<td> Ячейка 2</td>
</tr>
<tr> <td> Ячейка 3</td>
<td> Ячейка 4</td>
</tr></table>
<br><hr><br>
<table border="4" cellspacing=”3” >
<caption>Таблица с объединенными ячейками</caption>
<tr> <td height="35" bgcolor="#FFCC33" colspan="2"> 1x1 </td>
<td width="50" bgcolor="#336699"> 1x2</td> </tr>
<tr> <td height="35" width="50" bgcolor="#336699"> 2x1 </td>
<td width="50" bgcolor="#FFCC33"> 2x2 </td>
<td width="50" bgcolor="#336699">2x3</td>
</tr> </table>
<br><hr><br>
<table>
<tr> <td height="35" bgcolor="#FFCC33"> 1x1 </td>
<td width="50" bgcolor="#336699"> 1x2</td>
<td width="50" bgcolor="#336699" rowspan="2"> 1x3</td>
</tr>
<tr> <td height="35" width="50" bgcolor="#336699">2x1</td>
<td width="50" bgcolor="#FFCC33"> 2x2</td> </tr>
</table>
<body></html>
Фреймы и <iframe>. Фреймы – средство HTML, позволяющее разделить пространство окна браузера на самостоятельные информационные зоны. Фреймовая система является устаревшей и в HTML5 запрещена.
Ранее фреймовая система описывается в HTML-коде с помощью дескриптора <frameset>. В нем помещаются дескрипторы <frame>, описывающие параметры отдельных фреймов. HTML-коды содержимого этих фреймов находятся в отдельных файлах, имена которых указаны в дескрипторах <frame> с помощью параметров src. Деление окна броузера на части осуществляется с помощью параметров дескриптора <frameset>. Для деления по вертикали используется параметр cols, а по горизонтали – параметр rows.
Для создания внутри окна области с собственной рамкой и самостоятельной прокруткой используется дескриптор <iframe>. Он имеет те же параметры, что и <frame>, но не нуждается в специальной фреймовой структуре, описываемой дескриптором <frameset>, и может располагаться внутри HTML-кода. Дескриптор <iframe> разрешен в HTML5