Информатика - Программирование - html - Списки


Информатика - Программирование - html - Списки

В языке HTML предусмотрен набор тегов для представления информации в виде списков. Списки являются одним из наиболее часто употребляемых форм представления данных. В языке HTML предусмотрены следующие основные типы списков:

* маркированный
* нумерованный
* список определений

маркированный список

Одним из типов списков является маркированный или неупорядочный. В маркированном списке для выделения его элементов используются специальные символы, называемые маркерами списка (часто их называют буллерами, что является формальным озвучением английского термина bullet - пуля). Вид маркеров списка определяется браузером.
* <ul> и <li>

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

Пример:

<html>
<head>
<title> Списки </title>
</head>
<body>
<ul>

<b> Знаки зодиака </b>

<li> Овен

<li> Телец

<li> Близнецы

<li> Рак

<li> Лев

<li> Дева

<li> Весы

<li> Скорпион

<li> Стрелец

<li> Козерог

<li> Водолей

<li> Рыбы

</ul>

</body>
</html> посмотреть

В теге <ul> могут быть указаны два параметра:

* compact
* type.

Параметр compact записывается без значений и применяется для указания браузеру, что данный список следует выводить в компактном виде (уменьшает шрифт или расстояние между строками).

Параметр type может принимать следующие значения:

* disc
* circle
* square

Этот параметр используется для принудительного задания вида маркеров списка. Конкретный вид маркера будет зависеть от используемого браузера. Типичными вариантами отображения являются следующие:

* type = disc - закрашенный круг
* type = circle - не закрашенный круг
* type = square - закрашенный квадрат

Пример:

<html>
<head>
<title>Списки </title>
</head>
<body>
<ul type = square>

<b> Знаки зодиака </b>

<li> Овен

<li> Телец

<li> Близнецы

<li> Рак

<li> Лев

<li> Дева

<li> Весы

<li> Скорпион

<li> Стрелец

<li> Козерог

<li> Водолей

<li> Рыбы

</ul>

</body>
</html> посмотреть

графические маркеры

В качестве маркеров списка можно использовать графические изображения, что широко применяется для создания привлекательных, красиво оформленных документов. В этом случае вместо тега <li> мы поставим желаемое графическое изображение. Не забудьте про перенос строки!

Пример:

<html>
<head>
<title>Списки </title>
</head>
<body>
<ul type = square>

<b> Знаки зодиака </b><br>

<img src="str.gif"> Овен <br>

<img src="str.gif"> Телец<br>

<img src="str.gif"> Близнецы<br>

<img src="str.gif">  Рак<br>

<img src="str.gif">  Лев<br>

<img src="str.gif"> Дева<br>

<img src="str.gif">  Весы<br>

<img src="str.gif">  Скорпион<br>

<img src="str.gif">  Стрелец<br>

<img src="str.gif">  Козерог<br>

<img src="str.gif">  Водолей<br>

<img src="str.gif"> Рыбы

</ul>

</body>
</html> посмотреть

нумерованный список

Другим типом списков является нумерованный список. Теги:

*

<ol> <li>

Пример:

<html>
<head>
<title>Списки </title>
</head>
<body>
<ol>

<b> Знаки зодиака </b>

<li> Овен

<li> Телец

<li> Близнецы

<li> Рак

<li> Лев

<li> Дева

<li> Весы

<li> Скорпион

<li> Стрелец

<li> Козерог

<li> Водолей

<li> Рыбы

</ol>

</body>
</html> посмотреть

В теге <ol> могут быть использованы следующие параметры:

* compact
* type
* start

Параметр compact записывается без значений и применяется для указания браузеру, что данный список следует выводить в компактном виде (уменьшает шрифт или расстояние между строками).

Параметр type может принимать следующие значения:

* type = A - прописные латинские буквы
* type = a - строчные латинские буквы
* type = I - большие римские цифры
* type = i - маленькие римские цифры
* type = 1 - арабские цифры

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

Пример:

<html>
<head>
<title>Списки </title>
</head>
<body>
<ol type=1 start=5>

<b> Знаки зодиака </b>

<li> Лев

<li> Дева

<li> Весы

<li> Скорпион

<li> Стрелец

<li> Козерог

<li> Водолей

<li> Рыбы

</ol>

</body>
</html> посмотреть

Значение параметра <value> тега <li> позволяет изменить номер данного элемента списка. При этом изменяется  нумерация и всех последующих элементов.

Пример:

<html>
<head>
<title>Списки </title>
</head>
<body>
<ol type=1 start=5>

<b> Знаки зодиака </b>

<li> Лев

<li> Дева

<br> ...

<li value=11> Водолей

<li> Рыбы

</ol>

</body>
</html> посмотреть

список определений

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

Списки определений задаются с помощью тега-контейнера <dl>. Внутри контейнера тегом <dt> помечается определяемый термин, а тегом <dd> - абзац с его определением.

Пример:

<html>
<head>
<title>Списки </title>
</head>
<body>
<dl>

<b> Бабушкин яблочный пирог </b>

<dt> <b>Необходимые продукты</b>

<dd>2 стакана пшеничной муки<br>
1/4 чайной ложки разрыхлителя<br>
1 столовая ложка сахарной пудры<br>
125 г сливочного масла, нарезанного кусочками<br>
1 слегка взбитое яйцo<br>
3-4 столовые ложки воды



<dt> <b>Начинка</b>

<dd> 6 яблок, очищенных от кожуры, сердцевины и нарезанных ломтиками<br>
1/2 стакана сахарной пудры<br>
1 столовая ложка кукурузной муки<br>
2 чайные ложки тертой лимонной цедры<br>
2 столовые ложки лимонного сока<br>
1/2 чайной ложки пряной смеси для пирогов<br>
1/4 чайной ложки молотой гвоздики



<dt> <b>Способ приготовления</b>

<dd> 1. Просейте муку и разрыхлитель в миску. Добавьте сахарную пудру. Разотрите сливочное масло кончиками пальцев, растирайте масло с мукой, пока смесь не превратится в мелкую крошку. Разбейте яйцо, налейте достаточное количество воды и вымесите мягкое тесто. Переложите тесто на слегка посыпанную мукой рабочую поверхность, вымешивайте в течение 1 минуты или до гладкости. Положите тесто в холодильник на 15 минут, завернув в полиэтиленовую пленку.
2. Разделите тесто на две части так, чтобы одна часть была немного больше, чем другая. Раскатайте больший кусок между 2 листами полиэтиленовой пленки так, чтобы пласт был достаточно большим и мог закрыть дно и боковые стороны формы для выпечки пирогов диаметром 23 см. Наколите равномерно вилкой тесто. Обрежьте края. Охладите.
3. Нагрейте духовку до 210' С. Для начинки смешайте яблоки и сахар в большой миске. Отдельно взбейте кукурузную муку с цедрой и соком лимона. Хорошо вымешивайте. Добавьте пряную смесь и гвоздику, перемешайте. Вылейте смесь на яблоки и еще раз все перемешайте. Выложите начинку на тесто.
4. Раскатайте оставшееся тесто, чтобы закрыть пирог сверху. Смажьте края пирога молоком. Положите пласт теста поверх яблок. Защипните края, обрежьте лишнее тесто. Смажьте верх пирога молоком и посыпьте дополнительным сахаром. Выпекайте пирог в течение 15 минут. Уменьшите температуру до 180" С и выпекайте еще в течение 25 минут, пока верх пирога не станет золотистым.

</dl>

</body>
</html> посмотреть

вложенные списки

В некоторых случаях требуется вложить один список в элемент другого списка. Такие списки называются вложенными или многоуровневыми.

Пример:

<html>
<head>
<title>Списки </title>
</head>
<body>
<ul>

<b> Спутники </b>

<li> Земля

<ol>

<li> Луна

</ol>

<li> Марс

<ol>

<li> Фобос

<li> Деймос

</ol>

<li> Уран

<ol>

<li> Ариэль

<li> Умбриэль

<li> Титания

<li> Оберон

<li> Миранда

</ol>

</ul>

</body>
</html> посмотреть
Дата публикации:






Теги: :: :: :: :: :: :: ::

Смотрите также учебники, книги и учебные материалы:

Следующие учебники и книги:
Предыдущие статьи:

 


 


Книги, учебники, обучение по разделам




Не нашёл? Найди:





2024-12-24 18:58:50