HTML also contains elements for adding images to your website.
The formats most used for the images added in a HTML page are GIF and JPEG (JPG ; JPE), the advantage of GIF images is that are small in size (in bytes), having a maximum of 256 colors.
Other format types that can be used are:
Adding a image in a webpage
To add an image in a HTML document you must use the element <img> ... </img> together with the following attributes:
In the following example you can see how you can include an image in your web page and how to use these attributes:
- - src - The value of this atributte determines the location of the file that contains the image.
- - alt - At this attribute you write the text that will be appear if the image is not displayed (by some browsers) or when a user will position , in the browser , the mouse over the image.
- - align - This attribute allows you to set the image in different places on the page. The following options can be used:
- Bottom , Middle , Top , Left , Right , TextTop , ABSMiddle , Baseline , ABSBottom
- - width - The value of this attribute reprezents the length of the image in pixels, if it's not specified the image will maintain it's original length.
- - height - The value of this attribute reprezents the image's heigth, in pixels. If it's not specified the image will be presented in it's orininal heigth.
- - border - By adding this attribute the image will appear surrounded by a border, the value of this attribute reprezents the border's thickness, in pixels.
- - hspace - This attribute is for horizontal space on both sides of the image, specified in pixeld. For example a value of 5 will put an invisible, of 5 pixels, in the horizontal sides.
- - vspace - This atttribute is for the vertical space on both sides of the image, specified in pixels. For example a value of 5 will put a 5 pixels invisible space on the vertical sides.
<img src="image.jpg" alt="here you can add any text" align="top" width="100" height="120" border="4" hspace="10" vspace="7"></img>
- The web page will appear like this:
Try more examples by yourself, using other attributes and values.