HyperText Markup Language

6/27/2016
HyperTextMarkupLanguage/PrintversionWikibooks,openbooksforanopenworld
HyperTextMarkupLanguage/Printversion
ThisisaguidetoHTMLthemarkuplanguageoftheWorldWideWeb.ThisbookisaboutHTML,notabouthow
tomakeitdynamic,onwhichseeJavaScript.
Contents
1 Introduction
1.1 Beforewestart
1.2 Asimpledocument
1.3 GeneralHTMLtagcodestyle
1.3.1 The<html>Tag
2 HeadandBody
2.1 TheHEADelement
2.2 TheTITLEelement
2.3 TheBODYelement
3 ParagraphsandHeadings
3.1 Paragraphs
3.2 Headings
3.3 Example
4 TextFormatting
4.1 Emphasis
4.2 Preformattedtext
4.3 SpecialCharacters
4.4 Abbreviations
4.5 DiscouragedFormatting
4.6 CascadingStyleSheets
5 Hyperlinks
5.1 Absolutevs.Relative
5.2 LinkingtoalocationwithinapagewithAnchor
5.3 TargetLinks
5.4 Specialtargets
5.5 Hyperlinksonimages
6 Images
6.1 Placement
6.2 Alternativetextandtooltip
6.3 Widthandheight
7 Lists
7.1 OrderedLists
7.2 UnorderedLists
7.3 DefinitionLists
7.4 NestedLists
7.5 Noteonformat
7.6 Example
8 Tables
8.1 Minimaltables
8.2 Captionandheadings
8.3 Borders
8.4 HeightandWidth
8.5 CellSpacingandCellPadding
https://en.wikibooks.org/wiki/HyperText_Markup_Language/Print_version
1/46
6/27/2016
8.6 Alignmentoftablecells
8.7 Rowspanandcolumnspan
8.8 Backgroundcolourandimages
8.9 Columngroups
8.10 Summary
9 Quotations
9.1 Inlinequotations
9.2 Blockquotations
10 Comments
11 Forms
11.1 FormattingwithCSS
11.1.1 TheHTML
11.1.2 TheCSS
11.2 References
12 CSS
12.1 WhatdoesCSSdo?
12.2 HowtoaddaCSSstylesheet
13 ValidatingHTML
14 ConditionalComments
14.1 Syntax
14.2 UsewithCSS
14.3 Externallinks
15 ProscribedTechniques
16 Frames
17 Layers
18 Music
19 Browsers'extensions
20 ConditionalComments
20.1 Syntax
20.2 UsewithCSS
20.3 Externallinks
21 Appendices
22 TagList
23 StandardAttributesList
23.1 Attributes
23.1.1 class
23.1.2 code
23.1.3 codebase
23.1.4 dir
23.1.5 height
23.1.6 id
23.1.7 lang
23.1.8 style
23.1.9 title
23.1.10 width
23.2 Moreattributes
23.2.1 accesskey
23.2.2 tabindex
24 Glossary
24.1 B
24.2 E
24.3 I
24.4 T
25 Links
2/46
6/27/2016
Introduction
TheHTML(HyperTextMarkupLanguage)isusedinmostpagesoftheWorldWideWeb.HTMLfilescontainboth
theprimarytextcontentandadditionalformattingmarkup,i.e.sequencesofcharactersthattellwebbrowsershow
todisplayandhandlethemaincontent.Themarkupcanspecifywhichpartsoftextshouldbebold,wherethe
headingsare,orwheretables,tablerows,andtablecellsstartandend.Thoughmostcommonlydisplayedbya
visualwebbrowser,HTMLcanalsobeusedbybrowsersthatgenerateaudioofthetext,bybraillereadersthat
convertpagestoabrailleformat,andbyaccessoryprogramssuchasemailclients.
Beforewestart
ToauthorandtestHTMLpages,youwillneedaneditorandawebbrowser.HTMLcanbeeditedinanyplaintext
editor.Ideally,useonethathighlightsHTMLmarkupwithcolorstomakeiteasiertoread.Commonplaintext
editorsincludeNotepad(orNotepad++)forMicrosoftWindows,TextEditforMac,andKate,Gedit,Vim,and
EmacsforLinux.
Manyotherseditorsexistwithawiderangeoffeatures.WhilesomeofferWYSIWYG(whatyouseeiswhatyou
get)functionality,thatmeanshidingthemarkupitselfandhavingtoautogenerateit.WYSIWYGoptionsarenever
ascleanortransparentorasusefulforlearningcomparedwithrealcodebasedtexteditors.
Topreviewyourdocuments,you'llneedawebbrowser.Toassuremostviewerswillseegoodresults,ideallyyou
willtestyourdocumentsinseveralbrowsers.Eachbrowserhasslightlydifferentrenderingandparticularquirks.
ThemostcommonbrowsersincludeMicrosoftInternetExplorer,GoogleChrome,MozillaFirefox,Safari,and
Opera.Toassurethatyourdocumentsarereadableinatextonlyenvironment,youcantestwithLynx.
Asimpledocument
Let'sstartwithasimpledocument.Writethiscodeinyoureditor(orcopyandpasteit),andsaveitas"index.html"
or"index.htm".Thefilemustbesavedwiththeexactextension,oritwillnotberenderedcorrectly.
<!DOCTYPEhtml>
<html>
<head>
<title>Simpledocument</title>
</head>
<body>
<p>Thisissometextinaparagraphthatwillbeseenbyviewers.</p>
</body>
</html>
Nowopenthedocumentinyourbrowserandlookattheresult.Fromtheaboveexample,wecandeducecertain
essentialsofanHTMLdocument:
Thefirstlinewith<!DOCTYPEhtml>declaresthetypeofthedocument.
TheHTMLdocumentbeginswitha<html>tagandendswithitscounterpart,the</html>tag.
Withinthe<html></html>tags,therearetwomainpairsoftags,<head></head>and<body></body>.
Withinthe<head></head>tags,therearethe<title></title>tagswhichenclosethetextualtitletobeshown
inthetitlebarofthewebbrowser.
Withinthe<body></body>isaparagraphmarkedbya<p></p>tagpair.
3/46
6/27/2016
GeneralHTMLtagcodestyle
Mosttagsmustbewritteninpairsbetweenwhichtheeffectsofthetagwillbeapplied.
<em>Thistextisemphasized</em>Thistextisemphasized
Thistextincludes<code>computercode</code>Thistextincludescomputercode
<em>Thistextisemphasizedandhas<code>computercode</code></em>Thistextisemphasized
andhascomputercode
HTMLtagpairsmustbealignedtoencapsulateothertagpairs,forexample:
<code><em>Thistextisbothcodeandemphasized</em></code>Thistextisbothcodeand
emphasized
Amistake:<em><code>Thismarkupiserroneous</em></code>
The<html>Tag
The<html>and</html>tagsareusedtomarkthebeginningandendofanHTMLdocument.Thistagdoesnot
haveanyeffectontheappearanceofthedocument.
ThistagisusedtomakebrowsersandotherprogramsknowthatthisisanHTMLdocument.
Usefulattributes:
dirattribute
Thisattributespecifiesinwhichmannerthebrowserwillpresenttextwithintheentiredocument.Itcanhave
valuesofeitherltr(lefttoright)orrtl(righttoleft).Bydefaultthisissettoltr.Generallyrtlisusedfor
languageslikePersian,Chinese,Hebrew,Urduetc.
Example:<htmldir="ltr">
langattribute
Thelangattributegenerallyspecifieswhichlanguageisbeingusedwithinthedocument.
Specialtypesofcodesareusedtospecifydifferentlanguages:
enEnglish
faFarsi
frFrench
deGerman
itItalian
nlDutch
elGreek
esSpanish
ptPortuguese
arArabic
heHebrew
ruRussian
zhChinese
jaJapanese
hiHindi
Example:<htmllang="en">
HeadandBody
4/46
6/27/2016
AnHTMLfileisdividedintotwobasicsections:theheadandthebody,eachdemarcatedbytheirrespectivetags.
Thus,theessentialstructureofanHTMLdocumentlookslikethis:
<!DOCTYPEhtml>
<htmllang="...">
<head>
...
</head>
<body>
...
</body>
</html>
TheHEADelement
AlldataintheheadsectionofanHTMLdocumentisconsidered"metadata",meaning"dataaboutdata".The
informationinthissectionisnotnormallydisplayeddirectly.Insteadelementssuchasstyleaffecttheappearance
ofotherelementsinthedocument.Someitemsintheheadsectionmaybeusedbyprogramssuchassearchengines
tolearnmoreaboutthepageforreferencepurposes.
Theheadelementshouldalwayscontainatitleelementwhichsetsthetitlecommonlydisplayedbytheweb
browserinthetitlebarofthewindow.Hereisanexampleoftheuseofthetitleelement:
<head>
<title>ThisistheTitle</title>
</head>
Therecanonlybeonetitleintheheadersection.
Theremaybeanynumberofthefollowingelementsinsidetheheadelement:
style
Usedtoembedstylerulesinadocument.Inmostcases,aconsistentlookacrossmultiplewebpagesis
desired,sostyleisspecifiedinaseparatestylesheetfile,linkedusingthelinkelement.Thus,styleisusedin
theheadwhenthestyleappliestothispageonly.
link
Usedtolinkthepagetovariousexternalfiles,suchasastylesheetorthelocationoftheRSSfeedforthe
page.Thetypeoflinkissetusingtherelattribute.ThetypeattributespecifiestheMIMEtypeofthe
documentfoundatthelocationgivenbythehrefattribute.ThisallowsthebrowsertoignorelinkstoMIME
typesitdoesnotsupport.Examples:
<linkrel="stylesheet"type="text/css"href="style.css">
<linkrel="alternate"type="application/rss+xml"href="rss.aspx"title="RSS2.0">
script
UsedtolinktoanexternalJavascriptfileortoembedJavascriptinthepage.Linkingtoanexternalfileisthe
preferredtechniqueinrealwebpagesthoughmanyexamplesembedthescriptforsimplicity.
meta
UsedtosetadditionalmetadatapropertiesfortheHTMLdocument,suchasrelatedkeywords,etc.
Examples:
5/46
6/27/2016
<metacharset=utf8">
<metaname="keywords"content="web,HTML,markup,hypertext">
object
Embedsagenericobject.Thiselementisnotcommonlyusedinthehead,butratherinthebodysection.
Theremayalsobeasinglebaseelement.ThiselementsetsthebaseURI(http://en.wikipedia.org/wiki/Uniform_reso
urce_identifier)forresolvingrelativeURI(http://en.wikipedia.org/wiki/Uniform_resource_identifier)s.Itisrarely
necessarytousethiselement.
TheTITLEelement
Thetitleelementcontainsyourdocumenttitleandidentifiesitscontentsinaglobalcontext.Thetitleistypically
displayedinthetitlebaratthetopofthebrowser'swindow.
Itisalsodisplayedonthebookmarklistofthebrowser.
Titleisalsousedtoidentifyyourpageforsearchengines.
Example:<html><head><title>SomeAmazingWebPage</title></head></html>
TheBODYelement
Unliketheheadelement,anyplaintextplacedbetweenthe<body>tagswillbedisplayedonthewebpagebythe
browser.
Whattoavoid.Thefollowingexampleisbadpractice:
<bodytext='black'link='red'alink='pink'vlink='blue'
bgcolor='#DDDDDD'background='wallpaper.gif'>
...
</body>
ThecurrentstandardisHTML5,andtext,link,alink,vlink,bgcolorandbackgroundattributeshaveallbeenlong
deprecated.Youmayfindtheminolderfiles,buttheyshouldnotbeusednow.Theyhavebeensupersededbythe
CSSrulesgivenbelow(usingtheserulesisdiscussedinalatersectionHyperTextMarkupLanguage/CSS).The
valuesfromthepreviousexamplehavebeenusedasexamplesintheserules.
text
body{color:black}
bgcolor
body{backgroundcolor:#DDDDDD}
background
body{backgroundimage:url(wallpaper.gif)}
link
a:link{color:red}
alink
a:active{color:pink}(anactivelinkisalinkthatisbeingclickedorhasthekeyboardfocus)
vlink
a:visited{color:blue}
hover(notanhtmlattribute)
a:hover{color:green}('hover'isthestyleofalinkwhenthemousepointerisoverit)
6/46
6/27/2016
ParagraphsandHeadings
Thebulkofatypicalwebpageoftenconsistsparagraphsstructuredwiththeuseofheadings.
Paragraphs
Thepelementisusedtosplittextintoparagraphs.
<p>Anintroductoryparagraph.</p>
<p>Anotherintroductoryparagraph.</p>
Headings
Therearesixlevelsofheadings.Themostimportantheading(s)inadocumentshouldbelevelone.Subheadings
shouldbeleveltwo.Subsubheadingsshouldbelevelthree,etc.Donotskiplevels.Ifthedefaultsizesdonotsuit
yourdocument,useCSStochangethem.Headingsshouldbeusedtoeffectivelyoutlineyourcontent.Bydoingso,
userscanfindinformationmorequickly,andsomesearchenginesuseheadingstohelprankpagecontent.
<h1>ThisisLevel1</h1>
ThisisLevel1
ThisisLevel3
ThisisLevel5
Example
Thisexamplewillbeusedinthenextsectionwhereweseehowtochangetheappearanceofadocument.
<!DOCTYPEhtml>
<htmllang="en">
<head>
<title>Sundial</title>
</head>
<body>
<h1>Sundial</h1>
<p>FromWikipedia,thefreeencyclopedia.</p>
<p>Asundialmeasurestimebythepositionofthesun.Themostcommonlyseendesigns,suchasthe
'ordinary'orstandardgardensundial,castashadowonaflatsurfacemarkedwiththehoursof
7/46
6/27/2016
theday.Asthepositionofthesunchanges,thetimeindicatedbytheshadowchanges.However,
sundialscanbedesignedforanysurfacewhereafixedobjectcastsapredictableshadow.
</p>
<p>Mostsundialdesignsindicateapparentsolartime.Minordesignvariationscanmeasurestandard
anddaylightsavingtime,aswell.
</p>
<h2>History</h2>
<p>Sundialsintheformofobelisks(3500BC)andshadowclocks(1500BC)areknownfromancient
Egypt,andweredevelopedfurtherbyothercultures,includingtheChinese,Greek,andRoman
cultures.AtypeofsundialwithoutgnomonisdescribedintheoldOldTestament
(Isaiah38:2).
</p>
<p>ThemathematicianandastronomerTheodosiusofBithynia(ca.160BCca.100BC)issaidtohave
inventedauniversalsundialthatcouldbeusedanywhereonEarth.TheFrenchastronomerOronce
Finconstructedasundialofivoryin1524.TheItalianastronomerGiovanniPadovanipublished
atreatiseonthesundialin1570,inwhichheincludedinstructionsforthemanufactureand
layingoutofmural(vertical)andhorizontalsundials.GiuseppeBiancani'sConstructio
instrumentiadhorologiasolariadiscusseshowtomakeaperfectsundial,withaccompanying
illustrations.
</p>
<h3>Installationofstandardsundials</h3>
<p>Manyornamentalsundialsaredesignedtobeusedat45degreesnorth.Bytiltingsucha
sundial,itmaybeinstalledsothatitwillkeeptime.However,somemassproducedgarden
sundialsareinaccuratebecauseofpoordesignandcannotbecorrected.Asundialdesignedfor
onelatitudecanbeadjustedforuseatanotherlatitudebytiltingitsbasesothatitsstyle
orgnomonisparalleltotheEarth'saxisofrotation,sothatitpointsatthenorthcelestial
poleinthenorthernhemisphere,orthesouthcelestialpoleinthesouthernhemisphere.
</p>
<p>Alocalstandardtimezoneisnominally15degreeswide,butmaybemodifiedtofollow
geographicandpoliticalboundaries.Asundialcanberotatedarounditsstyleorgnomon(which
mustremainpointedatthecelestialpole)toadjusttothelocaltimezone.Inmostcases,a
rotationintherangeof7.5degreeseastto23degreeswestsuffices.
</p>
<p>Tocorrectfordaylightsavingtime,afaceneedstwosetsofnumeralsoracorrectiontable.
Aninformalstandardistohavenumeralsinhotcolorsforsummer,andincoolcolorsfor
winter.Rotatingthesundialwillnotworkwellbecausemostsundialsdonothaveequalhour
angles.
</p>
<p>Ordinarysundialsdonotcorrectapparentsolartimetoclocktime.Thereisa15minute
variationthroughtheyear,knownastheequationoftime,becausetheEarth'sorbitis
slightlyellipticalanditsaxisistiltedrelativetotheplaneofitsorbit.Aquality
sundialwillincludeapermanentlymountedtableorgraphgivingthiscorrectionforatleast
eachmonthoftheyear.Somemorecomplexsundialshavecurvedhourlines,curvedgnomonsor
otherarrangementstodirectlydisplaytheclocktime.
</p>
</body>
</html>
TextFormatting
TheTextFormattingelementsgivelogicalstructuretophrasesinyourHTMLdocument.Thisstructureis
normallypresentedtotheuserbychangingtheappearanceofthetext.
WehaveseenintheIntroductiontothisbookhowwecanemphasizetextbyusing<em></em>tags.Graphical
browsersnormallypresentemphasizedtextinitalics.SomeScreenreaders,utilitieswhichreadthepagetotheuser,
mayspeakemphasizedwordswithadifferentinflection.
Acommonmistakeistotaganelementtogetacertainappearanceinsteadoftaggingitsmeaning.Thisissue
becomesclearerwhentestinginmultiplebrowsers,especiallywithgraphicalandtextonlybrowsersaswellas
screenreaders.
YoucanchangethedefaultpresentationforanyelementusingCascadingStyleSheets.Forexample,ifyouwanted
allemphasizedtexttoappearinrednormaltextyouwouldusethefollowingCSSrule:
8/46
6/27/2016
em{fontstyle:normal;color:red;}
Inthissection,wewillexploreafewbasicwaysinwhichyoucanmarkupthelogicalstructureofyourdocument.
Emphasis
HTMLhaselementsfortwodegreesofemphasis:
Theemelementforemphasizedtext,usuallyrenderedinitalics.
Thestrongelementforstronglyemphasizedtext,usuallyrenderedinbold.
Anexampleofemphasizedtext:
Itisessentialnotonlytoguessbutactually<em>observe</em>theresults.
Anexamplerendering:
Itisessentialnotonlytoguessbutactuallyobservetheresults.
Anexampleofstronglyemphasizedtext:
Letusnowfocuson<strong>structuralmarkup</strong>.
Anexamplerendering:
Letusnowfocusonstructuralmarkup.
Preformattedtext
Preformattedtextisrenderedusingfixedwidthfont,andwithoutcondensingmultiplespacesintoone,whichresults
inpreservedspacing.Newlinesarerenderedasnewlines,unlikeoutsidepreformattedtext.HTMLmarkupinthe
preformattedtextisstillinterpretedbybrowsersthough,meaningthat"<em>a</em>"willstillberenderedas"a".
Tocreatepreformattedtext,startitwith<pre>andenditwith</pre>.
Anexample:
<pre>
,,
|No.|Person|
||
|1.|BillNewton|
|2.|MagaretClapton|
''
</pre>
Theresultingrendering:
,,
|No.|Person|
9/46
6/27/2016
||
|1.|BillNewton|
|2.|MagaretClapton|
''
Omittingthepreformattingtagswillcausethesametexttoappearallinoneline:
,,|No.|Person||||1.|BillNewton||2.|MagaretClapton|'
'
SpecialCharacters
ToinsertnonstandardcharactersorcharactersthatholdspecialmeaninginHTML,acharacterreferenceis
required.Forexample,toinputtheampersand,"&","&amp"mustbetyped.Characterscanalsobeinsertedby
theirASCIIorUnicodenumbercode.
10/46
6/27/2016
NameCode
Number
Glyph
Code
Description
&acute
&#180
acuteaccent
&amp
&#38
&
ampersand
doublelow9quote
&bdquo
&brvbaror
&brkbar
&#166
brokenverticalbar
&cedil
&#184
cedilla
&cent
&#162
centsign
blackclubsuit
copyright
generalcurrency
sign
&dagger
dagger
&Dagger
doubledagger
&darr
downwardarrow
degreesign
blackdiamondsuit
&clubs
&copy
&curren
&deg
&#169
&#164
&#176
&diams
Name
Code
Number
Glyph
Code
Description
&Agrave &#192
uppercaseA,grave
accent
&Aacute
&#193
uppercaseA,acute
accent
&Acirc
&#194
uppercaseA,
circumflexaccent
&Atilde
&#195
uppercaseA,tilde
&Auml
&#196
uppercaseA,umlaut
&Aring
&#197
uppercaseA,ring
&AElig
&#198
uppercaseAE
&Ccedil
&#199
uppercaseC,cedilla
&Egrave
&#200
uppercaseE,grave
accent
&Eacute
&#201
uppercaseE,acute
accent
&Ecirc
&#202
uppercaseE,
circumflexaccent
&divide
&#247
divisionsign
&Euml
&#203
uppercaseE,umlaut
&frac12
&#189
onehalf
&Igrave
&#204
&frac14
&#188
onefourth
uppercaseI,grave
accent
&frac34
&#190
threefourths
&Iacute
&#205
&frasl
&#47
slash
uppercaseI,acute
accent
&gt
&#62
>
greaterthansign
&Icirc
&#206
uppercaseI,
circumflexaccent
blackheartsuit
&Iuml
&#207
uppercaseI,umlaut
&ETH
&#208
uppercaseEth,
Icelandic
&Ntilde
&#209
uppercaseN,tilde
&Ograve &#210
uppercaseO,grave
accent
&Oacute
&#211
uppercaseO,acute
accent
&hearts
&iexcl
&#161
inverted
exclamation
&iquest
&#191
invertedquestion
mark
&laquo
&#171
leftanglequote
&larr
leftwardarrow
&ldquo
leftdoublequote
&lsaquo
singleleftpointing
anglequote
&Ocirc
&#212
uppercaseO,
circumflexaccent
&lsquo
leftsinglequote
&Otilde
&#213
uppercaseO,tilde
&Ouml
&#214
uppercaseO,umlaut
&Oslash
&#216
uppercaseO,slash
&Ugrave &#217
uppercaseU,grave
accent
&Uacute
&#218
uppercaseU,acute
accent
&Ucirc
&#219
uppercaseU,
&lt
&#60
<
lessthansign
&macror
&hibar
&#175
macronaccent
&mdash
&#151
emdash
&micro
&#181
microsign
&middot
&#183
middledot
11/46
6/27/2016
&nbsp
&#160
nonbreakingspace
(invisible)
&ndash
&#150
endash
&not
&#172
notsign
overline,=spacing
overscore
&oline
&ordf
&#170
feminineordinal
&ordm
&#186
masculineordinal
&para
&#182
paragraphsign
permillsign
&permil
&plusmn
&#177
plusorminus
&pound
&#163
poundsterling
circumflexaccent
&Uuml
&#220
uppercaseU,umlaut
&Yacute
&#221
uppercaseY,acute
accent
&THORN &#222
uppercaseTHORN,
Icelandic
&szlig
&#223
lowercasesharps,
German
&agrave
&#224
lowercasea,grave
accent
&aacute
&#225
lowercasea,acute
accent
&acirc
&#226
lowercasea,
circumflexaccent
&quot
&#34
"
doublequotation
mark
&atilde
&#227
lowercasea,tilde
&raquo
&#187
rightanglequote
&auml
&#228
lowercasea,umlaut
&rarr
rightwardarrow
&aring
&#229
lowercasea,ring
&rdquo
rightdoublequote
&aelig
&#230
lowercaseae
registered
trademark
&ccedil
&#231
lowercasec,cedilla
&egrave
&#232
singleright
pointingangle
quote
lowercasee,grave
accent
&eacute
&#233
lowercasee,acute
accent
&reg
&#174
&rsaquo
&rsquo
rightsinglequote
&sbquo
singlelow9quote
&ecirc
&#234
lowercasee,
circumflexaccent
sectionsign
&euml
&#235
lowercasee,umlaut
&igrave
&#236
lowercasei,grave
accent
&iacute
&#237
lowercasei,acute
accent
&sect
&#167
&shy
&#173
&spades
softhyphen
blackspadesuit
&sup1
&#185
superscriptone
&sup2
&#178
superscripttwo
&sup3
&#179
superscriptthree
&icirc
&#238
&times
&#215
multiplicationsign
lowercasei,
circumflexaccent
&trade
trademarksign
&iuml
&#239
lowercasei,umlaut
&uarr
upwardarrow
&eth
&#240
lowercaseeth,
Icelandic
&umlor
&die
&#168
umlaut
&ntilde
&#241
lowercasen,tilde
&yen
&#165
yensign
&ograve
&#242
lowercaseo,grave
accent
&oacute
&#243
lowercaseo,acute
accent
&ocirc
&#244
lowercaseo,
circumflexaccent
&otilde
&#245
lowercaseo,tilde
&ouml
&#246
lowercaseo,umlaut
12/46
6/27/2016
&oslash
&#248
lowercaseo,slash
&ugrave
&#249
lowercaseu,grave
accent
&uacute
&#250
lowercaseu,acute
accent
&ucirc
&#251
lowercaseu,
circumflexaccent
&uuml
&#252
lowercaseu,umlaut
&yacute
&#253
lowercasey,acute
accent
&thorn
&#254
lowercasethorn,
Icelandic
&yuml
&#255
lowercasey,umlaut
Abbreviations
Anotherusefulelementisabbr.Thiscanbeusedtoprovideadefinitionforanabbreviation,e.g.
<abbrtitle="HyperTextMarkupLanguage">HTML</abbr>
Willbedisplayedas:HTML
WhenyouwillhoveroverHTML,youseeHyperTextMarkupLanguage
Graphicalbrowsersoftenshowabbreviationswithadottedunderline.Thetitleappearsasatooltip.Screenreaders
mayreadthetitleattheuser'srequest.
Note:veryoldbrowsers(InternetExplorerversion6andlower)donotsupportabbr.Becausetheysupportthe
relatedelementacronym,thatelementhasbeencommonlyusedforallabbreviations.
Anacronymisaspecialabbreviationinwhichlettersfromseveralwordsarepronouncedtoformanewword(e.g.
radarRadioDetectionAndRanging).ThelettersinHTMLarepronouncedseparately,technicallymakingita
differentsortofabbreviationknownasaninitialism.
DiscouragedFormatting
HTMLsupportsvariousformattingelementswhoseuseisdiscouragedinfavoroftheuseofcascadingstylesheets
(CSS).Here'sashortoverviewofthediscouragedformatting,sothatyouknowwhatitiswhenyouseeitinsome
webpage,andknowhowtoreplaceitwithCSSformatting.Someofthediscouragedelementsaremerely
discouraged,othersaredeprecatedinaddition.
13/46
6/27/2016
Element
Effect
Example
Status
CSSAlternative
boldface
bold
fontweight:bold
italics
italics
fontstyle:italics
underlined
underlined
tt
typewriter
face
typewriterface
strikethrough strikethrough
deprecated
textdecoration:line
through
strikethrough
strikethrough <strikethrough>strikethrough</strikethrough> deprecated
textdecoration:line
through
big
bigfont
big
fontsize:larger
small
smallfont
small
fontsize:smaller
font
fontsize
size=1
center
centera
block
deprecated
textdecoration:
underline
fontfamily:
monospace
deprecated fontsize:(value)
deprecated <divalign="center">
CascadingStyleSheets
Theuseofstyleelementssuchas<b>forboldor<i>foritalicisstraightforward,butitcouplesthepresentation
layerwiththecontentlayer.ByusingCascadingStyleSheets,theHTMLauthorcandecouplethesetwodistinctly
differentpartssothataproperlymarkedupdocumentmayberenderedinvariouswayswhilethedocumentitself
remainsunchanged.Forexample,ifthepublisherwouldliketochangecitedreferencesinadocumenttoappearas
boldtextastheywerepreviouslyitalic,theysimplyneedtoupdatethestylesheetandnotgothrougheach
documentchanging<b>to<i>andviceversa.CascadingStyleSheetsalsoallowthereadertomakethesechoices,
overridingthoseofthepublisher.
Continuingwiththeaboveexample,let'ssaythatthepublisherhascorrectlymarkedupalltheirdocumentsby
surroundreferencestocitedmaterial(suchasthenameofabook)inthedocumentswiththe<cite>tag:
<cite>TheGreatGatsby</cite>
Thentomakeallcitedreferencesbold,onewouldputsomethinglikethefollowinginthestylesheet:
cite{fontweight:bold;}
Latersomeonetellsyouthatreferencesreallyneedtobeitalic.BeforeCSS,youwouldhavetohuntthroughall
yourdocuments,changingthe<b>and</b>to<i>and</i>(butbeingcareful*not*tochangewordsthatarein
boldthatarenotcitedreferences).
ButwithCSS,it'sassimpleaschangingonelineinthestylesheetto
cite{fontstyle:italic;}
14/46
6/27/2016
Hyperlinks
Hyperlinksarethebasisofnavigationoftheinternet.Theyareusedformovingaroundamongsectionsofthesame
page,fordownloadingfiles,andforjumpingtopagesonotherwebservers.Letusstartwithaquickexample:
Tolearnmore,see<ahref="http://en.wikipedia.org/wiki/Main_Page">Wikipedia</a>.
Willbedisplayedas:Tolearnmore,seeWikipedia.
Absolutevs.Relative
Beforewegetintocreatingahyperlink(or"link"forshort),weneedtodiscussthedifferencebetweenanAbsolute
URLandaRelativeURL.First,theAbsoluteURLcanbeusedtodirectthebrowsertoanylocation.Forexample,
anabsoluteURLmightbe:
https://en.wikibooks.org/
However,whenthereisaneedtocreatelinkstomultipleobjectsinthesamedirectorytreeasthewebpage,itisa
tiringproceduretorepeatedlytypeouttheentireURLofeachobjectbeinglinkedto.Italsorequiressubstantial
workshouldthewebpagemovetoanewlocation.ThisiswhereRelativeURL'scomein.Theypointtoapath
relativetothecurrentdirectoryofthewebpage.Forexample:
home.html
./home.html
../home.html
ThisisarelativeURLpointingtoaHTMLfilecalledhome.htmlwhichresidesinthesamedirectory(folder)asthe
currentwebpagecontainingthelink.Likewise:
images/top_banner.jpg
ThisisanotherrelativeURLpointingtoasubdirectorycalledimageswhichcontainsanimagefilecalled
"top_banner.jpg".
LinkingtoalocationwithinapagewithAnchor
Sometimesspecifyingalinktoapageisn'tenough.Youmightwanttolinktoaspecificplacewithinadocument.
Thebookanalogueofreferencesofthistypewouldbesaying"Thirdparagraphonpage32"asopposedtojust
saying"page32".Let'ssaythatyouwantalinkfromdocumenta.htmltoaspecificlocationinadocumentb.html.
Thenyoustartbygivinganidtotheaparticularparagraphinb.html.Thisisdonebyadding<pid="some_name">
(wheresome_nameisastringofyourchoice)astheparagraphtaginb.html.Nowthatlocationcanbereferencedto
with<ahref="b.html#some_name">fromdocumenta.html.
TargetLinks
Nowwearereadytocreateahyperlink.Hereisthebasicsyntax:
15/46
6/27/2016
<ahref="URLlocation"target="target">Alias</a>;
Intheabovesyntax,"URLlocation"iseithertheabsoluteorrelativepathoftheobjectbeinglinkedto."target"isan
optionalattributewhichspecifieswheretheobjectbeinglinkedtoistobeopened/displayed.Forexample:
<ahref="http://www.google.co.za"target=0>GoogleSearchEngine</a>
TheaboveexampleusesanAbsoluteURLofhttp://www.google.co.za,andspecifiesatargetof"0"(whichwould
causetheURLtobeopenedinanewbrowserwindow).
Specialtargets
_blank
Anewblankwindowisopenedtoloadthelinkeddocumentinto.Thelocationintheaddressbar(ifshownin
thenewwindow)givesthehyperlinklocationofthenewresourcerequestedbytheuser'sclickingonthe
hyperlink.
_self
Thecurrentframethatcontainsthedocumentandthelinktobeclickedonisusedtoloadthelinked
documentifthelinkispartofadocumentthatoccupiesawholewindowthenthenewdocumentisloaded
intothewholewindow,butinthecaseofaframe,thelinkeddocumentisloadedintothecurrentframe.The
locationwon'tbeshownintheaddressbarunlessthelinkeddocumentwasloadedintothemainwindowas
opposedtoachildframeofaframeset.
_parent
Thelinkeddocumentisloadedintotheparentframeoftheonecontainingthelinktobeclickedonthisis
onlyimportantinnestedframesets.IfwindowWcontainsframesetFconsistingofachildframeAandalsoa
childframeBthatisitselfaframesetFFwith"grandchildren"framesCandD(givingusWindowWwith
threevisiblepanesA,CandD),thenclickingahyperlinkinthepageinframeDwithatarget=_parentwill
loadthelinkeddocumentintoD'sparentframe,thatis,intoframeB,soreplacingframesetFFthatwas
previouslydefinedasthecontentofframeB.DocumentsCandDthatweretheframesofthisframesetFFin
BwillbeentirelyreplacedandthiswillleaveonlyframeAandthenewdocumentfromthehyperlinkleftin
frameB,allinsidethemainframesetFinwindowW.Thelocationisonlyshownintheaddressbarofthe
windowiftheparentframehappenedtobethewindowitself.
_top
Thelinkeddocumentisloadedintothewindow,replacingallfilescurrentlydisplayedinthewindowin
whateverframestheymaybefoundin.Thelocationatthetopofthewindow,intheaddress/locationbaris
seentopointtothelinkeddocumentoncethehyperlinkisclicked.
Hyperlinksonimages
Anexample:
<ahref="http://en.wikipedia.org/wiki/HTML">
<imgsrc="http://commons.wikimedia.org/wiki/Image:Htmlsourcecode2.png"></a>
Examplerendering:
16/46
6/27/2016
Asyoucansee,placinghyperlinksonimagesisincompleteanalogytoplacingthemontext.Insteadofputtingtext
insidetheaelement,youplacethereanimage.
Images
Letusstartwithaquickminimumexample:
<imgsrc="turtlenecksweater.jpeg"/>
Andletusalsohavealookatmoreextendedexample:
<imgsrc="turtlenecksweater.jpeg"alt="PhotographofaTurtleneckSweater"
title="PhotographofaTurtleneckSweater"/>
Imagesarenormallystoredinexternalfiles.ToplaceanimageintoanHTMLsource,usetheimgtagwiththesrc
attributecontainingtheURLoftheimagefile.Tosupportbrowsersthatcannotrenderimages,youcanprovidethe
altattributewithatextualdescriptionoftheimage.Toprovideatooltiptotheimage,usethetitleattribute.
Thespacebeforethe/>intheexamplesisthereonpurpose.Someolderbrowsersbehavestrangelyifthespaceis
omitted.
Placement
Perdefault,imagesareplacedinlinetotheirsurroundings.Toplacetheimageasablockorfloatinstead,youcan
useCascadingStyleSheets.
17/46
6/27/2016
Alternativetextandtooltip
TheHTMLspecificationrequiresthatallimageshaveanaltattribute.Thisiscommonlyknownasalttext.Images
canbesplitintotwocategories:
thosethataddtothecontentofthepage
thosethatarepurelydecorative,e.g.spacers,fancybordersandbullets.
Decorativeimagesshouldhaveemptyalttext,i.e.alt="".Imagesusedasbulletsmayuseanasterisk,alt="*".
Allotherimagesshouldhavemeaningfulalttext.Alttextisnotadescriptionoftheimage,usethetitleattribute
forshortdescriptions.Alttextissomethingthatwillbereadinsteadoftheimage.Forexample,
<imgsrc="company_logo.gif"alt="???">makesthebestwidgetsintheworld.
Thealttextshouldbethecompany'snamenottheeverpopular'Ourlogo',whichwouldgivethesentence'Ourlogo
makesthebestwidgetsintheworld.'whenreadinatextonlybrowser.
Thealtattributestandsforalternatewhichnongraphiccapablebrowsers(suchasLynx)mayusetobetterenable
itsusertounderstandthepurposeoftheimage.Someolderbrowsersincorrectlyusethealtattribute'tagtoproduce
imagetooltips.However,thetitleattributeshouldactuallybeusedforthis.
Widthandheight
Tohaveanimageappearsmallerthanitisintheexternalfile,usetheattributeswidthandheight.Whenonlyoneor
theotherisspecified,imageswillscaletokeepthesameoverallratio.
Lists
InHTML,therearethreekindsoflists,eachappropriateforadifferentkindofinformation.Anunorderedlistmade
with<ul>and</ul>tagsismeantforelementsthathavenoorderortheorderisunimportant(typicallyshownwith
bullets).Anorderedlistcreatedusingthe<ol>and</ol>tagsistypicallyshownwithnumbersandisusedfor
elementswhoseordermatterssuchasasequenceofstepstoperform.Finally,therearedefinitionslists,createdwith
<dl>and</dl>tags.
OrderedLists
Orderedlistsprovidealistofitems,eachofwhichareprecededbyanincrementalnumberstartingfrom1.
SampleHTML:
<ol>
<li>Firstitem</li>
<li>Seconditem</li>
<li>Thirditem</li>
</ol>
Examplerendering:
18/46
6/27/2016
1.Firstitem
2.Seconditem
3.Thirditem
UnorderedLists
Unorderedlistsdisplayalistofitems,eachofwhichisprefixedbyabullet.
SampleHTML:
<ul>
<li>Firstitem</li>
<li>Seconditem</li>
<li>Thirditem</li>
</ul>
Examplerendering:
Firstitem
Seconditem
Thirditem
DefinitionLists
Definitionlistsdisplayalistofboldedterms,followedbythedefinitiononanewlineandprefixedbyatab(by
default).
SampleHTML:
<dl>
<dt>Term1</dt>
<dd>DefinitionofTerm1</dd>
<dt>Term2</dt>
</dl>
Examplerendering:
Term1
DefinitionofTerm1
Term2
DefinitionofTerm2
Iftwotermssharethesamedefinitiontheycanbegroupedtogetherlikeso:
<dl>
19/46
6/27/2016
<dt>CascadingStyleSheets</dt>
<dt>CSS</dt>
<dd>DefinitionofCascadingStyleSheets(akaCSS)</dd>
<dt>Term2</dt>
</dl>
Examplerendering:
CascadingStyleSheets
CSS
DefinitionofCascadingStyleSheets(akaCSS)
Term2
DefinitionofTerm2
Ifatermhastwoalternativedefinitionsuseaseparateddelementforeachdefinition,e.g.
<dl>
<dt>Mouse</dt>
<dd>Smallmammal</dd>
<dd>Inputdeviceforacomputer</dd>
</dl>
Examplerendering:
Mouse
Smallmammal
Inputdeviceforacomputer
Longerdefinitionscanbebrokenupintoparagraphsbynestingpelementswithintheddelement.
<dl>
<dt>Term2</dt>
<dd>
<p>Firstparagraphofthedefinition.</p>
<p>Secondparagraphofthedefinition.</p>
</dd>
</dl>
Examplerendering:
Term2
Firstparagraphofthedefinition.
Secondparagraphofthedefinition.
NestedLists
20/46
6/27/2016
Listscanbenested.Anexample:
<ul>
<li>Lists
<ul>
<li>NumberedLists</li>
<li>UnnumberedLists</li>
</ul>
</li>
</ul>
Examplerendering:
Lists
NumberedLists
UnnumberedLists
Whennesting,nestedlistelementsshouldbewithinaparentlistitemelement.
Anexampleofincorrectnesting:
<ul>
<li>Lists</li>
<ul>
<li>NumberedLists</li>
<li>UnnumberedLists</li>
</ul>
</ul>
Afurtherexampleofincorrectnesting,withtwoconsecutiveULelements:
<ul>
<li>
Outerlistitem
<ul>
<ul>
<li>
InnerlistitemwithintwoconsecutiveULelements
</li>
</ul>
</ul>
</li>
</ul>
Noteonformat
TheabovedescriptionsofeachofthethreelisttypesrefertothedefaultrenderingofthecorrespondingHTMLcode
bythewebbrowser.However,byusingCSS,youareabletochangetheformattingofthelists.Forexample,with
CSSyouareabletomakethelistshorizontalasopposedtothevertical.
Example
Anexampleofusingliststomarkuparecipeforpancakes.
21/46
6/27/2016
<!DOCTYPEhtml>
<htmllang="en">
<head>
<title>Pancakes</title>
</head>
<body>
<h1>ARecipeforPancakes</h1>
<p>From<ahref="http://en.wikibooks.org/wiki/Cookbook:Pancake">WikibooksCookbook</a>.</p>
<p>Thesepancakesmakeagoodbreakfastforafamily.
Theygowellwithrealmaplesyrup.
Theyarehealthytoo(aslongasyoudon'toverdothesyrup)
sincewholewheatflourcontributestoyourfiberintake.
</p>
<h2>Ingredients</h2>
<ul>
<li>1cupwholewheatflour</li>
<li>1tablespooncommongranulatedsugar</li>
<li>2teaspoonsbakingpowder</li>
<li>1/4teaspoonsalt</li>
<li>1egg</li>
<li>1cupmilk</li>
<li>2tablespoonsoil</li>
<li>additionaloilforfrying</li>
</ul>
<h2>Procedure</h2>
<ol>
<li>Oilafryingpan.</li>
<li>Mixthedryingredientsinonebowl.</li>
<li>Inanotherbowl,scrambletheegg,thenaddtheotherwetingredients.
Thisincludesthe2tablespoonsofoil.</li>
<li>Mixthedryandwetingredientstogether,
wellenoughtoeliminatedryspotsbutnomore.</li>
<li>Heatthefryingpantomediumtemperature.
Thepanishotenoughwhenadropofwaterdancesaround
ratherthansimplyboilingaway.</li>
<li>Pourapancake,about4inchesindiameterusingabouta1/4cupofbatter.</li>
<li>Thepancakewillbubble.Whenthebubblingsettlesdownand
theedgesareslightlydry,flipthepancake.</li>
<li>Whenthepancakelooksdone,removeitandstartanotherone.</li>
</ol>
<h2>Toppings</h2>
<p>Traditionally,pancakesaretoppedwithbutterandmaplesyrup.
Othertoppingscanincludestrawberries,applesauce,cinnamon,orsugar.
</p>
</body>
</html>
Tables
Tablesareusedforpresentingtabulardataandabusedforlayingoutpages.Theycanbeinsertedanywhereonthe
page,evenwithinothertables.Wewillbelookingatcreatingabasictableandthenaddinglotsoftagstoitsowe
canseejustwhattheoutcomewillbe.Experimentationisthenameofthegamehere.Thetagsmostusefulwhen
creatingtablesare<table>table,<tr>tablerow,<td>tabledata,and<th>tableheading.
Minimaltables
Firstletushavealookatquickexample:
<table>
<tr><th>Food</th><th>Price</th></tr>
<tr><td>Bread</td><td>$2.99</td></tr>
<tr><td>Milk</td><td>$1.40</td></tr>
22/46
6/27/2016
</table>
Everytablebeginswitha<table>tagandendswitha</table>tag.Inthetabletag,youcandefinetheattributesof
thetable,asyouwillseelater.
Thetablecontainsrows,eachbeginswiththe<tr>tablerowtagandoptionallyendswiththe</tr>tag.Rowsmust
beinsidetables.
Therowscontaincells,eachbeginswiththe<td>tabledatatagandoptionallyendswiththe</td>tag.Cellsmust
beinsiderows.
Ifyouputatablecelloutsidearow,orifyouforgettocloseacell,orrow,ortableitwillhaveunpredictableresults.
Textintendedtobeinthetablemayappearatanunexpectedposition,outsidethetable.Atworst,theentirecontents
ofthetablewillnotbedisplayed.
Forexample,inIEandFirefox:
Acelloutsidearowistreatedasinaseparaterowattheverticalpositionconcerned
Allcontentoutsidecells,whetherinarowornot,isputbeforethewholetable,intheorderinwhichitoccurs
IEputseachitemonanewlineFirefoxdoesnot,butputsinsomecasesablankspacebetweenitems.
Iftheoptional</td>and</tr>arenotput,theabovereferstocontentbeforethefirstrow,andinrowsbeforethe
firstelementonly.Notethat</table>isrequiredifitisforgottenallfollowingcontentisconsideredpartofthelast
cellofthelastrow,evenfurthertables.
TaskCreateatable
1.Openyourdefault.htmandsaveitastable.htmintheappropriatefolder
2.CreatethisHTMLcodeinthebodyofthedocument
<table>
<tr><th>Food</th><th>Price</th></tr>
<tr><td>Bread</td><td>$2.99</td></tr>
<tr><td>Milk</td><td>$1.40</td></tr>
</table>
1.Savethefileandviewitinthebrowser.
Theresultis:
Food Price
Bread $2.99
Milk $1.40
Itdoesn'tlooktoomuchlikeatableyet,butwe'lladdmoresoon.
Note:Thistableismadeupoftworows(checkoutthetwo<tr>tags)andwithineachrowtherearetwodataentries
(thetwo<td>tags)
Youmightcompareatablewithaspreadsheet.Thisonehastworowsandtwocolumnsmaking4cellscontaining
data.(2rowsx2columns=4cells)
Captionandheadings
23/46
6/27/2016
Letusstartwithaquickexample:
<table>
<caption>FormulasandResults</caption>
<tr><th>Formula</th><th>Result</th></tr>
<tr><td>1+1</td><td>2</td></tr>
<tr><td>3*5</td><td>15</td></tr>
</table>
Captionsareusefulfordefiningordescribingthecontentofthetable.Theyareoptional.
Toaddacaptiontoatable,enterthecaptionelementaftertheopeningtabletag,withthetextofthecaptioninside
theelement,asshowninthefollowing.
<table>
<caption>FormulasandResults</caption>
...
</table>
Captionsareusuallydisplayedoutsidetheborderofthetable,atthetop.Theexactappearanceandplacementof
captionsissubjecttoCSSstyling.
Tableheadingsareawayofdefiningthecontentsofthetablecolumns.Theyareusuallyonlyusedinthefirst<tr>,
tablerow.
Insteadofusinga<td>forthecell,weusea<th>.
Bydefaultthetextintableheadingsisdisplayedboldandcentered.
TheSyntaxis:<tr><th>text</th><th>text</th></tr>
TaskTableCaptionandHeadings
1.Openyourtable.htmlfile
2.Addyourowncaptiontothetable
3.Viewtheresult
4.AddthetableheadingsITEMSand$PRICEforthetable
5.Viewtheresult
Borders
Aborderaroundatableisoptional:sometimestheyhelptodefinethetable,andsometimesthetablelooksbetter
withoutthem.
Howeverhavingbordersturnedonwhileyouarecreatingthetableisaverygoodideasinceitmakestablesmuch
easiertoworkwith.Youcangetridoftheborderoncethetableiscompleted.
Theborderofthistableis1pixelwide.
24/46
6/27/2016
Theborderonthistableis5pixelswide.
Thedefaultvalueis0(i.e.borderless).
Borderisanattributeofthetabletag.Thesyntaxis:
<tableborder=X>whereXisthebordersizeinpixels.
Youcanalsospecifyabordercolour,althoughthisisanInternetExplorertagonly.Thesyntaxis:
<tablebordercolor="#000000">
NotethatitisnotrecommendedtospecifythebordercolourusingHTMLitismuchbettertouseCSSforthis
purpose.
TaskCreateaborderaroundatable
1.Openyourtable.htmfile.
2.Inthe<table>tag,addborder=2
i.e.<tableborder=2>.
3.Savethefileandviewit.
4.Changethesizeoftheborder(i.e.,try0,10,andtryacrazynumber).
5.Viewtheresultsasyougo.
Didyouspotthatonlytheoutsidebordergetsbigger?
HeightandWidth
Atable,bydefault,willbeaslargeasthedatathatisenteredintoit.
Wecanchangetheoverallheightandwidthofthetabletogetitthesizewewant.
Itispossibletogivethesizeinabsolutepixels,orasarelativepercentageofthescreensize.
Thesyntaxis:<tableheight=???width=???>where???isthesizeinpixelsorpercentage.
Itisalsopossibletocontrolthedimensionsofindividualtablecellsorrows.
e.g.<trheight=80><tdwidth="50%">
Itispossibletomixabsoluteandrelativeheightsandwidths.
NotethatyoucandothesamethingwithCSSbychangingthepadding.
TaskDefinethesizeofatable
2.Inthe<tableborder=2>tag,wewilladdtheheightandwidth
e.g.<tableborder=2height=200width=300>
3.Savethefileandthenviewit.Resizethebrowserwindow,andwatchwhathappensthetablesizestaysthe
same.
4.Experimentchangingthemeasurementsandviewthefileagain.
5.Nowreplacethepixelsmeasurementswithpercentages
25/46
6/27/2016
e.g.<tableborder=2height="40%"width="50%">
6.Savethefileandthenviewit.Resizethebrowserwindow,andwatchwhathappensthistimethetable
changessizeasthewindowsizechanges.
CellSpacingandCellPadding
CellSpacingisthenumberofpixelsbetweenthetablecells.
CellPaddingisthepixelspaceinsidethecells.i.e.thedistancebetween
theinformationandthesidesofthetablecells.
Boththeseoptionsareattributesofthe<table>tag
e.g.<tableborder=1cellspacing=0cellpadding=0>
Note:Thedefaultforbothis2
TaskCellSpacingandPadding
1.Openyourtable.htmfile.Makesurethatyourtablehasalarge
heightandwidthset(e.g.300x200)ifnotthenyouwon'tbeabletoseetheeffectofcellpaddingand
cellspacing.
2.Experimentwithchangingthesizeofthetableborder,cellspacingandcellpadding.Trydifferent
combinationsof0,1,5,10,etc.
3.Viewtheresulteachtime
Alignmentoftablecells
Thedefaultalignmentofthecontentsoftablecellsisleftandverticallycentered.
Ifyouwanttochangethealignmentofcells,ithastobedoneindividuallyforeachcell.Thealigncommandis
includedinthe<td>tag.Youcanalsochangethealignmentofanentirerowbyspecifyingthealignmentinthe<tr>
tag
Horizontalalignment
Syntax:
<tdalign="position">wherepositionisleft,center,orright
or
<tralign="position">wherepositionisleft,center,orright
Verticalalignment
Syntax:
<tdvalign="position">wherepositionistop,middleorbottom
or
<trvalign="position">wherepositionistop,middleorbottom
Youcanalsoincludealignandvaligncommandsinthetablerowtagandinthetabletag.
Note:Includingalign="left"oralign="right"inthetabletagdoesNOTalignthecontentsofthetable.Insteadit
alignsthewholetableonthepage.i.e.,itmakesthetextoutsidethetablewraparoundthetable.
26/46
6/27/2016
TaskAlignmentoftablecells
1.Openyourtable.htmfile
2.Changethealignmentofthetablecellssothattheylooklike:
bread
$2.99
Milk
$1.40
bread $2.99
or
Milk $1.40
1.Experimentwithotherverticalandhorizontalalignments.
2.Viewtheresulteachtime
Rowspanandcolumnspan
Everyrowmusthavethesamenumberoftabledatas,occasionallytabledatashavetospanmorethanonecolumn
orrow.Inthiscasethetagscolspanand/orrowspanareusedwheretheyaresettoanumber.
<THIS ROWHAS THREETABLEDATAS
<THIS ROWHAS TWO.THEFIRSTUSES COLSPAN="2"
<THIS ROWHAS THREETABLEDATAS ,BUTONESPANS TWOROWS BECAUSEIT
USES ROWSPAN="2"
<THIS ROWHAS ONLYTWOTABLEDATAS ,BECAUSEITS FIRSTIS BEINGTAKEN
UP.
Syntax:
<tdcolspan=X>whereXisthenumberofcolumnsthatthecellspansacross.
<tdrowspan=X>whereXisthenumberofrowsthatthecellspansacross.
TaskRowspanandcolumnspan
2.Experimentwithmakingonetablecellspanacrossmultiplerows.
3.Experimentwithmakingonetablecellspanacrossmultiplecolumns.
4.Viewtheresulteachtime.
Backgroundcolourandimages
Itispossibletogiveeachtablecell,(orrow,ortable)adifferentbackgroundcolour.
27/46
6/27/2016
Syntax:
<tdbgcolor="colour">
<trbgcolor="colour">
<tablebgcolor="colour">
wherecolourisacolournameorhexadecimalcode.
Note:tablebackgroundcoloursonlydisplayinversion3browsersandabove,andtheymaynotprintcorrectly.
Note:itisnotrecommendedtospecifybackgroundcoloursusingHTMLitismuchbettertouseCascadingStyle
Sheetsforthispurpose.
Abackgroundimageisanothermodificationoftheappearanceofacell,row,oracompletetable.Againtheseonly
displayinversion3browsersandabove,andtheymaynotprintcorrectly.
Syntax:
<tdbackground="filename">
<trbackground="filename">
<tablebackground="filename">
wherefilenameisthepathandfilenameofthebackgroundimage.
Note:itisnotrecommendedtospecifybackgroundimagesusingHTMLitismuchbettertouseCSSforthis
purpose.
TaskBackgroundcolourandimages
2.Experimentwithchangingthebackgroundcolourofatablecell,atablerow,andthetableitself.
3.Addabackgroundimagetoatablecell,atablerow,andthetableitself.
4.Viewtheresulteachtime.
Columngroups
Tospecifyagivenformatforatablecolumn,youcanusethe<col>and<colgroup>tags.Thesetagsarelocatedat
thetopofthetable,andspecifythedefaultformatforthegivencolumn.
Withthe<col>tag,thefirstinstanceindicatestheformattingforthefirstcolumn,thesecondforthesecondcolumn,
andsoon.<colgroup>workssimilarly,butalsoincludesthespantagtocovermultiplecolumns.
<colgroup><colspan="3"style="backgroundcolor:red"><colstyle="backgroundcolor:yellow"><colspan="2"
style="backgroundcolor:green"></colgroup>
ProjectCompletion
Jan Feb Mar Apr May Jun
3% 17% 40% 55% 86% 100%
Summary
28/46
6/27/2016
Inthismoduleyoulearnhowto:
CreateandcustomiseHTMLtables,
Controltheirdimensionsandappearance,
Addacaptiontoatable,
Controlthealignmentofthetablecontents,
Variousattributesofthetabletags.
Quotations
TherearetwokindsofquotationssupportedbyHTMLinlineonesandblockquotations.
Inlinequotations
Anexample:
<q>Aninlinequotationofsignificantlength
(say25words,forexample)goeshere...</q>.
Willbediplayedas:
Aninlinequotationofsignificantlength(say25words,forexample)goeshere....
Blockquotations
Anexample:
<blockquote>Loremipsumdolorsitamet,consecteturadipisicingelit,
seddoeiusmodtemporincididuntutlaboreetdoloremagnaaliqua.
Utenimadminimveniam,quisnostrudexercitationullamcolaboris
nisiutaliquipexeacommodoconsequat.Duisauteiruredolorin
reprehenderitinvoluptatevelitessecillumdoloreeufugiat
nullapariatur.Excepteursintoccaecatcupidatatnonproident,sunt
inculpaquiofficiadeseruntmollitanimidestlaborum.
</blockquote>
Examplerendering:
Loremipsumdolorsitamet,consecteturadipisicingelit,seddoeiusmodtemporincididuntutlaboreet
doloremagnaaliqua.Utenimadminimveniam,quisnostrudexercitationullamcolaborisnisiut
aliquipexeacommodoconsequat.Duisauteiruredolorinreprehenderitinvoluptatevelitessecillum
doloreeufugiatnullapariatur.Excepteursintoccaecatcupidatatnonproident,suntinculpaquiofficia
deseruntmollitanimidestlaborum.
Comments
29/46
6/27/2016
HTMLoffersthepossibilitytoinsertcommentsintothepage.ToplaceacommentinyourHTMLcode,startitwith
<!andcloseitwith>.Anexample:
<p>Thefirstparagraph.</p>
<!Thiscommentspansoneline,andwillnotbedisplayedtothebrowser.>
<p>Thesecondparagraph.</p>
<!
Thiscommentspansmultiplelines,
andwillalsonotbedisplayedtothebrowser.
>
<p>Thethirdparagraph.</p>
Unlikenotesinofficesuites,commentsarecompletelyignoredbybrowsers,sothereadersofthepagehavenoidea
oftheirpresence.Theycanbeviewedinthesourceofthewebpagethough.
Youshouldavoidnestedcomments,asthesecancausetroublestomanybrowsers.Anexample:
<p>Thesecondparagraph.</p>
<!
<!
Nestedcommentsshouldbetterbeavoided.
>
>
<p>Thethirdparagraph.</p>
Forms
HTMLformsareaneasywaytogatherdatafromtheenduser.Processingthemrequiresaserversidescripting
language(https://en.wikipedia.org/wiki/Serverside_scripting#Languages)or(insomecaseswhenlimited
interactionistobeprovidedwithinasinglepage)aclientsidescriptinglanguagesuchasJavaScript.
Hereisasimpleform:
<formid=""action=""method="post">
<fieldset>
<legend>Personaldetails</legend>
<labelfor="first">Firstname</label>
<inputtype="text"name="first"id="first"><br/>
<labelfor="family">Familyname</label>
<inputtype="text"name="family"id="family"><br/>
<inputtype="submit"name="personal">
</fieldset>
</form>
Here'sanexplanation
id
Thenameoftheformorcontrol.
action
TheURLofaserversidescriptwhichcanprocessthedata.
method
Themethodusedtosendtheinformation.Twomethodsaresupported,POSTandGET.POSTisthepreferred
30/46
6/27/2016
methodexceptforsimplesearcheswhichgenerallyuseGET.Usewithserversidelanguages.
fieldset
Formcontrolsarenormallycontainedinafieldsetelement.Complexformsmayhavemultiplefieldsets.
Fieldsetscancontainotherfieldsets.
legend
Eachfieldsetbeginswithalegendelement.Thecontentoftheelementisusedasatitleplacedintheborder
ofthefieldset.
labelfor=""
Alabelforisasingleformcontrol.Thevalueoftheforattributemustmatchtheidattributeofaform
controlinthesameform.
inputtype=""name=""id=""
varioustypesofinputcontrols.Supportedtypesaresubmit,text,password,checkbox,radio,reset,file,
hidden,imageandbutton.ThenameAttributeisusedbytheservertoidentifywhichpieceofdatawasentered
inagivenboxontheform.Theidattributeisusedtomatchaninputwithitslabel.Thenameandidattributes
normallyhaveidenticalvaluesfortextinputsbutdifferentvaluesforcheckboxandradioinputs.
select
ThereisalsoaSELECTelementfordropdownlistsandaTEXTAREAelementformultilinetextinput.
Thissimpleexampleuses<br/>tagstoforcenewlinesbetweenthedifferentcontrols.Arealworldformwoulduse
morestructuredmarkuptolayoutthecontrolsneatly.
FormattingwithCSS
TheHTML
TheHTMLforthisformisamazinglysimpleandyoudonothavetocreatehundredsofdivsallalignedleftand
rightthiswillcausealotoffrustrationandalotofdebuggingasvariousbrowsersstillinterpretCSScode
differently.
<form>
<labelfor="name">Name</label>
<inputid="name"name="name"><br/>
<labelfor="address">Address</label>
<inputid="address"name="address">
</form>
TheCSS
TheCSSforthiscodeisalittlebitmoreinteresting:
label,input{
float:left;
width:150px;
display:block;
marginbottom:10px;
}
label{
width:75px;
textalign:right;
paddingright:20px;
}
br{
clear:left;
31/46
6/27/2016
Let'sexplainthecode
label,input{
float:left;
width:150px;
display:block;
marginbottom:10px;
}
TheCSSforthelabelhasfoursectionstoit:
1.float:thefloatcommandisusedtoestablishthatthelabelisfloatedtothelefthandsideoftheform
2.width:thisdefineshowbigthelabelmustbe,keepingallthelabelsatafixedwidthkeepseverythinginanice
orderedline.
3.display:theelementwillbedisplayedasablocklevelelement,withalinebreakbeforeandaftertheelement
4.marginbottom:byaddingamargintothebottomofthislabelitinsuresthatlabelsarepositionednicelyone
underanotherwithanicepaddingbetweeneach
label{
width:75px;
textalign:right;
paddingright:20px;
}
1.width:againthisistodefineafixedwidthgivingeverythinganicedefinedunity.
2.Textalign:alignthetextrightkeepseverythingawayfromtheleftaignedlabelsagainkeepingthingsin
unison.
3.Paddingright:thismeansthatthereisanicepaddingontherightkeepingthingsonceagainfinetuned.
br{
clear:left;
}
1.clear:thisisthemostimportantpartwithouttheclear:leftnothingwillalignproperlythisbasicallymakes
everythingwithineachelementsequencealignunderneatheachotherandtotheleft.
Formoredetails,seetheHyperTextMarkupLanguage/TagList/formsectionofthisbook.
References
Foraniceandcomprehensivereferenceonforms,seetheofficialW3TechnicalRecommendationforforms(http://
www.w3.org/TR/html4/interact/forms.html).
CSS
Sofarwehaveseenhowtodividetextintoparagraphsandtocreatesectionheadings.WhilstHTMLallowsyouto
definethestructureofyourdocumentsitgivesverylimitedcontrolovertheirappearance.CascadingStyleSheets
(CSS)isalanguagethatdescribesthepresentationofdocuments.YoucanuseCSStoaltertheappearanceofyour
32/46
6/27/2016
HTMLdocuments.
ThissectiongivesanintroductiontostylingHTMLwithCSS.CSSitselfiscoveredinthecompanionwikibook
CascadingStyleSheets.
WhatdoesCSSdo?
TheexamplepagefromtheParagraphsandHeadingssectionwouldlooksomethinglikethiswithoutCSS.
Sundial
FromWikipedia,thefreeencyclopedia.
Asundialmeasurestimebythepositionofthesun.Themostcommonlyseendesigns,suchasthe'ordinary'or
standardgardensundial,castashadowonaflatsurfacemarkedwiththehoursoftheday.Asthepositionofthe
sunchanges,thetimeindicatedbytheshadowchanges.However,sundialscanbedesignedforanysurfacewherea
fixedobjectcastsapredictableshadow.
Mostsundialdesignsindicateapparentsolartime.Minordesignvariationscanmeasurestandardanddaylight
savingtime,aswell.
History
Sundialsintheformofobelisks(3500BC)andshadowclocks(1500BC)areknownfromancientEgypt,andwere
developedfurtherbyothercultures,includingtheChinese,Greek,andRomancultures.Atypeofsundialwithout
gnomonisdescribedintheoldOldTestament(Isaiah38:2).
ThemathematicianandastronomerTheodosiusofBithynia(ca.160BCca.100BC)issaidtohaveinventeda
universalsundialthatcouldbeusedanywhereonEarth.TheFrenchastronomerOronceFinconstructedasundial
ofivoryin1524.TheItalianastronomerGiovanniPadovanipublishedatreatiseonthesundialin1570,inwhich
heincludedinstructionsforthemanufactureandlayingoutofmural(vertical)andhorizontalsundials.Giuseppe
Biancani'sConstructioinstrumentiadhorologiasolariadiscusseshowtomakeaperfectsundial,with
accompanyingillustrations.
Installationofstandardsundials
Manyornamentalsundialsaredesignedtobeusedat45degreesnorth.Bytiltingsuchasundial,itmaybeinstalled
sothatitwillkeeptime.However,somemassproducedgardensundialsareinaccuratebecauseofpoordesignand
cannotbecorrected.Asundialdesignedforonelatitudecanbeadjustedforuseatanotherlatitudebytiltingits
basesothatitsstyleorgnomonisparalleltotheEarth'saxisofrotation,sothatitpointsatthenorthcelestialpole
inthenorthernhemisphere,orthesouthcelestialpoleinthesouthernhemisphere.
Alocalstandardtimezoneisnominally15degreeswide,butmaybemodifiedtofollowgeographicandpolitical
boundaries.Asundialcanberotatedarounditsstyleorgnomon(whichmustremainpointedatthecelestialpole)
33/46
6/27/2016
toadjusttothelocaltimezone.Inmostcases,arotationintherangeof7.5degreeseastto23degreeswest
suffices.
Tocorrectfordaylightsavingtime,afaceneedstwosetsofnumeralsoracorrectiontable.Aninformalstandardis
tohavenumeralsinhotcolorsforsummer,andincoolcolorsforwinter.Rotatingthesundialwillnotworkwell
becausemostsundialsdonothaveequalhourangles.
Ordinarysundialsdonotcorrectapparentsolartimetoclocktime.Thereisa15minutevariationthroughtheyear,
knownastheequationoftime,becausetheEarth'sorbitisslightlyellipticalanditsaxisistiltedrelativetothe
planeofitsorbit.Aqualitysundialwillincludeapermanentlymountedtableorgraphgivingthiscorrectionforat
leasteachmonthoftheyear.Somemorecomplexsundialshavecurvedhourlines,curvedgnomonsorother
arrangementstodirectlydisplaytheclocktime.
Byaddingastylesheettheappearancecouldbechangedto:
Sundial
From Wikipedia, the free encyclopedia.
A sundial measures time by the position of the sun. The most commonly seen designs, such as
the 'ordinary' or standard garden sundial, cast a shadow on a flat surface marked with the hours
of the day. As the position of the sun changes, the time indicated by the shadow changes.
However, sundials can be designed for any surface where a fixed object casts a predictable
shadow.
Most sundial designs indicate apparent solar time. Minor design variations can measure
standard and daylight saving time, as well.
History
Sundials in the form of obelisks (3500 BC) and shadow clocks (1500 BC) are known from
ancient Egypt, and were developed further by other cultures, including the Chinese, Greek, and
Roman cultures. A type of sundial without gnomon is described in the old Old Testament (Isaiah
38:2).
The mathematician and astronomer Theodosius of Bithynia (ca. 160 BC-ca. 100 BC) is said to
have invented a universal sundial that could be used anywhere on Earth. The French astronomer
Oronce Fin constructed a sundial of ivory in 1524. The Italian astronomer Giovanni Padovani
published a treatise on the sundial in 1570, in which he included instructions for the manufacture
and laying out of mural (vertical) and horizontal sundials. Giuseppe Biancani's Constructio
instrumenti ad horologia solaria discusses how to make a perfect sundial, with accompanying
illustrations.
Installation of standard sundials
Many ornamental sundials are designed to be used at 45 degrees north. By tilting such a
sundial, it may be installed so that it will keep time. However, some mass-produced garden sundials
are inaccurate because of poor design and cannot be corrected. A sundial designed for one latitude
can be adjusted for use at another latitude by tilting its base so that its style or gnomon is
parallel to the Earth's axis of rotation, so that it points at the north celestial pole in the northern
hemisphere, or the south celestial pole in the southern hemisphere.
34/46
6/27/2016
A local standard time zone is nominally 15 degrees wide, but may be modified to follow
geographic and political boundaries. A sundial can be rotated around its style or gnomon (which
must remain pointed at the celestial pole) to adjust to the local time zone. In most cases, a
rotation in the range of 7.5 degrees east to 23 degrees west suffices.
To correct for daylight saving time, a face needs two sets of numerals or a correction table.
An informal standard is to have numerals in hot colors for summer, and in cool colors for winter.
Rotating the sundial will not work well because most sundials do not have equal hour angles.
Ordinary sundials do not correct apparent solar time to clock time. There is a 15 minute
variation through the year, known as the equation of time, because the Earth's orbit is slightly
elliptical and its axis is tilted relative to the plane of its orbit. A quality sundial will include a
permanently-mounted table or graph giving this correction for at least each month of the year.
Some more-complex sundials have curved hour-lines, curved gnomons or other arrangements to
directly display the clock time.
HowtoaddaCSSstylesheet
CSSisnormallykeptinaseparatefilefromtheHTMLdocument.Thisallowsastylesheettobesharedbyseveral
HTMLdocuments.ThelinkelementisusedtoapplytherulesfromaCSSstylesheettoadocument.Thebasic
syntaxis:
wherestyle.cssistheURLforthestylesheet.
TheCSSfilefortheexampleabovecontainsthefollowing:
body{
background:#ffc;
color:#000;
fontfamily:cursive
}
h1{
color:red;
textalign:center;
fontsize:1.2em;
fontweight:bold;
margin:0
}
h2{
textalign:center;
fontsize:1em;
fontweight:bold;
margin:1em00
}
p{
textindent:2em;
textalign:justify;
margin:0
}
Savethisassundial.css.
35/46
6/27/2016
TheHTMLdocumentfromtheprevioussectionwithalinkelementaddedonthefifthlineisgivenbelow.Savethis
assundial2.htminthesamedirectory.
<!DOCTYPEhtml>
<htmllang="en">
<head>
<title>Sundial</title>
<linkrel="stylesheet"type="text/css"href="sundial.css">
</head>
<body>
<h1>Sundial</h1>
<p>FromWikipedia,thefreeencyclopedia.</p>
<p>Asundialmeasurestimebythepositionofthesun.Themostcommonlyseendesigns,suchasthe
'ordinary'orstandardgardensundial,castashadowonaflatsurfacemarkedwiththehoursof
theday.Asthepositionofthesunchanges,thetimeindicatedbytheshadowchanges.However,
sundialscanbedesignedforanysurfacewhereafixedobjectcastsapredictableshadow.
</p>
<p>Mostsundialdesignsindicateapparentsolartime.Minordesignvariationscanmeasurestandard
anddaylightsavingtime,aswell.
</p>
<h2>History</h2>
<p>Sundialsintheformofobelisks(3500BC)andshadowclocks(1500BC)areknownfromancient
Egypt,andweredevelopedfurtherbyothercultures,includingtheChinese,Greek,andRoman
cultures.AtypeofsundialwithoutgnomonisdescribedintheoldOldTestament
(Isaiah38:2).
</p>
<p>ThemathematicianandastronomerTheodosiusofBithynia(ca.160BCca.100BC)issaidtohave
inventedauniversalsundialthatcouldbeusedanywhereonEarth.TheFrenchastronomerOronce
Finconstructedasundialofivoryin1524.TheItalianastronomerGiovanniPadovanipublished
atreatiseonthesundialin1570,inwhichheincludedinstructionsforthemanufactureand
layingoutofmural(vertical)andhorizontalsundials.GiuseppeBiancani'sConstructio
instrumentiadhorologiasolariadiscusseshowtomakeaperfectsundial,withaccompanying
illustrations.
</p>
<h2>Installationofstandardsundials</h2>
<p>Manyornamentalsundialsaredesignedtobeusedat45degreesnorth.Bytiltingsucha
sundial,itmaybeinstalledsothatitwillkeeptime.However,somemassproducedgarden
sundialsareinaccuratebecauseofpoordesignandcannotbecorrected.Asundialdesignedfor
onelatitudecanbeadjustedforuseatanotherlatitudebytiltingitsbasesothatitsstyle
orgnomonisparalleltotheEarth'saxisofrotation,sothatitpointsatthenorthcelestial
poleinthenorthernhemisphere,orthesouthcelestialpoleinthesouthernhemisphere.
</p>
<p>Alocalstandardtimezoneisnominally15degreeswide,butmaybemodifiedtofollow
geographicandpoliticalboundaries.Asundialcanberotatedarounditsstyleorgnomon(which
mustremainpointedatthecelestialpole)toadjusttothelocaltimezone.Inmostcases,a
rotationintherangeof7.5degreeseastto23degreeswestsuffices.
</p>
<p>Tocorrectfordaylightsavingtime,afaceneedstwosetsofnumeralsoracorrectiontable.
Aninformalstandardistohavenumeralsinhotcolorsforsummer,andincoolcolorsfor
winter.Rotatingthesundialwillnotworkwellbecausemostsundialsdonothaveequalhour
angles.
</p>
<p>Ordinarysundialsdonotcorrectapparentsolartimetoclocktime.Thereisa15minute
variationthroughtheyear,knownastheequationoftime,becausetheEarth'sorbitis
slightlyellipticalanditsaxisistiltedrelativetotheplaneofitsorbit.Aquality
sundialwillincludeapermanentlymountedtableorgraphgivingthiscorrectionforatleast
eachmonthoftheyear.Somemorecomplexsundialshavecurvedhourlines,curvedgnomonsor
otherarrangementstodirectlydisplaytheclocktime.
</p>
</body>
</html>
Opensundial2.htmwithyourwebbrowserandyoushouldseeapagewithapaleyellowbackground.
ValidatingHTML
36/46
6/27/2016
TherearefixedrulesthatdefinewhichtagsmaybeusedinanHTMLdocument,wheretheycanbeplaced.Asyour
documentsgetlargeritcanbedifficulttobesurethateverythingiscorrect.Thereareautomatedtoolsthatwill
checkyourHTMLforyou.Thesetoolsareknownasvalidators.Severalvalidatorsarefreetouse,including
WebDesignGroupHTMLValidator(http://www.htmlhelp.com/tools/validator/upload.html.en)
TheW3CMarkupValidationService(http://validator.w3.org/)
Tryuploadingtheindex.htmlorindex.htmfileyoucreatedintheprevioussectiontooneofthevalidatorslisted
above.AlternatelybothvalidatorshaveoptionsthatletyouenterHTMLdirectlysoyoucouldcutandpastethe
examplefromthispageintothevalidator.
ThereisalsoanHTMLvalidatingFirefoxextensionthatcanvalidateHTMLusingeitherHTMLTidyortheSGML
Parser(whatthew3validatorisbasedon).Itisavailablehere(http://users.skynet.be/mgueury/mozilla/)forall
platforms.
ItisgoodpracticetovalidateeachHTMLdocumentyoucreate.Notethatmanyvisualdesigntoolswillletyou
createinvalidwebpagessoitisimportanttocheckpagesproducedinthesepackagesaswell.
IftheHTMLdocumentisvaliditmeansthatthewebpagewilldisplayexactlyasyouprogrammedittoonstable
W3Ccompliantbrowsers.InthecaseoftextbrowserssuchasLynx,thetextwillformatcorrectlysothatitcanbe
readeasilybytheconsumer.KnowingHTMLalsomeansthatyoucaneditthepagescreatedusingWYSIWYG
programsmanually,asthesewillwithoutfailthrowinunnecessarycodingwhichclogsupandslowsdownthe
loadingofyourpage.
ConditionalComments
ConditionalcommentsareaproprietaryextensiontoMicrosoftInternetExplorerforWindows(IE/win)version5.0
andlater.TheyarenotavailableinInternetExplorerforMac(IE/mac).Theyareaveryusefulwayofhandlingthe
CSSbugsinthevariousversionsofInternetExplorer.
Syntax
Anordinary(X)HTMLcommentlookslikethis:
<!Thistextwillbeignoredbythebrowser.>
Conditionalcommentsaddadditionalsyntaxtocomments.Thesimplestexampleis:
<![ifIE]>ThistextwillbeshownbyIE/winver.5.0andhigher.<![endif]>
Browsersthatdon'tunderstandtheconditionalcommentsyntaxwillprocessthisasanormalcomment,i.e.the
contentofthecommentwillbeignored.
SpecificversionsofIE/wincanbetargetedbychangingtheexpressionaftertheif.Forexampletotargetany
versionofIE/winwithamajorversionof5use:
<![ifIE5]>Themajorversionnumberofthisbrowseris5.<![endif]>
ThetextwilldisplayinIE/winversions5.0and5.5.
Totargetaspecificversionnumber,e.g.5.0,thesyntaxisslightlyquirky.
<![ifIE5.0]>YouareusingIE/win5.0.<![endif]>
37/46
6/27/2016
InequalitiescanbeusedintheexpressionbyplacinganoperatorbeforetheIE.Theoperatorsare:
lt
lessthan(butatleastversion5.0whichisthelowestversionsupportingconditionalcomments)
lte
lessthanorequal(butatleastversion5.0whichisthelowestversionsupportingconditionalcomments)
gt
greaterthan
gte
greaterthanorequals
Example:
<![ifgteIE6]>ThistextwillbeshownbyIE/winver.6.0andhigher.<![endif]>
Alltheexpressionscanbenegatedbyprefixingwith!,e.g.
<![if!gteIE6]>ThistextwillbeshownbyverionsofIE/winver.below6thatsupportconditional
comments.<![endif]>
<![if!IE]>ThistextwillbenotbeshownbyanyversionofIE/winthatunderstandsconditional
comments.Itwon'tbeshownbyanyotherbrowserseitherbecausetheywilltreatthisasanormal
comment.<![endif]>
ThesecondexamplemayseempointlessbutwithasmalltweakyoucanarrangetohidetextfromIE/winversion5
andabove.
<![if!IE]>>ThistextwillbenotbeshownbyanyversionofIE/winthatunderstandsconditional
comments.Itwillbeshownbyotherbrowsersbecausetheywilltreatthisastextsandwichedbetweentwo
normalcomments.<!<![endif]>
ThefollowingHTMLdocumentisaworkingexample.
<!DOCTYPEhtml>
<htmllang="en">
<head>
<title>Conditionalcomments</title>
</head>
<body>
<![if!IE]>>
<p>ThisispageisnotbeingviewedwithInternetExplorerforWindowsversion5.0orhigher.</p>
<!<![endif]>
<![ifIE]>
<p>ThisispageisbeingviewedwithInternetExplorerforWindowsversion5.0orhigher.</p>
<![endif]>
</body>
</html>
UsewithCSS
ConditionalcommentscanbeusedtopassadditionalstylesheetstoIE/win.Thesestylesheetscanprovidefixesto
layoutbugsinIE/win.Thebasicideais:
<head>
38/46
6/27/2016
<![ifIE5]>
<linkrel="stylesheet"type="text/css"href="bugFixForIE5x.css">
<![endif]>
</head>
Externallinks
Thesetestsforconditionalcomments(http://www.positioniseverything.net/articles/sidepages/cond_1.html)on
PositionisEverythingmayhelpyouunderstandthequirksofconditionalcomments.
ProscribedTechniques
Frames
InolderHTML,frameswereawaytomakeasectionofthewebpageconstantlyvisible.Itinvolvedmultiplepages
showninseparatesubwindows.Usageofframeshasbeendeprecatedandshouldneverbeused.
FrameshavebeenreplacedbyacombinationofCascadingStyleSheetsandAJAXscripting,astheykeepamore
suitablemethodofkeepingorupdatingcontentonthescreen.
Layers
LayersarenotapartofHTML4.01orXHTML.TheywereaproprietaryelementcreatedbyNetscape.Youcan
achievethesameeffectusingCSS'szindexproperty.
Confusingly,Dreamweaverhasalayersfeaturewhichisfunctionallysimilarbutisbasedondivelementsstyled
withCSSandoptionallyanimatedwithJavascript.
Music
Usersshouldhavecontroloverthebackgroundsoundormusictherefore,mediaplayercontrolsshouldalwaysbe
visible.Don'ttrytoscriptyourowncontrolssincetheymightnotworkinallenvironments.
Therearemusicplayersforwebsitesthatyoucanfindifyousearch.Theyshouldneverbesettoautoplay,they
shouldonlyplaywhentheuserchoosestoplaythem.
Browsers'extensions
39/46
6/27/2016
ConditionalComments
ConditionalcommentsareaproprietaryextensiontoMicrosoftInternetExplorerforWindows(IE/win)version5.0
andlater.TheyarenotavailableinInternetExplorerforMac(IE/mac).Theyareaveryusefulwayofhandlingthe
CSSbugsinthevariousversionsofInternetExplorer.
Syntax
Anordinary(X)HTMLcommentlookslikethis:
<!Thistextwillbeignoredbythebrowser.>
Conditionalcommentsaddadditionalsyntaxtocomments.Thesimplestexampleis:
<![ifIE]>ThistextwillbeshownbyIE/winver.5.0andhigher.<![endif]>
Browsersthatdon'tunderstandtheconditionalcommentsyntaxwillprocessthisasanormalcomment,i.e.the
contentofthecommentwillbeignored.
SpecificversionsofIE/wincanbetargetedbychangingtheexpressionaftertheif.Forexampletotargetany
versionofIE/winwithamajorversionof5use:
<![ifIE5]>Themajorversionnumberofthisbrowseris5.<![endif]>
ThetextwilldisplayinIE/winversions5.0and5.5.
Totargetaspecificversionnumber,e.g.5.0,thesyntaxisslightlyquirky.
InequalitiescanbeusedintheexpressionbyplacinganoperatorbeforetheIE.Theoperatorsare:
lt
lessthan(butatleastversion5.0whichisthelowestversionsupportingconditionalcomments)
lte
lessthanorequal(butatleastversion5.0whichisthelowestversionsupportingconditionalcomments)
gt
greaterthan
gte
greaterthanorequals
Example:
<![ifgteIE6]>ThistextwillbeshownbyIE/winver.6.0andhigher.<![endif]>
Alltheexpressionscanbenegatedbyprefixingwith!,e.g.
<![if!gteIE6]>ThistextwillbeshownbyverionsofIE/winver.below6thatsupportconditional
comments.<![endif]>
<![if!IE]>ThistextwillbenotbeshownbyanyversionofIE/winthatunderstandsconditional
comments.Itwon'tbeshownbyanyotherbrowserseitherbecausetheywilltreatthisasanormal
comment.<![endif]>
40/46
6/27/2016
ThesecondexamplemayseempointlessbutwithasmalltweakyoucanarrangetohidetextfromIE/winversion5
andabove.
<![if!IE]>>ThistextwillbenotbeshownbyanyversionofIE/winthatunderstandsconditional
comments.Itwillbeshownbyotherbrowsersbecausetheywilltreatthisastextsandwichedbetweentwo
normalcomments.<!<![endif]>
ThefollowingHTMLdocumentisaworkingexample.
<!DOCTYPEhtml>
<htmllang="en">
<head>
</head>
<body>
<![if!IE]>>
<p>ThisispageisnotbeingviewedwithInternetExplorerforWindowsversion5.0orhigher.</p>
<!<![endif]>
<![ifIE]>
<p>ThisispageisbeingviewedwithInternetExplorerforWindowsversion5.0orhigher.</p>
<![endif]>
</body>
</html>
UsewithCSS
ConditionalcommentscanbeusedtopassadditionalstylesheetstoIE/win.Thesestylesheetscanprovidefixesto
layoutbugsinIE/win.Thebasicideais:
<head>
<![ifIE5]>
<linkrel="stylesheet"type="text/css"href="bugFixForIE5x.css">
<![endif]>
</head>
Externallinks
Thesetestsforconditionalcomments(http://www.positioniseverything.net/articles/sidepages/cond_1.html)on
PositionisEverythingmayhelpyouunderstandthequirksofconditionalcomments.
Appendices
TagList
ThefollowingisalistofallelementsinHTML4,inalphabeticalorder.TODOforthebook:updatelistforHTML5
Clickonaelementforitsdescription.XHTML1.0hasthesameelementsbuttheattributesdifferslightly.
TheofficiallistofcurrentstandardelementsisatIndexoftheHTML5Elements(http://www.w3.org/TR/htmlmar
kup/elements.html).
41/46
6/27/2016
Youcanalsoviewalistofstandardattributes
a
abbr
acronyminmostinstancesuseabbrinstead.SeeTheAccessibilityHatTrick:GettingAbbreviationsRight
(http://www.alistapart.com/articles/hattrick)forsomeadviceonusingtheseelements.
address
(appletdeprecated,useobjectinstead.)
area
busestrongortheCSSpropertyfontweightsettothevalueboldinstead.
base
(basefontdeprecated,settheCSSpropertyfontonthebodyelementinstead.)
bdo
bgsoundUsedforinsertingbackgroundsounds.
bigtheCSSpropertyfontsizesettothevaluelargerorapercentagegreaterthan100%maybemore
appropriate.
blinkusedtomakethetextblink(Depreciated).
blockquote
bodyIdentifiesthemaincontentofaWebPage.
brusethepelementforparagraphs.UsetheCSSpropertiesmarginandpaddingtoincreaseordecreasethe
spacebetweenparagraphs.Considerusingstructuredelementssuchaslistsortablesinstead.
button
caption
(centerdeprecated,useadivelementinsteadandsettheCSSpropertytextaligntothevaluecenter.)
cite
code
col
colgroup
dd
del
dfn
(dirdeprecated,useul.)
div
dl
dt
em
fieldset
(fontdeprecated,usetheCSSpropertyfont.ForfinercontrolusetheCSSpropertiesfontstyle,font
variant,fontweight,fontsize,lineheightandfontfamily.)
formCreatesaform.
frameSpecifiesinformationforoneframe.
framesetavoidusingframesifpossible.
headContainsinformationaboutaWebPage.
hr
html
h1
h2
h3
h4
h5
h6
iuseemortheCSSpropertyfontstylesettothevalueitalicinstead.
iframe
img
input
42/46
6/27/2016
ins
(isindexdeprecated,useinput.)
kbd
label
legend
li
link
map
(menudeprecated,useul.)
meta
nobrisaproprietaryelementtypesupportedbysomewebbrowsers.Itisusedtopreventautomaticwrapping
oflines.
noframes
noscriptSpecifieswhatshouldbedoneifthereisnojavascriptfoundonthebrowser.
object
ol
optgroup
option
p
param
pre
q
(sdeprecated,usedeltoindicatedeletedtext.Ifthetextisn't'deleted'usetheCSSpropertytext
decorationsettothevaluelinethrough.)
samp
script
select
smalltheCSSpropertyfontsizesettothevaluesmallerorapercentagelessthan100%maybemore
appropriate.
span
(strikedeprecated,usedeltoindicatedeletedtext.Ifthetextisn't'deleted'usetheCSSpropertytext
decorationsettothevaluelinethrough.)
strong
style
sub
sup
table
tbody
td
textarea
tfoot
th
thead
title
tr
tt
(udeprecated,usetheCSSpropertytextdecorationsettothevalueunderlineinstead.)
ul
var
StandardAttributesList
43/46
6/27/2016
BelowisalistofallattributeswhichareavailableformostelementsinHTML.
YoucanalsoviewalistofHTMLelements.
Attributes
class
Thisattributeallowsyoutodesignateanelementtobeamemberofagivenclass.Multipleelementscanbe
assignedtothesameclass(eg.<pclass="foo">...</p><pclass="foo">...</p>),aswellasasingleelement
belongingtomultipleclasses(eg.<pclass="foobar">...</p>).
code
codebase
dir
Withthisattributeyoucandefinewhichdirectionthetextiswrittenforagivenelement,eitherltrforlefttoright
orrtlforrighttoleft.
height
Settingthisattributewithanumericalvaluedefinestheheightofanelementinpixels(eg.<divheight="150">...
</div>)
id
Thisattributeallowsyoutodefineauniqueidentifierforeachelement.Thiswouldbeusefulforhyperlinksthatlink
toaspecificsectionofapageorwhenstylingusingastylesheet.
lang
Withthisattributeyoucanspecifyalanguagethatisusedforanelement.
style
Thisattributeallowsyoutoapplyspecificstylingtoagivenelement.
title
Withthisattributeyoucandefinewhatwillbedisplayedwhenauserhoverstheelement.Itisnotavailableforbase,
head,html,meta,param,script,style,andtitle.
width
Settingthisattributewithanumericalvaluedefinesthewidthofanelementinpixels(eg.<divwidth="230">...
</div>)
44/46
6/27/2016
Moreattributes
accesskey
Theaccesskeyattributedefinesakeyboardshortcutforahyperlinkorformelement.Thecombinationofkeysneed
toactivatetheshortcutvariesfrombrowsertobrowser.InMicrosoftInternetExplorertheusermustpress
Alt+accesskey.IftheshortcutisforalinktheusermustthenpressEntertofollowthelink.Thechoiceof
Alt+accesskeymeansthataccesskeyscanclashwithshortcutsbuiltintothebrowser.
Itisquitecommontousenumbersfortheaccesskeyssincethesedon'tclashwithanymajorbrowser'sbuiltin
shortcuts,e.g.
1=HomePage
0=Listofaccesskeysonthiswebsite.
<divid="navigation">
<h2>Navigation</h2>
<ul>
<li><aaccesskey="1"href="/">Homepage</a></li>
<li><aaccesskey="2"href="/about">About</a></li>
<li><aaccesskey="0"href="/accesskeys">Accesskeys</a></li>
</ul>
</div>
Thereisnostandardwaytoletusersknowtheaccesskeysthatareavailableonthepage.Somesuggestionscanbe
foundinAccesskeys:UnlockingHiddenNavigation(http://www.alistapart.com/articles/accesskeys).
tabindex
Glossary
Thisisaglossaryofthebook.
Contents: Top09ABCDEFGHIJKLMNOPQRSTUVWXYZ
B
blockelement
TODO
E
element
Apartofadocumentstartingwithanopeningtagandendingwithaclosingtag,suchas"<p>
<b>keyword</b>isimportant</p>".
I
45/46
6/27/2016
inlineelement
TODO
T
tag
Theopeningandclosingsequenceofcharactersofanelement,suchas"<p>"or"</p>".Tobedistinguished
fromelement.
Links
Thewebtutotials:
PageFaceHTML&XHTMLTutorials(http://www.pageface.com/)
HTMLCenter(http://www.htmlcenter.com)hasover200HTMLtutorialsandaforumforquestions.
HTMLTutorials(http://www.pickatutorial.com/tutorials/html_1.htm)
HTMLSource:HTMLTutorials(http://www.yourhtmlsource.com/)hasstepbysteplessons.
HTMLDog(http://htmldog.com)tutorials.
HTMLandCSSWiki(http://c2.com/cgi/wiki?LearningHtmlAndCss)hasanotherlistoftutorials.
HTMLlessonsandtutorials(http://www.landofcode.com/html/)
Webmonkey.com'sTutorial(http://www.webmonkey.com/webmonkey/teachingtool/html.html)
FreeHTMLLearningResource(http://www.yoyobrain.com/subjects/show/23)
HTML.net(http://html.net)
w3schools(http://www.w3schools.com/html/default.asp)hasausefultutorialandtagreference.
Retrievedfrom"https://en.wikibooks.org/w/index.php?
title=HyperText_Markup_Language/Print_version&oldid=2747177"
Thispagewaslastmodifiedon13December2014,at16:25.
TextisavailableundertheCreativeCommonsAttributionShareAlikeLicense.additionaltermsmayapply.
Byusingthissite,youagreetotheTermsofUseandPrivacyPolicy.
46/46

HyperText Markup Language

Enviado por

Dados do documento

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

HyperText Markup Language

Enviado por

Direitos autorais:

Formatos disponíveis

6/27/2016

strikethrough <strikethrough>strikethrough</strikethrough> deprecated

Você também pode gostar