Lecture-5 : INSERTING AN IMAGE IN HTML

In HTML, images are defined with the <img> tag.

The <img> tag is empty, which means that it contains attributes only and it has no closing tag.

To display an image on a page, you need to use the src attribute. src stands for source. The value of the src attribute is the URL of the image you want to display on your page.

For inserting an the image in HTML the Syntax is:

<img src=”image_name.its_extension”>

Example:
<img src=”img1.jpg”>

"img1.jpg" is the name of the image file you want to insert in your page. ".jpg" is the file type of the image. Just like the extension ".htm" shows that a file is an HTML document, ".jpg" tells the browser that a file is a picture. There are the most used image file types that you can insert into your pages:

• GIF (Graphics Interchange Format)
• JPG / JPEG (Joint Photographic Experts Group)
• PNG (Portable Network Graphics)

GIF images are usually best for graphics and drawings, while JPEG images are usually better for photographs. This is for two reasons: first, GIF images only consist of 256 colours, while JPEG images comprise of millions of colours and second, the GIF format is better at compressing simple images, than the JPEG format which is optimized for more complex images. The better the compression, the smaller the size of the image file, the faster your page will load. As you probably know from your own experience, unnecessarily 'heavy' pages can be extremely annoying for the user.
Traditionally, the GIF and JPEG formats have been the two dominant image types, but lately, the PNG format has become more and more popular (primarily at the expense of the GIF format). The PNG format contains in many ways the best of both the JPEG and GIF format: millions of colours and effective compressing.

The Attributes of <img> are:-

Height:- Sets the height of the image.

Width:- Sets the width of image

Border:- Sets the Border of the image

alt:- The alt attribute provides alternative information for an image if a user for some reason cannot view it.

Title:- offers advisory information about the element for which it is set.


Example:

<html>
<head>
<title>Inserting an Image in HTML</title>
</head>
<body>
<img src="img/Tulips.jpg" height="200px" width="200px" border="1" alt="flowers" title="image">
</body>
</html>


Output:-



The Figure and figcaption elements:-

The <figure> element :- The <figure> element is intended to be used in conjunction with the <figcaption> element to mark up diagrams, illustrations, photos, and code examples (among other things).
The <figcaption> element:- It is optional and can appear before or after the content within the <figure>. Only one <figcaption> element may be nested within a <figure>, although the <figure> element itself may contain multiple other child elements (e.g., <img> or<code>).

This example will make you more clear about <figure> and <figcaption>

<html>
<head>
<title>Image figure caption example</title>
</head>
<body>
<figure>
<img src="img/Tulips.jpg" height="200px" width="200px" border="1" alt="flowers" title="image"><br>
<figcaption> Figure-1 Flower </figcaption>
</figure>
</body>
</html>


Output:-