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

2016-09-17

674

Обсуждений (0)

0.00 из 5.00 0 оценок

⇐ Предыдущая 1 2 3 456 7 8 9 Следующая ⇒

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

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

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

<HTML>

<HEAD>

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

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

</HEAD>

<BODY>

<UL>

Знаки зодиака:

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

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

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

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

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

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

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

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

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

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

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

<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>

Спутники некоторых планет:

<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-17

674

Обсуждений (0)

0.00 из 5.00 0 оценок

⇐ Предыдущая 1 2 3 456 7 8 9 Следующая ⇒

Обсуждение в статье: Графические маркеры списка

Обсуждений еще не было, будьте первым... ↓↓↓