Images

The webpages supports multimedia which allows you to insert images, sounds animations, movies and other mutimedia content into the webpage.

Supported Images

gif
jpeg
png
tiff
bmp(Internet Explorer)

<img> element

The <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. The <img> element requires an src attribute to define the name and the location of the image file.

snippet

<html> 
<head></head> 
<body> 
This text is followed by an image 
<img src="../image.jpg"> 
Text after the image. 
</body> 
</html>

Output

This text is followed by an image

Text after the image.

Html absolute URL

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

http://quotefellas.com/quotes/2013/04/94_650-before-you-start-anything-learn-how-to-finish-it.jpg

Internet Protocol : http:// Computer Name or IP : http://quotefellas.com/ Path : quotes/2013/04/ File Name : 94_650-before-you-start-anything-learn-how-to-finish-it.jpg

snippet

<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>

Output

The image is the following

Text after the image.

The HTML file and the image file can be on the same computer or on the different computers connected to the internet.

Html relative URL

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 image border attribute

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.

snippet

 
<html> 
<head></head> 
<body> 
No Border 
<img src="logo.jpg"> 
Image with border 
<img src="logo.jpg" border="2"> 
</body> 
</html>

Output

No Border

Image with border

Image width and height attribute

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.

* Positive integers (in pixels)
* Percentages (percentage of the parent block)

snippet

<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>

Output

No Border

Image with border

Note

If the width and height is changed from the original proportions, the image will be rendered disproportionately an will be distorted.

Image vertical alignment

The alignment between an image relative to other inline elements of a web page.

Properties	Description
`top`
`texttop` (only netscape)
`middle`
`absmiddle`
`center`
`bottom`(default value)
`baseline`
`absbottom`

Image horizontal alignment

The horizontal alignment of an image relative to the parent block, use the align attribute with these values.

left
right
center

white space around an image

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.

hspace
vspace

The possible values of these attributes are

Positive integers, indicating the size of the white space in pixels.
Percentage of the size of the parent.

clear attribute of the <br> element

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.

all
left
none
right

Insert <br clear="right"> before the first appearance of the sentence "Text after the image" .

alt Attribute

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 <img> element.

For descriptions with more than 1024 characters, use the longdesc attribute of the <img> element.

alt="Quote Fellas - A website to get world famous quotes"

Note

- If the browser cannot download an image or set to not download the images, the browser will render the value of the alt attribute instead of the image. - A tooltip will appear containing the value of the alt attribute if we hover the mouse over an image - The value of the alt attribute is important for tool to aid vision-impaired people.

lowsrc attribute

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.

Note

- The image indicated by src and lowsrc can be different images. - The low-resolution image (indicated by the lowsrc attribute) will be downloaded first (useful for low-speed connections) and later the actual image (sr attribute) will be downloaded. - It is recommended to use the same size for both images to avoid flicking of image during download of high resolution image.

The background image

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.

Note

- The image is tiled horizontally and vertically to fill the entire page. - Internet explorer accepts an additional attribute called bgproperties, which is used to set "fixed" so the background image will stay in the same position when the user scrolls the page content using the navigation tools (vertical navigation bars or Up/ Down keys)

Images to create custom made lists

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 <br> element.