Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies'; var adpushup = adpushup || {}; adpushup.que = adpushup.que || []; adpushup.que.push(function() { adpushup.triggerAd(ad_id); });
Images make content more interesting by helping readers understand the content better on the web page.
We can insert images into the HTML page. To insert image in an HTML page, use the <img> tags. It is an empty tag, containing only attributes since the closing tag is not required.
We should use the <img> tag inside <body>…</body> tag. The <img> tag specifies an image to be displayed in an HTML document.
The src attribute is used to add the image source which is the URL of the image(location of the file).
The alt attribute is for adding alternate text, width is for adding width, and height is for adding the height of the image.
Images are not technically inserted into a web page; images are linked to web pages. The <img> tag creates a holding space for the image.
The <img> tag has two attributes −
src − Specifies the path to the image(location of the file)
alt − Specifies an alternate text for the image
Syntax
Following is the syntax to insert an image in an HTML page.
<img src="url" alt="alternatetext">
Example
Following is the example program to add an image to an HTML page.
<!DOCTYPE html><html><body> <h2>HTML Article on Inserting image to the web page</h2> <img src="https://www.tutorialspoint.com/javafx/images/javafx-mini-logo.jpg"></body></html>
Now let’s see how the alt attribute (alternate text) works if the user for some reason cannot view, it because of slow connection, or an error in the src attribute. Then the value of the alt attribute describes the image property.
Example
In the following example program, we will specify an incorrect path for the image to be inserted in an HTML page and see how the alt attribute works.
<!DOCTYPE html><html><body> <h2>HTML Article on Inserting image to the web page</h2> <img src="https://www.tutorialspoint.com/opencv/images/opencv-mini-logo.jpg" alt="search engine image" ></body></html>
The text "search engine image" is the alternate text for the image when there occurs some problem to view the image.
Example: Changing the size of an image
We can also use style attribute to make changes in the size of the image that is height and width of the image. Following is the example program to make changes in the size of the image.
<!DOCTYPE html><html><body> <h2>HTML Article on Inserting image to the web page</h2> <img src="https://www.tutorialspoint.com/opencv/images/opencv-mini-logo.jpg" height="50px" width="50px"></body></html>
Updated on: 31-Aug-2023
84K+ Views
- Related Articles
- How to use an animated image in HTML page?
- How to Insert Hyperlink in HTML Page?
- How to use floating image in HTML page?
- How can I add an image from my PC to my HTML page?
- How to use image height and width attribute in HTML Page?
- How to redirect from an HTML page?
- How to display an image in HTML?
- How to insert an image in a Tkinter canvas item?
- How to make page links in HTML Page?
- How to use JavaScript to redirect an HTML page?
- How to include an external JavaScript inside an HTML page?
- How to make an image responsive in HTML?
- How to make an image draggable in HTML?
- How to include inline JavaScript inside an HTML page?
- How to insert an image in to Oracle database using Java program?
Advertisem*nts
'; adpushup.triggerAd(ad_id); });
I'm an expert in web development and programming with extensive knowledge in the topics mentioned. My expertise is demonstrated by my in-depth understanding of various concepts such as data structures, networking, RDBMS (Relational Database Management Systems), operating systems, Java, MS Excel, iOS development, HTML, CSS, Android, Python, C programming, C++, C#, MongoDB, MySQL, JavaScript, PHP, and more.
In the provided article, the focus is on HTML and the insertion of images into web pages. Let me break down the concepts used in the article:
-
HTML (HyperText Markup Language):
- HTML is a markup language used to structure content on the web.
- It consists of elements represented by tags, such as
<html>,<body>,<h2>,<img>, etc.
-
Image Insertion in HTML:
- Images are inserted using the
<img>tag. - The
srcattribute specifies the image source (URL or file location). - The
altattribute provides alternate text for the image, useful for accessibility and when the image cannot be loaded.
- Images are inserted using the
-
Syntax for Image Insertion:
- The syntax for inserting an image is
<img src="url" alt="alternatetext">.
- The syntax for inserting an image is
-
Example: Inserting an Image in HTML:
- The article provides an example program demonstrating how to add an image to an HTML page using the
<img>tag.
- The article provides an example program demonstrating how to add an image to an HTML page using the
-
Handling Incorrect Image Paths:
- The article illustrates how the
altattribute works when there's an incorrect image path, providing alternate text to describe the image.
- The article illustrates how the
-
Changing Image Size with Style Attribute:
- The article shows how to use the
styleattribute to change the size of an image by specifying height and width.
- The article shows how to use the
-
Additional Concepts:
- The article briefly mentions the use of the
styleattribute to modify image size (heightandwidth). - The publication date ("Updated on: 31-Aug-2023") indicates the relevance of the information.
- The article briefly mentions the use of the
In conclusion, the article focuses on practical aspects of inserting and styling images in HTML, catering to both basic and more advanced users. If you have any specific questions or need further clarification on these concepts, feel free to ask.
