|
Images |
| Image content is very important in HTML document. Usually we use GIF format for simpler images and JPEG for photographic images. |
|
Note: The only image types supported by web browsers are GIF and JPEG. |
|
| Inserting an image on a page |
| To add images to your web page, you need to use the <img> tag . |
| The basic tag for in-line images is: |
|
|
| The IMG part tells the browser to add an image while the SRC attribute tells your browser where to find the image. |
|
| Below you see an image called "gblue.jpg"(50 * 50 pixels). |
|
 |
|
| The code we used is: |
|
|
|
| Resizing images |
It is possible to change the size of an image using the WIDTH and HEIGHT attributes.
| But this is not a good idea. It takes a long time for a browser to resize images and people do not like to wait. |
| Here are some example: |
|
<img src="gblue.jpg" width="30" height="70"> |
|
|
|
|
<img src="gblue.jpg" width="70" height="30"> |
|
|
|
|
<img src="gblue.jpg" width="20" height="20"> |
|
|
|
|
<img src="gblue.jpg" width="80" height="80"> |
|
|
|
| Border and alternate text to images |
You can add a border or an alternative text to the image using the BORDER and ALT attributes.
|
<img src="gblue.jpg" border=2> |
|
|
|
|
|
|
<img src="gblue.jpg" alt="This is gBLUE"> |
|
|
| When your mouse points over this image, the alternate text "This is gBLUE" will appear. |
|
|
|
|
| |
