Лекция№10 Списки
advertisement
Лекция № 10 Тема: Списки в HTML. Цель: рассмотреть встраивание в HTMLдокумент различных типов списков Практически ни одна Web-страница не обходится без использования списков. Со списками мы постоянно сталкиваемся в повседневной жизни. Это может быть список класса, список дел, которые нужно сделать в течение дня и т.д. Их применение оправдывается следующими преимуществами: они используются для объединения фрагментов информации в единую структуру; их удобно применять при описании сложных пошаговых процессов; они располагают информацию в стиле оглавления, пункты которого указывают на соответствующие разделы документа. В языке HTML предусмотрен специальный набор тэгов для представления информации в виде списков следующих типов: маркированный; нумерованный; список определений. Маркированный список Для создания маркированного (ненумерованного, неупорядоченного) списка используется тэг–контейнер <UL> (Unordered List – неупорядоченный список), внутри которого располагаются все элементы списка. Каждый элемент списка начинается тэгом <LI> (List Item - элемент списка). Отметим также, что кроме элементов списка между тэгами <UL> и </UL> могут располагаться другие элементы языка HTML. Тэг <UL> имеет параметр TYPE, задающий внешний вид маркера. Замечание. Следует помнить, что конкретный вид маркера будет зависеть от используемого браузера. Перечислим возможные значения этого параметра: 1 disc (значение по умолчанию) – маркеры отображаются закрашенными кружками; circle - маркеры отображаются не закрашенными кружками; square – маркеры отображаются закрашенными квадратиками. Замечание. При задании значений параметра TYPE используйте только маленькие буквы (регистр имеет значение)! Если используются вложенные (о них разговор пойдет позже) маркированные списки, то на первом уровне по умолчанию используется значение disc, на втором – circle, на третьем и далее – square. Параметр TYPE может использоваться с тэгом <LI> для задания внешнего вида отдельных маркеров. Графические маркеры списка Стандартный набор маркеров для создания списков не позволяет использовать другие графические изображения. С другой стороны на различных Web-страницах мы можем наблюдать использование разнообразных изображений в качестве маркеров списка. Разберем назначение тэга <UL>. Замечание. Этот тэг только указывает браузеру, что вся информация, располагаемая после него, отображается со сдвигом вправо. Тэги <LI>, указывающие на отдельные элементы списка, обеспечивают вывод стандартных маркеров элементов списка. Если требуется построить список с маркером в виде графического изображения, то нужно отказаться от использования тэга <LI>! Достаточно вставить перед каждым элементом желательное графическое изображение. Нужно позаботиться о том, чтобы каждый элемент списка располагался со следующей строки. Для этого в конце каждой строки можно разместить тэг абзаца <P> или принудительного перевода строки <BR>. Таким образом, структура каждого элемента списка будет следующей: 2 Пример. Возьмем в качестве маркера графическое изображение: <HTML> <HEAD> <TITLE> Пример маркированного списка. </TITLE> </HEAD> <BODY> <UL> <!-- Начало списка. --> <B> Знаки зодиака: </B><BR> <IMG SRC =Плитка.bmp> Овен <!-- Элементы списка.--><BR> <IMG SRC =Плитка.bmp> Телец <BR> <IMG SRC =Плитка.bmp> Близнецы <BR> <IMG SRC =Плитка.bmp> Рак <BR> <IMG SRC =Плитка.bmp> Лев <BR> <IMG SRC =Плитка.bmp> Дева <BR> <IMG SRC =Плитка.bmp> Весы <BR> <IMG SRC =Плитка.bmp> Скорпион <BR> <IMG SRC =Плитка.bmp> Стрелец <BR> <IMG SRC =Плитка.bmp> Козерог <BR> <IMG SRC =Плитка.bmp> Водолей <BR> <IMG SRC =Плитка.bmp> Рыбы <BR> </UL> <!-- Конец списка. --> </BODY> </HTML> Замечание. Обратите внимание на тот факт, что если мы используем тэг <IMG>, то нам доступны все его параметры, влияющие на изображение! 3 Нумерованный список Другим типом списков в языке HTML является нумерованный список, который еще называют упорядоченным списком. Для создания нумерованного списка следует использовать тэг–контейнер <OL> (Ordered List – упорядоченный список), внутри которого располагаются все элементы списка. Элементы нумерованного списка также начинаются с тэга <LI>. Раз это нумерованный список, то должна быть предусмотрена возможность изменять как начальный номер элемента списка, так и номер любого элемента списка. Так вот, параметр VALUE используется для изменения нумерации внутри списка и, соответственно, может использоваться только в тэге <LI>. Если требуется изменить начальный номер элемента списка, то в этом случае нужно воспользоваться параметром START тэга <OL>, например: <OL START=5> В этом случае начальный номер элемента списка будет равен 5. Последним параметром, который можно использовать при организации маркированного списка, является TYPE. Он применяется для задания вида списка и может принимать следующие значения (все буквы латинские): A– задает маркеры в виде прописных латинских букв; a – задает маркеры в виде строчных латинских букв; I – задает маркеры в виде больших римских цифр; i – задает маркеры в виде маленьких римских цифр; 1 – задает маркеры в виде арабских цифр. По умолчанию всегда используется значение TYPE=1 (арабские цифры). Заметим, что после номера всегда выводится точка. Параметр TYPE может употребляться в тэге элемента списка <LI>. Список определений Частным случаем списка является список определений. Списки определений задаются с помощью тэга–контейнера <DL> (Definition List - определение 4 списка). Внутри тэга <DL> тэгом <DT>(Definition Term - определение термина) помечается определенный термин, а тэгом <DD>(Definition Description – задание описания) – абзац с его определением. Для тэгов <DT> и <DD> можно не записывать соответствующие закрывающие тэги. Таким образом, общий вид такого списка следующий: <DL> <!-- Начало списка. --> <DT> Термин. <DD> Его определение. . . . . . </DL> <!-- Конец списка. --> Замечание. В тексте после тэга <DT> не могут использоваться тэги абзаца <P> или заголовков <H1> - <H6>. Пример использования списка определений: <HTML> <HEAD> <TITLE> Список определений. </TITLE> </HEAD> <BODY> <DL> <H2 ALIGN=CENTER><B>Определения.</B><H2> <DT> <CITE>Протокол </CITE> <DD> это набор правил, определяющих способы передачи данных между компьютерами в сети. <DT> <CITE>Модем </CITE> <DD> устройство, позволяющее передавать данные от одного компьютера к другому по телефонным линиям. </DL> </BODY> </HTML> 5 Вложенные списки В некоторых случаях требуется разместить в элементе списка одного типа целый список такого же или другого типа. Например, одним списком могут быть дни недели, каждый элемент которого в качестве подсписка содержит список уроков. Для организации таких конструкций используются многоуровневые или вложенные списки. Приведем общую структуру вложенного списка, использовав для примера тэги <UL> и <OL>. . . . . . <UL> <!-- Начало основного списка. --> <LI> 1-й элемент основного списка. <OL><!-- Начало подсписка для 1-го элемента. --> <LI> 1-й элемент подсписка. <LI> 2-й элемент подсписка. . . . . . <LI> N-й элемент подсписка. </OL><!-- Конец подсписка для 1-го элемента. --> . . . . . . . . . . . . . <LI> M-й элемент основного списка. <OL><!-- Начало подсписка для M-го элемента. --> <LI> 1-й элемент подсписка. <LI> 2-й элемент подсписка. . . . . . <LI> R-й элемент подсписка. </OL><!-- Конец подсписка для M-го элемента. --> </UL> <!-- Конец основного списка. --> . . . . . 6
