Как делается в html ссылка картинка

Здравствуйте, уважаемые читатели этого блога. Вы наверняка не раз замечали в интернете картинки, на которые можно было кликнуть и перейти таким образом на какую-нибудь страницу. А как это реализовывается изнутри? Как сделать в html ссылку картинку? Очень просто.

Ссылка картинка в html

Тут нужно поступить очень просто. Тег вставки изображения – img. Он одинарный. Тег ссылки – a. Он парный. Соответственно, нужно всего лишь в парный тег ссылки вставить img. И вот как это будет примерно выглядеть:

<a href = “url-адрес”><img src = “путь к изображению”></a>

Итак, всего лишь два тега и два обязательных атрибута – адрес, по которому осуществиться переход при клике, и адрес непосредственно изображения. Остальные атрибуты, вроде стилевых классов или открытия ссылки в новом окне можно прописать по желанию.

Но это не единственный способ сделать в html ссылку картинку. Есть еще один, при котором не нужно вставлять изображение непосредственно в html-код.

Способ номер 2

<a href = “url-адрес”></a>

Тут мы не вставили никакой картинки в код. Так как же мы ее получим? Через css и добавление фона к ссылке. Но для начала нужно превратить ссылку в блочный элемент и задать ей такие размеры, как картинке, которая будет выступать в качестве ее фонового изображения. Следующий код предполагает, что картинка имеет разрешение 200 на 200 пикселей.

A{
	Display: block;
	Width: 200px;
	Height: 200px;
	Background: url(путь к изображению) no-repeat;
}

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

Какой способ выбрать

Это зависит от целей. Например, графические элементы – кнопки социальных сетей, графические навигационные кнопки и так далее лучше оформлять вторым способом, так как тогда поисковик не будет считать эти изображения частью контента страницы и ее семантичность может улучшиться.

Картинки в контентной части, конечно, наоборот нужно вставлять с помощью тега img, ведь ему можно задать еще и атрибут альтернативного текста, а это чуть-чуть улучшит ревелантность текста.

Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: