cft
Become a CreatorSign inGet Started

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.


user

abhi varde

4 months ago | 1 min read
Follow

different-ways-include-graphics-html-mrovw

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>

Upvote


user
Created by

abhi varde

Follow

people
Post

Upvote

Downvote

Comment

Bookmark

Share


Related Articles