Documenti di Didattica
Documenti di Professioni
Documenti di Cultura
HyperText Markup Language/Print version - Wikibooks, open books for an open world
HyperTextMarkupLanguage/Printversion
ThisisaguidetoHTMLthemarkuplanguageoftheWorldWideWeb.ThisbookisaboutHTML,notabout
howtomakeitdynamic,onwhichseeJavaScript.
Contents
1Introduction
1.1Beforewestart
1.2Asimpledocument
1.3GeneralHTMLtagcodestyle
1.3.1The<html>Tag
2HeadandBody
2.1TheHEADelement
2.2TheTITLEelement
2.3TheBODYelement
3ParagraphsandHeadings
3.1Paragraphs
3.2Headings
3.3Example
4TextFormatting
4.1Emphasis
4.2Preformattedtext
4.3SpecialCharacters
4.4Abbreviations
4.5DiscouragedFormatting
4.6CascadingStyleSheets
5Hyperlinks
5.1Absolutevs.Relative
5.2LinkingtoalocationwithinapagewithAnchor
5.3TargetLinks
5.4Specialtargets
5.5Hyperlinksonimages
6Images
6.1Placement
6.2Alternativetextandtooltip
6.3Widthandheight
7Lists
7.1OrderedLists
7.2UnorderedLists
7.3DefinitionLists
7.4NestedLists
7.5Noteonformat
7.6Example
8Tables
8.1Minimaltables
8.2Captionandheadings
8.3Borders
8.4HeightandWidth
8.5CellSpacingandCellPadding
8.6Alignmentoftablecells
8.7Rowspanandcolumnspan
8.8Backgroundcolourandimages
https://en.wikibooks.org/wiki/HyperText_Markup_Language/Print_version
1/44
10/27/2015
HyperText Markup Language/Print version - Wikibooks, open books for an open world
8.9Columngroups
8.10Summary
9Quotations
9.1Inlinequotations
9.2Blockquotations
10Comments
11Forms
11.1FormattingwithCSS
11.1.1TheHTML
11.1.2TheCSS
11.2References
12CSS
12.1WhatdoesCSSdo?
12.2HowtoaddaCSSstylesheet
13ValidatingHTML
14ConditionalComments
14.1Syntax
14.2UsewithCSS
14.3Externallinks
15ProscribedTechniques
16Frames
17Layers
18Music
19Browsers'extensions
20ConditionalComments
20.1Syntax
20.2UsewithCSS
20.3Externallinks
21Appendices
22TagList
23StandardAttributesList
23.1Attributes
23.1.1class
23.1.2code
23.1.3codebase
23.1.4dir
23.1.5height
23.1.6id
23.1.7lang
23.1.8style
23.1.9title
23.1.10width
23.2Moreattributes
23.2.1accesskey
23.2.2tabindex
24Glossary
24.1B
24.2E
24.3I
24.4T
25Links
Introduction
https://en.wikibooks.org/wiki/HyperText_Markup_Language/Print_version
2/44
10/27/2015
HyperText Markup Language/Print version - Wikibooks, open books for an open world
TheHTML(HyperTextMarkupLanguage)isusedinmostpagesoftheWorldWideWeb.HTMLfiles
containboththeprimarytextcontentandadditionalformattingmarkup,i.e.sequencesofcharactersthattell
webbrowsershowtodisplayandhandlethemaincontent.Themarkupcanspecifywhichpartsoftextshould
bebold,wheretheheadingsare,orwheretables,tablerows,andtablecellsstartandend.Thoughmost
commonlydisplayedbyavisualwebbrowser,HTMLcanalsobeusedbybrowsersthatgenerateaudioofthe
text,bybraillereadersthatconvertpagestoabrailleformat,andbyaccessoryprogramssuchasemailclients.
Beforewestart
ToauthorandtestHTMLpages,youwillneedaneditorandawebbrowser.HTMLcanbeeditedinanyplain
texteditor.Ideally,useonethathighlightsHTMLmarkupwithcolorstomakeiteasiertoread.Commonplain
texteditorsincludeNotepad(orNotepad++)forMicrosoftWindows,TextEditforMac,andKate,Gedit,
Vim,andEmacsforLinux.
Manyotherseditorsexistwithawiderangeoffeatures.WhilesomeofferWYSIWYG(whatyouseeiswhat
youget)functionality,thatmeanshidingthemarkupitselfandhavingtoautogenerateit.WYSIWYGoptions
areneverascleanortransparentorasusefulforlearningcomparedwithrealcodebasedtexteditors.
Topreviewyourdocuments,you'llneedawebbrowser.Toassuremostviewerswillseegoodresults,ideally
youwilltestyourdocumentsinseveralbrowsers.Eachbrowserhasslightlydifferentrenderingandparticular
quirks.
ThemostcommonbrowsersincludeMicrosoftInternetExplorer,GoogleChrome,MozillaFirefox,Safari,and
Opera.Toassurethatyourdocumentsarereadableinatextonlyenvironment,youcantestwithLynx.
Asimpledocument
Let'sstartwithasimpledocument.Writethiscodeinyoureditor(orcopyandpasteit),andsaveitas
"index.html"or"index.htm".Thefilemustbesavedwiththeexactextension,oritwillnotberendered
correctly.
<!DOCTYPE html>
<html>
<head>
<title>Simple document</title>
</head>
<body>
<p>This is some text in a paragraph that will be seen by viewers.</p>
</body>
</html>
Nowopenthedocumentinyourbrowserandlookattheresult.Fromtheaboveexample,wecandeduce
certainessentialsofanHTMLdocument:
Thefirstlinewith<!DOCTYPE html>declaresthetypeofthedocument.
TheHTMLdocumentbeginswitha<html>tagandendswithitscounterpart,the</html>tag.
Withinthe<html></html>tags,therearetwomainpairsoftags,<head></head>and<body></body>.
Withinthe<head></head>tags,therearethe<title></title>tagswhichenclosethetextualtitleto
beshowninthetitlebarofthewebbrowser.
Withinthe<body></body>isaparagraphmarkedbya<p></p>tagpair.
GeneralHTMLtagcodestyle
Mosttagsmustbewritteninpairsbetweenwhichtheeffectsofthetagwillbeapplied.
<em>Thistextisemphasized</em>Thistextisemphasized
https://en.wikibooks.org/wiki/HyperText_Markup_Language/Print_version
3/44
10/27/2015
HyperText Markup Language/Print version - Wikibooks, open books for an open world
Thistextincludes<code>computercode</code>Thistextincludescomputer code
<em>Thistextisemphasizedandhas<code>computercode</code></em>Thistextis
emphasizedandhascomputer code
HTMLtagpairsmustbealignedtoencapsulateothertagpairs,forexample:
<code><em>Thistextisbothcodeandemphasized</em></code>This text is both code
and emphasized
Amistake:<em><code>Thismarkupiserroneous</em></code>
The<html>Tag
The<html>and</html>tagsareusedtomarkthebeginningandendofanHTMLdocument.Thistagdoes
nothaveanyeffectontheappearanceofthedocument.
ThistagisusedtomakebrowsersandotherprogramsknowthatthisisanHTMLdocument.
Usefulattributes:
dirattribute
Thisattributespecifiesinwhichmannerthebrowserwillpresenttextwithintheentiredocument.Itcan
havevaluesofeitherltr(lefttoright)orrtl(righttoleft).Bydefaultthisissettoltr.Generallyrtlis
usedforlanguageslikePersian,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
AnHTMLfileisdividedintotwobasicsections:theheadandthebody,eachdemarcatedbytheirrespective
tags.Thus,theessentialstructureofanHTMLdocumentlookslikethis:
<!DOCTYPE html>
<html lang="...">
<head>
https://en.wikibooks.org/wiki/HyperText_Markup_Language/Print_version
4/44
10/27/2015
HyperText Markup Language/Print version - Wikibooks, open books for an open world
...
</head>
<body>
...
</body>
</html>
TheHEADelement
AlldataintheheadsectionofanHTMLdocumentisconsidered"metadata",meaning"dataaboutdata".The
informationinthissectionisnotnormallydisplayeddirectly.Insteadelementssuchasstyleaffectthe
appearanceofotherelementsinthedocument.Someitemsintheheadsectionmaybeusedbyprogramssuch
assearchenginestolearnmoreaboutthepageforreferencepurposes.
Theheadelementshouldalwayscontainatitleelementwhichsetsthetitlecommonlydisplayedbytheweb
browserinthetitlebarofthewindow.Hereisanexampleoftheuseofthetitleelement:
<head>
<title>This is the Title</title>
</head>
Therecanonlybeonetitleintheheadersection.
Theremaybeanynumberofthefollowingelementsinsidetheheadelement:
style
Usedtoembedstylerulesinadocument.Inmostcases,aconsistentlookacrossmultiplewebpagesis
desired,sostyleisspecifiedinaseparatestylesheetfile,linkedusingthelinkelement.Thus,styleis
usedintheheadwhenthestyleappliestothispageonly.
link
Usedtolinkthepagetovariousexternalfiles,suchasastylesheetorthelocationoftheRSSfeedfor
thepage.Thetypeoflinkissetusingtherelattribute.ThetypeattributespecifiestheMIMEtypeof
thedocumentfoundatthelocationgivenbythehrefattribute.Thisallowsthebrowsertoignorelinks
toMIMEtypesitdoesnotsupport.Examples:
<link rel="stylesheet" type="text/css" href="style.css">
script
UsedtolinktoanexternalJavascriptfileortoembedJavascriptinthepage.Linkingtoanexternalfile
isthepreferredtechniqueinrealwebpagesthoughmanyexamplesembedthescriptforsimplicity.
meta
UsedtosetadditionalmetadatapropertiesfortheHTMLdocument,suchasrelatedkeywords,etc.
Examples:
<meta charset=utf-8">
object
Embedsagenericobject.Thiselementisnotcommonlyusedinthehead,butratherinthebodysection.
https://en.wikibooks.org/wiki/HyperText_Markup_Language/Print_version
5/44
10/27/2015
HyperText Markup Language/Print version - Wikibooks, open books for an open world
Theremayalsobeasinglebaseelement.ThiselementsetsthebaseURI
(http://en.wikipedia.org/wiki/Uniform_resource_identifier)forresolvingrelativeURI
(http://en.wikipedia.org/wiki/Uniform_resource_identifier)s.Itisrarelynecessarytousethiselement.
TheTITLEelement
Thetitleelementcontainsyourdocumenttitleandidentifiesitscontentsinaglobalcontext.Thetitleis
typicallydisplayedinthetitlebaratthetopofthebrowser'swindow.
Itisalsodisplayedonthebookmarklistofthebrowser.
Titleisalsousedtoidentifyyourpageforsearchengines.
Example:<html><head><title>SomeAmazingWebPage</title></head></html>
TheBODYelement
Unliketheheadelement,anyplaintextplacedbetweenthe<body>tagswillbedisplayedonthewebpageby
thebrowser.
Whattoavoid.Thefollowingexampleisbadpractice:
<body text='black' link='red' alink='pink' vlink='blue'
bgcolor='#DDDDDD' background='wallpaper.gif'>
...
</body>
ThecurrentstandardisHTML5,andtext,link,alink,vlink,bgcolorandbackgroundattributeshaveall
beenlongdeprecated.Youmayfindtheminolderfiles,buttheyshouldnotbeusednow.Theyhavebeen
supersededbytheCSSrulesgivenbelow(usingtheserulesisdiscussedinalatersectionHyperTextMarkup
Language/CSS).Thevaluesfromthepreviousexamplehavebeenusedasexamplesintheserules.
text
body { color:black }
bgcolor
body { background-color:#DDDDDD }
background
body { background-image: 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)
ParagraphsandHeadings
Thebulkofatypicalwebpageoftenconsistsparagraphsstructuredwiththeuseofheadings.
Paragraphs
Thepelementisusedtosplittextintoparagraphs.
https://en.wikibooks.org/wiki/HyperText_Markup_Language/Print_version
6/44
10/27/2015
HyperText Markup Language/Print version - Wikibooks, open books for an open world
Headings
Therearesixlevelsofheadings.Themostimportantheading(s)inadocumentshouldbelevelone.Sub
headingsshouldbeleveltwo.Subsubheadingsshouldbelevelthree,etc.Donotskiplevels.Ifthedefault
sizesdonotsuityourdocument,useCSStochangethem.Headingsshouldbeusedtoeffectivelyoutlineyour
content.Bydoingso,userscanfindinformationmorequickly,andsomesearchenginesuseheadingstohelp
rankpagecontent.
ThisisLevel1
<h3>This is Level 3</h3>
ThisisLevel3
<h5>This is Level 5</h5>
ThisisLevel5
Example
Thisexamplewillbeusedinthenextsectionwhereweseehowtochangetheappearanceofadocument.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Sundial</title>
</head>
<body>
<h1>Sundial</h1>
<p>From Wikipedia, the free encyclopedia.</p>
<p>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.
</p>
<p>Most sundial designs indicate apparent solar time. Minor design variations can measure standard
and daylight saving time, as well.
</p>
<h2>History</h2>
<p>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).
</p>
<p>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.
https://en.wikibooks.org/wiki/HyperText_Markup_Language/Print_version
7/44
10/27/2015
HyperText Markup Language/Print version - Wikibooks, open books for an open world
</p>
<h3>Installation of standard sundials</h3>
<p>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.
</p>
<p>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.
</p>
<p>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.
</p>
<p>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.
</p>
</body>
</html>
TextFormatting
TheTextFormattingelementsgivelogicalstructuretophrasesinyourHTMLdocument.Thisstructureis
normallypresentedtotheuserbychangingtheappearanceofthetext.
WehaveseenintheIntroductiontothisbookhowwecanemphasizetextbyusing<em></em>tags.Graphical
browsersnormallypresentemphasizedtextinitalics.SomeScreenreaders,utilitieswhichreadthepagetothe
user,mayspeakemphasizedwordswithadifferentinflection.
Acommonmistakeistotaganelementtogetacertainappearanceinsteadoftaggingitsmeaning.This
issuebecomesclearerwhentestinginmultiplebrowsers,especiallywithgraphicalandtextonlybrowsersas
wellasscreenreaders.
YoucanchangethedefaultpresentationforanyelementusingCascadingStyleSheets.Forexample,ifyou
wantedallemphasizedtexttoappearinrednormaltextyouwouldusethefollowingCSSrule:
em { font-style:normal; color:red; }
Inthissection,wewillexploreafewbasicwaysinwhichyoucanmarkupthelogicalstructureofyour
document.
Emphasis
HTMLhaselementsfortwodegreesofemphasis:
Theemelementforemphasizedtext,usuallyrenderedinitalics.
Thestrongelementforstronglyemphasizedtext,usuallyrenderedinbold.
Anexampleofemphasizedtext:
https://en.wikibooks.org/wiki/HyperText_Markup_Language/Print_version
8/44
10/27/2015
HyperText Markup Language/Print version - Wikibooks, open books for an open world
Anexamplerendering:
Itisessentialnotonlytoguessbutactuallyobservetheresults.
Anexampleofstronglyemphasizedtext:
Let us now focus on <strong>structural markup</strong>.
Anexamplerendering:
Letusnowfocusonstructuralmarkup.
Preformattedtext
Preformattedtextisrenderedusingfixedwidthfont,andwithoutcondensingmultiplespacesintoone,which
resultsinpreservedspacing.Newlinesarerenderedasnewlines,unlikeoutsidepreformattedtext.HTML
markupinthepreformattedtextisstillinterpretedbybrowsersthough,meaningthat"<em>a</em>"willstill
berenderedas"a".
Tocreatepreformattedtext,startitwith<pre>andenditwith</pre>.
Anexample:
<pre>
,-----------------------,
| No. | Person
|
|-----------------------|
| 1. | Bill Newton
|
| 2. | Magaret Clapton |
'-----------------------'
</pre>
Theresultingrendering:
,-----------------------,
| No. | Person
|
|-----------------------|
| 1. | Bill Newton
|
| 2. | Magaret Clapton |
'-----------------------'
Omittingthepreformattingtagswillcausethesametexttoappearallinoneline:
,,|No.|Person||||1.|BillNewton||2.|MagaretClapton|'
'
SpecialCharacters
ToinsertnonstandardcharactersorcharactersthatholdspecialmeaninginHTML,acharacterreferenceis
required.Forexample,toinputtheampersand,"&","&"mustbetyped.Characterscanalsobeinserted
bytheirASCIIorUnicodenumbercode.
https://en.wikibooks.org/wiki/HyperText_Markup_Language/Print_version
9/44
10/27/2015
HyperText Markup Language/Print version - Wikibooks, open books for an open world
NameCode
Number
Glyph
Code
´
´
acuteaccent
&
&
&
ampersand
&bdquo
Description
Name
Code
Number
Glyph
Code
Description
À À
uppercaseA,grave
accent
doublelow9
quote
Á
Á
uppercaseA,acute
accent
¦or
&brkbar
¦
brokenvertical
bar
Â
Â
uppercaseA,
circumflexaccent
¸
¸
cedilla
Ã
Ã
uppercaseA,tilde
¢
¢
centsign
Ä
Ä
blackclubsuit
uppercaseA,
umlaut
copyright
Å
Å
uppercaseA,ring
Æ
Æ
uppercaseAE
generalcurrency
sign
Ç
Ç
&dagger
dagger
uppercaseC,
cedilla
&Dagger
doubledagger
È
È
uppercaseE,grave
accent
&darr
downwardarrow
degreesign
É
É
uppercaseE,acute
accent
blackdiamond
suit
Ê
Ê
uppercaseE,
circumflexaccent
Ë
Ë
uppercaseE,
umlaut
Ì
Ì
uppercaseI,grave
accent
Í
Í
uppercaseI,acute
accent
Î
Î
uppercaseI,
circumflexaccent
Ï
Ï
uppercaseI,umlaut
Ð
Ð
uppercaseEth,
Icelandic
Ñ
Ñ
uppercaseN,tilde
Ò Ò
uppercaseO,grave
accent
&clubs
©
¤
°
©
¤
°
&diams
÷
÷
divisionsign
½
½
onehalf
¼
¼
onefourth
¾
¾
threefourths
&frasl
/
slash
>
>
>
greaterthansign
blackheartsuit
inverted
exclamation
&hearts
¡
¡
¿
¿
invertedquestion
mark
«
«
leftanglequote
&larr
leftwardarrow
&ldquo
leftdoublequote
Ó
Ó
&lsaquo
singleleft
pointingangle
quote
uppercaseO,acute
accent
Ô
Ô
uppercaseO,
circumflexaccent
&lsquo
leftsinglequote
Õ
Õ
uppercaseO,tilde
<
<
<
lessthansign
Ö
Ö
¯or
&hibar
uppercaseO,
umlaut
¯
macronaccent
Ø
Ø
uppercaseO,slash
&mdash
—
emdash
Ù Ù
µ
µ
microsign
uppercaseU,grave
accent
·
·
middledot
Ú
uppercaseU,acute
accent
https://en.wikibooks.org/wiki/HyperText_Markup_Language/Print_version
Ú
10/44
10/27/2015
HyperText Markup Language/Print version - Wikibooks, open books for an open world
 
 
nonbreaking
space(invisible)
&ndash
–
endash
¬
¬
notsign
&oline
Û
Û
uppercaseU,
circumflexaccent
Ü
Ü
uppercaseU,
umlaut
overline,=
spacingoverscore
Ý
Ý
uppercaseY,acute
accent
Þ Þ
uppercaseTHORN,
Icelandic
ß
ß
lowercasesharps,
German
à
à
lowercasea,grave
accent
á
á
lowercasea,acute
accent
â
â
lowercasea,
circumflexaccent
ª
ª
feminineordinal
º
º
masculineordinal
¶
¶
paragraphsign
permillsign
&permil
±
±
plusorminus
£
£
poundsterling
"
"
"
doublequotation
mark
»
rightanglequote
&rarr
rightwardarrow
ã
ã
lowercasea,tilde
&rdquo
rightdoublequote
ä
ä
lowercasea,umlaut
registered
trademark
å
å
lowercasea,ring
æ
æ
lowercaseae
&rsaquo
singleright
pointingangle
quote
ç
ç
lowercasec,cedilla
è
è
&rsquo
rightsinglequote
lowercasee,grave
accent
singlelow9
quote
é
é
lowercasee,acute
accent
ê
ê
lowercasee,
circumflexaccent
ë
ë
lowercasee,umlaut
ì
ì
lowercasei,grave
accent
í
í
lowercasei,acute
accent
î
î
lowercasei,
circumflexaccent
ï
ï
lowercasei,umlaut
®
»
®
&sbquo
§
§
­
­
&spades
sectionsign
softhyphen
blackspadesuit
¹
¹
superscriptone
²
²
superscripttwo
³
³
superscriptthree
multiplication
sign
&trade
trademarksign
&uarr
upwardarrow
ð
ð
lowercaseeth,
Icelandic
×
×
¨or
&die
¨
umlaut
ñ
ñ
lowercasen,tilde
¥
¥
yensign
ò
ò
lowercaseo,grave
accent
ó
ó
lowercaseo,acute
accent
ô
ô
lowercaseo,
circumflexaccent
õ
õ
lowercaseo,tilde
ö
ö
lowercaseo,
https://en.wikibooks.org/wiki/HyperText_Markup_Language/Print_version
11/44
10/27/2015
HyperText Markup Language/Print version - Wikibooks, open books for an open world
umlaut
ø
ø
lowercaseo,slash
ù
ù
lowercaseu,grave
accent
ú
ú
lowercaseu,acute
accent
û
û
lowercaseu,
circumflexaccent
ü
ü
lowercaseu,
umlaut
ý
ý
lowercasey,acute
accent
þ
þ
lowercasethorn,
Icelandic
ÿ
ÿ
lowercasey,
umlaut
Abbreviations
Anotherusefulelementisabbr.Thiscanbeusedtoprovideadefinitionforanabbreviation,e.g.
<abbr title="HyperText Markup Language">HTML</abbr>
Willbedisplayedas:HTML
WhenyouwillhoveroverHTML,youseeHyperTextMarkupLanguage
Graphicalbrowsersoftenshowabbreviationswithadottedunderline.Thetitleappearsasatooltip.Screen
readersmayreadthetitleattheuser'srequest.
Note:veryoldbrowsers(InternetExplorerversion6andlower)donotsupportabbr.Becausetheysupportthe
relatedelementacronym,thatelementhasbeencommonlyusedforallabbreviations.
Anacronymisaspecialabbreviationinwhichlettersfromseveralwordsarepronouncedtoformanewword
(e.g.radarRadioDetectionAndRanging).ThelettersinHTMLarepronouncedseparately,technically
makingitadifferentsortofabbreviationknownasaninitialism.
DiscouragedFormatting
HTMLsupportsvariousformattingelementswhoseuseisdiscouragedinfavoroftheuseofcascadingstyle
sheets(CSS).Here'sashortoverviewofthediscouragedformatting,sothatyouknowwhatitiswhenyousee
itinsomewebpage,andknowhowtoreplaceitwithCSSformatting.Someofthediscouragedelementsare
merelydiscouraged,othersaredeprecatedinaddition.
https://en.wikibooks.org/wiki/HyperText_Markup_Language/Print_version
12/44
10/27/2015
Element
HyperText Markup Language/Print version - Wikibooks, open books for an open world
Effect
Example
Status
CSSAlternative
boldface
bold
fontweight:bold
italics
italics
fontstyle:italics
underlined
underlined
tt
typewriter
face
typewriter face
strikethrough strikethrough
strikethrough strikethrough
deprecated
textdecoration:
underline
fontfamily:
monospace
deprecated
textdecoration:
linethrough
<strikethrough>strikethrough</strikethrough> deprecated
textdecoration:
linethrough
big
bigfont
big
fontsize:larger
small
smallfont
small
fontsize:smaller
font
fontsize
size=1
center
centera
block
deprecated fontsize:(value)
deprecated
<div
align="center">
CascadingStyleSheets
Theuseofstyleelementssuchas<b>forboldor<i>foritalicisstraightforward,butitcouplesthe
presentationlayerwiththecontentlayer.ByusingCascadingStyleSheets,theHTMLauthorcandecouple
thesetwodistinctlydifferentpartssothataproperlymarkedupdocumentmayberenderedinvariousways
whilethedocumentitselfremainsunchanged.Forexample,ifthepublisherwouldliketochangecited
referencesinadocumenttoappearasboldtextastheywerepreviouslyitalic,theysimplyneedtoupdatethe
stylesheetandnotgothrougheachdocumentchanging<b>to<i>andviceversa.CascadingStyleSheets
alsoallowthereadertomakethesechoices,overridingthoseofthepublisher.
Continuingwiththeaboveexample,let'ssaythatthepublisherhascorrectlymarkedupalltheirdocumentsby
surroundreferencestocitedmaterial(suchasthenameofabook)inthedocumentswiththe<cite>tag:
<cite>The Great Gatsby</cite>
Thentomakeallcitedreferencesbold,onewouldputsomethinglikethefollowinginthestylesheet:
cite { font-weight: bold; }
Latersomeonetellsyouthatreferencesreallyneedtobeitalic.BeforeCSS,youwouldhavetohuntthrough
allyourdocuments,changingthe<b>and</b>to<i>and</i>(butbeingcareful*not*tochangewordsthat
areinboldthatarenotcitedreferences).
ButwithCSS,it'sassimpleaschangingonelineinthestylesheetto
cite { font-style: italic; }
Hyperlinks
https://en.wikibooks.org/wiki/HyperText_Markup_Language/Print_version
13/44
10/27/2015
HyperText Markup Language/Print version - Wikibooks, open books for an open world
Hyperlinksarethebasisofnavigationoftheinternet.Theyareusedformovingaroundamongsectionsofthe
samepage,fordownloadingfiles,andforjumpingtopagesonotherwebservers.Letusstartwithaquick
example:
To learn more, see <a href="http://en.wikipedia.org/wiki/Main_Page">Wikipedia</a>.
Willbedisplayedas:Tolearnmore,seeWikipedia.
Absolutevs.Relative
Beforewegetintocreatingahyperlink(or"link"forshort),weneedtodiscussthedifferencebetweenan
AbsoluteURLandaRelativeURL.First,theAbsoluteURLcanbeusedtodirectthebrowsertoanylocation.
Forexample,anabsoluteURLmightbe:
https://en.wikibooks.org/
However,whenthereisaneedtocreatelinkstomultipleobjectsinthesamedirectorytreeasthewebpage,it
isatiringproceduretorepeatedlytypeouttheentireURLofeachobjectbeinglinkedto.Italsorequires
substantialworkshouldthewebpagemovetoanewlocation.ThisiswhereRelativeURL'scomein.They
pointtoapathrelativetothecurrentdirectoryofthewebpage.Forexample:
home.html
./home.html
../home.html
ThisisarelativeURLpointingtoaHTMLfilecalledhome.htmlwhichresidesinthesamedirectory(folder)
asthecurrentwebpagecontainingthelink.Likewise:
images/top_banner.jpg
ThisisanotherrelativeURLpointingtoasubdirectorycalledimageswhichcontainsanimagefilecalled
"top_banner.jpg".
LinkingtoalocationwithinapagewithAnchor
Sometimesspecifyingalinktoapageisn'tenough.Youmightwanttolinktoaspecificplacewithina
document.Thebookanalogueofreferencesofthistypewouldbesaying"Thirdparagraphonpage32"as
opposedtojustsaying"page32".Let'ssaythatyouwantalinkfromdocumenta.htmltoaspecificlocationin
adocumentb.html.Thenyoustartbygivinganidtotheaparticularparagraphinb.html.Thisisdoneby
adding<p id="some_name">(wheresome_nameisastringofyourchoice)astheparagraphtaginb.html.
Nowthatlocationcanbereferencedtowith<a href="b.html#some_name">fromdocumenta.html.
TargetLinks
Nowwearereadytocreateahyperlink.Hereisthebasicsyntax:
<a href="URL location" target="target">Alias</a>;
https://en.wikibooks.org/wiki/HyperText_Markup_Language/Print_version
14/44
10/27/2015
HyperText Markup Language/Print version - Wikibooks, open books for an open world
Intheabovesyntax,"URLlocation"iseithertheabsoluteorrelativepathoftheobjectbeinglinkedto.
"target"isanoptionalattributewhichspecifieswheretheobjectbeinglinkedtoistobeopened/displayed.
Forexample:
<a href="http://www.google.co.za" target=0>Google Search Engine</a>
TheaboveexampleusesanAbsoluteURLofhttp://www.google.co.za,andspecifiesatargetof"0"(which
wouldcausetheURLtobeopenedinanewbrowserwindow).
Specialtargets
_blank
Anewblankwindowisopenedtoloadthelinkeddocumentinto.Thelocationintheaddressbar(if
showninthenewwindow)givesthehyperlinklocationofthenewresourcerequestedbytheuser's
clickingonthehyperlink.
_self
Thecurrentframethatcontainsthedocumentandthelinktobeclickedonisusedtoloadthelinked
documentifthelinkispartofadocumentthatoccupiesawholewindowthenthenewdocumentis
loadedintothewholewindow,butinthecaseofaframe,thelinkeddocumentisloadedintothecurrent
frame.Thelocationwon'tbeshownintheaddressbarunlessthelinkeddocumentwasloadedintothe
mainwindowasopposedtoachildframeofaframeset.
_parent
Thelinkeddocumentisloadedintotheparentframeoftheonecontainingthelinktobeclickedonthis
isonlyimportantinnestedframesets.IfwindowWcontainsframesetFconsistingofachildframeA
andalsoachildframeBthatisitselfaframesetFFwith"grandchildren"framesCandD(givingus
WindowWwiththreevisiblepanesA,CandD),thenclickingahyperlinkinthepageinframeDwitha
target=_parentwillloadthelinkeddocumentintoD'sparentframe,thatis,intoframeB,soreplacing
framesetFFthatwaspreviouslydefinedasthecontentofframeB.DocumentsCandDthatwerethe
framesofthisframesetFFinBwillbeentirelyreplacedandthiswillleaveonlyframeAandthenew
documentfromthehyperlinkleftinframeB,allinsidethemainframesetFinwindowW.Thelocation
isonlyshownintheaddressbarofthewindowiftheparentframehappenedtobethewindowitself.
_top
Thelinkeddocumentisloadedintothewindow,replacingallfilescurrentlydisplayedinthewindowin
whateverframestheymaybefoundin.Thelocationatthetopofthewindow,intheaddress/locationbar
isseentopointtothelinkeddocumentoncethehyperlinkisclicked.
Hyperlinksonimages
Anexample:
<a href="http://en.wikipedia.org/wiki/HTML">
<img src="http://commons.wikimedia.org/wiki/Image:Html-source-code2.png"></a>
Examplerendering:
https://en.wikibooks.org/wiki/HyperText_Markup_Language/Print_version
15/44
10/27/2015
HyperText Markup Language/Print version - Wikibooks, open books for an open world
Asyoucansee,placinghyperlinksonimagesisincompleteanalogytoplacingthemontext.Insteadof
puttingtextinsidetheaelement,youplacethereanimage.
Images
Letusstartwithaquickminimumexample:
<img src="turtleneck-sweater.jpeg" />
Andletusalsohavealookatmoreextendedexample:
<img src="turtleneck-sweater.jpeg" alt="Photograph of a Turtleneck Sweater"
title="Photograph of a Turtleneck Sweater" />
Imagesarenormallystoredinexternalfiles.ToplaceanimageintoanHTMLsource,usetheimgtagwiththe
srcattributecontainingtheURLoftheimagefile.Tosupportbrowsersthatcannotrenderimages,youcan
providethealtattributewithatextualdescriptionoftheimage.Toprovideatooltiptotheimage,usethe
titleattribute.
Thespacebeforethe/>intheexamplesisthereonpurpose.Someolderbrowsersbehavestrangelyifthe
spaceisomitted.
Placement
Perdefault,imagesareplacedinlinetotheirsurroundings.Toplacetheimageasablockorfloatinstead,you
canuseCascadingStyleSheets.
https://en.wikibooks.org/wiki/HyperText_Markup_Language/Print_version
16/44
10/27/2015
HyperText Markup Language/Print version - Wikibooks, open books for an open world
Alternativetextandtooltip
TheHTMLspecificationrequiresthatallimageshaveanaltattribute.Thisiscommonlyknownasalttext.
Imagescanbesplitintotwocategories:
thosethataddtothecontentofthepage
thosethatarepurelydecorative,e.g.spacers,fancybordersandbullets.
Decorativeimagesshouldhaveemptyalttext,i.e.alt="".Imagesusedasbulletsmayuseanasterisk,
alt="*".
Allotherimagesshouldhavemeaningfulalttext.Alttextisnotadescriptionoftheimage,usethetitle
attributeforshortdescriptions.Alttextissomethingthatwillbereadinsteadoftheimage.Forexample,
<img src="company_logo.gif" alt="???"> makes the best widgets in the world.
Thealttextshouldbethecompany'snamenottheeverpopular'Ourlogo',whichwouldgivethesentence'Our
logomakesthebestwidgetsintheworld.'whenreadinatextonlybrowser.
Thealtattributestandsforalternatewhichnongraphiccapablebrowsers(suchasLynx)mayusetobetter
enableitsusertounderstandthepurposeoftheimage.Someolderbrowsersincorrectlyusethealtattribute'
tagtoproduceimagetooltips.However,thetitleattributeshouldactuallybeusedforthis.
Widthandheight
Tohaveanimageappearsmallerthanitisintheexternalfile,usetheattributeswidthandheight.Whenonly
oneortheotherisspecified,imageswillscaletokeepthesameoverallratio.
Lists
InHTML,therearethreekindsoflists,eachappropriateforadifferentkindofinformation.Anunorderedlist
madewith<ul>and</ul>tagsismeantforelementsthathavenoorderortheorderisunimportant(typically
shownwithbullets).Anorderedlistcreatedusingthe<ol>and</ol>tagsistypicallyshownwithnumbers
andisusedforelementswhoseordermatterssuchasasequenceofstepstoperform.Finally,thereare
definitionslists,createdwith<dl>and</dl>tags.
OrderedLists
Orderedlistsprovidealistofitems,eachofwhichareprecededbyanincrementalnumberstartingfrom1.
SampleHTML:
<ol>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ol>
Examplerendering:
https://en.wikibooks.org/wiki/HyperText_Markup_Language/Print_version
17/44
10/27/2015
HyperText Markup Language/Print version - Wikibooks, open books for an open world
1. Firstitem
2. Seconditem
3. Thirditem
UnorderedLists
Unorderedlistsdisplayalistofitems,eachofwhichisprefixedbyabullet.
SampleHTML:
<ul>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ul>
Examplerendering:
Firstitem
Seconditem
Thirditem
DefinitionLists
Definitionlistsdisplayalistofboldedterms,followedbythedefinitiononanewlineandprefixedbyatab
(bydefault).
SampleHTML:
<dl>
<dt>Term 1</dt>
<dd>Definition of Term 1</dd>
<dt>Term 2</dt>
<dd>Definition of Term 2</dd>
</dl>
Examplerendering:
Term1
DefinitionofTerm1
Term2
DefinitionofTerm2
Iftwotermssharethesamedefinitiontheycanbegroupedtogetherlikeso:
<dl>
<dt>Cascading Style Sheets</dt>
<dt>CSS</dt>
<dd>Definition of Cascading Style Sheets (aka CSS)</dd>
<dt>Term 2</dt>
<dd>Definition of Term 2</dd>
https://en.wikibooks.org/wiki/HyperText_Markup_Language/Print_version
18/44
10/27/2015
HyperText Markup Language/Print version - Wikibooks, open books for an open world
</dl>
Examplerendering:
CascadingStyleSheets
CSS
DefinitionofCascadingStyleSheets(akaCSS)
Term2
DefinitionofTerm2
Ifatermhastwoalternativedefinitionsuseaseparateddelementforeachdefinition,e.g.
<dl>
<dt>Mouse</dt>
<dd>Small mammal</dd>
<dd>Input device for a computer</dd>
</dl>
Examplerendering:
Mouse
Smallmammal
Inputdeviceforacomputer
Longerdefinitionscanbebrokenupintoparagraphsbynestingpelementswithintheddelement.
<dl>
<dt>Term 2</dt>
<dd>
<p>First paragraph of the definition.</p>
<p>Second paragraph of the definition.</p>
</dd>
</dl>
Examplerendering:
Term2
Firstparagraphofthedefinition.
Secondparagraphofthedefinition.
NestedLists
Listscanbenested.Anexample:
<ul>
<li>Lists
<ul>
<li>Numbered Lists</li>
https://en.wikibooks.org/wiki/HyperText_Markup_Language/Print_version
19/44
10/27/2015
HyperText Markup Language/Print version - Wikibooks, open books for an open world
<li>Unnumbered Lists</li>
</ul>
</li>
</ul>
Examplerendering:
Lists
NumberedLists
UnnumberedLists
Whennesting,nestedlistelementsshouldbewithinaparentlistitemelement.
Anexampleofincorrectnesting:
<ul>
<li>Lists</li>
<ul>
<li>Numbered Lists</li>
<li>Unnumbered Lists</li>
</ul>
</ul>
Afurtherexampleofincorrectnesting,withtwoconsecutiveULelements:
<ul>
<li>
Outer list item
<ul>
<ul>
<li>
Inner list item within two consecutive UL elements
</li>
</ul>
</ul>
</li>
</ul>
Noteonformat
TheabovedescriptionsofeachofthethreelisttypesrefertothedefaultrenderingofthecorrespondingHTML
codebythewebbrowser.However,byusingCSS,youareabletochangetheformattingofthelists.For
example,withCSSyouareabletomakethelistshorizontalasopposedtothevertical.
Example
Anexampleofusingliststomarkuparecipeforpancakes.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Pancakes</title>
</head>
<body>
<h1>A Recipe for Pancakes</h1>
<p>From <a href="http://en.wikibooks.org/wiki/Cookbook:Pancake">Wikibooks Cookbook</a>.</p>
<p>These pancakes make a good breakfast for a family.
They go well with real maple syrup.
They are healthy too (as long as you don't over do the syrup)
https://en.wikibooks.org/wiki/HyperText_Markup_Language/Print_version
20/44
10/27/2015
HyperText Markup Language/Print version - Wikibooks, open books for an open world
Tables
Tablesareusedforpresentingtabulardataandabusedforlayingoutpages.Theycanbeinsertedanywhereon
thepage,evenwithinothertables.Wewillbelookingatcreatingabasictableandthenaddinglotsoftagstoit
sowecanseejustwhattheoutcomewillbe.Experimentationisthenameofthegamehere.Thetagsmost
usefulwhencreatingtablesare<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>
</table>
Everytablebeginswitha<table>tagandendswitha</table>tag.Inthetabletag,youcandefinethe
attributesofthetable,asyouwillseelater.
Thetablecontainsrows,eachbeginswiththe<tr>tablerowtagandoptionallyendswiththe</tr>tag.Rows
mustbeinsidetables.
Therowscontaincells,eachbeginswiththe<td>tabledatatagandoptionallyendswiththe</td>tag.Cells
mustbeinsiderows.
https://en.wikibooks.org/wiki/HyperText_Markup_Language/Print_version
21/44
10/27/2015
HyperText Markup Language/Print version - Wikibooks, open books for an open world
Ifyouputatablecelloutsidearow,orifyouforgettocloseacell,orrow,ortableitwillhaveunpredictable
results.Textintendedtobeinthetablemayappearatanunexpectedposition,outsidethetable.Atworst,the
entirecontentsofthetablewillnotbedisplayed.
Forexample,inIEandFirefox:
Acelloutsidearowistreatedasinaseparaterowattheverticalpositionconcerned
Allcontentoutsidecells,whetherinarowornot,isputbeforethewholetable,intheorderinwhichit
occursIEputseachitemonanewlineFirefoxdoesnot,butputsinsomecasesablankspacebetween
items.
Iftheoptional</td>and</tr>arenotput,theabovereferstocontentbeforethefirstrow,andinrowsbefore
thefirstelementonly.Notethat</table>isrequiredifitisforgottenallfollowingcontentisconsideredpart
ofthelastcellofthelastrow,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)andwithineachrowtherearetwodata
entries(thetwo<td>tags)
Youmightcompareatablewithaspreadsheet.Thisonehastworowsandtwocolumnsmaking4cells
containingdata.(2rowsx2columns=4cells)
Captionandheadings
Letusstartwithaquickexample:
<table>
<caption>Formulas and Results</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,withthetextofthecaption
insidetheelement,asshowninthefollowing.
https://en.wikibooks.org/wiki/HyperText_Markup_Language/Print_version
22/44
10/27/2015
HyperText Markup Language/Print version - Wikibooks, open books for an open world
<table>
<caption>Formulas and Results</caption>
...
</table>
Captionsareusuallydisplayedoutsidetheborderofthetable,atthetop.Theexactappearanceandplacement
ofcaptionsissubjecttoCSSstyling.
Tableheadingsareawayofdefiningthecontentsofthetablecolumns.Theyareusuallyonlyusedinthefirst
<tr>,tablerow.
Insteadofusinga<td>forthecell,weusea<th>.
Bydefaultthetextintableheadingsisdisplayedboldandcentered.
TheSyntaxis:<tr><th>text</th><th>text</th></tr>
TaskTableCaptionandHeadings
1. Openyourtable.htmfile
2. Addyourowncaptiontothetable
3. Viewtheresult
4. AddthetableheadingsITEMSand$PRICEforthetable
5. Viewtheresult
Borders
Aborderaroundatableisoptional:sometimestheyhelptodefinethetable,andsometimesthetablelooks
betterwithoutthem.
Howeverhavingbordersturnedonwhileyouarecreatingthetableisaverygoodideasinceitmakestables
mucheasiertoworkwith.Youcangetridoftheborderoncethetableiscompleted.
Theborderofthistableis1pixelwide.
Theborderonthistableis5pixelswide.
Thedefaultvalueis0(i.e.borderless).
Borderisanattributeofthetabletag.Thesyntaxis:
<tableborder=X>whereXisthebordersizeinpixels.
Youcanalsospecifyabordercolour,althoughthisisanInternetExplorertagonly.Thesyntaxis:
<tablebordercolor="#000000">
NotethatitisnotrecommendedtospecifythebordercolourusingHTMLitismuchbettertouseCSSfor
thispurpose.
https://en.wikibooks.org/wiki/HyperText_Markup_Language/Print_version
23/44
10/27/2015
HyperText Markup Language/Print version - Wikibooks, open books for an open world
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,andwatchwhathappensthetablesizestays
thesame.
4. Experimentchangingthemeasurementsandviewthefileagain.
5. Nowreplacethepixelsmeasurementswithpercentages
e.g.<tableborder=2height="40%"width="50%">
6. Savethefileandthenviewit.Resizethebrowserwindow,andwatchwhathappensthistimethetable
changessizeasthewindowsizechanges.
CellSpacingandCellPadding
CellSpacingisthenumberofpixelsbetweenthetablecells.
CellPaddingisthepixelspaceinsidethecells.i.e.thedistance
betweentheinformationandthesidesofthetablecells.
Boththeseoptionsareattributesofthe<table>tag
e.g.<tableborder=1cellspacing=0cellpadding=0>
Note:Thedefaultforbothis2
TaskCellSpacingandPadding
https://en.wikibooks.org/wiki/HyperText_Markup_Language/Print_version
24/44
10/27/2015
HyperText Markup Language/Print version - Wikibooks, open books for an open world
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.Youcanalsochangethealignmentofanentirerowbyspecifyingthealignmentin
the<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.
Insteaditalignsthewholetableonthepage.i.e.,itmakesthetextoutsidethetablewraparoundthetable.
TaskAlignmentoftablecells
1. Openyourtable.htmfile
2. Changethealignmentofthetablecellssothattheylooklike:
bread
$2.99
Milk
$1.40
or
bread $2.99
Milk $1.40
1. Experimentwithotherverticalandhorizontalalignments.
2. Viewtheresulteachtime
Rowspanandcolumnspan
Everyrowmusthavethesamenumberoftabledatas,occasionallytabledatashavetospanmorethanone
columnorrow.Inthiscasethetagscolspanand/orrowspanareusedwheretheyaresettoanumber.
<THISROWHASTHREETABLEDATAS
<THISROWHASTWO.THEFIRSTUSESCOLSPAN="2"
<THISROWHASTHREETABLEDATAS,BUTONESPANSTWOROWS
https://en.wikibooks.org/wiki/HyperText_Markup_Language/Print_version
25/44
10/27/2015
HyperText Markup Language/Print version - Wikibooks, open books for an open world
BECAUSEITUSESROWSPAN="2"
<THISROWHASONLYTWOTABLEDATAS,BECAUSEITSFIRSTISBEING
TAKENUP.
Syntax:
<tdcolspan=X>whereXisthenumberofcolumnsthatthecellspansacross.
<tdrowspan=X>whereXisthenumberofrowsthatthecellspansacross.
TaskRowspanandcolumnspan
1. Openyourtable.htmfile.
2. Experimentwithmakingonetablecellspanacrossmultiplerows.
3. Experimentwithmakingonetablecellspanacrossmultiplecolumns.
4. Viewtheresulteachtime.
Backgroundcolourandimages
Itispossibletogiveeachtablecell,(orrow,ortable)adifferentbackgroundcolour.
Syntax:
<td bgcolor="colour">
<tr bgcolor="colour">
<table bgcolor="colour">
wherecolourisacolournameorhexadecimalcode.
Note:tablebackgroundcoloursonlydisplayinversion3browsersandabove,andtheymaynotprint
correctly.
Note:itisnotrecommendedtospecifybackgroundcoloursusingHTMLitismuchbettertouseCascading
StyleSheetsforthispurpose.
Abackgroundimageisanothermodificationoftheappearanceofacell,row,oracompletetable.Again
theseonlydisplayinversion3browsersandabove,andtheymaynotprintcorrectly.
Syntax:
<td background="filename">
<tr background="filename">
<table background="filename">
https://en.wikibooks.org/wiki/HyperText_Markup_Language/Print_version
26/44
10/27/2015
HyperText Markup Language/Print version - Wikibooks, open books for an open world
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.Thesetagsare
locatedatthetopofthetable,andspecifythedefaultformatforthegivencolumn.
Withthe<col>tag,thefirstinstanceindicatestheformattingforthefirstcolumn,thesecondforthesecond
column,andsoon.<colgroup>workssimilarly,butalsoincludesthespantagtocovermultiplecolumns.
<colgroup><colspan="3"style="backgroundcolor:red"><colstyle="backgroundcolor:yellow"><col
span="2"style="backgroundcolor:green"></colgroup>
ProjectCompletion
Jan Feb Mar Apr May Jun
3% 17% 40% 55% 86% 100%
Summary
Inthismoduleyoulearnhowto:
CreateandcustomiseHTMLtables,
Controltheirdimensionsandappearance,
Addacaptiontoatable,
Controlthealignmentofthetablecontents,
Variousattributesofthetabletags.
Quotations
TherearetwokindsofquotationssupportedbyHTMLinlineonesandblockquotations.
Inlinequotations
Anexample:
<q>An inline quotation of significant length
(say 25 words, for example) goes here...</q>.
Willbediplayedas:
https://en.wikibooks.org/wiki/HyperText_Markup_Language/Print_version
27/44
10/27/2015
HyperText Markup Language/Print version - Wikibooks, open books for an open world
Aninlinequotationofsignificantlength(say25words,forexample)goeshere....
Blockquotations
Anexample:
<blockquote>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat
nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt
in culpa qui officia deserunt mollit anim id est laborum.
</blockquote>
Examplerendering:
Loremipsumdolorsitamet,consecteturadipisicingelit,seddoeiusmodtemporincididuntut
laboreetdoloremagnaaliqua.Utenimadminimveniam,quisnostrudexercitationullamco
laborisnisiutaliquipexeacommodoconsequat.Duisauteiruredolorinreprehenderitin
voluptatevelitessecillumdoloreeufugiatnullapariatur.Excepteursintoccaecatcupidatatnon
proident,suntinculpaquiofficiadeseruntmollitanimidestlaborum.
Comments
HTMLoffersthepossibilitytoinsertcommentsintothepage.ToplaceacommentinyourHTMLcode,start
itwith<!andcloseitwith>.Anexample:
<p>The first paragraph.</p>
<!-- This comment spans one line, and will not be displayed to the browser. -->
<p>The second paragraph.</p>
<!-This comment spans multiple lines,
and will also not be displayed to the browser.
-->
<p>The third paragraph.</p>
Unlikenotesinofficesuites,commentsarecompletelyignoredbybrowsers,sothereadersofthepagehave
noideaoftheirpresence.Theycanbeviewedinthesourceofthewebpagethough.
Youshouldavoidnestedcomments,asthesecancausetroublestomanybrowsers.Anexample:
<p>The second paragraph.</p>
<!-<!-Nested comments should better be avoided.
-->
-->
<p>The third paragraph.</p>
Forms
https://en.wikibooks.org/wiki/HyperText_Markup_Language/Print_version
28/44
10/27/2015
HyperText Markup Language/Print version - Wikibooks, open books for an open world
HTMLformsareaneasywaytogatherdatafromtheenduser.Processingthemrequiresaserverside
scriptinglanguage(https://en.wikipedia.org/wiki/Serverside_scripting#Languages)or(insomecaseswhen
limitedinteractionistobeprovidedwithinasinglepage)aclientsidescriptinglanguagesuchasJavaScript.
Hereisasimpleform:
<form id="" action="" method="post">
<fieldset>
<legend>Personal details</legend>
<label for="first">First name</label>
<input type="text" name="first" id="first"><br />
<label for="family">Family name</label>
<input type="text" name="family" id="family"><br />
<input type="submit" name="personal">
</fieldset>
</form>
Here'sanexplanation
id
Thenameoftheformorcontrol.
action
TheURLofaserversidescriptwhichcanprocessthedata.
method
Themethodusedtosendtheinformation.Twomethodsaresupported,POSTandGET.POSTisthe
preferredmethodexceptforsimplesearcheswhichgenerallyuseGET.Usewithserversidelanguages.
fieldset
Formcontrolsarenormallycontainedinafieldsetelement.Complexformsmayhavemultiplefieldsets.
Fieldsetscancontainotherfieldsets.
legend
Eachfieldsetbeginswithalegendelement.Thecontentoftheelementisusedasatitleplacedinthe
borderofthefieldset.
labelfor=""
Alabelforisasingleformcontrol.Thevalueoftheforattributemustmatchtheidattributeofaform
controlinthesameform.
inputtype=""name=""id=""
varioustypesofinputcontrols.Supportedtypesaresubmit,text,password,checkbox,radio,reset,file,
hidden,imageandbutton.ThenameAttributeisusedbytheservertoidentifywhichpieceofdatawas
enteredinagivenboxontheform.Theidattributeisusedtomatchaninputwithitslabel.Thename
andidattributesnormallyhaveidenticalvaluesfortextinputsbutdifferentvaluesforcheckboxand
radioinputs.
select
ThereisalsoaSELECTelementfordropdownlistsandaTEXTAREAelementformultilinetext
input.
Thissimpleexampleuses<br/>tagstoforcenewlinesbetweenthedifferentcontrols.Arealworldform
wouldusemorestructuredmarkuptolayoutthecontrolsneatly.
FormattingwithCSS
TheHTML
TheHTMLforthisformisamazinglysimpleandyoudonothavetocreatehundredsofdivsallalignedleft
andrightthiswillcausealotoffrustrationandalotofdebuggingasvariousbrowsersstillinterpretCSScode
differently.
https://en.wikibooks.org/wiki/HyperText_Markup_Language/Print_version
29/44
10/27/2015
HyperText Markup Language/Print version - Wikibooks, open books for an open world
<form>
<label for="name">Name</label>
<input id="name" name="name"><br />
<label for="address">Address</label>
<input id="address" name="address">
</form>
TheCSS
TheCSSforthiscodeisalittlebitmoreinteresting:
label,input {
float: left;
width: 150px;
display: block;
margin-bottom: 10px;
}
label {
width: 75px;
text-align: right;
padding-right: 20px;
}
br {
clear: left;
}
Let'sexplainthecode
label,input {
float: left;
width: 150px;
display: block;
margin-bottom: 10px;
}
TheCSSforthelabelhasfoursectionstoit:
1. float:thefloatcommandisusedtoestablishthatthelabelisfloatedtothelefthandsideoftheform
2. width:thisdefineshowbigthelabelmustbe,keepingallthelabelsatafixedwidthkeepseverythingin
aniceorderedline.
3. display:theelementwillbedisplayedasablocklevelelement,withalinebreakbeforeandafterthe
element
4. marginbottom:byaddingamargintothebottomofthislabelitinsuresthatlabelsarepositionednicely
oneunderanotherwithanicepaddingbetweeneach
label {
width: 75px;
text-align: right;
padding-right: 20px;
}
1. width:againthisistodefineafixedwidthgivingeverythinganicedefinedunity.
2. Textalign:alignthetextrightkeepseverythingawayfromtheleftaignedlabelsagainkeepingthingsin
unison.
3. Paddingright:thismeansthatthereisanicepaddingontherightkeepingthingsonceagainfinetuned.
br {
https://en.wikibooks.org/wiki/HyperText_Markup_Language/Print_version
30/44
10/27/2015
HyperText Markup Language/Print version - Wikibooks, open books for an open world
clear: left;
1. clear:thisisthemostimportantpartwithouttheclear:leftnothingwillalignproperlythisbasically
makeseverythingwithineachelementsequencealignunderneatheachotherandtotheleft.
Formoredetails,seetheHyperTextMarkupLanguage/TagList/formsectionofthisbook.
References
Foraniceandcomprehensivereferenceonforms,seetheofficialW3TechnicalRecommendationforforms
(http://www.w3.org/TR/html4/interact/forms.html).
CSS
Sofarwehaveseenhowtodividetextintoparagraphsandtocreatesectionheadings.WhilstHTMLallows
youtodefinethestructureofyourdocumentsitgivesverylimitedcontrolovertheirappearance.Cascading
StyleSheets(CSS)isalanguagethatdescribesthepresentationofdocuments.YoucanuseCSStoalterthe
appearanceofyourHTMLdocuments.
ThissectiongivesanintroductiontostylingHTMLwithCSS.CSSitselfiscoveredinthecompanion
wikibookCascadingStyleSheets.
WhatdoesCSSdo?
TheexamplepagefromtheParagraphsandHeadingssectionwouldlooksomethinglikethiswithoutCSS.
Sundial
FromWikipedia,thefreeencyclopedia.
Asundialmeasurestimebythepositionofthesun.Themostcommonlyseendesigns,suchasthe'ordinary'
orstandardgardensundial,castashadowonaflatsurfacemarkedwiththehoursoftheday.Astheposition
ofthesunchanges,thetimeindicatedbytheshadowchanges.However,sundialscanbedesignedforany
surfacewhereafixedobjectcastsapredictableshadow.
Mostsundialdesignsindicateapparentsolartime.Minordesignvariationscanmeasurestandardanddaylight
savingtime,aswell.
History
Sundialsintheformofobelisks(3500BC)andshadowclocks(1500BC)areknownfromancientEgypt,and
weredevelopedfurtherbyothercultures,includingtheChinese,Greek,andRomancultures.Atypeof
sundialwithoutgnomonisdescribedintheoldOldTestament(Isaiah38:2).
https://en.wikibooks.org/wiki/HyperText_Markup_Language/Print_version
31/44
10/27/2015
HyperText Markup Language/Print version - Wikibooks, open books for an open world
ThemathematicianandastronomerTheodosiusofBithynia(ca.160BCca.100BC)issaidtohaveinvented
auniversalsundialthatcouldbeusedanywhereonEarth.TheFrenchastronomerOronceFinconstructeda
sundialofivoryin1524.TheItalianastronomerGiovanniPadovanipublishedatreatiseonthesundialin
1570,inwhichheincludedinstructionsforthemanufactureandlayingoutofmural(vertical)andhorizontal
sundials.GiuseppeBiancani'sConstructioinstrumentiadhorologiasolariadiscusseshowtomakeaperfect
sundial,withaccompanyingillustrations.
Installationofstandardsundials
Manyornamentalsundialsaredesignedtobeusedat45degreesnorth.Bytiltingsuchasundial,itmaybe
installedsothatitwillkeeptime.However,somemassproducedgardensundialsareinaccuratebecauseof
poordesignandcannotbecorrected.Asundialdesignedforonelatitudecanbeadjustedforuseatanother
latitudebytiltingitsbasesothatitsstyleorgnomonisparalleltotheEarth'saxisofrotation,sothatitpoints
atthenorthcelestialpoleinthenorthernhemisphere,orthesouthcelestialpoleinthesouthernhemisphere.
Alocalstandardtimezoneisnominally15degreeswide,butmaybemodifiedtofollowgeographicand
politicalboundaries.Asundialcanberotatedarounditsstyleorgnomon(whichmustremainpointedatthe
celestialpole)toadjusttothelocaltimezone.Inmostcases,arotationintherangeof7.5degreeseastto23
degreeswestsuffices.
Tocorrectfordaylightsavingtime,afaceneedstwosetsofnumeralsoracorrectiontable.Aninformal
standardistohavenumeralsinhotcolorsforsummer,andincoolcolorsforwinter.Rotatingthesundialwill
notworkwellbecausemostsundialsdonothaveequalhourangles.
Ordinarysundialsdonotcorrectapparentsolartimetoclocktime.Thereisa15minutevariationthroughthe
year,knownastheequationoftime,becausetheEarth'sorbitisslightlyellipticalanditsaxisistiltedrelative
totheplaneofitsorbit.Aqualitysundialwillincludeapermanentlymountedtableorgraphgivingthis
correctionforatleasteachmonthoftheyear.Somemorecomplexsundialshavecurvedhourlines,curved
gnomonsorotherarrangementstodirectlydisplaytheclocktime.
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
https://en.wikibooks.org/wiki/HyperText_Markup_Language/Print_version
32/44
10/27/2015
HyperText Markup Language/Print version - Wikibooks, open books for an open world
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.
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.Thisallowsastylesheettobesharedby
severalHTMLdocuments.ThelinkelementisusedtoapplytherulesfromaCSSstylesheettoadocument.
Thebasicsyntaxis:
<link rel="stylesheet" type="text/css" href="style.css">
wherestyle.cssistheURLforthestylesheet.
TheCSSfilefortheexampleabovecontainsthefollowing:
body {
background:#ffc;
color:#000;
font-family:cursive
}
https://en.wikibooks.org/wiki/HyperText_Markup_Language/Print_version
33/44
10/27/2015
HyperText Markup Language/Print version - Wikibooks, open books for an open world
h1 {
color:red;
text-align:center;
font-size:1.2em;
font-weight:bold;
margin:0
}
h2 {
text-align:center;
font-size:1em;
font-weight:bold;
margin:1em 0 0
}
p{
text-indent:2em;
text-align:justify;
margin:0
}
Savethisassundial.css.
TheHTMLdocumentfromtheprevioussectionwithalinkelementaddedonthefifthlineisgivenbelow.
Savethisassundial2.htminthesamedirectory.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Sundial</title>
<link rel="stylesheet" type="text/css" href="sundial.css">
</head>
<body>
<h1>Sundial</h1>
<p>From Wikipedia, the free encyclopedia.</p>
<p>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.
</p>
<p>Most sundial designs indicate apparent solar time. Minor design variations can measure standard
and daylight saving time, as well.
</p>
<h2>History</h2>
<p>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).
</p>
<p>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.
</p>
<h2>Installation of standard sundials</h2>
<p>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.
</p>
<p>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.
</p>
<p>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.
</p>
https://en.wikibooks.org/wiki/HyperText_Markup_Language/Print_version
34/44
10/27/2015
HyperText Markup Language/Print version - Wikibooks, open books for an open world
<p>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.
</p>
</body>
</html>
Opensundial2.htmwithyourwebbrowserandyoushouldseeapagewithapaleyellowbackground.
ValidatingHTML
TherearefixedrulesthatdefinewhichtagsmaybeusedinanHTMLdocument,wheretheycanbeplaced.As
yourdocumentsgetlargeritcanbedifficulttobesurethateverythingiscorrect.Thereareautomatedtools
thatwillcheckyourHTMLforyou.Thesetoolsareknownasvalidators.Severalvalidatorsarefreetouse,
including
WebDesignGroupHTMLValidator(http://www.htmlhelp.com/tools/validator/upload.html.en)
TheW3CMarkupValidationService(http://validator.w3.org/)
Tryuploadingtheindex.htmlorindex.htmfileyoucreatedintheprevioussectiontooneofthevalidators
listedabove.AlternatelybothvalidatorshaveoptionsthatletyouenterHTMLdirectlysoyoucouldcutand
pastetheexamplefromthispageintothevalidator.
ThereisalsoanHTMLvalidatingFirefoxextensionthatcanvalidateHTMLusingeitherHTMLTidyorthe
SGMLParser(whatthew3validatorisbasedon).Itisavailablehere
(http://users.skynet.be/mgueury/mozilla/)forallplatforms.
ItisgoodpracticetovalidateeachHTMLdocumentyoucreate.Notethatmanyvisualdesigntoolswilllet
youcreateinvalidwebpagessoitisimportanttocheckpagesproducedinthesepackagesaswell.
IftheHTMLdocumentisvaliditmeansthatthewebpagewilldisplayexactlyasyouprogrammedittoon
stableW3Ccompliantbrowsers.InthecaseoftextbrowserssuchasLynx,thetextwillformatcorrectlyso
thatitcanbereadeasilybytheconsumer.KnowingHTMLalsomeansthatyoucaneditthepagescreated
usingWYSIWYGprogramsmanually,asthesewillwithoutfailthrowinunnecessarycodingwhichclogsup
andslowsdowntheloadingofyourpage.
ConditionalComments
ConditionalcommentsareaproprietaryextensiontoMicrosoftInternetExplorerforWindows(IE/win)
version5.0andlater.TheyarenotavailableinInternetExplorerforMac(IE/mac).Theyareaveryusefulway
ofhandlingtheCSSbugsinthevariousversionsofInternetExplorer.
Syntax
Anordinary(X)HTMLcommentlookslikethis:
<!-- This text will be ignored by the browser. -->
https://en.wikibooks.org/wiki/HyperText_Markup_Language/Print_version
35/44
10/27/2015
HyperText Markup Language/Print version - Wikibooks, open books for an open world
Conditionalcommentsaddadditionalsyntaxtocomments.Thesimplestexampleis:
<!--[if IE]> This text will be shown by IE/win ver. 5.0 and higher. <![endif]-->
Browsersthatdon'tunderstandtheconditionalcommentsyntaxwillprocessthisasanormalcomment,i.e.the
contentofthecommentwillbeignored.
SpecificversionsofIE/wincanbetargetedbychangingtheexpressionaftertheif.Forexampletotargetany
versionofIE/winwithamajorversionof5use:
<!--[if IE 5]> The major version number of this browser is 5. <![endif]-->
ThetextwilldisplayinIE/winversions5.0and5.5.
Totargetaspecificversionnumber,e.g.5.0,thesyntaxisslightlyquirky.
<!--[if IE 5.0]> You are using IE/win 5.0. <![endif]-->
<!--[if IE 5.5000]> You are using IE/win 5.5. <![endif]-->
<!--[if IE 6.0]> You are using IE/win 6.0. <![endif]-->
InequalitiescanbeusedintheexpressionbyplacinganoperatorbeforetheIE.Theoperatorsare:
lt
lessthan(butatleastversion5.0whichisthelowestversionsupportingconditionalcomments)
lte
lessthanorequal(butatleastversion5.0whichisthelowestversionsupportingconditionalcomments)
gt
greaterthan
gte
greaterthanorequals
Example:
<!--[if gte IE 6]> This text will be shown by IE/win ver. 6.0 and higher. <![endif]-->
Alltheexpressionscanbenegatedbyprefixingwith!,e.g.
<!--[if!gte IE 6]> This text will be shown by verions of IE/win ver. below 6 that support
conditional comments. <![endif]-->
<!--[if!IE]> This text will be not be shown by any version of IE/win that understands
conditional comments. It won't be shown by any other browsers either because they will
treat this as a normal comment. <![endif]-->
ThesecondexamplemayseempointlessbutwithasmalltweakyoucanarrangetohidetextfromIE/win
version5andabove.
<!--[if!IE]>--> This text will be not be shown by any version of IE/win that understands
conditional comments. It will be shown by other browsers because they will treat this as
text sandwiched between two normal comments. <!--<![endif]-->
ThefollowingHTMLdocumentisaworkingexample.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Conditional comments</title>
</head>
<body>
<!--[if !IE]>-->
<p>This is page is not being viewed with Internet Explorer for Windows version 5.0 or higher.</p>
<!--<![endif]-->
<!--[if IE]>
<p>This is page is being viewed with Internet Explorer for Windows version 5.0 or higher.</p>
https://en.wikibooks.org/wiki/HyperText_Markup_Language/Print_version
36/44
10/27/2015
HyperText Markup Language/Print version - Wikibooks, open books for an open world
<![endif]-->
</body>
</html>
UsewithCSS
ConditionalcommentscanbeusedtopassadditionalstylesheetstoIE/win.Thesestylesheetscanprovidefixes
tolayoutbugsinIE/win.Thebasicideais:
<head>
<title>Conditional comments</title>
<link rel="stylesheet" type="text/css" href="style.css">
<!--[if IE 5]>
<link rel="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.Itinvolvedmultiple
pagesshowninseparatesubwindows.Usageofframeshasbeendeprecatedandshouldneverbeused.
FrameshavebeenreplacedbyacombinationofCascadingStyleSheetsandAJAXscripting,astheykeepa
moresuitablemethodofkeepingorupdatingcontentonthescreen.
Layers
LayersarenotapartofHTML4.01orXHTML.TheywereaproprietaryelementcreatedbyNetscape.You
canachievethesameeffectusingCSS'sz-indexproperty.
Confusingly,Dreamweaverhasalayersfeaturewhichisfunctionallysimilarbutisbasedondivelements
styledwithCSSandoptionallyanimatedwithJavascript.
Music
Usersshouldhavecontroloverthebackgroundsoundormusictherefore,mediaplayercontrolsshould
alwaysbevisible.Don'ttrytoscriptyourowncontrolssincetheymightnotworkinallenvironments.
https://en.wikibooks.org/wiki/HyperText_Markup_Language/Print_version
37/44
10/27/2015
HyperText Markup Language/Print version - Wikibooks, open books for an open world
Therearemusicplayersforwebsitesthatyoucanfindifyousearch.Theyshouldneverbesettoautoplay,
theyshouldonlyplaywhentheuserchoosestoplaythem.
Browsers'extensions
ConditionalComments
ConditionalcommentsareaproprietaryextensiontoMicrosoftInternetExplorerforWindows(IE/win)
version5.0andlater.TheyarenotavailableinInternetExplorerforMac(IE/mac).Theyareaveryusefulway
ofhandlingtheCSSbugsinthevariousversionsofInternetExplorer.
Syntax
Anordinary(X)HTMLcommentlookslikethis:
<!-- This text will be ignored by the browser. -->
Conditionalcommentsaddadditionalsyntaxtocomments.Thesimplestexampleis:
<!--[if IE]> This text will be shown by IE/win ver. 5.0 and higher. <![endif]-->
Browsersthatdon'tunderstandtheconditionalcommentsyntaxwillprocessthisasanormalcomment,i.e.the
contentofthecommentwillbeignored.
SpecificversionsofIE/wincanbetargetedbychangingtheexpressionaftertheif.Forexampletotargetany
versionofIE/winwithamajorversionof5use:
<!--[if IE 5]> The major version number of this browser is 5. <![endif]-->
ThetextwilldisplayinIE/winversions5.0and5.5.
Totargetaspecificversionnumber,e.g.5.0,thesyntaxisslightlyquirky.
<!--[if IE 5.0]> You are using IE/win 5.0. <![endif]-->
<!--[if IE 5.5000]> You are using IE/win 5.5. <![endif]-->
<!--[if IE 6.0]> You are using IE/win 6.0. <![endif]-->
InequalitiescanbeusedintheexpressionbyplacinganoperatorbeforetheIE.Theoperatorsare:
lt
lessthan(butatleastversion5.0whichisthelowestversionsupportingconditionalcomments)
lte
lessthanorequal(butatleastversion5.0whichisthelowestversionsupportingconditionalcomments)
gt
greaterthan
gte
greaterthanorequals
Example:
<!--[if gte IE 6]> This text will be shown by IE/win ver. 6.0 and higher. <![endif]-->
Alltheexpressionscanbenegatedbyprefixingwith!,e.g.
<!--[if!gte IE 6]> This text will be shown by verions of IE/win ver. below 6 that support
conditional comments. <![endif]-->
https://en.wikibooks.org/wiki/HyperText_Markup_Language/Print_version
38/44
10/27/2015
HyperText Markup Language/Print version - Wikibooks, open books for an open world
<!--[if!IE]> This text will be not be shown by any version of IE/win that understands
conditional comments. It won't be shown by any other browsers either because they will
treat this as a normal comment. <![endif]-->
ThesecondexamplemayseempointlessbutwithasmalltweakyoucanarrangetohidetextfromIE/win
version5andabove.
<!--[if!IE]>--> This text will be not be shown by any version of IE/win that understands
conditional comments. It will be shown by other browsers because they will treat this as
text sandwiched between two normal comments. <!--<![endif]-->
ThefollowingHTMLdocumentisaworkingexample.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Conditional comments</title>
</head>
<body>
<!--[if !IE]>-->
<p>This is page is not being viewed with Internet Explorer for Windows version 5.0 or higher.</p>
<!--<![endif]-->
<!--[if IE]>
<p>This is page is being viewed with Internet Explorer for Windows version 5.0 or higher.</p>
<![endif]-->
</body>
</html>
UsewithCSS
ConditionalcommentscanbeusedtopassadditionalstylesheetstoIE/win.Thesestylesheetscanprovidefixes
tolayoutbugsinIE/win.Thebasicideais:
<head>
<title>Conditional comments</title>
<link rel="stylesheet" type="text/css" href="style.css">
<!--[if IE 5]>
<link rel="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:updatelistfor
HTML5Clickonaelementforitsdescription.XHTML1.0hasthesameelementsbuttheattributesdiffer
slightly.
https://en.wikibooks.org/wiki/HyperText_Markup_Language/Print_version
39/44
10/27/2015
HyperText Markup Language/Print version - Wikibooks, open books for an open world
TheofficiallistofcurrentstandardelementsisatIndexoftheHTML5Elements
(http://www.w3.org/TR/htmlmarkup/elements.html).
Youcanalsoviewalistofstandardattributes
a
abbr
acronyminmostinstancesuseabbrinstead.SeeTheAccessibilityHatTrick:GettingAbbreviations
Right(http://www.alistapart.com/articles/hattrick)forsomeadviceonusingtheseelements.
address
(appletdeprecated,useobjectinstead.)
area
busestrongortheCSSpropertyfont-weightsettothevalueboldinstead.
base
(basefontdeprecated,settheCSSpropertyfontonthebodyelementinstead.)
bdo
bgsoundUsedforinsertingbackgroundsounds.
bigtheCSSpropertyfont-sizesettothevaluelargerorapercentagegreaterthan100%maybe
moreappropriate.
blinkusedtomakethetextblink(Depreciated).
blockquote
bodyIdentifiesthemaincontentofaWebPage.
brusethepelementforparagraphs.UsetheCSSpropertiesmarginandpaddingtoincreaseor
decreasethespacebetweenparagraphs.Considerusingstructuredelementssuchaslistsortables
instead.
button
caption
(centerdeprecated,useadivelementinsteadandsettheCSSpropertytext-aligntothevalue
center.)
cite
code
col
colgroup
dd
del
dfn
(dirdeprecated,useul.)
div
dl
dt
em
fieldset
(fontdeprecated,usetheCSSpropertyfont.ForfinercontrolusetheCSSpropertiesfont-style,
font-variant,font-weight,font-size,line-heightandfont-family.)
formCreatesaform.
frameSpecifiesinformationforoneframe.
framesetavoidusingframesifpossible.
headContainsinformationaboutaWebPage.
hr
html
h1
h2
h3
h4
h5
h6
iuseemortheCSSpropertyfont-stylesettothevalueitalicinstead.
https://en.wikibooks.org/wiki/HyperText_Markup_Language/Print_version
40/44
10/27/2015
HyperText Markup Language/Print version - Wikibooks, open books for an open world
iframe
img
input
ins
(isindexdeprecated,useinput.)
kbd
label
legend
li
link
map
(menudeprecated,useul.)
meta
nobrisaproprietaryelementtypesupportedbysomewebbrowsers.Itisusedtopreventautomatic
wrappingoflines.
noframes
noscriptSpecifieswhatshouldbedoneifthereisnojavascriptfoundonthebrowser.
object
ol
optgroup
option
p
param
pre
q
(sdeprecated,usedeltoindicatedeletedtext.Ifthetextisn't'deleted'usetheCSSpropertytextdecorationsettothevalueline-through.)
samp
script
select
smalltheCSSpropertyfont-sizesettothevaluesmallerorapercentagelessthan100%maybe
moreappropriate.
span
(strikedeprecated,usedeltoindicatedeletedtext.Ifthetextisn't'deleted'usetheCSSpropertytextdecorationsettothevalueline-through.)
strong
style
sub
sup
table
tbody
td
textarea
tfoot
th
thead
title
tr
tt
(udeprecated,usetheCSSpropertytext-decorationsettothevalueunderlineinstead.)
ul
var
StandardAttributesList
https://en.wikibooks.org/wiki/HyperText_Markup_Language/Print_version
41/44
10/27/2015
HyperText Markup Language/Print version - Wikibooks, open books for an open world
BelowisalistofallattributeswhichareavailableformostelementsinHTML.
YoucanalsoviewalistofHTMLelements.
Attributes
class
Thisattributeallowsyoutodesignateanelementtobeamemberofagivenclass.Multipleelementscanbe
assignedtothesameclass(eg.<p class="foo"> ... </p> <p class="foo"> ... </p>),aswellasasingle
elementbelongingtomultipleclasses(eg.<p class="foo bar"> ... </p>).
code
codebase
dir
Withthisattributeyoucandefinewhichdirectionthetextiswrittenforagivenelement,eitherltrforleftto
rightorrtlforrighttoleft.
height
Settingthisattributewithanumericalvaluedefinestheheightofanelementinpixels(eg.<div
height="150"> ... </div>)
id
Thisattributeallowsyoutodefineauniqueidentifierforeachelement.Thiswouldbeusefulforhyperlinks
thatlinktoaspecificsectionofapageorwhenstylingusingastylesheet.
lang
Withthisattributeyoucanspecifyalanguagethatisusedforanelement.
style
Thisattributeallowsyoutoapplyspecificstylingtoagivenelement.
title
Withthisattributeyoucandefinewhatwillbedisplayedwhenauserhoverstheelement.Itisnotavailablefor
base,head,html,meta,param,script,style,andtitle.
width
Settingthisattributewithanumericalvaluedefinesthewidthofanelementinpixels(eg.<div width="230">
... </div>)
Moreattributes
https://en.wikibooks.org/wiki/HyperText_Markup_Language/Print_version
42/44
10/27/2015
HyperText Markup Language/Print version - Wikibooks, open books for an open world
accesskey
Theaccesskeyattributedefinesakeyboardshortcutforahyperlinkorformelement.Thecombinationofkeys
needtoactivatetheshortcutvariesfrombrowsertobrowser.InMicrosoftInternetExplorertheusermust
pressAlt+accesskey.IftheshortcutisforalinktheusermustthenpressEntertofollowthelink.Thechoice
ofAlt+accesskeymeansthataccesskeyscanclashwithshortcutsbuiltintothebrowser.
Itisquitecommontousenumbersfortheaccesskeyssincethesedon'tclashwithanymajorbrowser'sbuiltin
shortcuts,e.g.
1=HomePage
0=Listofaccesskeysonthiswebsite.
<div id="navigation">
<h2>Navigation</h2>
<ul>
<li><a accesskey="1" href="/">Home page</a></li>
<li><a accesskey="2" href="/about">About</a></li>
<li><a accesskey="0" href="/accesskeys">Access keys</a></li>
</ul>
</div>
Thereisnostandardwaytoletusersknowtheaccesskeysthatareavailableonthepage.Somesuggestions
canbefoundinAccesskeys: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
inlineelement
TODO
T
https://en.wikibooks.org/wiki/HyperText_Markup_Language/Print_version
43/44
10/27/2015
HyperText Markup Language/Print version - Wikibooks, open books for an open world
tag
Theopeningandclosingsequenceofcharactersofanelement,suchas"<p>"or"</p>".Tobe
distinguishedfromelement.
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.additionaltermsmay
apply.Byusingthissite,youagreetotheTermsofUseandPrivacyPolicy.
https://en.wikibooks.org/wiki/HyperText_Markup_Language/Print_version
44/44