Как сделать картинку ссылкой

Здравствуйте, уважаемые любители интересных и полезных материалов. Вероятно вы пришли сюда узнать Как в картинку вставить ссылку и сейчас вы об этом узнаете. Это основы языка HTML и относится к разделу: Уроки HTML для начинающих. Как вам наверняка известно, картинки в HTML документ добавляются при помощи одиночного тега img и выглядит это следующим образом:

<img src="/images/foto.jpg" width="400" height="550" alt="Картинка"/>

В этом теге прописывается путь до картинки и указываются ее размеры, по умолчанию в пикселях. Всегда указывайте атрибут alt (альтернативный текст, если в браузере пользователя отключен показ изображений), с ним раскрутка сайтов будет гораздо эффективней. Теперь давайте разберем, Как в картинку вставить ссылку и что для этого потребуется. Для начала вспомним, как выглядит сама ссылка:

<a href="https://serblog.ru">SerBlog.ru</a>

Ссылка с картинки может вести как на внутреннюю станицу сайта, так и внешнюю. И еще может вести на ту же картинку, но в более увеличенном масштабе. То есть при клике на маленькое изображение будет открываться большое. Эти моменты мы сейчас разберем. Сначала просто сделаем картинку ссылкой:

Картинка, как ссылка на сайт

<a href="https://serblog.ru"><img src="/images/foto.jpg" width="400" height="550" alt="Картинка"/></a>

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

Картинка, как ссылка на картинку

<a href="/images/foto.jpg"><img src="/images/foto.jpg" width="400" height="550"/></a>

Демо

Ну вот, получилась ссылка в виде картинки. Можно так же сделать, что бы при клике по картинке, открывалась другая картинка. Просто нужно указать путь до той картинки, которую хотите открыть при клике. Как видите, в картинку вставить ссылку не так уж и сложно. Немного практики и в скором времени сможете создавать более сложные элементы с использованием изображений. Например всплывающие картинки при наведении на ссылку. Если что-то непонятно, спрашивайте в комментариях или можете обсудить интересующую вас тему на форуме.