Лабораторная работа №3 Организация гиперссылок
На предыдущих занятиях Вы разработали домашнюю страницу Вашего будущего сайта. Согласно схеме сайта (рис. 1) и разработанной домашней странице у Вас должны быть реализованы гиперссылки на следующие разделы: «Услуги», «Об агентстве», «Новости», «Сведения о породах», «Фотогалерея». Кроме того, на домашней странице присутствуют еще две гиперссылки «Вы потеряли?» и «Вы хотите взять лохматого друга?».
Для того чтобы реализовать эти гиперсвязи, Ва необходимо:
Подготовить страницы, связанные с домашней страницей гиперссылками;
Освоить и реализовать технологию организации гиперссылок.
Возможность связывания документов друг с другом путем создания гиперсвязей является главной особенностью гипертекста. При этом щелчок мыши на одном объекте вызывает переход к другому объекту, связанному с ним.
Таким образом могут быть организованы переходы ко многим страницам, возвраты назад и переходы по страницам, которые находятся на других серверах.
В итоге все информационное пространство можно представить как один гигантский набор взаимосвязанных документов – это и есть World Wide Web.
Ссылка фактически состоит из двух частей. Во-первых, это место в документе, помеченное как ссылка. Оно называется элементом привязки (или якорем – anchor). Во-вторых, это та часть, которая сообщает броузеру, что ему следует делать при щелчке на ссылке. Это ссылка на URL. При щелчке на элементе привязки броузер загружает файл или документ, соответствующий ссылке на URL.
На рис. 10 приведен пример HTML-кода создания гиперссылки и вид в броузере страницы с этим кодом:
<html>
<body>
Подробную информацию об услугах нашего агентства Вы можете получить
<br>
<a href="inform.htm">здесь</a>
</body>
</html>
Рис. 10. Пример создания текстовой гиперссылки
В этом примере слово “здесь” является элементом привязки (или якорем – anchor), а часть HREF=”inform.htm” представляет ссылку на URL и означает, что при щелчке на элементе привязки должен быть загружен файл “inform.htm”, находящийся в том же адресе сети.
Элементы привязки
Элемент привязки в ссылке может быть словом, группой слов или изображением. Существуют только два типа элементов привязки: текстовый и графический. Большинство текстовых элементов привязки похожи между собой. Броузер обычно выделяет их цветом, отличным от цвета основного текста, подчеркиванием. Кроме того, курсор мыши на ссылке меняет свое изображение на указатель в виде руки.
Графические элементы привязки не подчеркиваются и не выделяются цветом, но могут быть обведены рамкой.
Пример организации текстовой гиперссылки представлен на рис. 10. Рассмотрим пример организации графической гиперссылки:
<html>
<head>
<body>
У нас в агентстве приветливые и компетентные диспетчеры
<br>
<a href=”inform.htm”><img src=”r.jpg”></a>
</body>
</html>
Рис. 11. Пример создания графической гиперссылки
В этом примере рисунок “r.jpg” является графическим элементом привязки. Броузер выделяет его синей рамкой.
Рекомендации по выполнению лабораторной работы
При выполнении лабораторной работы Вам понадобятся следующие разделы справочника по HTML:
Форматирование таблиц;
Организация гиперссылок.
Необходимая Вам информация о собаках и кошках, советы ветеринара и коллекция картинок животных представлены на прилагающемся компакт-диске в папках “Dog” и “Cat”.
Задание 1
Откройте раздел “Организация гиперссылок” в файле справочника “Sprav_html.doc” на компакт-диске. Ознакомьтесь с атрибутами тега <А>. Законспектируйте материал о тех атрибутах, которые понадобятся Вам при оформлении домашней страницы. Будьте готовы ответить на вопросы по правилам задания значений этих атрибутов.
На предыдущих занятиях мы разработали Web-страницу, представленную на рис. 7. Откройте файл “basset.htm” и оформите заголовок этой страницы «Бассет-хаунд», как гиперссылку, целевым адресом которой является другая Web-страница – “por_bas.htm”, содержащая подробную характеристику породы бассет-хаунд. Создайте в своем каталоге новую папку “Anchor” и сохраните в ней новый файл под именем “basset_s.htm”. Чтобы подготовить страницу “por_bas.htm” (которую тоже нужно сохранить в папке “Ancor”) с характеристикой породы, воспользуйтесь информацией, содержащейся в папке «Dog/Породы» на компакт-диске.