Skip to content
Related Articles

Related Articles

Improve Article

HTML Images

  • Difficulty Level : Basic
  • Last Updated : 08 Jul, 2021

Earlier, the web pages used to consist of only texts, which made them appear quite boring and uninteresting. Fortunately, it wasn’t long enough that the ability to embed images on web pages was added for users. Let’s see how to add images on a webpage.

Adding images on a webpage   The “img” tag is used to add images on a webpage. The “img” tag is an empty tag, which means it can contain only a list of attributes and it has no closing tag.

Syntax : 
 

<img src="url" alt="some_text">

Attribute: 
 

src: The src stands for source. Every image has an src attribute which tells the browser where to find the image you want to display. The URL of the image provided points to the location where the image is stored.
 



html




<!DOCTYPE html>
<html>
 
<head>
    <title>Inserting an image using "img" tag</title>
</head>
 
<body>
     
 
 
<p>inserted image using <img> tag:</p>
 
 
 
    <img src=
         alt="GeeksforGeeks logo">
 
</body>
 
</html>

Output : 
 

alt: If the image cannot be displayed then the alt attribute acts as an alternative description for the image. The value of the alt attribute is a user-defined text.

HTML




<!DOCTYPE html>
<html>
<head>
    <title>Alt Attribute Example</title>
</head>
<body>
     
 
 
<p>inserted image using <img> tag:</p>
 
 
 
         alt="This is GeeksforGeeks logo">
 
</body>
 
</html>

Output:

Setting width and height of Image: The width and height attributes are used to specify the height and width of an image. The attribute values are specified in pixels by default.
Example: 

html




<!DOCTYPE html>
<html>
 
<head>
    <title>Setting width and height of image</title>
</head>
 
<body>
     
 
 
<p>inserted image using <img> tag:</p>
 
 
 
    <img src=
         alt="GeeksforGeeks logo" width="300" height="300">
 
</body>
 
</html>

Output : 
 



 

Adding titles to Image: Along with the images, titles can also be added to images to provide further information related to the inserted image. For inserting a title, the title attribute is used. 
Example: 

html




<!DOCTYPE html>
<html>
 
<head>
    <title>Inserting an image using "img" tag</title>
</head>
 
<body>
     
 
 
<p>inserted image using <img> tag:</p>
 
 
 
    <img src=
         alt="GeeksforGeeks logo"
         width="200"
         height="200"
         title="Logo of GeeksforGeeks">
 
</body>
 
</html>

Output : 
 

Setting a border to Image: By default, every picture has a border around it. By using the border attribute, the thickness of the border can be changed. A thickness of “0” means that there will be no border around the picture.
Example: 

html




<!DOCTYPE html>
<html>
 
<head>
    <title>Setting border to image</title>
</head>
 
<body>
     
 
 
<p>inserted image using <img> tag:</p>
 
 
 
    <img src=
         alt="GeeksforGeeks logo"
         width="200"
         height="200"
         border="5">
 
</body>
 
</html>

Output : 
 

Aligning an Image:  By default, an image is aligned on the left side of the page, but it can be aligned to the centre or right using the align attribute.
Example:

html




<!DOCTYPE html>
<html>
 
<head>
    <title>Aligning an image</title>
</head>
 
<body>
     
 
 
<p>inserted image using <img> tag:</p>
 
 
 
    <img src=
         alt="GeeksforGeeks logo"
         align="right">
 
</body>
 
</html>

Output : 
 



Adding Image as a Link: An image can work as a link with a URL embedded in it. It can be done by using the “img” tag inside an “a” tag.
Example:

html




<!DOCTYPE html>
<html>
 
<head>
    <title>Adding image as link</title>
</head>
 
<body>
     
 
 
<p>inserted image using <img> tag:</p>
 
 
 
        <img src=
             alt="GeeksforGeeks logo">
    </a>
</body>
 
</html>

Output: 

Before clicking the picture: 
 

GeeksforGeeks logo

After clicking the picture: 
 

GeeksforGeeks IDE

Adding animated Image: Animated images in .gif format can also be added using the “img” tag.
Example:

html




<!DOCTYPE html>
<html>
 
<h3>Adding a gif file on a webpage</h3>
 
<body>
 
    <img src="smiley.gif"
         alt="smiley"
         style="width:200px; height:200px;">
 
</body>
 
</html>

Output :
 

Using Image as a background: An image can be used a background for a webpage. For this we use the background-image property of CSS.
Example: 

html




<!DOCTYPE html>
<html>
 
<body style="background-image:url
 
    <h2>Image As a Background</h2>
 
     
 
 
<p>In this example we have specified a
      background for a webpage using an image. </p>
 
 
 
 
</body>
 
</html>

Output : 
 

Supported Browsers:

  • Google Chrome
  • Internet Explorer
  • Firefox
  • Opera
  • Safari

 

Attention reader! Don’t stop learning now. Get hold of all the important Comcompetitivepetitve Programming concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :