INTRODUCTION
The Internet is an integral part of everyone's life. The World Wide Web
brings
of information on different pages called web pages. A web page is
generallyloa
HTML document. It may include text, graphics, audios, videos and links.It a
sinl
can
HTML stands for HyperText Markup Language. Hypertext meanstextWhich
contains link to another text. It means that the web pages of a website
arelink
You can even browse from one page to another. Markup languageis the
style
of writing and presenting the information within the text document.HTML.
example of markup language. It is used for designing web pages on theWorldIsan
Tech Fact
In 1990, Tim Berners Lee invented HTML. Its first version, HTML 1.0,
was released in 1991. The differentversions of HTML:
Version Year
HTML 1991
HTML 2.0 1995
HTML 3.2 1997
HTML 4.01 1999
XHTML 2000
HTML 5 2014
Tim Berners-Lee
The features of HTML that made it popular for creating web pages are as follows:
Platform-independent language
It is not a case-sensitivelanguage.
Easy syntax, simple-to-understandand write programs
Attributes are used to give additional information about a tag.
Flexibility to design web pages using multimedia elements
Embedding an audio or a video is as simple as inserting an image.
Links on a web page can be added for easy browsing.
Once the web pages are created, they are shared with the world.
COMPONENTS OF HTML
HTML consists of tags, elements and attributes. Read further to know aboutthem
in detail.
82
HTMLTAGS
Tagsare coded instructions that are referredto as source code. Markup tags are
themostbasic elements necessary to create a web page. HTML tags are keywords
enclosedin a pair of angular brackets (< and >). These tags mark the beginning and
HTML instruction or an HTML element.
endof an
Thefirsttag is known as the opening tag or the ON tag. The end tag is known as the
closingtag or the OFF tag. It is preceded by a slash (I) with angular brackets. The
maincontentis placed between the opening and closing tags.
Thereare two types of tags: Container and Empty (Table 6.1).
Table 6.1 Types of tags
Examples
Description
Typeof tags
tags
These tags have a beginning and an end <b>...</b>, <u>...</u>,
/body>
tag to an HTML element.
Emptytags
These tags only have an opening or a
starttag. They do not have closing tags
Container
< img>, <br>, <hr>, < 1 i >
to an HTML element.
HTML ELEMENTS
Theopeningtag, closing tag and the content in between the tags together form an
HTMLelement.For example, <B> Terabytes</B> is an HTML element.
HTMLATTRIBUTES
Attributesare keywords that provide additional information about HTML tags. A tag
mayhave several attributes.These are always written with the start tag. Attributes
appearas an attribute name. Each attribute is followed by an — sign and the
value. The attributevalue is enclosed within double quotes "). Different
attribute
in the same tag are separatedby a space. For example, <font color
attributes
"blue" >
Terabytes
</font>.
Here, color
is the attributeof the <font>
tag
andis enclosed within double quotes.
STRUCTUREOF AN HTML DOCUMENT
HTMLdocument is also known as HTML page. There are various components that
forman HTML document (Table 6.2).
83
Table6.2 Componentsof HTML document
Descri tion
<html>
<head>
It identifies the document type as HTML document. It is also known
the root element as all other tags are nested between the
and
< / html > ta s. It is a container ta
It contains information that you do not want directly to be displayedonthe
tag, the logo of the web page,
web page. It contains the <title>
tagline
and metadata (the ke ords to be read b search en ines) of theweb
It is a container tag. A title is written in between the tags. The titleis
dis la ed on the title bar of the browser window.
It defines the document body which includes text, images, links, etc.
It contains all the information that you want to be displayed on theweb
a e directl .
The basic structureof an HTML document is:
<html>
<head>
<title>
(title of the web page)
</title>
< /head>
< /bodY>
< /html >
Tech Help
Remember the following points while writing the HTML code:
1. The tag name and attributesare not case sensitive. For example, <BODY> is the same as <bodp.
2. The values of the attributes can be case sensitive.
</
3. The space between the on and off tags has no relevance. For example,
u> isthe same as <u>
terabytes
</u>.
4. There should be no space before, after or in between the tag names. For example, < i>, <u
<bo
are incorrect.
5. Attributesare always specified in the start tag.
6. Make sure that the element that is opened first is closed later.
For example,
i
HTML EDITORS
To create an HTML document, you need an HTML editor. An HTML editor is a
software application that is required to create web pages. Two types of HTML edito
are WYSIWYG and Text.
84
EDITOR
standsfor What You See Is What You Get This type of editor allows
tocreatea web page without the use of HTML tags. The content seen during
editingphase closely resembles the final web page. For example: Microsoft
tpage,Adobe Dreamweaver, Microsoft Expression Web etc.
EDITOR
editorsuse HTML tags to create a web page. For example: Notepad, CoffeeCup,
on.
Elfish and so
AN HTML DOCUMENT
CREATING
creatingyour own web page, you need a text editor.You will use Notepad
learningabout HTML.
bhile
follow these steps:
ToopenNotepad,
1: Click the Start
Step
khtnl>
buton.
I •alearningHTk
Windows
Step2: Click
Accessories and select
<[body)
</htnl>
Notepad.
appearson your
Notepad
Typethe HTML code
screen.
inthewindow (Fig. 6.1).
Tin B Leewasthe prizar•yauthorof HTk.
Fig. 6.1 Notepad window with the HTML code
Step 3: To save the
Notepad file, click File
menu, select the Save As
option. The Save As dialog
box appears(Fig. 6.2).
Step 4: Choose the location
where you want to save
x
iStep 5 :
the file.
{Ste 6
Step 5: Type the file name
with an extension .htm
or .html in the File name
text box.
Step 6: Click the Save button.
Ln1.Cd1
Fig. 6.2 Save As dialog box
85
F,
BROWsER
VIEWING HTML DOCUMENTS BY USING A WEB
You can view an
HTML document
in any web
browser. For
example: Microsoft
Edge, Internet
Explorer, Netscape
Navigator, Google
w.d2tu
Chrome etc.
To open the web
page in Google
Chrome, open
2
the folder where
you have saved
the HTML file.
Fig. 6.3 Opening a web page in a browser
Right-click the file to view the output.
A pop-up window will ask you to select the web browser (Fig. 6.3).
Select Google Chrome and the output in the form of a web page appears(Fig.6.4),
I'm learnirg HTML
C
e file:///C:/html/abc.htm
Tim B Lee was the primary author of HTN'IL.
Fig. 6.4 HTML We bpage as output
86
ACTIVITY 1
web page for Mrs. Sharma'sActivity Studio.
createa simple
Activity Studio
Thereis plenty to do after school hours! Activity Club has a variety of after-school activities
rangingfrom Art and Craft, Cooking, Dance, Music, Education, Languages, Sports and
Adventure,and Theatre. Please read all the information below for details and specifications
aboutour after-school activities.
Artand Craft: Drawing, Painting, Calligraphy, Origami, Quilling, Clay Art, Flower Making,
Candle Making, etc.
cooking: Chocolate Making, Starters, Soups and Salads, Baking, Desserts, Snacks, etc.
Dance:Ballet, Salsa, Indian Folk, Hip Hop, Ballroom, etc.
Education:Academics, IT and Computer Science, Handwriting, Science and Robotics, etc.
Languages:English, French, German, etc.
Sportsand Adventure: Swimming, Skating, Football, Chess, Cricket, Basl<etball, etc.
Speechand Drama
If you want to enjoy the activity joy ride then contact the undersigned
Contact: .
(you can write your name here)
Phone: ...
(you can write any phone number here)
Youwill get the output
as shown:
This kind of an output
is difficult to read and
understand.You need
toadd different tags to
formatthe look of the
web page and make it
attractive.
htm
C
FiloJ
O
Thereis plentyto do after schoolhours' ActivityClubhas a varietyof after-schoolactivitiesranging fromArt md Craft. Cooking.Dance,
Music,Education.Languages.Sportiand Adventure.and Theatre.Pleasereadall the informanoabelowfor detailsand specificauoasabout
Ourafter-schoolactivsuesArt and Craft: Dramng. Punting. Calligraphy, Origami. Quilling. Clay Art. Flower Making. Candle Making. etc.
Cooking' ChocolateMaking.Starlet', Soup' and Salad'.Baking.Desserts.Snacks,etc.Dance:Ballet.Salsa.Indian Folk, HIP Hop. Ballroom.
etc. Education:Academu:s.IT and ComputerScience.Handwriting. Science and Robotics.etc-Language•: English. French. German. ete-
Sportsand Adventure:Swimming.Skating.Football.Chess.Cricket.Basketball.etc. Speechand Drama If you "-ant to enjoythe
7107
ride then contactthe undersignedContact:Rahul VerrnaPhone.95990S
joy
HTML DOCUMENT HEADING
Heading tags are used to display the text
slightly bigger and bolder than the normal
body text. It has six levels of headings,
numbered
from 1 to 6: <HI>, <H2>,
and
First Level Heading
SecondLeveIHeading
Third Level Heading
(Fig. 6.7).
Fourth LevelHeading
The first heading in each document
is suggestedas <HI>...</HI>. It is a
container tag.
Syntax:<Hn> heading
< /Hn>
Here, 'n' refersto the number telling the
size of the heading varying between 1 to 6.
Fig. 6.5 Using heading tags
TAG
The
tag is a container tag. It consists of the content and the layoutofa web
page. Without additional formatting,the text will appear as a continuous paragraph
The only breaks in text occur at the line wrap width of the browser and thespaces
between words.
The attributesof the
tag are listed in Table 6.3.
Table 6.3
Attribute
bgcolor
tag attributes
Example
Description
It is used to set the background
<body bgcolor
colour of the document.
The value isthe colour name
<body
"orange"
>
bgcolor
or RGB hexadecimal code.
background
text
It is used to set an image in the <body
background of the document.
It is used to set the colour of
the text of the document.
They are used to set the four
leftmargin,
margins on a web page or
rightmargin,
define the spacing between
topmargin,
the border and text on the
bottommargin web page. The space here is
defined in pixels.
88
\
desktop
<body
<body
<body
<body
<body
\ art .jpeg"
>
text = "black"
>
leftmargin
rightmargin
topmargin
bottommargin
one attribute for a tag by separating each attribute with a space.
"black" bgcolor
•body text
than
can use more
example,
has a
made from three primary colours: red, green and blue. Each colour
are
All
code.
hexadecimal
along vviththeir hexadecimal codes are listed below:
colours
Basic
Colour
HTML/CSSName
Black
Hex Code
#RRGGBB
#000000
White
Red
#FFOOOO
Lime
#OOFFOO
Blue
#OOOOFF
Yellow
Cyan / Aqua
*OOFFFF
Magenta / Fuchsia
Silver
scococo
Grey
#808080
Maroon
#800000
01 ive
#808000
Green
#008000
Purple
#800080
Teal
Navy
#008080
#000080
89
ACTIVITY 2
A. Open the Activity
Studio file in text
editor. Add
tag heading to
the title.
•Acti*9 2 • Notepad
Edi Fgrrnat
Help
<htnl >
<tltle» Activity Studio</tltle»
<body>
Activity Studio
There is plenty to do after
<bOdybe color• "ØØØØFF"
text• "*FFFFFF" leftnargln—
school
Activity Club has a variety Of after-school activities ranging froe Art and Craft, Cooking,
t•kJsic,Education, Languages,Sports and Adventure,and Theatre.
hiease read an the infor.atlon belowfor details and specifications aboutour after-school
Quilling, Clay Art,
Art andCraft: Drawing,Painting, Calligraphy,
Making,Candi
Cooking: ChocolateMaking,Starters, Soupsand Salads, Baking, Desserts, Snacks, etc.
Dance:Ballet, Salsa, Indian Folk, Hip Hop, Ballrooa, etc.
B. Use the
tag and its attribute
in the beginning of
the text.
Education: Academics, IT and Conputer Science, Handwriting, Science and Robotlcs, etc.
Languages:English, French, German,etc.
Sports and Adventure:Swinlng, Skating, Football, Chess, Cricket, Basketball, etc.
/body>
c/html>
You will get the
output as shown:
Intl. Coil
UTF-.t
Activity
(D File
O @
Activity Studio
•ntere is plenty to do after sehcxsthours!Activity Club has a vanety of after-schoolactivities
fromAlt and
Cook-mg,Dance. Music. Educauou.Lauguages.Sportsand Ach.uture, and nteatte- Please read all the mfotmatiouCraft.
tklow for
detatls and spectticattonsabout our after-schoolactivities.Art and Cran. I)tamng. Painting. Calligraphy,
Qurllut&
Clay Att. Flov.et Making. Candle Making. etc. Cookxne Chocolate Making. Startets. Soups and Salads.
Bakmg. Dessetts
Snacks, ete Dance: Ballet. Salsa. Indian Folk, Hip Hop, Ballroom.etc. Educauon•Acadetntes, rr and
CcynputerSciaee.
Hand',witing.Scueneeand Roboues.etc. Languages: English. French. Goman. ete Spons
Smmmu.te. Skating.
Football.Chess. Cricket. Bash•tball, ete
and Drama
LINE BREAK
TAG
The browser does not recognise formatting
or line breaks by using Enter key in the
HTML code. Hence, the
tag is used to insert line breaks. It is an empty tag
does not have any attributes.
Tech Help
You may add as many
90
tags as required to have multiple
line breaks on the web page•
GRAPH
TAG
PARA tag marks the beginning of the new paragraph in a web page. It leaves a
paragraph. It is a container tag.
Thek line after the
"value">
align
(P
syntax:
attributes have been listed in Table 6.4.
blan
tag
Table 6.4
Description
Attribute
align
tag attributes
Example
align = "left" >
align "right" >
It aligns the text to left, right and centre.
By default, the paragraph is left aligned.
align
align
The values are left, right center and justify.
—
"center" >
"justify" >
TechHelp
Use
with align attribute for paragraph change and <br> tag for line break.
ACTIVITY3
Open the Activity
Studiofile in text
editor.There is no
breakin the text
and,hence, it is
difficultto read.
Add line breaks
andparagraph
tags.
x
Activity 3 - Notepad
Yiew
Eile Edit
<tltley Activity Studio</title»
<body>
cp align— "center"> Activity Studio
text— "#FFFFFF" leftnargin—
<body bgcolor— "#ØØØØFF"
align —"justify"> ThereIs plentyto do after school
Art and Craft, Cooking, Dance,
Club has a variety of after-school activities ranging
the inforøation
Education, Languages, Sports and Adventure, and Theatre. Please read
belowfor details and specifications aboutour after-school activities.
and Craft: Drawing,Painting, Calligraphy, Origani, Quilling, Clay Art, FlowerMaking,Candle
Making, etc.
Chocolate Making, Starters, Soups and Salads, Baking, Desserts, Snacks, etc.
Academics, IT and Coaputer Science, Handwriting, Science and Robotics, etc.
English, French, German,etc.
etc.
and Adventure:Swining, Skating, Football, Chess, Cricket, Basketball,
Ballet, Salsa, Indian Folk, Hip Hop, Ballrooa, etc.
If you want to enjoy the activity joy ride then contact the undersigned
Contact: Mr. Rahul Verna
align
Phone: 9599ø57107
Ln 11, c0178
100%
Windows (CRLF)
UTF-8
91
You will get the output as shown:
Stu"
Activi9•
O @
C O FileI
Activity Studio
There is plenty to do aner school hours!
Dance, Music, Educatzcn Langua
ranging from Art and Craft, Cooking, specifications
ges.
and
about our after-school
Activity Club has a variety of after-school activities
details
for
below
the information
Sports and Adventure, and Theatre. Please read all
activities.
Candle Making, etc.
Quillmg, Clay Art, Flower Making,
Art and Craft: Drawing, Painting, Calligraphy, Origami,
etcSnacks,
Baking, Desserts,
Cooking: Chocolate Making, Starters, Soups and Salads,
etcBallroom,
Hop,
Hip
Folk,
Indian
Ballet,
Salsa,
Dance:
Science and Robotics, etc.
Education: Academics, IT and Computer Science, HandwTiting,
Languages: English, French. German, etcCricket, Basketball, etc.
Sports and Adventure: Swimming, Skatmg, Football, Chess,
If you want to enjoy the activityjoy ride then contact the undersigned
Contact Mr. Rahul Verna Phone: 9599057107
HORIZONTAL RULE
TAG
The <HR> tag is used to insert a straight horizontal line across the web page. It is an
empty tag. By default, the line appears shaded and the length is equal to the width
of the browser window. The attributesof <HR> tags are listed in Table 6.5.
Table 6.5 <HR> tag attributes
Attribute
size
width
92
Description
Example
It sets the thickness of the horizontal
line in pixels.
<hr size
The default value of the size attribute is
2 pixels.
It sets the horizontal width of the line. <hr width
The value can be given in pixels or in
<hr width
percentage.
It sets the placement of the line on the
web page. The values to be used are:
<hr align — "left" >
align
right,
centre.
left,
It sets the colour of line.
<hr color = "yellow" >
color
It does not have a value. It displays a
noshade solid grey colour stripe across the page. <hr noshade>
the attributes:
Usingall
"12" align
(hr size
= "center" color=" orange" width
ACTIVITY 4
write the code to describe main parts of a computer. Insert the following codes for using
horizontalrule and observe the output.
"5" color
• <hr size
• <hr size
= " 12"
color
"orange"
=
width
— "50%"
align
"center" >
blue" >
• <hr noshade>
TAG
The<font> tag is used to change the size, colour and typeface of the short segment
oftexton an HTML page. The attributesof <font> tag are listed in Table 6.6.
Table 6.6 <font>
tag attributes
Description
Attribute
Example
It sets the font type.
<font face — "Arial" >
color
It sets the colour of the text.
<font color = "blue" >
size
It sets the size of the text. The value
lies between 1 (smallest) and 7
<font size
face
(lar est).
93
ACTIVITY 5
A. Try the following code
in the <html>
code.
< font
—
size
color
"red" >
Font tag < / font >
<font
color
Font
<font
color
Font
size =
= "green" >
tag
< / font >
size —
— "orange " >
tag
< / font >
B. Change the font face,
colour and size. Be
careful while choosing
the font colour if
you have a coloured
background. The text
should be readable.
If not, change the
background colour.
0
Activity Studio
<font face • -Lucida Calligraphy- size
cp align• -catter-» Activity Studio
color—
chr size -3- color• Milte—Yidth• —8T ahsn•
leftærgin•
text•
bSCOIor•
hours!
cp align •justify-y Thereis plenty to do after schoolranging
Art andCraft, Cooking,Dance,
Activity Club has a variety of after-school activities
Please read all the
Theatre.
and
Educatim, Languages,Sports andEventure,
after-school activities.
for details and specificatims about
infor•aation
Clay Art,
Candle
<boArt and Craft: Dr—Ing, Painting. Calligraphy, Origami,V11ing,
etc.
Desserts,
Baking,
Snacks,
etc.
Salads,
and
Soups
Starters,
Chocolate
Ballroæ, etc.
Ballet, Salsa, Indian Folk, Hip
Science and Robotics, etc.
Science,
Acadeaics, IT and
ebr>Languages:English, French, Geren, etc.
ard Eventure: Swining, Skating, Football, Chess, Cricket, Basketball, etc.
If ymJwnt to enjoy the activity joy ride then contactthe undersigned
RahulVena
cp align •center—»Contact:
Phone: 9599057187
Ln1.C011
100%
You will get the output as shown:
Activity Studio
'There isprenty to do after school hours!
-Activity Club has a variety of after-schoolactivities ranging front Art and Craft, Cooking,Oånce;
:Music,flucation, Languages, Sports and Adventure, and Theatre. Please read alt the infonpati0'!
befowfor details andspecifications about our after-schooCactivities.
Art and Craft: Drawing, 'Painting,Cafigrgyhy, Origami,QuiCing,cray Art, flower Naking. Candle
'Making, etc.
ooking: Chocolate -Making, Starters, Soups and Safads, 'Baking, Desserts, Snacks, etc.
'Dance: 'BaCet, Sa6a, Indian folk, flip Mop, 'BaCroom, etc.
f,fucation: Academics, If and Computer Science, Handwriting, Science and Robotics, etc.
fanguages: 'English,frencfi, German, etc.
Sports and Adventure: Swimming, Skating, footbaC, Chess, Cricket, 'BasketbaC, etc.
you want to enjoy the activity joy ride then contact the undersigned
Contact: 3Mr. RafiuCVenna Phone: 9599057107
C. Explore different font types, colour and sizes.
94
ZB>, ITALIC
AND UNDERLINE
TAGS
tags are container tags. They are used to emphasise on the text.
and
BOL
Ite tag makes the text appear bolder as compared to normal text.
be
true!
</b>
Esample: makes the text appear italicised.
tag
be compassionate </i>
Example. underlines the text.
tag
sharing is caring </u>
•
Example.
on the activity names.
Emphasise
Activity Studio
ktlvlty
color••
yidth•
-center*'
text•
align
Theo
plentyto 40 after school
Activity Club has a variety of after-school •ctlvltl•s ranging
and
Please read
haking, etc.
Dance,
the
Craft"/b»:
for details
Languages,
•pacifications
Painting, Calligraphy,
Chocolate
Clay
Surtees, Swp• •ndSalads,
Saiga, Indian Folk, Hip
Acade.lcs,
and C&pvter Science,
Ma
English, French,Qr.an, etc.
Skating, Football,Chess,Cricket,
to •n'oy the activity
FIMr•
Snacks,•cc.
•cc.
thenCmt.act
(Cnn
Youwill get the output as shown:
Jiiere is plenty to after st-hoot
Fanginåfrogt•.3trt and CraftvC00king.Dance.
.ActtVitvClubhas a varrety o,'
Sports an,' •.-A.dvpn.twe. •yheatre.Tiease read am the information
aoout Ottr,afte-øshoofacttvittes.
ana specificat
below'or
Origatn(, Quilling, Cfay -art, y(ower *fakina.
btrt and Craft: 'I)rawtng. •Painttng/,C
•Maktng. etc.
Taktng. Desserts Snacks, etc.
Cooking•Chocolate 'Making, Starters. Soups
$aarwm. etc•
Dance: Bail.•t.Salsa. 'naiinn •Folk.
•ruucatiorr
you want to
gnd'R060tics.
amt ComputerScience.
etc.
Trench.
Sports and .•Adventure: Swtmminy/.
the activity
Cricket, Basketball: etc.
ru/r•then O'ttactthe touiersvied
Contact:rMn'Rahul
95
ACTIVITY 7
A. What all formatting can you do on a web page?
B. Which tag is used to show different levels of headings?
C. Can you add colour to the text on a web page? How?
RECAP
Each HTML document you create is a single web page.
HTML stands for Hyper Text Markup Language.
HTML is used for designing web pages on the World Wide Web.
In 1990, Tim Berners-Lee invented HTML.
Heading
tags are used to display the text slightly bigger and bolder than normal
body text. It has six levels of headings.
HTML tags are keywords enclosed in a pair of angular brackets, that is < and
The tag name and attributesare not case sensitive.
The
tag consists of the content and the layout of a web page.
Different attributesare: bgcolor, background, text, leftmargin, rightmargin, topmargin,
bottommargin.
The <br> tag is used to insert line breaks. It is an empty tag and does not haveany
attributes.
The
tag marks the beginning of the new paragraph in a web page.
The <hr> tag is used to insert a straight horizontal line across the web page.
CHECKLIST
Put a
to show whether you have understood the terms or need help.
Term
Tags
•Attribute
•Container tags
Empty tags
96
I got it!
I need help!
—l
ASSESS
fill in the blanks with
1,
the help of the given words.
Container
the text d cument.
Attributes
<font>
<html>
Markup
language is the style of writing and presenting the information within
tags have a beginning and an end tag to an HTML element.
2.
are keywords that provide additional information about the HTML tags.
. tag is also known as root element.
3.
4.
5. The ........C..
an HTML pa
tag is used to change the size, colour and typeface of the text on
fick (V) the correct answer.
1. Which of the following is an example of WYSIWYG editor?
a. Notepad
•X Adobe Dreamweaver
c. CoffeeCup
d. BlueFish
2. Which of the following is an example of text editor?
Notepad
Y
b. Microsoft Expression Web
c. Adobe Dreamweaver
d. MicrosoftFrontpage
3. Which tag is used to display the text slightly bigger and bolder than the normal body text
and has six levels of headings?
a. <hn>
4. Which tag is used to colour of the text of the document?
a.
<text>
5. This tag marks the beginning of the new paragraphin a web page.
c. <head>
a. <html>
@
< font >
d. <br>
StateTrue or False.
1. WYSIWYG stands for What You See Is What You Get.
2. The tag name and attributesare case sensitive
3.
is used to enter line breaks.
4.
<i> and <u> tags are emptytags.
5. <fontcolor = "blue" > will change the colour of the background to blue.
97
@
Name the HTML tag.
2.
3.
4.
5.
starts the text from a new line.
It is an empty tag that inserts line break and
in a web page.
It marks the beginning of the new paragraph
colour of text on an HTML page.
This tag helps to change the typeface, size and
the web page. It is an empty tag.
It is used to insert a straight horizontal line across
to normal text.
It makes the text appear bolder as compared
Answer the following questions.
for a page?
1. Which tag is used to enclose the entire HTML code
used in HTML.
2. Differentiate between container and empty tags
3. What is <BR> tag? How do you use it?
page?
4. How can you change the background colour of a web
attribute.
5. List the attributes of <HR> tag. Describe the use of each
APPLY
A. Create a web page on 'My Friends'. Follow the instructions:
(3 Background colour = pink; text colour = red
(3 Heading Level 1: My Friends
(3 Centre align the heading.
Describe their qualities and how you spend quality time with
(3 Bold: Name of your friends.
Insert break lines where required.
B. Create a web page on 'My Hobbies'. Follow the instructions:
Change the colour of the background.
them.
Heading Level 1: My Hobbies.
(3 Centre align the heading.
Inserta horizontal rule of green colour, size 6 and width 45%.
Describe your hobbies, change the font colour and size.
# Italicise your hobbies.
(3) Insert break lines wherever required.
C. Design a web page on 'Games I like to play'. Write a paragraph about each game in different
Ofthe
colours. Mention the rules and number of players in each game. Emphasise on the names
game. Add breaks and horizontal lines wherever required.
98
1
advertise the
web page to travel agency.
a
pesign of an upcoming
P.
not get the second
Nimisha
whydid rule? Help her find with
horizontal will show the rule.
that
tilecode
various tags that are used
the
find
screenshot and mark
inthegivenwrite about their uses.
them.Also,
add images to a web page?
you
Can
B.
be used? Discuss.
Whichtag will
HR code-htm
e
C
@ FileI DIHTMUHR%20code.htm
Horizontal Rule
The HR tag is used to insert a straight horizontal line across the webpage. It is an empty tag. By
default, the line appears shaded and the length is equal to the width of the browser window.
It has the following attributes:
size sets the thickness of the horizontal line in pixels.
x
'Brainstorm - Notepad
Eile Edit Fnrmat Yiew Help
<tltle» Earth </tltle»
align— "center"> Whatmakesup the Earth
<hr size— "12" align— "center" color— "red" width—"35%">
(font face—"Arial" size— "14" color—
<bry The Earth Is one of the eight planets that movearound the Sun.
tThreequarters of the Earth' surface Is coveredwith water.
Onequarterof the Earth's surface is coveredwith land.
by a layer of air called the atmosphere.
The Earth Is surrounded
Ln 14 Col 1
100%
Windows (CRLF)
UTF-8
EXTEND
and
Dreamweaver,a versatile web editing tool, helps you create web pages in a simple
Adobe
Adobe
1997.
in
quickway.Dreamweaver was originally developed and published by Macromedia
versions
Macromedia in 2005 and continued the development of the program. The various
purchased
CC
Dreamweaver
that have been released are CS3, CS5, CS6. The latestversion is
OfDreamweaver
(apartoftheAdobe Creative Cloud suite of applications).
You
Dreamweaver
supports many markup languages, including HTML, XML, CSS and JavaScript.
to
interface
WYSIWYG
a
need
nottypetags as in HTML and code a web page. The program provides
create
andedit web pages. The design is separate from the code.
Adobe
DreamweaverCC is a visual development tool used to create, publish and manage websites.
Ithasin-builtsupport for HTML 5, Cascading Style Sheet (CSS) and JavaScript. Therefore, you can
incorporate
a number of HTML tags while designing your website.
Ithasa Fluid Grid Layout feature. It helps to create responsive designs that automatically resize to the
resolution
of the viewing device. Thus, it is also helpful in creating content for mobiles.
99
