11.13. HTML image

HTML Image-Image tag (< img >) and Source attribute (Src) ¶

In HTML, images are made up of label definition.

is an empty tag, meaning that it contains only attributes and doesnot have a closed tag.

To display the image on the page, you need to use the src attribute. src means “source”. The value of the source property is the URL address of the image.

The syntax for defining an image is:

<img src="*url*" alt="*some_text*"> 

URL refers to the location where the image is stored.

The browser displays the image where the image label appears in the document. If you place the image tag between two paragraphs, the browser will first display the first paragraph, then the picture, and finally the second paragraph.

HTML Image-Alt attribute ¶

alt property is used to define a string of prepared replaceable text for the image.

The value of the replacement text property is user-defined.

<img src="boat.gif" alt="Big Boat"> 

When the browser cannot load the image, replace the text attribute to tell the reader what information they have lost. At this point, the browser will display the alternative text instead of the image. It is a good habit to add replacement text attributes to all images on the page, which helps to better display information and is very useful for those who use plain text browsers.

HTML image-sets the height and width of the image ¶

The height and width properties are used to set the height and width of the image.

The default unit of the attribute value is pixels:

<img src="pulpit.jpg" alt="Pulpit rock" width="304" height="228"> 

Tip: it is a good habit to specify the height and width of the image. If theimage specifies a height width, the specified size is retained when the page is loaded. If you do not specify the size of the picture, it is possible to destroy the overall layout of the HTML page when the page is loaded.

Basic precautions-useful tips: ¶

Note: if a HTML file contains ten images, 11 files need to be loaded in order to display the page correctly. It takes time to load pictures, so our advice is: use pictures carefully.

Note: when loading a page, pay attention to the path of inserting the page image. If the location of the image is not set correctly, the browser cannotload the image, and the image label will display a broken picture.

HTML image label ¶