Опубликован: 25.10.2006 | Уровень: для всех | Доступ: платный
Лекция 3:

Гипертекстовые ссылки

< Лекция 2 || Лекция 3: 1234 || Лекция 4 >
Аннотация: Эта лекция посвящена способам организации связей между ресурсами с помощью гипертекстовых ссылок. Рассматриваются способы разбивки окна браузера на несколько независимых частей.
Ключевые слова: Web, тег, якорь, WAIS, меню, noframes

Гипертекстовые ссылки необходимы для соединения с другими документами в Web. Для их записи используется тег <a>, который называют "якорь" (аnchor).

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

Этот пример показывает, как создавать ссылки в документе HTML.

<html>
<body>

<p>
<a href="page1.htm">
Этот текст</a> является ссылкой на страницу на
этом Web-сайте.
</p>

<p>
<a href="http://www.intuit.ru/">
Этот текст </a> является ссылкой на страницу 
во Всемирной Паутине.
</p>

</body>
</html>

Пример выполнения данного HTML-кода

Изображение в качестве ссылки

Этот пример показывает, как использовать в качестве ссылки изображение.

<html>
<body>
<p>
Можно также использовать в качестве ссылки изображение:
<a href="http://www.intuit.ru/">
<img border="0" src="logo.gif" width="285" height="52">
</a>
</p>

</body>
</html>

Пример выполнения данного HTML-кода

Описание тега гипертекстовой ссылки

Якорь (аnchor) позволяет устанавливать связь с любыми ресурсами во Всемирной Сети: другую страницу HTML, изображение, звуковой файл, видеоклип, и т.д.

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

<a href="url">текст ссылки</a>

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

<a href="http://www.intuit.ru/">Добро пожаловать в ИНТУИТ!</a>

Такой же синтаксис используется для перехода во вложенную папку, например в папку "Помощь" на сайте Интернет-Университета Информационных Технологий используется код:

<a href="http://www.intuit.ru/help/">Страница помощи на сайте ИНТУИТ!</a>

Всегда добавляйте завершающую косую черту к ссылкам на вложенные папки. Если ссылка имеет следующий вид: href="http://www.intuit.ru/help", то будет создано два запроса HTTP к серверу, так как сервер добавит косую черту к адресу и создаст новый запрос следующего вида: href="http://www.intuit.ru/help/". При этом вызове обращение обычно происходит к странице index.htm внутри папки help или к другому файлу – это зависит от настроек web-сервера.

С помощью данного атрибута можно задавать ссылки не только по протоколу HTTP, но и по другим:

  • http://... - создает ссылку на www-документ;
  • ftp://... - создает ссылку на ftp-сайт или расположенный на нем файл;
  • mailto:... - запускает почтовую программу-клиент с заполненным полем имени получателя. Если после адреса поставить знак вопроса, то можно указать дополнительные атрибуты, разделенные знаком "&";
  • news:.. - создает ссылку на конференцию сервера новостей;
  • telnet://... - создает ссылку на telnet-сессию с удаленной машиной;
  • wais://... - создает ссылку на WAIS - сервер;
  • gopher://... - создает ссылку на Gopher - сервер;

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

  • _self - указывает, что определенный в параметре href документ должен отображаться в текущем фрейме;
  • _parent - указывает, что документ должен отображаться во фрейме-родителе текущего фрейма. Иначе говоря, _parent ссылается на окно, содержащее frameset, включающий текущий фрейм;
  • _top - указывает, что документ должен отображаться в окне-родителе всей текущей фрэймовой структуры;
  • _blank - указывает, что документ должен отображаться в новом окне.
<html>
<body>
<a href="http://www.intuit.ru/" target="_blank">Добро пожаловать в ИНТУИТ!</a>
<a href="http://www.intuit.ru/" target="_parent">Добро пожаловать в ИНТУИТ!</a>
<a href="http://www.intuit.ru/" target="_top">Добро пожаловать в ИНТУИТ!</a>
<a href="http://www.intuit.ru/" target="_self">Добро пожаловать в ИНТУИТ!</a>
</body>
</html>

Пример выполнения данного HTML-кода

Для перехода внутри страницы к конкретному разделу используют атрибут name тега гипертекстовой ссылки a, при помощи которого создается именованный якорь.

<a name="label">ссылка на именованный якорь</a>

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

Для перехода на место, которое отмечено именованным якорем используется знак # и имя якоря в конце URL следующим образом:

<a href="page1.html#label">переход на именованный якорь </a>

Переход внутри файла "page1.html" на именованный якорь выглядит следующим образом:

<a href="#label">переход на именованный якорь </a>

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

< Лекция 2 || Лекция 3: 1234 || Лекция 4 >
Анна Королёва
Анна Королёва

Пожалуйста, уточните, кто автор курса Основы работы с HTML ?

Федор Антонов
Федор Антонов

Здравствуйте!

Записался на ваш курс, но не понимаю как произвести оплату.

Надо ли писать заявление и, если да, то куда отправлять?

как я получу диплом о профессиональной переподготовке?

Цагана Бадмаева
Цагана Бадмаева
Россия, РЭУ им.Плеханова
Rustam Asrankulov
Rustam Asrankulov
Россия