1 - Inserting images on an HTML page
Some images on an HTML page may make it more attractive and more user-friendly, however it is important not to insert too many images that can make the page load long enough and may in some cases affect the quality of your website.
The HTML IMG tag allows you to insert images into an HTML page. The image can be located on the same server as the page in which it is inserted but also on another server by specifying its complete URL.
Only the following image formats are accepted as standard in the W3C specifications:
- JPEG images (.JPG) : images with a large number of colors will be well compressed, that is to say they will take up less space, therefore will require a lower loading time)
- PNG images: Their size is small in the case of images with few colors with uniform tones, this format also allows to have interlaced images (which are displayed gradually) with a color depth of 24 bits and images whose color is defined as transparent.
- GIF images: They have the same advantages as PNG images, except that the GIF format is limited to 256 colors maximum and this format is not completely free.
How to display images on a web page?
to insert image on HTML page we use the IMG tag by specifying the url source :
<img src="URL of image">
2 - The main attributes of the IMG tag
- SRC : Indicates the location of the image (it is mandatory)
- ALIGN : Specifies the alignment of the image relative to the adjacent text. It can take the values: TOP, MIDDLE, and BOTTOM (above, in the middle and below)
- ALT : : Displays alternative text when the image is not displayed.
- TITLE : Displays a tooltip when the cursor hovers over the image.
- WIDTH : Specify the width of the image.
- HEIGHT : Specify the height of the image.
- BORDER : sets the pixel thickness of the border around the image
Example
<img src="https://www.sath.nhs.uk/wp-content/uploads/2017/02/tree-8.png"
width="250" height="200" align="center">
The above example will insert :
- the named image: tree-8.png
- located at: https://www.sath.nhs.uk/wp-content/uploads/2017/02/tree- 8.png
- with the dimesions: 250x200
- with an alignment in the center of the page
This that display after execution in the browser:
Younes Derfoufi
