HTML ссылки: как создавать ссылки на другие веб-страницы

В данной статье мы расскажем, как создавать ссылку в HTML с одной страницы на другую. Также кратко опишем разные типы гиперссылок.

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

Пример:

<p>Here are some <a href="https://www.quackit.com/html/codes/">HTML codes</a> to play with.</p>

Посмотреть пример

Гипертекстовые ссылки могут использовать абсолютные, а также относительные URL-адреса и адреса относительно корня веб-сайта.

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

Это относится к случаю, когда URL-адрес включает полный путь. К примеру:

<a href="https://www.quackit.com/html/tutorial/">HTML Tutorial</a>

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

В этом случае в URL-адресе указывается путь относительно текущего положения. К примеру, если мы хотим сослаться на URL-адрес https://www.quackit.com/html/tutorial/, а наше текущее местоположение — https://www.quackit.com/html/, необходимо использовать следующую ссылку:

<a href="tutorial/">HTML Tutorial</a>

Адреса относительно корня веб-сайта

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

К примеру, если мы хотим ссылаться на URL-адрес https://www.quackit.com/html/tutorial/, а текущее местоположение — https://www.quackit.com/html/, необходимо использовать следующую ссылку:

<a href="/html/tutorial/">HTML Tutorial</a>

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

Цели ссылки

Также можно без проблем определить, где будет открыт URL-адрес: в новом окне или в текущем. Это можно сделать при помощи атрибута target. Например, target = «_ blank» открывает URL в новом окне.

Атрибут target может принимать следующие значения:

_blank: открывает ссылку в новом окне HTML._self: загружает URL-адрес в текущем окне. _parent: загружает URL-адрес в родительский фрейм(все также в текущем окне браузера). Применимо только при использовании фреймов._top: загружает URL-адрес в текущем окне браузера, но отменяет иные фреймы.

Пример:

<a href="https://www.quackit.com" target="_blank">Quackit</a>

Посмотреть пример

Ссылки перехода

Можно сделать ссылки, которые будут направлять в иные разделы в переделах одной страницы(или другой).

Вот как сделать ссылку в HTML на эту же страницу:

  1. Добавьте идентификатор к цели ссылки

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

<h2 id="elephants">Elephants</h2>
  1. Создайте гиперссылку

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

<a href="#elephants">Jump to Elephants</a>

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

<!DOCTYPE html><html><title>Example</title><body><p><a href="#elephants">Jump to Elephants</a></p><h2>Cats</h2><p>All about cats.</p><h2>Dogs</h2><p>All about dogs.</p><h2>Birds</h2><p>All about birds.</p><h2 id="elephants">Elephants</h2><p>All about elephants.</p><h2>Monkeys</h2><p>All about monkeys.</p><h2>Snakes</h2><p>All about snakes.</p><h2>Rats</h2><p>All about rats.</p><h2>Fish</h2><p>All about fish.</p><h2>Buffalo</h2><p>All about buffalo.</p></body></html>

Посмотреть пример

Это необязательно должна быть одна и та же страница. Можно использовать этот способ, чтобы перейти к идентификатору любой страницы. Для этого перед тем, как вставить ссылку в HTML, добавьте целевой URL-адрес перед символом «#». К примеру:

<a href="http://www.example.com#elephants">Jump to Elephants</a>

Конечно, предполагается, что на странице есть идентификатор с данным значением.

Ссылки на электронную почту

Также можно создать гиперссылку на адрес электронной почты. Для этого используйте атрибут mailto в теге ссылки:

<a href="mailto:king_kong@example.com">Email King Kong</a>

Посмотреть пример

Нажатие на эту ссылку приведет к открытию почтового покупателя по умолчанию с заполненным адресом электронной почты получателя.

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

<a href="mailto:king_kong@example.com?subject=Question&body=Hey there">Email King Kong</a>

Посмотреть пример

Базовый href

Можно задать URL-адрес по умолчанию, с которого будут начинаться все ссылки HTML на странице. Для этого поместите тег base(вместе с атрибутом href) в элемент <head>.

Пример HTML кода:

<!DOCTYPE html><html><head><title>Example</title><base url="https://www.quackit.com"></head><body><a href="html">HTML</a></body></html>

Посмотреть пример

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *