The webpages supports multimedia which allows you to insert images, sounds animations, movies and other mutimedia content into the webpage.
<img> element is an inline element which means it can be inserted anywhere. (e.g. inside text block, inside a table cell, inside list item etc.,)
The element doesn't require an ending element. It is an empty element and is re-placed by the
<img/> tag in XHTML.
<img> element requires an src attribute to define the name and the location of the image file.
<html> <head></head> <body> This text is followed by an image <img src="../image.jpg"> Text after the image. </body> </html>
URL stands for Uniform Resource Locator. The URL is a standard to identify the location of the resources over the internet. The URL can be absolute or relative.e.g URL
<html> <head></head> <body> The image is the following <img src="http://quotefellas.com/quotes/2013/04/94_650-before-you-start-anything-learn-how-to-finish-it.jpg"> Text after the image. </body> </html>
The HTML file and the image file can be on the same computer or on the different computers connected to the internet.
The relative URL identifies the location of the image by describing a path relative to the current directory where the HTML file is located.../ - denotes the parent directory / - denotes the root directory e.g. /logo.jpg ../../logo.jpg
The browser will render an image as it is. To add the black border to the image, add the border attribute of the <img> element.
<html> <head></head> <body> No Border <img src="logo.jpg"> Image with border <img src="logo.jpg" border="2"> </body> </html>
By default the image is displayed with the original size on the browser. To scale an image to a different width and height, the width and height attribute of the
<img> element is used.
<html> <head></head> <body> No Border <img src="logo.jpg" width="200"> Image with border <img src="logo.jpg" width="300" height="200"> </body> </html>
The alignment between an image relative to other inline elements of a web page.
The horizontal alignment of an image relative to the parent block, use the align attribute with these values.
The size of the white space between an image and the other content of the web page can be defined using the following two attributes.
The possible values of these attributes are
To clear the left side or the side of an image of text, use a
<br> element having the clear attributes set to the following.
<br clear="right"> before the first appearance of the sentence "Text after the image" .
The alt attribute allows to attach a description to an image. The value of the alt attribute can be any double quoted string of less than 1024 characters. Its not required but it is strongly recommended to add the alt attribute to the
For descriptions with more than 1024 characters, use the longdesc attribute of the
The lowsrc attribute is used to attach a second URL to an
<img> element. The URL identifies an image similar to the one indicated by the src attribute but in low-resolution format.
To attach a background image to a web page, use the background attribute of the
<body> element. The value of the background attribute is the URL that indicates the image file.
Images can be used to create custom made lists in which the leading symbols of items are images. It is created without using
<li> element, rather it is simply an images accompanied by text and formatted with