HTML - Images

The images are very important on a web page. It is therefore important to use them in the right way. Insert images using the tag <img/>.

html<img alt="html image example" src="/assets_tutorials/img/image.jpg"  />

Demo

HTML - img src

"src" is shortcut for "source". This attribute is used to indicate the image location. As explained in the tutorial about links you can use any URL to point to the file.

You may also address the full URL. For example:

htmlscr="http://www.tutorialehtml.com/assets_tutorials/img/image.jpg"

The URL pattern is not recommended because in case you change the domain you will have to change as well the addresses of all image files. Or if the image is stored on another domain just use scr="http://www.domain.com/image.jpg".

The fact that storing the image on an alternative server, presents a great advantage if the space provided for your domain is a limited one.

HTML - "alternative" attribute for images

Attribute "alt" is used to display text instead of image in case your browser for some reason can not display the picture or when a user has the "ShowImage" option unselected.

html<img alt="html image example" src="/assets_tutorials/img/image.jpg" />

Demo

HTML - the height and width of an image

To determine the height and width of an image is used and "height" attributes "width". Logical, no!

html<img alt="html image example" src="/assets_tutorials/img/image.jpg"  width="120" height="75" />

Demo

HTML - horizontal and vertical alignment of an image

For this we will use the attributes align and valign. The options offered by these attributes are:

1. Align (horizontal)

• right
• left
• center

2. Valign (vertical)

• top
• bottom
• center

html<img alt="" align="right" src="/assets_tutorials/img/image.jpg" /> 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>

Demo

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

HTML - Using images as links

This is only an introduction, we will talk more about this in the next tutorial. The images are very useful as links and can be formed as follows

html<a href="http://www.tutorialehtml.com/" title="HTML link image example">
	<img alt="html image example" src="/assets_tutorials/img/image.jpg" width="120" height="75" />
</a>

Demo

The image above will send to the home page. You can change it to your start page and here you have a picture with a link to your start page

HTML - Thumbnails

Thumbnails are miniature versions (fewer kilobytes) of images that have a much higher quality. To create a thumbnail, save the image in lower quality than the original one. then link this small image to the original high-quality image.

html<a href="/assets_tutorials/img/image.jpg"  title="HTML link image thumbnail example">
	<img alt="html image example" src="/assets_tutorials/img/image.jpg" width="66" height="49" />
</a>

Demo