Всего за 134.9 руб. Купить полную версию
Рис. 4.5. Вложенные списки
Из примера видно, что при вложении можно использовать списки различных типов. В данном случае в качестве внешнего списка используется нумерованный список, а в качестве вложенных списков – маркированные. Ниже приведен текст HTML‑документа, при обработке которого браузер Internet Explorer сгенерировал страницу, показанную на рис. 4.5 (пример 4.5).
Пример 4.5. Вложенные списки
<TITLE>Использование вложенных списков</TITLE>
<BODY>
<OL>
<LI>Первый элемент списка. Имеет две составляющих:
<UL>
<LI>Первая составляющая
<LI>Вторая составляющая
</UL>
<LI>Второй элемент списка. Имеет три составляющих:
<UL>
<LI>Первая составляющая. Также разделяется на две части:
<UL>
<LI> Первая часть
<LI> Вторая часть
</UL>
<LI>Вторая составляющая
</UL>
<LI>Третий элемент списка
</OL>
</BODY>
При рассмотрении того как браузер обрабатывает вложенные списки, можно увидеть одну интересную особенность: браузер (по крайней мере, Internet Explorer) сам заботится о том, чтобы списки различных уровней вложенности имели разные маркеры. Однако при использовании вложенных маркированных списков следует помнить, что если специально не настраивать вложенные списки при помощи атрибута type, то для списка первого уровня (не вложенного в другой список) используется маркер, соответствующий значению dict атрибута type. Для списка второго уровня используется значение circle, а для всех списков третьего, четвертого и т. д. уровней используется значение square.
При вложении нумерованных списков автоматическая смена типа нумерации элементов вложенных списков не производится. Вообще, использовать вложенные нумерованные списки, а тем более вкладывать нумерованные списки в маркированные не рекомендуется.
Сейчас вы узнаете, как можно повысить удобство восприятия текста при использовании вложения списков в списки определений. Это будет рассмотрено на примере отрывка одного из возможных советов по устранению неполадок в работе локальной сети.
Показанное на рис. 4.6 оформление текста реализовано с использованием вложения в список определений нумерованного и маркированного списков. HTML‑текст показанного на рисунке примера приведен ниже (для экономии места полный текст рекомендаций в текст примера не включен) (пример 4.6).
Рис. 4.6. Вложение списков в список определений
Пример 4.6. Вложение списков в список определений
<TITLE>Вложение списка в список определений</TITLE>
<BODY>
<DL>
<DT><STRONG>Неисправность</STRONG>
<DD>Отсутствие соединения компьтеров сети (PING-тест не проходит)
<DT><STRONG>Возможные причины</STRONG>
<DD>
<UL>
<LI>Отсутствие физического соединения между компьютерами
<UL>
<LI>Не подключены сетевые провода
<LI>Не работает активное сетевое оборудование
<LI>Обрыв сетевых проводов
<LI>Неисправные сетевые адаптеры
</UL>
<LI>Неправильная настройка IP-адресов
</UL>
<DT><STRONG>Диагностика</STRONG>
<DD>
<OL>
<LI>Проверить, включены ли сетевые провода...
<LI>Проверить состояние индикации...
<LI>Проверить, включено ли активное сетевое оборудование...
<LI>...
</OL>
</DL>
</BODY>
Таким образом, мы рассмотрели создание вложенных списков. Теперь перейдем к рассмотрению создания гиперссылок.
Глава 5
Гиперссылки
Все, что рассматривалось ранее, было созданием HTML‑документов, которые не предусматривали никаких возможностей навигации. Теперь пришло время заняться изучением главного средства, которое сделало использование HTML практически незаменимым для представления связанных между собой документов. Речь идет о гиперссылках. Гиперссылки – ключевой, практически самый главный элемент гипертекста (текста, обладающего возможностями навигации).
Простота, наглядность и в то же время мощь гиперссылки заключаются в том, что ею может быть практически все что угодно: слово в тексте, заголовок, рисунок, элемент таблицы и другие элементы HTML‑документа. Для использования гиперссылки от пользователя требуется щелчок кнопкой мыши на тексте, изображении или прочем представлении гиперссылки, остальную работу по поиску и переходу к нужному ресурсу выполнят автоматические системы, начиная с браузера на компьютере пользователя и заканчивая службой DNS, поисковыми машинами Интернета. Вся работа, необходимая для поиска и загрузки нужных ресурсов, скрыта от пользователя. Он только видит результат и наслаждается легкостью навигации в огромном объеме информации.
5.1. Простой переход к ресурсам
Для создания гиперссылки в тексте HTML‑документа используется элемент A, который задается при помощи парных тегов <A> и </A>. Текст, изображение или другой элемент HTML‑документа, заключенный между этими тегами, становится представлением гиперссылки в тексте. Обычно браузеры отображают гиперссылки таким образом, что их можно однозначно отделить от прочего содержимого документа, например выделяют цветом, подчеркиванием, меняют форму указателя мыши при наведении его на гиперссылку. Обычным действием браузера при переходе по гиперссылке является открытие указанного HTML‑документа в том же или новом окне.
Навигация между HTML-документами
Для создания простейшей гиперссылки, обеспечивающей переход к нужному HTML‑документу, достаточно задать в качестве значения атрибута href элемента A URI нужного ресурса (файла HTML‑документа). Допустим, что сайт, по которому нужно реализовать навигацию, состоит из пяти страниц. Файлы страниц именуются 1.html, 2.html и т. д. У сайта также есть главная страница (index.html), на которой находится оглавление. Элементы оглавления позволяют перейти к соответствующим страницам, то есть являются гиперссылками. Тогда возможный вариант HTML‑документа с оглавлением сайта будет иметь следующий вид (пример 5.1).
Пример 5.1. Простая навигация между документами
<TITLE>Главная страница сайта</TITLE>
<BODY>
<DL>
<DT><STRONG>Оглавление</STRONG>
<DD>
<A href = "1.html">Первая страница сайта</A><BR>
<A href = "2.html">Вторая страница сайта</A><BR>
<A href = "3.html">Третья страница сайта</A><BR>
<A href = "4.html">Четвертая страница сайта</A><BR>
<A href = "5.html">Пятая страница сайта</A><BR>
</DL>
</BODY>
Для оформления оглавления использовался рассмотренный ранее список определений. При желании это оформление можно легко изменить. Как можно видеть на рис. 5.1, текст, заключенный между тегами элемента A, стал визуальным представлением гиперссылки в документе. На то, что помещается между тегами <A> и </A>, накладывается ограничение, которое нужно помнить: содержимым гиперссылки не может быть другая гиперссылка.
Рис. 5.1. Оглавление сайта
Если доводить реализацию навигации в рассматриваемом сайте до конца, то логично вставить в каждый HTML‑документ, который является отдельной страницей сайта, гиперссылки для перехода на страницу оглавления, а также для перехода на следующую и предыдущую страницы. Добавление таких ссылок в HTML‑документ в файле 3.html может выглядеть, например, следующим образом:
...
<A href = "index.html">Оглавление</A><BR>
<A href = "2.html">Предыдущая</A><BR>
<A href = "4.html">Следующая</A><BR>
...
До сих пор рассматривался переход при помощи гиперссылок в пределах одного сайта, причем все страницы сайта были расположены в одной папке. При этом для задания местоположения использовались относительные URI. Если страницы сайта расположены в разных папках (допустим, что названия папок совпадают с номерами страниц), то гиперссылки на странице оглавления будут иметь следующий вид:
...
<A href = "1/1.html">Первая страница сайта</A><BR>
<A href = "2/2.html">Вторая страница сайта</A><BR>
...
Для перехода к ресурсам, находящимся за пределами сайта, используются полные URI, например:
<A href = "mydomain.com/homepage.html">Домашняя страница</A>
Приведенная здесь гиперссылка позволяет перейти к HTML‑документу homepage.html, расположенному на сайте mydomain.com.