HTML Introduction

HTML Basic Syntax

HTML Block Element

HTML Formatting

HTML Quotation

HTML Links

HTML List

HTML Table

HTML Audio

HTML Video

HTML Image

HTML Iframe

HTML Favicon

HTML Form

HTML Input Types

HTML Marquee

HTML Meta tag

Learn CSS

Learn Javascript

Learn Django

HTML image tag

How to add image?

For add an image, img tag is used. In img tag there is a attribute name src means source. We pass the path/name.extension in src attribute. After giving correct path, we can show the image on our web page. If the html file and image are in the same folder then don't pass the path but if both are in different folders then must give the path of the image. We can also use link if we want to take file from the internet

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

<img src="my_pic.jpg">
<img src="F:\HTML/my_pic_2.jpg">

</body>
</html>

Some attributes of img tag:

1. height: It is used to adjust the height of the image.
2. width:It is used to adjust width of the image.
3. alt: We can pass default massage in alt attribute and if the image is missing then the will display this message .

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

<img src="my_pic.jpg" width="400" height="400" alt="Sorry can't find this image">
<img src="F:\HTML/my_pic_2.jpg" width="600" height="400" alt="Missing">

</body>
</html>

We can also use image as a link. For doing this write img tag inside the anchor opening and closing tag.

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

<a href="put the link here">
<img src="my_pic.jpg" width="400" height="400" alt="Sorry can't find this image" /> </a>

</body>
</html>

CodersAim is created for learning and training a self learner to become a professional from beginner. While using CodersAim, you agree to have read and accepted our terms of use, privacy policy, Contact Us

© Copyright All rights reserved www.CodersAim.com. Developed by CodersAim.