9.Html гиперссылки

Гиперссылки являются основой HTML и всемирной паутины. Они представляют собой текст (или картинку), нажав на который пользователь будет перемещен на другой документ или другое место в данном документе.

Гиперссылки выделяются на страницах подчеркнутым шрифтом синего цвета.

В HTML существует 2 вида гиперссылок:

• Внешние гиперссылки перемещают пользователя, нажавшего на них, на другой HTML документ.

• Внутренние гиперссылки перемещают пользователя на предварительно созданную закладку в документе, в котором они определены.

Обратите внимание: для краткости гиперссылки могут упоминаться как просто "ссылки".

Синтаксис гиперссылок

Создание внешней гиперссылки:

<a href="адрес">Текст ссылки </a>

адрес указывает адрес документа, на который будет перемещен пользователь после нажатия на ссылку.

Создание внутренней гиперссылки:

<!-- Создание гиперссылки на закладку -->

<a href="#bookmark">Текст ссылки </a>

<!-- Создание закладки -->

<a id="bookmark">Текст закладки. </a>

bookmark имя закладки (может быть произвольным).

Примеры использования

Создадим внешние ссылки, ведущие на главную страницу нашего сайта.

Пример 91

<html>

<body>

<a href="http://www.mooncake.ru/">www.mooncake.ru</a>

<a href="http://www.mooncake.ru/">

<img src='http://www.ponominalu.ru/pics/ponominalu/mooncake920x200.jpg’>

</body>

</html>

Теперь создадим внутренние ссылки на закладки.Ознакомьтесь с кодом программы и исправьте ( добавьте) необходимые фйлы/ папки для корректного (полного) изображения. Результат продемонстрируйте преподавателю.

Пример 92

<html>

<TITLE>Концертные записи пост-рок группы МУНКЕЙК</TITLE>

<BODY>

<b>Концерт 22.11.2012 в городе Риге</b><BR>

Скачать 18 самых впечатляющих фотографий можно

<A href = "Mooncakephoto/22-11-2002N.rar">здесь</A><BR>

<b>Концерт 24.12.2012 в том же городе Риге</b><BR>

Если вы хотите увидеть самые запоминающиеся эпизоды концерта, жмите

<A href = "Mooncakephoto/24-12-2002N.rar">сюда</A><BR>

</BODY>

</html>

Атрибут target

Атрибут target указывает как будет открываться документ, на который указывает ссылка.

Данный атрибут может иметь следующие значения:

• _top документ откроется в текущем окне браузера;

• _blank документ откроется в новом окне браузера;

• _self документ откроется в текущем фрейме;

• _parent — документ откроется в родительском фрейме.

Пример 93

<html>

<BODY>

<p> Ссылка, расположенная ниже, при переходе на нее будет открыта в новой вкладке браузера: </p>

<a href='http://www.mooncake.ru' target='blank'>www. mooncake.ru </a>

</BODY>

</html>

Сделайте самостоятельно:

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

2. Внесите изменения в код программы для открытия документа фрейме.

3. Внесите изменения в код программы для открытия документа в родительском фрейме.

Результат покажите преподавателю.

Сделайте сами

Создайте ссылки на закладки, находящиеся в коде: