Welcome to Our Free Tutorial!

HTML Images!

HTML Images

Images are a large part of the web. HTML it very easy for embed images into your page.

To embed an image into a web page, the image first needs to support .jpg, .gif, or .png Format. You can create images in image editor like Adobe Photoshop and save them in the correct format.

HTML Images – The <img> tag with the Src Attribute.

In HTML, images are defined with the <img> tag.

The <img> tag is empty. It contains attribute only, and closing tag.

To display an image on your page, you need to add Src attribute. Src stands for "source". The value of the src attribute is the URL of the image to display.

Syntax:

<img src="url" alt="Text related to image"/>

URL is location where the image is stored. An image named "internet.gif", located in the "Images" folder on www.aonestudy.com has the URL:
http://www.aonestudy.com/images/internet.gif.

HTML Images - Alt Attribute

Alt attribute specify the Alternative text information for an image, if the user for some reason image cannot be view it or displayed on the page(because of slow connection, an error in src attribute). The value of the alt attribute displayed when cursor mouse over on the image.
<img src="internet.gif" alt="This is internet"/>

HTML Images - Set Height and Width of an Image

The HTML height and width attribute are used for height and width of the image. The attribute values are specified in pixels by default:
Syntax:
<img src="internet.jpg" alt="Internet World" width="304" height="228" />

Width:- Optional attribute. This specifies the width to display the image. If the actual width is smaller it will expend the width.

Height:- Optional attribute. This specifies the height to display the image. The attribute work similar to the width.

Image Alignment

You can specify the images will be aligned, relative to the other content on the page (such as a paragraph of text). You do the align attribute.

HTML Code:

<p><img src="www.aonestudy.com/images/internet.jpg" width="100" height="100" alt="World internet" align="right/ left/middle"/> Here is a paragraph of text to determine HTML images and how they can be aligned to the right of a paragraph.</p>

Result:

World internet Here is a paragraph of text to determine HTML images and how they can be aligned to the right of a paragraph.

Image Links

You can make your images “Clickable” when the user clicks the image, it opens another URL.
<a href="URL Of Image"> <img src="http://www.aonestudy.com/images/internet.jpg" width="100" height="100" alt="Internet world" /> </a>

Result:

Internet world

HTML Image Border

You noticed that this is created border around the image. If you want to display border around images. The attribute is border="2".

HTML CODE:

<a href="URL Of Image">
<img src="http://www.aonestudy.com/images/internet.jpg" 
width="100" height="100" alt="Internet world" border="10" />
</a>

Result:

Internet world

Removing the Border

If you want to remove border from images. You need to use border attribute, specify border="0".

HTML CODE:

<a href="URL Of Image">
<img src="http://www.aonestudy.com/images/internet.jpg"
width="100" height="100" alt="Internet world" border="0" />
</a>

Result:

Internet world