Working With HTML: Learning Objectives

CHAPTER6
WORKING WITH HTML
Learning Objectives:
At the end of this chapter, the students will be able to:
►
Identify the meaning and purpose of HTML tags.
►
Open up a workspace for creating new HTML documents.
►
Use a text editor to create the basic HTML structure for any web page.
►
Insert non-displayed comments into HTML files.
► Open a document within a web browser to see how it is displayed.
HTML Documents
HTML documents are plain~~(als~ known as ASCII)_files that can b_e_cregted Y$~ny
t t ~ o r (e.g. v~]_NIX ~machines; Simple Text on a Ma~!!'tosh; Notepad _QrJ a~i~or
---- -
Windows ma~hine). You can also---us~ _word-processing software
your document as "text only with line breaks".
--------------· ------- - -- -
__,
Lf you remember to save
• HTML stands for Hyper Text Markup Language.

- -·------·-
• HTML file is a text file cont(!!_~~ng small '!'arkup tags.
• The ~arkup~!~gs t~~ the Web brows~r ~o'!_to display the eage.
• HTML file must have_.htm or .html file extension.
• HTML file c~~ a simple text editor.

r------------....,..--...---7
Structure of an HTML document <html>
<head>
• Start Notepad and type HTML code <title> Tltle of page<Jtitft>
</head>
• Save the file as "myp·age.htm" or <body>
"mypage.html" contents of th
Computer Science
our Web browser. Class VIII
ty
, star
·
Ct I + O or Sele ct "Oe,gi" (or "Open pqge") ~rrl._m_af'.\d of your browser. A
preSS ~ --- - -- " 11
·- t ed -
the-
e--. HTM L file vou J. ust crea
, d'1a10,n ba.KwllLappear. S~J~cL ,lk.owse andJodat
-,--- ~. . . . .- -.:.:.J
~---
,:;,;ypage.htm" • /
in the dialog box. Click OK

select it and cli~_~_:Qp_gn" · Now you ~n_ E:~~a~ address
5 I>-
the
--
browse,:_wilLdisplgy ! b~~~ge. I r
I
, and
'
example
t ~!s y~ur browser tha.!.!,hi~ is Jhe
The ~ g i n your HTM L document is <H!ml>. This tag
ment is </Html>. This tag_ tells_Y-our
start of_grtli. 1Mk. docu 111~n t. The last tqg in your docu
b~ tbat t~j~ i~ the end of the HTM L document.
i~_ be9g er_ i,ofor m.J!!i£n. Header

The text bet~ een_the <Head> -~~9 and <{ ~ea~ !_! ~g
t gg als~_.£_ontains the~ Titl e~ nd
information is no~ isplayed in the brows~r.._Wil')__tj_9w. This
--
</Title> tag.
The te~t -~-e!_~een th~_ !Iitl~.Llflg apg _!J1e </Title> tag

is J he title Df your_rJo~_ument. The
.
title is displa_y~d in r o~ r ~!'-~ws~r Is title bar.
text that wil, be ~iSRlay~q,., i~ your

The text between th~ B09:t> and </!!ody~Ja~ is the
-
browser.
Preview:
Code:
<html>
.fl The conte nt of the body element is
<body> displa yed in your browser.
\
The content of the body elem ent is
displayed in your brow ser
</body>
r-·-'
- _.:~
</html>
I
'- ..'
ACTivrry
··, --.-- . .
l'hi L text file that includes
~k of a topic for your own web page. Now, crea te your own HTM
0 L file and reload it in your
<title> tag and a few intro duc tory sentences. save the HTM
~eb browser.
"-- g- , _ _ _ _ _ __
- - - - - - - - - - lL!!.U .
Lcompute,1
Document Tags L c11~~~
~
In creating your HTML template, you have already dealt wi th some of the most basict
in HTML. The first thing you should notice about these HTML tags Is that all tags c ag,
of ,g~(!ngle bracke.tl<J, 0 _!agJ'.la_rne, and a right ongl_!L~,ra~keL~). Thi~ Is how ~~t
recognizes tags. If you d9 not use_tb.e brackets, th~n th e We.E..~ows.er.Jv1.U_.£1ssurnt
coiiiniOnds~ .t~t thaty_Cl_l:I wa.!!!.to display- ~ye~ jf that text_1s the same as can H~:
command. A web browser would consider the following to be a tag.
r· ---,-
<HTML> v/2·1
NOTE: HTM~ !~not case s.en.~i_tiye. <title> is equi_vale~ttQi JITL~> _or. <"[[!J_E>. The World
Wide __W~b __fo~~o!'tium _(W~C) recommends lowercase .~ t ag_~ i! !_!b_~i~ HTML ..
4
--
recomme11_dation , and XHTML (the next generation HTML) demands lowercase ta
---- --~ -- ---, .. 9·s:--
Container Tags
You may have noticed that for eve_rr. tag, such as the title tag, y~u actually enter two
different HTML commands an "Onu_tag and an "Off" tag.
-----
- - .. .,. -· - . --
In HTML, tags that include both an on and an of~ tag ac_.e fgll~d-~ontaJnerJ ag. 11.}~~e tags
wrap around text in your document and perfor:_"!~o~-E:~ort of action on the text. They hold
or_contain the text between the two tags. - .......
Examples of container tags i.e. <html> ,<body> ,<title>,< head> etc.
Syntax:
~--
<!~g> text being formatted or defined <2~~>
Empty Tags
All other tags in HTML fall into O th

only an on tag there are n ne o erzcategory, called empty tags. These tags have
bT-·-l<s--- f t t I ...9.J1fl~s. The _r:lason for this is that empty ta_gs do.m~"
oc o ex . nst~ad, they ~~ing on their own. --.:.._... ~
Examples of empty tag i.e.<BR> <HR> (h .

...._ , or,zonta1rule).
-
~ - -------
l Computer Science
1 Class VIII
Code: Preview:
~
~flll1l'"' The hr tag defines a horizontal rule:
' i,odY>
£ hrtaQ defines a horizontal rule:</p>
' £p:,,Th8
£hr> This is a paragraph r
ThiS is 8 paragraph</p>
<:p>
<:hr::>
is is a paragraph </p >
<:p> Th This is a paragraph
<:hr>
' <:p >This is a paragraph</p>
<:/bOdY> This is a paragraph
1 <:/html>
HTML Elements and Attributes
An element i~ a. fundan,~ntaL ~omponent of the structure of a text doct,JJn~!}t. Some

;){al!\ples of elements are he0:_~s, tables, paragraphs, and lists. Think of it this way - You
u~eJiIML tags to_mar!< th~ el~l'_!!~!}!S of a file f.9r yol!r_b~~~- Elements ~an conta!n plain
text,otherelements,orboth.
--···· ------- -- -
Some elements m9y in~lud_e arJ attribute, whJ_ch is addi!ional informatio.n thqt_is inclltded
inside th~_st~r_!..~~9· For e~amele, you c~n speEift_!~e~ig~~erJJ:. of images (t?P, ~id~!e..: or
b~~) by inc_lµcJ.ir!g t~~_app_ro_
pr:~at~9_ttribute with the ima9..~~ n the rfJ~~Eo~e.
• HTML documents are text files m<;_1~e up of HTMl el~m~~s.
• HTML elements ar~~~-f _!!!_ed~~in_9 HTML tags.
HTML Element
Eac~ML document is contained within the <HTML> tag. If you leave ~t out, your
document will work fine today but someday it might not. The HTML tag info_!_~ the
bro '
~th~it is dealing with HTML document.
~iMk..QQc~~l'l)..E;f'.\ts are structured into two ~_ts, the HEAD and th e BODY..~ f th ese
e corrtain~d within the HTML element - this element si~ply denotes this as an HTML
docurne t
--~
- --.;...;..,,_.;,_;,,:...a......._;,~:;_.;;;__.; - --:;,; - --- -
----------- [ill
The h~ad contains _ is not generally
· about t he docu ment that
· ·inf ormat1on .
Computerscienc_
·
displayed with · TITLE · The BODY contains
· the document, such as ,ts . the
- . Class'IIh '
ocumen!.._~Qt~r,al Jo pe displayed. ~l_e.'1'ents , ,
body of the text, and is where y~u place _the d_
allowed inside the HEAD, such as TITLE, are not allowed inside th e BODY and vice Yett~.
Recall the HTML example from the previous page:

<html>
<head>
<title> Title of page</title>
</head>
<body>
This is my first homepage.
</body>
</html>
Head Element
The HEAD Jo~i~ general.lnfor:mation, or meta-information, aboutJ be document. It is

the first thing in any document, lying above the BODY and jusJ 9ft~r:..!_~e <HTML> tag,
starting the document. ~
--- --- -----
• The co~tents of the ~EAD are ~ot displayed as part of the_document text: the
di~layed material is found within the BODY.
• TITLE- The title of the document. This element is !mportant -- all documents
must have a TITLE. - - - -
.._ ___ -... . --~ -
Example:
<HTML>
<HEAD>
<TITLE> Apeejay School </TITLE>

</HEAD>
<BODY>
..... text of the document

</BODY>
</HTML>
IComputer Science
~ I Class VIII
1!f1,E e1ement . .
the
en t is spe c1f 1ed by the ~T LE _~~~-'!'e ~t, which sho uld ~~ pla fe_Qll'J
. of a do ~m the
um ent can hav e onl y_( ?ne t1t!e, which should ide nti fy
jhe ti_ t•;;TI[AD. E~ h doc
docume ntcont·ent in a genera l w~y.
-- ·
docu__m._e_ - ____
c -
co~ tai~ hyeertex1Jinks__or...sp,ecial

Tit le~ ot pa rt ~~ -~~~ do c~~ en _tJ e~ t and can not ·'
window
Of ten the titl e 1s used to label the
The mands -- ,t IJJUSt be ~1mple_ j~x t. Jist. rt
!r qe ify se q_ !o 1~!>~1 9 pl9 ce !
.~ a t;>~owse~s_his tor y £~ b~okffi;~t
~a1_ u ~~ ;~ d
s·houtd be sh ort -- les s tha n 64 cha rac ter s ,s str on gly ~recommende .
d,sp _ayf_ -. -
-- . - -
there ore
--
Example
ITL E>
<TITLE> HTML Pro jec t of class 8 </T
BODY Element
HEAD, which
Y element con tain s all the con ten t of a document, as opposed to the
The BOD wed within
rma tion abo ut the doc um ent . Various mark-up elements are allo
contains info
te hea din gs, par agr aph s, list s, hyper_!ext links, images, and so on.
th ~t o indica
Example:
as Fir st. htm l or htm.
a)Create the fjle in No t~a d and save
<HTML>
<HEAD>
ITL E>
<TITLE> BODY element in HT ML </T
</HEAD>
<BODY>
<Hl> BODY Element in HT ML </H l> HE D

Y I doc um ent , as opposed to the A ,
<p> ihe BOD e. ement contains all the con ten t of the
Which con toi . </p> .
ns information ab ou t the document
</BODY>
</HiML>
- - - - - - - - - [ f il - - - - - - - - - - - - -
-- -- -- -- -- -- -- -- -- -- -- -7 1 Computer Sciel\tt
b)Vi~wthe.web_pageu§i'}g_a_tn:.0 ~~er
f esh the web page by P_!'~~!'9. E_5 or
L Class "1I!
c) M~ke_~ecessary c~~~ges if req~_i_r:_ed cl ~
a~d re _!:__-- -·- -· ___, 0
the refresh icon
. -- "
~odings
Headings are de~ ine <!! 'i~.!!1~ <h~ h > tags. ~ - d~ f~ _Jhe lar g~.
_to .:,_-6 !_heading.
<h6> 9ef in~ t_!,~ small~! hE :~9 -
HTML automg!@lly a~ gn _eKtf_ . before and af ~ heading.
e;t_bla!'~ Im~ -
• <h1 > This is a heading</h1 >
<h2 > This is a hea ding </h2 >
Code: Preview:
_l <ht•l > .:J
... ~ <l>ody> This is hea din g 1
" '1 <hl>T bia i.a beadi ng
1</hl >
• <h2>Tbi■ 1• beadinlJ 2</ h2>
<hl>Tbi ■ i ■ baadJ.119 3</bl > Thi s is heading 2
' \ <b4>fti ■ i ■ hNd.i D9 4</h4 >
i <bS>' l'bi• i.a be&d1D9 5</h5 >
l <h~• i■ baadi.119 6</hl > Thls Is h~ading 3
.---1 <p>O n beadi ng t.aq■ oaly for bea4i119■ . This is be.ding 4
,--
• DaD • t ,... th- j u t to -■b
' OH other UCJ■
•-thi"'J bold .
... . . _ -, j
.... for that-. </p>
8. 4. 6 Paragraph Element
Paragraphs are defined with the <p> tag

<p> This is a para grap h</p >
.
-
<p> This is another para grap h</p
>
HTML au tom ~~ ad ds an ex!~a blan

k line ~ef ore a~_d after. a parggraph.
Code :
Preview :
<ht al>
<body>
This is a paragraph.
<p>'l'hia ia a par agra ph.< /p>
<p>Thia ia a par agra ph.< /p> This is a paragraph. - ~.
<p>'lhi■ i ■ a par agra ph.< \
/p>
This is a paragraph. -__J
<p>Paragrapb elea ent a are defi
ned by the p
tacJ .</p >
Paragraph elements are defined by
</body> the p tag
</ht:al>
~--------
I
i
Lirte Breaks
Computer Science
Class VIII
tag is used when_yo4 waot.. tQ~d_aJine, - - but don't want.to start a.,
The <br>
_ -- - - -- - - _,__,ew paragrapf]_.
<p>This <br> is a para<br>qraph with line breaks</p>
The <br> tag forces a line break wherev er you place it.
Code: Preview: I ,, ~ 4' .L.; .,, _
. J/~ - /
<html> To break
<t,ody>
lines
<p> ma
To breaJt<b r>lines<b r>in paragra ph
a<br:>par agraph, <br>use the br tag.
</p>
use the br tag.
<fbodY>
</html>
Comments in HTML
be
The comment tag is used to insert a comme nt io_the HTML source code. A comment will
......... ..... _ - ----- - __. - - - - .,___.,,- - ... .- -- ;...>
_,-
ou
i9no.red by. tb~J ~r.Qwser. YO~(! ~ use comme nts t ~ p ~_~o ~de, w~e .!.ex
- [<f--
wh~PJ-~ou edit the sour~e-~2_c;!e at a later date.
-
This is a comment -:-> _ _ ]
Note that you need an exclam ation p_qiJJt after the -opening bracke t, but not beto·r e the
. -- .. - --- .
--- ~-- --
(:'
closing bracke t.
Basic HTML Tags
l Tag Description
c... <html> Defines an HTML document
l- <body > Defines the document's body
e <h1> to <h6> Defines header 1 to header 6
<p> Defines a paragraph
Inserts a single line break
u
<br>
<hr> Defines a horizontal rule
<!--> Defines a comment
Attributes of Body Eleme nt
Tags can have attribu tes. Attrib utes can provide additional information about the HTML
ele,nentsonyour page. @ _______________
.,
I
I
< od > ta def in~s t~_ ~_!>ody ~l~_menJ of YQ.ijf_HIM~_~e. vttth
The t> -- y __ g_--- attribute, you ~an tel I th~ P.!:9W~er th.C!ttb~ back r
an ac;!_de~ bgcolor h Id be re'4 like this: <bodY- bgcolor="red"> - 9- OlJr,d
I
--
colorof_ypurpages ou ~ ' ----- - -- - ~ - -....;:.::~ -
Attributes a Iways co
- .:,_:. : .: -.; ----~-------=~--
me in name/value pairs like this: name="value"
. added to tti_~star_LJag_91 an HTML -~ lement

Attr,butes are a lways
----~--:...;;.--· .. _ ·
Attributes of BODY tag are as follows
a) Bgcolor
b) Background
c) Text ~
d) Leftmargin /
e) Topmargin
Backgrounds
The
',
<body> tag has two attributes where you can3pecify backgrounds The b k
. ·- - ---. . ac ground
can be a~Cfil!O}Qg_e.
Bgcolor
The bgco/or attribute s_gfs. .th~bac~gr.oundto..a.spe.cif iad color. The value of this attribute
CQ[I bea hexadecimal number, RGB value, or a color name.
You can all set the background color to black by_usingJme of the f ollo~~ statement.
<body bgcolor="#pooQOO•>
<body bgcolor=•rgb(0,0,0t'>
. <body bgcolor="black•>
Background .
. . f h"
nd attribute sets the .background to an-1mg9~. The v a ~........
Th e bac__kg!_o_u_ ~the
ihuters
!he URI: of the i~age you want to u~e. If the image is small~ctb_~m the brow~·-
•moge w,11 repeat itself until it fills the entire browser window.
.. •·
I
Computer Science
RL an be rela tive (as in the firs t line above) or absolute Class VIII
fheU ~ )
. the second t,ne above .
(oS'"
r¢c olo r
colors,_c;;add
y t~x t to m~ke i~ attra ctiv e. To cha ng~ text
Color can ~e_spfcif~e~!o_r a,:i_ ri_ame as thei r
a color number or color
the TEX!" attr ibut e to_the ~Body> tag w.1.:th eith er
--
vafues, It c~ntrols the col~!: .9(!h e page conten~~ ~~luci_i!:l~~
To create a page with a black background, whit e text

dings, body text .
- - --..:___-
, use the following code:
<BODY BGCOLOR="~ooqooq" TEX T~" F£E ~">

OR
<BODY BGCOLOR="BLACK" TEX T="W HIT E">
Margins
Leftmargin
~ pixels.
It is used to spec!fy_the_left ~~rgin_of t~~-~e!>~~
<body leftmargin = "50">
Topmargin
in pixels.
It is used to spe cify the top margin of the webpage
<body topmargin = "20">
RECAPITULATION
be crea ted using any tex t edit or.

• HT,m_ dq~umen:ti.Qce plain te>st files tha t can
• An HTML file mus t have,htm or.h tml file extension.
;.;,;;.;~ ~~~ ,;..;. .;.~. ,;.;.; ..;.- ----- -------'
• HTML is not case sensitive.
are called Container tags.
• Tags th~ ~u de b2,th _gr1 On tag and Off !ag
are called Empty tags.
• Tags ttta t have only an On ta9 but no Off tag
• HT,ML documents are stru ctur ed in two pact
s, the HEAD and the BODY.
a document, as opp_os~d t~__th_ ~EA D,
• The Body elem ent contains _all con tent s of
t. """' ·
whic fifon tain s i orm atio n abo ut the documen
-- -- -- -- -- -- -- [i ll -- -- -- -- -- -- -
l
EXERCISE c0111Pute
~~
HTML tags? ~
1. What a~e t Of the Title tag displayed?
Where ,s the tex. volved in creatin• • Ie HTML d ocument? ',),,'t,J, e--.,cJ~ 1
2. g a s,mp ,
... ~
What steps are ,n ? ·--;-~ •· ., G.~'• "
' -h
3 . >,M
· Howdoyouuseacommenttag. M , ~
\,
4· d. lay your HTML docum.ent . ma web browse r? sw..J
~~~
5 Howcanyou ,sp , ''Jo~
· tL differe nt levels of headings m HTML? ',~
6 What are ne at the end of a header tag, 1~
• L ns if you forget to put a slash · ,
7. What riappe h ?
What is the HTML tag for a pa rag rap . .
B. How did you display and view the changes m your web browse r?
9
· What is a horizontal rule <hr> tag and a <br> tag used for?
10.
Hands on Practice
Modify the HTML document that you starte d in this. chapte r. Add a few
1. . ITlore
sentences and see if you can succes sfully reload the mod1f1 ed docume nt into your web
browser.
2. Add at least three headers of differe nt levels to your own HTML document.
Use <p>, <hr>, or <br> tags to create paragr aphs or section s in your own documen
t.
3.
intolO.
4. Set Background colour as purple, text colour as white, leftma rgin and topmarg
'
'
,~ ~..._
; . . .
,.
.
1_t':·;~ ..
_,,,i ~
~
~
-- ~

Working With HTML: Learning Objectives

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Working With HTML: Learning Objectives

Uploaded by

Copyright:

Available Formats

CHAPTER6

WORKING WITH HTML

• HTML stands for Hyper Text Markup Language.

• HTML file must have_.htm or .html file extension.

• HTML file c~~ a simple text editor.

in the dialog box. Click OK

i~_ be9g er_ i,ofor m.J!!i£n. Header

The te~t -~-e!_~een th~_ !Iitl~.Llflg apg _!J1e </Title> tag

text that wil, be ~iSRlay~q,., i~ your

Examples of container tags i.e. <html> ,<body> ,<title>,< head> etc.

All other tags in HTML fall into O th

Examples of empty tag i.e.<BR> <HR> (h .

HTML Elements and Attributes

An element i~ a. fundan,~ntaL ~omponent of the structure of a text doct,JJn~!}t. Some

• HTML documents are text files m<;_1~e up of HTMl el~m~~s.

• HTML elements ar~~~-f _!!!_ed~~in_9 HTML tags.

Recall the HTML example from the previous page:

The HEAD Jo~i~ general.lnfor:mation, or meta-information, aboutJ be document. It is

<TITLE> Apeejay School </TITLE>

..... text of the document

co~ tai~ hyeertex1Jinks__or...sp,ecial

<Hl> BODY Element in HT ML </H l> HE D

Paragraphs are defined with the <p> tag

HTML au tom ~~ ad ds an ex!~a blan

<p>This <br> is a para<br>qraph with line breaks</p>

Basic HTML Tags

Attributes of Body Eleme nt

. added to tti_~star_LJag_91 an HTML -~ lement

Attributes of BODY tag are as follows

To create a page with a black background, whit e text

<BODY BGCOLOR="~ooqooq" TEX T~" F£E ~">

<body leftmargin = "50">

<body topmargin = "20">

be crea ted using any tex t edit or.

You might also like

• HTML elements ar~-f _!!!_edin_9 HTML tags.