Перейти к содержанию

Что такое гиперссылка

Гиперссылка — это элемент страницы, который позволяет перейти: - на другую страницу сайта; - на другой сайт; - на файл; - на определённую часть страницы.

Ссылки являются основой интернета, так как связывают веб-страницы между собой.

Тег ссылки <a>

Для создания ссылки используется тег:

<a>

Основной атрибут — href.

Пример:

<a href="https://google.com">Перейти в Google</a>

Разбор: - <a> — тег ссылки - href — адрес перехода - текст между тегами — отображаемый текст ссылки

Ссылка на другую страницу сайта

Если сайт содержит несколько страниц, можно сделать переход между ними.

Пример:

<a href="about.html">О нас</a>

Если файл about.html находится в той же папке, браузер откроет его.

Открытие ссылки в новой вкладке

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

target="_blank"

Пример:

<a href="https://google.com" target="_blank">Открыть Google</a>

Абсолютные и относительные пути

Абсолютный путь

Полный адрес сайта.

<a href="https://example.com/page.html">Ссылка</a>

Относительный путь

Адрес файла внутри сайта.

<a href="contact.html">Контакты</a>

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

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

<img>

Основной атрибут — src.

Пример:

<img src="image.jpg">

Атрибут alt

Атрибут alt содержит описание изображения.

Он используется: - если изображение не загрузилось; - для людей с ограниченными возможностями; - для поисковых систем.

Пример:

<img src="cat.jpg" alt="Кот">

Размер изображения

Можно задать размер изображения.

Пример:

<img src="cat.jpg" width="300">

или

<img src="cat.jpg" height="200">

Изображение как ссылка

Изображение можно сделать ссылкой.

Пример:

<a href="https://example.com">
<img src="image.jpg" alt="Картинка">
</a>

При нажатии на изображение пользователь перейдёт по ссылке.

Пример страницы

<!DOCTYPE html>
<html>
<head>
<title>Моя страница</title>
</head>

<body>

<h1>Мой сайт</h1>

<p>Перейти на Google:</p>

<a href="https://google.com">Google</a>

<h2>Моё изображение</h2>

<img src="cat.jpg" alt="Кот" width="300">

</body>
</html>

Типичные ошибки

  1. Неправильный путь к изображению
<img src="img/cat.jpg">

Если файл отсутствует — изображение не загрузится.

  1. Отсутствие атрибута alt
  2. Неправильно закрытые теги