В процессе создания дизайна и верстки сайта, мы прорабатываем большое количество элементов. Довольно часто по задумке дизайнера, некоторые графические элементы должны быть выполнены в виде ссылки. Чтобы пользователь, при нажатии на картинку, переходил на нужную страницу нашего, или же другого сайта. Как средствами HTML, можно сделать картинку ссылкой? Все очень просто, следуйте нашим инструкциям.
Вам пригодится: div верстка.
Теги HTML
Для выполнения нашей задачи, будут использованы два тега.
Ссылка
Для этого в HTML используется следующая конструкция:
<a href="http://site.ru">Текст ссылки</a>
В атрибуте "href" мы будем указывать адрес сайта или страницы, на которую нам нужно отправить пользователя, после нажатия на ссылку.
Картинка
Изображения в html добавляются с помощью такой конструкции:
<img src="http://site.ru/img.jpg">
Здесь мы будем настраивать атрибут "src". В нем необходимо указать полный адрес до изображения.
Как вставить в картинку ссылку
Теперь нам нужно объединить два рассмотренных тега. Мы добавляем в нужное место заранее подготовленный графический файл. А затем закрываем его в теги "a", назначая его, таким образом, ссылкой.
Допустим, у нас будут такие исходные данные:
- Наш сайт - site.ru
- Изображение - site.ru/img.jpg
- Ссылка на нужную страницы - site.ru/contacts.html
Итоговый HTML код будет выглядеть вот так:
<a href="http://site.ru/contacts.html"><img src="http://site.ru/img.jpg"></a>
Этот код позволит нам добавить на сайт картинку в виде ссылки.