Изображения-ссылки — это мощный инструмент в HTML, который позволяет сделать любую картинку кликабельной. Вместо скучного текстового анкора вы можете использовать яркие иконки, баннеры или фотографии для навигации по сайту или для перехода на другие ресурсы. В этих заданиях вы на практике научитесь превращать статичные изображения в интерактивные элементы. Вы пройдете путь от создания простейшей картинки-ссылки до реализации галереи с эффектами при наведении, закрепив знания о тегах <span class=\"cfb-tt-hover\" data-title=\"Тег <a> (от англ. anchor — якорь) является одним из важнейших элементов HTML и предназначен для создания гиперссылок.">`<a>`</span> и <span class=\"cfb-tt-hover\" data-title=\"Тег <img> предназначен для встраивания изображений в веб-страницу.">`<img>`</span>, а также их важнейших атрибутах.
Список тем
- Модуль 1: Основы HTML-разметки
- Модуль 2: Форматирование текста
- Жирный текст (b и strong).
- Курсив (i и em).
- Подчеркивание и перечеркивание (u, s, del, ins).
- Верхний и нижний индекс (sup, sub).
- Цитаты и блоки цитат (q, blockquote, cite).
- Код и предварительно форматированный текст (code, pre).
- Аббревиатуры и определения (abbr, dfn).
- Технические элементы (kbd, samp, var).
- Двунаправленный текст (bdi, bdo).
- Модуль 3: Ссылки и навигация
- Базовые ссылки (a href).
- Внутренние ссылки и якоря.
- Относительные и абсолютные пути.
- Атрибуты target (_blank, _self).
- Заголовки ссылок (title).
- Ссылки на email и телефон.
- Скачивание файлов через ссылки (download).
- Атрибуты rel (nofollow, noreferrer).
- Создание кнопок-ссылок.
- Hash-навигация между разделами.
- URI-схемы (sms:, geo:).
- Модуль 4: Изображения
- Добавление базовых изображений (img).
- Атрибуты изображений (alt, width, height).
- Изображения-ссылки.
- Карты изображений (map, area).
- Picture элемент и множественные источники.
- Адаптивные изображения (srcset, sizes).
- Ленивая загрузка изображений (loading='lazy').
- Форматы изображений и их применение (JPEG, PNG, WebP, SVG).
- SV-анимация через элемент.
- Интерактивные SVG-карты.
- Модуль 5: Списки
- Неупорядоченные списки (ul, li).
- Упорядоченные списки (ol, li) и их атрибуты.
- Типы нумерации (decimal, alpha, roman).
- Вложенные списки и иерархия.
- Списки определений (dl, dt, dd).
- Создание навигационного меню из списка.
- Кастомные маркеры и стилизация списков.
- Атрибуты start и reversed в OL.
- Горизонтальные списки через CSS.
- Модуль 6: Таблицы
- Базовая структура таблицы (table, tr, td).
- Заголовки таблиц (th) и атрибуты scope.
- Объединение строк и столбцов (rowspan, colspan).
- Группировка ячеек (thead, tbody, tfoot).
- Заголовок и подпись таблицы (caption).
- Группировка столбцов (colgroup, col).
- Стилизация таблиц и чередующиеся строки.
- Фиксированные заголовки таблиц.
- Модуль 7: Формы и элементы ввода
- Создание базовой формы (form).
- Атрибуты формы (action, method, enctype).
- Текстовые поля (input type='text').
- Поля ввода пароля (input type='password').
- Флажки и чекбоксы (input type='checkbox').
- Радиокнопки (input type='radio').
- Кнопки (button, input type='submit', input type='reset').
- Выпадающие списки (select, option, optgroup).
- Многострочные поля ввода (textarea).
- Группировка элементов формы (fieldset, legend).
- Подписи к полям (label).
- HTML5 типы полей ( url, number ).
- Поля выбора даты и времени (date, time).
- Слайдеры и диапазоны (input type='range').
- Выбор цвета (input type='color').
- Поля с автозаполнением (datalist).
- Атрибуты полей (placeholder, autocomplete).
- Валидация форм (required, pattern, min, max).
- Загрузка файлов (input type='file').
- Скрытые поля (input type='hidden').
- Элемент output для вычислений.
- Модуль 8: Семантические элементы HTML5
- Шапка сайта (header).
- Основная навигация (nav).
- Основной контент (main).
- Боковая панель (aside).
- Подвал сайта (footer).
- Статьи и самодостаточный контент (article).
- Тематические разделы (section).
- Фигуры и подписи (figure, figcaption).
- Время и даты (time).
- Разворачиваемые блоки (details, summary).
- Прогресс и метрики (progress, meter).
- Диалоговые окна (dialog).
- Когда использовать div, а когда семантические элементы.
- Модуль 9: Аудио и видео
- Модуль 10: Метаданные и head
- Структура head элемента.
- Задание заголовка страницы (title).
- Кодировка и язык документа (meta charset, lang).
- Мета-описание и ключевые слова.
- Настройка viewport для мобильных устройств.
- Добавление favicon.
- Подключение внешних CSS (link rel='stylesheet').
- Подключение скриптов (script).
- Open Graph метаданные для соц.сетей.
- Метатеги для SEO и индексации.
- Предварительная загрузка ресурсов (preload, prefetch).
- PWA манифест и метатеги.
- Модуль 11: Фреймы и встраивание контента
- Модуль 12: SVG и Canvas
- Модуль 13: HTML и доступность
- Модуль 14: HTML для адаптивного веба
- Модуль 15: Практические проекты
Простая картинка-ссылка
id: 37814_img-link-01
Перед вами есть изображение. Ваша задача — превратить его в ссылку, которая ведет на главную страницу сайта. Для этого необходимо обернуть тег `<img>` в соответствующий тег ссылки.
CSS
img {
max-width: 100%;
height: auto;
border-radius: 8px;
display: block;
}HTML
<input1 href="https://naytikurs.ru">
<img src="https://naytikurs.ru/img/1.png" alt="Логотип NaytiKurs">
</input1>
Чтобы сделать изображение ссылкой, его нужно поместить внутрь контейнера `<a>...</a>`. У открывающего тега `<a>` должен быть атрибут `href`, указывающий адрес, на который будет вести ссылка.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку
Атрибут для адреса ссылки
id: 37814_img-link-02
Вы видите изображение, обернутое в тег ссылки, но оно никуда не ведет. Добавьте необходимый атрибут в тег `<a>`, чтобы ссылка стала рабочей и вела по указанному адресу.
CSS
img {
max-width: 100%;
height: auto;
border-radius: 8px;
cursor: pointer;
}HTML
<a input1="https://naytikurs.ru">
<img src="https://naytikurs.ru/img/2.png" alt="Кнопка 'Подробнее'">
</a>
У тега `<a>` есть обязательный атрибут, который отвечает за адрес (URL), на который будет осуществляться переход. Этот атрибут называется `href`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку
Доступность: альтернативный текст
id: 37814_img-link-03
Ссылка-картинка работает, но она недоступна для поисковых систем и программ чтения с экрана. Добавьте к изображению атрибут, который содержит текстовое описание картинки.
CSS
a img {
width: 150px;
height: auto;
display: block;
}HTML
<a href="https://naytikurs.ru">
<img src="https://naytikurs.ru/img/4.png" input1="Иконка поиска">
</a>
Для доступности и SEO используется атрибут `alt` в теге `<img>`. Его значение — это текст, который описывает изображение. Этот текст отобразится, если картинка не загрузится, и будет прочитан программами для слабовидящих.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку
Открытие ссылки в новой вкладке
id: 37814_img-link-04
Сделайте так, чтобы при клике на изображение-ссылку, страница открывалась в новой вкладке браузера, не закрывая текущую. Для этого нужно добавить специальный атрибут к тегу `<a>`.
CSS
img {
max-width: 100%;
height: auto;
border-radius: 8px;
}HTML
<a href="https://naytikurs.ru" input1="input2">
<img src="https://naytikurs.ru/img/5.png" alt="Иконка 'внешняя ссылка'">
</a>
Чтобы ссылка открывалась в новой вкладке, используйте атрибут `target` со значением `_blank`. Полная конструкция выглядит так: `target="_blank"`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку
Стилизация ссылки через класс
id: 37814_img-link-05
В CSS уже подготовлен класс `image-link`, который убирает стандартную рамку у картинки-ссылки и добавляет тень. Примените этот класс к ссылке, чтобы улучшить ее внешний вид.
CSS
.image-link img {
border: none;
outline: none;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
border-radius: 10px;
}HTML
<a href="https://naytikurs.ru" input1="image-link">
<img src="https://naytikurs.ru/img/6.png" alt="Картинка без рамки">
</a>
Чтобы применить CSS-класс к HTML-элементу, используется атрибут `class`. В данном случае нужно добавить `class="image-link"` к тегу `<a>`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку
Создание фотогалереи
id: 37814_img-link-06
Перед вами начало галереи из двух изображений. Первое уже сделано ссылкой. По аналогии превратите второе изображение в кликабельную ссылку, используя правильные теги.
CSS
.gallery {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.gallery img {
width: 120px;
height: 120px;
object-fit: cover;
border-radius: 8px;
}HTML
<div class="gallery">
<a href="https://naytikurs.ru/img/7.png">
<img src="https://naytikurs.ru/img/7.png" alt="Картинка 1">
</a>
<input1 href="https://naytikurs.ru/img/8.png">
<img src="https://naytikurs.ru/img/8.png" alt="Картинка 2">
</input1>
</div>
Как и в первом задании, вам нужно обернуть тег `<img>` в конструкцию `<a href="...">...</a>`. Не забудьте закрыть тег `</a>`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку
Ссылка-иконка с эффектом при наведении
id: 37814_img-link-07
В CSS подготовлен стиль для иконки, который добавляет тень и увеличивает ее при наведении курсора. Примените к ссылке класс `social-icon`, чтобы активировать этот эффект.
CSS
.social-icon {
display: inline-block;
transition: transform 0.2s ease-in-out;
}
.social-icon:hover {
transform: scale(1.15);
}
.social-icon img {
width: 60px;
height: 60px;
border-radius: 50%;
box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}HTML
<a href="https://naytikurs.ru" class="input1">
<img src="https://naytikurs.ru/img/9.png" alt="Социальная иконка">
</a>
Для применения CSS-стилей используется атрибут `class`. Добавьте `class="social-icon"` к тегу `<a>`, чтобы связать его с правилами из CSS.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку
Полная сборка: тег и два атрибута
id: 37814_img-link-08
Соберем все вместе. Превратите изображение в ссылку, которая ведет на внешний ресурс и открывается в новой вкладке. Вам нужно вставить сам тег и два ключевых атрибута.
CSS
img {
width: 100%;
max-width: 250px;
border-radius: 5px;
display: block;
}HTML
<input1 input2="https://naytikurs.ru" input3="_blank">
<img src="https://naytikurs.ru/img/1.png" alt="Баннер">
</input1>
Вам нужно использовать тег `<a>`. Для адреса используйте атрибут `href`, а для открытия в новой вкладке — атрибут `target` со значением `_blank`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку
