How to insert images into an HTML document.
In HTML, images are defined with the <img> tag. The <img> tag is empty, which means that it contains attributes only, and has no closing tag. To display an image on a page, you need to use the src attribute. Src stands for "source". The value of the src attribute is the URL of the image you want to display.
Syntax for defining an image:
The URL points to the location where the image is stored. An image named "boat.gif", located in the "images" directory on "www.123schools.blogspot.com" has the URL: http://www.123schools.blogspot.com/images/boat.gif.
The browser displays the image where the <img> tag occurs in the document. If you put an image tag between two paragraphs, the browser shows the first paragraph, then the image, and then the second paragraph.
The value of the alt attribute is an author-defined text:
The alt attribute provides alternative information for an image if a user for some reason cannot view it (because of slow connection, an error in the src attribute, or if the user uses a screen reader).
The attribute values are specified in pixels by default:
Tip: It is a good practice to specify both the height and width attributes for an image. If these attributes are set, the space required for the image is reserved when the page is loaded. However, without these attributes, the browser does not know the size of the image. The effect will be that the page layout will change during loading (while the images load).
Example :-
HTML Images - The <img> Tag and the Src Attribute
In HTML, images are defined with the <img> tag. The <img> tag is empty, which means that it contains attributes only, and has no closing tag. To display an image on a page, you need to use the src attribute. Src stands for "source". The value of the src attribute is the URL of the image you want to display.
Syntax for defining an image:
The URL points to the location where the image is stored. An image named "boat.gif", located in the "images" directory on "www.123schools.blogspot.com" has the URL: http://www.123schools.blogspot.com/images/boat.gif.
The browser displays the image where the <img> tag occurs in the document. If you put an image tag between two paragraphs, the browser shows the first paragraph, then the image, and then the second paragraph.
HTML Images - The Alt Attribute
The required alt attribute specifies an alternate text for an image, if the image cannot be displayed.The value of the alt attribute is an author-defined text:
The alt attribute provides alternative information for an image if a user for some reason cannot view it (because of slow connection, an error in the src attribute, or if the user uses a screen reader).
HTML Images - Set Height and Width of an Image
The height and width attributes are used to specify the height and width of an image.The attribute values are specified in pixels by default:
Tip: It is a good practice to specify both the height and width attributes for an image. If these attributes are set, the space required for the image is reserved when the page is loaded. However, without these attributes, the browser does not know the size of the image. The effect will be that the page layout will change during loading (while the images load).
Example :-
- Open a text editor and type the following line in to the text editor.
- Save file web.html
- Open that file in a web browser.
- You get like this out put.
- In this example there is no image displayed in browser. Because web.html cannot find 'atp.jpg' image file.
- Put a jpg file in that location where web.html is located.
- Save that file name as atp.jpg
- Reload your brower or Reopen web.html in a browser
- Now you get another out put.
No comments:
Post a Comment