HTML, XHTML и CSS на 100% Квинт Игорь
</body>
</html>
Результат обработки браузером кода из листинга 2.6 представлен на рис. 2.6.
Рис. 2.6. Список с разными маркерами
В примере различные маркеры отмечают объекты разных типов.
Иногда удобнее создавать свои маркеры для списков, в этом случае внешний вид списков будет намного лучше соответствовать стилю вашего сайта и вашим желаниям.
В HTML есть возможность создать список с графическими маркерами. Для этого нужно вместо элемента LI подставить картинку с желаемым изображением. Элемент UL укажет браузеру, что надо сделать отступ, а с помощью элемента BR можно перенести строку.
В листинге 2.7 представлен пример создания списка с графическими маркерами.
<html>
<head>
<h2>Списки</h2>
<body>
<ul>
<img src="marker.jpg" />Венера<br />
<img src="marker.jpg" />Марс<br />
<img src="marker.jpg" />Земля<br />
</ul>
</body>
</html>
Результат обработки кода из листинга 2.7 показан на рис. 2.7.
Рис. 2.7. Список с графическими маркерами
Теперь можно использовать картинки для создания симпатичных списков, соответствующих стилю вашего сайта.
Нумерованный список
Однако использование неупорядоченных списков не всегда допустимо. Что делать, если нужно расписать порядок действий, например рецепт приготовления блюда? Для перечисления ингредиентов можно использовать неупорядоченный список, а для описания порядка действий понадобится пронумерованный список.
Нумерованные списки применяются, когда порядок следования пунктов списка имеет большое значение, например при описании алгоритмов или других пошаговых действий. Особенностью списков этого типа является то, что все их элементы упорядочены.
Для создания упорядоченных списков применяется элемент OL, которому требуется наличие закрывающего тега, а все пункты списка находятся внутри этого элемента.
У элемента OL есть атрибут type, который задает формат символов, используемых для нумерации.
Следующие значения атрибута type указывают, что пункты будут нумероваться с помощью:
• A – заглавных букв латинского алфавита;
• a – строчных букв латинского алфавита;
• I – заглавных римских цифр;
• i – строчных римских цифр;
• 1 – арабских цифр.
Вторым атрибутом элемента OL является атрибут start, указывающий, с какого числа начинать нумерацию всего списка.
В листинге 2.8 приведен пример кода для создания упорядоченных списков с разной нумерацией.
<html>
<head>
<h2>Списки</h2>
<body>
<ol type="1" start="6">
<li>Достать ключ</li>
<li>Вставить ключ в замочную скважину</li>
<li>Повернуть ключ по часовой стрелке на два оборота</li>
<li>Достать ключ из замка</li>
<li>Открыть дверь</li>
</ol>
<ol type="A">
<li>Достать ключ</li>
<li>Вставить ключ в замочную скважину</li>
<li>Повернуть ключ по часовой стрелке на два оборота</li>
<li>Достать ключ из замка</li>
<li>Открыть дверь</li>
</ol>
<ol type="a">
<li>Достать ключ</li>
<li>Вставить ключ в замочную скважину</li>
<li>Повернуть ключ по часовой стрелке на два оборота</li>
<li>Достать ключ из замка</li>
<li>Открыть дверь</li>
</ol>
<ol type="I">
<li>Достать ключ</li>
<li>Вставить ключ в замочную скважину</li>
<li>Повернуть ключ по часовой стрелке на два оборота</li>
<li>Достать ключ из замка</li>
<li>Открыть дверь</li>
</ol>
<ol type="i">
<li>Достать ключ</li>
<li>Вставить ключ в замочную скважину</li>
<li>Повернуть ключ по часовой стрелке на два оборота</li>
<li>Достать ключ из замка</li>
<li>Открыть дверь</li>
</ol>
</body>
</html>
Фрагмент отображения в браузере кода из листинга 2.8 показан на рис. 2.8.
Рис. 2.8. Упорядоченные списки
В примере созданы списки с различными типами нумерации, для списка с арабской нумерацией задан стартовый номер 6.
При создании упорядоченных списков на элемент LI можно возложить дополнительные функции. Как и в примере с маркированными списками, в элементе LI можно задать вид нумерации конкретного пункта с помощью атрибута type. Помимо этого, с помощью атрибута value можно задать номер, с которого будет продолжена нумерация списка.
В примере из листинга 2.9 представлен код для создания списка с разными типами нумерации и различным порядком следования элементов.
<html>
<head>
<h2>Списки</h2>
<body>
<ol type="1" >
<li type="1" value="10">Закрой дверь</li>
<li>Сходи в магазин</li>
<li value="1">Открой дверь</li>
<li>Возьми деньги</li>
<li type="I">Иди налево</li>
<li type="I">Потом поверни направо</li>
<li>Увидишь магазин</li>
</ol>
</body>
</html>
Результат обработки листинга 2.9 представлен на рис. 2.9.
Рис. 2.9. Упорядоченный список с разной нумерацией
Как видно из примера, порядок нумерации и тип ее отображения отделены друг от друга, изменение типа чисел не влияет на числовое обозначение пунктов.
Список определений
Бывает, что на сайте нужно создать список терминов или словарь. Это особенно актуально для сайтов узкой направленности. Для создания подобных конструкций служит список определений.
Список определений – это особый вид списка, который применяется для форматирования словарей или когда необходимо пояснять значения терминов.
Особенность списка определений следует из его функций: элемент такого списка всегда состоит из двух частей. Первая часть задает определяемое слово, а вторая – описание или расшифровку термина. При этом форматирование производится таким образом, что описание термина отображается с отступом от края экрана и, возможно, с пропуском строки от определения.
Для организации списков определений служит элемент DL – внутри него будут находиться определение и описание термина. У этого элемента нет атрибутов, кроме стандартных style и class, с помощью которых к данному определению можно подключить стили.
Чтобы внести информацию внутрь элемента DL, нужно задать элементы DT и DD. Первый используется для того, чтобы задать определение; у него нет никаких особенных атрибутов.
Второй применяется для описания термина из элемента DT. Особых атрибутов в нем также не предусмотрено. Чтобы изменить вид информации, представленной в этом элементе, нужно использовать таблицы стилей.
В листинге 2.10 представлен пример создания списков определений.
<html>
<head>
<h2>Списки</h2>
<body>
<dl>
<dt>Земля</dt>
<dd>Третья планета Солнечной системы</dd>
<dt>Марс</dt>
<dd>Четвертая планета Солнечной системы</dd>
</dl>
</body>
</html>
Результат работы кода из листинга 2.10 показан на рис. 2.10.
Рис. 2.10. Списки определений
На рис. 2.10 видны особенности форматирования списков определений; информацию в таком виде гораздо проще воспринимать.
Создание вложенных списков
Возможностей простых списков часто не хватает. Например, при создании оглавлений не обойтись без вложенных пунктов. Поэтому рассмотрим создание вложенных списков.
В HTML можно комбинировать и вкладывать друг в друга списки разных типов, но при этом нужно внимательно следить за тем, где заканчивается вложенный список, а где список верхнего уровня, иначе будут проблемы с отображением информации.
В листинге 2.11 представлен код для создания вложенного списка.
<html>
<head>
<h2>Списки</h2>
<body>
<ol>
<li>
Открой дверь
<ul>
<li>Ключом</li>
<li>Отмычкой</li>
</ul>
</li>
<li>
Зайди в квартиру
<ul>
<li>Тихо шагая</li>
<li>Громко топая</li>
</ul>
</li>
<li>Ложись спать</li>
</ol>
</body>
</html>
На рис. 2.11 можно увидеть, как выглядит вложенный список.
Рис. 2.11. Вложенный список
Видно, что элементы внутренних списков отступают от элементов списка более высокого уровня.
Мы разобрались с большей частью оформления текста, правда, осталось самое главное – то, на чем основан Интернет, – ссылки.
2.5. Ссылки
По своей сути Интернет – это текст и ссылки. Ссылки связывают документы, разбросанные по всему Интернету, в одну сеть. Ваш сайт может находиться на разных компьютерах, но для посетителя он будет казаться единым целым, и все это благодаря ссылкам.
Можно выделить два типа ссылок: внешние и внутренние. Первые связывают страницы в один сайт и помогают передвигаться по нему. Вторые помогают передвигаться в рамках одной страницы.
Внешние ссылки
Внешними называют ссылки на объекты, расположенные вне текущей страницы. Это могут быть картинки, другие страницы сайта, мультимедийные приложения.
Основой внешних ссылок является URL-адрес объекта, на который вы собираетесь сослаться.
Для создания гиперссылок в HTML служит элемент A, который требует наличия закрывающего тега. Внутри элемента располагается текст, который будет выделен как ссылка. На самом деле, чтобы сообщить человеку, что в каком-то месте сайта у вас расположена ссылка, совершенно не обязательно писать прямым текстом адрес следующей страницы. Язык HTML дает возможность «замаскировать» адрес под текст ссылки. Получается, что у вас отдельно есть текст ссылки, который должен внятно описывать, что пользователь увидит, перейдя по ней, и отдельно находится адрес страницы, на которую будет сделан переход при щелчке кнопкой мыши на ссылке. Между тегами <A> и </A> располагается именно текст ссылки.
Адрес документа для перехода записывается в элементе A в качестве значения атрибута href. Таким образом, перемещение по сайту становится удобным, легким и прозрачным для пользователя. Ему абсолютно все равно, где находится документ, на который указывает ссылка, он видит только текст описания.
В листинге 2.12 представлен пример создания ссылки на HTML-страницу и рисунок.
<html>
<head>
<h2>Ссылки</h2>
<body>
<a href="aboutme.html">Обо мне</a><br />
<a href="myfoto.jpg">Мое фото</a>
</body>
</html>
Пример отображения ссылок в браузере показан на рис. 2.12.
Рис. 2.12. Ссылки
Текст ссылки отображается подчеркнутым, а указатель мыши меняет вид при наведении на ссылку.
Когда посетитель сайта щелкнет кнопкой мыши на ссылке, он перейдет на страницу, которая указана в качестве адреса.
Что же делать, если нужно организовать быстрое перемещение в рамках одной страницы? Здесь тоже помогут ссылки.
Внутренние ссылки
Внутренние ссылки организуют переходы внутри одного HTML-документа. Они применяются, когда на одной странице много текста. Для простоты навигации можно создать ссылки, при щелчке кнопкой мыши на которых пользователь автоматически перейдет к нужной части документа.
Чтобы создать такую ссылку, сначала нужно определить место, к которому ссылка приводит. Это делается с помощью атрибута name элемента A. Необходимый кусок текста заключается в элемент A. Хотя совершенно не обязательно помещать туда текст, можно просто установить теги этого элемента в месте, к которому браузер должен переходить при щелчке кнопкой мыши на ссылке.
В качестве значения атрибута name можно взять любое имя, желательно, чтобы оно характеризовало текущее место, так вам самим будет проще пользоваться метками.
Затем нужно создать ссылку на эту метку. Ссылка на внутреннюю метку создается так же, как и ссылка на внешний документ, только вместо URL-адреса желаемой страницы надо ввести адрес метки в виде #met1. При этом metl – имя вашей метки.
Теперь при щелчке кнопкой мыши на ссылке браузер автоматически перейдет к месту, указанному меткой.
В листинге 2.13 показан пример создания внутренних ссылок.
<html>
<head>
<h2>Ссылки</h2>
<body>
<a name="met2">Это метка для перехода 2</a><br />
<a href="#met1">Щелкните кнопкой мыши для перехода к метке 1</a><br />
<a href="#met2">Щелкните кнопкой мыши для перехода к метке 2</a><br />
<a name="met1">Это метка для перехода 1</a>
</body>
</html>
Представление внутренних ссылок в браузере показано на рис. 2.13.
Рис. 2.13. Внутренние ссылки
Как видно, внутренние ссылки при отображении ничем не отличаются от внешних, а текст, отмеченный как метка, никак не выделяется.
Внутренние ссылки по своему синтаксису такие же, как и внешние, поэтому атрибуты элемента A применимы для обоих типов.
Общие моменты
Все немногочисленные атрибуты элемента A можно применять при создании как внутренних, так и внешних ссылок, их действие в зависимости от этого не меняется.
У элемента A есть два вспомогательных атрибута. Первый – target – указывает на то, в каком окне должен открываться документ, отображающийся при выборе ссылки.
Следующие значения атрибута target указывают, что страница загружается:
Читать бесплатно другие книги:
