Images in HTML

---

The <img> Tag

The <img> tag is used to insert an image in a web page. It contains two required attributes: “src” attribute and “alt” attribute, and does not have a closing tag.

• src attribute, specifies the path to the image.
• alt attribute, specifies an alternate text for an image.

How to add an image in a web page

To add an image in an HTML web page, simply left click the image, click on properties, then you can see location of an image, copy that location and paste it after src attribute between ” “, then add ‘\’ and type the name of the picture followed by ‘.jpg’.

Here is how HTML image syntax looks like:

HTML image syntax:

<img src ="url" alt = "alternate text" /> 

Note:- src and alt attribute is required in the <img> tag:

Image Size – Width and Height

We can use width and height attributes, to define the image size. The value can be specified in pixels (px) or as percentage (%).

Example

<img src ="image.jpg" 
height ="160px" width = "120px"
 alt="alternate text "/> 

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

Example

<img src ="image.jpg" 
style ="width : "120px";height :"40px" 
alt = "alternate text"/> 

Note:- You can also use percentage(%) instead of pixels (px)

Image as a Link

To embed a link inside an image, we put <img> tag inside the <a> tag:

Example

<a href ="yourlink.com" >
   <img src= "image.jpg"
height ="500px" width ="600px" 
alt ="alternate text" />
</a> 

So, in an above example, link named “yourlink.com” will be embed in an image named “image.jpg”.

Image Floating

We can float an image, from left to right or from right to left by using the CSS float property.

Example

<p> <img src = "image.jpg"
style= "float:right;width:100px; height:80px;"> 
alt="This is an floating image"
The image will float to the right side </p> 

Related Posts

Introduction to web development

Introduction to HTML,CSS & JS

Basics of HTML #1

HTML Elements