Ссылки в HTML

Добавление ссылки

В этой теме мы рассмотрим, как вставить ссылку в html страницу. Ссылка создаётся с помощью тэга <a>. У него есть атрибут href, в котором указывается путь к файлу, на который ведёт ссылка. В том числе, это может быть URL-адрес. Внутри тэга находится контент, например текст, который отображается на странице и является ссылкой.

Приведём пример ссылки. Так как тэг <a> является строчным элементом, поместим его внутрь блочного тэга:

8	<p><a href="https://yandex.ru">Ссылка на яндекс</a></p>

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

Ссылка в новой вкладке

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

target="_self" - в текущем окне (по умолчанию)

target="_blank" - в новом окне

target="_parent" - в родительском окне

target="_top" - во всю ширину окна

target=имя фрейма - в окне указанного фрейма

Атрибут target считается устаревшим и в пятой версии HTML атрибут является невалидным. В браузерах он не всегда страбатывает.

Для примера добавим ссылку, которая открывается в новой вкладке:

9	<p><a href="https://yandex.ru" target="_blank">Ссылка</a></p>

Ссылка в виде картинки

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

10
11

<a href="https://yandex.ru">
<img src="image.jpg" alt="Ссылка"></a>

Ссылка на элемент страницы

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

У ссылки, которая ведёт к элементу страницы, атрибут href содержит знак "#" и id элемента.

Для примера создадим абзац и добавим ссылку, которая ведёт на него. А между ними вставим большой блок. Я сделаю его с помощью стилей, поэтому Вам в нём не нужно разбираться. Просто скопируйте тэг.

12
13
14

<p id="ab">На этот элемент ведёт ссылка</p>
<div style="width: 200px; height: 1100px; border: 1px solid Red"></div>
<a href="#ab">Ссылка на абзац</p>

Ссылку на определённый элемент можно сделать не только на текущей странице, но и на новой. Для этого в атрибуте href нужно указать путь к файлу, затем знак # и id нужного элемента.

Состояние ссылок

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

Непосещённые ссылки отображаются синим цветом, а посещённые фиолетовым. Кроме того, текст ссылок подчёркнутый. Но всё это можно изменить с помощью CSS. Вид ссылок по умолчанию часто не соответствует стилю сайта. Поэтому ссылкам обычно задают другой стиль.