HyperText Markup Language
Uploaded by
Bharat RaghunathanHyperText Markup Language
Uploaded by
Bharat Raghunathan6/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
HyperTextMarkupLanguage/PrintversionWikibooks,openbooksforanopenworld
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
https://en.wikibooks.org/wiki/HyperText_Markup_Language/Print_version
2/46
6/27/2016
HyperTextMarkupLanguage/PrintversionWikibooks,openbooksforanopenworld
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.
https://en.wikibooks.org/wiki/HyperText_Markup_Language/Print_version
3/46
6/27/2016
HyperTextMarkupLanguage/PrintversionWikibooks,openbooksforanopenworld
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
https://en.wikibooks.org/wiki/HyperText_Markup_Language/Print_version
4/46
6/27/2016
HyperTextMarkupLanguage/PrintversionWikibooks,openbooksforanopenworld
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:
https://en.wikibooks.org/wiki/HyperText_Markup_Language/Print_version
5/46
6/27/2016
HyperTextMarkupLanguage/PrintversionWikibooks,openbooksforanopenworld
<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)
https://en.wikibooks.org/wiki/HyperText_Markup_Language/Print_version
6/46
6/27/2016
HyperTextMarkupLanguage/PrintversionWikibooks,openbooksforanopenworld
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
<h3>ThisisLevel3</h3>
ThisisLevel3
<h5>ThisisLevel5</h5>
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
https://en.wikibooks.org/wiki/HyperText_Markup_Language/Print_version
7/46
6/27/2016
HyperTextMarkupLanguage/PrintversionWikibooks,openbooksforanopenworld
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:
https://en.wikibooks.org/wiki/HyperText_Markup_Language/Print_version
8/46
6/27/2016
HyperTextMarkupLanguage/PrintversionWikibooks,openbooksforanopenworld
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|
https://en.wikibooks.org/wiki/HyperText_Markup_Language/Print_version
9/46
6/27/2016
HyperTextMarkupLanguage/PrintversionWikibooks,openbooksforanopenworld
||
|1.|BillNewton|
|2.|MagaretClapton|
''
Omittingthepreformattingtagswillcausethesametexttoappearallinoneline:
,,|No.|Person||||1.|BillNewton||2.|MagaretClapton|'
'
SpecialCharacters
ToinsertnonstandardcharactersorcharactersthatholdspecialmeaninginHTML,acharacterreferenceis
required.Forexample,toinputtheampersand,"&","&"mustbetyped.Characterscanalsobeinsertedby
theirASCIIorUnicodenumbercode.
https://en.wikibooks.org/wiki/HyperText_Markup_Language/Print_version
10/46
6/27/2016
NameCode
HyperTextMarkupLanguage/PrintversionWikibooks,openbooksforanopenworld
Number
Glyph
Code
Description
´
´
acuteaccent
&
&
&
ampersand
doublelow9quote
&bdquo
¦or
&brkbar
¦
brokenverticalbar
¸
¸
cedilla
¢
¢
centsign
blackclubsuit
copyright
generalcurrency
sign
&dagger
dagger
&Dagger
doubledagger
&darr
downwardarrow
degreesign
blackdiamondsuit
&clubs
©
¤
°
©
¤
°
&diams
Name
Code
Number
Glyph
Code
Description
À À
uppercaseA,grave
accent
Á
Á
uppercaseA,acute
accent
Â
Â
uppercaseA,
circumflexaccent
Ã
Ã
uppercaseA,tilde
Ä
Ä
uppercaseA,umlaut
Å
Å
uppercaseA,ring
Æ
Æ
uppercaseAE
Ç
Ç
uppercaseC,cedilla
È
È
uppercaseE,grave
accent
É
É
uppercaseE,acute
accent
Ê
Ê
uppercaseE,
circumflexaccent
÷
÷
divisionsign
Ë
Ë
uppercaseE,umlaut
½
½
onehalf
Ì
Ì
¼
¼
onefourth
uppercaseI,grave
accent
¾
¾
threefourths
Í
Í
&frasl
/
slash
uppercaseI,acute
accent
>
>
>
greaterthansign
Î
Î
uppercaseI,
circumflexaccent
blackheartsuit
Ï
Ï
uppercaseI,umlaut
Ð
Ð
uppercaseEth,
Icelandic
Ñ
Ñ
uppercaseN,tilde
Ò Ò
uppercaseO,grave
accent
Ó
Ó
uppercaseO,acute
accent
&hearts
¡
¡
inverted
exclamation
¿
¿
invertedquestion
mark
«
«
leftanglequote
&larr
leftwardarrow
&ldquo
leftdoublequote
&lsaquo
singleleftpointing
anglequote
Ô
Ô
uppercaseO,
circumflexaccent
&lsquo
leftsinglequote
Õ
Õ
uppercaseO,tilde
Ö
Ö
uppercaseO,umlaut
Ø
Ø
uppercaseO,slash
Ù Ù
uppercaseU,grave
accent
Ú
Ú
uppercaseU,acute
accent
Û
Û
uppercaseU,
<
<
<
lessthansign
¯or
&hibar
¯
macronaccent
&mdash
—
emdash
µ
µ
microsign
·
·
middledot
https://en.wikibooks.org/wiki/HyperText_Markup_Language/Print_version
11/46
6/27/2016
HyperTextMarkupLanguage/PrintversionWikibooks,openbooksforanopenworld
 
 
nonbreakingspace
(invisible)
&ndash
–
endash
¬
¬
notsign
overline,=spacing
overscore
&oline
ª
ª
feminineordinal
º
º
masculineordinal
¶
¶
paragraphsign
permillsign
&permil
±
±
plusorminus
£
£
poundsterling
circumflexaccent
Ü
Ü
uppercaseU,umlaut
Ý
Ý
uppercaseY,acute
accent
Þ Þ
uppercaseTHORN,
Icelandic
ß
ß
lowercasesharps,
German
à
à
lowercasea,grave
accent
á
á
lowercasea,acute
accent
â
â
lowercasea,
circumflexaccent
"
"
"
doublequotation
mark
ã
ã
lowercasea,tilde
»
»
rightanglequote
ä
ä
lowercasea,umlaut
&rarr
rightwardarrow
å
å
lowercasea,ring
&rdquo
rightdoublequote
æ
æ
lowercaseae
registered
trademark
ç
ç
lowercasec,cedilla
è
è
singleright
pointingangle
quote
lowercasee,grave
accent
é
é
lowercasee,acute
accent
®
®
&rsaquo
&rsquo
rightsinglequote
&sbquo
singlelow9quote
ê
ê
lowercasee,
circumflexaccent
sectionsign
ë
ë
lowercasee,umlaut
ì
ì
lowercasei,grave
accent
í
í
lowercasei,acute
accent
§
§
­
­
&spades
softhyphen
blackspadesuit
¹
¹
superscriptone
²
²
superscripttwo
³
³
superscriptthree
î
î
×
×
multiplicationsign
lowercasei,
circumflexaccent
&trade
trademarksign
ï
ï
lowercasei,umlaut
&uarr
upwardarrow
ð
ð
lowercaseeth,
Icelandic
¨or
&die
¨
umlaut
ñ
ñ
lowercasen,tilde
¥
¥
yensign
ò
ò
lowercaseo,grave
accent
ó
ó
lowercaseo,acute
accent
ô
ô
lowercaseo,
circumflexaccent
õ
õ
lowercaseo,tilde
ö
ö
lowercaseo,umlaut
https://en.wikibooks.org/wiki/HyperText_Markup_Language/Print_version
12/46
6/27/2016
HyperTextMarkupLanguage/PrintversionWikibooks,openbooksforanopenworld
ø
ø
lowercaseo,slash
ù
ù
lowercaseu,grave
accent
ú
ú
lowercaseu,acute
accent
û
û
lowercaseu,
circumflexaccent
ü
ü
lowercaseu,umlaut
ý
ý
lowercasey,acute
accent
þ
þ
lowercasethorn,
Icelandic
ÿ
ÿ
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.
https://en.wikibooks.org/wiki/HyperText_Markup_Language/Print_version
13/46
6/27/2016
Element
HyperTextMarkupLanguage/PrintversionWikibooks,openbooksforanopenworld
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;}
https://en.wikibooks.org/wiki/HyperText_Markup_Language/Print_version
14/46
6/27/2016
HyperTextMarkupLanguage/PrintversionWikibooks,openbooksforanopenworld
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:
https://en.wikibooks.org/wiki/HyperText_Markup_Language/Print_version
15/46
6/27/2016
HyperTextMarkupLanguage/PrintversionWikibooks,openbooksforanopenworld
<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:
https://en.wikibooks.org/wiki/HyperText_Markup_Language/Print_version
16/46
6/27/2016
HyperTextMarkupLanguage/PrintversionWikibooks,openbooksforanopenworld
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.
https://en.wikibooks.org/wiki/HyperText_Markup_Language/Print_version
17/46
6/27/2016
HyperTextMarkupLanguage/PrintversionWikibooks,openbooksforanopenworld
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:
https://en.wikibooks.org/wiki/HyperText_Markup_Language/Print_version
18/46
6/27/2016
HyperTextMarkupLanguage/PrintversionWikibooks,openbooksforanopenworld
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>
<dd>DefinitionofTerm2</dd>
</dl>
Examplerendering:
Term1
DefinitionofTerm1
Term2
DefinitionofTerm2
Iftwotermssharethesamedefinitiontheycanbegroupedtogetherlikeso:
<dl>
https://en.wikibooks.org/wiki/HyperText_Markup_Language/Print_version
19/46
6/27/2016
HyperTextMarkupLanguage/PrintversionWikibooks,openbooksforanopenworld
<dt>CascadingStyleSheets</dt>
<dt>CSS</dt>
<dd>DefinitionofCascadingStyleSheets(akaCSS)</dd>
<dt>Term2</dt>
<dd>DefinitionofTerm2</dd>
</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
https://en.wikibooks.org/wiki/HyperText_Markup_Language/Print_version
20/46
6/27/2016
HyperTextMarkupLanguage/PrintversionWikibooks,openbooksforanopenworld
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.
https://en.wikibooks.org/wiki/HyperText_Markup_Language/Print_version
21/46
6/27/2016
HyperTextMarkupLanguage/PrintversionWikibooks,openbooksforanopenworld
<!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>
https://en.wikibooks.org/wiki/HyperText_Markup_Language/Print_version
22/46
6/27/2016
HyperTextMarkupLanguage/PrintversionWikibooks,openbooksforanopenworld
</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
https://en.wikibooks.org/wiki/HyperText_Markup_Language/Print_version
23/46
6/27/2016
HyperTextMarkupLanguage/PrintversionWikibooks,openbooksforanopenworld
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.
https://en.wikibooks.org/wiki/HyperText_Markup_Language/Print_version
24/46
6/27/2016
HyperTextMarkupLanguage/PrintversionWikibooks,openbooksforanopenworld
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
1.Openyourtable.htmfile.
2.Inthe<tableborder=2>tag,wewilladdtheheightandwidth
e.g.<tableborder=2height=200width=300>
3.Savethefileandthenviewit.Resizethebrowserwindow,andwatchwhathappensthetablesizestaysthe
same.
4.Experimentchangingthemeasurementsandviewthefileagain.
5.Nowreplacethepixelsmeasurementswithpercentages
https://en.wikibooks.org/wiki/HyperText_Markup_Language/Print_version
25/46
6/27/2016
HyperTextMarkupLanguage/PrintversionWikibooks,openbooksforanopenworld
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.
https://en.wikibooks.org/wiki/HyperText_Markup_Language/Print_version
26/46
6/27/2016
HyperTextMarkupLanguage/PrintversionWikibooks,openbooksforanopenworld
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
1.Openyourtable.htmfile.
2.Experimentwithmakingonetablecellspanacrossmultiplerows.
3.Experimentwithmakingonetablecellspanacrossmultiplecolumns.
4.Viewtheresulteachtime.
Backgroundcolourandimages
Itispossibletogiveeachtablecell,(orrow,ortable)adifferentbackgroundcolour.
https://en.wikibooks.org/wiki/HyperText_Markup_Language/Print_version
27/46
6/27/2016
HyperTextMarkupLanguage/PrintversionWikibooks,openbooksforanopenworld
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
1.Openyourtable.htmfile.
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
https://en.wikibooks.org/wiki/HyperText_Markup_Language/Print_version
28/46
6/27/2016
HyperTextMarkupLanguage/PrintversionWikibooks,openbooksforanopenworld
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
https://en.wikibooks.org/wiki/HyperText_Markup_Language/Print_version
29/46
6/27/2016
HyperTextMarkupLanguage/PrintversionWikibooks,openbooksforanopenworld
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
https://en.wikibooks.org/wiki/HyperText_Markup_Language/Print_version
30/46
6/27/2016
HyperTextMarkupLanguage/PrintversionWikibooks,openbooksforanopenworld
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;
https://en.wikibooks.org/wiki/HyperText_Markup_Language/Print_version
31/46
6/27/2016
HyperTextMarkupLanguage/PrintversionWikibooks,openbooksforanopenworld
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
https://en.wikibooks.org/wiki/HyperText_Markup_Language/Print_version
32/46
6/27/2016
HyperTextMarkupLanguage/PrintversionWikibooks,openbooksforanopenworld
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)
https://en.wikibooks.org/wiki/HyperText_Markup_Language/Print_version
33/46
6/27/2016
HyperTextMarkupLanguage/PrintversionWikibooks,openbooksforanopenworld
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.
https://en.wikibooks.org/wiki/HyperText_Markup_Language/Print_version
34/46
6/27/2016
HyperTextMarkupLanguage/PrintversionWikibooks,openbooksforanopenworld
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:
<linkrel="stylesheet"type="text/css"href="style.css">
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.
https://en.wikibooks.org/wiki/HyperText_Markup_Language/Print_version
35/46
6/27/2016
HyperTextMarkupLanguage/PrintversionWikibooks,openbooksforanopenworld
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
https://en.wikibooks.org/wiki/HyperText_Markup_Language/Print_version
36/46
6/27/2016
HyperTextMarkupLanguage/PrintversionWikibooks,openbooksforanopenworld
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]>
<![ifIE5.5000]>YouareusingIE/win5.5.<![endif]>
https://en.wikibooks.org/wiki/HyperText_Markup_Language/Print_version
37/46
6/27/2016
HyperTextMarkupLanguage/PrintversionWikibooks,openbooksforanopenworld
<![ifIE6.0]>YouareusingIE/win6.0.<![endif]>
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>
<title>Conditionalcomments</title>
<linkrel="stylesheet"type="text/css"href="style.css">
https://en.wikibooks.org/wiki/HyperText_Markup_Language/Print_version
38/46
6/27/2016
HyperTextMarkupLanguage/PrintversionWikibooks,openbooksforanopenworld
<![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
https://en.wikibooks.org/wiki/HyperText_Markup_Language/Print_version
39/46
6/27/2016
HyperTextMarkupLanguage/PrintversionWikibooks,openbooksforanopenworld
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]>
<![ifIE5.5000]>YouareusingIE/win5.5.<![endif]>
<![ifIE6.0]>YouareusingIE/win6.0.<![endif]>
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]>
https://en.wikibooks.org/wiki/HyperText_Markup_Language/Print_version
40/46
6/27/2016
HyperTextMarkupLanguage/PrintversionWikibooks,openbooksforanopenworld
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>
<title>Conditionalcomments</title>
<linkrel="stylesheet"type="text/css"href="style.css">
<![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).
https://en.wikibooks.org/wiki/HyperText_Markup_Language/Print_version
41/46
6/27/2016
HyperTextMarkupLanguage/PrintversionWikibooks,openbooksforanopenworld
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
https://en.wikibooks.org/wiki/HyperText_Markup_Language/Print_version
42/46
6/27/2016
HyperTextMarkupLanguage/PrintversionWikibooks,openbooksforanopenworld
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
https://en.wikibooks.org/wiki/HyperText_Markup_Language/Print_version
43/46
6/27/2016
HyperTextMarkupLanguage/PrintversionWikibooks,openbooksforanopenworld
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>)
https://en.wikibooks.org/wiki/HyperText_Markup_Language/Print_version
44/46
6/27/2016
HyperTextMarkupLanguage/PrintversionWikibooks,openbooksforanopenworld
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
https://en.wikibooks.org/wiki/HyperText_Markup_Language/Print_version
45/46
6/27/2016
HyperTextMarkupLanguage/PrintversionWikibooks,openbooksforanopenworld
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.
https://en.wikibooks.org/wiki/HyperText_Markup_Language/Print_version
46/46
You might also like
- Hourglass Workout Program by Luisagiuliet 276% (21)Hourglass Workout Program by Luisagiuliet 251 pages
- Read People Like A Book by Patrick King-Edited58% (81)Read People Like A Book by Patrick King-Edited12 pages
- Livingood, Blake - Livingood Daily Your 21-Day Guide To Experience Real Health77% (13)Livingood, Blake - Livingood Daily Your 21-Day Guide To Experience Real Health260 pages
- Donald Trump & Jeffrey Epstein Rape Lawsuit and Affidavits83% (1016)Donald Trump & Jeffrey Epstein Rape Lawsuit and Affidavits13 pages
- The 36 Questions That Lead To Love - The New York Times94% (34)The 36 Questions That Lead To Love - The New York Times3 pages
- The 36 Questions That Lead To Love - The New York Times95% (21)The 36 Questions That Lead To Love - The New York Times3 pages
- 14 Easiest & Hardest Muscles To Build (Ranked With Solutions)100% (8)14 Easiest & Hardest Muscles To Build (Ranked With Solutions)27 pages
- Jeffrey Epstein39s Little Black Book Unredacted PDF75% (12)Jeffrey Epstein39s Little Black Book Unredacted PDF95 pages
- The 4 Hour Workweek, Expanded and Updated by Timothy Ferriss - Excerpt23% (954)The 4 Hour Workweek, Expanded and Updated by Timothy Ferriss - Excerpt38 pages
- Chapter: 9.2 HTML Page Structure Topic: 9.2.1 Introduction To HTMLNo ratings yetChapter: 9.2 HTML Page Structure Topic: 9.2.1 Introduction To HTML18 pages
- Objective of This Course The WWW and History of HTML HTML in Brief Why HTML??? Objective of This CourseNo ratings yetObjective of This Course The WWW and History of HTML HTML in Brief Why HTML??? Objective of This Course3 pages
- The Ultimate Guide To Master HTML - CSSNo ratings yetThe Ultimate Guide To Master HTML - CSS87 pages
- a1.3.0.0 INTRODUCTION TO WEBSITE DESIGNINGNo ratings yeta1.3.0.0 INTRODUCTION TO WEBSITE DESIGNING25 pages
- Introduction to Hyper Text Markup LanguageNo ratings yetIntroduction to Hyper Text Markup Language31 pages
- HTML/Training/What Is HTML?: Published YearNo ratings yetHTML/Training/What Is HTML?: Published Year2 pages
- What Is HTML?: HTML Documents Web PagesNo ratings yetWhat Is HTML?: HTML Documents Web Pages12 pages
- Markup Languages and The Web, Web Designing Using HTML, CSS and Java ScriptingNo ratings yetMarkup Languages and The Web, Web Designing Using HTML, CSS and Java Scripting16 pages
- Presentation Web Design Basic 1595487867 382444No ratings yetPresentation Web Design Basic 1595487867 38244410 pages
- HTML Demystified: Crafting Web Content with Hypertext Markup LanguageFrom EverandHTML Demystified: Crafting Web Content with Hypertext Markup LanguageNo ratings yet
- Comprehensive Guide to LaTeX: Advanced Techniques and Best PracticesFrom EverandComprehensive Guide to LaTeX: Advanced Techniques and Best PracticesNo ratings yet
- Piyush Khandelia Piyush Khandelia I Sreedhar Balaji Krishna Murthy B Sreenivasulu Madhavi Ramesh Premnath ChandrakalaNo ratings yetPiyush Khandelia Piyush Khandelia I Sreedhar Balaji Krishna Murthy B Sreenivasulu Madhavi Ramesh Premnath Chandrakala2 pages
- Hello BND Welcome To Scribd!!! BBBBBBBBB BBBBBBBBB BBBBBBBBBNo ratings yetHello BND Welcome To Scribd!!! BBBBBBBBB BBBBBBBBB BBBBBBBBB5 pages
- Instruction Division: Theory of Elasticity & Plast Materials Tech and TestingNo ratings yetInstruction Division: Theory of Elasticity & Plast Materials Tech and Testing1 page
- Zinnov Zones 2016 - Internet of Things RatingsNo ratings yetZinnov Zones 2016 - Internet of Things Ratings35 pages
- Hello and Welcome To Scribd!!! Aaaaaaaaaa Aaaaaaaaaa AaaaaaaaaaNo ratings yetHello and Welcome To Scribd!!! Aaaaaaaaaa Aaaaaaaaaa Aaaaaaaaaa5 pages
- Hello and Welcome To Scribd!!! Aaaaaaaaaaaaa Aaaaaaaaaaaaa AaaaaaaaaaaaaNo ratings yetHello and Welcome To Scribd!!! Aaaaaaaaaaaaa Aaaaaaaaaaaaa Aaaaaaaaaaaaa4 pages
- Aaaaaaaaaaaaaaaaaaaaaaaa Aaaaa Insert Something HereNo ratings yetAaaaaaaaaaaaaaaaaaaaaaaa Aaaaa Insert Something Here1 page
- Eeeeeeeeeeeeeeeeeeeee Eeeeeeeeeeeeeee Insert Something HereNo ratings yetEeeeeeeeeeeeeeeeeeeee Eeeeeeeeeeeeeee Insert Something Here1 page
- Indian National Olympiad in Informatics, 2003No ratings yetIndian National Olympiad in Informatics, 20035 pages
- How To Configure Wireless Network in Packet TracerNo ratings yetHow To Configure Wireless Network in Packet Tracer7 pages
- Influences of Globalization To The Dressing StyleNo ratings yetInfluences of Globalization To The Dressing Style4 pages
- U Ser Document: A Dobe Acrobat 7.0 For Microsoft Windows Group Policy Objects and Active DirectoryNo ratings yetU Ser Document: A Dobe Acrobat 7.0 For Microsoft Windows Group Policy Objects and Active Directory20 pages
- Copy of Blue and White Gradient Modern Healthcare Business Professional Medical Center PresentationNo ratings yetCopy of Blue and White Gradient Modern Healthcare Business Professional Medical Center Presentation36 pages
- Insights e Commerce in Asia Bracing For Digital DisruptionNo ratings yetInsights e Commerce in Asia Bracing For Digital Disruption28 pages
- Technology For Teaching and Learning in The Elementary GradesNo ratings yetTechnology For Teaching and Learning in The Elementary Grades7 pages
- Time Order: Taken and Adapted From Mikulecky, B. & L. Jeffries. (2005) - Reading Power. Pears Education, Inc. USANo ratings yetTime Order: Taken and Adapted From Mikulecky, B. & L. Jeffries. (2005) - Reading Power. Pears Education, Inc. USA4 pages
- Using Corpora in The Language Learning Classroom Corpus Linguistics For Teachers My AtcNo ratings yetUsing Corpora in The Language Learning Classroom Corpus Linguistics For Teachers My Atc22 pages
