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

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

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

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

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

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

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

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

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

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

Всегда добавляйте завершающую косую черту к ссылкам на вложенные папки. Если ссылка имеет следующий вид: style="color:#666666;" href="/external/?popup=0&url=http%3A%2F%2Fwww.intuit.ru%2Fhelp" onMouseOver="menuSetHelpText('intuit');return false;" onMouseOut="menuClearHelpText()" title="ссылка на INTUIT.ru", то будет создано два запроса HTTP к серверу, так как сервер добавит косую черту к адресу и создаст новый запрос следующего вида: style="color:#666666;" href="/external/?popup=0&url=http%3A%2F%2Fwww.intuit.ru%2Fhelp%2F" onMouseOver="menuSetHelpText('intuit');return false;" onMouseOut="menuClearHelpText()" title="ссылка на INTUIT.ru". При этом вызове обращение обычно происходит к странице 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 - указывает, что документ должен отображаться в новом окне.

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

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

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

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

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

Дополнительные примеры

Открытие ссылки в новом окне браузера

Этот пример показывает, как открыть ссылку на другую страницу в новом окне, чтобы посетителю не нужно было покидать ваш Web-сайт.

Ссылка в определенное место на той же странице

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

Создание ссылки mailto

Этот пример показывает, как соединиться с сообщением mail (будет работать только, если установлена служба mail).

Фреймы HTML

Фреймы используются для разбивки окна браузера на несколько независимых частей, каждая из которых представляет собой отдельный HTML-документ. Наиболее частое применение фреймов - это отделение меню от основного информационного наполнения. Хотя фреймы достаточно удобная вещь использование их не рекомендуется. Следует внимательно следить за тем чтоб теги формирующие фреймовую структуру располагались вне тегов <body>, так как они не относятся к телу документа.

Набор вертикальных фреймов

Этот пример показывает, как создать набор вертикальных фреймов с тремя различными документами.

Набор горизонтальных фреймов

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

Теги для работы с фреймами

Тег <frameset> определяет, как разделить окно на фреймы. Каждый frameset определяет набор строк или столбцов. Значения rows/cols указывают величину области экрана, которую будут занимать каждая строка/столбец. Атрибут framespacing - определяет расстояние между фреймами в пикселах.

Тег <frameset> является контейнером для всех остальных тегов фреймов. Между начальным и конечным тэгами кроме элементов <frame> и <noframe> могут находиться другие элементы <frameset>. То есть элемент <frameset> поддерживает вложенные конструкции фреймов.

Тег <frame> определяет, какой документ HTML поместить в каждый фрейм. Тег <frame> имеет атрибут noresize="noresize", который запрещает изменять размер фрейма пользователю.

В примере ниже задана фреймовая структура с двумя столбцами. Для первого столбца задано 25% ширины окна браузера. Для второго фрейма задано 75% ширины окна браузера. В первый столбец помещается документ HTML "frame_1.htm", а во второй столбец помещается документ HTML "frame_2.htm":

Необходимо учитывать, что браузер может не поддерживать фреймы, в этом случае следует использовать тег <noframes>.

При использовании фреймов теги <body></body> не используются. Однако, если добавить тег <noframes>, содержащий некоторый текст для браузеров, которые не поддерживают фреймы, необходимо будет поместить этот текст между тегами <body></body>. Например,

Горизонтальные и вертикальные фреймы

Этот пример показывает, как сделать набор фреймов с тремя документами, и как разделить их на строки и столбцы. При этом не все границы фреймов можно передвинуть.

Фрейм навигации

Этот пример показывает, как сделать фрейм навигации. Фрейм навигации содержит список ссылок, указывающих на второй фрейм.

Файл с именем "menu.htm" содержит ссылки на другие документы HTML, которые будут загружаться в frame_1. Исходный код для ссылок:

Встроенный фрейм

Этот пример показывает, как создать встроенный фрейм (фрейм внутри страницы HTML).