Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Insert Image in HTML Page
To insert an image in HTML page, is a very common and easy task that enhances the appearence of any web page. It makes a web age look more attractive.
In this article, our task is to insert an image in HTML page. We have used three different approaches using HTML tags and CSS properties to insert an image in HTML page.
Approaches to Insert an Image in HTML Page
Here is a list of approaches to insert an image in HTML page which we will be discussing in this article with stepwise explaination and complete example codes.
- Insert an Image using img Tag
- Insert an Image using background Property
- Insert an Image using embed Tag
Insert an Image using img Tag
To insert an image, we have used HTML img tag. HTML img tag is an inline and empty element used to embed image in the HTML document.
- We have used img tag to insert image using link of the image. The alt attribute describes about the image when image fails to load.
- Then, we have used img element selector to set the top margin and width of the image using CSS margin-top and width property.
Example
Here is a complete example code implementing above mentioned steps to insert an image in HTML page using HTML img tag.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Inserting Image Using img Tag</title>
<style>
img {
width:100%;
margin-top: 15px;
}
</style>
</head>
<body>
<h2>
To Insert an Image in HTML Page
</h2>
<p>
In this example we have used Html <strong>img
</strong> tag to insert an image in HTML page.
</p>
<img src="/css/images/css.jpg" alt="CSS Tutorial">
</body>
</html>
Insert an Image using background Property
In this approach to insert an image in HTML page, we have used CSS background property with url() function.
- We have used a div container with img class. We will be setting background image of this div container.
- We have used img class to set the background of div using url() function.
- Then, we have used background-repeat property to stop repeating of image and set the dimension of image using CSS height and width property.
Example
Here is a complete example code implementing above mentioned steps to insert an image in HTML page using CSS background property and url() function.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Inserting Image Using img Tag</title>
<style>
.img {
background: url('/css/images/css.jpg');
width:100%;
height: 200px;
background-repeat: no-repeat;
}
</style>
</head>
<body>
<h2>
To Insert an Image in HTML Page
</h2>
<p>
In this example we have used CSS <strong>background
</strong> property with <strong>url()</strong>
function to insert an image in HTML page.
</p>
<div class="img"></div>
</body>
</html>
Insert an Image using embed Tag
In this approach, we have used HTML embed tag to insert an image in HTML page which is used as a container for external applications, multimedia, and interactive content that the browser don't understand.
- We have used embed tag to insert image and used type attribute to specify the type of media.
- Then, we have used embed as element selector to set the width and top margin of the image.
Example
Here is a complete example code implementing above mentioned steps to insert an image in HTML page using HTML embed tag.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Inserting Image Using img Tag</title>
<style>
embed {
width:100%;
margin-top: 15px;
}
</style>
</head>
<body>
<h2>
To Insert an Image in HTML Page
</h2>
<p>
In this example we have used Html <strong>embed
</strong> tag to insert an image in HTML page.
</p>
<embed src="/css/images/css.jpg" type="image/jpg">
</body>
</html>
Conclusion
In this article, to insert an image in HTML page we have understood three different approaches which are: by using HTML img tag, CSS background property and HTML embed tag. Out of all three approaches we have discussed, HTML img tag is most frequently used to insert an image.
95K+ Views
