Adding an Image
×
Home Courses Community Support
Adding an Image

To add an image in webpage we use <img> tag. This is a void element which doesn’t need to be closed.
 

HTML syntax to add an image -

<img src=”image_path”>


Image path can be local path from your system or live server URL. Let's add an image to your First Html Page-

<!DOCTYPE html>
<html>
<head><title>My HTML Page</title></head>
<body>
<p align="center">This is my first webpage.</p>
<img src="http://www.geeksdemy.com/images/directaccess/RWD.PNG">
</body>
</html>


This code will simply print the paragraph taxt on webpage and will display an images. Further we can add attributes to image tag as given in below code-

<img alt="Responsive Web Design" border="20px" height="300" title="Responsive design" src="http://www.geeksdemy.com/images/directaccess/RWD.PNG">


We have used alt, border, height and title attributes for image.

Alt attribute: Text given in alt attribute display inctead of image if the browser unable to load image on webpage.

Border attribute: This attribute used to add border to the image. You can set any border of any pixels.

Height: It is used to fix the height of image.

Title attribute: This attribute used to give a title name to image. Title display on hover which tell user more about image. It is beneficial in terms of search engine also.
 

enlightenedAdding attributes is always optional. It depends on our requirement. For example, we have used height attribute in image to fix the height 300px and we can use original height too.


Image as a link

In html we can use an image as a link. For example, we can give a link of book store on a book icon, used in webpage.

Let's create a simple link first:

<a href="#">Book Store</a> <!--Replace # with a URL where you want-->


Now to create a image link, we need to replace text "Book Store" with an image.

<a href="#"> <img src="image_URL"></a>


Current link will be open in same tab. If we want to open the link in new tab then we need to set the link target using target attribute.

<a href="#" target="_blank"> <img src="image_url"></a>


See complete code to use an image as link-

<a href="http://geeksdemy.com" target="_blank"><img src="http://www.geeksdemy.com/images/directaccess/rwd_book.PNG"></a>


This code will show the link as below image-

← Preview

Formatting Text in html

Next →

Working on Table

NOTES

Our mission is to provide highly effective and quality education via innovative solutions. Geeksdemy look forward to bridge the gap between in-demand technology and academics in order to deliver innovative, easy, interesting and affordable learning across the Globe.

Courses

  • Python
  • Game Development with Unity 3D
  • Arduino
  • PCB & Circuit Designing
  • Robotics and Embedded C
  • 8051/8052 Embedded Systems
  • QuadCopter & UAV
  • MATLAB with Robotics
  • Raspberry Pi
Learn On the Go!
Get the Android App
Get the iOS App