Элементы привязки (якорь – anchor)

Элемент привязки в ссылке может быть словом, группой слов или изображением. Существуют только два типа элементов привязки: текстовый и графический.

Текстовые броузер обычно выделяет цветом, отличным от цвета основного текста, подчеркиванием. Кроме того, курсор мыши на ссылке меняет свое изображение на указатель в виде руки.

Графические элементы привязки не подчеркиваются и не выделяются цветом, но могут быть обведены рамкой.

Пример организации текстовой гиперссылки представлен на рис. 4. Рассмотрим пример организации графической гиперссылки (рис. 5):

У нас в агентстве приветливые и компетентные диспетчеры

<br>

<a href=”inform.htm”><img src=”r.jpg”></a>

Рис. 5. Пример создания графической гиперссылки

В этом примере рисунок “r.jpg” является графическим элементом привязки. Броузер выделяет его синей рамкой.

Задание 4

1. Откройте раздел «Организация гиперссылок» в файле справочника “Sprav_html.doc”. Ознакомьтесь с атрибутами тега <А>. Будьте готовы ответить на вопросы по правилам задания значений этих атрибутов.

2. На предыдущих занятиях Вы разработали Web-страницы proekt_spisok.html и proekt_townhouse.html. Откройте proekt_spisok.html и оформите пункт этой страницы «Проекты таунхаусов и блокированных домов», как гиперссылку, целевым адресом которой является другая Web-страница – proekt_townhouse.html.

3. Оформите web-страницу о проекте D-152-1D,используя материалы (тексты и фотографии) из папки library/projects/№ D-152-1D.Все материалы должны быть использованы. В результате на web-странице у Вас должны быть следующие блоки:

· Заголовок

· Аннотация

· Материалы

· Цена за проект

· Планы

· Фасады

4. Сохраните web-страницу под именем proekt_D-152-1D.html. Примерный результат на рис. 6

5. Аналогичным образом оформите еще две web-страницы: о проекте H-173-1P и о проекте R-189-1P. Все материалы находятся в папке projects.Сохраните под именами proekt_H-173-1P.html и proekt_R-189-1P.html соответственно.

Рис. 6. Web-страница proekt_ D-152-1D.html.

6. На web-странице proekt_townhouse.html оформите изображение проекта D-152-1D и фразу «Проект D-152-1D» как гиперссылки на страницу proekt_ D-152-1D.html, на которой содержится более полная информация об этом проекте (рис. 7).

7. Аналогичным образом оформите ссылки для проектов H-173-1P и R-189-1P.

8. Проверьте работоспособность гиперссылок.

Рис. 7. Изображение является гиперссылкой