HTML

GPGCE
DWPD(3350702)
HTML
WhatisHTML?
HTMListhe"mothertongue"ofyourbrowser.
HTMLwasinventedin1990byascientistcalledTimBernersLee.
Thepurposewastomakeiteasierforscientistsatdifferentuniversitiestogainaccesstoeach
other'sresearchdocuments.TheprojectbecameabiggersuccessthanTimBernersLeehad
everimagined.ByinventingHTMLhelaidthefoundationforthewebasweknowittoday.
HTMLisalanguage,whichmakesitpossibletopresentinformation(e.g.scientificresearch)on
theInternet.WhatyouseewhenyouviewapageontheInternetisyourbrowser's
interpretationofHTML.
BernersLeeconsideredHTMLtobeanapplicationof
SGML.
SGML(StandardGeneralized
MarkupLanguage)isastandardforhowtospecifyadocument
markup
languageortagset.
Suchaspecificationisitselfadocumenttypedefinition(DTD).SGMLisnotinitselfadocument
language,butadescriptionofhowtospecifyone.Itismetadata.
HTMLisa
markup
languagefor
describing
webdocuments(webpages).
HTMLstandsfor
H
yper
T
ext
M
arkup
L
anguage
Amarkuplanguageisasetof
markuptags
HTMLdocumentsaredescribedby
HTMLtags
EachHTMLtag
describes
differentdocumentcontent
HTMLcodeensurestheproperformattingoftextandimagessothatyour
Internetbrowser
maydisplaythemastheyareintendedtolook.WithoutHTML,abrowserwouldnotknowhow
todisplaytextas
elements
orloadimagesorotherelements.
whatdoesHTMLstandfor?
HTMLisanabbreviationof"HyperTextMarkupLanguage"whichisalreadymorethanyou
needtoknowatthisstage.However,forthesakeofgoodorder,letusexplainingreaterdetail.
Hyper
istheoppositeoflinear.Computerprogramsranlinearly:whentheprogramhad
executedoneactionitwenttothenextlineandafterthat,thenextlineandsoon.But
HTMLisdifferentyoucangowhereveryouwantandwheneveryouwant.For
example,itisnotnecessarytovisitMSN.combeforeyouvisitHTML.net.
Text
isselfexplanatory.
Markup
iswhatyoudowiththetext.Youaremarkingupthetextthesamewayyoudo
inatexteditingprogramwithheadings,bulletsandboldtextandsoon.
GPGCE
DWPD(3350702)
Language
iswhatHTMLis.ItusesmanyEnglishwords.
HTMLFiles
Every web page is actually a HTML file. Each HTML file is just a plaintext file, but with
a
.html
file extensioninsteadof.txt,andismadeupofmany
HTMLtags
as wellasthecontent
forawebpage.
A web site will often contain many html files that
link
to each other.You can editHTMLfiles
withyourfavourite
editor
.
HTMLElements
ElementsgivestructuretoaHTMLdocumentandtellsthebrowserhowyouwantyourwebsite
tobepresented.Generallyelementsconsistsofastarttag,somecontent,andanendtag.
HTMLTags
Tagsarelabelsyouusetomarkupthebeginingandendofanelement.
Alltagshavethesameformat:theybeginwithalessthansign"<"andendwithagreaterthan
sign">".
HTML tags are the hidden
keywords
within a web page that define how the browser must
formatanddisplaythecontent.
Most tags must have two parts, an opening and a closing part. For example,<html>is the
opening tag and</html>is the closing tag. Note that theclosingtag hasthe sametextasthe
openingtag, buthasanadditional forwardslash (/)character. I tend to interperetthis asthe
"end"or"close"character.
Therearesome tags thatare an exception tothisrule, andwhereaclosingtagisnotrequired.
The<img>tagforshowing
images
isoneexampleofthis.
TagAttributes
Attributesallowyoutocustomiseatag,andaredefinedwithintheopeningtag,forexample:
<imgsrc="image1.jpg">or<palign="center">...</p>
Attributesareoftenassignedavalueusingtheequalssign,suchasborder="0"orwidth="50%",
buttherearesomethatonlyneedtobedeclaredinthetaglikethis:<hrnoshade>.
Most attributes are optional for most tags, and are only used when you want to change
somethingaboutthedefaultway atagisdisplayedbythebrowser.However,sometagssuchas
2
GPGCE
DWPD(3350702)
the<img>tag has required attributes such assrcandaltwhich are needed in order for the
browsertodisplaythewebpageproperly.
WhatdoesanHTMLtaglooklike?
Eachtagiscontainedwithina
lessthan
and
greaterthan
anglebracketsandeverything
betweentheopeningandclosingtagisdisplayedoraffectedbythetag.Intheaboveexample
the
<a>
tagiscreatingalinkcalled"ComputerHope"thatispointingtothehope.htmlfile.
1.HTML<html>Tag
Description
TheHTML<html>tagisthecontainerthatcontainsallotherHTMLelementsexceptforthe
!doctypetagwhichislocatedbeforetheopening<html>tag.AllotherHTMLelementsare
nestedbetweenthe<html>and</html>tags
Syntax
<html>
</html>
Example
<!DOCTYPEhtml>
<html>
<head>
<title>HTMLhtmlTag</title>
</head>
3
GPGCE
DWPD(3350702)
<body>
<p>Actualcontentgoeshere...</p>
</body>
</html>
Thiswillproducethefollowingresult:
Actualcontentgoeshere...
2.HTML<head>Tag
Description
TheHTML<head>tagisusedforindicatingtheheadsectionoftheHTMLdocument.Tags
includedinsideheadtagsarenotdisplayedonbrowserwindow.
Syntax
<head>
</head>
Example
<html>
<head>
<title>HTMLheadTag</title>
</head>
<body>
actualcontentgoeshere
</body>
</html>
actualcontentgoeshere
The<head>tagisacontainerofvariousimportanttagslike<title>,<meta>,<link>,<base>,
<style>,<script>,and<noscript>tags.
2.1HTML<title>Tag
The
<title>
tagisrequiredinallHTMLdocumentsanditdefinesthetitleofthedocument.
The
<title>
element:definesatitleinthebrowsertoolbar.providesatitleforthepagewhenit
isaddedtofavorites..FollowingisanexampletogiveatitletoanHTMLdocument:
<html>
4
GPGCE
DWPD(3350702)
<head>
<title>HTMLTitleTagExample</title>
</head>
<body>
<p>Hello,World!</p>
</body>
</html>
Hello,World!
The<title>element:
definesatitleinthebrowsertoolbar
providesatitleforthepagewhenitisaddedtofavorites
displaysatitleforthepageinsearchengineresults
2.2HTML<style>Tag
The<style>tagisusedtodefinestyleinformationforanHTMLdocument.Insidethe<style>
elementyouspecifyhowHTMLelementsshouldrenderinabrowser.
EachHTMLdocumentcancontainmultiple<style>tags.
Example
Useofthe<style>elementinanHTMLdocument:
<html>
<head>
<style>
h1{color:red;}
p{color:blue;}
</style>
</head>
<body>
<h1>Aheading</h1>
<p>Aparagraph.</p>
</body>
</html>
2.3HTML<meta>Tag
Metadataisdata(information)aboutdata.
5
GPGCE
DWPD(3350702)
The<meta>tagprovidesmetadataabouttheHTMLdocument.Metadatawillnotbedisplayed
onthepage,butwillbemachineparsable.
Metaelementsaretypicallyusedtospecifypagedescription,keywords,authorofthe
document,lastmodified,andothermetadata.
Themetadatacanbeusedbybrowsers(howtodisplaycontentorreloadpage),searchengines
(keywords),orotherwebservices.
<html>
<head>
<metacharset="UTF8">
<metaname="description"content="FreeWebtutorials">
<metaname="keywords"content="HTML,CSS,XML,JavaScript">
<metaname="author"content="HegeRefsnes">
<metahttpequiv="refresh"content="30">
</head>
<body>
<p>Allmetainformationgoesintheheadsection...</p>
</body>
</html>
2.4HTML<link>Tag
The<link>tagdefinesalinkbetweenadocumentandanexternalresource.
The<link>tagisusedtolinktoexternalstylesheets.
<head>
<linkrel="stylesheet"type="text/css"href="theme.css">
</head>
2.5HTML<script>Tag
The<script>tagisusedtodefineaclientsidescript(JavaScript).
The<script>elementeithercontainsscriptingstatements,oritpointstoanexternalscriptfile
throughthesrcattribute.
GPGCE
DWPD(3350702)
3.HTML<body>Tag
Description
TheHTML
<body>tag
definesthemaincontentoftheHTMLdocumentorthesectionofthe
HTMLdocumentthatwillbedirectlyvisibleonyourwebpage.The<body>tagdefinesthe
document'sbody.The<body>elementcontainsallthecontentsofanHTMLdocument,suchas
text,hyperlinks,images,tables,lists,etc.TheHTML<body>tagisusedforindicatingthemain
contentsectionoftheHTMLdocument.Youmustusethiselementanditshouldbeusedjust
once.Itshouldstartimmediatelyaftertheclosing
head
tagandenddirectlybeforethe
closing
html
tag.
Syntax
<body>
</body>
Example
<html>
<head>
<title>HTMLbodyTag</title>
</head>
<body>
Bodyofthedocument...
</body>
</html>
Bodyofthedocument...
SpecificAttributes
Attribute
Value
alink
rgb(x,x,x)#xxxxxx
colorname
background
URL
Description
Deprecated
Specifiesthe
coloroftheactivelinksin
thedocument.
Deprecated
Specifiesthe
backgroundimagefile
path.
GPGCE
DWPD(3350702)
bgcolor
rgb(x,x,x)#xxxxxx
colorname
link
rgb(x,x,x)#xxxxxx
colorname
text
rgb(x,x,x)#xxxxxx
colorname
vlink
rgb(x,x,x)#xxxxxx
colorname
Deprecated
Specifiesthe
backgroundcolor.
Deprecated
Specifiesthe
colorofallthelinksinthe
document.
Deprecated
Specifiesthe
colorofthetextinthe
document.
Deprecated
Specifiesthe
colorofthevisitedlinksin
thedocument.
3.1HTML<body>alinkAttribute
Thealinkattributespecifiesthecolorofanactivelinkinadocument(alinkisactivatedwhenit
isclicked).
Syntax
<bodyalink="
color_name
|
hex_number
|
rgb_number
">
AttributeValues
Value
Description
color_name
Specifiesthelinkcolorwithacolorname(like"red")
hex_number
Specifiesthelinkcolorwithahexcode(like"#ff0000")
rgb_number
Specifiesthelinkcolorwithanrgbcode(like"rgb(255,0,0)")
Example:
<html>
<bodyalink="green">or<bodyalink="#00FF00">or<bodyalink="rgb(0,255,0)">
<p><ahref="http://www.yahoo.com">Yahoo</a></p>
<p><ahref="http://www.facebook.com">FB</a></p>
</body>
</html>
GPGCE
DWPD(3350702)
3.2HTML<body>backgroundAttribute
Thebackgroundattributespecifiesabackgroundimageforadocument.
Syntax
<bodybackground="
URL
">
Example
SpecifyabackgroundimageforanHTMLdocument:
<html>
<bodybackground="bgimage.jpg">
<h1>Helloworld!</h1>
<p><ahref="http://www.yahoo.com">YAHOO</a></p>
</body>
</html>
3.3HTML<body>bgcolorAttribute
Thebgcolorattributespecifiesthebackgroundcolorofadocument.
Syntax
<bodybgcolor="
color_name
|
hex_number
|
rgb_number
">
Example
SpecifyabackgroundcolorforanHTMLdocument:
<bodybgcolor="yellow">
3.4HTML<body>linkAttribute
Thelinkattributespecifiesthedefaultcolorofunvisitedlinksinadocument.
Syntax
<bodylink="
color_name
|
hex_number
|
rgb_number
">
Example
Setthedefaultlinkcolorto"RED"inanHTMLdocument:
<html>
<bodylink="red">
<p><ahref="http://www.google.com">Google</a></p>
9
GPGCE
DWPD(3350702)
</body>
</html>
3.5HTML<body>textAttribute
Thetextattributespecifiesthecolorofthetextinadocument.
Syntax
<bodytext="
color_name
|
hex_number
|
rgb_number
">
Example
<bodytext="green">
3.6HTML<body>vlinkAttribute
Thevlinkattributespecifiesthecolorofvisitedlinksinadocument.
Syntax
<bodyvlink="
color_name
|
hex_number
|
rgb_number
">
Example
SettheVISITEDlinkcolorto"RED"inanHTMLdocument:
<bodyvlink="red">
<p><ahref="http://www.google.com">Google</a></p>
</body>
LINK,VLINK,andALINK
Theseattributescontrolthecolorsofthedifferentlinkstates:
LINKinitialappearancedefault=Blue
VLINKvisitedlinkdefault=Purple
ALINKactivelinkbeingclickeddefault=Red
10
GPGCE
DWPD(3350702)
4.HTML<hr>Tag
Description
TheHTML<hr>tagisusedforcreatingahorizontalline.ThisisalsocalledHorizontalRulein
HTML.
Example
<body>
<p>Thistextwillbefollowedbyahorizontalline<hr/></p>
</body>
Attributes
Attribute
align
Value
Description
left
NotsupportedinHTML5.
center
Specifiesthealignmentofa<hr>element
right
noshade
noshade
Specifiesthata<hr>elementshouldrenderinone
solidcolor(noshaded),insteadofashadedcolor
size
pixels
Specifiestheheightofa<hr>element
width
pixels
Specifiesthewidthofa<hr>element
11
GPGCE
DWPD(3350702)
5.HTML<img>Tag
The<img>tagdefinesanimageinanHTMLpage.
The<img>taghastworequiredattributes:srcandalt.
Example:
<html>
<head>
<title>HTMLTag</title>
</head>
<body>
<imgsrc="http://www.html.com/images/html.gif"alt="HTMLTutorial"height="150"
width="140"/>
</body>
</html>
Attribute
align
Value
Description
top
bottom
Specifiesthealignmentofanimageaccordingto
surroundingelements
middle
left
right
alt
text
Specifiesanalternatetextforanimage
border
pixels
Specifiesthewidthoftheborderaroundanimage
height
pixels
Specifiestheheightofanimage
hspace
pixels
Specifiesthewhitespaceonleftandrightsideofan
image
12
GPGCE
DWPD(3350702)
src
URL
SpecifiestheURLofanimage
vspace
pixels
Specifiesthewhitespaceontopandbottomofan
image
width
pixels
Specifiesthewidthofanimage
6.HTML<embed>tag
The HTML <embed> tag represents a container for external application or interactive
content.Thiselementisusedformediafiles(primarilymoviefiles,suchasFlash andQuickTime
video)
Syntax
<embedsrc=>
Example
<body>
<embedsrc="/html/yourfile.mdi"width="250"height="100">
</body>
Theexampleof
embeddingthesound
usingthe
EMBEDelement
.
<embedsrc="example.wav"autostart="false"loop="3"hidden="false"volume="50"
width="180"height="40">
Example:
<body>
<p>
autostart:thesoundstartsautomatically
<br>
loop:repeatsinfinitely
<br>
hidden:thecontrolbarisnotdisplayed
</p>
<p><embedsrc="JalteDiye.mp3"autostart="true"loop="true"hidden="false"width="50"
height="50"></p>
</body>
13
GPGCE
DWPD(3350702)
7.HTML<bgsound>Tag
The HTML <bgsound> tag is used to play a soundtrack in the background. This tag is for
InternetExploreronly.
Example
<bgsoundsrc="/html/yourfile.mdi"/>
TheHTML<bgsound>tagalsosupportsfollowingadditionalattributes:
Attribute
Value
Description
loop
number
Letsyoureplayabackgroundsoundtrackacertain
numberoftimes.
src
URL
Specifiesthepathofthesoundfile.
8.HTML<blink>tag
The HTML <blink> tag is used to enclose a text to make it blink.
This tag was supported by
Netscapeandnowthisisobsolete.
Example
<body>
<blink>ThistextwillblinkinNetscapeVersion5.0</blink>
</body>
Notrecommendformodernbrowsersincluding
Chrome,Firefox,Safari,andInternetExplorer
.
9.HTML<font>
HTML
<font>
tagtoaddstyle,size,andcolortothetextonyourwebsite.
<fontsize="3"color="red">Thisissometext!</font>
<fontsize="2"color="blue">Thisissometext!</font>
14
GPGCE
DWPD(3350702)
<fontface="verdana"color="green">Thisissometext!</font>
Attribute
color
Value
Description
rgb(x,x,x)
#xxxxxx
Specifiesthecoloroftext
colorname
face
font_family
Specifiesthefontoftext
size
number
Specifiesthesizeoftext
RelativeFontSize
You can specify how many sizes larger or how many sizes smaller than the preset font size
should be. You can specify it like
<font size="+n"> or <font size="n"> You have a range
between+6to+1and1to6.
Example
<body>
<fontsize="6">Fontsize="6"</font><br/>
<fontsize="+4">Fontsize="+4"</font><br/>
<fontface="TimesNewRoman"size="5">TimesNewRoman</font><br/>
<fontface="Verdana"size="5">Verdana</font><br/>
<fontcolor="#FF00FF">Thistextisinpink</font><br/>
<fontcolor="red">Thistextisred</font>
</body>
15
GPGCE
DWPD(3350702)
10.HTML<center>Tag
The<center>tagisusedtocenteraligntext.
Example
CenteraligntextinanHTMLpage:
<center>Thistextwillbecenteraligned.</center>
11.HTML<marquee>Tag
The HTML <marquee> tag is used for scrolling piece of text or image displayed either
horizontallyacrossorverticallydownyourwebsitepagedependingonthesettings.
Syntax
<marqueeattribute_name="attribute_value"....moreattributes>
Oneormorelinesortextmessageorimage
</marquee>
Example
<body>
<marquee>Thisisbasicexampleofmarquee</marquee>
<marqueedirection="up">Thedirectionoftextwillbefrombottomtotop.</marquee>
</body>
SpecificAttributes
TheHTML<marquee>tagalsosupportsfollowingadditionalattributes:
Attribute
behavior
Value
scroll
Description
Definesthetypeofscrolling.
slide
16
GPGCE
DWPD(3350702)
alternate
bgcolor
rgb(x,x,x)
Deprecated
Definesthedirectionofscrollingthe
content.
#xxxxxx
colorname
direction
up
Definesthedirectionofscrollingthecontent.
down
left
right
height
pixelsor%
Definestheheightofmarquee.
hspace
pixels
Specifieshorizontalspacearoundthemarquee.
loop
number
Specifieshowmanytimestoloop.Thedefaultvalue
isINFINITE,whichmeansthatthemarqueeloops
endlessly.
scrolldelay
seconds
Defineshowlongtodelaybetweeneachjump.
scrollamount
number
Defineshowhowfartojump.
width
pixelsor%
Definesthewidthofmarquee.
vspace
pixels
Specifiesverticalspacearoundthemarquee.
17
GPGCE
DWPD(3350702)
11.HTML<a>Tag
Ananchor(apointinapagewherealinkcanjumpto)doesnotneedtobedefinedwiththea
tag.
The<a>tagdefinesahyperlink,whichisusedtolinkfromonepagetoanother.
Themostimportantattributeofthe<a>elementisthehrefattribute,whichindicatesthelink's
destination.
Bydefault,linkswillappearasfollowsinallbrowsers:
Anunvisitedlinkisunderlinedandblue
Avisitedlinkisunderlinedandpurple
HTMLLinksSyntax
<ahref="
url
">
linktext
</a>
href=SpecifiestheURLofthepagethelinkgoesto
Example:
<body>
<ahref="
http://www.yahoo.com
">Visityahoo.com!</a>
</body>
12.HTMLLists
HTML offers web authors three waysforspecifyinglistsof information.All lists must contain
oneormorelistelements.Listsmaycontain:
<ul>Anunorderedlist.Thiswilllistitemsusingplainbullets.
<ol>Anorderedlist.Thiswillusedifferentschemesofnumberstolistyouritems.
<dl>Adefinitionlist.Thisarrangesyouritemsinthesamewayastheyarearrangedin
adictionary.
12.1HTMLUnorderedLists
Anunorderedlistisa collection ofrelated items that have no specialorderorsequence.This
listiscreatedbyusingHTML
<ul>
tag.Eachiteminthelistismarkedwithabullet.
Example
<body>
<ul>
<li>Beetroot</li>
18
GPGCE
DWPD(3350702)
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
</body>
Thiswillproducefollowingresult:
Beetroot
Ginger
Potato
Radish
ThetypeAttribute
Youcan use
typeattributefor<ul>tag tospecifythetypeof bulletyoulike. By defaultitisa
disc.Followingarethepossibleoptions:
<ultype="square">
<ultype="disc">
<ultype="circle">
12.2HTMLOrderedLists
IfyouarerequiredtoputyouritemsinanumberedlistinsteadofbulletedthenHTMLordered
list will be used. This list is created by using
<ol> tag. The numbering starts at one and is
incrementedbyoneforeachsuccessiveorderedlistelementtaggedwith<li>.
Example
<body>
<ol>
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>
1.
2.
3.
4.
Beetroot
Ginger
Potato
Radish
19
GPGCE
DWPD(3350702)
ThetypeAttribute
Youcan use
typeattributefor<ol>tag tospecify thetypeofnumberingyoulike.Bydefaultit
isanumber.Followingarethepossibleoptions:
<oltype="1">DefaultCaseNumerals.
<oltype="I">UpperCaseNumerals.
<oltype="i">LowerCaseNumerals.
<oltype="a">LowerCaseLetters.
<oltype="A">UpperCaseLetters.
<oltype="1"start="4">Numeralsstartswith4.
<oltype="I"start="4">NumeralsstartswithIV.
<oltype="i"start="4">Numeralsstartswithiv.
<oltype="a"start="4">Lettersstartswithd.
<oltype="A"start="4">LettersstartswithD.
12.3HTMLDefinitionLists
HTML and XHTML support a list style which is called
definitionlistswhere entries arelisted
likeina dictionaryorencyclopedia.Thedefinitionlististheidealwaytopresentaglossary,list
ofterms,orothername/valuelist.
DefinitionListmakesuseoffollowingthreetags.
<dl>Definesthestartofthelist
<dt>Aterm
<dd>Termdefinition
</dl>Definestheendofthelist
Example
<body>
<dl>
<dt><b>HTML</b></dt>
<dd>ThisstandsforHyperTextMarkupLanguage</dd>
<dt><b>HTTP</b></dt>
<dd>ThisstandsforHyperTextTransferProtocol</dd>
</dl>
</body>
HTML
ThisstandsforHyperTextMarkupLanguage
20
GPGCE
DWPD(3350702)
HTTP
ThisstandsforHyperTextTransferProtocol
13.HtmlTable
Tablesaredefinedwiththe
<table>
tag.
Tablesaredividedinto
tablerows
withthe
<tr>
tag.
Tablerowsaredividedinto
tabledata
withthe
<td>
tag.
Atablerowcanalsobedividedinto
tableheadings
withthe
<th>
tag.
EXAMPLE
<table>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>March</td>
<td>$150</td>
</tr>
</table>
Attributes
Attribute
align
Value
left
Description
center
21
GPGCE
bgcolor
DWPD(3350702)
right
Specifiesthealignmentofatableaccordingto
surroundingtext
rgb(x,x,x)
#xxxxxx
Specifiesthebackgroundcolorforatable
colorname
border
1
0
cellpadding
pixels
Specifieswhetherornotthetableisbeingusedfor
layoutpurposes
Specifiesthespacebetweenthecellwallandthecell
content
cellspacing
pixels
Specifiesthespacebetweencells
width
pixels
Specifiesthewidthofatable
TableCellsthatSpanManyColumns
Tomakeacellspanmorethanonecolumn,usethe
colspan
attribute
TableCellsthatSpanManyRows
Tomakeacellspanmorethanonerow,usethe
rowspan
attribute
<html>
<head>
<title>HTMLTableBackground</title>
</head>
<body>
<tableborder="1"bordercolor="green"background="/images/test.png">
<tr>
<th>Column1</th>
22
GPGCE
DWPD(3350702)
<th>Column2</th>
<th>Column3</th>
</tr>
<tr><tdrowspan="2">Row1Cell1</td><td>Row1Cell2</td><td>Row1Cell3</td></tr>
<tr><td>Row2Cell2</td><td>Row2Cell3</td></tr>
<tr><tdcolspan="3">Row3Cell1</td></tr>
</table>
</body>
</html>
14.HTML<div>Tag
TheHTML<div>tagisusedfordefiningasectionofyourdocument.Withthedivtag,youcan
grouplargesectionsofHTMLelementstogetherandformatthemwithCSS.
The<div>tagisnothingmorethanacontainerunitthatencapsulatesotherpageelementsand
dividestheHTMLdocumentintosections.
Attritubes:
Id
=Uniquelyidentifiesthedifferentsectionsofwebpages
align
=definealignmentofthecontent
<divid=myname=mytitle=divelementalign=center>
<p>Hello,IloveDWPD</p>
</div>
style
=definestheformattingstyleforthecontent
<divstyle=border:2pxdotted;fontsize:12px>
Example:
<divid="myDiv"name="myDiv"title="ExampleDivElement"style="color:#0900C4;font:
Helvetica12pt;border:1pxsolidblack;">
<h5>Subtitle</h5>
<p>Thisparagraphwouldbeyourcontentparagraph...</p>
<p>Here'sanothercontentarticlerighthere.</p>
</div>
HTMLDivElementinAction:
23
GPGCE
DWPD(3350702)
Subtitle
Thisparagraphwouldbeyourcontentparagraph...
Here'sanothercontentarticlerighthere.
HTMLDivSubdivision:
<divid="myDiv"name="myDiv"title="ExampleDivElement"style="fontfamily:Helvetica;
fontsize:12pt;border:1pxsolidblack;">
<divid="subDiv1"name="subDiv1"title="SubdivisionDivElement"style="color:#FF0000;
border:1pxdottedblack;">
<h5>Section1</h5>
</div>
<br/>
<divid="subDiv2"name="subDiv2"title="SubdivisionDivElement"style="color:
#FF00FF;border:1pxdashedblack;">
<h5>Section2</h5>
</div>
</div>
DivsInsideofDivs:
Section1
Section2
24
GPGCE
DWPD(3350702)
CLASS&ID
1.TheidAttribute
The
idattribute ofanHTMLtagcan beusedtouniquelyidentifyanyelementwithinanHTML
page.Therearetwoprimaryreasonsthatyoumightwanttouseanidattributeonanelement:
If anelementcarriesanidattribute as aunique identifieritispossibletoidentify just
thatelementanditscontent.
IfyouhavetwoelementsofthesamenamewithinaWebpage(orstyle sheet),youcan
usetheidattributetodistinguishbetweenelementsthathavethesamename.
We willdiscussstylesheetinseparatetutorial.Fornow,let'susetheidattributetodistinguish
betweentwoparagraphelementsasshownbelow.
EXAMPLE
<pid="html">ThisparaexplainswhatisHTML</p>
<pid="css">ThisparaexplainswhatisCascadingStyleSheet</p>
2.TheClassAttribute
The
class attribute is used toassociateanelementwithastylesheet,andspecifiestheclassof
element.
IntheCSS,aclassselectorisanameprecededbya
fullstop
(.)andanIDselectorisa
nameprecededbya
hashcharacter
(#).
SotheCSSmightlooksomethinglike:
#top{
backgroundcolor:#ccc;
padding:20px
}
.intro{
color:red;
fontweight:bold;
}
25
GPGCE
DWPD(3350702)
TheHTMLreferstotheCSSbyusingtheattributesidandclass.Itcouldlooksomethinglike
this:
<divid="top">
<h1>Chocolatecurry</h1>
<pclass="intro">Thisismyrecipeformakingcurrypurelywithchocolate</p>
<pclass="intro">Mmmmmmmmmm</p>
</div>
ThedifferencebetweenanIDandaclassisthatanIDcanbeusedtoidentifyoneelement,
whereasaclasscanbeusedtoidentifymorethanone.
SpecialCharactersinHTML
Therearemanyreservedcharactersinanhtmlwhichmustbereplacedwithcharacterentity.
SpecialCharacter
Symbol
MeaningandNumber
&nbsp
putspace
nonbreakingspace

&quot
quotationmark
"
&lt
<
lessthan
<
&gt
>
greaterthan
>
&amp
&
ampersand(&)
&copy
copyright©
&sum
NARYSUMMATION∑
&prod
NARYPRODUCT∏
26

HTML

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

HTML

Enviado por

Direitos autorais:

Formatos disponíveis

GPGCE

Você também pode gostar