Оценить:
 Рейтинг: 4.6

HTML, XHTML и CSS на 100%

Жанр
Год написания книги
2010
Теги
<< 1 ... 13 14 15 16 17 18 19 20 21 ... 30 >>
На страницу:
17 из 30
Настройки чтения
Размер шрифта
Высота строк
Поля

<title>Ссылки</title>

<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 показан пример создания внутренних ссылок.

Листинг 2.13. Внутренние ссылки

<html>

<head>

<title>Ссылки</title>

<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 указывают, что страница загружается:

• _blanc – в новое окно браузера;

• _parent – во фрейм-родитель;

• _self – в текущее окно;

• _top – в полное окно браузера.

Этот атрибут очень полезен, потому что иногда бывает удобно открыть ссылку в новом окне. Например, когда ссылка уводит на другой сайт, а вы не хотите, чтобы пользователь забыл о вашем. Открытие страницы в новом окне – гарантия того, что пользователь снова взглянет на вашу страницу.

Вторым вспомогательным атрибутом является title, он позволяет создать всплывающую подсказку для вашей ссылки, что бывает очень удобно и дает пользователю дополнительную информацию о том, что его ждет под ссылкой. Значение атрибута – текст всплывающей подсказки.

В листинге 2.14 представлен пример создания ссылок с рассмотренными выше атрибутами.

Листинг 2.14. Ссылки с дополнительными атрибутами

<html>

<head>

<title>Ссылки</title>

<body>

<a href="aboutme.html" target="_blank" title="Перейдя по ссылке, вы сможете узнать обо мне">Обо мне</a>
<< 1 ... 13 14 15 16 17 18 19 20 21 ... 30 >>
На страницу:
17 из 30