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

Ссылки в языке HTML

10 авг. 2017

Начнем с типов ссылок, они представлены на изображении.

виды ссылок html

Несмотря на такое разнообразие функций, все они имеют одинаковое написание.

<a href="адрес на сайт/документ/или место в документе"> Текст или изображение,которое будет отображаться,а при клике мышью происходит переход или скачивание или перемещение  </a> 

Переадресация на другой сайт - абсолютная ссылка

Теперь изучим 1 тип ссылок- переадресация на другой сайт(по другому - абсолютная ссылка), допустим она будет ссылаться на mail.ru

<a href="http://mail.ru"> Ссылка на сайт mail.ru </a>


И если мы сохраним документ и запустим в браузере , то увидим следующее:

Ссылка на сайт mail.ru

Относительные ссылки

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

Пример. Сделаем относительную ссылку на изображение, которое находится в 1 папке с html документом в котором мы её прописываем.

относительная ссылка html

 

<a href="image.jpg">Изображение </a>

Причем, обязательно необходимо указать в атрибуте scr название изображения и расширение.
Результат показан ниже:

Изображение

Cсылки-загрузки файлов

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

<a href="assets/files/index.zip">Скачать </a>

Cкачать

Графические ссылки

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

<a href="http://www.mail.ru"><img src="image.jpg"></a>

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

графические ссылки

Якорные ссылки

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

Для реализации такой ссылки необходимо задать еще 1 атрибут id тому элементу, на который вы хотите ссылаться . В примере выше, у меня ссылка перемещает к тегу заголовка h1, поэтому пишем следующее:


<a href="#zagolovok1">Перейти к заголовку 1</a>
<h1 id="zagolovok1">Заголовок 1</h1>

Если статья понравилась, то поделитесь ей в социальных сетях:

Понравилась статья? Подпишись и будь в курсе всех новостей!

Нажимая на кнопку, вы даете согласие на обработку своих персональных данных Политика конфиденциальности

Вам также будет интересно:

Комментарии (0)


    Vkontakte