HTML - Inserting images

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

Display

HTML - img src

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

Local source	Description
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 scr="http://www.tutorialehtml.com/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 photos. Or if the image is stored on another domain:

scr="http://www.domeain.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.

Display

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!

Display

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. Valigh (vertical)

top
bottom
center

Example:

This is the first paragraph ...

<img src="../img/image.jpg" align="left">
This is the second paragraph...

This is the third paragraph...

Display

This is the first paragraph, This is the first paragraph,This is the first paragraph,This is the first paragraph,This is the first paragraph.

This is the second paragraph, This is the second paragraph, This is the second paragraph, This is the second paragraph, This is the same second paragraph, This is the same second paragraph, This is the second paragraph, This is the second paragraph, This is the second paragraph, This is the second paragraph, This is the second paragraph, This is the second paragraph, This is the second paragraph, This is the second paragraph, This is the second paragraph.

This is the third paragraph, This is the third paragraph, This is the third paragraph, This is the third paragraph, This is the third paragraph.

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 fallows

Display

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 version (less kilobytes) of images that have a much higher quality. To create a thumbnail, save the image in a lower quality then the original one. then link this small image to the original high quality image.