HTML
UNIT 5 IMAGES
Back to the index| Back | Next
Competences: To insert images in a web page.
To insert an image as background.
Contents: The tag img and its principal attributes.
The style property background-image
The tag img (as image)
As you know, the web page is composed by a head and a body.
Till now we put only text in the body object. Now we'll put images too.
The image-file must be a graphic file, as .gif (drawings) or .jpg (photos).
To insert an image in your page, you must use the IMG tag with the
src attribute (= source).
This shows to the browser the path
to the source file.
Look at the following examples:
| code | output |
| <img src="notes.gif" /> |
 |
If you write the file name alone (notes.gif), the browser will
search for the source file in the same folder of the web page. |
| <img src="image/snoopy.gif" /> |
 |
The browser searches for the source file (snoopy.gif) in a folder called "image"
in the same folder of the web page. |
| <img src="../image/ola.gif" /> |
 |
You must use two points .. if the source file (ola.gif) is in an upper folder.
(The structure of the folders is a tree). |
| <img src="http://gifanimate.html.it/ga_img/gif-animate/Cartoni/Cartoni330.gif" /> |
 |
The source file is in the web. |
Width and height attributes
To quicken the loading of the image, you can add the image dimensions in pixels,
(with right click you can see the dimensions in the file properties).
| <img src="notes.gif" width="55" height="50" /> |
The browser will prepare a box of 55 times 50 pixels to insert the image.
If you use HTML-kit to edit your web page, this software provides automatically to
calculate the width and the height of the image! |
Alt attribute
We advise that alt attribute be used to a better usability of your page.
When the mouse is over the image, an alternative text (a little description) appears.
The software for the blind people is able to read the alternative text.
| <img src="compl3_webbino.gif" alt="HAPPY BIRTHDAY!!" /> |
 |
if the mouse is over the image, the alternative text appears. |
Do you want an image as background?
If you want an image as background of your web page,
the better thing is to add the background-image property in the body
style.
<style>
body {background-image : url (image/reticpiccolo.gif);}
</style>
<body>
.......
contents of the web page.....
</body>
The value of the background-image is the image url.
If the browser doesn't find the source file, it will use the background-color.
This is the reticpiccolo.gif file:
It is a very small file that covers a little amount of the screen,
but it automatically repeats itself filling the whole page.
Pay attention to choose a fine image background so that you can see
what you write on it!!
If you don't want to repeat the image background,
you must add
background-repeat:no-repeat;
in the body style.
Exercise: Add some image to your web page!
From now on we'll call local site the folder in your hard disk where the
file index.htm is and remote site the work area in the website you are using.
Remember that the structure of the local site must be the same as the one in the remote site.
If you create a folder in your local site, you have to create an identical one in the remote site.
- In your computer (local site) create a folder (for example image)
for your images.
- Go in Internet and save some images in the new folder where your
index.htm file is.
If you want to save the images of this web page, you can right click
on them and then choose save as..!
- Insert some images in your file "index.htm" with the apposite tag img
src = image/file_name
- If you want, insert an image as background, with background-image.
- Save the modified file (in your local site)
- Upload the new file index.htm in your work area (remote site).
- Make a folder called image in the remote site too.
- Open the image folder and upload all the images you used.
- Look at your new site!
- Write a message in the forum "Images" to inform that your page is ready!