Images In HTML
Start working with images in HTML and make your web pages more expressive.
We always aim
to make our web pages more expressive. One such way of achieving it is by adding images. Proper utilization of images might capture user attention and can hold the users for a longer period of time. Images play an important role in various sites such as Blog websites, portfolio sites, food websites, and so on.
In this Blog let's understand how to have images in our HTML document and what are the different attributes they can have so that we can present the images effectively and make our web pages more expressive.
How can we have images on our HTML document?
We can embed a image into the HTML document using < img /> tag.
What does img tag do?
img tag links the images to our HTML page.
NOTE: img tag does not insert the image into HTML it just links the image and browsers render them.
What images can I embed into my Webpage?
We can embed either embed a local image by giving the image path or can embed a public image via its URL.
Attributes
1.src
- We use the src attribute to define the source of the image to be linked.
- It accepts either the path to a locally stored image or a URL to the public image available on the internet.
2.alt
- We use the alt attribute to define the alternate text or a description of the image to be displayed whenever the image fails to render.
- On giving this the user gets some information that the image is not rendered properly.
3.height
- We use the height attribute to define the height of the image.
- The default unit would be pixels and we will be passing integers.
- It is recommended to use CSS to resize the image.
4.width
- We use the width attribute to define the width of the image.
- The default unit would be pixels and we will be passing integers.
- It is recommended to use CSS to resize the image.
5.border
- We use the border attribute to specify a border around the image.
- The default border color would be black.
- The default unit would be pixels and we will be passing integers.
6.align
- We use the align tag to align the image position.
- The possible values are top, bottom, middle, left, and right.
IMPLEMENTATION :
1.Embed Local Image to HTML Document.
The folder structure will be as follows :
To embed a locally stored image we write the following code :
<!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.0" />
<title>Document</title>
</head>
<body>
<img src="./iNeuronLogo.jpg" alt="Logo" />
</body>
</html>
The browser output will be :
2.Embed a Public Image to HTML Document.
To embed a public image on the internet we write the following code :
<!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.0" />
<title>Document</title>
</head>
<body>
<img src="https://ineuron.ai/images/ineuron-logo.png" alt="Logo" />
</body>
</html>
The browser output will be :
3.Embed image with specifying a height attribute
To embed a public image on the internet with a height attribute we write the following code :
<!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.0" />
<title>Document</title>
</head>
<body>
<img
src="https://ineuron.ai/images/ineuron-logo.png"
alt="Logo"
height="50"
/>
</body>
</html>
The browser output will be :
4.Embed image with specifying a width attribute
To embed a public image on the internet with a width attribute we write the following code :
<!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.0" />
<title>Document</title>
</head>
<body>
<img
src="https://ineuron.ai/images/ineuron-logo.png"
alt="Logo"
width="1500"
/>
</body>
</html>
The browser output will be :
5.Embed the image with specifying align attribute
To embed a public image on the internet with align attribute we write the following code :
<!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.0" />
<title>Document</title>
</head>
<body>
<img
src="https://ineuron.ai/images/ineuron-logo.png"
alt="Logo"
align="right"
/>
</body>
</html>
The browser output will be :
6.Embed the image with specifying border attribute
To embed a public image on the internet with border attribute we write the following code :
<!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.0" />
<title>Document</title>
</head>
<body>
<img
src="https://ineuron.ai/images/ineuron-logo.png"
alt="Logo"
border="20"
/>
</body>
</html>
The browser output will be :
