HyperText Markup Language Print Version - Wikibooks Open Books For An Open World

10/27/2015
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
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
2/44
10/27/2015
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
3/44
10/27/2015
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>
4/44
10/27/2015
...
</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">
<link rel="alternate" type="application/rss+xml" href="rss.aspx" title="RSS 2.0">
script
UsedtolinktoanexternalJavascriptfileortoembedJavascriptinthepage.Linkingtoanexternalfile
isthepreferredtechniqueinrealwebpagesthoughmanyexamplesembedthescriptforsimplicity.
meta
UsedtosetadditionalmetadatapropertiesfortheHTMLdocument,suchasrelatedkeywords,etc.
Examples:
<meta charset=utf-8">
<meta name="keywords" content="web, HTML, markup, hypertext">
object
Embedsagenericobject.Thiselementisnotcommonlyusedinthehead,butratherinthebodysection.
5/44
10/27/2015
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.
6/44
10/27/2015
<p>An introductory paragraph.</p>

<p>Another introductory paragraph.</p>
Headings
Therearesixlevelsofheadings.Themostimportantheading(s)inadocumentshouldbelevelone.Sub
headingsshouldbeleveltwo.Subsubheadingsshouldbelevelthree,etc.Donotskiplevels.Ifthedefault
sizesdonotsuityourdocument,useCSStochangethem.Headingsshouldbeusedtoeffectivelyoutlineyour
content.Bydoingso,userscanfindinformationmorequickly,andsomesearchenginesuseheadingstohelp
rankpagecontent.
<h1>This is Level 1</h1>
ThisisLevel1
ThisisLevel3
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.
7/44
10/27/2015
</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:
8/44
10/27/2015
It is essential not only to guess but actually <em>observe</em> the results.
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,"&","&amp"mustbetyped.Characterscanalsobeinserted
bytheirASCIIorUnicodenumbercode.
9/44
10/27/2015
NameCode
Number
Glyph
Code
&acute
&#180
acuteaccent
&amp
&#38
&
ampersand
&bdquo
Description
Name
Code
Number
Glyph
Code
Description
&Agrave &#192
uppercaseA,grave
accent
doublelow9
quote
&Aacute
&#193
uppercaseA,acute
accent
&brvbaror
&brkbar
&#166
brokenvertical
bar
&Acirc
&#194
uppercaseA,
circumflexaccent
&cedil
&#184
cedilla
&Atilde
&#195
uppercaseA,tilde
&cent
&#162
centsign
&Auml
&#196
blackclubsuit
uppercaseA,
umlaut
copyright
&Aring
&#197
uppercaseA,ring
&AElig
&#198
uppercaseAE
generalcurrency
sign
&Ccedil
&#199
&dagger
dagger
uppercaseC,
cedilla
&Dagger
doubledagger
&Egrave
&#200
uppercaseE,grave
accent
&darr
downwardarrow
degreesign
&Eacute
&#201
uppercaseE,acute
accent
blackdiamond
suit
&Ecirc
&#202
uppercaseE,
circumflexaccent
&Euml
&#203
uppercaseE,
umlaut
&Igrave
&#204
uppercaseI,grave
accent
&Iacute
&#205
uppercaseI,acute
accent
&Icirc
&#206
uppercaseI,
circumflexaccent
&Iuml
&#207
uppercaseI,umlaut
&ETH
&#208
uppercaseEth,
Icelandic
&Ntilde
&#209
uppercaseN,tilde
&Ograve &#210
uppercaseO,grave
accent
&clubs
&copy
&curren
&deg
&#169
&#164
&#176
&diams
&divide
&#247
divisionsign
&frac12
&#189
onehalf
&frac14
&#188
onefourth
&frac34
&#190
threefourths
&frasl
&#47
slash
&gt
&#62
>
greaterthansign
blackheartsuit
inverted
exclamation
&hearts
&iexcl
&#161
&iquest
&#191
invertedquestion
mark
&laquo
&#171
leftanglequote
&larr
leftwardarrow
&ldquo
leftdoublequote
&Oacute
&#211
&lsaquo
singleleft
pointingangle
quote
uppercaseO,acute
accent
&Ocirc
&#212
uppercaseO,
circumflexaccent
&lsquo
leftsinglequote
&Otilde
&#213
uppercaseO,tilde
&lt
&#60
<
lessthansign
&Ouml
&#214
&macror
&hibar
uppercaseO,
umlaut
&#175
macronaccent
&Oslash
&#216
uppercaseO,slash
&mdash
&#151
emdash
&Ugrave &#217
&micro
&#181
microsign
uppercaseU,grave
accent
&middot
&#183
middledot
&Uacute
uppercaseU,acute
accent
&#218
10/44
10/27/2015
&nbsp
&#160
nonbreaking
space(invisible)
&ndash
&#150
endash
&not
&#172
notsign
&oline
&Ucirc
&#219
uppercaseU,
circumflexaccent
&Uuml
&#220
uppercaseU,
umlaut
overline,=
spacingoverscore
&Yacute
&#221
uppercaseY,acute
accent
&THORN &#222
uppercaseTHORN,
Icelandic
&szlig
&#223
lowercasesharps,
German
&agrave
&#224
lowercasea,grave
accent
&aacute
&#225
lowercasea,acute
accent
&acirc
&#226
lowercasea,
circumflexaccent
&ordf
&#170
feminineordinal
&ordm
&#186
masculineordinal
&para
&#182
paragraphsign
permillsign
&permil
&plusmn
&#177
plusorminus
&pound
&#163
poundsterling
&quot
&#34
"
doublequotation
mark
&raquo
rightanglequote
&rarr
rightwardarrow
&atilde
&#227
lowercasea,tilde
&rdquo
rightdoublequote
&auml
&#228
lowercasea,umlaut
registered
trademark
&aring
&#229
lowercasea,ring
&aelig
&#230
lowercaseae
&rsaquo
singleright
pointingangle
quote
&ccedil
&#231
lowercasec,cedilla
&egrave
&#232
&rsquo
rightsinglequote
lowercasee,grave
accent
singlelow9
quote
&eacute
&#233
lowercasee,acute
accent
&ecirc
&#234
lowercasee,
circumflexaccent
&euml
&#235
lowercasee,umlaut
&igrave
&#236
lowercasei,grave
accent
&iacute
&#237
lowercasei,acute
accent
&icirc
&#238
lowercasei,
circumflexaccent
&iuml
&#239
lowercasei,umlaut
&reg
&#187
&#174
&sbquo
&sect
&#167
&shy
&#173
&spades
sectionsign
softhyphen
blackspadesuit
&sup1
&#185
superscriptone
&sup2
&#178
superscripttwo
&sup3
&#179
superscriptthree
multiplication
sign
&trade
trademarksign
&uarr
upwardarrow
&eth
&#240
lowercaseeth,
Icelandic
&times
&#215
&umlor
&die
&#168
umlaut
&ntilde
&#241
lowercasen,tilde
&yen
&#165
yensign
&ograve
&#242
lowercaseo,grave
accent
&oacute
&#243
lowercaseo,acute
accent
&ocirc
&#244
lowercaseo,
circumflexaccent
&otilde
&#245
lowercaseo,tilde
&ouml
&#246
lowercaseo,
11/44
10/27/2015
umlaut
&oslash
&#248
lowercaseo,slash
&ugrave
&#249
lowercaseu,grave
accent
&uacute
&#250
lowercaseu,acute
accent
&ucirc
&#251
lowercaseu,
circumflexaccent
&uuml
&#252
lowercaseu,
umlaut
&yacute
&#253
lowercasey,acute
accent
&thorn
&#254
lowercasethorn,
Icelandic
&yuml
&#255
lowercasey,
umlaut
Abbreviations
Anotherusefulelementisabbr.Thiscanbeusedtoprovideadefinitionforanabbreviation,e.g.
<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.
12/44
10/27/2015
Element
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
13/44
10/27/2015
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>;
14/44
10/27/2015
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:
15/44
10/27/2015
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.
16/44
10/27/2015
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:
17/44
10/27/2015
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>
</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>
18/44
10/27/2015
</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>
19/44
10/27/2015
<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)
20/44
10/27/2015
since whole wheat flour contributes to your fiber intake.

</p>
<h2>Ingredients</h2>
<ul>
<li>1 cup whole wheat flour</li>
<li>1 tablespoon common granulated sugar</li>
<li>2 teaspoons baking powder</li>
<li>1/4 teaspoon salt</li>
<li>1 egg</li>
<li>1 cup milk</li>
<li>2 tablespoons oil</li>
<li>additional oil for frying</li>
</ul>
<h2>Procedure</h2>
<ol>
<li>Oil a frying pan.</li>
<li>Mix the dry ingredients in one bowl.</li>
<li>In another bowl, scramble the egg, then add the other wet ingredients.
This includes the 2 tablespoons of oil.</li>
<li>Mix the dry and wet ingredients together,
well enough to eliminate dry spots but no more.</li>
<li>Heat the frying pan to medium temperature.
The pan is hot enough when a drop of water dances around
rather than simply boiling away.</li>
<li>Pour a pancake, about 4 inches in diameter using about a 1/4 cup of batter.</li>
<li>The pancake will bubble. When the bubbling settles down and
the edges are slightly dry, flip the pancake.</li>
<li>When the pancake looks done, remove it and start another one.</li>
</ol>
<h2>Toppings</h2>
<p>Traditionally, pancakes are topped with butter and maple syrup.
Other toppings can include strawberries, applesauce, cinnamon, or sugar.
</p>
</body>
</html>
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.
21/44
10/27/2015
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.
22/44
10/27/2015
<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.
23/44
10/27/2015
TaskCreateaborderaroundatable
1. Openyourtable.htmfile.
2. Inthe<table>tag,addborder=2
i.e.<tableborder=2>.
3. Savethefileandviewit.
4. Changethesizeoftheborder(i.e.,try0,10,andtryacrazynumber).
5. Viewtheresultsasyougo.
Didyouspotthatonlytheoutsidebordergetsbigger?
HeightandWidth
Atable,bydefault,willbeaslargeasthedatathatisenteredintoit.
Wecanchangetheoverallheightandwidthofthetabletogetitthesizewewant.
Itispossibletogivethesizeinabsolutepixels,orasarelativepercentageofthescreensize.
Thesyntaxis:<tableheight=???width=???>where???isthesizeinpixelsorpercentage.
Itisalsopossibletocontrolthedimensionsofindividualtablecellsorrows.
e.g.<trheight=80><tdwidth="50%">
Itispossibletomixabsoluteandrelativeheightsandwidths.
NotethatyoucandothesamethingwithCSSbychangingthepadding.
TaskDefinethesizeofatable
2. Inthe<tableborder=2>tag,wewilladdtheheightandwidth
e.g.<tableborder=2height=200width=300>
3. Savethefileandthenviewit.Resizethebrowserwindow,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
24/44
10/27/2015
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
25/44
10/27/2015
BECAUSEITUSESROWSPAN="2"
<THISROWHASONLYTWOTABLEDATAS,BECAUSEITSFIRSTISBEING
TAKENUP.
Syntax:
<tdcolspan=X>whereXisthenumberofcolumnsthatthecellspansacross.
<tdrowspan=X>whereXisthenumberofrowsthatthecellspansacross.
TaskRowspanandcolumnspan
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">
26/44
10/27/2015
wherefilenameisthepathandfilenameofthebackgroundimage.
Note:itisnotrecommendedtospecifybackgroundimagesusingHTMLitismuchbettertouseCSSforthis
purpose.
TaskBackgroundcolourandimages
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:
27/44
10/27/2015
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>

<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
28/44
10/27/2015
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.
29/44
10/27/2015
<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 {
30/44
10/27/2015
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).
31/44
10/27/2015
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
32/44
10/27/2015
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
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
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:
wherestyle.cssistheURLforthestylesheet.
TheCSSfilefortheexampleabovecontainsthefollowing:
body {
background:#ffc;
color:#000;
font-family:cursive
}
33/44
10/27/2015
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
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>
34/44
10/27/2015
<p>Ordinary sundials do not correct apparent solar time to clock time. There is a 15 minute
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:

35/44
10/27/2015
Conditionalcommentsaddadditionalsyntaxtocomments.Thesimplestexampleis:

Browsersthatdon'tunderstandtheconditionalcommentsyntaxwillprocessthisasanormalcomment,i.e.the
contentofthecommentwillbeignored.
SpecificversionsofIE/wincanbetargetedbychangingtheexpressionaftertheif.Forexampletotargetany
versionofIE/winwithamajorversionof5use:

ThetextwilldisplayinIE/winversions5.0and5.5.
Totargetaspecificversionnumber,e.g.5.0,thesyntaxisslightlyquirky.

InequalitiescanbeusedintheexpressionbyplacinganoperatorbeforetheIE.Theoperatorsare:
lt
lessthan(butatleastversion5.0whichisthelowestversionsupportingconditionalcomments)
lte
lessthanorequal(butatleastversion5.0whichisthelowestversionsupportingconditionalcomments)
gt
greaterthan
gte
greaterthanorequals
Example:

Alltheexpressionscanbenegatedbyprefixingwith!,e.g.


ThesecondexamplemayseempointlessbutwithasmalltweakyoucanarrangetohidetextfromIE/win
version5andabove.
 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. 
ThefollowingHTMLdocumentisaworkingexample.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Conditional comments</title>
</head>
<body>

<p>This is page is not being viewed with Internet Explorer for Windows version 5.0 or higher.</p>


</body>
</html>
UsewithCSS
ConditionalcommentscanbeusedtopassadditionalstylesheetstoIE/win.Thesestylesheetscanprovidefixes
tolayoutbugsinIE/win.Thebasicideais:
<head>

</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.
37/44
10/27/2015
Therearemusicplayersforwebsitesthatyoucanfindifyousearch.Theyshouldneverbesettoautoplay,
theyshouldonlyplaywhentheuserchoosestoplaythem.
Browsers'extensions
ConditionalComments
ConditionalcommentsareaproprietaryextensiontoMicrosoftInternetExplorerforWindows(IE/win)
version5.0andlater.TheyarenotavailableinInternetExplorerforMac(IE/mac).Theyareaveryusefulway
ofhandlingtheCSSbugsinthevariousversionsofInternetExplorer.
Syntax
Anordinary(X)HTMLcommentlookslikethis:

Conditionalcommentsaddadditionalsyntaxtocomments.Thesimplestexampleis:

Browsersthatdon'tunderstandtheconditionalcommentsyntaxwillprocessthisasanormalcomment,i.e.the
contentofthecommentwillbeignored.
SpecificversionsofIE/wincanbetargetedbychangingtheexpressionaftertheif.Forexampletotargetany
versionofIE/winwithamajorversionof5use:

ThetextwilldisplayinIE/winversions5.0and5.5.
Totargetaspecificversionnumber,e.g.5.0,thesyntaxisslightlyquirky.
InequalitiescanbeusedintheexpressionbyplacinganoperatorbeforetheIE.Theoperatorsare:
lt
lessthan(butatleastversion5.0whichisthelowestversionsupportingconditionalcomments)
lte
lessthanorequal(butatleastversion5.0whichisthelowestversionsupportingconditionalcomments)
gt
greaterthan
gte
greaterthanorequals
Example:

Alltheexpressionscanbenegatedbyprefixingwith!,e.g.

38/44
10/27/2015

ThesecondexamplemayseempointlessbutwithasmalltweakyoucanarrangetohidetextfromIE/win
version5andabove.
 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. 
ThefollowingHTMLdocumentisaworkingexample.
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>

<p>This is page is not being viewed with Internet Explorer for Windows version 5.0 or higher.</p>


</body>
</html>
UsewithCSS
ConditionalcommentscanbeusedtopassadditionalstylesheetstoIE/win.Thesestylesheetscanprovidefixes
tolayoutbugsinIE/win.Thebasicideais:
<head>

</head>
Externallinks
Thesetestsforconditionalcomments(http://www.positioniseverything.net/articles/sidepages/cond_1.html)on
PositionisEverythingmayhelpyouunderstandthequirksofconditionalcomments.
Appendices
TagList
ThefollowingisalistofallelementsinHTML4,inalphabeticalorder.TODOforthebook:updatelistfor
HTML5Clickonaelementforitsdescription.XHTML1.0hasthesameelementsbuttheattributesdiffer
slightly.
39/44
10/27/2015
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.
40/44
10/27/2015
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
41/44
10/27/2015
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
42/44
10/27/2015
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
43/44
10/27/2015
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.
44/44

HyperText Markup Language Print Version - Wikibooks Open Books For An Open World

Загружено:

Сведения о документе

Оригинальное название

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

HyperText Markup Language Print Version - Wikibooks Open Books For An Open World

Загружено:

Авторское право:

Доступные форматы

10/27/2015

<link rel="alternate" type="application/rss+xml" href="rss.aspx" title="RSS 2.0">

<meta name="keywords" content="web, HTML, markup, hypertext">

<p>An introductory paragraph.</p>

<h1>This is Level 1</h1>

It is essential not only to guess but actually <em>observe</em> the results.

since whole wheat flour contributes to your fiber intake.

Вам также может понравиться