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

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

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

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

виды ссылок 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>

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

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

<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>
Похожие записи:
Форматируем текст в HTML
Форматируем текст в HTML

В этом уроке изучим теги, с помощью которых редактируют текст Подробнее:

Добавление изображений в языке HTML
Добавление изображений в языке HTML

Добавление изображений в свою html страницу занятие очень простое. Единственное Подробнее:

Списки в HTML. Многоуровневое меню
Списки в HTML. Многоуровневое меню

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

Таблицы в HTML
Таблицы в HTML

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

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

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