Александр Чиртик
HTML: Популярный самоучитель
Глава 4
Списки
В этой главе будут рассмотрены особенности введения в HTML-документы простых и в то же время таких удобных элементов текста, как списки. В HTML 4.01 поддерживаются три вида списков: маркированные, нумерованные, а также списки определений. Возможно создание вложенных списков.
4.1. Маркированные списки
Маркированные списки применяются для перечисления неупорядоченной информации. В таком списке каждый новый элемент выделяется маркером (отсюда и название списка). В HTML для обозначения маркированного списка используется элемент UL, который задается парными тегами <UL> и </UL>. Между тегами помещаются элементы списка. Текст элементов списка начинается после тега <LI> и может заканчиваться тегом </LI>.
С закрывающим тегом </LI> ситуация такая же, как и с закрывающим тегом </P>: использование его необязательно. Если тег </LI> опустить, то текстом элемента списка считается весь текст, расположенный до следующего тега <LI> или до закрывающего тега </UL>. Ниже приведен пример простого маркированного списка, состоящего из трех элементов.
<UL>
<LI>Первый элемент
<LI>Второй элемент
LI>Третий элемент
</UL>
К тексту элементов любых списков можно применять рассмотренные ранее средства HTML по форматированию текста.
Рассматриваемые элементы UL и LI имеют ряд атрибутов. Специфичными атрибутами элемента UL являются следующие:
• compact – заставляет браузер показывать список более компактно (действие этого атрибута зависит от конкретного браузера);
• type – позволяет задать тип маркера списка, может принимать следующие значения: circle (круг без заливки), dict (круг с заливкой) и square (квадрат).
Атрибут type можно указывать и для нужных элементов списка LI, если понадобится изменить тип маркера только некоторых элементов списка. На рис. 4.1 приведен пример того, как отражается задание различных значений атрибута type на отображении списка браузером.
Рис. 4.1. Маркированные списки
Ниже приведен текст HTML-документа, который был обработан браузером (пример 4.1).
Пример 4.1. Маркированные списки
<TITLE>Маркированные списки</TITLE>
<BODY>
Список с закрашенными круглыми маркерами
<UL>
<LI> Первый элемент
<LI> Второй элемент
</UL>
Список с круглыми незакрашенными маркерами
<UL type = "circle">
<LI> Первый элемент
<LI> Второй элемент
</UL>
Список с квадратными маркерами
<UL type = "square">
<LI> Первый элемент
<LI> Второй элемент
</UL>
Список с разными маркерами элементов
<UL>
<LI> Закрашенный круг
<LI type = "circle"> Окружность (type = circle)
<LI type = "square"> Квадрат (type = square)
</UL>
</BODY>
4.2. Нумерованные списки
Нумерованные списки применяются для упорядочения приводимых данных. При нумерации элементов таких списков могут быть использованы как арабские, так и римские цифры, буквы латинского алфавита.
Нумерованный список в тексте HTML-документа обозначается элементом OL при помощи парных тегов <OL> и </OL>. Элементы нумерованного списка задаются в точности так же, как и элементы маркированного списка. Нумерованный список несколько отличается от маркированного не только внешним видом, но и набором атрибутов и их возможными значениями:
• compact – заставляет браузер отображать список компактно;
• type – задает тип нумерации элементов списка, доступные значения: 1 (используются арабские цифры, по умолчанию), I или i (большие или малые римские цифры), A или a (большие или малые буквы латинского алфавита);
• start – номер первого элемента списка (при задании start нужно учитывать тип нумерации элементов списка, например номеру 5 соответствует латинская буква E).
Атрибут start часто используется, когда нужно продолжить нумерацию предшествующего списка после отрывка текста, не являющегося элементом ни одного списка (например, после пояснения элемента предшествующего списка). В примере 4.2 показано использование различных типов нумерации списков.
Пример 4.2. Нумерованные списки
<TITLE>Нумерованные списки</TITLE>
<BODY>
Нумерация арабскими цифрами
<OL>
<LI> Первый элемент
<LI> Второй элемент
</OL>
Продолжение нумерации, но большими римскими цифрами
<OL type = "I" start = 3>
<LI> Третий элемент
<LI> Четвертый элемент
</OL>
Новый список, нумерация большими латинскими буквами
<OL type = "A">
<LI> Первый элемент
<LI> Второй элемент
</OL>
</BODY>
Списки, использованные в примере 4.2, выглядят в окне браузера так, как показано на рис. 4.2.
Рис. 4.2. Нумерованные списки
Значение атрибута type можно отдельно указать для любого элемента списка. Кроме того, для элементов нумерованного списка можно задать значение атрибута value. Его действие аналогично атрибуту start элемента OL с тем лишь отличием, что он изменяет нумерацию, начиная с того элемента, для которого указано значение атрибута value. Например, задание атрибута value так, как сделано ниже в примере 4.3, приведет к результату, который показан на рис. 4.3.
Рис. 4.3. Изменение нумерации внутри элементов списка
Пример 4.3. Изменение нумерации списка
<TITLE>Изменение нумерации</TITLE>
<BODY>
<OL>
<LI> Первый элемент
<LI value = 10> Второй элемент
<LI> Третий элемент
<LI value = 20 type = "A"> Четвертый элемент
<LI type = "A"> Пятый элемент
</OL>
</BODY>
Может возникнуть вопрос: что произойдет, если задать нумерацию буквами такого длинного списка, на элементы которого не хватит и всех букв латинского алфавита? Ответ таков: для нумерации элементов списка с 27-го элемента используются две латинские буквы (например, AA, AB, AC и т. д.), с 703-го элемента используются 3 латинские буквы и т. д.
4.3. Списки определений
Интересной разновидностью списков являются списки определений. Как можно догадаться из названия, первоначально эти списки были введены для более наглядного представления определений терминов.
Список определений задается внутри HTML-элемента DL (для его задания используются парные теги <DL> и </DL>). Каждый элемент списка определений состоит из двух частей: из термина (HTML-элемент DT) и определения термина (HTML-элемент DD). Пример текста HTML-документа, содержащего список определений, приведен ниже (пример 4.4).
Пример 4.4. Список определений
<TITLE>Список определений</TITLE>
<BODY>
<DL>
<DT>HTML
<DD>Широко используемый язык гипертекстовой разметки
<DT>WWW
<DD>От англ. World Wide Web, глобальная сеть из соединенных между собой гипертекстовых документов
</DL>
</BODY>
Как можно видеть на рис. 4.4, браузер по-разному отображает сами термины и определения этих терминов, причем делает это так, что сразу понятно, где определение, а где термин.
Рис. 4.4. Список определений
Все особенности использования закрывающих тегов </DT> и </DD> аналогичны особенностям использования тега </LI>, то есть, несмотря на то что эти теги определены, использовать их совершенно не обязательно.
В следующем разделе при рассмотрении особенностей создания вложенных списков будет показано, как списки определений могут повысить наглядность текста, а также подчеркнуть особую роль некоторых абзацев в общем тексте.
4.4. Создание вложенных списков
Важной особенностью списков в HTML является та простота, с которой можно создавать списки различной вложенности, используемые для очень подробной и разветвленной классификации. На рис. 4.5 приведен пример небольшого трехуровневого списка.
Рис. 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.
Загрузка файлов
Гиперссылки можно использовать не только для перехода между различными HTML-документами. С их помощью можно выполнять загрузку с серверов различных файлов: архивов, иллюстраций, музыки, видео и т. д. Например, при организации содержания своего электронного фотоальбома можно использовать пример 5.2.
Пример 5.2. Использование ссылок на файлы рисунков
<TITLE>Фотографии из отпуска</TITLE>
<BODY>
<DL>
<DT><STRONG>Мои фотографии на рыбалке</STRONG>
<DD>
<A href = "1/1.jpg">Вот это рыбина!</A><BR>
<A href = "1/2.jpg">Чуть не искупался</A><BR>
…
</DL>
</BODY>
Если вы выберете какую-либо ссылку, то браузер загрузит соответствующее изображение. Кстати, подобия гиперссылок используются и при вставке изображений непосредственно в HTML-документ, но как это делается, будет рассмотрено в следующем разделе.
Рассмотрим пример, который можно часто встретить при использовании различных хранилищ файлов. Допустим, есть сайт, с которого можно скачать архивы с концертными фотографиями какой-нибудь рок-группы. Тогда страницу оглавления имеющихся архивов можно реализовать в виде следующего HTML-документа (пример 5.3).
Пример 5.3. Использование ссылок на файлы архивов
<TITLE>Концертные записи группы РАСПАД ЭЙНШТЕЙНИЯ</TITLE>
<BODY>
<DL>
<DT><STRONG>Концерт 22.11.2002 в городе N</STRONG>
<DD>
Скачать 18 самых впечатляющих фотографий можно
<A href = "photo/22-11-2002N.rar">здесь</A><BR>
<DT><STRONG>Концерт 24.12.2002 в том же городе N</STRONG>
<DD>
Если вы хотите увидеть самые запоминающиеся эпизоды концерта, жмите
<A href = "photo/24-12-2002N.rar">сюда</A><BR>
</DL>
</BODY>
При выборе любой из ссылок браузер (если рассматривать Internet Explorer) отобразит окно, в котором спросит у пользователя, что делать с файлом архива: открыть или сохранить на диске компьютера пользователя. Пользователь может выбирать, что ему угодно. Важно лишь то, что он получил доступ к файлам архивов на сервере.
Ссылки на другие службы
Ранее рассматривалось использование гиперссылок только для навигации между HTML-документами и загрузки файлов с сервера с использованием протокола HTTP. В гиперссылках предыдущих примеров протокол HTTP не указывался, так как он используется по умолчанию.
Теперь будет рассмотрено создание гиперссылок на ресурсы, протокол работы с которыми отличен от HTTP: ссылки на службы новостей, ссылки на ресурсы FTP-серверов и ссылки на почтовые службы. Начнем со ссылок на ресурсы FTP-серверов. FTP – протокол передачи файлов (File Transfer Protocol), который является одним из самых старых протоколов Интернета. Этот протокол и теперь используется на некоторых серверах-хранилищах файлов (файловых серверах). Ниже приведен пример типичного адреса ресурса FTP-сервера:
ftp://file_storage.com
Как видно, URI FTP-ресурса отличается только наименованием протокола. Однако отличий FTP от HTTP при использовании несколько больше. Дело в том, в большинстве случаев FTP-серверы могут при установке подключения проводить авторизацию пользователя, то есть создавать именное подключение. В приведенном же ранее примере устанавливалось анонимное подключение. Чтобы подключиться к FTP-серверу под именем зарегистрированного на FTP-сервере пользователя, нужно указать в адресе имя пользователя следующим образом:
ftp://user234@file_storage.com
В большинстве случаев при установке именного FTP-подключения требуется ввод пароля. Если пароль нужно вводить, браузер отобразит окно ввода пароля.
Пароль можно указать прямо в адресе следующим образом (mypass – это и есть пароль):
ftp://user234:mypass@file_storage.com
Для создания гиперссылки на адрес электронной почты достаточно для атрибута href HTML-элемента A использовать похожее значение:
mailto:address@somemail.com
При переходе по такой гиперссылке откроется почтовая программа по умолчанию. При этом поле адреса будет заполнено значением address@somemail.com. При создании гиперссылки на адрес электронной почты можно позаботиться об автоматическом формировании текста, темы или других сведений, например:
mailto:address@somemail.com?subject=Тема письма
&cc=copyaddress@somemail.com&bcc=bcopyaddress@somemail.com
&body=Текст письма
В данном случае значения полей, которые будут заполнены в окне почтовой программы, указываются после адреса электронной почты. Так, например, если почтовая программа по умолчанию – Microsoft Outlook, то при выборе в окне браузера гиперссылки с приведенным выше значением атрибута href окно Microsoft Outlook будет выглядеть так, как показано на рис. 5.2.
Рис. 5.2. Автоматическое заполнение полей почтовой программы
Из рисунка можно увидеть, какое поле как обозначается в строке почтового адреса гиперссылки (subject, cc, bcc и body). Остается только лишь подчеркнуть, что символ & служит для разделения информации, заносимой в различные поля. Значения всех полей задавать не обязательно, но порядок их задания важен и является таким, как было показано в приведенном выше примере.
