HTML - Class 6 - HTML Images

Learn HTML

Assalam-U-Alikum Guys,

Welcome again, Today we learn about Images in HTML. Images are very important to beautify as well as to depict many complex things in simple way on your Web Page.

Never Doubt the Power of an Image

              Something that words not Explained But Image Can. means images play a vital role in understanding.This Tutorial POST will take you through simple steps to use images in your web page.

This Post Contains :

• Insert an Image
• Set Image Width and Height
• Set Image Border
• Set Image Alignments
• Using an Image as a Links

Basic Syntax :

In HTML, <img> Tag is used for defining the images.

The <img> is an empty Tag, and it contains a list of attributes only. 

The <img> Tag has no ending tag.

<img src="address or URL" style="width:width; 
height:height;" alt="Any_text_to Display">

• The src attribute specifies Address/Location of Image or the URL of the image.
• The alt attribute shows an alternate text for an image, if you cannot view image because of an Error or Connection problem or if you URL or Address id invalid.

Insert an Image :
To insert an image in web page <img> is used and specify the address or location of image using src (source) attribute. 

Some Rules for src Attribute are :

1. Make Sure that you specify a valid URL or Address for image.
2. Image name is always be Case Sensitive.
3. You can use these image Formats : JPEG, JPG, PNG, GIF or based on your need.  

Example :

<img src="D:images/bunny.jpg">

Set Image Width Height :

In HTML, you can also set the height and width of an image based on your requirement. For that purpose we can use Height and Width attributes of <img> Tag.

we can specify Height and Width in term of 
px  : that specify dimensions in pixels.
%  : Percentage of its original size.
em : allow you to change as per its parent element.

Example :

<img src="D:images/bunny.jpg" width="100px" height="100px">


Set Image Border :

By default, image will have border around it with everything is zero as well as you can specify border thickness, color, type by as your needs by two ways.

First one in Style Attribute and second one is separately using the border attribute. 

A thickness zero (0) means no border arround the picture.

Example :

<img src="D:images/bunny.jpg" width="100px" height="100px" border="3px">

<img src="D:images/bunny.jpg" width="100px" height="100px" 
Style="border:solid 5px black;">

Set Image Alignments :

In HTML by default, Images are Left Aligned or at he Left side of web page but to align them as per need we use Align attribute to set it in right, left or center.

Example :

<img src="D:images/bunny.jpg" width="100px" height="100px" 

align="center">

Using an Image as a Link

In HTML we can also use our images as a link, simply nest the <img> tag inside the <a> tag or write the <img> tag in between the <a> and </a> Tag.

<a href="https://weblayoutexpert.blogspot.com/">

  <img src="D:images/bunny.jpg"style="width:100px;height:100px;">

</a>

Thank you all for paying attention.

Good Bye (Allah Hafiz)

Tutor : Asad Saleem