Графические маркеры списка


В качестве маркеров списка можно использовать графические изображения.

Если же нам требуется построить список с графическими маркерами, то можно вообще обойтись без тегов <LI>. Достаточно будет перед каждым элементом списка вставить желаемое графическое изображение. Единственной задачей, которую нужно при этом решить, будет отделение элементов списка друг от друга. Для этого можно использовать теги абзаца <P> или принудительного перевода строки <BR>.

Пример. Реализация списка с графическими маркерами (Рис. 3.).

<HTML>

<HEAD>

<META Http-equiv="content-type" Content="text/html; charset= windows -1251">

<TITLE>Маркированный список</TITLE>

</HEAD>

<BODY>

<UL>

<B>Знаки зодиака:</B><BR>

<IMG Src="ball.png"> Овен<BR>

<IMG Src ="ball.png"> Телец<BR >

<IMG Src ="Ball.png"> Близнeцы<BR>

<IMG Src ="Ball.png"> Paк<BR>

<IMG Src ="Ball.png"> Лeв<BR>

<IMG Src ="Ball.png"> Дева<BR>

<IMG Src ="Ball.png"> Весы<BR>

<IMG Src ="Ball.png"> Скорпион<BR>

<IMG Src ="Ball.png"> Cтpeлeц<BR>

<IMG Src ="Ball.png"> Козерог<BR>

<IMG Src ="Ball.png"> Водолей<BR>

<IMG Src ="Ball.png"> Рыбы

</UL>

</BODY>

</HTML>

В примере в качестве маркера элементов списка используется графический файл Ball.png.

Рисунок 3. Список с графическими маркерами

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

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

В отличие от нумерованных и маркированных списков, которые могут содержать по несколько элементов, расположенных друг за другом, элементы списка определений должны состоять из двух частей: самого определения (термина) и его содержательной части (описания).

Список определений задается с помощью тега - контейнера <DL>…</DL>, внутри которого указывается тег <DT>, выделяющий термин, и тег <DD>, содержащий описание к данному термину.

Список определений записывается следующим образом:

<DL>

<DT>Термин

<DD>Определение термина

</DL>

Пример. Организация списка определений (Рис. 4.).

<HTML>

<HEAD>

<META Http-equiv="content-type" Content="text/html; charset= windows -1251">

<TITLE>Cписок определений</TITLE>

</HEAD>

<BODY>

<H4>Список определений:</H4>

<DL>

<DT>Кофе</DT><DD>Бодрящий горячий напиток</DD>

<DT>Молоко</DT><DD>Полезный холодный напиток</DD>

</DL>

</BODY>

</HTML>

Внутри элемента <DD> можно размещать абзацы, строки, изображения, ссылки, другие списки и т.д.

Рисунок 4. Список определений

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

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

Примечание: обычно вложенный список отображается с небольшим отступом вправо от родительского списка.

Пример. Организация вложенных списков (Рис. 5.).

<HTML>

<HEAD>

<META Http-equiv="content-type" Content="text/html; charset= windows -1251">

<TITLE>Пример вложенного списка</TITLE>

</HEAD>

<BODY>

<UL>

<B>Спутники некоторых планет:</B>

<LI>Земля

<OL>

<LI>Луна

</OL>

<LI>Мapc

<OL>

<LI>Фобос

<LI>Деймос

</OL>

<LI>Уран

<OL>

<LI>Ариэль

<LI>Умбриэль

<LI>Титания

<LI>Оберон

<LI>Миранда

</OL>

<LI>Нептун

<OL>

<LI>Тритон

<LI>Нереида

</OL>

</UL>

</BODY>

</HTML>

Рисунок 5. Вложенные списки


Ссылки в HTML

Ссылка - одно из важнейших понятий для HTML-документов. Гиперссылка используется с целью создания ссылок на другие элементы документа или даже на другие документы, такие ссылки являют собой основную причину ошеломляющей популярности пространства World Wide Web, где пользователь может легко перескочить с одного фрагмента текста на другой или со страницы на страницу, не задавая явным образом URL последних.

Тег <A>

За организацию гиперссылок отвечает тег-контейнер <A> </A>.

Этот тэг выполняет два действия: задает имя ссылки и задает ссылку на имя. Имя ссылки браузер автоматически выделяет другим цветом и подчеркивает.

Атрибуты тега <A>.

Name   Используется для задания имени. Атрибут Name задает привязку ссылки в тексте, на которую и будет производиться ссылка. <A Name="имя"> Необязательный текст </A>
Href   Используется для организации ссылки. Атрибут Href задает адрес ссылки. Он может указывать или на имя ссылки в тексте, или на URL и имя файла.


Дата добавления: 2016-09-26; просмотров: 3057;


Поиск по сайту:

Воспользовавшись поиском можно найти нужную информацию на сайте.

Поделитесь с друзьями:

Считаете данную информацию полезной, тогда расскажите друзьям в соц. сетях.
Poznayka.org - Познайка.Орг - 2016-2024 год. Материал предоставляется для ознакомительных и учебных целей.
Генерация страницы за: 0.017 сек.