HTML - Image links

With the image's help you can give a bit of life and color to a web page. Transforming an image into a link is not however hard. You just need to introduce the source of the image, inside of the img tag and then put it into a link tag. Simple as that.

html<a href="http://www.tutorialehtml.com/" title="This is an HTML liked image">
	<img alt="alternative text for the liked image" src="/assets_tutorials/img/image.jpg" width="120" height="75" />
</a>

Demo

In some cases, by default some of the browsers adds a border to the image used as a link, for being easy to differentiate it from a normal image. So that you would not have problems with different viewing because of the browser, we can set the border to a defined value.

html<a href="http://www.tutorialehtml.com/" title="This is an HTML liked image">
	<img 	alt="alternative text for the liked image"
		src="/assets_tutorials/img/image.jpg"
		width="120"
		height="75"
		border="5"
		style="border:5px solid #337AB7" />
</a>

Demo

The border attribute of <img> is not supported in HTML5. I included a CSS rule that you can use instead.

HTML - Thumbnails

The thumbnails are versions in miniature (a lot less kB) of some images which in reality are bigger and with better quality. To make a thumbnail, save the image in poor quality and small dimensions. Then make this image a link that will lead to the initial image of a bigger dimension.

html<a href="/assets_tutorials/img/image.jpg" title="This is an HTML liked image">
	<img alt="alternative text for the liked image" src="/assets_tutorials/img/image.jpg" width="66" height="49" />
</a>

Demo