tutorial getting started - seattle central...

HTML 1

TuTorial 1Objectives

Session 1.1•Explorethehistoryofthe

Internet,theWeb,andHTML•Comparethedifferentversions

ofHTML•StudythesyntaxofHTMLtags

andattributes•DefineaWebpagehead,

body,andtitle•WorkwiththeHTML5

structuralelements

Session 1.2•Markpageheadings,

paragraphs,blockquotes,andaddresses

•Createunorderedandorderedlists

•ApplyanexternalstylesheettoaWebpage

•RunaJavaScriptprogram•Marktext-levelelements

includingstrongandemphasizedtext

•Insertinlineimagesandlinebreaks

•Insertspecialcharactersfromextendedcharactersets

TuTorial 1Getting Started with HTML5Creating a Product Page for a Small Business

Case | The J-Prop ShopDaveVinetownsasmallbusinesscalledthe J-PropShopthatbuildsandsellscircuspropsandequipment.DaveislookingtoexpandhisbusinessandhisvisibilitybyupgradinghisWebsite.DavehasalreadywrittenthetextfortheWebsite’shomepageandhasgener-atedsomeofthegraphicimagesforit.HehascometoyouforhelpindesigningaWebpageandwritingthecode.DavehopestobuildonhisWebpageinthefutureashisbusinessexpands,sohewouldlikeyoutowritecodethattakesadvantageofthelatestWebstan-dards,includingHTML5.YourjobwillbetocreateasamplehomepagethatDavecanuseasafoundationforhisnewWebsite.

STarTing DaTa FileS

tutorial.01 tutorial

jpslogo.pngjpsstyles.cssmodernizr-1.5.js

review

basiclogo.pngbasicstick.pngbasicstyles.cssstick.txtmodernizr-1.5.js

case1

mhlogo.jpgmhstyles.cssmhtxt.htmmodernizr-1.5.js

dessertstyles.cssdessertweb.jpgmodernizr-1.5.jstorte.jpgtortetxt.htm

case3

case2

macbeth.jpgmacbethtxt.htmmacstyles.cssmodernizr-1.5.js

logo.jpgsmith.jpgsmith.txt

case4

cengage.jpgdemo.gifdemo_characters.htmdemo_html.htmdemo2.gifmodernizr-1.5.js

demo

Not For Sale

© C

enga

ge L

earn

ing.

All

right

s re

serv

ed. N

o di

strib

utio

n al

low

ed w

ithou

t exp

ress

aut

horiz

atio

n.

HTML 2 HTML and CSS | Tutorial 1 Getting Started with HTML5

sessiOn 1.1 visual Overview

One-sided tags mark elements that contain no textual content

Two-sided tags mark elements that contain textual content or other elements

The header element contains an introduction to the page.

opening tag element content

closing tag

The footer element contains address and summary information.

The aside element contains extra content on the page.

Structure of an HTML file

The head element provides information and instructions to the browser about the document.

The section element marks a major section of the Web page.

The doctype statement indicates the markup language of the document.

The article element contains content about a specific area of interest.

HTML structural elements define the basic structure of the contents of the Web page.

The contents of the title element appear in the browser title bar.

The body element contains the content of the page body.

HTML comments document the HTML code.

Resulting Web page

Markup Tags

Document elements are marked using tags.

Resulting Web page

Not For Sale

© C

enga

ge L

earn

ing.

All

right

s re

serv

ed. N

o di

strib

utio

n al

low

ed w

ithou

t exp

ress

aut

horiz

atio

n.

HTML 3Tutorial 1 Getting Started with HTML5 | HTML and CSS

One-sided tags mark elements that contain no textual content

Two-sided tags mark elements that contain textual content or other elements

The header element contains an introduction to the page.

opening tag element content

closing tag

The footer element contains address and summary information.

The aside element contains extra content on the page.

Structure of an HTML file

The head element provides information and instructions to the browser about the document.

The section element marks a major section of the Web page.

The doctype statement indicates the markup language of the document.

The article element contains content about a specific area of interest.

HTML structural elements define the basic structure of the contents of the Web page.

The contents of the title element appear in the browser title bar.

The body element contains the content of the page body.

HTML comments document the HTML code.

Resulting Web page

Markup Tags

Document elements are marked using tags.

Resulting Web page

the structure Of an htMl5 DOcuMent

Not For Sale

© C

enga

ge L

earn

ing.

All

right

s re

serv

ed. N

o di

strib

utio

n al

low

ed w

ithou

t exp

ress

aut

horiz

atio

n.


Exploring the History of the World Wide WebBeforeyoustartcreatingaWebpageforDave,itwillbehelpfultofirstlookatthehis-toryoftheWebandthedevelopmentofHTML.You’llstartbyreviewingnetworksandlearnhowtheyledtothecreationoftheWorldWideWeb.

NetworksAnetworkisastructurethatallowsdevicesknownasnodesorhosts tobelinkedtogethertoshareinformationandservices.Hostscanincludedevicessuchascomput-ers,printers,andscannersbecausetheyareallcapableofsendingandreceivingdataelectronicallyoveranetwork.

Ahostthatprovidesinformationoraserviceiscalledaserver.Forexample,aprint serverisanetworkhostthatprovidesprintingservicestothenetwork;afile serverisahostthatprovidesstoragespaceforsavingandretrievingfiles.Acomputerorotherdevicethatreceivesaserviceiscalledaclient.Networkscanfollowseveraldifferentdesignsbasedontherelationshipbetweentheserversandtheclients.Oneofthemostcommonlyuseddesignsistheclient-server networkinwhichseveralclientsaccessinformationprovidedbyoneormoreservers.Youmightbeusingsuchanetworktoaccessyourdatafilesforthistutorial.

Networkscanalsobeclassifiedbasedontherangetheycover.Anetworkconfinedtoasmallgeographicarea,suchaswithinabuildingordepartment,isreferredtoasalocal area network orlan.Anetworkthatcoversawiderarea,suchasseveralbuildingsorcities,iscalledawide area networkorwan.Wideareanetworkstypicallyconsistoftwoormoreinterconnectedlocalareanetworks.

ThelargestWANinexistenceistheinternet,whichincorporatesanalmostuncount-ablenumberofnetworksandhostsinvolvingcomputers,mobilephones,PDAs,MP3players,gamingsystems,andtelevisionstations.Likemanybusinessowners,DaveusestheInternettoadvertisehisbusinesstopotentialcustomers.

Locating Information on a NetworkOneofthebiggestobstaclestoeffectivelyusingtheInternetisthenetwork’ssheerscopeandsize.MostoftheearlyInternettoolsrequireduserstomasterabewilderingarrayofterms,acronyms,andcommands.Becausenetworkusershadtobewellversedincom-putersandnetworktechnology,Internetusewaslimitedtouniversitiesandthegovern-ment.TomaketheInternetaccessibletothegeneralpublic,itneededtobeeasiertouse.ThesolutionturnedouttobetheWorldWideWeb.

Thefoundationsfortheworld wide web,orthewebforshort,werelaidin1989byTimothyBerners-LeeandotherresearchersattheCERNnuclearresearchfacilitynearGeneva,Switzerland.TheyneededaninformationsystemthatwouldmakeiteasyfortheirresearcherstolocateandsharedataontheCERNnetworkwithminimaltrainingandsupport.Tomeetthisneed,theydevelopedasystemofhypertextdocumentsthatenableduserstoeasilynavigatefromonetopictoanother.hypertextisamethodoforganizationinwhichdatasourcesareinterconnectedthroughaseriesoflinks orhyper-linksthatuserscanactivatetojumpfromonepieceofinformationtoanother.HypertextisideallysuitedfortheInternetbecauseendusersdonotneedtoknowwhereaparticu-lardocument,informationsource,orserviceislocated—theyneedtoknowonlyhowtoactivatethelink.ThefactthattheInternetandtheWorldWideWebaresynonymousinmanyusers’mindsisatestamenttothesuccessofthehypertextapproach.

Not For Sale

© C

enga

ge L

earn

ing.

All

right

s re

serv

ed. N

o di

strib

utio

n al

low

ed w

ithou

t exp

ress

aut

horiz

atio

n.


Web Pages and Web ServersEachdocumentontheWorldWideWebisreferredtoasaweb page andisstoredonaweb server.WhenyouaccessaWebpage,aweb browserretrievesthepagefromitsWebserverandrendersitonyourcomputerorotherdevice.

Theearliestbrowsers,knownastext-based browsers,werelimitedtodisplayingonlytext.Today’sbrowsersarecapableofhandlingtext,images,audio,video,andinterac-tiveprograms.IntheearlydaysoftheInternet,Webbrowsingwaslimitedtocomputers.Nowbrowsersareinstalledondevicessuchasmobilephones,cars,handheldmediadevices,andgamingsystems,tonameonlyafew.HowdoesaWebpageworkwithsomanycombinationsofbrowsersanddevices?Tounderstand,youneedtolookathowWebpagesarecreated.

Introducing HTMLWebpagesaretextfileswritteninhypertext Markup language(htMl).We’vealreadydiscussedhypertext,butwhatisamarkuplanguage?Amarkup languageisalanguagethatdescribesthecontentandstructureofadocumentbyidentifying,ortagging,dif-ferentelementsinthedocument.Forexample,thistutorialcontainsparagraphs,figurecaptions,pageheadings,andsoforth;eachoftheseitemscouldbetaggedasadistinctelementusingamarkuplanguage.Thus,HTMLisamarkuplanguagethatsupportsbothhypertextandthetaggingofdistinctdocumentelements.

The History of HTMLHTMLevolvedastheWebitselfevolved.Thus,inordertofullyappreciatethenuancesofHTML,it’sagoodideatoreviewthelanguage’shistory.Thefirstpopularmarkuplanguagewasthestandard Generalized Markup language(sGMl).Introducedinthe1980s,SGMLisdevice-andsystem-independent,meaningthatitcanbeappliedtoalmostanytypeofdocumentstoredinalmostanyformat.Whilepowerful,SGMLisalsoquitecomplex;forthisreason,SGMLislimitedtothoseorganizationsthatcanaffordthecostandoverheadofmaintainingcomplexSGMLenvironments.However,SGMLcanalsobeusedtocreateothermarkuplanguagesthataretailoredtospecifictasksandaresimplertouseandmaintain.HTMLisoneofthelanguagescreatedwithSGML.

IntheearlyyearsafterHTMLwascreated,nosingleorganizationwasresponsibleforthelanguage.WebdeveloperswerefreetodefineandmodifyHTMLinwhateverwaystheythoughtbest.Thisledtoincompatibilitiesbetweenthevariousbrowsersand,asaresult,WebpageauthorsfacedthechallengeofwritingHTMLcodethatwouldsatisfydifferentbrowsersandbrowserversions.

Ultimately,agroupofWebdesignersandprogrammerscalledtheworld wide web consortium,orthew3c,createdasetofstandardsorspecificationsforallbrowsermanufacturerstofollow.TheW3Chasnoenforcementpower;butbecauseusingauniformlanguageisineveryone’sbestinterest,theW3C’srecommendationsareusuallyfollowed,thoughnotalwaysimmediately.FormoreinformationontheW3Candtheservicesitoffers,seeitsWebsiteatwww.w3.org.

AsHTMLevolves,earlierfeaturesofthelanguageareoftendeprecated,orphasedout.WhiledeprecatedfeaturesmightnotbepartofthecurrentspecificationforHTML,thatdoesn’tmeanthatyouwon’tencountertheminyourwork—indeed,ifyouaremaintainingolderWebsites,youwilloftenneedtobeabletointerpretcodefromearlierversionsofHTML.

Not For Sale

© C

enga

ge L

earn

ing.

All

right

s re

serv

ed. N

o di

strib

utio

n al

low

ed w

ithou

t exp

ress

aut

horiz

atio

n.


XHTML and the Development of HTML5Neartheendofthe1990s,theW3Creleasedthefinalspecificationsforthe4thver-sionofHTML,calledHTML4,andbeganchartingacourseforthenextversion.ThepathchosenbytheW3CwastoreformulateHTMLintermsofXML.XMl(extensible Markup language)isacompactoffshootofSGMLandisusedtodefinenewmarkuplanguages,knownasXMl vocabularies.AdocumentbasedonanXMLvocabularyisforcedtoobeyspecificrulesforcontentandstructuretoavoidbeingrejectedasinvalid.Bycontrast,HTMLallowsforawidevarietyinsyntaxbetweenoneHTMLdocumentandanother.AnotherimportantaspectofXMListhatseveralXMLvocabulariescanbecombinedwithinasingledocument,makingiteasiertoextendXMLintodifferentareasofapplication.

TheW3CdevelopedanXMLvocabularythatwasastricterversionofHTML4, knownasXhtMl(extensible hypertext Markup language).XHTMLwasdesignedtoconfrontsomeoftheproblemsassociatedwiththevariouscompetingversionsofHTMLandtobetterintegrateHTMLwithothermarkuplanguages.BecauseXHTMLwasanXMLver-sionofHTML,mostofwhatWebdesignersusedwithHTMLcouldbeappliedtoXHTMLwithonlyafewmodifications,andmanytoolsandfeaturesassociatedwithXMLcouldbeeasilyappliedtoXHTML.

By2002,theW3ChadreleasedthespecificationsforXHTML1.1.ThisversionwasintendedtobeonlyaminorupgradeonthewaytoXhtMl 2.0,whichwouldcontainasetofXMLvocabulariesmovingHTMLintothefuturewithrobustsupportformul-timedia,socialnetworking,interactiveWebforms,andotherfeaturesneededbyWebdesigners.OneproblemwasthatXHTML2.0wouldnotbebackwardcompatiblewithearlierversionsofHTMLandthusolderWebsitescouldnotbeeasilyintegratedwiththeproposednewstandard.

Webdesignersrebelledatthisdevelopment.In2004,IanHickson,whowaswork-ingforOperaSoftwareatthetime,proposedadifferentpath.Hickson’sproposalwouldhaveallowedforthecreationofnewWebapplicationswhilestillmaintainingbackwardcompatibilitywithHTML4.HearguedthatHTMLwaswhateverthebrowsermarketdeterminedittobe,andthattryingtoenforceanewspecificationthatdidnotaccommo-datetheneedsandlimitationsofthemarketwasafruitlessexercise.

Hickson’sproposalwasrejectedbytheW3Cand,inresponse,anewgroupofWebdesignersandbrowsermanufacturersformedtheweb hypertext application technology working Group (whatwG)withthemissiontodeveloparivalversiontoXHTML2.0,calledhtMl5.Forseveralyears,itwasunclearwhichspecificationwouldrepresentthefutureoftheWeb;butby2006,workonXHTML2.0hadcompletelystalled.TheW3CissuedanewcharterforanHTMLWorkingGrouptodevelopHTML5asthenextHTMLspecification.WorkonXHTML2.0washaltedin2009,leavingHTML5asthedefactostandardforthenextgenerationofHTML.

Not For Sale

© C

enga

ge L

earn

ing.

All

right

s re

serv

ed. N

o di

strib

utio

n al

low

ed w

ithou

t exp

ress

aut

horiz

atio

n.


Version Date DescriptionHTML1.0 1989 The first public version of HTML.

HTML 2.0 1995 Added interactive elements including Web forms.

HTML 3.0 1996 A proposed replacement for HTML 2.0 that was never widely adopted.

HTML 3.2 1997 Included additional support for Web tables and expanded the options for interactive form elements and a scripting language.

HTML 4.01 1999 Added support for style sheets to give Web designers greater control over page layout and appearance, and provided support for multi-media elements such as audio and video. Current browsers support almost all of HTML 4.01.

XHTML 1.0 2001 A reformulation of HTML 4.01 in the XML language in order to pro-vide enforceable standards for HTML content and to allow HTML to interact with other XML languages.

XHTML 1.1 2002 A minor update to XHTML 1.0 that allows for modularity and simpli-fies writing extensions to the language.

XHTML 2.0 discontinued The follow-up version to XHTML 1.1 designed to fix some of the prob-lems inherent in HTML 4.01 syntax. Work on this version was discon-tinued in 2009 due to lack of browser support.

HTML 5.0 In development An update to HTML 4.01 that provides support for a variety of new features including semantic page elements, column layout, form vali-dation, offline storage, and enhanced multimedia.

XHTML 5.0 In development A version of HTML 5.0 written under the XML language; unlike XHTML 2.0, XHTML 5.0 will be backward compatible with XHTML 1.1.

figure 1-1 versions of htMl

Figure 1-1summarizesthevariousversionsofHTMLthathavebeendevelopedoverthepast20years.YoumaybewonderinghowonEarthanythingcanbewrittenwithsomanyversionsofHTMLtoconsider.Atthetimeofthiswriting,youcanwriteyourcodefollowingthestandardsofHTML4.01orXHTML1.1andbeassuredthatitwillbesup-portedbyallmajorbrowsers.ManyfeaturesofHTML5arealsobeingrapidlyadoptedbythemarketevenasworkcontinuesondevelopingthelanguage.HTML5isthefuture,butthechallengesforWebdesignerstodaylieinknowingwhichpartsofHTML5aresupportedbywhichbrowsers,andindevelopingstrategiesforsupportingolderbrowsersevenasHTML5isbeingimplemented.

Inthisbookyou’lluseHTML5codeforthosefeaturesthathavealreadyachievedsup-portamongcurrentbrowsers,butyou’llalsolearnthestandardsusedforHTML4.01andXHTML1.1andpracticewritingcodethatwillsupportbothcurrentandolderbrowsers.

HTML and Style SheetsHTMLmarksthedifferentpartsofadocument,butitdoesnotindicatehowdocumentcontentshouldbedisplayedbybrowsers.ThisisanecessaryfacetofHTMLbecauseaWebpageauthorhasnocontroloverwhatdevicewillactuallyviewhisorherdocu-ment.Anendusermightbeusingalarge-screentelevisionmonitor,amobilephone,orevenadevicethatrendersWebpagesinBrailleorinauralspeech.

Forthisreason,theexactappearanceofeachpageelementisdescribedinasepa-ratedocumentknownasastyle sheet.Eachbrowserhasitsowninternal style sheetthatspecifiestheappearanceofdifferentHTMLelements.Forexample,contentthatismarkedascontainingthetextofanaddressisrenderedbymostWebbrowsersinitalic,whilemajorheadingsusuallyappearinlargebold-facedfonts.

Not For Sale

© C

enga

ge L

earn

ing.

All

right

s re

serv

ed. N

o di

strib

utio

n al

low

ed w

ithou

t exp

ress

aut

horiz

atio

n.


AWebpageauthorcanalsocreateastylesheetthattakesprecedenceovertheinternalstylesheetsofbrowsers.Inaddition,anauthorcancreatemultiplestylesheetsfordifferentoutputdevices:oneforrenderingapageonacomputerscreen,anotherforprintedoutput,andanotherforrenderingthepageaurally.Ineachcase,themarkupofthedocumentcontentisthesame,butthepresentationisdeterminedbythestylesheet.

Tools for Creating HTML DocumentsBecauseHTMLdocumentsaresimpletextfiles,youcancreatethemusingnothingmorethanabasictexteditorsuchasWindowsNotepad.Othersoftwareprogramsthatenableyoutocreatedocumentsindifferentformats,suchasMicrosoftWordorAdobeAcrobat,includetoolstoconverttheirdocumentsintoHTMLforquickandeasypub-lishingontheWeb.

IfyouintendtocreatealargeWebsiteincorporatingdozensofWebpages,youshouldinvestinspecializedWebpublishingsoftwaretomanageallofthecodeandextendedfeaturesofyoursite.ProgramssuchasAdobeDreamweaverandMicrosoftExpressionWebareamongtheleadersinthisfield.

SincethisbookisfocusedontheHTMLlanguageitselfandnothowtoworkwithdif-ferentsoftwareprograms,you’llneednothingmorethanatexteditorandaWebbrowsertocompletetheassignmentsthatfollow.

Entering Elements and AttributesNowthatyou’vehadachancetoreviewabriefhistoryoftheWebandtheroleofHTMLinitsdevelopment,youarereadytowriteyourfirstHTMLdocumentfortheJ-PropShop.You’llstartbystudyingtherulesforenteringHTMLcode.

Introducing HTML TagsAnHTMLdocumentiscomposedofelements thatrepresentdistinctitemsintheWebpage,suchasaparagraph,thepageheading,oreventheentirebodyofthepageitself.EachelementismarkedwithintheHTMLfilebyoneormoretags.Ifanelementcon-tainstextoranotherelement,itismarkedusingatwo-sided tag setinwhichanopening tag andaclosing tagenclosetheelementcontent.Thesyntaxofatwo-sidedtagsetis

<element>content</element>

whereelementisthenameoftheelementandcontentisthecontentoftheelement.Forexample,thefollowingcodemarksaparagraphusingatwo-sidedtagset:

<p>Welcome to the J-Prop Shop.</p>

Inthisexample,the<p>tagmarksthebeginningoftheparagraph,thetextWelcome to the J-Prop Shop.isthecontentoftheparagraphelement,andthe</p>tagmarkstheendoftheparagraph.Elementscanalsocontainotherelements.Forexample,inthecode

<p>Welcome to <em>Dave's Devil Sticks</em>.</p>

theparagraphtagsencloseboththetextoftheparagraphandthetagset<em> ... </em>,whichisusedtomarkcontentthatshouldbetreatedbythebrowserasemphasizedtext.Notethatthe<em>tagsetmustbecompletelyenclosed,ornested,withinthe<p>tags.It’simpropertohavetagsoverlapasinthefollowingcodesample:

<p>Welcome to <em>Dave's Devil Sticks.</p></em>

Inthisexample,theclosing</em>tagisplacedaftertheclosing</p>tag,whichisimproperbecauseoneelementmustbecompletelycontainedwithinanother.

Not For Sale

© C

enga

ge L

earn

ing.

All

right

s re

serv

ed. N

o di

strib

utio

n al

low

ed w

ithou

t exp

ress

aut

horiz

atio

n.


Anelementthatdoesnotenclosecontentisanempty elementanditismarkedwithaone-sided tag usingthesyntax

<element />

whereelementisthenameoftheelement.Forexample,youcanmarkalinebreakusingthebrelement,whichhasthefollowingsyntax:

<br />

Sinceemptyelementsdon’tcontaincontent,they’reoftenemployedtosenddirectivestobrowsersregardinghowapageshouldberendered.Abrowserencounteringthebrelementwouldinsertalinebreak,causingthetextofthenextelementinthedocumenttobeplacedonanewline.

Specifying an Element AttributeInadditiontocontent,elementsalsosupportattributes thatspecifytheuse,thebehavior,andinsomecasestheappearanceofanelement.Attributevaluesdon’tappearintherenderedWebpage;rather,theyprovideinformationtothebrowseraboutthepropertiesoftheelement.

Toaddanattributetoanelement,youinserttheattributewithintheelement’sopen-ingtag.Foratwo-sidedtag,thesyntaxis:

<element attribute1=”value1” attribute2=”value2” ...> content</element>

Attributesareaddedtoone-sidedtagsinthesameway:

<element attribute1=”value1” attribute2=”value2” ... />

Intheseexamples,attribute1,attribute2,etc.arethenamesofattributesassoci-atedwiththeelement,andvalue1,value2,etc.arethevaluesofthoseattributes.Forinstance,thefollowingcodeaddstheidattributetoaparagraphmarkedwiththepelement:

<p id=”opening”>Welcome to the J-Prop Shop.</p>

AbrowserinterpretingthiscodewouldrecognizethatthetextWelcome to the J-Prop Shop.shouldbetreatedasaparagraphandgiventheidvalueopening.

Attributes can be listed in any order, but they must be separated from one another by a blank space and enclosed within single or double quotation marks.

REFE

RENCE

Adding an Attribute to an Element• Toaddanelementattribute,usetheformat

<element attribute1=”value1” ƒƒƒƒƒƒƒƒƒattribute2=”value2” ...>content</element>

where attribute1, attribute2, etc. are the names of attributes associated with the element, and value1, value2, etc. are the values of those attributes.

White Space and HTMLSinceanHTMLfileisatextfile,it’scomposedoftextcharactersandwhitespace.white spaceincludestheblankspaces,tabs,andlinebreaksfoundwithinthefile.Asfarasabrowserisconcerned,thereisnodifferencebetweenablankspace,atab,oralinebreak.Browsersalsoignoreconsecutiveoccurrencesofwhitespace,collapsingextra

Not For Sale

© C

enga

ge L

earn

ing.

All

right

s re

serv

ed. N

o di

strib

utio

n al

low

ed w

ithou

t exp

ress

aut

horiz

atio

n.


whitespacecharactersintoasingleblankspace.Thus,browserstreatthefollowingpara-graphelementsinthesameway:


<p> Welcome to the J-Prop Shop.</p>

<p>Welcometo the J-Prop Shop.</p>


BecauseHTMLhandleswhitespaceinthisway,youcanmakeyourcodeeasierforotherstoreadbyindentinglinesandaddingextrablanklinestoseparateonetagfromanotherinthefile.

INSIGHT

HTML5 and XHTML SyntaxThe rules that govern how code should be entered are called syntax. The way that HTML has been implemented by most browsers through the Web’s history has allowed for minor variations in syntax. One reason for the success of the Web is that HTML has made it easy for non-programmers to write and edit code without being ensnarled by syntax violations.

On the other hand, XHTML forces strict syntax on page authors. If an author’s code does not follow the rules, browsers do not render the page. One advantage of this approach is that it forces authors to write clear and more concise code; indeed, one of the driving forces behind the development of XHTML was the desire to clean up some of the messy and inconsistent code found on the Web.

For example, XHTML requires that all tag names be placed in lowercase letters and that all attribute values be enclosed within quotation marks. HTML allows either upper-case or lowercase tag names and does not require attribute values to be quoted. In addition, XHTML requires that every one-sided tag be entered with a closing slash: for instance, the br element must be entered as <br /> for XHTML compatibility. Most browsers, however, accept HTML code in which one-sided tags are entered without clos-ing slashes; thus, the br element could be entered either as <br> or as <br />.

HTML5 supports the informal standards accepted by most browsers and will continue to allow for minor variations in syntax. However, it is still good practice to write all code to be XHTML compliant whenever possible, since it will allow that code to be easily transferred to XHTML environments if necessary.

Exploring the Structure of an HTML DocumentThestructureofanHTMLdocumentconsistsofdifferentelementsnestedwithineachotherinahierarchyofelements.Thetopelementinthathierarchyisthehtml element, whichcontainsalloftheotherelementswithinanHTMLfile.Directlybelowthehtmlelementinthehierarchyaretheheadandbodyelements.Thehead elementcontainsgeneralinformationaboutthedocument—forexample,thedocument’stitle,oralistof

Not For Sale

© C

enga

ge L

earn

ing.

All

right

s re

serv

ed. N

o di

strib

utio

n al

low

ed w

ithou

t exp

ress

aut

horiz

atio

n.


keywordsthatwouldaidsearchenginesindirectinginteresteduserstothepage.Thebody elementcontainsallofthecontentthatappearsintherenderedWebpage.Thus,thegeneralstructureofanHTMLfileis

<html> <head> head content </head> <body> body content </body></html>

wherehead contentandbody contentarethecontentyouwanttoplacewithinthedocument’sheadandbody.Notethatthebodyelementisalwaysplacedaftertheheadelement.

The Document Type DeclarationPriortotheopening<html>tag,manyHTMLfilesalsoincludeaDocument type Declaration, ordoctype, toindicatethetypeofmarkuplanguageusedinthedocument.Thedoctypeisusedbyvalidators,whichareprogramsthatexaminedocumentcodetoensurethatitmeetsallthesyntaxrequirementsofthespecifiedlanguage.AllXHTMLfilesrequireadoctypebecausethosedocumentsmustbevalidatedagainstasetofstandards.

Mostcurrentbrowsersalsousethepresenceorabsenceofadoctypetodecidewhichmodetheyshouldusetorenderadocumentinaprocessknownasdoctype switching.Ifadoctypeisincluded,suchbrowsersrendertheWebpageinstandards mode,inaccor-dancewiththemostcurrentspecificationsofthelanguage.Ifnodoctypeisprovided,thesebrowsersrenderthedocumentinquirks modebasedonpracticesfollowedinthe1990s.Thedifferencescanbestriking.Figure 1-2showsanexampleoftwodocumentsrenderedbyInternetExplorerunderstandardsmodeandquirksmode.Theonlydiffer-enceinthecodebetweenthesetwodocumentsisthepresenceorabsenceofadoctype,butthebrowserrendersthetwodocumentsverydifferently.

Standards mode Quirks mode

figure 1-2 a web page rendered in standards mode and quirks mode

DifferentHTMLversionshavedifferentdoctypes.ThedoctypeforHTML4.01is:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01/EN” ƒƒ“http://www.w3.org/TR/html4/strict.dtd”>

Not For Sale

© C

enga

ge L

earn

ing.

All

right

s re

serv

ed. N

o di

strib

utio

n al

low

ed w

ithou

t exp

ress

aut

horiz

atio

n.


ThedoctypeforXHTMLis:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

Finally,thedoctypeforHTML5ismuchsimplerthanwhatwasrequiredforHTML4.01orXHTML:

<!DOCTYPE html>

HTML5documentsshouldalwaysbeopenedinstandardsmodebecausetheyarebasedonthelatestspecificationsfortheHTMLlanguage.

YoucanlearnmoreaboutstandardsmodeandquirksmodebysearchingtheWebforexamplesofthedifferencesbetweenthetwomodes.

Creating the Initial DocumentNowthatyou’veseenthebasicstructureofanHTMLdocument,youarereadytobegincreatingthesampleWebpageforDave’sWebsite.

Unless you are work-ing with a legacy page that absolutely needs to be compatible with old browsers from the 1990s, you should always include a doctype and put your browser in standards mode.

REFE

RENCE

Creating the Basic Structure of an HTML DocumentEnter the HTML tags

doctype<html> <head> head content </head> <body> body content </body></html>

wheredoctypeistheDocumentTypeDeclaration,andhead contentandbody content arethecontentofthedocument’sheadandbody.

YoucanstartcreatingDave’sWebpageusingabasiceditorsuchasWindowsNotepad.SinceDavewantshisdocumenttobebasedonHTML5,you’llusetheHTML5doctypeinyourfile.

To create the basic structure of an HTML document:◗ 1. Start your text editor, opening a blank text document.

Trouble? If you don’t know how to start or use your text editor, ask your instruc-tor or technical support person for help. Note that some editors do not save files in text file format by default, so check your editor’s documentation to ensure that you are creating a basic text document.

Not For Sale

© C

enga

ge L

earn

ing.

All

right

s re

serv

ed. N

o di

strib

utio

n al

low

ed w

ithou

t exp

ress

aut

horiz

atio

n.


Nowthatyou’veenteredthebasicstructureofyourHTMLfile,youcanstartenteringthecontentoftheheadelement.

Marking the Head ElementIngeneral,theheadelementiswhereyouprovidebrowserswithinformationaboutyourdocument.Thiscanincludethepage’stitle,thelocationofanystylesheetsusedwiththedocument,thelocationofanyprogramsthatbrowsersshouldrunwhentheyloadthepage,andinformationforusebysearchenginestoaidusersinlocatingtheWebsite.

Defining the Page TitleThefirstelementyou’lladdtotheheadofDave’sdocumentisthetitleelement,whichhasthesyntax

<title>document title</title>

wheredocument titleisthetextofthedocumenttitle.Thedocumenttitleisnotdis-playedwithinthepage,butisusuallydisplayedinabrowser’stitlebaroronabrowser

◗ 2. Type the following lines of code in your document. Press the Enter key after each line. Press the Enter key twice for a blank line between lines of code. See Figure 1-3.

<!DOCTYPE html><html>

<head> </head>

<body> </body>

</html>

Make sure you include the exclamation point (!) within the doctype; oth-erwise, browsers will not recognize the doctype.

opening html tag

doctype indicates the type of document

closing html tag

doctype for HTML5 documents

head section contains information about the document

body section contains content to be displayed by Web browsers

figure 1-3 basic structure of an htMl file

◗ 3. Save the file as jprop.htm in the tutorial.01\tutorial folder included with your Data Files.

Trouble? If you are using the Windows Notepad text editor to create your HTML file, make sure you don’t save the file with the extension .txt, which is the default file extension for Notepad. Instead, save the file with the file extension .htm or .html. Using the incorrect file extension might make the file unreadable to Web browsers, which require file extensions of .htm or .html.

To make it easier to link to your Web pages, follow the Internet convention of naming HTML files and folders using only lowercase letters with no spaces.

Not For Sale

© C

enga

ge L

earn

ing.

All

right

s re

serv

ed. N

o di

strib

utio

n al

low

ed w

ithou

t exp

ress

aut

horiz

atio

n.

Adding CommentsAsyouwriteyourHTMLfile,youcanaddnotesorcommentsaboutyourcode.Thesecommentsmightincludethenameofthedocument’sauthorandthedatethedocumentwascreated.Suchnotesarenotintendedtobedisplayedbybrowsers,butareinsteadusedtohelpexplainyourcodetoyourselfandothers.Toaddnotesorcomments,insertacomment tagusingthesyntax



wherecommentisthetextofthecommentornote.Forexample,thefollowingcodeinsertsacommentdescribingthepageyou’llcreateforDave’sbusiness:



Acommentcanalsobespreadoutoverseverallinesasfollows:



Becausetheyareignoredbythebrowser,commentscanbeaddedanywherewithinthehtmlelement.

To add a title to your Web page:◗ 1. Click at the end of the opening <head> tag, and then press the Enter key to insert

a new line in your text editor.

◗ 2. Press the Spacebar several times to indent the new line of code, and then type <title>The J-Prop Shop</title> as shown in Figure 1-4.

Indent your markup tags and insert extra blank spaces as shown in this book to make your code easier to read. These indentations and spaces do not affect how the page is rendered by browsers.

text will appear in browser title bar or on browser tab

figure 1-4 specifying the page title

REFE

RENCE

Adding an HTML CommentTo insert an HTML comment anywhere within your document, enter



wherecommentisthetextoftheHTMLcomment.

You’lladdacommenttothejprop.htmfile,identifyingtheauthorandpurposeofthisdocument.

tab.ThedocumenttitleisalsousedbysearchengineslikeGoogleorYahoo!whencom-pilinganindexofsearchresults.

Not For Sale

© C

enga

ge L

earn

ing.

All

right

s re

serv

ed. N

o di

strib

utio

n al

low

ed w

ithou

t exp

ress

aut

horiz

atio

n.

Displaying an HTML FileAsyoucontinuemodifyingtheHTMLcode,youshouldoccasionallyviewthepagewithyourWebbrowsertoverifythatyouhavenotintroducedanyerrors.Youmightevenwanttoviewtheresultsusingdifferentbrowserstocheckforcompatibility.Inthisbook,WebpagesaredisplayedusingtheWindowsInternetExplorer9browser.Beawarethatifyouareusingadifferentbrowseroradifferentoperatingsystem,youmightseeslightdifferencesinthelayoutandappearanceofthepage.

To add a comment to the document head:◗ 1. Click at the end of the opening <head> tag, and then press the Enter key to insert

a new line in your text editor directly above the opening <title> tag.

◗ 2. Type the following lines of code as shown in Figure 1-5:



where your name is your name and the date is the current date.

multi-line comment describing the document

figure 1-5 adding comments to the htMl file

To view Dave’s Web page:◗ 1. Save your changes to the jprop.htm file.

◗ 2. Start your Web browser. You do not need to be connected to the Internet to view local files stored on your computer.

Trouble? If you start your browser and are not connected to the Internet, you might get a warning message. Click the OK button to ignore the message and continue.

◗ 3. After your browser loads its home page, open the jprop.htm file from the tutorial.01\tutorial folder.

Trouble? If you’re not sure how to open a local file with your browser, check for an Open or Open File command under the browser’s File menu. If you are still having problems accessing the jprop.htm file, talk to your instructor or technical resource person.

Not For Sale

© C

enga

ge L

earn

ing.

All

right

s re

serv

ed. N

o di

strib

utio

n al

low

ed w

ithou

t exp

ress

aut

horiz

atio

n.


Your browser displays the Web page shown in Figure 1-6. Note that in this case, the page title appears in the browser tab; in other cases, it will appear in the browser’s title bar. The page itself is empty because you have not yet added any content to the body element.

no content appears in the page body

document title appears in the browser tab

figure 1-6 viewing the initial htMl file in a web browserIN

SIGHT

Converting an HTML Document into XHTMLThere is considerable overlap between HTML and XHTML. You can quickly change an HTML document into an XHTML document just by altering the first three lines of code. To convert an HTML file into an XHTML file, replace the doctype and the opening <html> tag with the following:

<?xml version=”1.0” encoding=”UTF-8” standalone=”no” ?><!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”><html xmlns=”http://www.w3.org/1999/xhtml”>

Since XHTML is an XML vocabulary, the first line notifies browsers that the document is an XML file. The version number—1.0—tells the browser that the file is written in XML 1.0. The second line provides the doctype for an XHTML document written under a strict interpretation of XHTML syntax. The third line of the file contains the opening <html> tag. In XHTML, the <html> tag must include what is known as a namespace declaration indicating that any markup tags in the document should, by default, be considered part of the XHTML language. Because XML documents can contain a mixture of several different vocabularies, the namespace declaration is necessary to specify the default language of the document. With these three lines in place, browsers will recog-nize the file as an XHTML document.

Not For Sale

© C

enga

ge L

earn

ing.

All

right

s re

serv

ed. N

o di

strib

utio

n al

low

ed w

ithou

t exp

ress

aut

horiz

atio

n.


Defining the Structure of the Page BodyNowthatyou’vemarkedthedocumentheadandinsertedapagetitle,you’llturntothecontentsofthebodyoftheWebpage.It’salwaysagoodideatoplanyourWebpagebeforeyoustartcodingit.Youcandothisbydrawingasketchorbycreatingasampledocumentwithinawordprocessor.Yourpreparatoryworkcanweedouttextualerrorsorpointtopotentialproblemsinyourpagelayout.Inthiscase,Davehasalreadydrawnupaflyerthathe’spassedoutatjugglingandcircusconventions.Figure 1-7showsthehandout,whichprovidesinformationaboutDave’scompanyandhisproducts.

figure 1-7 Dave’s flyer

Dave’sflyercontainsseveralelementsthatarecommontomanyWebpages,asshowninFigure 1-8.Aheaderdisplaysthecompany’slogoandafooterdisplayscontactinformationfortheJ-PropShop.Themainsection,whichdescribesDave’sbusiness,includesseveralsubsections,alsoknownasarticles.AsecondsectionthatappearsasasidebardisplaysquotesfromsomeJ-Propcustomers.

Not For Sale

© C

enga

ge L

earn

ing.

All

right

s re

serv

ed. N

o di

strib

utio

n al

low

ed w

ithou

t exp

ress

aut

horiz

atio

n.


Working with HTML5 Structural ElementsEachofthesepartsofDave’sdocumentcanbemarkedusingHTML5structural elements, whicharetheelementsthatdefinethemajorsectionsofaWebpage.Figure 1-9describessomeoftheseelements.

header

article

article

article

section

aside footer

figure 1-8 structure of Dave’s web page

figure 1-9 htMl5 structural elements

Structural Element Descriptionarticle A subsection covering a single topic

aside Content containing tangential or side issues to the main topic of the page

footer Content placed at the bottom of the page

header Content placed at the top of the page

nav A navigation list of hypertext links

section A major topical area in the page

Not For Sale

© C

enga

ge L

earn

ing.

All

right

s re

serv

ed. N

o di

strib

utio

n al

low

ed w

ithou

t exp

ress

aut

horiz

atio

n.


Forexample,tomarktheheaderofyourWebpage,youwouldenteraheaderele-mentwithinthepagebody,usingthesyntax

<header> header content</header>

whereheader contentisthepagecontentthatyouwantdisplayedwithinthepageheader.OneofthereasonswewanttodefinethesestructuralelementsisthatwecanwritestylesforthemanddefinethelayoutoftheWebpagecontent.

REFE

RENCE

Marking Structural Elements in HTML5• Tomarkthepageheader,usetheheader element.• Tomarkthepagefooter,usethefooter element.• Tomarkamainsectionofpagecontent,usethesection element.• Tomarkasidebar,usetheaside element.• Tomarkanarticle,usethearticle element.

BasedonDave’ssampledocumentshowninFigure 1-8,you’lladdtheheader,section,aside,andfooterstructuralelementstoyourHTMLfile.

To insert the HTML5 structural elements:◗ 1. Return to the jprop.htm file in your text editor.

◗ 2. Within the body element, insert the following tags as shown in Figure 1-10:

<header></header>

<section></section>

<aside></aside>

<footer></footer>

Not For Sale

© C

enga

ge L

earn

ing.

All

right

s re

serv

ed. N

o di

strib

utio

n al

low

ed w

ithou

t exp

ress

aut

horiz

atio

n.


Structuralelementscanalsobenestedwithinoneanother.InthestructureofDave’spagefromFigure 1-8,noticethatthesectionelementcontainsthreearticleelements.AddthiscontenttoyourHTMLfilebynestingthreearticleelementswithinthesectionelement.

marks a section within the page

marks the page footer

marks the page header

marks a sidebar within the page

figure 1-10 inserting structural elements

◗ 3. Save your changes to the file.

To add three article elements:◗ 1. Within the section element, insert the following code as shown in Figure 1-11:

<article></article>

<article></article>

<article></article>

article elements

figure 1-11 inserting nested elements


Not For Sale

© C

enga

ge L

earn

ing.

All

right

s re

serv

ed. N

o di

strib

utio

n al

low

ed w

ithou

t exp

ress

aut

horiz

atio

n.


Marking a Section with the div ElementThestructuralelementsarepartofthecurrentspecificationsforHTML5,buttheyarenotpartofHTML4.01orXHTML.Pageswrittentothoselanguagesinsteadusethediv elementtoidentifydifferentpagedivisions.Thesyntaxofthedivelementis

<div id=”id”> content</div>

whereidisauniquenameassignedtothedivisionandcontentispagecontentcon-tainedwithinthedivision.Whilenotrequired,theidattributeisusefultodistinguishonedivelementfromanother.Thisbecomesparticularlyimportantifyouapplydifferentstylestodifferentpagedivisions.

Figure 1-12showshowthesamepagelayoutmarkedupusingstructuralelementsunderHTML5wouldbemarkedupinHTML4.01usingthedivelement.

HTML5

<header>

<footer>

<nav> <section>

<article>

<aside>

HTML 4.01

<div id="header">

<div id="footer">

<div id="nav"> <div id="section">

<div id="article">

<divid="aside">

figure 1-12 structural elements in htMl5 and htMl 4.01

Not For Sale

© C

enga

ge L

earn

ing.

All

right

s re

serv

ed. N

o di

strib

utio

n al

low

ed w

ithou

t exp

ress

aut

horiz

atio

n.


YoucanuseeitherHTML5’sstructuralelementsorHTML4.01’sdivelementstoidentifythemajorsectionsofyourdocument.TheHTML5approachispreferredbecauseitrepresentsthefuturestandardoftheWeb,andstructuralelementsaremoredescriptivethanthegenericdivelement.Oneproblemwiththedivelementisthattherearenorulesforidnames.OneWebdesignermightidentifythepageheadingwiththeidnameheaderwhileanotherdesignermightuseheadingortop.ThismakesitharderforWebsearchenginestoidentifythemaintopicsofinterestineachWebpage.

PROSK

ILLS

Written Communication: Writing Effective HTML CodePart of writing good HTML code is being aware of the requirements of various browsers and devices, as well as understanding the different versions of the language. Here are a few guidelines for writing good HTML code:•Become well versed in the history of HTML and the various versions of HTML and XHTML.

Unlike other languages, HTML’s history does impact how you write your code.•Know your market. Do you have to support older browsers, or have your clients standard-

ized on one particular browser or browser version? Will your Web pages be viewed on a single device such as a computer, or do you have to support a variety of devices?

• Test your code on several different browsers and browser versions. Don’t assume that if your page works in one browser it will work in other browsers, or even in earlier versions of the same browser. Also check on the speed of the connection. A large file that per-forms well with a high-speed connection might be unusable with a dial-up connection.

•Read the documentation on the different versions of HTML and XHTML at the W3C Web site and keep up to date with the latest developments in the language.In general, any HTML code that you write should be compatible with the current versions

of the following browsers: Internet Explorer (Windows), Firefox (Windows and Macintosh), Safari (Windows and Macintosh), Chrome (Windows and Macintosh), and Opera (Windows and Macintosh). In addition, you should also view your pages on a variety of devices includ-ing laptops, mobile phones, and tablets. To effectively communicate with customers and users, you need to make sure your Web site is always readable.

Atthispoint,you’vecreatedthebasicframeworkofDave’sWebpage.Inthenextses-sion,you’llinsertthepagecontentandlearnhowtoapplyavisualstyletothatcontenttocreateanicelyformattedWebpage.Ifyouwanttotakeabreakbeforestartingthenextsession,youcancloseanyopenfilesorapplications.

Not For Sale

© C

enga

ge L

earn

ing.

All

right

s re

serv

ed. N

o di

strib

utio

n al

low

ed w

ithou

t exp

ress

aut

horiz

atio

n.


REVIE

W

Session 1.1 Quick Check

1. Whatisamarkuplanguage? 2. WhatisXHTML?HowdoesXHTMLdifferfromHTML? 3. WhatistheW3C?WhatistheWHATWG? 4. Whatisadoctype?Whataretwousesofthedoctype? 5. Whatisincorrectaboutthesyntaxofthefollowingcode?

<p>Welcome to the <em>J-Prop Shop</p></em>

6. Whatiswhitespace?HowdoesHTMLtreatconsecutiveoccurrencesofwhitespace?

7. Whatstructuralelementwouldyouusetomarkasidebar? 8. Whatstructuralelementwouldyouusetomarkthepagefooter?

Not For Sale

© C

enga

ge L

earn

ing.

All

right

s re

serv

ed. N

o di

strib

utio

n al

low

ed w

ithou

t exp

ress

aut

horiz

atio

n.


Working with Grouping ElementsYou’renowreadytobeginenteringcontentintothebodyofDave’sWebpage.Thefirstelementsyou’lladdaregrouping elements,whichareelementsthatcontaincontentthatisviewedasadistinctblockwithintheWebpage.Paragraphs,whichwerepresentedinthelastsession,areoneexampleofagroupingelement,asarepagedivisionsmarkedusingthedivelement.Figure 1-13listssomeofthecommonlyusedgroupingelements.

figure 1-13 Grouping elements

Grouping Element Descriptionaddress Contact information (usually rendered as italicized text)

blockquote An extended quotation (usually indented from the left and right margins)

dd A definition from a description list

div A generic grouping element

dl A description list

dt A definition term from a description list

figure A figure or illustration (HTML5 only)

figcaption The caption of a figure, which must be nested within the figure element (HTML5 only)

hn A heading, where n is a value from 1 to 6, with h1 as the most prominent heading and h6 the least prominent (usually displayed in bold text)

li A list item from an ordered or unordered list

ol An ordered list

p A paragraph

pre Preformatted text, retaining all white space and special characters (usually displayed in a fixed width font)

ul An unordered list

ToexplorehowgroupingelementsaretypicallyrenderedbyyourWebbrowser,ademopagehasbeenpreparedforyou.

To open the HTML Tags demo page:◗ 1. Use your browser to open the demo_html.htm file from the tutorial.01\demo

folder.

◗ 2. If your browser prompts you to allow code from the Web page to be run, click the Allow blocked content button.

Marking Content HeadingsThefirstgroupingelementsyou’llexploreareheading elements,whichcontainthetextofmainheadingsonaWebpage.They’reoftenusedforintroducingnewtopicsorfordividingthepageintotopicalsections.Thesyntaxtomarkaheadingelementis

<hn>content</hn>

wherenisanintegerfrom1to6.Contentmarkedwith<h1>tagsisconsideredamajorheading,andisusuallydisplayedinlargeboldtext.Contentmarkedwith<h2>through<h6>tagsisusedforsubheadings,andisusuallydisplayedinprogressivelysmallerboldtext.Not For Sale

© C

enga

ge L

earn

ing.

All

right

s re

serv

ed. N

o di

strib

utio

n al

low

ed w

ithou

t exp

ress

aut

horiz

atio

n.


Toseehowtheseheadingsappearonyourcomputer,usethedemopage.

REFE

RENCE

Marking Grouping Content• Tomarkaheading,enter

<hn>content</hn>where n is an integer from 1 to 6 and content is the text of the heading.

• Tomarkaparagraph,enter<p>content</p>

• Tomarkablockquote,enter<blockquote>content</blockquote>

To view heading elements:◗ 1. Click in the blue box in the lower-left corner of the demo page, type <h1>The

J-Prop Shop</h1> and then press the Enter key to go to a new line.

◗ 2. Type <h2>Quality Juggling and Circus Props</h2>.

◗ 3. Click the Preview Code button located below the blue code window. Your browser displays a preview of how this code would appear in your Web browser (see Figure 1-14).

click to preview the HTML code

h1 and h2 headings

h1 and h2 headings as rendered by the browser

figure 1-14 Previewing h1 and h2 headings

Trouble? If you are using a browser other than Internet Explorer 9 running on Windows 7, your screen might look slightly different from that shown in Figure 1-14.

◗ 4. To see how an h3 heading would look, change the opening tag for the store description from <h2> to <h3> and change the closing tag from </h2> to </h3>. Click the Preview Code button again.

Your browser renders the code again, this time with the store information displayed in a smaller font. If you continued to change the heading element from h3 to each of the elements down to h6, you would see the second line in the Preview box get progressively smaller.

Not For Sale

© C

enga

ge L

earn

ing.

All

right

s re

serv

ed. N

o di

strib

utio

n al

low

ed w

ithou

t exp

ress

aut

horiz

atio

n.


It’simportantnottotreatmarkuptagsassimplyawayofformattingtheWebpage.Theh1throughh6elementsareusedtoidentifyheadings,buttheexactappearanceoftheseheadingsdependsonthebrowserandthedevicebeingused.Whilemostbrowsersdisplayanh1headinginalargerfontthananh2heading,rememberthattheheadingsmightnotevenbedisplayedatall.Ascreenreader,forexample,doesn’tdisplaytext,butratherconveysthepresenceofanh1headingwithincreasedvolumeorwithspecialemphasisprecededbyanextendedpause.

Nowthatyou’veseenhowtomarkpageheadings,youcanaddthemtoDave’sWebpage.ThefirstheadingDavewantstoaddisanh1headingcontainingthecompany’sname.Healsowantsyoutoinserth2headingsinseveralplaces—astitlesforthethreearticlesonthepage,asatitleforthesidebarcontainingthecustomercomments,andasasubheadingtothemainheadingonthepage.

To add headings to Dave’s document:◗ 1. Return to the jprop.htm file in your text editor.

Trouble? If you are using the Macintosh TextEdit program, you must select the Ignore rich text commands check box when reopening the file.

◗ 2. Within the header element, insert the following tags:

<h1>The J-Prop Shop</h1><h2>Quality Juggling and Circus Props</h2>

◗ 3. Within the first article element, insert the following h2 heading:

<h2>Welcome</h2>

◗ 4. Within the second article element, insert

<h2>Specials This Month</h2>

◗ 5. Within the third and final article element, insert

<h2>Quality Tested</h2>

◗ 6. Finally, within the aside element, insert

<h2>Customer Comments</h2>

Figure 1-15 highlights the revised code in the file.

Not For Sale

© C

enga

ge L

earn

ing.

All

right

s re

serv

ed. N

o di

strib

utio

n al

low

ed w

ithou

t exp

ress

aut

horiz

atio

n.


figure 1-15 inserting h1 and h2 headings

◗ 7. Save your changes to the file and then reload or refresh the jprop.htm file in your Web browser. Figure 1-16 shows the initial view of the page body content.

h1 heading

h2 headings

figure 1-16 viewing h1 and h2 headings in Dave’s document

Grouping HeadingsTheinterpretationofaparticularheadingdependsonhowit’sused.Forexample,theh2headingsyoujustenteredwereusedeithertoprovideatitleforarticlesorsectionsintheWebpageorasasubtitletothemaintitleofthepage.Youcanindicatethatanh2head-ingactsasasubtitlebygroupingitwithamaintitleheadingusingthehgroup element.Thehgroup elementusesthesyntax

<hgroup> heading elements</hgroup>Not For Sale

© C

enga

ge L

earn

ing.

All

right

s re

serv

ed. N

o di

strib

utio

n al

low

ed w

ithou

t exp

ress

aut

horiz

atio

n.


whereheading elements areelementsmarkedwiththe<h1>through<h6>headingtags.ThehgroupelementwasintroducedinHTML5andisnotpartofolderHTMLorXHTMLspecifications.

GroupthefirsttwoheadingsinDave’sdocumenttoindicatethattheyshouldbeinter-pretedasamaintitleandasubtitle.

The hgroup element can contain only h1 through h6 elements or other hgroup elements.

To group the first two headings in the document:◗ 1. Return to the jprop.htm file in your text editor.

◗ 2. Indent the first two headings in the document and then enclose them within <hgroup> tags as shown in Figure 1-17.

h1 and h2 headings are grouped together

figure 1-17 Grouping the h1 and h2 headings


Marking Paragraph ElementsAsyousawearlier,youcanmarkaparagraphelementusingthe<p>tag,whichhasthesyntax

<p>content</p>

wherecontentisthecontentoftheparagraph.InolderHTMLcode,youmightocca-sionallyseeparagraphsmarkedwithonlytheopening<p>tags,omittingclosingtags.Inthosesituations,a<p>tagmarksthestartofeachnewparagraph.Whilethisconventionisstillacceptedbymanybrowsers,itviolatesHTML’ssyntaxrules.Inaddition,ifyouwantXHTML-compliantcode,youmustalwaysincludeclosingtags.

ManyarticlesontheJ-PropShoppageareenclosedwithinparagraphs.You’lladdtheseparagraphsnow.

To add four paragraphs to Dave’s Web page:◗ 1. Return to the jprop.htm file in your text editor.

◗ 2. Directly below the h2 heading Welcome, insert the following paragraph code, indented as shown in Figure 1-18:

<p>If you're looking for high-quality, hand-crafted juggling and circus products, the J-Prop Shop is the store for you. I've designed and built props for the past 35 years, and my products have been used by professional entertainers and hobbyists throughout the world. Our prices are reasonable and our quality is excellent.</p>

Not For Sale

© C

enga

ge L

earn

ing.

All

right

s re

serv

ed. N

o di

strib

utio

n al

low

ed w

ithou

t exp

ress

aut

horiz

atio

n.


◗ 3. Directly below the h2 heading Specials This Month, insert the following:

<p>The following devil sticks are available at a special discount for the entire month of May:</p>

◗ 4. Directly below the h2 heading Quality Tested, insert the following:

<p>Every item I create is checked and tested before being shipped out to assure perfect quality. I take pride in every one of my juggling props and I want my customers to feel that same pride.</p>

◗ 5. Finally, below the h2 heading Customer Comments, insert the following:

<p>Here are a few select quotes from our happy family of customers and associates:</p>

Figure 1-18 highlights the newly added paragraphs in the document.

figure 1-18 adding paragraph elements

Trouble? Don’t worry if your lines do not wrap at the same locations shown in Figure 1-18. Where the line wraps in the HTML code does not affect how the page is rendered by the browser.

◗ 6. Save your changes to the file and then refresh the jprop.htm file in your Web browser. Figure 1-19 shows the new paragraphs added to the Web page.

Not For Sale

© C

enga

ge L

earn

ing.

All

right

s re

serv

ed. N

o di

strib

utio

n al

low

ed w

ithou

t exp

ress

aut

horiz

atio

n.


Marking a Block QuoteNext,Davewantsyoutoenterafewselectquotesfromhissatisfiedcustomers.YoumarkextendedquoteswiththeHTMLblockquoteelement,whichusesthesyntax

<blockquote>content</blockquote>

wherecontentisthetextofthequote.Mostbrowsersrenderblockquotesbyindentingthemtomakeiteasierforreaderstoseparatequotedmaterialfromtheauthor’sownwords.

You’lladdthecustomercommentsasblockquotes.

paragraphs

figure 1-19 Paragraphs in the web page

To create the customer comment block quotes:◗ 1. Return to the jprop.htm file in your text editor.

◗ 2. Scroll down to the aside element, and after the paragraph within that element, insert the following block quote, as shown in Figure 1-20:

<blockquote> <p>”I'm more than happy to recommend Dave Vinet's products. I came upon his work 10 years ago and was immediately impressed by his craftsmanship. He provides well-balanced and attractive props which are the perfect complement to my performances.” </p> <p>”Dave Vinet makes the best juggling equipment on the planet. Period.” </p> <p>”David has been my main supplier for 20 years. I have never had a problem with his equipment and his service is impeccable.” </p></blockquote>Not For Sale

© C

enga

ge L

earn

ing.

All

right

s re

serv

ed. N

o di

strib

utio

n al

low

ed w

ithou

t exp

ress

aut

horiz

atio

n.


Notethatthecustomerquotealsoincludedthreeparagraphelementsnestedwithintheblockquoteelement.Theindentationappliedbythebrowsertotheblockquotewasalsoappliedtoanycontentwithinthatelement,sothoseparagraphswereindentedeventhoughbrowsersdonotindentparagraphsbydefault.

Marking an AddressDavewantstodisplaythecompany’saddressatthebottomofthebodyofhispage.Contactinformationsuchasaddressescanbemarkedusingtheaddresselement,whichusesthesyntax

<address>content</address>

wherecontentisthecontactinformation.Mostbrowsersrenderaddressesinitalic.You’llusetheaddresselementtodisplaytheaddressoftheJ-PropShop.

figure 1-20 adding a block quote

◗ 3. Save your changes to the file, and then reload jprop.htm in your Web browser. Figure 1-21 shows the revised page with the quoted material.

quoted paragraphs are indented in the page

figure 1-21 block quote in the web page

Not For Sale

© C

enga

ge L

earn

ing.

All

right

s re

serv

ed. N

o di

strib

utio

n al

low

ed w

ithou

t exp

ress

aut

horiz

atio

n.


Theaddresstextappearsinitalicatthebottomofthepage.Notethateventhoughyouenteredthecompanyname,streetaddress,city,state,andphonenumberonmultiplelines,inthebrowsertheyallappeartoruntogetheronasingleline.Rememberthatthebrowserignorestheoccurrenceoflinebreaks,tabs,andotherwhitespaceinyourtextdocument.Shortly,you’lllearnhowtomakethistextmorereadablebyaddingacharac-tersymboltoseparatethedifferentpartsoftheaddress.Fornow,you’llleavetheaddresstextasitis.

Marking a ListDavewantstodisplayalistofproductsonthissamplepage.Thisinformationispre-sentedonhisflyerasabulletedlist.HewantssomethingsimilarontheWebsite.HTMLsupportsthreekindsoflists:ordered,unordered,anddescription.

To add the J-Prop Shop address:◗ 1. Return to the jprop.htm file in your text editor.

◗ 2. Scroll down to the bottom of the file, and then within the footer element insert the following code, as shown in Figure 1-22:

<address>The J-Prop Shop 541 West Highland Drive Auburn, ME 04210 (207) 555 – 9001</address>

figure 1-22 adding an address

◗ 3. Save your changes to the file, and then refresh jprop.htm in your Web browser. Figure 1-23 shows the revised page with the address text.

address text is displayed in italic by default

figure 1-23 address as rendered in the web page

Not For Sale

© C

enga

ge L

earn

ing.

All

right

s re

serv

ed. N

o di

strib

utio

n al

low

ed w

ithou

t exp

ress

aut

horiz

atio

n.


Ordered ListsOrdered listsareusedforitemsthatfollowsomedefinedsequentialorder,suchaslistsorderedfromsmallesttogreatestorfromoldesttoyoungest.Thebeginningofanorderedlistismarkedbythe<ol>(orderedlist)tag.Eachitemwithinanorderedlistismarkedusingthe<li>(listitem)tag.Thestructureofanorderedlististherefore

<ol> <li>item1</li> <li>item2</li>...</ol>

whereitem1,item2,andsofortharetheitemsinthelist.Toexplorecreatinganorderedlist,you’llreturntotheHTMLdemopage.

REFE

RENCE

Marking Lists• Tomarkanorderedlist,enter

<ol> <li>item1</li> <li>item2</li>...</ol>where item1, item2, and so forth are the items in the list.

• Tomarkanunorderedlist,enter<ul> <li>item1</li> <li>item2</li>...</ul>

• Tomarkadescriptionlist,enter<dl> <dt>term1</dt> <dd>description1</dd> <dt>term2</dt> <dd>description2a</dd> <dd>description2b</dd>...</dl>

where term1, term2, etc. are the terms in the list and description1, description2a, description2b, etc. are descriptions associated with the preceding terms.

To create an ordered list:◗ 1. Return to the demo_html.htm file in your Web browser.

◗ 2. Delete the HTML code in the left box and replace it with the following:

<ol> <li>First Item</li> <li>Second Item</li> <li>Third Item</li></ol>

Not For Sale

© C

enga

ge L

earn

ing.

All

right

s re

serv

ed. N

o di

strib

utio

n al

low

ed w

ithou

t exp

ress

aut

horiz

atio

n.


Bydefault,entriesinanorderedlistarenumbered,withthenumbersaddedautomati-callybythebrowser.

Unordered ListsTomarkalistinwhichtheitemsarenotexpectedtooccurinanyspecificorder,youcreateanunordered list.Thestructureoforderedandunorderedlistsisthesame,exceptthatthelistitemsforanunorderedlistarenestedwithintheulelement,asfollows:

<ul> <li>item1</li> <li>item2</li>...</ul>

You’llpracticecreatinganunorderedlistwiththedemopage.

◗ 3. Click the Preview Code button. Figure 1-24 shows how the browser renders the ordered list contents.

code for an ordered list by default, browsers display ordered lists as numbered lists

figure 1-24 viewing an ordered list

To create an unordered list:◗ 1. Delete the HTML code in the left box and replace it with the following:

<ul> <li>Basic Stick</li> <li>Flower Stick</li> <li>Master Stick</li> <li>Glow Stick</li></ul>

◗ 2. Click the Preview Code button. Figure 1-25 shows how the browser renders the unordered list.

Not For Sale

© C

enga

ge L

earn

ing.

All

right

s re

serv

ed. N

o di

strib

utio

n al

low

ed w

ithou

t exp

ress

aut

horiz

atio

n.


Bydefault,mostbrowsersdisplayunorderedlistsusingabulletsymbol.Theexactbul-letsymboldependsonthebrowser,butmostbrowsersuseafilled-incircle.

Nesting ListsYoucanplaceonelistinsideofanothertocreateseverallevelsoflistitems.Thetoplevelofanestedlistcontainsthemajoritems,witheachsublevelcontainingitemsoflesserimportance.Mostbrowsersdifferentiatethevariouslevelsbyincreasingtheindentationandusingadifferentlistsymbolateachlevel.You’llusethedemopagetoseehowthisworkswithunorderedlists.

code for an unordered list by default, browsers display unordered lists as bulleted lists

figure 1-25 viewing an unordered list

Trouble? In some browsers, the list appears with diamond shapes rather than circular bullets.

To create a nested list:◗ 1. Click after the word Stick in the <li>Basic Stick</li> line, and then press the

Enter key to insert a new blank line.

◗ 2. Indent the following code between the code <li>Basic Stick and the closing </li> tag:

<ul> <li>Red</li> <li>Blue</li> <li>Green</li></ul>

◗ 3. Click the Preview Code button. Figure 1-26 shows the resulting nested list in the browser.

Not For Sale

© C

enga

ge L

earn

ing.

All

right

s re

serv

ed. N

o di

strib

utio

n al

low

ed w

ithou

t exp

ress

aut

horiz

atio

n.


Thelowerlevelofitemsisdisplayedusinganopencircleasthelistbulletandaddi-tionalindentationonthepage.Onceagain,theexactformatappliedtotheselistsisdeterminedbyeachbrowser’sinternalstylesheet.

Description ListsAthirdtypeoflististhedescription list,whichcontainsalistofterms,eachfollowedbyitsdescription.Thestructureofadescriptionlistis

<dl> <dt>term1</dt> <dd>description1</dd> <dt>term2</dt> <dd>description2a</dd> <dd>description2b</dd>...</dl>

whereterm1,term2,etc.arethetermsinthelistanddescription1,description2a,description2b,etc.arethedescriptionsassociatedwiththeterms.Notethatdescrip-tionlistsmustfollowaspecifiedorder,witheachdt(definitionterm)elementfollowedbyoneormoredd(definitiondescription)elements.

You’llstudyhowtoworkwithdescriptionlistsbyreturningtothedemopage.

code for a nested list by default, browsers display nested lists with different symbols

figure 1-26 viewing a nested list

Trouble? Depending on your browser, the nested list of basic stick colors might appear with solid bullets rather than open circles.

To create a description list:◗ 1. Replace the code in the left box of the HTML demo page with

<dl> <dt>Basic Stick</dt> <dd>Easiest stick to learn</dd> <dt>Flower Stick</dt> <dd>A graceful stick with tassels</dd> <dt>Master Stick</dt> <dd>Our most popular stick</dd></dl>

Not For Sale

© C

enga

ge L

earn

ing.

All

right

s re

serv

ed. N

o di

strib

utio

n al

low

ed w

ithou

t exp

ress

aut

horiz

atio

n.


Thedemopageshowseachtermfollowedbyitsdescription,whichisplacedinanewblockbelowthetermandindentedonthepage.Ifyouhadincludedmultipleddele-mentsforasingledtelement,eachdescriptionwouldhavebeencontainedwithinitsownblockandindented.

Nowthatyou’veexperimentedwiththethreetypesofHTMLlists,you’lladdanunor-deredlistofproductstoDave’sWebpage.Bydefault,theproductnameswillappearasabulletedlist.

◗ 2. Click the Preview Code button. Figure 1-27 shows the appearance of the descrip-tion list in the browser.

Description lists can also mark dialog, with each dt element naming a speaker, and each dd element containing the speaker’s words.

code for a description list by default, browsers indent the description associated with each term

figure 1-27 viewing a description list

To add an unordered list to Dave’s Web page:◗ 1. Return to the jprop.htm file in your text editor.

◗ 2. Within the Specials This Month article, directly below the p element, insert the fol-lowing code, as shown in Figure 1-28:

<ul> <li>Basic Stick ($19.95) The easiest stick to learn with, but “grippy” enough for the most demanding tricks. Comes in red, green, and blue. </li> <li>Flower Stick ($24.95) A graceful stick with colored tassels. Flower Sticks float slowly, making them ideal for beginners. </li> <li>Master Stick ($39.95) Our most popular stick is shorter and heavier for fast play and more advanced tricks. Each Master Stick is available in custom colors. </li> <li>Glow Stick ($29.95) The Glow Stick shines brightly at night (without the danger of a fire stick). </li></ul>

Not For Sale

© C

enga

ge L

earn

ing.

All

right

s re

serv

ed. N

o di

strib

utio

n al

low

ed w

ithou

t exp

ress

aut

horiz

atio

n.


Althoughyou’veaddedmuchofthetextcontenttoDave’ssamplepage,thepageasrenderedbythebrowserstilllooksnothingliketheflyershowninFigure 1-7.That’sbecauseallofthepageelementshavebeenrenderedusingyourbrowser’sinternalstylesheet.Tochangethepage’sappearance,youneedtosubstituteyourownstylesheetforthebrowser’sinternalone.

unordered list element

list item

figure 1-28 adding an unordered list

◗ 3. Save your changes to the file, and then refresh the jprop.htm file in your Web browser. As shown in Figure 1-29, the list of products appears as a bulleted list in the middle of the page.

unordered list items are displayed with bullet markers

figure 1-29 unordered list as rendered in the web page

Not For Sale

© C

enga

ge L

earn

ing.

All

right

s re

serv

ed. N

o di

strib

utio

n al

low

ed w

ithou

t exp

ress

aut

horiz

atio

n.


Applying an External Style SheetStylesheetsarewritteninthecascading style sheet (css) language.LikeHTMLfiles,CSSfilesaretextfilesandcanbecreatedandeditedusingasimpletexteditor.Astylesheetfilehasthefileextension.css,whichdistinguishesitfromanHTMLfile.DavealreadyhasastylesheetforhisWebpagestoredinthefilejpsstyles.css.

Linking to an External Style SheetToapplyanexternalstylesheettoaWebpage,youcreatealinkwithinthedocumentheadtothestylesheetfileusingthelinkelement

<link href=”file” rel=”stylesheet” type=”text/css” />

wherefileisthefilenameandlocationofthestylesheetfile.Whenabrowserloadsthepage,itsubstitutesthestylefromtheexternalstylesheetfileforitsowninternalstylesheet.

SeehowtheformatandlayoutofDave’ssamplepagechangewhenthepageislinkedtothejpsstyles.cssfile.

To apply Dave’s external style sheet:◗ 1. Return to the jprop.htm file in your text editor.

◗ 2. Within the head element at the top of the file, insert the following link element, as shown in Figure 1-30:

<link href=”jpsstyles.css” rel=”stylesheet” type=”text/css” />

filename of style sheet style sheet language

link element

figure 1-30 linking to the jpsstyles.css style sheet


◗ 4. Reload the jprop.htm file in your Web browser. As shown in Figure 1-31, the for-mat and the layout change to reflect the styles in Dave’s style sheet.

Not For Sale

© C

enga

ge L

earn

ing.

All

right

s re

serv

ed. N

o di

strib

utio

n al

low

ed w

ithou

t exp

ress

aut

horiz

atio

n.


Usingthenewstylesheet,Dave’sWebpageismuchmorereadable.Thepageisdisplayedinatwo-columnlayoutwiththemaincontentofthesectionelementdis-playedintheleftcolumn.Thecontentoftheasideelementisshownasasidebarintherightcolumnwithalightpurplebackground,roundedcorners,andadropshadow.Thecontentofthefooterelementisstyledwithasmallerfont,atopborderline,andalightpurplebackground.

Styles for HTML5 ElementsThesection,aside,andfooterelementsusedinthecodeofthejprop.htmfilearenewHTML5elementsthatwerenotpartofearlierHTMLspecifications.Formostbrows-ersthisisnotaproblem,andtheWebpageshouldberenderedwithaformatandlayoutclosetowhatDaverequested.Animportantexception,though,istheInternetExplorerbrowser.InternetExplorerversion8andearlierversionsprovidealmostnosupportforHTML5anddonotrecognizestylesappliedtoHTML5elements.Forexample,asFigure 1-32shows,evenwiththenewstylesheet,InternetExplorer8displaysDave’sWebpagewithafewofthestylesshowninFigure 1-31.

figure 1-31 web page rendered with the jpsstyles.css style sheet

Trouble? Many elements in HTML5 are still not completely supported in current browsers, so the appearance of your Web page might differ slightly from that shown in Figure 1-31. If you are running Internet Explorer 8 or earlier, you’ll see a significant difference. You’ll learn how to correct this problem shortly.

Not For Sale

© C

enga

ge L

earn

ing.

All

right

s re

serv

ed. N

o di

strib

utio

n al

low

ed w

ithou

t exp

ress

aut

horiz

atio

n.


Daveneedsthisproblemfixedbecausehecan’tassumethatuserswillalwaysberunningthelatestversionofInternetExplorer.Workaroundsforthisprobleminvolverunninganexternalprogramknownasascript.ThemostoftenusedprogramlanguagefortheWebisjavascript.LikeHTMLandCSSfiles,JavaScriptfilesaretextfilesthatrequirenospecialsoft-wareotherthanaWebbrowsertorun.Atthispoint,youdon’tneedtoknowhowtowriteaJavaScriptprogramtocorrectInternetExplorer’sproblemwithHTML5elements;someoneelsehasalreadydonethat.Youjustneedtoknowhowtoaccessandruntheirprogram.

OneofthemostusefulprogramstoenableHTML5supportinolderbrowsersisModernizr.Modernizrisafree,open-source,MIT-licensedJavaScriptlibraryoffunc-tionsthatprovidessupportformanyHTML5elementsandforthenewestCSSstyles.OneofthemanyusesofModernizristoenablesupportforHTML5inolderbrowsers.ModernizrisdistributedinasingleJavaScriptfilethatyoucandownloadfromwww.modernizr.comandaddtoyourWebsite.TolinkaWebpagetoaJavaScriptfile,youaddthescriptelement

<script src=”file”></script>

tothedocumenthead,wherefileisthenameoftheJavaScriptfile.ThecurrentversionofModernizratthetimeofthiswritingisstoredinthefilemodernizr-1.5.js.Tolinktothisfile,youaddthefollowingtothedocumenthead:

<script src=”modernizr-1.5.js”></script>

Themodernizr-1.5.jsfilehasalreadybeenaddedtoyourdatafolder.LinktothisfilenowtoapplyittoDave’sWebpage.

figure 1-32 web page as it appears in internet explorer 8

Not For Sale

© C

enga

ge L

earn

ing.

All

right

s re

serv

ed. N

o di

strib

utio

n al

low

ed w

ithou

t exp

ress

aut

horiz

atio

n.


To link to the Modernizr file:◗ 1. Return to the jprop.htm file in your text editor.

◗ 2. Scroll to the top of the file and add the following tag pair above the link ele-ment, as shown in Figure 1-33:

<script src=”modernizr-1.5.js”></script>

Modernizr script file

figure 1-33 linking to the Modernizr script


◗ 4. If you have access to Internet Explorer 8, use that browser to open the jprop.htm file. As shown in Figure 1-34, the browser renders the Web page employing the page layout and many of the formats shown earlier in Figure 1-29.

rounded corners and drop shadows are not supported in IE8

figure 1-34 web page as it appears in internet explorer 8 with Modernizr

Not For Sale

© C

enga

ge L

earn

ing.

All

right

s re

serv

ed. N

o di

strib

utio

n al

low

ed w

ithou

t exp

ress

aut

horiz

atio

n.


TherenderingdonebyInternetExplorer8doesnotcompletelymatchwhatwasshownunderInternetExplorer9ormanyoftheothercompetingbrowserssuchasFirefox,Safari,orGoogleChrome.Forexample,InternetExplorer8doesn’tsupportstylesforroundedcornersanddropshadows.Allofthisunderscoresanimportantpoint:Youmayfindvariationsbetweenonebrowserandanotherinhowyourpageisrendered,espe-ciallywhenusingthenewestHTML5elementsandCSSstyles.Thismeansyouhavetotestyourpageundermultiplebrowsersanddevices,andmakesurethatanydifferencesinformatorlayoutdonotimpactyourusers’abilitytoreadandunderstandyourpage.

Marking Text-Level ElementsGroupingelementslikeparagraphsandheadingsstarttheircontentonanewline.Anothertypeofelementisatext-level element,whichmarkscontentwithinagroup-ingelement.Atext-levelelementislikeaphraseoracollectionofcharacterswithinaparagraphorheading.Text-levelelementsdonotstartoutonanewline,butinsteadflowalongsideof,orinlinewith,therestofthecharactersinthegroupingelement.Figure 1-35listssomeofthetext-levelelementsinHTML.

figure 1-35 text-level elements

Text-Level Element Descriptiona A hypertext link

abbr An abbreviation

b Text offset from the surrounding content (usually displayed in boldface text)

cite A citation (usually displayed in italics)

code Program code (usually displayed in a fixed width font)

del Deleted text (usually displayed with a strikethrough line)

dfn A definition term (usually displayed in italics)

em Emphasized content (usually displayed in italics)

i Text representing an alternate voice or mood (usually displayed in italics)

ins Inserted text (usually displayed with an underline)

kbd Keyboard text (usually displayed in a fixed width font)

mark Highlighted or marked text (usually displayed with a highlight. HTML5 only)

q Quoted text (occasionally enclosed in “quotes”)

samp Sample computer code (usually displayed in a fixed width font)

small Text displayed in a smaller font than surrounding content

span A span of generic text

strong Strongly emphasized content (usually displayed in boldface text)

sub Subscripted text

sup Superscripted text

time A date and time value (HTML5 only)

var Programming variables (usually displayed in italic)

Topracticeusingtext-levelelementsinconjunctionwithgroupingelements,you’llreturntotheHTMLdemopage.Text-level elements should

always be nested within grouping elements such as paragraphs or headings.

Not For Sale

© C

enga

ge L

earn

ing.

All

right

s re

serv

ed. N

o di

strib

utio

n al

low

ed w

ithou

t exp

ress

aut

horiz

atio

n.


Youcannesttext-leveltagstomarkasingletextstringwithmorethanoneelement.Forexample,theHTMLcode

<p>Welcome to the <strong><em>J-Prop Shop</em></strong>.</p>

marksthetextstringJ-Prop Shopasbothstrongandemphasizedtext.Inmostbrowsersitappearsinabold italicfont.

Davewantsthenamesofalloftheitemsinhisproductlisttobemarkedasstrongtext.Revisethecodefortheproductnamesnow.

To explore the use of inline elements:◗ 1. Return to the demo_html.htm file in your Web browser.

◗ 2. Replace the code in the HTML Code box with the following:

<p>Welcome to the J-Prop Shop, owned and operated by DavidVinet</p>

◗ 3. Click the Preview Code button to display this paragraph in the Preview box.

To mark J-Prop Shop as strongly emphasized text, you can enclose that phrase within a set of <strong> tags.

◗ 4. Insert the <strong> opening tag directly before the word J-Prop in the box on the left. Insert the closing </strong> tag directly after the word Shop. Click the Preview Code button to confirm that J-Prop Shop is now displayed in a bold-faced font.

Another text-level element is the cite element used to make citations. Explore how citations are rendered by your browser by enclosing David Vinet within a set of <cite> tags.

◗ 5. Insert an opening <cite> tag directly before the word David and insert the clos-ing </cite> tag directly after Vinet. Click the Preview Code button to view the revised code. Figure 1-36 shows the result of applying the <strong> and <cite> tags to the paragraph text.

figure 1-36 applying the strong and cite text-level elements

◗ 6. Continue exploring other HTML elements listed in Figure 1-35 to see their effects on the rendered text. Close the demo file when you’re done.

Not For Sale

© C

enga

ge L

earn

ing.

All

right

s re

serv

ed. N

o di

strib

utio

n al

low

ed w

ithou

t exp

ress

aut

horiz

atio

n.


To mark strong text:◗ 1. Return to the jprop.htm file in your text editor.

◗ 2. Scroll down to the unordered list and enclose the name and price of each product within a set of <strong> tags as shown in Figure 1-37.

figure 1-37 Marking product names using the strong element

◗ 3. Save your changes to the file and then reload the jprop.htm file in your Web browser. Figure 1-38 shows the revised appearance of the bulleted list of products.

figure 1-38 Product names rendered in a boldfaced font

Not For Sale

© C

enga

ge L

earn

ing.

All

right

s re

serv

ed. N

o di

strib

utio

n al

low

ed w

ithou

t exp

ress

aut

horiz

atio

n.


Using the Generic Elements div and spanMostofthepageelementsyou’veexaminedhaveaspecificmeaning.However,some-timesyouwanttoaddanelementthatrepresentsatextblockorastringofinlinetextwithoutithavinganyothermeaning.HTMLsupportstwosuchgenericelements:divandspan.Thedivelementisusedtomarkgeneralgroupingcontentandhasthefollow-ingsyntax:

<div>content</div>

Thespanelement,whichisusedtomarkgeneraltext-levelcontent,hasthefollowingsyntax:

<span>content</span>

Browsersrecognizebothelementsbutdonotassignanydefaultformattocontentmarkedwiththeseelements.ThisfreesWebauthorstodevelopstylesfortheseelementswithoutworryingaboutoverridinganystylesimposedbybrowsers.NotethatthemainuseofthedivelementtomarksectionsofthepagehasbeensupersededinHTML5bythesectionalelementssuchasheaderandarticle;however,youwillstillencounterthedivelementinmanycurrentandolderWebsites.

PROSK

ILLS

Written Communication: Logical and Physical Interpretation of ElementsAs you learn more HTML, you’ll notice some overlap in how browsers display certain ele-ments. To display italicized text, you could use the <dfn>, <em>, <i>, or <var> tags; or if you wanted to italicize an entire block of text, you could use the <address> tag. However, browsers differ in how they display elements, so you should not rely on the way any browser or group of browsers commonly displays an element.

In addition, it’s important to distinguish between the way a browser displays an ele-ment, and the purpose of the element in the document. Although it can be tempting to ignore this difference, your HTML code benefits when you respect that distinction because search engines often look within specific elements for information. For example, a search engine may look for the address element to find contact information for a particular Web site. It would be confusing to end users if you used the address element to simply italicize a block of text. Web programmers can also use elements to extract information from a page. For example, a JavaScript program could automatically generate a bibliography from all of the citations listed within a Web site by looking for occurrences of the cite element.

The best practice for communicating the purpose of your document is to use HTML to mark content but not to rely on HTML to format that content. Formatting should be done solely through style sheets, using either the internal style sheets built into browsers or through your own customized styles.

Not For Sale

© C

enga

ge L

earn

ing.

All

right

s re

serv

ed. N

o di

strib

utio

n al

low

ed w

ithou

t exp

ress

aut

horiz

atio

n.


Marking a Line BreakAfterexaminingyourwork,Davenoticesthatthelistofcustomercommentslacksthenamesofthecustomerswhomadethem.HeasksyoutoaddthisinformationtotheWebpage,markingthecustomerinformationascitations.

INSIGHT

Presentational AttributesEarly versions of HTML were used mostly by scientists and researchers who, for the most part, didn’t need flashy graphics, decorative text fonts, or even much color on a page. The earliest Web pages weren’t fancy and didn’t require much from the browsers that displayed them. This changed as the Web became more popular and attracted the atten-tion of commercial businesses, graphic designers, and artists.

One way that HTML changed to accommodate this new class of users was to intro-duce presentational elements and presentational attributes designed to describe how each element should be rendered by Web browsers. For example, to align text on a page, Web authors would use the align attribute

<element align=”alignment”>content</element>

wherealignmentiseitherleft,right,center,orjustify.Thus,tocenteranh1head-ingonapage,youcouldapplythefollowingalignattributetothe<h1>tag:

<h1 align=”center”>The J-Prop Shop</h1>

Almost all presentational elements and attributes are now deprecated in favor of style sheets, but you may still see them used in older Web sites. Using a deprecated attribute like align would probably not cause a Web page to fail, but it’s still best to focus your HTML code on describing the content of a document and not its appearance.

To append customer names to the Customer Comments section:◗ 1. Return to the jprop.htm file in your text editor.

◗ 2. Locate the first customer comment and then add the following code at the end of the paragraph, directly before the closing </p> tag:

<cite>Thomas Gage, Circus England</cite>

◗ 3. At the end of the paragraph for the second customer comment, insert

<cite>Douglas Pederson, Street-Wise Shows</cite>

◗ 4. Finally, at the end of the paragraph for the third customer comment, insert

<cite>Linda Unger, Linda & Louis</cite>

Figure 1-39 shows the revised code in the file.

Not For Sale

© C

enga

ge L

earn

ing.

All

right

s re

serv

ed. N

o di

strib

utio

n al

low

ed w

ithou

t exp

ress

aut

horiz

atio

n.


figure 1-39 Providing citations for the customer quotes

◗ 5. Save your changes to the file and then refresh the jprop.htm file in your Web browser. Figure 1-40 shows the revised text of the Customer Comments sidebar.

citations, displayed by the browser in italic

figure 1-40 revised customer comments sidebar

Not For Sale

© C

enga

ge L

earn

ing.

All

right

s re

serv

ed. N

o di

strib

utio

n al

low

ed w

ithou

t exp

ress

aut

horiz

atio

n.


Davethinksthecommentsaredifficulttoreadwhenthetextofacommentrunsintothecitation.Hesuggeststhatyoustarteachcitationonanewline.Todothis,youcaninsertalinebreakintotheWebpageusingthefollowingemptyelementtag:

<br />

Linebreaksmustbeplacedwithingroupingelementssuchasparagraphsorhead-ings.SomebrowsersacceptlinebreaksplacedanywherewithinthebodyofaWebpage;however,thisisnotgoodcodingtechnique.AbrowserdisplayinganXHTMLdocumentwillrejectcodeinwhichatext-levelelementsuchasbrisplacedoutsideofanygroup-ingelement.

You’llusethebrelementtomarkalinebreakbetweeneachcustomercommentanditsassociatedcitationinDave’sWebpage.

To insert line breaks in the comments:◗ 1. Return to the jprop.htm file in your text editor.

◗ 2. Insert the tag <br /> between the comment and the citation for each of the three customer comments in the file. See Figure 1-41.

line break element

figure 1-41 inserting line breaks

◗ 3. Save your changes to the file and then refresh the jprop.htm file in your Web browser. Verify that each citation starts on a new line below the associated cus-tomer comment.

INSIGHT

Marking a Horizontal RuleAnother empty element is hr, the horizontal rule element, which marks a major topic change within a section. The syntax of the hr element is as follows:

<hr />

The exact appearance of the hr element is left to the browser. Most browsers display a gray-shaded horizontal line a few pixels in height. The hr element was originally used as a quick way of inserting horizontal lines within a Web page. Although that task now should be left to style sheets, you will still see the hr element in older Web pages.

Not For Sale

© C

enga

ge L

earn

ing.

All

right

s re

serv

ed. N

o di

strib

utio

n al

low

ed w

ithou

t exp

ress

aut

horiz

atio

n.


Inserting an Inline ImageDavewantsyoutoreplacethenameofthecompanyatthetopofhisWebpagewithanimageofthecompanylogo.BecauseHTMLfilesaresimpletextfiles,non-textualcon-tentsuchasgraphicsmustbestoredinseparatefiles,whicharethenloadedbybrowsersastheyrenderpages.ToaddagraphicimagetoaWebpage,youhavetoinsertaninlineimageintoyourcode.

The img ElementInlineimagesareinsertedintoaWebpageusingtheone-sidedimgelementwiththesyntax

<img src=”file” alt=”text” />

wherefileisthenameofthegraphicimagefileandtextistextdisplayedbybrows-ersinplaceofthegraphicimage.Inthistutorial,you’llassumethatthegraphicimagefileislocatedinthesamefolderastheWebpage,soyoudon’thavetospecifytheloca-tionofthefile.Inthenexttutorial,you’lllearnhowtoreferencefilesplacedinotherfoldersorlocationsontheWeb.

BrowsersretrievethespecifiedimagefileanddisplaytheimagealongsidetherestoftheWebpagecontent.Thesizeoftheimageisbasedonthedimensionsoftheimageitself;however,youcanspecifyadifferentsizeusingthewidthandheightattributes

width=”value” height=”value”

wherethewidthandheightvaluesareexpressedinpixels.Ifyouspecifyonlythewidth,browsersautomaticallysettheheighttomaintaintheproportionsoftheimage;similarly,ifyoudefinetheheight,browsersautomaticallysetthewidthtomaintaintheimagepro-portions.Thus,bysettingthewidthandheightvaluesyourself,youcanenlargeorreducethesizeoftherenderedimage.

Inlineimagesareconsideredtext-levelelementsandthusmustbeplacedwithinagroupingelementsuchasaheadingoraparagraph.Aninlineimageismostcom-monlystoredinoneofthreeformats:GIF(GraphicsInterchangeFormat),JPEG(JointPhotographicExpertsGroup),orPNG(PortableNetworkGraphics).DavehasalreadycreatedhisgraphicimageinPNGformatandstoreditwithhisotherfilesusingthefile-namejpslogo.png.You’llreplacethetextoftheh1headingwiththisinlineimage.

Always include alternate text for inline images. The alt attribute is required in XHTML code and is highly recommended as a way of accommodating users running nonvisual Web browsers.

To insert the company logo at the top of the page:◗ 1. Return to the jprop.htm file in your text editor.

◗ 2. Go to the h1 heading element at the top of the body section, delete the text The J-Prop Shop from between the opening and closing <h1> tags, and then replace it with

<img src=”jpslogo.png” alt=”The J-Prop Shop” />

Figure 1-42 highlights the revised code in the jprop.htm file.

Not For Sale

© C

enga

ge L

earn

ing.

All

right

s re

serv

ed. N

o di

strib

utio

n al

low

ed w

ithou

t exp

ress

aut

horiz

atio

n.


Figures and Figure CaptionsInbooksandmagazines,figuresandfigurecaptionsareoftenplacedwithinboxesthatstandasidefromthemaincontentofanarticle.HTML5introducedthistypeofobjecttoWebpagemarkupwiththefigureandfigcaptionelements

<figure> content <figcaption>caption</figcaption></figure>

wherecontentisthecontentthatwillappearinthefigureboxandcaption isthetextofthefigurecaption.Thefigcaptionelementisoptional;butifthefigcaptionelementisused,itmustbenestedwithinasetof<figure>tagseitherdirectlyaftertheopening<figure>tagordirectlybeforetheclosing</figure>tag.Forexample,the

alternate text displayed in place of the image

image file

figure 1-42 adding an inline image

◗ 3. Save your changes to the file, and then refresh the Web page in your browser. Figure 1-43 shows the new heading with the logo centered across the page.

company logo

figure 1-43 viewing the company logo

Not For Sale

© C

enga

ge L

earn

ing.

All

right

s re

serv

ed. N

o di

strib

utio

n al

low

ed w

ithou

t exp

ress

aut

horiz

atio

n.


followingHTML5codecreatesafigureboxcontaininganinlineimageofoneoftheJ-PropShop’sproductsandacaption:

<figure> <img src=”stick03.png” alt=”Master Stick” /> <figcaption>Master Stick ($39.95)</figcaption></figure>

Thefigureelementdoesn’tnecessarilyneedtocontainaninlineimage.Itcanbeusedtomarkanycontentthatstandsasidefromamainarticlebutisreferencedbyit.Forinstance,itcouldbeusedtocontainanexcerptofapoem,asthefollowingcodedemonstrates:

<figure> <p>'Twas brillig, and the slithy toves<br /> Did gyre and gimble in the wabe;<br /> All mimsy were the borogoves,<br /> And the mome raths outgrabe. </p> <figcaption> <cite>Jabberwocky, Lewis Carroll, 1832-98</cite> </figcaption></figure>

AswithotherHTMLelements,theexactappearanceofafigureboxisdeterminedbyastylesheet.Atthistime,Davedoesnotneedtocreateafigureboxforhiscompany’shomepage.

Working with Character Sets and Special CharactersDavelikestheworkyou’vedonesofarontheWebpage.Hehasonlyoneremainingconcern:Thecompany’saddressinthepagefooterisdifficulttoreadbecausethestreetaddress,cityname,zipcode,andphonenumberallruntogetherononeline.Davewouldliketohavethedifferentpartsoftheaddressseparatedbyasolidcircularmarker(•).However,thismarkerisnotrepresentedbyanykeysonyourkeyboard.How,then,doyouinsertthissymbolintotheWebpage?

Character SetsEverycharacterthatyourbrowseriscapableofrenderingbelongstoacollectionofchar-actersandsymbolscalledacharacter set.Charactersetscomeinawidevarietyofsizes.ForEnglish,nomorethanabout127charactersareneededtorepresentalloftheupper-andlowercaseletters,numbers,punctuationmarks,spaces,andspecialtypingsymbolsinthelanguage.Otherlanguages,suchasJapaneseorChinese,requirecharactersetscontainingthousandsofsymbols.Beyondthebasiccharactersusedbyalanguagearespecialcharacterssuchas©,½,π,and®.Thus,acompletecharactersetthatincludesallpossibleprintablecharactersismadeupofhundredsofsymbols.

ThecharactersetusedforthealphabetofEnglishcharactersiscalledascii(american standard code for information interchange).Amoreextendedcharacterset,calledlatin-1ortheisO 8859-1 characterset, supports255charactersandcanbeusedbymostlanguagesthatemploytheLatinalphabet,includingEnglish,French,Spanish,andItalian.unicode,themostextendedcharacterset,supportsupto65,536symbolsandcanbeusedforanyoftheworld’slanguages.ThemostcommonlyusedcharactersetontheWebisutf-8,whichisacompressedversionofUnicodeandisprobablythedefaultcharactersetassumedbyyourbrowser.YoucanlearnmoreaboutcharactersetsbyvisitingtheW3CWebsiteandtheWebsitefortheInternetAssignedNumbersAuthorityatwww.iana.org.Not For Sale

© C

enga

ge L

earn

ing.

All

right

s re

serv

ed. N

o di

strib

utio

n al

low

ed w

ithou

t exp

ress

aut

horiz

atio

n.


Character Encodingcharacter encodingassociateseachsymbolfromacharactersetwithanumericvaluecalledthenumeric character reference.Forexample,thecopyrightsymbol©fromtheUTF-8charactersetisencodedwiththenumber169.Ifyouknowthecharacterencod-ingnumber,youcaninsertthecorrespondingcharacterdirectlyintoyourWebpageusingtheentity

&#code;

wherecodeistheencodingnumber.Thus,todisplaythe©symbolinyourWebpage,youwouldenter

©

intoyourHTMLfile.

Character Entity ReferencesAnotherwaytoinsertaspecialsymbolistouseacharacter entity reference,whichisashortmemorablenameusedinplaceoftheencodingnumber.Characterentityrefer-encesareinsertedusingthesyntax

&char;

wherecharisthecharacter’sentityreference.Thecharacterentityreferenceforthecopyrightsymboliscopy.Sotodisplaythe©symbolinyourWebpage,youcouldinsert

©

intoyourHTMLcode.

REFE

RENCE

Inserting Symbols from a Character Set• Toinsertasymbolbasedontheencodingnumber,usetheentity

&#code;where code is the encoding number.

• Toinsertasymbolbasedonacharacterentityreference,usetheentity&char;where char is the name assigned to the character.

• Toinsertanonbreakingspace,usethefollowingentity:

• Toinsertthe< symbol, use the following entity:<

• Toinsertthe>symbol,usethefollowingentity:>

Youcanexplorevariousencodingnumbersandcharacterentityreferencesbyopen-ingthedemopagesuppliedwithyourDataFiles.

To view the demo page:◗ 1. Use your Web browser to open the demo_characters.htm file from the

tutorial.01\demo data folder.

◗ 2. Type £ in the input box and then click the Show button. The Web browser displays the £ symbol in the ivory-colored box below.

Not For Sale

© C

enga

ge L

earn

ing.

All

right

s re

serv

ed. N

o di

strib

utio

n al

low

ed w

ithou

t exp

ress

aut

horiz

atio

n.


◗ 3. Replace the value in the input box with ® and then click the Show button. The browser now displays the ® symbol, the symbol for registered trademarks, which you specified using a character entity reference.

You can also view a collection of numeric character references and character entity references by selecting a table from the list box on the page.

◗ 4. Verify that General Symbols is displayed in the selection list box, and then click the Show Table button. As shown in Figure 1-44, the browser displays a list of 35 symbols with the character entity reference and the numeric character refer-ence displayed beneath each symbol.

character symbol

character entity reference


symbol numeric character reference

figure 1-44 htMl characters demo page

◗ 5. Take some time to explore the variety of numeric character references and char-acter entity references supported by your browser. Close the demo page when you’re finished, but leave your browser open.

INSIGHT

Special CharactersOne use of character codes is to insert text about HTML itself. For example, if you want your Web page to describe the use of the <h1> tag, you cannot simply type

The <h1> tag is used to mark h1 headings.

because browsers would interpret the <h1> text as marking the beginning of an h1 heading! Instead, you have to use the < and > entity references to insert the < and > symbols. The text would then be:

The <h1> tag is used to mark h1 headings.

Another use of character codes is to add extra spaces to your Web page. Remember that browsers ignore extra blank spaces in an HTML file. To insert an additional space, use the entity reference (nbsp stands for nonbreaking space), which forces browsers to insert an extra space.

Not For Sale

© C

enga

ge L

earn

ing.

All

right

s re

serv

ed. N

o di

strib

utio

n al

low

ed w

ithou

t exp

ress

aut

horiz

atio

n.


OnDave’sWebpage,youdecidetousethebulletsymbol(•)tobreakuptheaddresstextintosections.Thesymbolhasacharacterencodingnumberof8226andthecharacterentityreferencenamebull.Davesuggeststhatyoualsoaddalonghorizontallineknownasanem-dash(—)tomarkthecustomernamesinthecustomercommentssection.Thecharacterencodingnumberforanem-dashis8212andtheentityreferenceismdash.

To add bullets and an em-dash to Dave’s Web page:◗ 1. Return to the jprop.htm file in your text editor.

◗ 2. Locate the customer comment from Thomas Gage, and then directly before the opening<cite>taginsertthecharactercode— followed by a space.

◗ 3. Repeat Step 2 for the two remaining customer comments.

◗ 4. Scroll down to the address element within the page footer. At the end of each line within the address (except the last line), insert a space followed by the • character entity. Figure 1-45 highlights the revised code in the Web page.

Always include a semi-colon so that browsers recognize the entry as a character code.

character encoding number


figure 1-45 adding symbols from a character set


◗ 6. Refresh the jprop.htm file in your Web browser. Figure 1-46 shows the final con-tent of Dave’s Web page.

Not For Sale

© C

enga

ge L

earn

ing.

All

right

s re

serv

ed. N

o di

strib

utio

n al

low

ed w

ithou

t exp

ress

aut

horiz

atio

n.


Specifying the Character SetTorenderanumericcharacterreferencecorrectly,abrowsermustapplythecorrectchar-actersettoaWebpage.ThisinformationistypicallysentbytheWebserverasittransfersanHTMLpagetoabrowser.However,tobedoublycertainthatbrowsersemploythecorrectcharacterset,youcanspecifythecharactersetwithintheheadelementofyourHTMLdocument.ForHTML4.01andXHTML,youaddthemetaelement

<meta http-equiv=”Content-Type” content=”text/html; charset=character_set” />

figure 1-46 completed web page

Not For Sale

© C

enga

ge L

earn

ing.

All

right

s re

serv

ed. N

o di

strib

utio

n al

low

ed w

ithou

t exp

ress

aut

horiz

atio

n.


tothedocumenthead,wherecharacter_setisthenameofthecharactersetyouwantthebrowsertoemploywheninterpretingyourHTMLcode.UnderHTML5,themetaele-mentissimply:

<meta charset=”character_set” />

HTML5alsosupportsthesyntaxoftheHTML4.01andXHTMLmetaelement.Youshouldalwaysspecifythecharacterencodinginyourdocument,evenifyouarenotusinganyspecialsymbols.Itrelievesthebrowserfromhavingtoguessaboutthecorrectencoding;andincertainsituations,notspecifyingtheencodingcanleadtoasecurityholeinthetransferofapagefromtheWebservertotheclient.

You’lladdthemetaelementtoDave’sdocumenttospecifythathisfilehasbeenencodedusingtheUTF-8characterset.

The meta element is also used to store information and keywords describing a document and its purpose.

To specify the character encoding for Dave’s document:◗ 1. Return to the jprop.htm file in your text editor.

◗ 2. Scroll to the top of the file. Directly below the comment in the head section, insert the following meta element as shown in Figure 1-47:

<meta charset=”UTF-8” />

character set

figure 1-47 specifying the character encoding

◗ 3. Close the jprop.htm file, saving your changes.

◗ 4. Refresh the jprop.htm file in your browser and verify that the browser renders the page with no errors.

Not For Sale

© C

enga

ge L

earn

ing.

All

right

s re

serv

ed. N

o di

strib

utio

n al

low

ed w

ithou

t exp

ress

aut

horiz

atio

n.


PROSK

ILLS

Written Communication: Publishing Your Web PageOnce you’ve completed your Web page, your next step is to get it on the Web. You first need to find a Web server to host the page. In choosing a Web server, you’ll need to consider how much you want to pay, how much space you need, and how much traffic you expect at your Web site. If you’d prefer a free or low-cost option and don’t need much space, you might first look toward the company that provides your Internet access. Most Internet service providers (ISPs) offer space on their Web servers as part of their regular service or for a small fee. However, they usually limit the amount of space available to you, unless you pay an extra fee to host a larger site. There are also free Web hosts, which pro-vide space on servers for personal or noncommercial use. Once again, the amount of space you get is limited. Free Web hosting services make their money from selling advertising space on your site, so you should be prepared to act as a billboard in return for space on their servers. Finally, you can pay a monthly fee to an ISP to host your Web site to get more space and bandwidth.

Once you identify a Web host, you next need to consider the domain name that identi-fies your site. If you’re planning to create a commercial site to advertise a product or ser-vice, you’ll want the domain name to reflect your business. Free Web hosts usually include their names in your Web address. Thus, instead of having a Web address like

thejpropshop.comyou might have something like

freewebhosting.net/members/thejpropshop.htmlIf you’re running a site for personal use, this might not be a problem—but it would

look unprofessional on a commercial site. If you are planning a commercial site and simply want to advertise your product by publishing an online brochure, you can usually find an inexpensive host and pay a nominal yearly fee to reserve a Web address that reflects your company’s name.

REVIE

W

Session 1.2 Quick Check

1. SpecifythecodeyouwouldentertomarkthetextThe J-Prop Shopasanh1headingandthetextProduct Listasanh2heading.Addcodetogroupthesetwoheadingssobrowsersrecognizethemasaheadingandsubheading,respectively.

2. SpecifythecodeyouwouldentertomarkthetextHamlet by William Shakespeareasanh1heading,withalinebreakafterthewordHamlet.

3. Createanorderedlistofthefollowingitems:Packers,Bears,Lions,Vikings. 4. SpecifythecodetoaccesstheCSSstylesheetfileuwstyles.css.Whereshould

youplacethiscodewithinanHTMLfile? 5. Markthegraphicfileportrait.gifasaninlineimage,settingthedimensionsto

250pixelswideby300pixelshigh.SpecifythetextDavid Vinetasalternatetexttobedisplayedinplaceoftheimagefornon-graphicalbrowsers.

6. Specifythecodetoplacetheportrait.gifimagefromthepreviousquestionwithinafigureboxwiththecaptionDavid Vinet, owner of the J-Prop Shop.

7. Thetrademarksymbol(™)hasthecharacterencodingnumber8482.ProvidetheHTMLcodetoenterthissymbolintoyourWebpage.

8. TheGreekletterß hasthecharacterentitynamebeta.HowwouldyouenterthissymbolintoyourWebpage?

Not For Sale

© C

enga

ge L

earn

ing.

All

right

s re

serv

ed. N

o di

strib

utio

n al

low

ed w

ithou

t exp

ress

aut

horiz

atio

n.


Pr

AC

TIC

E

Review Assignments

Data files needed for the review assignments: basiclogo.png, basicstick.png, basicstyles.css, modernizr-1.5.js, stick.txt

DavehasfoundahostforhisWebpageandhaspublishedthedocumentyouhelpedhimcreateontheInternet.NowhewantstostartaddingmorepagestohisWebsite.He’scometoyouforhelpincreatingapagedescribinghisbasicstick.He’salreadywrittenthetextfortheWebpage;heneedsyoutomarkupthattextwithHTMLcode.Figure 1-48showsapreviewofthepageyou’llcreateforDave.

Practice the skills you learned in the tutorial using the same case scenario.

figure 1-48 the basic stick product page

Completethefollowing:

1.Useyourtexteditortocreateanewfilenamedbasic.htm,andthensaveitinthetutorial.01\reviewfolderincludedwithyourDataFiles.

2.AddthedoctypeforanHTML5document. 3.Createtheroothtmlelementandnesttheheadandbodyelementswithinit.

Not For Sale

© C

enga

ge L

earn

ing.

All

right

s re

serv

ed. N

o di

strib

utio

n al

low

ed w

ithou

t exp

ress

aut

horiz

atio

n.


4.Withintheheadelement,insertthecommentThe J-Prop Shop

Sample Page for the Basic Stick

Author: your name

Date: the date

whereyour nameisyournameandthe dateisthecurrentdate. 5.AddcodetospecifythatthepageusestheUTF-8characterset. 6. Setthepagetitleasbasic sticks. 7. Linkthefiletothemodernizr-1.5.jsscriptfiletoenableHTML5supportforolder

browsers. 8. Linkthefiletothebasicstyles.cssstylesheetfile. 9.Withinthebodyelement,createstructuralelementsforthepageheader,mainsec-

tion,andfooter.10.Withinthepageheader,insertanh1headingcontainingtheinlineimagefile

basiclogo.png.Specifythefollowingalternatetextfortheimage:the j-Prop shop.Belowtheh1heading,insertanh2headingcontainingthetextspecials this Month.Grouptheh1andh2headingsusingthehgroupelement.

11.Withinthesectionelement,insertanasideelement.Theasideelementshouldcontainaninlineimagepointingtothebasicstick.pngfileandhavingthetextstringphotoasthealternatetext.Belowtheinlineimagewithintheasideelement,insertaparagraphcontainingthetextstringOur basic stick.

12.Addtwoarticleelementstothesectionelement.13.Withinthefirstarticle,insertanh2headingcontainingthetextthe basic stick.Add

aparagraphcontainingthefollowingtext:the basic stick is the perfect stick for beginners. the stick rotates slowly to provide extra time for performing stick tricks, but is flashy enough to impress your friends. enjoy the following:

14.Addablockquotecontainingthefollowingfourparagraphs(youcancopythistextfromthestick.txtfile):Patented Dura-coat finish ensures sticks can withstand all weather conditions. More durable than other sticks, these props will keep looking like new for as long as you own them.enhanced stick flexibility provides more bounce, allowing for better tricks. a soft rubber core adds a whole new element to the sticking experience that you have to feel to believe!full customization will give you the chance to own a pair of sticks unlike any others out there. i make exactly what you want, with your colors and your designs.a personal touch through both my customization options and hand-crafted designs.

15.Markthefirstfewwordsofeachofthefourparagraphsasstrongtext,asshowninFigure 1-48.

16.Withinthesecondarticleelement,insertanh2headingwiththetitlespecifications.17.Directlybelowtheh2heading,insertanunorderedlist.Thelistshouldcontaintwo

items:Main stickandhandle sticks (one pair).

Not For Sale

© C

enga

ge L

earn

ing.

All

right

s re

serv

ed. N

o di

strib

utio

n al

low

ed w

ithou

t exp

ress

aut

horiz

atio

n.


18.WithintheMain Sticklistitem,insertanestedunorderedlistcontainingthefollow-ingitems:

•weight: 7 oz.•length: 24 inches•tape: Dura-coat finish with laser-style color choices

19.WithintheHandle Sticks (one pair)listitem,insertanestedunorderedlistcontain-ingthefollowingitems:

•weight: 2 oz.•length: 18 inches•tape: soft ivory tape with rubber core

20. LocatethetwooccurrencesofDura-Coatinthedocument.DirectlyafterthewordDura-Coat,inserttheregisteredtrademarksymbol®.Thecharacterentitynameofthe®symbolisreg.Displaythe®symbolasasuperscriptbyplacingthecharacterwithinthesupelement.

21.Withinthepagefooter,insertthecompany’saddress:the j-Prop shop541 west highland Driveauburn, Me 04210(207) 555 - 9001

22. Separatethedifferentsectionsoftheaddressusingasoliddiamond(charactercode9830).

23. Saveyourchangestothefile,openitinyourWebbrowser,andthencompareyourWebpagetoFigure 1-48toverifythatitwasrenderedcorrectly.Olderbrowsersmaydisplaysomeslightdifferencesinthedesign.

24. Submityourcompletedfilestoyourinstructor,ineitherprintedorelectronicform,asrequested.

AP

PLy

Case Problem 1

Data files needed for the case Problem: mhlogo.jpg, mhstyles.css, mhtxt.htm, modernizr-1.5.js

Math High ProfessorLaurenCoeoftheMathematicsDepartmentofCoastalUniversityinAnderson,SouthCarolina,isoneofthefoundersofMath High,aWebsitecontainingarticlesandcoursematerialsforhighschoolandcollegemathinstructors.Shehaswrit-tenaseriesofbiographiesoffamousmathematiciansfortheWebsiteandwouldlikeyoutotransfercontentshe’salreadywrittentoanHTML5file.You’llcreatethefirstoneinthisexercise.Figure 1-49showsapreviewofthepageyou’llcreate,whichprofilesthemathematicianLeonhardEuler.

Apply your knowledge of HTML5 to create a Web page for a mathematics Web site.

Not For Sale

© C

enga

ge L

earn

ing.

All

right

s re

serv

ed. N

o di

strib

utio

n al

low

ed w

ithou

t exp

ress

aut

horiz

atio

n.



1. Inyourtexteditor,openthemhtxt.htmfilefromthetutorial.01\case1folderincludedwithyourDataFiles.Savethefileasmathhigh.htminthesamefolder.

2. Enclosethecontentsofthefilewithinasetofopeningandclosing<html>tags.SetthedoctypeofthefiletoindicatethatthisisanHTML5document.

3.Addheadandbodyelementstothefile,enclosingthepagecontentswithinthebodyelement.

4.Withinthedocumenthead,insertthecommentMath high: leonhard eulerauthor: your nameDate: the datewhereyour nameisyournameandthe dateisthecurrentdate.

5. Setthecharactersetofthedocumenttoutf-8. 6.AddthepagetitleMath high: leonhard eulertothedocumenthead. 7. Linktothemodernizr-1.5.jsscriptfile. 8. Linktothemhstyles.cssstylesheet. 9.Withinthepagebody,createaheaderelement.Withinthiselement,insertaninline

imageusingthemhlogo.jpgfileasthesourceandMath highasthealternatetext.10.MarkthepagetextfromthelineLeonhard Euler (1707 - 1783)upto(butnotinclud-

ing)thelineThe Most Beautiful Theorem?asanarticle.11.Markthefirstlineinthearticleelement,containingLeonhard Euler (1707 - 1783),

asanh1heading.12.MarkthenextthreeblocksoftextdescribingEuler’slifeasparagraphs.

figure 1-49 Math high web page

Not For Sale

© C

enga

ge L

earn

ing.

All

right

s re

serv

ed. N

o di

strib

utio

n al

low

ed w

ithou

t exp

ress

aut

horiz

atio

n.


13.Withinthefirstparagraph,markthenamesLeonhard EulerandJean Bernoulliusingthestrongelement.Markthephrase800 different books and papersasemphasizedtextusingtheemelement.

14. Inthesecondparagraph,markthephraseIntroductio in analysin infinitorum (1748)asacitation.

15. InthephraseLettres a une princesse d’Allemagne,replacetheone-letterwordawithà(thecharacterentitynameisagrave).Marktheentirepublicationnameasacitation.

16. Inthethirdparagraph,markthenotationforeasavarelementandreplacepiwiththecharacterπ(thecharacterreferencenameispi).

17. EnclosethenextsectionoftextfromthelineThe Most Beautiful Theorem?upto(butnotincluding)thelineMath High: A Site for Educators and Researchersasanaside.

18.MarkthetextThe Most Beautiful Theorem?asanh1heading.19.Markthenextfiveblocksoftextasindividualparagraphs.20. Inthefirstequation,marktheletterse,i,andxusingthevarelement(butdonot

italicizetheiinsin).Marktheterm(ix)asasuperscript.21. Inthesecondequation,replacepiwiththecharacterπ.Marktheletterseandiusing

thevarelement.Mark(πi)asasuperscript.22. Inthelastparagraph,markthenotationsforeandi withthevarelementand

replacepiwithπ.23.MarkthejournalnameThe Mathematical Intelligencerasacitation.24.Markthefinallineinthefileasafooter.25. Saveyourchangestothefile,andthenverifythatthepageappearscorrectlyinyour

Webbrowser.26. Submityourcompletedfilestoyourinstructor,ineitherprintedorelectronicform,

asrequested.

AP

PLy

Case Problem 2

Data files needed for the case Problem: macbeth.jpg, macbethtxt.htm, macstyles.css, modernizr-1.5.js

Mansfield Classical Theatre SteveKarlsisthedirectorofMansfieldClassicalTheatre,atheatrecompanyforyoungpeoplelocatedinMansfield,Ohio.Thissummerthecom-panyisplanningtoperformtheShakespeareplayMacbeth.Stevewantstoputthetextoftheplayonthecompany’sWebsiteandhasaskedforyourhelpindesigningandcompletingtheWebpage.Stevewantsaseparatepageforeachscenefromtheplay.Apreviewofthepageyou’llcreateforActI,Scene1isshowninFigure 1-50.Stevehasalreadytypedthetextofthescene.HeneedsyoutosupplytheHTMLcode.

Apply your knowledge of HTML to create a page showing text from a scene of a Shakespeare play.

Not For Sale

© C

enga

ge L

earn

ing.

All

right

s re

serv

ed. N

o di

strib

utio

n al

low

ed w

ithou

t exp

ress

aut

horiz

atio

n.



1.Openthemacbethtxt.htmfilefromthetutorial.01\case2folderincludedwithyourDataFiles.Savethefileasmacbeth.htminthesamefolder.

figure 1-50 Macbeth act i, scene 1 web page

Not For Sale

© C

enga

ge L

earn

ing.

All

right

s re

serv

ed. N

o di

strib

utio

n al

low

ed w

ithou

t exp

ress

aut

horiz

atio

n.


2. EnclosetheentireMacbethtextwithinthestructureofanHTMLdocumentinclud-ingthehtml,head,andbodyelements.AddadoctypetothedocumentheadtoindicatethatthepageiswritteninHTML5.

3.Withintheheadsection,insertacommentcontainingthefollowingtext:Macbeth: act i, scene 1author: your nameDate: the date

4.AddthepagetitleMacbeth: act i, scene 1. 5. Linkthefiletothemodernizr-1.5.jsscriptfileandtothemacstyles.cssstylesheet.

Setthecharactersettoutf-8. 6.Withinthebodyelement,insertaheadinggroupconsistingofanh1headingandan

h2heading.Withintheh1heading,insertaninlineimagecontainingthemacbeth.jpgimagefile.SpecifyMacbethasthealternatetext.Withintheh2heading,enterthetextPresented by: Mansfield classical theatre.

7. Enclosethetextoftheplaywithinasectionelement. 8.MarkthetextACT Iasanh2heading.MarkSCENE 1asanh3heading.Groupthe

twoheadingswithinanhgroupelement. 9.Markthesummaryofthesceneasaparagraph.MarkthewordSummaryusingthe

strongelement.10. Inthetextoftheplay,markthedescriptionsofsetting,scene,andexitsasseparate

paragraphsanditalicizethetextusingtheielement,asshowninFigure 1-50. 11. Markthedialogasadescriptionlist,witheachcharacter’snamemarkedasa

descriptiontermandeachspeechmarkedasadescription.Whenaspeechincludestwolines,addalinebreakattheendofthefirstlinetokeepthespeechonseparatelines,asshowninthefigure.

12. DirectlybelowtheparagraphcontainingthetextExeunt,insertthelineGo to scene 2.Markthislineasadivelementwiththeidvaluedirection.Attheendofthisline,insertaright arrow characterusingthe8658characternumber.Addhori-zontalrulesdirectlyaboveandbelowthisstatement.

13.MarkthelineText provided by Online Shakespeareasafooter.Makesurethefooterelementisbelowthesectionelement.

14. Saveyourchangestothefile,andthenconfirmthelayoutandcontentofthepageinyourWebbrowser.

15. Submitthecompletedfilestoyourinstructor,ineitherprintedorelectronicform,asrequested.

CH

ALL

En

GE

Case Problem 3

Data files needed for the case Problem: dessertstyles.css, dessertweb.jpg, modernizr-1.5.js, torte.jpg, tortetxt.htm

dessertWEB AmyWuwantstotakeherenjoymentofcookingandherloveofshar-ingrecipestotheWorldWideWeb.She’sinterestedincreatinganewWebsitecalleddessertWEBwhereothercookscansubmitandreviewdessertrecipes.Eachpagewithinhersitewillcontainaphotoanddescriptionofadessert,alongwithalistofingredients,cookingdirections,andalistofreviews.Eachrecipewillberatedonafive-starscale.Shealreadyhasinformationononerecipe:AppleBavarianTorte.She’saskedforyourhelpincreatingaWebpagefromthedatashe’scollected.ApreviewofthecompletedpageisshowninFigure 1-51.

Explore how to use HTML to create a recipe page.

Not For Sale

© C

enga

ge L

earn

ing.

All

right

s re

serv

ed. N

o di

strib

utio

n al

low

ed w

ithou

t exp

ress

aut

horiz

atio

n.



1.Openthetortetxt.htmfilefromthetutorial.01\case3folderincludedwithyourDataFiles.Savethefileastorte.htminthesamefolder.

2.AddthestructureofanHTML5documentaroundtherecipetext.Withintheheadelement,insertacommentcontainingthefollowingtext:apple bavarian torteauthor: your nameDate: the date

3. SetthecharactersetofthedocumenttoisO-8859-1. 4. Linkthedocumenttothemodernizr-1.5.jsscriptfileandthedessertstyles.cssstyle

sheetfile. 5. Specifyapple bavarian torte recipeasthepagetitle. 6.Withinthebodyelement,addaheaderelement.Withintheheaderelement,insert

anh1headingcontainingtheinlineimagedessertweb.jpgwiththealternatetextdessertweb.

figure 1-51 dessertweb menu page

Not For Sale

© C

enga

ge L

earn

ing.

All

right

s re

serv

ed. N

o di

strib

utio

n al

low

ed w

ithou

t exp

ress

aut

horiz

atio

n.


7. Enclosetherecipedescription,ingredientslist,anddirectionswithinasectionele-ment.Enclosetherecipereviewswithinanasideelement.

8.MarkthetextApple Bavarian Torteasanh1heading. 9. Replacethetext(4 stars) intheh1headingwithasetoffourstar symbols(character

number9733). 10. Directlybelowtheh1heading,inserttheinlineimagetorte.jpg.Specifythealternate

texttorte image.Setthewidthoftheimageto250pixels.11.Markthedescriptionofthedessertasaparagraph.12.MarkINGREDIENTSandDIRECTIONSash2headings.13.Markthelistofingredientsasanunorderedlist.Markthelistofdirectionsasan

orderedlist. 14. Withintheingredients,replacetheoccurrencesof1/2withthecharactersymbol½

(referencenumber189),theoccurrencesof1/4withthesymbol¼(referencenum-ber188),andtheoccurrencesof1/3withthesymbol¹∕³(referencenumber8531.)

15. Replaceeachoccurrenceoftheworddegreesinthedirectionswiththedegreesym-bol(°)(characternamedeg).

16.MarkREVIEWSwithintheasideelementasanh1heading.17.Changethetextofeachcustomerstarratingtoasetofstar symbolsusingcharacter

number9733placedwithinaparagraph. 18. Enclosethetextofeachcustomerreviewinaparagraphnestedwithinablockquote

element.Placethenameofthereviewerandthedateonanewlinewithinthatpara-graph.Insertanem-dash(characternamemdash)beforethewordReviewedineachofthereviews.Enclosethedateofeachreviewwithinatimeelementandenclosebyreviewerwithinaciteelementwhererevieweristhenameofthereviewer.

19. Saveyourchangestothefile,andthenverifythelayoutandcontentofthepageinyourWebbrowser.

20. Submitthecompletedfilestoyourinstructor,ineitherprintedorelectronicform,asrequested.

rE

SE

Ar

CH

Case Problem 4

Data files needed for the case Problem: logo.jpg, smith.jpg, and smith.txt

Body Systems BodySystemsisaleadingmanufacturerofhomegyms.ThecompanyrecentlyhiredyoutoassistindevelopingitsWebsite.YourfirsttaskistocreateaWebpagefortheLSM400,apopularweightmachinesoldbythecompany.You’vebeengivenatextfiledescribingthefeaturesoftheLSM400.You’vealsoreceivedtwoimagefiles:oneofthecompany’slogoandoneoftheLSM400.Youarefreetosupplementthesefileswithanyotherresourcesavailabletoyou.Youareresponsibleforthepage’scontentandappearance.


1.CreateanewHTML5filenamedsmith.htmandsaveitinthetutorial.01\case4folderincludedwithyourDataFiles.

2.AddtheappropriatedoctypeforHTML5tothebeginningofthefile. 3.Addacommenttothedocumentheaddescribingthedocument’scontentandcon-

tainingyournameandthedate. 4.Addanappropriatepagetitletothedocumenthead. 5. Setthecharactersetofthefiletoutf-8.

Test your knowledge of HTML and use your creativity to design a Web page for an exercise equipment company.

Not For Sale

© C

enga

ge L

earn

ing.

All

right

s re

serv

ed. N

o di

strib

utio

n al

low

ed w

ithou

t exp

ress

aut

horiz

atio

n.


6.Usethecontentsofthesmith.txtdocument(locatedinthetutorial.01\case4folder)asthebasisofthedocumentbody.Includeatleastoneexampleofeachofthefollowing:

•structuralelementssuchastheheader,footer,section,andasideelements•groupingelementsincludingaheadingandaparagraph•anorderedorunorderedlist•atext-levelelement•aninlineimage•acharacterentityreferenceoracharacterencodingnumber

7. StructureyourHTML5codesothatit’seasyforotherstoreadandunderstand. 8. Saveyourchangestothefile,andthenopenitinyourWebbrowsertoverifythatit

isreadable. 9. Submityourcompletedfilestoyourinstructor,ineitherprintedorelectronicform,

asrequested.

enDing SoluTion FileS

tutorial.01 tutorial

jprop.htmjpslogo.pngjpsstyles.cssmodernizr-1.5.js

review

basic.htmbasiclogo.pngbasicstick.pngbasicstyles.cssmodernizr-1.5.js

case1

mathhigh.htmmhlogo.jpgmhstyles.cssmodernizr-1.5.js

dessertstyles.cssdessertweb.jpgmodernizr-1.5.jstorte.htmtorte.jpg

case3case2

macbeth.htmmacbeth.jpgmacstyles.cssmodernizr-1.5.js

logo.jpgsmith.jpgsmith.htm

case4

Not For Sale

© C

enga

ge L

earn

ing.

All

right

s re

serv

ed. N

o di

strib

utio

n al

low

ed w

ithou

t exp

ress

aut

horiz

atio

n.