CBSE Notes for Class 8 Computer in Action – Images and Lists in HTML
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.