ресурс для начинающих веб-разработчиков
комплексные веб-услуги по созданию сайтов

Справочный материал по основным языкам программирования и верстки сайтов.

Готовая методика создания простых и сложных динамичных сайтов, с использованием PHP и MySQL.

Использование веб-редактора Adobe Dreamweaver в разработке сайтов.

Использование графических редакторов Adobe Flash, Adobe Photoshop, Adobe Fireworks в подготовке веб-графики.

Разработка веб-сайтов под "ключ".

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

Гиперссылки. Абсолютный и относительный URL-адрес

Гиперссылки

Гиперссылки позволяют при помощи нажатия кнопки мыши быстро перемещаться от одного документа к другому. Именно гиперссылки связывают веб-страницы в единую сеть.

Внешние гиперссылки

Внешние гиперссылки вставляются в HTML-документ с помощью тега <a>. Основным параметром тега <a> является href. Именно этот параметр задает URL-адрес веб-страницы, которая будет загружена при щелчке мыши на указателе. В качестве указателя может быть текст.

Пример:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Внешние гиперссылки</title>
</head>

<body>
<a href="http://www.w3.org/MarkUp/">HTML</a>
</body>
</html>

В окне веб-браузера это будет выглядеть ТАК.

Или изображение.

Пример:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Внешние гиперссылки</title>
</head>

<body>
<a href="http://www.w3.org/MarkUp/"><img src="../images/w3c_home.png" width="72" height="48" alt="HTML"></a>
</body>
</html

В окне веб-браузера это будет выглядеть ТАК.

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

URL-адреса бывают абсолютными и относительными.

Абсолютный URL-адрес

Абсолютный URL-адрес содержит обозначение протокола, доменный или IP-адрес компьютера, путь к файлу, а также имя файла. Например:

http://sevidi.ru/webd/htmpage.html

Если файл находится в корневой папке, то путь может отсутствовать:

http://sevidi.ru/news.html

Имя файла также может отсутствовать. В этом случае загружается веб-страница, заданная по умолчанию в настройках веб-сервера:

http://sevidi.ru/

http://sevidi.ru/webd/

Относительный URL-адрес

При относительном задании URL-адреса путь определяется с учетом местоположения веб-страницы, на которой находится ссылка. Возможны следующие варианты:

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

    веб-страницы, находящейся по адресу:

  • http://sevidi.ru/webd/htmpage1.html

    нужно перейти на страницу:

    http://sevidi.ru/webd/htmpage2.html

    то ссылка будет такой:

    <a href = "htmpage2.html">Текст ссылки</a>

  • если с веб-страницы, находящейся по адресу
  • http://sevidi.ru/webd/dweb/file1.html

    нужно перейти на

    http://sevidi.ru/webd/dweb/htmtest/file2.html

    то ссылку можно указать так:

    <a href = "htmtest/file2.html">Текст ссылки</a>

  • если с веб-страницы, находящейся по адресу
  • http://sevidi.ru/webd/dweb/htmtest/file2.html

    нужно перейти на

    http://sevidi.ru/webd/dweb/file1.html

    то ссылка будет такой

    <a href = "../file1.html">Текст ссылки</a>

    А при переходе с

    http://sevidi.ru/webd/dweb/htmtest/file2.html

    на

    http://sevidi.ru/webd/file3.html

    ссылка будет такой

    <a href = "../../file3.html">Текст ссылки</a>

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

  • имя_окна — имя окна или фрейма;
  • _parent — указатель на родительский фрейм;
  • _blank — указатель на новое окно;
  • _top — указатель на фрейм верхнего уровня;
  • _self — указатель на тот же самый (текущий) фрейм.

Если требуется, чтобы при наведении указателя мыши на указатель ссылки появилась всплывающая подсказка (поясняющий текст), то в теге <a> следует использовать атрибут title, принимающий в качестве значения текст всплывающей подсказки.

Пример:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Гиперссылки. Всплывающая подсказка</title>
</head>

<body>
<a href="59.html" title="ссылка" target="_blank">Ссылка</a>
</body>
</html>

В окне веб-браузера это будет выглядеть ТАК.

Внутренние гиперссылки

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

Внутренняя гиперссылка также вставляется при помощи тега <a> с одним лишь отличием — параметр href содержит имя указателя, а не URL-адрес. Перед именем указателя ставится знак #.

<a href = "#y1">Глава 1</a>

Указатель создается с помощью тега <a>, но вместо параметра href используется параметр name, который задает имя указателя.

<a name = "y1">Глава 1</a>

Иногда указатель называют "якорем". Также можно сослаться на якорь другого документа. Это делается так:

<a href = "http://sevidi.ru/webd/dweb/htmpage1.html#y1">Структура документа</a>

Пример:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Структура документа с внутренними гиперссылками</title>
</head>

<body>
<h1 align="center">Название документа</h1>
<h2>Оглавление</h2>
<ul type="disc">
<li><a href="#y1">Глава 1</a>
<li><a href="#y2">Глава 2</a>
<li><a href="#y3">Глава 3</a>
<li><a href="#y4">Глава 4</a>
</ul>
<br>
<h2><a name="y1">Глава 1</a></h2>
<p>Содержание главы 1</p>
<h2><a name="y2">Глава 2</a></h2>
<p>Содержание главы 2</p>
<h2><a name="y3">Глава 3</a></h2>
<p>Содержание главы 3</p>
<h2><a name="y4">Глава 4</a></h2>
<p>Содержание главы 4</p>
</body>
</html>

В окне веб-браузера это будет выглядеть ТАК.

Гиперссылки на адрес электронной почты

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

<a href = "mailto:mail@mysite.ru">Текст</a>

Вместо URL-адреса указывается адрес электронной почты, перед которым добавляется слово "mailto:".

Примечание. Не следует публиковать ссылку с адресом электронной почты на сайте. Такие ссылки автоматически собираются роботами, и в дальнейшем этот E-mail будет завален спамом.