HTML с нуля: как вставить ссылку в HTML. Урок №6 Overcod.net

HTML с нуля: как вставить ссылку в HTML. Урок №6

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

Что такое ссылка в HTML?

Ссылка в HTML – это элемент, который позволяет пользователю перейти к другой части текущего документа, к другому документу или ресурсу. При нажатии на такую ссылку происходит переход.

Ссылки играют важную роль в навигации по сайту. Они могут вести на страницы сайта, внешние ресурсы, открывать почтовую программу или позволять скачивать файлы.

Как вставить ссылку в HTML-документ

Чтобы создать ссылку, используется тег <a> с атрибутом href, который указывает путь к ресурсу.

Пример:

<a href="адрес_ссылки">Текст ссылки</a>

Важно:

Адрес ссылки должен быть на латинице.
Закрывающий тег </a> обязателен.

Пример:

<a href="karta.html">Ссылка на карту</a>

Практика: создание связанных страниц

Создайте два HTML-документа:

1.html

<html>
<head>
<title>Моя первая HTML-страница на overcod.net</title>
</head>
<body>
<a href="2.html">Перейти на страницу №2</a>
<p>Добро пожаловать на мою первую страницу на overcod.net.</p>
</body>
</html>

2.html

<html>
<head>
<title>Страница №2 на overcod.net</title>
</head>
<body>
<a href="1.html">Вернуться на страницу №1</a>
<p>Это вторая страница на overcod.net.</p>
</body>
</html>

Файлы должны находиться в одной папке.

Создание ссылок на другие ресурсы

Ссылка на внешний сайт:

<a href="https://www.overcod.net">Перейти на мой блог</a>

Ссылка на почту:

<a href="mailto:admin@overcod.net">Написать письмо</a>

Ссылка, открывающаяся в новом окне:

<a href="https://www.overcod.net" target="_blank">Открыть в новом окне</a>

Ссылка для скачивания

Чтобы пользователь мог скачать файл, добавьте атрибут download:

<a href="file.zip" download>Скачать архив</a>

Для изображений:

<a href="image.jpg" download>Скачать картинку</a>

Ссылка-картинка

Картинку можно сделать ссылкой, поместив тег <img> внутрь тега <a>:

<a href="https://www.overcod.net">
  <img src="image.jpg" alt="Картинка-ссылка">
</a>

Подсказка для ссылки

Добавьте атрибут title для отображения подсказки при наведении:

<a href="https://www.overcod.net" title="Мой блог">Мой блог</a>

Изменение цвета ссылок

Цвета ссылок можно задать через атрибуты тега <body>:

<body link="#00FF00" alink="#FFFF00" vlink="#EEE9E9">
  <a href="1.html">Пример ссылки</a>
</body>

link – цвет обычной ссылки.
alink – цвет активной ссылки (при нажатии).
vlink – цвет посещенной ссылки.

Попробуйте самостоятельно реализовать все примеры на практике. Подписывайтесь на обновления моего блога на overcod.net и не пропустите новые уроки по HTML. Удачи!