WEB-Дизайн ч2
.pdfФЕДЕРАЛЬНОЕ АГЕНТСТВО ПО ОБРАЗОВАНИЮ ГОСУДАРСТВЕННОЕ ОБРАЗОВАТЕЛЬНОЕ УЧРЕЖДЕНИЕ
ВЫСШЕГО ПРОФЕССИОНАЛЬНОГО ОБРАЗОВАНИЯ «ВОРОНЕЖСКИЙ ГОСУДАРСТВЕННЫЙ УНИВЕРСИТЕТ»
И.Д. Коструб, М.М. Портнов
WEB-ДИЗАЙН. ОСНОВЫ ЯЗЫКА HTML
Часть 2
Методические указания для вузов
Издательско-полиграфический центр Воронежского государственного университета
2008
Утверждено научно-методическим советом факультета ПММ 14 марта 2008 г., протокол № 7
Рецензент канд. физ.-мат. наук, доцент кафедры математического обеспечения ЭВМ факультета ПММ ВГУ О.Д. Горбенко
Учебное пособие подготовлено на кафедре нелинейных колебаний факультета ПММ Воронежского государственного университета.
Рекомендуется для студентов четвертого курса факультета ПММ.
Для специальности: 010501 – Прикладная математика и информатика
2
1. Использование списков
1.1. Зачем нужны HTML-списки?
Различные списки играют далеко не последнюю роль в нашей повседневной жизни. Возникает вопрос – а почему мы так часто прибегаем к этому средству представления информации?
Во-первых. Информация в виде списка позволяет разбить большие массивы данных на отдельные, четкие фрагменты, которые человеку гораздо удобнее воспринимать, нежели весь поток целиком.
Во-вторых. Списки позволяют создавать понятную и логичную внутреннюю структуру информационных данных, ориентироваться в которой – дело простое и удобное.
В-третьих. Использование списков удобно для отображения определенных пошаговых и прочих последовательных процессов.
При работе с текстом в различных программах типа Microsoft Word создание списков не представляется сложным делом – надо всего лишь указать область данных, которую текстовому редактору необходимо превратить в список.
В языке разметки HTML за организацию списков отвечает целый ряд тегов, конструкции которых должны соответствовать определенным правилам структуризации информационных данных с помощью HTML.
Спецификация HTML предусматривает три основных типа списков:
●нумерованные списки;
●маркированные списки;
●списки определений.
Рассмотрим каждый из названных типов более подробно.
1.2. Нумерованные списки
Нумерованный список часто называется упорядоченным (Ordered List) и представляет собой определенную последовательность элементов.
Для создания нумерованного списка используется тег-контейнер <OL>, внутри которого располагаются пункты перечня информационных данных, за указание которых отвечает специальный тег <LI> (List Item – пункт списка или элемент списка) (листинг 1.1, рис. 1).
Листинг 1.1. Пример нумерованного списка
<HTML>
<HEAD>
<TITLE>Пример нумерованного списка</TITLE> </HEAD>
<BODY BGCOLOR="#FFFFFF" TEXT="black" LINK="#00FF00" ALINK="#00FF00" VLINK="blue">
<H3>Пример нумерованного списка</Н3>
3
<HR ALIGN="center" NOSHADE WIDTH="98%"> <OL>
<FONT FАСЕ="Таhоmа">
<B>Визуальные эффекты Adobe Photoshop 7:</B> </FONT>
<LI>Drop Shadow; <LI>Bevel and Emboss; <LI>Color Overlay.
</OL>
</BODY>
</HTML>
Рис. 1. Пример нумерованного списка
Как видно из примера, после каждого пункта списка осуществляется перенос строки, причем без указания каких-либо структурных тегов. Также следует заметить, что закрывающий тег </LI> отсутствует, хотя и существует в спецификации HTML (Консорциум W3C признал этот закрывающий тег необязательным).
Если заголовок списка «Визуальные эффекты Adobe Photoshop 7:» размещается между тегом <OL> и первым пунктом списка <LI>, то он будет отделен от начала самого списка одним переносом строки и отступом от левого края документа (как и все пункты списка). При указании заголовка перед тегом <OL> браузер, интерпретируя HTML-код, создаст двойной перенос и разместит текст заголовка левее пунктов списка (рис. 2).
4
Рис. 2. Пример нумерованного списка с заголовком, размещенным перед тегом <OL>
Иногда может возникнуть ситуация, когда список содержит определенный разрыв в последовательности представления пунктов (например, после пункта 3 должен идти пункт 5). Для этой цели используется специальный параметр тега <LI> – VALUE (листинг 1.2, рис. 3).
Листинг 1.2. Пример нумерованного списка с разрывом последовательности.
<HTML>
<HEAD>
<ТIТLE>Пример нумерованного списка с разрывом последовательности</TITLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF" TEXT="black" LINK="#00FF00" ALINK="#00FF00" VLINK="blue">
<H3>Пример нумерованного списка</H3> <HR ALIGN="center" NOSHADE WIDTH="98%"> <FONT РАСЕ="Tahoma">
<В>Визуальные эффекты Adobe Photoshop 7: </B></FONT>
<OL>
<LI>Drop Shadow; <LI>Bevel and Emboss; <LI>Color Overlay. <BR>. . .
<LI VALUE="5">Stroke </OL>
</BODY>
</HTML>
5
Рис. 3. Пример нумерованного списка с разрывом последовательности
1.3. Параметры тега <OL>
Тег составления нумерованных списков <OL> может включать пара-
метры ТУРЕ, START и COMPACT.
Параметр TYPE используется для указания типа нумерованного списка. Помимо обычных арабских цифр могут применяться большие и маленькие римские цифры, а также строчные и прописные латинские буквы (листинг
1.3, рис. 4).
Листинг 1.3. Примеры использования разных типов нумерованного списка
<HTML>
<HEAD>
<ТIТLЕ>Примеры использования разных типов нумерованного списка</ТITLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF" TEXT="black" LINK="#OOFFOO" ALINK="#OOFFOO" VLINK="blue">
<OL TYPE="1">
<FONT SIZE="4"><В>Арабские цифры</В></FONT> <LI>Drop Shadow;
<LI>Bevel and Emboss; <LI>Color Overlay.
</OL>
<OL TYPE="I">
<FONT SIZE="4"><В>Большие римские
6
цифры</В></FONT>
<LI>Drop Shadow; <LI>Bevel and Emboss; <LI>Color Overlay.
</OL>
<OL TYPE="A">
<FONT SIZE="4"><В>Прописные латинские буквы</B</FONT>
<LI>Drop Shadow; <LI>Bevel and Emboss; <LI>Color Overlay.
</OL>
</BODY>
</HTML>
Рис. 4. Пример использования разных типов нумерованного списка
Все значения параметра TYPE приведены в таблице 1.1.
7
|
|
Таблица 1 . 1 |
|
|
Значения параметра TYPE тега <OL> |
||
Значение |
|
Описание |
|
TYPE="1" |
|
Нумерация арабскими цифрами |
|
TYPE=" I" |
|
Нумерация большими римскими цифрами |
|
TYPE="i" |
|
Нумерация маленькими римскими цифрами |
|
TYPE="A" |
|
Нумерация прописными латинскими буквами |
|
TYPE="a" |
|
Нумерация строчными латинскими буквами |
|
Типом нумерации, используемым по умолчанию, является TYPE="I", поэтому при создании нумерованных списков такого типа необязательно задавать значение параметра TYPE (сам параметр также можно опустить).
Параметр START позволяет начинать нумерованный список не с первой позиции. При этом значением этого параметра может быть только числовой эквивалент конкретного типа списка. Например, чтобы начать список, созданный на основе нумерации большими латинскими буквами, с буквы F, надо указать следующую HTML-конструкцию:
<OL TYPE="A" START="6">
В данном случае значением параметра START будет являться цифра 6, т. к. буква F – шестая по счету буква в латинском алфавите.
Параметр COMPACT изначально был предусмотрен для списков, отображение которых должно производиться в компактном виде, например, с использованием меньшего размера шрифта, меньшего отступа от края страницы или меньшего расстояния между пунктами списка. Однако на практике этот параметр почти не используется, поскольку наиболее распространенные браузеры никак не реагируют на его применение, к тому же Консорциум W3C в последней спецификации HTML вообще не рекомендует использовать параметр COMPACT.
В завершение разговора о создании нумерованных списков следует добавить, что возможно смешанное использование различных типов нумерации в пределах одного списка. Например, первый пункт списка можно задать типом арабских цифр, второй – буквенным способом, третий – с помощью римских цифр и т. д.
Однако браузеры по-разному реагируют на такое смешение стилей отображения списков. К примеру, HTML-конструкция:
<OL TYPE="1"> <LI>Drop Shadow
<LI TYPE="A">Bevel and Emboss <LI TYPE="i">Color Overlay <LI>Outer Glow
<LI TYPE="I">Stroke </OL>
8
будет интерпретирована браузером Internet Explorer так, как показано на рис. 5 – в списке четвертый по счету пункт «Outer Glow» озаглавлен арабской цифрой 4.
Рис. 5. Отображение списка со смешанной нумерацией в Internet Explorer
Другие браузеры могут расценить пропуск типа нумерации в пункте «Outer Glow» как команду отображать данные по предыдущему типу (маленькие римские цифры).
1.4. Маркированные списки
Другим распространенным способом структуризации информационных данных является создание маркированных списков. Маркированный список представляет собой ненумерованный или неупорядоченный (Unordered List) перечень элементов, для заголовка которых используются специальные маркеры. В качестве маркеров выступают специальные символы, называемые буллетами (bullets).
Для создания маркированных списков применяется тег-контейнер <UL>, внутри которого располагаются элементы самого списка (как и в случае с нумерованными списками, используется тег <LI>, не требующий закрывающего тега) (листинг 1.4, рис. 6).
Листинг 1.4. Пример маркированного списка
<HTML>
<HEAD>
<TITLE>Пример маркированного списка</TITLE> </HEAD>
<BODY BGCOLOR="#FFFFFF" TEXT="black" LINK="#00FF00" ALINK="#00FF00" VLINK="blue">
<H3>Пример маркированного списка</H3>
9
<HR ALIGH="CENTER" NOSHADE WIDTH="98%"> <FONT FACE="Tahoma">
<B>Популярные редакторы векторной графики:</B> </FONT>
<UL>
<LI>CorelDRAW <LI>Adobe Illustrator
<LI>Macromedia FreeHand </UL>
</BODY>
</HTML>
Рис. 6. Пример маркированного списка
1.5. Параметры тега <UL>
Тег маркированного списка <UL> может содержать два основных параметра: TYPE и COMPACT. Параметр TYPE отвечает за форму отображаемого браузером маркера. Всего существует три возможных значения данного параметра:
●TYPE=disc – значение, используемое по умолчанию (указание необязательно), которое отображает маркер в виде закрашенного круга;
●TYPE=circle – маркер отображается в виде незакрашенного круга (кольца);
●TYPE=square – отображение маркера в виде закрашенного квадрата.
10