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

 Page 1


58
Information and Computer Technology
Chapter 4
Introduction to HTML
Learning Objectives 
By the end of this chapter, learner will be able to:
• 	 Under s t anding	 of	 basic	 s tructur e	 of	 HTML
• 	 Learning	 of	 v arious	 c on t ainer	 	 and	 emp ty	 t ags
• 	 Learn	 v arious	 h tml	 t ags	 and	 their	 s yn t a x.
• 	 Under s t anding	 of	 f orma tting	 elemen ts	 of	 	 HTML
IntroduCtIon
HTML refers to Hypertext Markup Language.  There is a special kind of text used by 
web browsers that represents the data. This data may be in the form of letters, images, 
audios or videos. This special text is given emphasis, which some people may say, it 
is marked up through a link to the other documents. Thus a page formed using the 
special text is called a document or a webpage. A webpage can get opened in a web 
browser.  The web browser accesses the web page from the web server (a place which 
holds most of the webpages). A web server may be placed anywhere in the world. This 
means that a web browser can access a webserver only if it connects to internet (network 
of networks across globe). The HTML was founded by the group called “World Wide 
Web Consortium” in 1990.
1. overvIeW oF HtMl
1.1. Who Invented HtMl
HTML was invented in November 1990 by a scientist called Tim Berneses-Lee. The purpose 
was to make it easier for scientists at different university to gain access to each other’s 
research documents.
1.2 a brief history
HTML is not an invention but an improved version of Standard Generalised Markup 
Language(SGML).SGML is a Meta Language (general -- purpose language)used for defining 
and creating descriptive markup language.
Page 2


58
Information and Computer Technology
Chapter 4
Introduction to HTML
Learning Objectives 
By the end of this chapter, learner will be able to:
• 	 Under s t anding	 of	 basic	 s tructur e	 of	 HTML
• 	 Learning	 of	 v arious	 c on t ainer	 	 and	 emp ty	 t ags
• 	 Learn	 v arious	 h tml	 t ags	 and	 their	 s yn t a x.
• 	 Under s t anding	 of	 f orma tting	 elemen ts	 of	 	 HTML
IntroduCtIon
HTML refers to Hypertext Markup Language.  There is a special kind of text used by 
web browsers that represents the data. This data may be in the form of letters, images, 
audios or videos. This special text is given emphasis, which some people may say, it 
is marked up through a link to the other documents. Thus a page formed using the 
special text is called a document or a webpage. A webpage can get opened in a web 
browser.  The web browser accesses the web page from the web server (a place which 
holds most of the webpages). A web server may be placed anywhere in the world. This 
means that a web browser can access a webserver only if it connects to internet (network 
of networks across globe). The HTML was founded by the group called “World Wide 
Web Consortium” in 1990.
1. overvIeW oF HtMl
1.1. Who Invented HtMl
HTML was invented in November 1990 by a scientist called Tim Berneses-Lee. The purpose 
was to make it easier for scientists at different university to gain access to each other’s 
research documents.
1.2 a brief history
HTML is not an invention but an improved version of Standard Generalised Markup 
Language(SGML).SGML is a Meta Language (general -- purpose language)used for defining 
and creating descriptive markup language.
59
Introduction to HTML
1.3 What tools do you need?
To get started with html documents, only two basic things are required
•	 A text editor/HTML editor
•	 A Web Browser
1.4 t ags and attributes
The World Wide Web Consortium has given a set of standards while building the HTML 
language. The W3C uses some special words to define an action. 
A tag is a special word enclosed in angle-brackets < >.  A tag tells the browser to perform 
an action as asked by the special word. The special word may be written either in lower 
case or upper case. The browser will respond to both the cases equally. 
The HTML  tags are normally comes in pair of start and end tag(an opening tag and closing 
tag). While the start tag is written in the beginning of the element as <SpecialWord>, the 
end tag is written at the completion of the element as </SpecialWord>. 
For example: When you want to begin with writing source code using HTML, you write 
the start tag as  <HTML> and when you have completely written in the HTML document 
and want to end it, you write the end tag as </HTML> i.e. insert a forward slash followed 
by HTML in angled brackets.
The characteristics or the features of a tag are defined by an attribute. An attribute is used 
inside a tag. An attribute always takes a value to help the browser perform the specific 
task in a particular direction. There may be more than one attribute used inside a tag. 
An element is a combination of a start tag, the text(we also use text to insert graphics) 
and the  end tag. 
For example: 
<body> element begins with start tag, followed by text and ends with end tag.</body>
In simple words, one can equate an element to a block, a tag to an instruction and an 
attribute to an extension to a instruction. 
Container of Tags: One set of tags may contain another set of tags. This is called nesting 
of tags. The second block of tags is always contained in first block as shown below:
<TAG1> <TAG2>……………</TAG2> </TAG1>
<TAG1> and </TAG1> is the first block of tags. <TAG2> and </TAG2> is the second 
block of tags. 
Page 3


58
Information and Computer Technology
Chapter 4
Introduction to HTML
Learning Objectives 
By the end of this chapter, learner will be able to:
• 	 Under s t anding	 of	 basic	 s tructur e	 of	 HTML
• 	 Learning	 of	 v arious	 c on t ainer	 	 and	 emp ty	 t ags
• 	 Learn	 v arious	 h tml	 t ags	 and	 their	 s yn t a x.
• 	 Under s t anding	 of	 f orma tting	 elemen ts	 of	 	 HTML
IntroduCtIon
HTML refers to Hypertext Markup Language.  There is a special kind of text used by 
web browsers that represents the data. This data may be in the form of letters, images, 
audios or videos. This special text is given emphasis, which some people may say, it 
is marked up through a link to the other documents. Thus a page formed using the 
special text is called a document or a webpage. A webpage can get opened in a web 
browser.  The web browser accesses the web page from the web server (a place which 
holds most of the webpages). A web server may be placed anywhere in the world. This 
means that a web browser can access a webserver only if it connects to internet (network 
of networks across globe). The HTML was founded by the group called “World Wide 
Web Consortium” in 1990.
1. overvIeW oF HtMl
1.1. Who Invented HtMl
HTML was invented in November 1990 by a scientist called Tim Berneses-Lee. The purpose 
was to make it easier for scientists at different university to gain access to each other’s 
research documents.
1.2 a brief history
HTML is not an invention but an improved version of Standard Generalised Markup 
Language(SGML).SGML is a Meta Language (general -- purpose language)used for defining 
and creating descriptive markup language.
59
Introduction to HTML
1.3 What tools do you need?
To get started with html documents, only two basic things are required
•	 A text editor/HTML editor
•	 A Web Browser
1.4 t ags and attributes
The World Wide Web Consortium has given a set of standards while building the HTML 
language. The W3C uses some special words to define an action. 
A tag is a special word enclosed in angle-brackets < >.  A tag tells the browser to perform 
an action as asked by the special word. The special word may be written either in lower 
case or upper case. The browser will respond to both the cases equally. 
The HTML  tags are normally comes in pair of start and end tag(an opening tag and closing 
tag). While the start tag is written in the beginning of the element as <SpecialWord>, the 
end tag is written at the completion of the element as </SpecialWord>. 
For example: When you want to begin with writing source code using HTML, you write 
the start tag as  <HTML> and when you have completely written in the HTML document 
and want to end it, you write the end tag as </HTML> i.e. insert a forward slash followed 
by HTML in angled brackets.
The characteristics or the features of a tag are defined by an attribute. An attribute is used 
inside a tag. An attribute always takes a value to help the browser perform the specific 
task in a particular direction. There may be more than one attribute used inside a tag. 
An element is a combination of a start tag, the text(we also use text to insert graphics) 
and the  end tag. 
For example: 
<body> element begins with start tag, followed by text and ends with end tag.</body>
In simple words, one can equate an element to a block, a tag to an instruction and an 
attribute to an extension to a instruction. 
Container of Tags: One set of tags may contain another set of tags. This is called nesting 
of tags. The second block of tags is always contained in first block as shown below:
<TAG1> <TAG2>……………</TAG2> </TAG1>
<TAG1> and </TAG1> is the first block of tags. <TAG2> and </TAG2> is the second 
block of tags. 
60
Information and Computer Technology
2. StruCture oF HtMl doCuMent
The basic structure of HTML document is shown below:
<HTML>
<HEAD>
<TITLE> The Structure of HTML Document </
TITLE>
</HEAD>
  First section
<BODY>
             The Body of the HTML Document
</BODY>
</HTML>
  Second section
The basic structure of the HTML document is divided into two sections namely, the head 
and the body. The browser enters the first section after executing the start tag of HTML 
(telling the browser to begin interpreting the HTML commands) and start tag of HEAD. 
The first section helps in changing the heading on the title bar of the HTML document 
(the webpage). The starting of the heading is shown after the start tag of TITLE and the 
end is shown by </TITLE>. The end tag of HEAD i.e. </HEAD> tells the browser that 
the end of first section has come.
The second section begins with the start tag of BODY . The data on the webpage is displayed 
through the tags used in this section. The end tag of BODY i.e. </BODY> tells the browser 
that no more data is to be inserted on the webpage and the end of the web document 
has come. After the completion of this section, the slash HTML or the end tag of HTML 
tells the browser to stop looking for HTML commands. This implies that any tag used 
after the end tag of HTML will not be interpreted by the browser and so no action will 
be performed. 
Please Note:  All the sentences containing any number of whitespaces written inside a tag 
within the body element will appear as written in the HTML code. Any whitespace inserted 
outside the tag within the body element will be interpreted as null, void or amounting to 
nothing by the browser. That is, such whitespaces outside the tag will not appear anywhere 
on the webpage.
3. Sa vIng tHe HtMl doCuMent
When you have finished writing the HTML code in the text editor, click on File menu and 
select Save option. This opens a window, which asks you to save the file in a folder and 
Page 4


58
Information and Computer Technology
Chapter 4
Introduction to HTML
Learning Objectives 
By the end of this chapter, learner will be able to:
• 	 Under s t anding	 of	 basic	 s tructur e	 of	 HTML
• 	 Learning	 of	 v arious	 c on t ainer	 	 and	 emp ty	 t ags
• 	 Learn	 v arious	 h tml	 t ags	 and	 their	 s yn t a x.
• 	 Under s t anding	 of	 f orma tting	 elemen ts	 of	 	 HTML
IntroduCtIon
HTML refers to Hypertext Markup Language.  There is a special kind of text used by 
web browsers that represents the data. This data may be in the form of letters, images, 
audios or videos. This special text is given emphasis, which some people may say, it 
is marked up through a link to the other documents. Thus a page formed using the 
special text is called a document or a webpage. A webpage can get opened in a web 
browser.  The web browser accesses the web page from the web server (a place which 
holds most of the webpages). A web server may be placed anywhere in the world. This 
means that a web browser can access a webserver only if it connects to internet (network 
of networks across globe). The HTML was founded by the group called “World Wide 
Web Consortium” in 1990.
1. overvIeW oF HtMl
1.1. Who Invented HtMl
HTML was invented in November 1990 by a scientist called Tim Berneses-Lee. The purpose 
was to make it easier for scientists at different university to gain access to each other’s 
research documents.
1.2 a brief history
HTML is not an invention but an improved version of Standard Generalised Markup 
Language(SGML).SGML is a Meta Language (general -- purpose language)used for defining 
and creating descriptive markup language.
59
Introduction to HTML
1.3 What tools do you need?
To get started with html documents, only two basic things are required
•	 A text editor/HTML editor
•	 A Web Browser
1.4 t ags and attributes
The World Wide Web Consortium has given a set of standards while building the HTML 
language. The W3C uses some special words to define an action. 
A tag is a special word enclosed in angle-brackets < >.  A tag tells the browser to perform 
an action as asked by the special word. The special word may be written either in lower 
case or upper case. The browser will respond to both the cases equally. 
The HTML  tags are normally comes in pair of start and end tag(an opening tag and closing 
tag). While the start tag is written in the beginning of the element as <SpecialWord>, the 
end tag is written at the completion of the element as </SpecialWord>. 
For example: When you want to begin with writing source code using HTML, you write 
the start tag as  <HTML> and when you have completely written in the HTML document 
and want to end it, you write the end tag as </HTML> i.e. insert a forward slash followed 
by HTML in angled brackets.
The characteristics or the features of a tag are defined by an attribute. An attribute is used 
inside a tag. An attribute always takes a value to help the browser perform the specific 
task in a particular direction. There may be more than one attribute used inside a tag. 
An element is a combination of a start tag, the text(we also use text to insert graphics) 
and the  end tag. 
For example: 
<body> element begins with start tag, followed by text and ends with end tag.</body>
In simple words, one can equate an element to a block, a tag to an instruction and an 
attribute to an extension to a instruction. 
Container of Tags: One set of tags may contain another set of tags. This is called nesting 
of tags. The second block of tags is always contained in first block as shown below:
<TAG1> <TAG2>……………</TAG2> </TAG1>
<TAG1> and </TAG1> is the first block of tags. <TAG2> and </TAG2> is the second 
block of tags. 
60
Information and Computer Technology
2. StruCture oF HtMl doCuMent
The basic structure of HTML document is shown below:
<HTML>
<HEAD>
<TITLE> The Structure of HTML Document </
TITLE>
</HEAD>
  First section
<BODY>
             The Body of the HTML Document
</BODY>
</HTML>
  Second section
The basic structure of the HTML document is divided into two sections namely, the head 
and the body. The browser enters the first section after executing the start tag of HTML 
(telling the browser to begin interpreting the HTML commands) and start tag of HEAD. 
The first section helps in changing the heading on the title bar of the HTML document 
(the webpage). The starting of the heading is shown after the start tag of TITLE and the 
end is shown by </TITLE>. The end tag of HEAD i.e. </HEAD> tells the browser that 
the end of first section has come.
The second section begins with the start tag of BODY . The data on the webpage is displayed 
through the tags used in this section. The end tag of BODY i.e. </BODY> tells the browser 
that no more data is to be inserted on the webpage and the end of the web document 
has come. After the completion of this section, the slash HTML or the end tag of HTML 
tells the browser to stop looking for HTML commands. This implies that any tag used 
after the end tag of HTML will not be interpreted by the browser and so no action will 
be performed. 
Please Note:  All the sentences containing any number of whitespaces written inside a tag 
within the body element will appear as written in the HTML code. Any whitespace inserted 
outside the tag within the body element will be interpreted as null, void or amounting to 
nothing by the browser. That is, such whitespaces outside the tag will not appear anywhere 
on the webpage.
3. Sa vIng tHe HtMl doCuMent
When you have finished writing the HTML code in the text editor, click on File menu and 
select Save option. This opens a window, which asks you to save the file in a folder and 
61
Introduction to HTML
give a name and an extension to the file. The extension in this file will be .html or .htm. 
(e.g. basic.htm or firstHTMLDocument.html ). This will turn the file into a webpage. 
In order to modify the webpage, either open the web page and click on View ?source or 
open the webpage with notepad. 
4. ContaIner and eMPty t agS
Before we proceed further to formatting tags, it is necessary for you to understand the 
difference between the container and the empty tag. A container tag has both the start 
and the end tag. The text or the graphic is inserted inside the beginning and end tag of 
the container tag. For example: <body>This is a container tag</body>. The <BODY> tag 
here is a container tag which has both the beginning and the ending tag and the text in 
between both the tags. 
The empty tag is a stand-alone tag. This implies that such a tag has beginning but no 
ending tag. For example: The <BR> tag is used for adding one line break. Such a tag does 
not need an end so as to tell the browser, that end of line break has come because there is 
no need. Such a tag is called empty tag. HR is another empty tag. This tag is used to insert 
a horizontal rule on the web page.  Comment tag is also an empty tag. This tag is ignored 
by the browser. This tag is used to increase the readability of the HTML source code. With 
this tag, you can insert a description about a command. This is written as : <!--, followed 
by description or remark on a command, followed by -->. For example: <!-- Hello --> 
<BODY>…</BODY>
The second section of the webpage begins with the <BODY> tag. This defines the visible 
section of the document. It has a number of attributes which controls the overall appearance 
of the document. The attributes that are used with this tag are listed below in the table:
Attribute of the <body> tag Description
BGCOLOR The background of the webpage is displayed with a color that 
has been taken as value by this attribute.
BACKGROUND The background of the webpage is displayed with an image 
whose address is taken as value by this attribute.
TEXT Specifies the color of the text in the document.
LINK Defines the color of the link in the document
ALINK Defines the color of the active link in the document
VLINK Defines the color of the visited link in the document
Page 5


58
Information and Computer Technology
Chapter 4
Introduction to HTML
Learning Objectives 
By the end of this chapter, learner will be able to:
• 	 Under s t anding	 of	 basic	 s tructur e	 of	 HTML
• 	 Learning	 of	 v arious	 c on t ainer	 	 and	 emp ty	 t ags
• 	 Learn	 v arious	 h tml	 t ags	 and	 their	 s yn t a x.
• 	 Under s t anding	 of	 f orma tting	 elemen ts	 of	 	 HTML
IntroduCtIon
HTML refers to Hypertext Markup Language.  There is a special kind of text used by 
web browsers that represents the data. This data may be in the form of letters, images, 
audios or videos. This special text is given emphasis, which some people may say, it 
is marked up through a link to the other documents. Thus a page formed using the 
special text is called a document or a webpage. A webpage can get opened in a web 
browser.  The web browser accesses the web page from the web server (a place which 
holds most of the webpages). A web server may be placed anywhere in the world. This 
means that a web browser can access a webserver only if it connects to internet (network 
of networks across globe). The HTML was founded by the group called “World Wide 
Web Consortium” in 1990.
1. overvIeW oF HtMl
1.1. Who Invented HtMl
HTML was invented in November 1990 by a scientist called Tim Berneses-Lee. The purpose 
was to make it easier for scientists at different university to gain access to each other’s 
research documents.
1.2 a brief history
HTML is not an invention but an improved version of Standard Generalised Markup 
Language(SGML).SGML is a Meta Language (general -- purpose language)used for defining 
and creating descriptive markup language.
59
Introduction to HTML
1.3 What tools do you need?
To get started with html documents, only two basic things are required
•	 A text editor/HTML editor
•	 A Web Browser
1.4 t ags and attributes
The World Wide Web Consortium has given a set of standards while building the HTML 
language. The W3C uses some special words to define an action. 
A tag is a special word enclosed in angle-brackets < >.  A tag tells the browser to perform 
an action as asked by the special word. The special word may be written either in lower 
case or upper case. The browser will respond to both the cases equally. 
The HTML  tags are normally comes in pair of start and end tag(an opening tag and closing 
tag). While the start tag is written in the beginning of the element as <SpecialWord>, the 
end tag is written at the completion of the element as </SpecialWord>. 
For example: When you want to begin with writing source code using HTML, you write 
the start tag as  <HTML> and when you have completely written in the HTML document 
and want to end it, you write the end tag as </HTML> i.e. insert a forward slash followed 
by HTML in angled brackets.
The characteristics or the features of a tag are defined by an attribute. An attribute is used 
inside a tag. An attribute always takes a value to help the browser perform the specific 
task in a particular direction. There may be more than one attribute used inside a tag. 
An element is a combination of a start tag, the text(we also use text to insert graphics) 
and the  end tag. 
For example: 
<body> element begins with start tag, followed by text and ends with end tag.</body>
In simple words, one can equate an element to a block, a tag to an instruction and an 
attribute to an extension to a instruction. 
Container of Tags: One set of tags may contain another set of tags. This is called nesting 
of tags. The second block of tags is always contained in first block as shown below:
<TAG1> <TAG2>……………</TAG2> </TAG1>
<TAG1> and </TAG1> is the first block of tags. <TAG2> and </TAG2> is the second 
block of tags. 
60
Information and Computer Technology
2. StruCture oF HtMl doCuMent
The basic structure of HTML document is shown below:
<HTML>
<HEAD>
<TITLE> The Structure of HTML Document </
TITLE>
</HEAD>
  First section
<BODY>
             The Body of the HTML Document
</BODY>
</HTML>
  Second section
The basic structure of the HTML document is divided into two sections namely, the head 
and the body. The browser enters the first section after executing the start tag of HTML 
(telling the browser to begin interpreting the HTML commands) and start tag of HEAD. 
The first section helps in changing the heading on the title bar of the HTML document 
(the webpage). The starting of the heading is shown after the start tag of TITLE and the 
end is shown by </TITLE>. The end tag of HEAD i.e. </HEAD> tells the browser that 
the end of first section has come.
The second section begins with the start tag of BODY . The data on the webpage is displayed 
through the tags used in this section. The end tag of BODY i.e. </BODY> tells the browser 
that no more data is to be inserted on the webpage and the end of the web document 
has come. After the completion of this section, the slash HTML or the end tag of HTML 
tells the browser to stop looking for HTML commands. This implies that any tag used 
after the end tag of HTML will not be interpreted by the browser and so no action will 
be performed. 
Please Note:  All the sentences containing any number of whitespaces written inside a tag 
within the body element will appear as written in the HTML code. Any whitespace inserted 
outside the tag within the body element will be interpreted as null, void or amounting to 
nothing by the browser. That is, such whitespaces outside the tag will not appear anywhere 
on the webpage.
3. Sa vIng tHe HtMl doCuMent
When you have finished writing the HTML code in the text editor, click on File menu and 
select Save option. This opens a window, which asks you to save the file in a folder and 
61
Introduction to HTML
give a name and an extension to the file. The extension in this file will be .html or .htm. 
(e.g. basic.htm or firstHTMLDocument.html ). This will turn the file into a webpage. 
In order to modify the webpage, either open the web page and click on View ?source or 
open the webpage with notepad. 
4. ContaIner and eMPty t agS
Before we proceed further to formatting tags, it is necessary for you to understand the 
difference between the container and the empty tag. A container tag has both the start 
and the end tag. The text or the graphic is inserted inside the beginning and end tag of 
the container tag. For example: <body>This is a container tag</body>. The <BODY> tag 
here is a container tag which has both the beginning and the ending tag and the text in 
between both the tags. 
The empty tag is a stand-alone tag. This implies that such a tag has beginning but no 
ending tag. For example: The <BR> tag is used for adding one line break. Such a tag does 
not need an end so as to tell the browser, that end of line break has come because there is 
no need. Such a tag is called empty tag. HR is another empty tag. This tag is used to insert 
a horizontal rule on the web page.  Comment tag is also an empty tag. This tag is ignored 
by the browser. This tag is used to increase the readability of the HTML source code. With 
this tag, you can insert a description about a command. This is written as : <!--, followed 
by description or remark on a command, followed by -->. For example: <!-- Hello --> 
<BODY>…</BODY>
The second section of the webpage begins with the <BODY> tag. This defines the visible 
section of the document. It has a number of attributes which controls the overall appearance 
of the document. The attributes that are used with this tag are listed below in the table:
Attribute of the <body> tag Description
BGCOLOR The background of the webpage is displayed with a color that 
has been taken as value by this attribute.
BACKGROUND The background of the webpage is displayed with an image 
whose address is taken as value by this attribute.
TEXT Specifies the color of the text in the document.
LINK Defines the color of the link in the document
ALINK Defines the color of the active link in the document
VLINK Defines the color of the visited link in the document
62
Information and Computer Technology
4.1 Formatting elements 
In a web page, the text is an important component especially when there is no picture 
or graphic. It becomes therefore necessary to change the style of text at every paragraph, 
so that they become presentable. There are a number of tags that help you to format the 
text. 
4.1.1 <Heading t ags>
Heading tag is used to display the heading or the main topic on the web page. This tag 
varies from H1 to H6. This is a container tag. The heading tag <H1> shows the heading 
with the largest font size. As you increase the number in the heading tag, the font size 
goes down as shown in the example given below:
<H1> This text is in largest font i.e. H1 font </H1>
<H2> This text is in larger font i.e. H2 font </H2>
<H3> This text is in medium large font i.e. H3 font </H3>
<H4> This text is in medium small font i.e. H4 font </H4>
<H5> This text is in smaller font i.e. H5 font </H5>
<H6> This text is in smallest font i.e. H6 font </H6>
The above code produces the following output:
C:\Users\HP\Music\Desktop\audio.html
File EditViewFavorites Tools Help
This text is in largest font i.e. H1 font
This text is in largest font i.e. H1 font
This text is in medium large font i.e. H3 font
This text is in medium large font i.e. H3 font
This text is in smaller font i.e. H5 font
This text is in medium large font i.e. H6 font
C:\Users\HP\Music\Desktop...
Close Tab (Ctrl+W)
02:26
06-03-2013
We can see from the output that the size of the font keeps decreasing as one increases the 
number in the heading tag.