What are the different ways to include the graphics in HTML ?

In this article, we discuss the different ways to include the graphics in HTML.

abhi varde

2 years ago | 1 min read

In this article, we discuss the different ways to include the graphics in HTML.

In an HTML document, there are two ways to insert graphics(images) : inline and external. Inline graphics, which appear directly in the HTML page, are most commonly used. When a user clicks on a link to an external graphics, it is downloaded.

1) Inline Graphics :-

In this, using the HTML < img > tag, an image is embedded on a web page.

The < image > tag is empty, has no closing tag, and mainly contains attributes.

Syntax : <img src="url" alt="alternatetext">

The < img > tag has two attributes : src and alt.

src attribute : This attribute specifies the path to the image.

Example :


<!DOCTYPE html>
<html>
<head>
    <title>Adding Graphics in HTML</title>
</head>
<body>
    <h2>Welcome To GFG</h2>
    <img src="A008.png" alt="">
</body>
</html>

alt attribute : This attribute specifies an alternate text for the image.

The value of the alt attribute should describe the image. If a browser cannot find an image, it will display the value of the alt attribute.

Example :


<!DOCTYPE html>
<html>
<head>
   <title>Adding Graphics in HTML</title>
</head>
<body>
   <h2>Welcome To GFG</h2>
   <img src="India_flag.JPG" alt="India's Flag image">
</body>
</html>

2) External Graphics :-

In this, user can use graphics as links to other pages by embedding the image tag in a link.

The < a > tag defines a hyperlink, which is used to link from one page to another.

< a > element has href attribute, which indicates the link's destination.

Syntax : <a href = "...."><img src= "...."</a>

Example :


<!DOCTYPE html>
<html>
<head>
    <title>Adding Graphics in HTML</title>
</head>
<body>
    <h2>Welcome To GFG</h2>
    <a href="circles.html"><img src="circle.gif"></a>
</body>
</html>

Web Development

Upvote

Created by

abhi varde