Class 9 – HTML Notes BASICS OF HTML
HTML stands for Hypertext Markup Language and it is a widely used programming
language used to develop web pages.
CONTAINER AND EMPTY TAGS
Container Tags Empty Tags
Container tags require a starting as well as Empty tags require just a starting tag and
an ending tag. not an ending tag.
<HTML>and </HTML>, <TITLE> and <BR>, <IMG> are examples of empty tags.
</TITLE> are examples of container tags.
Tag and Attribute
Tag Attribute
A tag is a coded HTML command that An attribute is a special word used inside
defines the structure and appearance of a tag to specify additional information about
web page. the tag such as color, alignment etc.
For e.g. <H1> is a tag that indicates For e.g. <H1 align=”center”>. In this
browser to display the text in a bolder/ example, align is an attribute of H1. It
larger font than the normal text. indicates that the text inside the <H1> tag
is to be displayed in the center.
<BODY> tag
The <BODY> tag is used to control the content of the web page. The following are
the important attributes of the <body> tag:
Attribute Description
Bgcolor To specify the background color of the
web page
Background To specify the relative or absolute path of
the image file to be displayed as
background of the web page.
Leftmargin, topmargin To specify the amount of space to be left
blank from the top and left margins of the
web page. Its value is specified in pixels.
Link, alink, vlink Attributes to assign colours to link, active
link and visited link
To specify the color of the text to be displayed on the
Text web page
1
Class 9 – HTML Notes BASICS OF HTML
e.g. <body bgcolor=”pink” background=”tiles.gif” text=”red”
leftmargin=100 topmargin=90>
Let us consider an example to create a web page using different attributes of the
<BODY> tag. Type the following code in the notepad window and save the file with the
.html extension as shown below:
The output of the above HTML code in the browser window is:
2
Class 9 – HTML Notes BASICS OF HTML
Topmargin
leftmargin
Text
color
(red)
Backgroun
d color
(pink)
Headings tags <H1>-<H6>
Heading tags display text in larger as well as bolder font than the normal body text.
HTML provides six levels of headings: <H1> to <H6>, with 1 being the largest and 6
being the smallest. When heading tags are used, a blank line is automatically added
before and after the heading.
The heading tags have just one attribute called align.
Attribute Description Example
Align To specify the placement of the <Hn align=center> where n
heading text with respect to stands for number between 1 to
margins. The values that can be 6.
specified are:
Left
Right
Center
3
Class 9 – HTML Notes BASICS OF HTML
Type the following HTML code in the notepad window:
The output of the above HTML code is:
Level 1
heading
aligned
left
Level 2
heading
aligned
left
Level 3
heading
aligned
center
Level 4
heading
Normal body text
aligned
center
4
Class 9 – HTML Notes BASICS OF HTML
Line Break <BR> Tag
The browser does not recognize any line breaks given using the Enter key in the HTML
code. To explicitly force a line break between two lines in the output, you use the <BR>
tag.
The <BR> tag shifts the text following it to the next line. It is an empty tag. It does not
have any attributes.
Let us consider the same web page created before. You can display the names of
monuments in different lines by including the <BR> tag as shown in the following
notepad window:
The output of the above HTML code in the browser window is:
5
Class 9 – HTML Notes BASICS OF HTML
Line Break
Line Break
Paragraph <P> Tag
The Paragraph <P> tag marks the beginning of a paragraph. It is a container tag. When a
text is included within the opening and closing <P> tag, a blank line is inserted before
and after the enclosed text. It has only one attribute called align.
Attribute Description Example
Align To specify the placement of the text <P align=center>
enclosed within the <P> tag with
respect to margins. The values that
can be specified are:
Left
Right
Center
Type the following HTML code in the notepad window:
6
Class 9 – HTML Notes BASICS OF HTML
The output of the above HTML code in the browser window is:
Paragraph
aligned
left
Paragraph
Paragrap
aligned
h aligned
right
center
7
Class 9 – HTML Notes BASICS OF HTML
Horizontal Line: <HR> tag
The <HR> tag stands for Horizontal Rule. This tag inserts a straight horizontal line
across the web page. By default, horizontal line appears shaded and spans the width of
the browser window. The attributes of <HR> tag are:
Attribute Description Example
To specify the vertical size or
thickness of the horizontalline.
Size The value is given in pixels. <HR size=5>
To specify the length of the
horizontal line. The value can be <HR width=500>
given in pixels or in percentage of OR
Width page width. <HR width=70%>
To specify the placement of the
horizontal line on the web page.
Align The values that can be used are: <HR align=center>
8
Class 9 – HTML Notes BASICS OF HTML
thickness of the horizontal line.
The value is given in pixels.
Width To specify the length of the <HR width=500>
horizontal line. The value can be OR
given in pixels or in percentage
of <HR width=70%>
page width.
Align To specify the placement of the <HR align=center>
horizontal line on the web page.
The values that can be used are:
left
right
center
To specify that the horizontal
Noshade line <HR noshade>
should appear as a solid stripe
across the page, rather than a
shaded stripe.
Color To specify the color of the <HR color=blue>
horizontal line.
Type the following code in the notepad window:
The output of the HTML code in the browser window is:
9
Class 9 – HTML Notes BASICS OF HTML
Horizontal
line with
thickness
5
Default
horizonta
l line
Horizontal
line with Horizontal
thickness line with
5 thickness
and 5 and
noshading color blue
Horizontal line with thickness 5, color blue
and length 50% of the page width
<FONT> tag
The <font>tag is used to change the appearance of the text to be displayed on the web
page. Using this tag, you can change the size, color, and style of the text. It is a
container tag. The important attributes of <FONT> tag are:
Attribute Description Example
Size To specify the size of the text. The <font size=5>
value of the size attribute lies
between 1 to 7 with 1 being the
smallest font size and 7 being the
largest font size.
Color To specify the color to be used to <font color=blue>
display the text
Face To change the font type <font face=Arial>
10
Class 9 – HTML Notes BASICS OF HTML
The output of the above HTML code is:
Text with color
red, size 6 and
font type
Comic sans ms
Text with color
blue, size 4
and font type
Arial
CENTER Tag
The <center> tag is a container tag. You can enclose the text or the image to be
aligned in the center of the browser window within the opening and closing center
tag.
11
Class 9 – HTML Notes BASICS OF HTML
Let us consider the above example to align the text ‘India Gate’ in the center of
the browser window by modifying the HTML code:
The output of the above HTML code in the browser window is:
Text
aligned in
the center
12
Class 9 – HTML Notes BASICS OF HTML
Bold, Italic, and Underline Tags
The <B> tag is used to make the text appear in bolder font compared to the normal body
text. It is a container tag.
The <I> tag is used to make the text appear italicized. It is a container tag.
The <U> tag is used to underline the given text. It is also a container tag.
Type the following code in the notepad window:
The output of the above HTML code is:
13
Class 9 – HTML Notes BASICS OF HTML
Text in
bold
Text
in
Text italics
underlined
Listing tags
We can create the following types of lists using HTML
1. Unordered lists
2. Ordered lists
Unordered Lists
Unordered lists appear as a list of items with bullets in front of each list item. An
Unordered list is contained within the <UL> and </UL> tags. Each item in the list
is marked using the<LI>(List Item) tag. The important attributes of <UL> tag is:
Attribute Description
Type To specify the type of bullet to be placed in
front of each item in the list. The values
that are given to this attribute are:
Disc
Square
Circle
o
e.g. <UL type=”square”>
<LI> Vegetables
<LI> Fruits
<LI> Salads
</UL>
Output:
Vegetables
Fruits
Salads
14
Class 9 – HTML Notes BASICS OF HTML
Ordered Lists
Ordered lists are numbered list of items. By default, the browser numbers each
successive list item starting with “1”. An Ordered list is contained within the <OL>
and </OL> tags. Each item in the list is marked using the<LI> (List Item) tag. The
important attributes of <OL> tag is:
Attribute Description
Type To specify the type of numbering to be
used in front of each item in the list.
The values that are given to this
attribute are: A, a, I, i, and 1(default).
Start To specify a number to start the
numbering from a different letter or a
number.
e.g.
<OL type=”A”>
<LI> Vegetables
<LI> Fruits
<LI> Salads
</UL>
Output:
A. Vegetables
B. Fruits
C. Salads
If you use the start attribute of the <OL> tag as shown below, the numbering would
start from a different letter or number:
e.g.
<OL type=”A” start=”3”>
<LI> Vegetables
<LI> Fruits
<LI> Salads
</UL>
Output:
C. Vegetables
D. Fruits
E. Salads
The table given below outlines the output, which is displayed when you use the following
values for the type and start attributes of the <OL> tag:
Type and Start Output
Values
<OL type=A start=1> A. Vegetables
B. Fruits
15
Class 9 – HTML Notes BASICS OF HTML
C. Salads
<OL type=a start=1> a. Vegetables
b. Fruits
c. Salads
<OL type=I start=2> II. Vegetables
III. Fruits
IV. Salads
<OL type=i start=3> iii. Vegetables
iv. Fruits
v. Salads
<OL type=1> 1. Vegetables
OR 2. Fruits
<OL> 3. Salads
(default)
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 :
<HTML>
<BODY bgcolor=pink>
<H1 align=center> Online Books Library</H1>
Books are our best friends. We can obtain many thoughts
from books.
<BR>
The various categories of books featured in our library are:
<OL type=A>
<LI> Autobiography
<OL type=a>
<LI> My Experiments with Truth
<LI> Wings of Fire
</OL>
<LI> Fiction
<UL type=circle>
<LI> Bacon Death
<LI> Pride and Prejudice
</UL>
<LI> Adventure
<UL type=square>
<LI> Gulliver's Travels
<LI> The Phantom Tollbooth
</UL>
</OL>
</BODY>
<HTML>
16
Class 9 – HTML Notes BASICS OF HTML
Inserting Images (<IMG> tag )
Images enhance the overall appearance of the web page. Images make the sites look
interesting. When designing web pages, you should maintain a balance between the use
of text and images. However, excessive use of images may slow down the download of a
web page. The various image file formats supported by most of the web browsers include
GIF, JPG, and PNG.
17
Class 9 – HTML Notes BASICS OF HTML
In HTML, you insert images using the <IMG> tag. It is an empty tag. The following table
lists the attributes of the <IMG> tag:
Attribute Description Example
Src To specify the URL or path of the image to <IMG src=”flowers.jpg”
be displayed
Height, Width To specify height and width of the image <IMG height=200
in pixels width=200>
Align To align the image with respect to <IMG align=right>
margins or inline text
Use Left or Right value to align the
image with respect to margins.
Use Top, Middle, Bottom to align
the image with respect to inline
text.
Alt To specify the alternative text the <IMG alt=”flowers
browser may show if image cannot be image”>
displayed. If the image is available, the
text appears as a tip when the mouse is
moved over the surface of the image.
Border To specify the thickness of the border to <IMG border=6>
be displayed around the image
The following HTML code uses different attributes of the <IMG> tag to display the
output as shown in figure
<HTML>
<HEAD>
<TITLE> Flowers </TITLE>
<BODY bgcolor=pink>
<HR size=4 color=blue width=50%>
<H1 align=center> Beauty of Flowers</H1> <HR size=4
color=blue width=50%>
<IMG src="tulips.jpg" height=100 width=100 border=6> <FONT
color=purple> A thing of beauty is a joy forever. Flowers are a symbol of nature's
divine beauty. </FONT>
<IMG src="sunflower.jpg" height=100 width=100 border=6 alt=”Flowers
image”>
</BODY>
</HTML>
18
Class 9 – HTML Notes BASICS OF HTML
The text “flowers image” is the alternative
text that gets displayed if the image is not
available.
Using the align attribute of<IMG> tag
The align attribute of the <IMG> tag lets you specify the placement of image on the web
page. To align the image with respect to margins, you use left or right as the attribute
value as done in the following code:
<HTML>
<HEAD>
<TITLE> Flowers </TITLE>
<BODY bgcolor=pink>
<HR size=4 color=blue width=50%>
<H1 align=center> Beauty of Flowers</H1> <HR size=4
color=blue width=50%>
<IMG src="tulips.jpg" height=100 width=100 border=6 align=left>
<FONT color=purple> A thing of beauty is a joy forever.
Flowers are a symbol of nature's divine beauty.
<IMG src="sunflower.jpg" height=100 width=100 align=right border=6>
<BR><BR><BR><BR>
19
Class 9 – HTML Notes BASICS OF HTML
<P align=right> Looking at flowers makes us feel happy and pleasant.
Flowers are the greatest gift of God. </FONT></p>
</BODY>
</HTML>
The output of the above code is as follows:
Left alignment Right
alignment
The other three values that can be given to the align attribute are top, middle, and
bottom. These values align the image with respect to text on the web page. The
following code uses these attribute values to display the output as shown in fig :
<HTML>
<HEAD>
<TITLE> Flowers </TITLE>
<BODY bgcolor=pink>
<HR size=4 color=blue width=50%>
<H1 align=center> Beauty of Flowers</H1> <HR size=4
color=blue width=50%>
<IMG src="tulips.jpg" height=100 width=100 border=6 align=top>
20
Class 9 – HTML Notes BASICS OF HTML
<FONT color=purple> A thing of beauty is a joy forever. Flowers are a symbol of
nature's divine beauty. <BR><BR>
<IMG src="sunflower.jpg" height=100 width=100 border=6 align=middle>
Looking at flowers makes us feel happy and pleasant.
Flowers are the greatest gift of God.
<BR><BR>
<IMG src="bouquet.jpg" height=100 width=100 border=6 align=bottom>
So, present a bouquet of flowers to somebody you love
today!!</FONT>
</BODY>
</HTML>
The text is placed at top with
respect
to text.
The text is placed at middle with
respect to text.
The text is placed at bottom with respect
to text.
21
Class 9 – HTML Notes BASICS OF HTML
Note:To align the image in center with respect to margins, enclose the <IMG>
tag inside the <CENTER> tag as shown below:
<CENTER> <IMG src=”tulips.jpg”></CENTER>
HYPERLINKS IN HTML
While surfing the Internet, you come across several text strings or images which when
clicked opens a different web page for you. These text strings or images are called
hyperlinks. Hyperlinks are the essence of World Wide Web. Hyperlinks interconnect
web pages over the World Wide Web. Linking involves linking various sections of the
same web page, i.e. upon clicking a hyperlink, a different section of the same web
page becomes visible in the browser window. This type of linking is useful when the
content on a web page extend across multiple pages. It serves as a bookmark to go to a
particular segment of the web page. For eg. Go to Top of the Page link on web pages
Anchor tag : <A> tag
The Anchor (<A>) tag is used to create hyperlinks on a web page. It is a container tag.
Everything contained between the <A> and </A> tag (Text or Image) is displayed as a
hyperlink. The following are the some of the important attributes of the <A> tag:
Attribute Description
Href This attribute indicates the path of the file or the name of the
section to which you want to link to.
Name This attribute is used for linking sections on the same web page. It
indicates the name of the section within a web page.
Target You can use the target attribute of <A> tag to specify the name of
the window where the linked page should be displayed. For
example, setting the target attribute to _blank opens the link
information in a new window.
<a href=”flowers.html” target=”_blank”> Click here</a>
22
