Добавление гиперссылок в HTML

Development | Amber | Комментировать запись

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

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

Примечание: Найти все мануалы этой серии можно по тегу html-practice.

В этом мануале мы расскажем, как добавить гиперссылку на вашу веб-страницу.

Гиперссылки можно добавлять к тексту или к изображению. Для этого используется элемент привязки (или якорь) <a>. Тегу <a> обязательно нужен атрибут href, который и задает целевую ссылку. Элемент <a> записывается так:

<a href="www.DestinationLink.com">The text you want to link</a>

Давайте попробуем добавить в файл index.html следующий фрагмент кода, указав в нем настоящую рабочую ссылку. Например, мы можем превратить предыдущее примечание в гиперссылку вот так:

<a href="https://www.8host.com/blog/tag/html-practice/">Найти все мануалы этой серии можно здесь</a>

Примечание: Если вы работали с этой серией мануалов непоследовательно, рекомендуем обратиться к статье Подготовка HTML-проекта, чтобы создать файл index.html.

Вы должны получить такой результат:

Найти все мануалы этой серии можно здесь

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

<a href="https://www.8host.com/blog/tag/html-practice/">Найти все мануалы этой серии можно здесь
<img src="https://www.8host.com/blog/wp-content/themes/wp-8host-new/img/logo.svg">
</a>

Проверьте, как работает этот код в вашем браузере.

Теперь вызнаете, как добавлять гиперссылки на вашу веб-страницу.