HTML
HTMLГлава 4. Списки.Содержание:
Язык HTML обладает возможностями предоставления информации в виде списков. Список служит для добавления структуры в документ. Он позволяет в более удобном и понятном виде представить информацию, такую как, например: список покупок, пошаговое описание каких-либо действий, толковый словарь и т.п. В HTML различают:
В любом списке должен присутствовать хотя бы один элемент списка, иначе он будет проигнорирован. 4.1. Неупорядоченные и упорядоченные списки и их элементы.
Неупорядоченные списки создаются элементом 4.2. Неупорядоченные списки. Элемент <ul>.
Задание начального и конечного тегов элемента
Список, заключенный в элементе
Каждый элемент списка (это относится и к упорядоченному списку) представляет собой HTML-элемент
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title> Пример задания неупорядоченного списка </title> </head> <body> <p> Николай Степанович Гумилев — один из величайших поэтов "Серебрянного века". Им было создано новое поэтическое направление — акмеизм. </p> <h4>Стихотворения из цикла "Романтические цветы"</h4> <ul> <li>Мечты</li> <li>Перчатка</li> <li>Заклинание</li> <li>Озеро Чад</li> <li>Сады души</li> <li>Основатели</li> </ul> <h4>Стихотворения из цикла "Жемчуга"</h4> <ul> <li>Потомки Каина</li> <li>Камень</li> <li>Старый конквистадор</li> <li>Варвары</li> </ul> </body> </html>
Для элемента Допускается использование вложенных неупорядоченных списков (рис. ). При отображении вложенных неупорядоченных списков браузеры по умолчанию используют различную маркировку списков разного уровня. Пример:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>
Пример использования вложенных списков
</title>
<style>
.city { color: darkred }
.club { color: darkgreen }
.player {color: darkblue }
</style>
</head>
<body>
<h3 align="center">
Российские футбольные клубы и их лучшие игроки
</h2>
<ul class="city">
<li>
САНКТ-ПЕТЕРБУРГ
<ul class="club">
<li>
"Зенит"
<ul class="player">
<li>А. Панов</li>
<li>А. Куртиян</li>
<li>Р. Березовский</li>
<li>С. Оганисян</li>
</ul>
</li>
</ul>
</li>
<li>
МОСКВА
<ul class="club">
<li>
"Спартак"
<ul class="player">
<li>Е. Титов</li>
<li>В. Ананко</li>
<li>Робсон</li>
<li>А. Тихонов</li>
</ul>
</li>
<li>
"Локомотив"
<ul class="player">
<li>А. Чугайнов</li>
<li>З. Джанашия</li>
<li>А. Булыкин</li>
<li>Е. Харлачев</li>
</ul>
</li>
<li>
"ЦСКА"
<ul class="player">
<li>B.Кулик</li>
<li>В.Хомуха</li>
<li>С.Семак</li>
<li>E.Варламов</li>
</ul>
</li>
</ul>
</li>
</ul>
</body>
</html>
С помощью атрибута <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title> Пример использования атрибута type </title> </head> <body> <ul type="circle"> <li>Mapкep — незакрашенный кружок</li> <li>Маркер — незакрашенный кружок</li> <li>Маркер — незакрашенный кружок</li> </ul> <ul type="square"> <li>Маркер — закрашенный квадратик</li> <li>Маркер — закрашенный квадратик</li> <li>Маркер — закрашенный квадратик</li> </ul> <ul> <li>Маркер — закрашенный кружок</li> <li>Маркер — закрашенный кружок</li> <li>Маркер — закрашенный кружок</li> </ul> </body> </html>
Для повышения привлекательности документа можно создавать списки с нестандартными маркерами,
например: звездочками, шариками и т.п. Для этого вместо элемента <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title> Пример списка с нестандартными маркерами </title> </head> <body> <h2 align="center">Солнечная система</h2> <strong>Солнечная система</strong> состоит из центрального светила — Солнца и девяти планет, обращающихся вокруг него, их спутников, множества малых планет, комет и межпланетной пыли. <ul> <h3>Список планет Солнечной системы</h3> <img src="square.gif">Меркурий<br> <img src="square.gif">Beнepa<br> <img src="square.gif">Земля<br> <img src="square.gif">Марс<br> <img src="square.gif">Юпитер<br> <img src="square.gif">Сатурн<br> <img src="square.gif">Уран<br> <img src="square.gif">Нептун<br> <img src="square.gif">Плутон<br> </ul> </body> </html>
4.3. Упорядоченные списки. Элемент <ol>.
С помощью элемента
Указание начального и конечного тегов элементов
Тип нумерации и значение номера элемента можно менять непосредственно при задании элемента списка
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>
Пример задания упорядоченного списка
</title>
</head>
<body>
<h3 align="center">Лауреаты Нобелевской премии по физике</h2>
<ol>
<li>БАРДИН (Bardeen), Джон</li>
<li>БАРКЛА (Barkla), Чарлз Главер</li>
<li>БЕККЕРЕЛЬ (Becquerel), Анри</li>
<li>БОР (Bohr), Нильс</li>
<li>
Б0РН (Born), Макс
<br>..........
</li>
<li value=50>ШТАРК (Stark), Йоханнес</li>
<li>ЭЙНШТЕЙН (Einstein), Альберт</li>
</ol>
</body>
</html>
Аналогично неупорядоченным спискам для вложенных упорядоченных списков автоматически
происходит смена вида нумерации (рис. 4.7). Но здесь есть небольшой нюанс. Обратите
внимание на строку
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>
Пример вложенных упорядоченных списков
</title>
</head>
<body>
<h2 align="center">Hoбeлeвcкиe лауреаты</h2>
<ol type=I>
<li>
<strong>Премия по химии</strong>
<ol>
<li>АРРЕНИУС (Arrhenius), Сванте</li>
<li>ACTOH (Aston), Фрэнсис Уильям</li>
<li>
БЕРГИУС (Bergius), Фридрих
<br>..........
</li>
<li value=30>ФИШЕР (Fischer), Эмиль</li>
<li>ЭЙЛЕР-ХЕЛЬПИН (Euler-Chelpin), Ханс фон</li>
<li>ЮРИ (Urey), Гарольд К.</li>
</ol>
</li>
<li>
<strong>Премия по литературе</strong>
<ol>
<li>БЕНАВЕНТЕ-И-МАРТИНЕС (Benavente у Martinez), Хасинто</li>
<li>BEPГCOH (Bergson), Анри</li>
<li>
BЬEPHCOH (Bjernson), Бьеристерне
<br>..........
</li>
<li value=30>ШПИTTEЛEP (Spitteler), Карл</li>
<li>ЭЙKEH (Eucken), Рудольф</li>
<li>ЭЧЕГАРАЙ (Echegaray), Xoce</li>
</ol>
</li>
<li>
<strong>Премия мира</strong>
<ol>
<li>ACCEP (Asser), Тобиас</li>
<li>APHOЛЬДCOH (Arnoldson), Клас</li>
<li>
БAЙEP (Bajer), Фредрик
<br>..........
</li>
<li value=25>САХАРОВ, Андрей</li>
<li>ФPИД (Fried), Альфред</li>
</ol>
</li>
</ol>
</body>
</html>
В этом примере также проиллюстрировано использование атрибута 4.4. Списки определений.Списки определений являются особым видом списков, которые представляют содержащуюся в себе информацию в виде словарных статей. Сначала указывается определяемый термин, а затем приводится его определение, отображенное с отступом. Таким образом, каждый элемент такого списка состоит из двух частей (рис. ):
Сам список определений заключается в содержимом элемента-контейнера
Для элемента
Задание начального и конечного тега для элемента
Недопустимо использование элементов уровня блока (например, элементы заголовков <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title> Пример списка определений </title> </head> <body> <h2 align="center">Математический справочник</h2> <dl> <dt><strong>Делитель нуля</strong></dt> <dd> Это ненулевой элемент кольца или подгруппы с нулем, произведение которого на некоторый ненулевой элемент равно нулю. В некоммутативном случае различают левые и правые делители нуля. </dd> <dt><strong>Делийская задача</strong></dt> <dd> Задача об удвоении куба. Заключается в построении циркулем и линейкой стророны куба, объем которого вдвое больше объема данного куба. Название "Делийская задача" связано с преданием, по которому жители острова Делос, чтобы избежать чумы, должны были исполнить повеление дельфийского оракула удвоить объем жертвенника, не изменяя при этом его кубической формы. </dd> <dt><strong>Дискретная математика</strong></dt> <dd> Область математики, занимающаяся изучением свойств дискретных структур, которые возникают как внутри математики, так и в ее приложениях. К числу таких структур могут быть отнесены, например, конечные группы, конечные графы, а также некоторые матеметнческие модели преобразователей информации, конечные автоматы, машины Тьюринга и т.п. </dd> </dl> </body> </html>
4.5. Комбинирование различных списков.Возможности языка HTML позволяют комбинировать списки различного типа друг с другом, вкладывать их друг в друга. Рассмотрим эту возможность на примере: Пример:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>
Пример вложения друг в друга списков различного типа
</title>
<style type="text/css">
body { font-weight: bold }
.chapter { color: darkred }
.paragraph { color: darkgreen }
dt { color: darkblue }
dd { font-style: italic; color: darkblue }
</style>
</head>
<body>
<h2 align="center">
Содержание учебника по истории раннего средневековья.
</h2>
<ul>
<li class="chapter">
Глава 1. Западная и центральная Европа в VI-XI веках.
<ol>
<li class="paragraph">
Древние Германцы и Римская империя.
</li>
<li class="paragraph">
Франкское королевство.
<dl>
<dt>Франкское королевство</dt>
<dd>
Oно возникло в конце V века на части территории бывшей Римской
империи при завоевании франками во главе с Хлодвигом Галлии.
</dd>
</dl>
..........
</li>
<li value=7 class="paragraph">
Культура Западной и Центральной Европы.
</li>
<li class="paragraph">
Образование славянских государств.
</li>
</ol>
</li>
<li class="chapter">
Глава 2. Византийская империя в VI-XI веках.
<ol>
<li class="paragraph">
Византия при Юстиниане.
<dl>
<dt>Юстиниан I</dt>
<dd>
3авоевал Северную Африку, Сицилию, Италию, часть Испании. Провел
кодификацию римского права, стимулировал большое строительство.
</dd>
</dl>
</li>
<li class="paragraph">
Культура Византии.
</li>
</ol>
</li>
<li class="chapter">
Приложения.
<ol type=A>
<li class="paragraph">
Краткая биография Карла Великого.
</li>
<li class="paragraph">
Карта Франкского королевства в X веке.
<br>..........
</li>
<li value=5 class="paragraph">
Хронология развития Византийского государства
</li>
</ol>
</li>
</ul>
</body>
</html>
|
||||||||||||||||||||||||||||||||||
