Scribd
Upload
8 views22 pages

Basic of HTML Notes Chapter 1

HTML (Hypertext Markup Language) is essential for developing web pages, utilizing container and empty tags to define structure and appearance. Key tags include <BODY>, <H1>-<H6> for headings, <P> for paragraphs, and <IMG> for images, each with specific attributes to control layout and formatting. The document provides examples and explanations of various HTML elements, including lists, line breaks, and text formatting tags.

Uploaded by

Yashasvi Sharma
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
8 views22 pages

Basic of HTML Notes Chapter 1

HTML (Hypertext Markup Language) is essential for developing web pages, utilizing container and empty tags to define structure and appearance. Key tags include <BODY>, <H1>-<H6> for headings, <P> for paragraphs, and <IMG> for images, each with specific attributes to control layout and formatting. The document provides examples and explanations of various HTML elements, including lists, line breaks, and text formatting tags.

Uploaded by

Yashasvi Sharma
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 22

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

You might also like