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

Делаем картинку ссылкой

Всем привет! В прошлых уроках мы с Вами изучили ссылки и изображения. И как Вы уже наверное догадались, эти вещи можно совместить и получить картинку, которая будет представлять собой ссылку.

Хороший пример - реклама в Интернете. Наилучшим образом воспринимается графика, и мы кликаем именно на красивые картинки, нежели скучный текст. Об этом и поговорим.

Чтобы сделать изображение ссылкой необходимо тег <img> написать внутри тега <a>. На примере это будет выглядеть вот так.

<a href="https://webshake.ru/html-training-course">
  <img src="promo.png">
</a>

А ещё зачастую изображения-ссылки применяют в фотоальбомах, где, при нажатии на маленькую копию картинки, можно открыть полноразмерное изображение.

Присоединяйтесь к нам в ВКонтакте и в Facebook, чтобы не пропустить новые уроки. А также вступайте в наш чат PHP-разработчиков в Telegram.
Онлайн обучение PHP
Путь с полного нуля до джуниора!
Начать бесплатно
Читайте также
Курс программирования на PHP
Подготовка до уровня устройства на работу!
Начать бесплатно
Комментарии (9)


ansherytodd

Большое спасибо за статью. Всегда хотел попробовать себя в HTML-программировании, но думал, что это жутко сложно.

ivashkevich

Не за что. HTML - это очень просто)

imurazovich@mail.ru

Огромное спасибо за данную статью,долго мучился,просматривая видео длительностью по несколько часов,а здесь всё кратко и очень понятно!

Vlad

Хотелось бы подробней узнать, что означает атрибут alt

Vlad

в следующему уроке прочитал про alt :)

Dilik

мы говорим про тег img и a а в примере применяем alt - это сильно сбивает с толку)

ivashkevich

Ок, убрал из этого урока =)

classic17071999@mail.ru
<hr>
<center>
<cite>Мы Вконтакте:</cite>
<a href="https://...">My Project</a>
<br>
<a title="Делаем картинку ссылкой" href="https://webshake.ru/html-training-course/30">
  <img width="100" height="70" src="img/Smile-ky.jpg">
</a>
</center>

Правильно будет так? Или где-то ошибка?)

ivashkevich

Разве это цитата? Используйте для оформления другие теги или CSS.

Самый понятный курс PHP
Онлайн-уроки в удобное время!
Начать бесплатно
Популярное за сутки
Онлайн-курсы PHP и MySQL
Обучение с полного нуля до уровня джуниора!
Начать бесплатно
Сейчас читают
Онлайн-курсы PHP и MySQL
Обучение с полного нуля до уровня джуниора!
Начать бесплатно
Новые статьи
Логические задачи с собеседований