Tutorialspoint.dev

HTML | Images

Earlier, the webpages used to comprised 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 :

‘src’ attribute :
src stands for source.Every image has a 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.

‘alt’ attribute :
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 an user-defined text.



<!DOCTYPE html>
<html>
  
<h3>Inserting an image using "img" tag.</h3>
  
<body>
  
<img src="gfg_200X200.jpeg" alt="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.

<!DOCTYPE html>
<html>
  
<h3>Inserting an image using "img" tag.</h3>
  
<body>
  
<img src = "gfg_200X200.jpeg" alt = "GeeksforGeeks logo"
            width = "400" height= "500">
  
</body>
</html>

Output :

Adding animated Image :

Animated images in .gif format can also be added using the “img” tag.

<!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 :


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.

<!DOCTYPE html>
<html>
  
<h3>Inserting image using "img" tag.</h3>
  
<body>
  
<img src="gfg_200X200.jpeg" alt="GeeksforGeeks logo"
            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.

<!DOCTYPE html>
<html>
  
<h3>Inserting an image using "img" tag.</h3>
  
<body>
  
<img src="gfg_200X200.jpeg" alt="GeeksforGeeks logo"
            title="Logo of GeeksforGeeks" border="5">
  
</body>
</html>

Output :



Aligning a Picture :

By default an image is aligned at the left side of the page, but it can be aligned to center or right using the align attribute.

<!DOCTYPE html>
<html>
  
<h3>Inserting image using "img" tag.</h3>
  
<body>
  
<p>Right alignment</p>
<img src="gfg_200X200.jpeg" alt="GeeksforGeeks logo"
            title="Logo of GeeksforGeeks" align="right"><br>
  
</body>
</html>

Output :

Adding Image as a Link :

An image can work as an link with a url embedded in it. It can be done by using the “img” tag inside an “a” tag.

<!DOCTYPE html>
<html>
<body>
  
<h3>Using Image as a link</h3>
  
<p>Click on the image to visit GeeksforGeeks homepage</p>
<a href="http:// www.geeksforgeeks.org">
<img src = "gfg.jpg" alt="GeeksforGeeks" 
            style="width:42px;height:42px;border:0;">
</a>
  
</body>
</html>

Output :


Using Image as a background :

An image can be used a background for a webpage.

<!DOCTYPE html>
<html>
<body style="background-image:url('giphy.jpeg')">
  
<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 :



This article is attributed to GeeksforGeeks.org

leave a comment

code

0 Comments

load comments

Subscribe to Our Newsletter