The Complete WebDeveloper (42 Blogs) Become a Certified Professional

What are HTML Images and How to Modify you Web Page?

Published on Aug 14,2019 52 Views

MI-new-launch

myMock Interview Service for Real Tech Jobs

myMock-mobile-banner-bg

myMock Interview Service for Real Tech Jobs

  • Mock interview in latest tech domains i.e JAVA, AI, DEVOPS,etc
  • Get interviewed by leading tech experts
  • Real time assessment report and video recording

Images are a very important part of a web page as it improves the appearance of a web page and increases customer interaction. The USP of multiple websites is how they organise different images on their webpages & add flavors to it. In this HTML Images article, we will understand how to embed images in a webpage using HTML in the following order:

 

How To Add Image In HTML

To embed an image in a webpage HTML gives you <img> tag. Another important point to remember is, <img> doesn’t have a closing tag. scr attribute is used to specify the path of the image, which can be a url or image path from the system/server. Let us first start with the basic syntax of embedding image in a webpage using HTML.

Syntax

<span>img src="edureka.png"></span>

Sample Code


<!DOCTYPE html>

<html>
 <head>
      <title>HTML Image</title>
   </head>
   <body>
      

Embedding Images in Webpage

  <img src="edureka.png">
   </body>
</html>

img-scr-html-images

 

Similar to other tags, there are various attributes associated with <img> tag. Let us look at each one of them one by one, understand their need & how to use them.

 

HTML Images Tags

  • alt Attribute

The alt attribute is the alternate text for an image. The reason why alt attribute was introduced is if due to any reason the image could not load then an alternate text should appear giving an idea about the image. The reasons for image not loading could be slow internet connection or image doesn’t reside in the provided source, etc.

If the image resides inside the same folder where HTML file is, you can specify the name of the file directly. Otherwise, you have the provide the absolute path of the image file.

The value of the alt attribute should describe the image.

Example

<img src="edureka.png" alt="Edureka Logo">

<!DOCTYPE html>
<html>

<head>
<title>HTML Image</title>
</head>

<body>


Embedding Images in Webpage

<img src="edureka1.png" alt="Edureka Logo">
</body>

</html>

alt-attribute

 

  • Width and Height of an Image

Style attribute is used to set the height & width of an image. In style attribute you specify the CSS styling.


<!DOCTYPE html>
<html>
   <head>
      <title>HTML Image</title>
   </head>
   <body>
      

Embedding Images in Webpage

  <img src="edureka.png" alt="Edureka Logo" style="width:500px;height:200px;">
   </body>
</html>

height-html-images

 

Some of the important points while embedding an image in a webpage using HTML are:

  • The width and height attributes are defined in pixels.
  • You can also define the width and height of an image in percentage. It will consider the percentage according to the whole webpage. 

<img src="edureka.png" alt="edureka logo" width="60%">

  • If you only specify one of them then it adjusts the other accordingly.

 

  • Embedding Images using URL

HTML also gives you the flexibility where you can pick the image from another server just by specifying the URL. You can use a separate server to host the images & then embed those images using URL.


<!DOCTYPE html>
<html>

<head>
<title>HTML Image</title>
</head>

<body>


Embedding Images in Webpage

<img src="https://s3-eu-west-1.amazonaws.com/tpd/logos/5a140a150000ff0005b11342/0x0.png" alt="Edureka Logo">
</body>

</html>

img-scr-html-images

 

  • Image as a Link

You can also use image as a link where the user can click on the image and land on a new webpage. To do so, you just have to put the <img> tag in <a> tag.


<!DOCTYPE html>
<html>
   <head>
      <title>HTML Image</title>
   </head>
   <body>
      

Embedding Images in Webpage

  <a href="https://www.edureka.co/">
<img src="edureka.png" alt="edureka logo" style="width:100px;height:50px;border:0;">
</a>
   </body>
</html>

image-as-link

 

  • Image Floating

You can also adjust the alignment of the image using CSS float property. All the CSS property needs to be specified in the style attribute.


<!DOCTYPE html>
<html>
   <head>
      <title>HTML Image</title>
   </head>
   <body>
      

<img src="edureka.png" alt="Edureka Logo" style="float:right;width:100px;height:50px;">
The image will float to the right of the text.



<img src="edureka.png" alt="Edureka Logo" style="float:left;width:100px;height:50px;">
The image will float to the left of the text.

   </body>
</html>

image-floating

 

  • Image Maps

This is one of the important features provided by HTML. <map> tag helps in defining an image-map. You must be wondering what an image map is. An image-map is an image with clickable areas


<!DOCTYPE html>
<html>
   <head>
     <title>HTML Image</title>
   </head>
   <body>
      <img src="eduerka.png" alt="Eduerka" usemap="#edurekamap">


<map name="edurekamap">
  

<area shape="rect" coords="23,57,257,300" alt="e" href="https://www.edureka.co/devops">
  

<area shape="rect" coords="291,157,364,237" alt="d" href="https://www.edureka.co/big-data-and-hadoop">
  

<area shape="circle" coords="337,300,44" alt="u" href="https://www.edureka.co/robotic-process-automation-training">
</map>


  </body>
</html>

 

  • Background Image

You can also add a background image in a webpage. You just have to use the CSS property i.e. background-image in the style tag and add it to the HTML element.


<!DOCTYPE html>
<html>
   <head>
     <title>HTML Image</title>
   </head>
   <body style="background-image:url('edureka.png');">


<h2>Background Image</h2>




BODY element

</body>
</html>

background-html-images

 

With this we come to an end of this HTML Images Blog. Now after executing the above snippets you would have understood how to insert image in HTML. I hope this blog is informative and added value to you. 

Check out our Full Stack Web Developer Masters Program which comes with instructor-led live training and real-life project experience. This training makes you proficient in skills to work with back-end and front-end web technologies. It includes training on Web Development, jQuery, Angular, NodeJS, ExpressJS, and MongoDB.

Got a question for us? Please mention it in the comments section of “HTML Images” blog and we will get back to you.

Comments
0 Comments

Browse Categories

webinar REGISTER FOR FREE WEBINAR
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP

Subscribe to our Newsletter, and get personalized recommendations.