In the previous class, you learnt about the basic formatting tags used for designing a webpage in HTML.
Some of these tags include <BODY>, <P>, <FONT>, <HR> and heading tags. The description and the
attributes related to these tags are outlined in Table 4.1
In this chapter, we will learn how to insert images and lists in a webpage to enhance the look and feel of
a webpage.
INSERTING IMAGES (<IMG>TAG)
Images enhance the overall appearance of a webpage. Images make the websites look interesting. While
designing the webpages, you should maintain a balance between the use of text and images. However,
excessive use of images may slow down the download of a webpage. The image file formats that are
supported by most web browsers include GIF, JPEG and PNG.
In HTML, the images are inserted using the <IMG> tag. It is an empty tag. Table 4.2 lists the attributes of
the <IMG> tag.
The following HTML code uses different attributes of the <IMG> tag to display the output as shown in
Figure 4.2.
The output of the above code is as follows.
Using tke Align Attribute of < IMG> Tag
The align attribute of the <IMG> tag let us specify the placement of image on a webpage. To align an
image with respect to the margins, we use left or right as the attribute value as shown in the following
HTML code.
The output of the above code is as follows.
The other three values that can be assigned to the align attribute are—top, middle and bottom. These
values align an image with respect to the text on a webpage. The following HTML code uses these
attribute values and displays the output as shown in Figure 4.6.
The output of the above code is as follows.
CREATING LISTS
Lists are a great way of organising a lot of information in webpages. The two most commonly used lists
are:
Ordered list
Unordered list
Let us learn about these types of lists.
Ordered List (<OL> Tag)
Ordered lists, also called numbered lists, are used when the list items have a specific numerical order or
ranking. An ordered list is enclosed within the <OL> and the </OL> tags. Each item in the list is marked
using the <LI> (List Item) tag. The default numbering style is 1, 2, 3… and so on.
Table 4.3 lists some of the important attributes of the <OL> tag.
The following HTML code uses different attributes of the <OL> tag and displays the output as shown in
Figure 4.8.
Table 4.4 shows some examples of type and start attributes of the <0L> tag.
Unordered Lists (<UL> Tag)
Unordered lists are also known as bulleted lists. In unordered lists, the list items do not have a specific
order. An unordered list is enclosed within the <UL> and </UL> tags. Each item in the list is marked using
the <LI> (List Item) tag.
Table 4.5 lists the attribute of the <UL> tag.
The following HTML code uses the type attribute of the <UL> tag and displays the output as shown in
Figure 4,10.
Table 4.6 outlines the output displayed when you use different values for the type attribute of the <UL>
tag.
NESTED LISTS
Ordered and unordered lists can be nested within each other to form multilevel lists. The following
HTML code displays the output as shown in Figure 4.12.
