вернуться на главную страницу

5. Cписки.

5. 1. Что такое списки.

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

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

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

Создать список довольно легко. Сначала вводится теги открытия и закрытия списка (<UL> и </UL>, <OL> и </OL> или <DL> и </DL>). Затем перед текстом каждого пункта списка введите тег <LI>. Наконец, введите заголовок списка между тегами заголовка <LH> и </LH>. Не пугайтесь этого обилия тегов, мы подробно опишем весь процесс.

5. 2. Маркированный список.

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

Маркированный список задается тегами <UL> и </UL>, а пункты списка между тегами - с помощью тега <LI>. Заголовок списка вводится с помощью тегов <LH> и </LH>. Web - броузеры автоматически отображают текст, отмеченный как заголовок, в формате, немного отличающемся от формата остального текста.

Пример:

<HTML>

<TITLE>

№1

</TITLE>

<CENTER>

<H1> Добро пожаловать на страничку

<BR>Омской школы № 1. </H1>

<H2> Учителя и учащиеся школы рады Вас приветствовать! </H2>

Мы непрерывно работаем над этой страницей, и она постоянно обновляется.

</CENTER>

<UL>

<LH><B>На нашей страничке Вы можете узнать: </B></LH>

<LI>О нашем городе

<LI>О нашей школе

<LI>Личные страницы

<LI>Наш Web - мастер

</UL>

</HTML>

На экране это выглядит следующим образом:

5. 3. Нумерованный список.

Нумерованный список очень напоминает маркированный. Единственным отличием является то, что в нумерованном списке перед каждым пунктом вместо графических маркеров автоматически помещаются последовательные номера или буквы. Благодаря этому Вам не придется в ручную набирать номер каждого пункта списка.

Нумерованный список задается с помощью тегов <OL> и </OL>. Как и в маркированном списке, каждый пункт задается тегом <LI>. По умолчанию номера начинаются с 1.

По умолчанию списки HTML автоматически нумеруются с помощью арабских цифр - 1, 2, 3 и т. д. Вы можете задать другой способ нумерации, например буквы (прописные или строчные) или римские цифры. Чтобы изменить стандартный тип нумерации, добавьте в тег <OL> ключевое слово TYPE.

Ниже приведены пять возможных способов нумерации:

1. TYPE=1 Стандартная цифровая нумерация - 1, 2, 3, ...

2. TYPE=A Прописные буквы - A, B, C, D, ...

3. TYPE=a Строчные буквы - a, b, c, d, ...

4. TYPE=I Римские цифры - I, II, III, IV, V, ...

5. TYPE=i Строчные римские цифры - i, ii, iii, iv, v, ...

Пример:

Стандартный тип нумерации:

<HTML>

<TITLE>

№1

</TITLE>

<CENTER>

<H1> Добро пожаловать на страничку 

<BR>Омской школы № 1. </H1>

<H2> Учителя и учащиеся школы рады Вас приветствовать! </H2>

Мы непрерывно работаем над этой страницей, и она постоянно обновляется.

</CENTER>

<OL>

<LH><B>На нашей страничке Вы можете узнать: </B></LH>

<LI>О нашем городе

<LI>О нашей школе

<LI>Личные страницы

<LI>Наш Web - мастер

</OL>

</HTML>

На экране это выглядит следующим образом:

Пример:

Прописные буквы:

<HTML>

<TITLE>

№1

</TITLE>

<CENTER>

<H1> Добро пожаловать на страничку

<BR> Омской школы № 1. </H1>

<H2> Учителя и учащиеся школы рады Вас приветствовать! </H2>

Мы непрерывно работаем над этой страницей, и она постоянно обновляется.

</CENTER>

<OL TYPE=A>

<LH><B>На нашей страничке Вы можете узнать: </B></LH>

<LI>О нашем городе

<LI>О нашей школе

<LI>Личные страницы

<LI>Наш Web - мастер

</OL>

</HTML>

На экране это выглядит следующим образом:

Если необходимо, чтобы нумерация списка начиналась с определенного номера, надо добавить в тег параметр START=.

Пример:

Нумерация списка начинается с номера 5:

<HTML>

<TITLE>

№1

</TITLE>

<CENTER>

<H1> Добро пожаловать на страничку 

<BR>Омской школы № 1. </H1>

<H2> Учителя и учащиеся школы рады Вас приветствовать! </H2>

Мы непрерывно работаем над этой страницей, и она постоянно обновляется.

</CENTER>

<OL START=5>

<LH><B>На нашей страничке Вы можете узнать: </B></LH>

<LI>О нашем городе

<LI>О нашей школе

<LI>Личные страницы

<LI>Наш Web - мастер

</OL>

</HTML>

На экране это выглядит следующим образом:

5. 4. Cписки определений.

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

Списки определений выглядят несколько иначе, чем другие типы списков. Для описания каждого пункта списка в этом случае применяется два тега, а не один тег. Тег <DT> задает отдельный элемент, то есть определяемый термин, а тег <DD> - остальную информацию, которая выводится на следующей строке с отступом. Вторая строка информации называется определением.

Выглядит запись следующим образом:

<DL>

<DT>

<DD>

</DL>

Пример:

<HTML>

<TITLE>

№1

</TITLE>

<CENTER>

<H1> Добро пожаловать на страничку

<BR> Омской школы № 1. </H1>

<H2> Учителя и учащиеся школы рады Вас приветствовать! </H2>

Мы непрерывно работаем над этой страницей, и она постоянно обновляется.

</CENTER>

<DL>

<LH><B>На нашей страничке Вы можете узнать: </B></LH>

<DT>О нашем городе

<DD>Достопримечательные места

<DT>О нашей школе

<DD>Новости

<DT>Личные страницы

<DD>Кто мы такие

<DT>Наш Web - мастер

<DD>Художник страницы

</DL>

</HTML>

На экране это выглядит следующим образом:

5. 5. Cписки в списках.

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

Вложение списка в список производится так же, как простое создание списка.

Пример:

<HTML>

<TITLE>

№1

</TITLE>

<CENTER>

<H1> Добро пожаловать на страничку

<BR>Омской школы № 1. </H1>

<H2> Учителя и учащиеся школы рады Вас приветствовать! </H2>

Мы непрерывно работаем над этой страницей, и она постоянно обновляется.

</CENTER>

<OL>

<LH><B>На нашей страничке Вы можете узнать: </B></LH>

<LI>О нашем городе

<LI>О нашей школе

<LI>Личные страницы

<UL>

<LI>11 класс

<DL>

<DT>11 "a"

<DD>математический класс

</DL>

<LI>10 класс

<DL>

<DT>10 "a"

<DD>математический класс

</DL>

<LI>9 класс

<DL>

<DT>9 "б"

<DD>физический класс

</DL>

</UL>

<LI>Наш Web - мастер

</OL>

</HTML>

На экране это выглядит следующим образом:

 


вернуться на главную страницу