Thursday, April 30, 2020

CBSE Notes for Class 8 Computer in Action – Images and Lists in HTML

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.1cbse-notes-for-class-8-computer-in-action-images-and-lists-in-html-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.cbse-notes-for-class-8-computer-in-action-images-and-lists-in-html-2

The following HTML code uses different attributes of the <IMG> tag to display the output as shown in Figure 4.2.cbse-notes-for-class-8-computer-in-action-images-and-lists-in-html-3

The output of the above code is as follows.cbse-notes-for-class-8-computer-in-action-images-and-lists-in-html-4

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.cbse-notes-for-class-8-computer-in-action-images-and-lists-in-html-5

The output of the above code is as follows.cbse-notes-for-class-8-computer-in-action-images-and-lists-in-html-6

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.cbse-notes-for-class-8-computer-in-action-images-and-lists-in-html-7

The output of the above code is as follows.cbse-notes-for-class-8-computer-in-action-images-and-lists-in-html-8

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.cbse-notes-for-class-8-computer-in-action-images-and-lists-in-html-9

The following HTML code uses different attributes of the <OL> tag and displays the output as shown in Figure 4.8.cbse-notes-for-class-8-computer-in-action-images-and-lists-in-html-10

Table 4.4 shows some examples of type and start attributes of the <0L> tag.cbse-notes-for-class-8-computer-in-action-images-and-lists-in-html-11

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.cbse-notes-for-class-8-computer-in-action-images-and-lists-in-html-12

The following HTML code uses the type attribute of the <UL> tag and displays the output as shown in Figure 4,10.cbse-notes-for-class-8-computer-in-action-images-and-lists-in-html-13

Table 4.6 outlines the output displayed when you use different values for the type attribute of the <UL> tag.cbse-notes-for-class-8-computer-in-action-images-and-lists-in-html-14

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.cbse-notes-for-class-8-computer-in-action-images-and-lists-in-html-15


No comments:

Post a Comment

k c nag miscellaneous question

https://youtu.be/ji1CYuEeKSA