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>
На экране это выглядит следующим образом: