Чат веб-разработчиков
Как сделать ссылку на страницу в HTML

Учимся делать ссылки в HTML

Всем привет. Сейчас будет интересно, ведь мы будем говорить о ссылках. Как правило, в окне браузера, ссылка отображается подчеркнутым куском текста, нажав на который можно открыть другой web элемент. Это могут быть и другая страница, и просто изображение, и конкретный файл, который браузер предложит скачать.

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

Для создания ссылок существует простой и легко запоминающийся тег – <a>. Приведем пример.

Код доступен только после покупки курса HTML для начинающих.

Указание адреса ссылки

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

Задать адрес ссылки можно, используя для этого специальный атрибут href. Вот как это выглядит на практике.

Код доступен только после покупки курса HTML для начинающих.

Вы видите, что данная ссылка ведет на страницу курса по HTML. В браузере это выглядит так:

Онлайн курс по HTML

В данном случае URL сайта выступает значением атрибута href. Значение принято называть адресом, который может быть совершенно любой: абсолютным и относительным, ведущим на страницу или файл, на фото или видео и так далее. Иными словами, ссылка позволяет открыть или загрузить совершенно любой объект, который присутствует в мировой паутине. Между прочим, в первом уровне мы проходили с вами урок подключения внешних стилей. И для решения этой задачи использовался URL.

Читайте также
Комментарии


shevchenko
shevchenko

Только что добавила ссылки на 2 сайта друзей. Напрямую в виджете в вордпрессе вставила и всё заработало. Спасибо!

Sony
Sony

Я бы еще в этом разделе озвучила как скрывать подчеркивание ссылок ;)

ivashkevich
ivashkevich

Тут самые основы, но если хотите - можете написать в комментариях как вам удалось это сделать =)

MariSolo
MariSolo

<style>
a {
text-decoration: none; / Отменяем подчеркивание у ссылки /
}
</style>