Лабораторная работа 3. Гиперссылки

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

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

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

Элемент A- самый необходимый элемент, без которого Интернет просто немыслим. Атрибуты:

• HREF– определяет находящийся между начальным и конечным тегами текст или изображение как гипертекстовую ссылку (URLили линк) на документ (и/или область документа), указанный в значении данного атрибута. Возможные значения:

http://... – создает ссылку наwww-документ;

ftp://... – создает ссылку наftp-сайт или расположенный на нем файл;

mailto:... – запускает почтовую программу - клиент с заполненным полем имени получателя. Если после адреса поставить знак вопроса, то можно указать дополнительные атрибуты, разделенные знаком "&";

news:.. – создает ссылку на конференцию сервера новостей;

telnet://... – создает ссылку наtelnet-сессию с удаленной машиной;

wais://... – создает ссылку наWAIS– сервер;

gopher://... – создает ссылку наGopher– сервер;

Если тип соединения и адрес машины не указаны, в качестве отправной точки используется адрес текущего документа. Это позволяет использовать относительныессылки. Например, линк <AHREF="docs/title.html"> Документация</A> будет ссылаться на файлtitle.htmlв подкаталогеdocs(относительно текущего).

• NAME– помечает находящуюся между начальным и конечным тегами область документа как возможный объект для ссылки. В качестве значения нужно латиницей написать любое слово - указатель, уникальное для данного документа. Например: <ANAME="part">Раздел1</A>. Теперь вы можете ссылаться на помеченную область простым указанием ее имени после имени документа. Например, линк <AHREF="document.html#part"> Раздел1 </A> отправит вас в раздел "part" файлаdocument.html, а линк <AHREF="#bottom"> В конец документа</A> – в раздел "bottom" текущего документа.

• TARGET– определяет окно (фрейм), на которое указывает гипертекстовая ссылка³. Этот атрибут используется только совместно с атрибутомHREF. В качестве значения необходимо задать либо имя одного из существующих фреймов, либо одно из следующих зарезервированных имен:

  • _self– указывает, что определенный в атрибутеHREFдокумент должен отображаться в текущем фрейме;

  • _parent– указывает, что документ должен отображаться во фрейме-родителе текущего фрейма. Иначе говоря,parentссылается на окно, содержащееFRAMESET, включающий текущий фрейм;

  • _top– указывает, что документ должен отображаться в окне-родителе всей текущей фреймовой структуры;

  • _blank– указывает, что документ должен отображаться в новом окне.

Пример 1:

<!-- Использование атрибута NAME: -->

<ANAME="history">История бодибилдинга</A>

...

<ANAME="now">Спорт глазами современника</A>

...

Вернуться к разделу<AHREF="#history">истории</A>

Пример 2:

<!-- Использование атрибута HREF: -->

<AHREF="ftp://ftp.cdrom.com"TARGET="_blank">FTP-site</A>

<AHREF="http://opengl.rdc.ru">Русский проект поOpenGL</A>

...

Пример 3:

<!-- Создадим ссылку для письма с указанием множества атрибутов -->

<A HREF="mailto:[e-mail]?subject=Напоминание

&cc=[e-mail]&body=Приходина занятия в университет.">

Отправить приглашение </A>.

<!-- или просто письмо : -->

<A HREF="mailto:[e-mail]?subject=Привет">авторам</A>.

Пример 4: Переход к документу, который находится в Интернете по указанному адресу. Для этого перехода нужно, чтобы компьютер был подключен к Интернету:

<A HREF=“http://uchinfo.com.ua/lessons.php”>

Уроки по информатике </A>

Пример 5: Щелчок на такой гиперссылке вызывает загрузку почтовой программы с уже заполненным полем адреса электронной почты.

<A HREF=“mailto:[e-mail]”>

Пишите мне </A>

Пример 6: Ссылка на определенное место в текущем документе:

<AHREF=“#chapter1”>Перейти к разделу 1 </A>

Пример 7: Ссылка на определенное место в документе 2.html:

<A HREF=“2.html#glava1”>Глава 1</A>

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

Создание гиперссылки внутри текущего документа или к определенному фрагменту какого-либо другого документа распадается на 2 части:

1. Создание метки (якоря), которая является целью гиперссылки. Выполняется следующими способами:

• путем использования атрибута name тега <A> NAME=“Строка символов”:

<H3><A NAME=“glava1”>Глава 1</A></H3>

• путем использования атрибута id в любом теге ID =“Строка символов”, причем атрибут ID можно добавлять в любой тег для создания якоря (<P ID=“label_1”>, <ADDRESS ID=“label_8”>):

<H3 ID=“glava1”>Глава 1</H3>

2. Создание самой гиперссылки (см. пример 6).

Можно использовать рисунки в качестве гиперссылки:

<A HREF=“адрес ссылки“><IMG SRC=“адрес картинки“></A>

<A HREF=“2.html“><IMG SRC=“foto.jpeg“ ></A>

Практическая часть

Задание 3.1.

Проделайте примеры 1 – 7, приведенные в тексте. В случае необходимости дополните примеры нужными тегами и другой информацией. Каждый пример разместите на отдельной странице браузера.