NCERT Textbook - HTML II,Information & Computer Technology Class 9 | Information & Computer Technology (Class 9) - Notes & Video PDF Download

 Page 1


70
Information and Computer Technology
Chapter 5
HTML II
Learning Objectives 
By the end of this chapter, learner will be able to:
• 	 Diff er en tia t e	 the	 diff er en t	 types	 of	 lis ts	 cr ea t ed	 in	 HMTL.
• 	 Displa y	 the	 da t a	 using	 Lis ts	 t ag	 a v ailable	 in	 HTML.
• 	 Link	 w eb	 pag es	 using	 <A>	 t ag.
• 	 Insert	 audio	 &	 Video	 in	 a	 w eb	 pag e	 t o	 mak e	 it	 mor e	 in t er activ e.
• 	 Insert	 imag es	 in	 a	 w eb	 pag e.
• 	 St a t e	 the	 purpose	 of	 Inline	 &	 e x t ernal	 imag es.
• 	 Use	 imag es	 and	 Email	 addr esses	 as	 h yperlink s.
IntroduCtIon
As we have already discussed in previous chapter about HTML. Hypertext Markup Language 
is used by web browsers that represents the data. In this chapter, we will cover advance 
formatting tags of HTML such as Lists, inserting images, videos, music and creating links 
between two or more webpages.
1. HtMl lists
Lists provide the information in a structured and easy to read format. The data item on 
the webpage can catalogued or indexed. The index that is formed using numbers like 
1,2,3,…or symbols like ?, b, 8 is called a List in HTML. These lists help in formatting 
the data and put them in a particular order. There are three types of lists that you can 
use in HTML. They are: 
 ? UL - creates an unordered or bulleted list 
 ? OL - creates an ordered or numbered list 
 ? DL - creates a definition or glossary list 
The first two are very similar in structure, while definition lists have a unique setup. To create 
either kind, first specify the start of a list and then identify each line item in the list
1.1 unordered list <ul> ….</ul>
It classifies the data items that have equal importance i.e. none of the data items are 
ranked. They are identified by a symbol. It may be a ? square, a ? circle or a ? disc. The 
Page 2


70
Information and Computer Technology
Chapter 5
HTML II
Learning Objectives 
By the end of this chapter, learner will be able to:
• 	 Diff er en tia t e	 the	 diff er en t	 types	 of	 lis ts	 cr ea t ed	 in	 HMTL.
• 	 Displa y	 the	 da t a	 using	 Lis ts	 t ag	 a v ailable	 in	 HTML.
• 	 Link	 w eb	 pag es	 using	 <A>	 t ag.
• 	 Insert	 audio	 &	 Video	 in	 a	 w eb	 pag e	 t o	 mak e	 it	 mor e	 in t er activ e.
• 	 Insert	 imag es	 in	 a	 w eb	 pag e.
• 	 St a t e	 the	 purpose	 of	 Inline	 &	 e x t ernal	 imag es.
• 	 Use	 imag es	 and	 Email	 addr esses	 as	 h yperlink s.
IntroduCtIon
As we have already discussed in previous chapter about HTML. Hypertext Markup Language 
is used by web browsers that represents the data. In this chapter, we will cover advance 
formatting tags of HTML such as Lists, inserting images, videos, music and creating links 
between two or more webpages.
1. HtMl lists
Lists provide the information in a structured and easy to read format. The data item on 
the webpage can catalogued or indexed. The index that is formed using numbers like 
1,2,3,…or symbols like ?, b, 8 is called a List in HTML. These lists help in formatting 
the data and put them in a particular order. There are three types of lists that you can 
use in HTML. They are: 
 ? UL - creates an unordered or bulleted list 
 ? OL - creates an ordered or numbered list 
 ? DL - creates a definition or glossary list 
The first two are very similar in structure, while definition lists have a unique setup. To create 
either kind, first specify the start of a list and then identify each line item in the list
1.1 unordered list <ul> ….</ul>
It classifies the data items that have equal importance i.e. none of the data items are 
ranked. They are identified by a symbol. It may be a ? square, a ? circle or a ? disc. The 
71
HTML II
attribute TYPE helps in using the symbols to create a list. This attribute takes the value 
as the name of the symbol.
<ul type=”square”>
<ul type=” disc”>
<ul type=” circle”>
This is a container tag. It has both the opening and the closing tag. However the closing tag 
is optional. The listing is created under it using the <li> tag. Again <li> tag is a container 
tag. The data item to be listed is input between the opening <li> and the closing </li> tag 
as shown in the following example:
For Example1:
<body>
    <ul>
        <li>apples </li>
        <li>oranges</li>
        <li>guava </li>
    </ul>
</body>
In the above code the data item comprises of the fruits that have equal importance to the 
user. They are listed using unordered list. When you do not use the attribute named type, 
the default symbol is used i.e. disc. The output of the above code is:
C:\Users\HP\Music\Desktop\tables.htm l
File EditV iewF avoritesT ools Help
?
apples
?
oranges
?
guava
C:Users\HP\Music\Desktop...
17:53
06-03-2013
Page 3


70
Information and Computer Technology
Chapter 5
HTML II
Learning Objectives 
By the end of this chapter, learner will be able to:
• 	 Diff er en tia t e	 the	 diff er en t	 types	 of	 lis ts	 cr ea t ed	 in	 HMTL.
• 	 Displa y	 the	 da t a	 using	 Lis ts	 t ag	 a v ailable	 in	 HTML.
• 	 Link	 w eb	 pag es	 using	 <A>	 t ag.
• 	 Insert	 audio	 &	 Video	 in	 a	 w eb	 pag e	 t o	 mak e	 it	 mor e	 in t er activ e.
• 	 Insert	 imag es	 in	 a	 w eb	 pag e.
• 	 St a t e	 the	 purpose	 of	 Inline	 &	 e x t ernal	 imag es.
• 	 Use	 imag es	 and	 Email	 addr esses	 as	 h yperlink s.
IntroduCtIon
As we have already discussed in previous chapter about HTML. Hypertext Markup Language 
is used by web browsers that represents the data. In this chapter, we will cover advance 
formatting tags of HTML such as Lists, inserting images, videos, music and creating links 
between two or more webpages.
1. HtMl lists
Lists provide the information in a structured and easy to read format. The data item on 
the webpage can catalogued or indexed. The index that is formed using numbers like 
1,2,3,…or symbols like ?, b, 8 is called a List in HTML. These lists help in formatting 
the data and put them in a particular order. There are three types of lists that you can 
use in HTML. They are: 
 ? UL - creates an unordered or bulleted list 
 ? OL - creates an ordered or numbered list 
 ? DL - creates a definition or glossary list 
The first two are very similar in structure, while definition lists have a unique setup. To create 
either kind, first specify the start of a list and then identify each line item in the list
1.1 unordered list <ul> ….</ul>
It classifies the data items that have equal importance i.e. none of the data items are 
ranked. They are identified by a symbol. It may be a ? square, a ? circle or a ? disc. The 
71
HTML II
attribute TYPE helps in using the symbols to create a list. This attribute takes the value 
as the name of the symbol.
<ul type=”square”>
<ul type=” disc”>
<ul type=” circle”>
This is a container tag. It has both the opening and the closing tag. However the closing tag 
is optional. The listing is created under it using the <li> tag. Again <li> tag is a container 
tag. The data item to be listed is input between the opening <li> and the closing </li> tag 
as shown in the following example:
For Example1:
<body>
    <ul>
        <li>apples </li>
        <li>oranges</li>
        <li>guava </li>
    </ul>
</body>
In the above code the data item comprises of the fruits that have equal importance to the 
user. They are listed using unordered list. When you do not use the attribute named type, 
the default symbol is used i.e. disc. The output of the above code is:
C:\Users\HP\Music\Desktop\tables.htm l
File EditV iewF avoritesT ools Help
?
apples
?
oranges
?
guava
C:Users\HP\Music\Desktop...
17:53
06-03-2013
72
Information and Computer Technology
If you want to change the symbol to circle, use the following code:
For Example2:
<body>
     <ul type =” circle”>
          <li>apples </li>
          <li>oranges</li>
          <li>guava </li>
     </ul>
</body>
The output of the above code is:
C:\Users\HP\Music\Desktop\tables.html
apples
oranges
guava
File Edit V iew F avorites T ools Help
1.2 ordered lists <ol> … </ol>
It classifies the data items that do not have equal importance. All the data items are ranked. 
The ranking can be done using the numbers, the roman letter or alphabets. The default 
symbol is number. In case you want to change to other symbols of ordered list, you can 
use the attribute. The attributes used with this tag are given in the table below:
Attributes of <ol> tag Description 
TYPE Changes the symbol used with the list. It takes the value as the 
symbol itself i.e. it can be “a” or “ A ” or “I” or “i” or “1” .
START Begins the list with value specified. It takes the value of the 
symbol from where to begin the list
For example 3:
<body>
 <ol>
  <li>Get up in the morning</li>
  <li>Brush your teeth</li>
  <li>Take the bath</li>
  <li>Eat the breakfast</li>
  <li>Get ready to go to school</li>
 </ol>
</body>
Page 4


70
Information and Computer Technology
Chapter 5
HTML II
Learning Objectives 
By the end of this chapter, learner will be able to:
• 	 Diff er en tia t e	 the	 diff er en t	 types	 of	 lis ts	 cr ea t ed	 in	 HMTL.
• 	 Displa y	 the	 da t a	 using	 Lis ts	 t ag	 a v ailable	 in	 HTML.
• 	 Link	 w eb	 pag es	 using	 <A>	 t ag.
• 	 Insert	 audio	 &	 Video	 in	 a	 w eb	 pag e	 t o	 mak e	 it	 mor e	 in t er activ e.
• 	 Insert	 imag es	 in	 a	 w eb	 pag e.
• 	 St a t e	 the	 purpose	 of	 Inline	 &	 e x t ernal	 imag es.
• 	 Use	 imag es	 and	 Email	 addr esses	 as	 h yperlink s.
IntroduCtIon
As we have already discussed in previous chapter about HTML. Hypertext Markup Language 
is used by web browsers that represents the data. In this chapter, we will cover advance 
formatting tags of HTML such as Lists, inserting images, videos, music and creating links 
between two or more webpages.
1. HtMl lists
Lists provide the information in a structured and easy to read format. The data item on 
the webpage can catalogued or indexed. The index that is formed using numbers like 
1,2,3,…or symbols like ?, b, 8 is called a List in HTML. These lists help in formatting 
the data and put them in a particular order. There are three types of lists that you can 
use in HTML. They are: 
 ? UL - creates an unordered or bulleted list 
 ? OL - creates an ordered or numbered list 
 ? DL - creates a definition or glossary list 
The first two are very similar in structure, while definition lists have a unique setup. To create 
either kind, first specify the start of a list and then identify each line item in the list
1.1 unordered list <ul> ….</ul>
It classifies the data items that have equal importance i.e. none of the data items are 
ranked. They are identified by a symbol. It may be a ? square, a ? circle or a ? disc. The 
71
HTML II
attribute TYPE helps in using the symbols to create a list. This attribute takes the value 
as the name of the symbol.
<ul type=”square”>
<ul type=” disc”>
<ul type=” circle”>
This is a container tag. It has both the opening and the closing tag. However the closing tag 
is optional. The listing is created under it using the <li> tag. Again <li> tag is a container 
tag. The data item to be listed is input between the opening <li> and the closing </li> tag 
as shown in the following example:
For Example1:
<body>
    <ul>
        <li>apples </li>
        <li>oranges</li>
        <li>guava </li>
    </ul>
</body>
In the above code the data item comprises of the fruits that have equal importance to the 
user. They are listed using unordered list. When you do not use the attribute named type, 
the default symbol is used i.e. disc. The output of the above code is:
C:\Users\HP\Music\Desktop\tables.htm l
File EditV iewF avoritesT ools Help
?
apples
?
oranges
?
guava
C:Users\HP\Music\Desktop...
17:53
06-03-2013
72
Information and Computer Technology
If you want to change the symbol to circle, use the following code:
For Example2:
<body>
     <ul type =” circle”>
          <li>apples </li>
          <li>oranges</li>
          <li>guava </li>
     </ul>
</body>
The output of the above code is:
C:\Users\HP\Music\Desktop\tables.html
apples
oranges
guava
File Edit V iew F avorites T ools Help
1.2 ordered lists <ol> … </ol>
It classifies the data items that do not have equal importance. All the data items are ranked. 
The ranking can be done using the numbers, the roman letter or alphabets. The default 
symbol is number. In case you want to change to other symbols of ordered list, you can 
use the attribute. The attributes used with this tag are given in the table below:
Attributes of <ol> tag Description 
TYPE Changes the symbol used with the list. It takes the value as the 
symbol itself i.e. it can be “a” or “ A ” or “I” or “i” or “1” .
START Begins the list with value specified. It takes the value of the 
symbol from where to begin the list
For example 3:
<body>
 <ol>
  <li>Get up in the morning</li>
  <li>Brush your teeth</li>
  <li>Take the bath</li>
  <li>Eat the breakfast</li>
  <li>Get ready to go to school</li>
 </ol>
</body>
73
HTML II
The above code produces the following output. Notice that the symbol used to create the 
list is number. Thus number becomes the default symbol.
Get up in the morning
Brhsh your teeth
Take the bath
Eat the breakfast
Get ready to go to school
1.
2.
3.
4.
5.
C:\Users\HP\Music\Desktop\tables.html
File Edit V iew F a v o r i t es T ools Help
The start attribute allows you to further customize an ordered list by setting a new starting 
digit for the ordered list element as can be seen in the following example:
For example 4:
<body>
<ol start=”4” >
 <li>Get up in the morning</li>
 <li>Brush your teeth</li>
 <li>Take the bath</li>
 <li>Eat the breakfast</li>
 <li>Get ready to go to school</li>
</ol> 
</body>
The above code produces the following output. Notice that the list begins from number 
4 and the sequence is maintained after it.
Get up in the morning
Brhsh your teeth
Take the bath
Eat the breakfast
Get ready to go to school
4.
5.
6.
7.
8.
C:\Users\HP\Music\Desktop\tables.html
File Edit V iew F a v o r i t es T ools Help
The type attribute changes the symbol as shown in the following example.
Page 5


70
Information and Computer Technology
Chapter 5
HTML II
Learning Objectives 
By the end of this chapter, learner will be able to:
• 	 Diff er en tia t e	 the	 diff er en t	 types	 of	 lis ts	 cr ea t ed	 in	 HMTL.
• 	 Displa y	 the	 da t a	 using	 Lis ts	 t ag	 a v ailable	 in	 HTML.
• 	 Link	 w eb	 pag es	 using	 <A>	 t ag.
• 	 Insert	 audio	 &	 Video	 in	 a	 w eb	 pag e	 t o	 mak e	 it	 mor e	 in t er activ e.
• 	 Insert	 imag es	 in	 a	 w eb	 pag e.
• 	 St a t e	 the	 purpose	 of	 Inline	 &	 e x t ernal	 imag es.
• 	 Use	 imag es	 and	 Email	 addr esses	 as	 h yperlink s.
IntroduCtIon
As we have already discussed in previous chapter about HTML. Hypertext Markup Language 
is used by web browsers that represents the data. In this chapter, we will cover advance 
formatting tags of HTML such as Lists, inserting images, videos, music and creating links 
between two or more webpages.
1. HtMl lists
Lists provide the information in a structured and easy to read format. The data item on 
the webpage can catalogued or indexed. The index that is formed using numbers like 
1,2,3,…or symbols like ?, b, 8 is called a List in HTML. These lists help in formatting 
the data and put them in a particular order. There are three types of lists that you can 
use in HTML. They are: 
 ? UL - creates an unordered or bulleted list 
 ? OL - creates an ordered or numbered list 
 ? DL - creates a definition or glossary list 
The first two are very similar in structure, while definition lists have a unique setup. To create 
either kind, first specify the start of a list and then identify each line item in the list
1.1 unordered list <ul> ….</ul>
It classifies the data items that have equal importance i.e. none of the data items are 
ranked. They are identified by a symbol. It may be a ? square, a ? circle or a ? disc. The 
71
HTML II
attribute TYPE helps in using the symbols to create a list. This attribute takes the value 
as the name of the symbol.
<ul type=”square”>
<ul type=” disc”>
<ul type=” circle”>
This is a container tag. It has both the opening and the closing tag. However the closing tag 
is optional. The listing is created under it using the <li> tag. Again <li> tag is a container 
tag. The data item to be listed is input between the opening <li> and the closing </li> tag 
as shown in the following example:
For Example1:
<body>
    <ul>
        <li>apples </li>
        <li>oranges</li>
        <li>guava </li>
    </ul>
</body>
In the above code the data item comprises of the fruits that have equal importance to the 
user. They are listed using unordered list. When you do not use the attribute named type, 
the default symbol is used i.e. disc. The output of the above code is:
C:\Users\HP\Music\Desktop\tables.htm l
File EditV iewF avoritesT ools Help
?
apples
?
oranges
?
guava
C:Users\HP\Music\Desktop...
17:53
06-03-2013
72
Information and Computer Technology
If you want to change the symbol to circle, use the following code:
For Example2:
<body>
     <ul type =” circle”>
          <li>apples </li>
          <li>oranges</li>
          <li>guava </li>
     </ul>
</body>
The output of the above code is:
C:\Users\HP\Music\Desktop\tables.html
apples
oranges
guava
File Edit V iew F avorites T ools Help
1.2 ordered lists <ol> … </ol>
It classifies the data items that do not have equal importance. All the data items are ranked. 
The ranking can be done using the numbers, the roman letter or alphabets. The default 
symbol is number. In case you want to change to other symbols of ordered list, you can 
use the attribute. The attributes used with this tag are given in the table below:
Attributes of <ol> tag Description 
TYPE Changes the symbol used with the list. It takes the value as the 
symbol itself i.e. it can be “a” or “ A ” or “I” or “i” or “1” .
START Begins the list with value specified. It takes the value of the 
symbol from where to begin the list
For example 3:
<body>
 <ol>
  <li>Get up in the morning</li>
  <li>Brush your teeth</li>
  <li>Take the bath</li>
  <li>Eat the breakfast</li>
  <li>Get ready to go to school</li>
 </ol>
</body>
73
HTML II
The above code produces the following output. Notice that the symbol used to create the 
list is number. Thus number becomes the default symbol.
Get up in the morning
Brhsh your teeth
Take the bath
Eat the breakfast
Get ready to go to school
1.
2.
3.
4.
5.
C:\Users\HP\Music\Desktop\tables.html
File Edit V iew F a v o r i t es T ools Help
The start attribute allows you to further customize an ordered list by setting a new starting 
digit for the ordered list element as can be seen in the following example:
For example 4:
<body>
<ol start=”4” >
 <li>Get up in the morning</li>
 <li>Brush your teeth</li>
 <li>Take the bath</li>
 <li>Eat the breakfast</li>
 <li>Get ready to go to school</li>
</ol> 
</body>
The above code produces the following output. Notice that the list begins from number 
4 and the sequence is maintained after it.
Get up in the morning
Brhsh your teeth
Take the bath
Eat the breakfast
Get ready to go to school
4.
5.
6.
7.
8.
C:\Users\HP\Music\Desktop\tables.html
File Edit V iew F a v o r i t es T ools Help
The type attribute changes the symbol as shown in the following example.
74
Information and Computer Technology
For example 5:
<body>
<ol type = “a”>
 <li>Get up in the morning</li>
 <li>Brush your teeth</li>
 <li>Take the bath</li>
 <li>Eat the breakfast</li>
 <li>Get ready to go to school</li>
</ol> 
</body>
The output of the above code is given below. Notice that the symbol has changed from 
default number to the alphabet.
Get up in the morning
Brhsh your teeth
Take the bath
Eat the breakfast
Get ready to go to school
a.
b.
c.
d.
e.
C:\Users\HP\Music\Desktop\tables.html
File Edit V iew F a v o r i t es T ools Help
1.3 definition t erm lists <dl> …. </dl>
Definition lists (<dl>) are the list elements that have an array of tags. The list prepared 
by <dl> tag is similar to a dictionary. The other tags used with this are <dt> to define the 
definition term and the <dd> for the definition of the list item.
C:\Users\HP\Music\Desktop\tables.html
File Edit View F v o r i t e s a T ools Help
Clairvoyance
French work for ability to see events in the future.
Esprit de corps
French work for feeling fo pride and loyalty.