Меню
Спросить
< >

Ссылки html, тег а

23 августа 2017
Ссылки html, тег а

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

Тег а

Как обычно, создаем папку, создаем в ней файл index.html, затем открываем его и пишем страничку.

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <title>Тег а</title>
  5. </head>
  6. <body>
  7. </body>
  8. </html>

Теперь добавим собсна сам тег a в тело сайта, в тег body.

  1. <a></a>

Это и есть наша ссылка, теперь, чтобы она заработала нам нужно добавить один очень важный атрибут ссылки, поэтому перейдем к атрибутам :D

Атрибуты ссылки, тега а

И так, для работы ссылки нужен атрибут href. Этот атрибут, должен содержать в себе путь, как абсолютный, так и относительный, по которому мы хотим, чтобы пользователь переходил. В данном случае укажем путь на сайт Google.

  1. <a href="https://www.google.ru"></a>

Ссылкой в html, может являться практически любой элемент, главное обернуть интересуемый нас элемент в ссылку. К примеру, хотим мы, чтобы картинка была ссылкой, значит тег img нужно обернуть в ссылку.

  1. <a href="/gallereya"><img src="Картинка.jpg"></a>

В нашем случае я добавлю просто текст.

  1. <a href="https://www.google.ru">Сайт Google</a>

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

  1. target = "_blank"
  2. target = "_self"

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

  1. <a href = "https://www.google.ru" target = "_blank">Сайт Google</a>

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

  1. <a href = "https://www.google.ru" target = "_blank" title = "Перейти на сайт Google">Сайт Google</a>

Отлично, теперь разберем четвертый атрибут, последний на сегодня.
Атрибут name. С помощью это атрибута можно ссылаться по определенным элементам в html документа, подобно кнопке "наверх". Ее можно сделать с помощью других языков, но можно воспользоваться ссылкой, тегом "а".
И так, как же он работает.
Для начала берем элемент к которому хотим ссылаться, для примера используем простую картинку(тег img) и оборачиваем его в ссылку.

  1. <a><img alt="Картинка"></a>

Дальше, указываем тот самый атрибут у этой "обёртки".

  1. <a name = "img" ><img alt="Картинка"></a>

Теперь создаем ссылку в нужном месте html документа, ту самую, на которую будем нажимать при переходе к элементу.

  1. <a></a>

Далее, добавляем атрибут href для ссылки, в котором указываем путь до нашей картинки, который состоит из значка "решетка(#)" и значения, которое указали в атрибуте name.

  1. <a href = "#img" ></a>

Думаю все понятно, для закрепления посмотрите видео ниже.

Заключение

Всем спасибо за внимание, подписывайтесь, репостите, ставьте палец вверх и тд, всем успехов, спасибо, пока =)!

Следующая статьяПредыдущая статья