How to insert images:
In this lesson we will know that how to insert an image in the html file. To embed the image, we need to use the tag <img src>. src is the source attribute of image tag. That attribute should be equal to the link or the name of image along with the extension "png" (ended up with forward slash) of that image which you want to insert.
Note: Don't forget to use break tag to insert image on new line.
For Example:
<!DOCTYPE html>
<html>
<head>
<title>Inserting images</title>
</head>
<body>
<H1>What is html</H1>
<p>Hypertext Markup Language is the standard markup language for documents designed to be displayed in a web browser.
It can be assisted by technologies such as Cascading Style Sheets and scripting languages such as JavaScript.</p>
<BR / >
<img src="html.png">
</body>
<html>
Note : I have saved the image in the folder named as "html" of type .png , you may also add online image from the internet by just writing the url of the image in img tag.
Resizing the Image:
Alternate text:
How to connect any site with image:
This is an interesting task that we can connect any link or site with the image. This will work like that if you click on that image , the site will be opened which we want to. This can be done by putting image tag in the anchor tag.
Note: Do not forget save image in the same path where your html program is saved.
For example:
<!DOCTYPE html>
<html>
<head>
<title>Inserting images</title>
</head>
<body>
<H1>What is html</H1>
<p>Hypertext Markup Language is the standard markup language for documents designed to be displayed in a web browser.
It can be assisted by technologies such as Cascading Style Sheets and scripting languages such as JavaScript.</p>
<a href = "https://en.wikipedia.org/wiki/HTML">Check out this link</a>
<a href ="https://en.wikipedia.org/wiki/HTML"><img src = "html.png"/></a>
</body>
<html>
Note: html.png is the image which i have saved in my PC at the similar path.
0 Comments