HTML images : How to add image to HTML document

Hello, welcome to zhullyblog. If this is your first time here , please Subscribe to Zhullyblog by Email to get latest tutorial.

HTML images

In this tutorial, we would learn to add images to HTML document.
An image provide the information needed to know the detail of something. An image makes a website more colorful and interesting.

The use of image on a webpage is inevitable.

The <img> tag is used to insert images in HTML document.

Image syntax

Let's take real example.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Add image to a page </title>
</head>
<body>

<img src="image.jpg" alt="Image detail">

</body>
</html>

Screenshot

Exercise: Add an image to your HTML document.

An image MUST have at least two attribute that provides detail explanation.

The src attribute tells the browser where to find the image.

The alt attribute provides additional information about the image.For any reason, if the image becomes unavailable, the alt attribute will give text substitute.

Note: An image does not have a closing tag.("/>).

Setting the width and height of an Image

HTML provides an attribute called the width and height. This attribute makes you specify the width and height of the image.
By default, the value of the width and height are in pixels.

Try this: