In HTML Image Tag lesson you will learn how to embed image to your website and how to make the image like clickable URL.
Also you will know how to manipulate image width, height and title.

HTML Images Syntax

In HTML, images are defined with the <img> tag. Also The <img> tag is empty, it contains attributes only, and does not have a closing tag. The src attribute specifies the URL (web address) of the image.

Fore Example:

<img src="Image_url"> 

The alt Attribute

The alt attribute provides an alternate text for an image, if the 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 value of the alt attribute should describe the image.

 <img src="safhatech_logo.jpg" alt="Safhatech logo"> 

Note: If a browser cannot find an image, it will display the value of the alt attribute.

Image Size – Width and Height

You can use the style attribute to specify the width and height of an image.

Example:

 <img src="safhatech_img.jpg" alt="safhatech image" style="width:400px;height:500px;"> 

Alternatively, you can use the width and height attributes:

<img src="safhatech_img.jpg" alt="safhatech image" width="500" height="600"> 

The width and height attributes always defines the width and height of the image in pixels by default.

Width and Height, or Style?

The width, height, and style attributes are valid in HTML5. However, we suggest using the style attribute. Because it prevents styles sheets from changing the size of images.

Images in Another Folder

If not specified, the browser expects to find the image in the same folder as the web page. However, it is common to store images in a sub-folder. You must then include the folder name in the src attribute with relative URL.

Fore Example:

 <img src="/images/html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;"> 

Images on Another Server

Some web sites store their images on image servers. Actually, you can access images from any web address in the world with absolute URL.

Example:

 <img src="https://www.safhatech.com/images/safhatech_image.jpg" alt="safhatech.com"> 

Image as a Link

To use an image as a link, put the <img> tag inside the <a> tag with image url inside src attribute.

Example:

 <a href="safhtech.com">
  <img src="safhatech.gif" alt="safhatech_image" style="width:42px;height:42px;border:2;">
</a> 

This post is one of the HTML5 for deep understanding course. where we will learn every common elements from basic to the advanced element.

In addition each lesson has a video which you could visit and watch for more practicing and for deep understanding.

We hope that we could give the best for you and for the deep and easy understanding.

You could follow the series from our website SAFHATECH.com and go to categories and then programming and then Choose the course you want then just click next post to go step by step.

Finally we hope every thing is works as you suspect.

Consequently You could follow us at :

Website URL: https://www.safhatech.com/

Youtube: https://www.youtube.com/channel/UCIVzh6iykNowNcOUT5Gfasw

Twitter: http:// https://twitter.com/safhatech

Instegram: https://www.instagram.com/safhatech

Facebook: http:// https://www.facebook.com/Safhatech-487171875443687

Phone:967772223681