Ссылки HTML

В этой главе:

  • Синтаксис

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

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

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

  • Создание якоря (метки)

  • Ссылка на почтовый ящик

  • Ссылка картинка

  • Предварительная загрузка страниц

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

По сути, любая гипертекстовая ссылка является указателем адреса в глобальной сети, по которому можно моментально перейти в окне браузера. Успешный переход по ссылке возможен в двух случаях: если документ, на который ссылается документ, существует, и если синтаксис гиперссылки верен с точки зрения HTML.

Синтаксис

Для создания ссылок в HTML-документах используется элемент <a>, его содержимое выступает в качестве метки, с помощью которой и будет производится переход. Для того, чтобы из элемента <a> сделать активную гиперссылку, нужно добавить к нему атрибут href.

Атрибут href в качестве своего значения содержит адрес (относительный или абсолютный), на который будет вести ссылка. При щелчке на ссылку браузер получает и отображает документ, адрес которого указан в атрибуте href.

1
2
3
4
5
6
7
8
<html>
  <body>
 
    <p><a href="page.html">Ссылка</a></p>
    <p><a href="httр://www.puzzleweb.ru">Ссылка</a> на страничку в и-нете.</p>
 
  </body>
</html>

Результат данного примера в окне браузера:

примеры ссылок

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

Относительный адрес означает, что указание пути на нужный файл или страницу вашего сайта начинается относительно страницы, на которой расположена ссылка, либо относительно корневого каталога сайта. Рассмотрим компоненты (части), из которых может состоять относительный путь:

Части пути

Описание

Примеры значений

имя_файла

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

"page.html"

каталог/

Если файл, к которому нужно указать путь, расположен в дочернем каталоге относительно файла с ссылкой, это означает, что нам надо спуститься на один уровень вниз (в дочернюю папку текущего каталога), в этом случае путь начинается с указания имени дочернего каталога, после его имени указывается прямой слэш "/", он служит для разделения частей пути, после него указывается имя нужного нам файла.

Примечание: опуститься можно ровно на столько папок вниз, сколько вы их создали. К примеру, если вы создали папку на 10 уровней ниже корневой, то можете указать путь, который приведет вас вниз на 10 папок. Однако, если у вас так много уровней, это, скорее всего, означает, что организация вашего сайта излишне неудобно составлена.

"каталог/page.html"

"каталог1/каталог2/page.html"

../

Если нужно указать, что файл, на который вы ссылаетесь, находится в родительской папке, используйте символы .. (две точки), они означают подняться на один уровень вверх (в родительскую папку текущего каталога). Далее мы указываем прямой слэш "/", чтобы разделить части пути, и пишем имя нашего файла.

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

"../page.html"

"../../page.html"

"../../../кат1/кат2/page.html" - поднимаемся из текущей папки на три каталога выше и уже из него спускаемся на два уровня ниже к требуемому файлу

/

Относительный путь не обязательно всегда должен начинаться относительно текущего расположения страницы со ссылкой, он также может начинаться относительно корневого каталога сайта. К примеру, если нужный файл находится в корневом каталоге, путь может начинаться с символа "/", после которого надо всего лишь указать имя нужного файла, который расположен в корневом каталоге.

Примечание: когда символ "/" указывается первым, это означает начало пути от корневого каталога.

"/page.html"

"/кат1/кат2/car.png"

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

Абсолютный адрес обычно применяется для указания пути к файлу, который расположен на другом сетевом ресурсе. Он представляет из себя полный URL-адрес к файлу или странице. Первым делом в адресе указывается используемый протокол, после которого идет название домена (имя сайта). Например: http://www.пример.ру - так выглядит абсолютный путь к конкретному веб-сайту. http:// - это протокол передачи данных, а www.пример.ру - имя сайта (домен).

Абсолютный адрес можно использовать и на собственном сайте. Однако внутри сайта рекомендуется использовать в качестве значения ссылок относительный путь.

Теперь давайте рассмотрим, что такое URL-адрес. Каждая веб-страница в сети Интернет имеет свой собственный уникальный адрес, вот он как раз и называется URL. Аббревиатура URLрасшифровывается как Uniform Resource Locator (унифицированный адрес ресурса), проще говоря URL - это определитель местонахождения ресурса. Этот способ записи адреса стандартизирован в сети Интернет.

Пара примеров URL адресов:

1
2
3
"httр://www.puzzleweb.ru/"
 
"httр://www.puzzleweb.ru/html/all_tags.php"

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

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

Для указания браузеру, что при открытие страницы нужно использовать другое окно, вместо текущего, добавьте в элемент <a> атрибут target. Его значение сообщает браузеру о целевом окне для страницы. Если в качестве значения атрибута target вы используете _blank, то браузер для каждой новой страницы всегда будет открывать новое окно.

Попробуйте сами:

1
2
3
4
5
6
7
8
9
10
<html>
  <body>
 
    <p><a href="mypage.html" target="_blank">Другая страница</a>.
      Если вы установите для атрибута target значение _blank,
      то ссылка откроется в новом окне.
    </p>
 
  </body>
</html>

В таблице приведены все доступные значения для атрибута target.

Значение

Описание

_blank

Открывает документ в новом окне.

_self

Открывает документ в том же окне, где была нажата ссылка (значение по умолчанию).

_parent

Открывает документ в родительском окне.

_top

Открывает документ на весь экран.

имя_фрейма

Открывает документ в указанном фрейме.

Создание якоря (метки)

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

Для начала вам нужно определиться с местом, это может быть любой текст на странице, но чаще всего применяется короткий фрагмент текста заголовка. Затем нужно заключить этот текст внутрь элемента <a>, добавить к нему глобальный атрибут id, выбрать идентификационное имя для этого фрагмента и это имя записать в качестве значения в атрибут id:

1
<h2><a id="end">Заключение</a>.</h2>

Итак, наш якорь готов, теперь осталось сослаться на него, для этого просто добавьте символ "#" в конец вашей ссылки, за которым укажите идентификационное имя вашего якоря:

1
<a href="other.html#end">Заключение</a>

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

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

Ссылка на почтовый ящик

В создании ссылки на электронную почту нет ничего сложного, нужно просто в значении атрибута href ввести ключевое слово mailto, поставить после него двоеточие и написать адрес электронной почты, на который хотите сослаться:

Попробуйте сами:

1
2
3
4
5
6
7
8
9
10
<html>
  <body>
 
    <p>
      Это ссылка на почту:
      <a href="mailto:Этот адрес электронной почты защищен от спам-ботов. У вас должен быть включен JavaScript для просмотра.">моя почта</a>
    </p>
 
  </body>
</html>

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

Ссылка картинка

Вы наверное не раз замечали, что на многих сайтах в качестве ссылок используются различные изображения, которые по принципу работы ничем не отличаются от текстовых ссылок. Для того чтобы заменить обычную текстовую ссылку на изображение, нужно внутрь элемента <a> поместить тег <img>, который указывает путь к изображению.

Попробуйте сами:

1
2
3
4
5
6
7
8
9
10
11
<html>
  <body>
 
    <p>Посетите наш сайт, кликнув по картинке:
      <a href="httр://www.puzzleweb.ru">
        <img src="logo.png" alt="ссылка" width="100" height="78">
      </a>
    </p>
 
  </body>
</html>

Примечание: при использовании изображений в качестве ссылок браузеры автоматически будут добавлять к ним рамку, которая легко убирается с помощью CSS свойства border.

Предварительная загрузка страниц

Обычно, когда вы кликаете по ссылке на другую страницу приходится ждать несколько секунд пока она загрузится. Однако, вы можете настроить вашу веб-страницу таким образом, чтобы определённые страницы загружались заранее в кэш браузера в то время пока вы находитесь на текущей странице. Это означает, что когда вы кликнете по ссылке для перехода на другую веб-страницу, то она откроется сразу и не надо будет ждать, пока она загрузится. Это называется "предварительное получение страницы". Чтобы сделать это, используется тег <link> с атрибутом rel="prefetch", а также указывается целевая страница, которая будет заранее загружена на компьютер.

1
<link rel="prefetch" href="httр://www.puzzleweb/html/tag_p.php">

Такая запись позволит заранее закешировать страницу tag_p.php на компьютере, пока вы читаете содержимое текущей страницы. Вы можете использовать тег <link> для предварительной загрузки любого количества страниц вашего собственного сайта или любых других из интернета.

Примечание: вместо адреса на HTML-документ можно указать путь к файлу другого типа (картинку, видео и тд.).