Гиперссылки

Гиперссылка – это объект Web-страницы обычно выделенный цветом и подчеркиванием и содержащий адрес другой Web-страницы. Используется для быстрого перехода между документами World Wide Web.

Такая связь между HTML-документами и фрагментами документов организуется с помощью элемента А (от английского anchor – якорь), который оформляется на web-странице в виде тега-контейнера <A>. Тег <A>…</A> применяется в двух формах:
• В первом случае – при создании гиперссылки. Обязательным является атрибут href (от английского – hypertext reference – гипертекстовая ссылка). Форма записи:

<A href=”http://www.intel.ru/content/www/ru/ru/homepage.html”> Текст для щелчка</A>

Здесь значением атрибута href является URL (Uniform Resource Locator – унифицированный указатель ресурса), который записывается в виде абсолютного или относительного адреса.
Текст, размещенный внутри контейнера, выделяется подчеркиванием и цветом и становится активной зоной документа, чувствительной к щелчку мыши, который вызывает загрузку целевого документа. В этом случае выше приведденный пример будет выглядеть так:

Текст для щелчка

Цвет текста гиперссылки определяется настройками браузера (пункт меню Сервис/ Свойства обозревателя/ закладка Общие/ Цвета) или web-мастером, как значение атрибутов link (непосещённая ссылка), alink (активная ссылка) и vlink (посещенная ссылка) элемента BODY.
• Во втором случае – при создании метки (якоря, закладки) фрагмента. Обязательным является атрибут name. Форма записи:

Здесь значением атрибута name является имя метки – произвольный набор символов латинского алфавита или цифр записанных без пробела.

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

<A href=”#m1”> Текст для щелчка </A>

Пример записи перехода к фрагменту документа, имеющему метку m2, в случае указания абсолютного адреса:

<A href=”http://www.intel.com/products/index.htm#m2”> Текст для щелчка </A>

Практическая работа

1. В ранее созданном файле strtxt.htm под основным заголовком текста создать меню в виде списка ссылок на абзацы этого документа по форме:

<A href=”#m1”> Царское Село </A>

<A href=”#m2”> Город Пушкин </A>

и т.д.

Визуально это будет выглядеть так:
Царское Село Город Пушкин
и т.д.

2. Перед заголовком каждого абзаца создать соответствующие метки по указанной ниже форме. Они должны обеспечить переход из меню к соответствующему фрагменту.

<A name=”m1”> </A>Царское Село

<A name=”m2”> </A> Город Пушкин

и т.д.

3. В конце каждого абзаца запишите слова “В начало” и оформите их как переход по метке к началу документа (основного заголовка). Для чего создайте метку <A name=”m7″> </A> Город, в котором я живу и ссылку на неё <A href=”#m7″>В начало</A>

4. В конце текста Web-страницы записать слова Web-мастер, отформатировать их с использованием элемента ADDRESS и оформить как ссылку на документ vizitka.htm, содержащий информацию о web-мастере.

<ADDRESS><A href=”vizitka.htm”> Web-мастер </A></ADDRESS>

Визуально это будет выглядеть так:

Web-мастер

• Сохранить внесенные в документ изменения и открыть файл для просмотра в браузере – Файл/ Сохранить, а затем двойной щелчок по файлу strtxt.htm в месте его сохранения.

5. Создать файл vizitka.htm на основе имеемого шаблона:
• открыть шаблон для просмотра в браузере – двойной щелчок по файлу template.htm в месте его сохранения,
• открыть шаблон для редактирования в текстовом редакторе Блокнот – выбрать пункт в меню браузера Вид/ В виде HTML (Просмотр HTML-кода),
• сохранить шаблон под другим именем – Файл/ Сохранить как/ Тип файла – Все файлы/ Указать место сохранения, требуемое имя и расширение .htm/ Сохранить.

6. В созданном файле vizitka.htm оформить ссылку для перехода к файлу strtxt.htm:
• В разделе BODY после информации об web-мастере сделать запись: