HTML - Images

  »   HTML  »   HTML Tutorial - Inserting Images and photos into HTML

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 image example

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.

Local sourceDescription
src="image.jpg"the picture is located on the same level as .html file
src="../image.jpg"the picture is located in previous level as .html file.
src="../img/image.jpg"the picture is located in the "img" folder in a previous level as .html 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 image example

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 image example

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

html image example

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

html image example