#8 – Создание ссылок. Разные типы ссылок в HTML

#8 – Создание ссылок. Разные типы ссылок в HTML

Любой веб сайт имеет определенный набор ссылок на каждой из страниц. За урок мы научимся создавать ссылки и дополнительно рассмотрим некоторые атрибуты, что можно применять к ссылкам. В уроке мы рассмотрим разные форматы ссылок.

Видеоурок

Краткая информация

Каждая ссылка может перенаправлять пользователя не только на новые страницы, но также на определенное место на странице. Ссылка будет являться активной и отображаться в формате ссылки только при условии прописанного атрибута href. Если не добавить значение в атрибут «href», то при клике на ссылку страница будет перезагружаться. 


Пример простой ссылки:

<a href="">Это ссылка</a>

Для установки формата открытия ссылки можно использовать атрибут target. Подробнее про атрибуты в нашем справочнике.


Создание якорей

Для ссылки можно создавать «якоря», что будут перенаправлять пользователя на конкретные места на сайте без перезагрузки страницы. Для их создания используйте атрибут name:

<a href="#some_place">Ссылка «якорь»</a>
<a name="some_place"></a>

Исходный код

Весь код будет доступен после подписки на проект!

Онлайн редактор кода

Загрузка...

Задание к уроку

Необходимо оформить подписку на проект, чтобы получить доступ ко всем домашним заданиям

Большое задание по курсу

Вам необходимо оформить подписку на сайте, чтобы иметь доступ ко всем большим заданиям. В задание входит методика решения, а также готовый проект с ответом к заданию.
PS: подобные задания доступны при подписке от 1 месяца

Также стоит посмотреть

Изучение препроцессора SASS / SCSS
7 уроков
Видеокурс по PHP, MySQL / Создание динамического сайта
Вёрстка адаптивного сайта на Bootstrap 4
6 уроков
Изучение ASP.NET Core MVC. Создание сайтов на C#
10 уроков
Создание сайта с нуля | Полноценная верстка сайта
11 уроков
Изучение HTMX с нуля / Проект на HTMX и Flask
8 уроков
Комментарии (5)
Добавить комментарий

Кирилл 29 июля 2025 в 06:09

<a href="https://mail.google.com/mail/?view=cm&amp;[email protected]" target="_blank">Написать через Gmail</a>
во такой код откроет именно сайт а не приложение gmail
Ответить

кирилл 29 июля 2025 в 06:06

<a href="mailto:[email protected]">Написать на счет проблем в сайте</a>
не работает потому что оно пытается открыть именно приложение а не сайт gmail
Ответить

Олег 07 ноября 2023 в 20:14

атрибут name просто устарел, используйте id и все получится
Ответить

арсен 12 февраля 2023 в 15:47

странно, у меня команда mailto некоректно работает
вот как я написал
<a href="mailto:[email protected]">Написать на счет проблем в сайте</a>
Ответить

dzuin 12 июня 2023 в 14:25

тоже самое

??? 14 января 2023 в 17:27

у меня онлайн редактор сломался
Ответить