Graphic Insertion
The IMG element is an empty element, which allows the user to insert an image in a Web
page. It allows insertion of images and diagrams. The commonly used graphic formats that
are supported are namely, GIF, JPEG, BITMAP (BMP), and PNG. The <img> tag reserves
a space for the image and does not insert the image in the HTML page. It creates a link
between the image and the HTML page.
Attributes Description
src Specifies the path of an image that is to be displayed.
height Specifies the height of an image.
width Specifies the width of an image.
Code Snippet 1 demonstrates how to display an image in a Web page using the IMG
element.
Code Snippet 1 :
<body>
<img src=”UNO.jpg” width=”225” height=”151”/>
</body>
The code uses the src attribute of the IMG element to insert a JPEG image. The attribute
specifis the name of the image and also indicates that the image is present in the same
folder where the HTML fie is saved. The width and height of the image is set to 225 and
151 pixels respectively by using the width and height attribute. A pixel refers to the smallest
dot on the monitor screen.
An image can also be stored in a sub folder of the folder containing the HTML fie. In
such cases, a reference to the image is made by using the sub folder name as shown in
Code Snippet 2.
Code Snippet 2:
<body>
<img src=”image_folder/UNO.jpg” width=”225” height=”151”/>
</body>
To align the image the flat style attribute can be used to specify the inline style for the
element. This will force the image to be aligned to the left or right side of the screen and
wrap the surrounding text around the image. Code Snippet 3 demonstrates the use of the
flat style.
Code Snippet 3:
<body>
<img src=”image_folder/UNO.jpg” style=”flat:left”/>
</body>
Value Description
left The element flats to the left
right The element flats to the right.
none The element does not flat and is the default value.
inherit The element specifies that the value of the flat property
should be inherited from the parent element.
HTML5 introduced a new <fiure> tag. The <fiure> tag acts as a container containing
the <img> tag. In other words, it is not a replacement for <img> tag, but acts as a container
into which the <img> tag is placed. The <fiure> tag specifies self-contained content,
such as illustrations, diagrams, photos, code listings, and so on.
While the content of the <fiure> element is related to the main flow, its position
is independent of the main flw, and if removed it does not affct the flw of the
document.
Code Snippet 4 demonstrates the use of <fiure> tag.
Code Snippet 4:
<fiure>
<img src=”logo.gif” style=”flat: left”>
width=”304” height=”228” />
</fiure>
The main advantage of using<fiure> tag is that it allows the user to use the<ficaption>
tag along with it. The <ficaption> tag allows the user to add a caption to the image. The
caption always appears along with the image even if the image flats in Web site layout.
Code Snippet 5 demonstrates the use of <ficaption> tag.
Code Snippet 5:
<fiure>
<img src=”logo.gif”>
<ficaption>This diagram shows the logo of a product.</ficaption>
</fiure>
The <fiure> tag can also assign styles and other attributes to the <fiure> element
using an external or internal style sheet. A single caption to a group of images can be
added using the <fiure> tag.
Code Snippet 6 demonstrates how to assign a single caption to a group of images.
Code Snippet 6:
<fiure>
<img src=”flower1.jpg”>
<img src=”flower2.jpg”>
<img src=”flower3.jpg”>
<ficaption>The different types of flowers</ficaption>
</fiure>
page. It allows insertion of images and diagrams. The commonly used graphic formats that
are supported are namely, GIF, JPEG, BITMAP (BMP), and PNG. The <img> tag reserves
a space for the image and does not insert the image in the HTML page. It creates a link
between the image and the HTML page.
lists the commonly used attributes of the IMG element.
Attributes Description
src Specifies the path of an image that is to be displayed.
height Specifies the height of an image.
width Specifies the width of an image.
Code Snippet 1 demonstrates how to display an image in a Web page using the IMG
element.
Code Snippet 1 :
<body>
<img src=”UNO.jpg” width=”225” height=”151”/>
</body>
The code uses the src attribute of the IMG element to insert a JPEG image. The attribute
specifis the name of the image and also indicates that the image is present in the same
folder where the HTML fie is saved. The width and height of the image is set to 225 and
151 pixels respectively by using the width and height attribute. A pixel refers to the smallest
dot on the monitor screen.
An image can also be stored in a sub folder of the folder containing the HTML fie. In
such cases, a reference to the image is made by using the sub folder name as shown in
Code Snippet 2.
Code Snippet 2:
<body>
<img src=”image_folder/UNO.jpg” width=”225” height=”151”/>
</body>
To align the image the flat style attribute can be used to specify the inline style for the
element. This will force the image to be aligned to the left or right side of the screen and
wrap the surrounding text around the image. Code Snippet 3 demonstrates the use of the
flat style.
Code Snippet 3:
<body>
<img src=”image_folder/UNO.jpg” style=”flat:left”/>
</body>
lists the values of flat property in the <img> tag.
Value Description
left The element flats to the left
right The element flats to the right.
none The element does not flat and is the default value.
inherit The element specifies that the value of the flat property
should be inherited from the parent element.
HTML5 introduced a new <fiure> tag. The <fiure> tag acts as a container containing
the <img> tag. In other words, it is not a replacement for <img> tag, but acts as a container
into which the <img> tag is placed. The <fiure> tag specifies self-contained content,
such as illustrations, diagrams, photos, code listings, and so on.
While the content of the <fiure> element is related to the main flow, its position
is independent of the main flw, and if removed it does not affct the flw of the
document.
Code Snippet 4 demonstrates the use of <fiure> tag.
Code Snippet 4:
<fiure>
<img src=”logo.gif” style=”flat: left”>
width=”304” height=”228” />
</fiure>
The main advantage of using<fiure> tag is that it allows the user to use the<ficaption>
tag along with it. The <ficaption> tag allows the user to add a caption to the image. The
caption always appears along with the image even if the image flats in Web site layout.
Code Snippet 5 demonstrates the use of <ficaption> tag.
Code Snippet 5:
<fiure>
<img src=”logo.gif”>
<ficaption>This diagram shows the logo of a product.</ficaption>
</fiure>
The <fiure> tag can also assign styles and other attributes to the <fiure> element
using an external or internal style sheet. A single caption to a group of images can be
added using the <fiure> tag.
Code Snippet 6 demonstrates how to assign a single caption to a group of images.
Code Snippet 6:
<fiure>
<img src=”flower1.jpg”>
<img src=”flower2.jpg”>
<img src=”flower3.jpg”>
<ficaption>The different types of flowers</ficaption>
</fiure>
 |
| A Single Caption to a Group of Images |
.png)
