Images and pictures
Introduction into putting pictures on your website
Images play important role in webpage design and the overall look of a website can be improved by using images.
Another advantage of using images is that they also can be used as hyperlinks (described in
Hyper links section).
The total effect of the of web page is increased, promoting a professional and user friendly enviroment.
There are different types image's used in webpage design, but the most common are JPEG
and GIF.
Note: Beware some servers are case sensitive to filenames this means that myimage.jpg is not the same as myimage.JPG.
The <img> or image tag
The image tag <img> can be used for enhancing your visitors interactivity. There are also many different attributes associated with the <img> element, the main one being srcwhich means the "source" or the location of the file. The others we will be explaining to you on this page. Syntax for img :
|
<img src="path|filename" [attribute(s) {= "value"}]/> |
OR...
|
<img src="images/myimage.jpg"/> |
Above the in the example src="images/myimage.jpg the "images/" indicate's the directory and myimage.jpg the picture or image located in that directory.
 |
The result
The <img> element attributes
Title
The attribute Title is used for giving a descriptive title to the image. The Title is visible when the mouse hovers over the picture (something like a tooltip).
|
<img src="images/myimage.jpg" title="Example image"/> |
|
|
Move your mouse over the picture for the title to show
Alt
The attribute alt is used as an alternative description to the image, when it is missing or cannot be found by the browser. The alt is visible when the image link is broken. Note: In Internet explorer if the Title attribute is not used, the ALT attribute will shows up as a description even when the image is found this is a misuse of this attribute and it should not be used in this way, refer to title.
|
<img src="images/myimage1.jpg" alt="Sorry image cannot be found"/ > |
|
The image is deliberatly missing to show the effects of the ALT attribute.
Height and Width
The attributes Height and Width are used to set the pictures height and width. Although it is better to insert an image of the correct proportions, to insure this is adhered to these attributes can be inserted. The format of these atrributes can be in pixels (px) as shown below.
|
<img src="images/myimage.jpg" height="100px" width="200px"/ > |
|
|
Image stretched into a box of 100 x 200 px, If the image was larger than the dimensions specified it
would be shrunk to fit these dimensions.