Inserting Image In Your Website

It is really easy to insert an image into you website. IMG element is used for this purpose. There are two attribute are included inside the image tag, the SRC (source) attribute, which points to the location of the image and the ALT (alternative text) attribute, which displayed instead of an image, in case where an image is not available

The basic code of image

If you want to save your image inside the same folder as your website, then the path would be simply the file name only. Image.jpg.

Code will be;

< img src=”image.jpg” alt=”my picture”>

If you want to store your image in a subfolder named “picture” then the path would be: picture/image.jpg

Code will be:

< img src=”picture/imge.jpg alt=”my picture”>

And finally, if image is saved in parent folder, the path to it would be ../image.jpg

Code will be;

< img src=”../image.page” alt=”my picture”>

Use Of Graphic Formats

There are three kind of graphic formats which are most widely supported by the different web browsers. You should only used graphics with, GIF, JPG or PNG file name extensions

The GIF format are usually used for buttons, logs and animated graphics and JPG is great for image

The attribute width and height

You can change you graphic width and height with these attribute

Code will be;

The Border Attribute

With the border attribute, you can add a black border around an image. You can also change the thickness of border with and integer number. The border attribute usually is used when the image is used as hyperlink.

Note: A text link has by default a blue color and a blue line under it. Images used as links have by default a blue border around them, which looks ugly in most cases. So in order to get rid of this blue border you need to add the border attribute to the image element and set its value to zero. border="0".