Tải bản đầy đủ - 0 (trang)
Chapter 13. Making Text for the Web

Chapter 13. Making Text for the Web

Tải bản đầy đủ - 0trang

Chapter13.MakingTextfortheWeb

13.1 HTML:THENOTATIONOFTHEWEB

13.2 WRITINGPROGRAMSTOGENERATEHTML

13.3 DATABASES:APLACETOSTOREOURTEXT

13.4 RELATIONALDATABASES

13.5 CONCEPTSSUMMARY



ChapterLearningObjectives

Themedialearninggoalsforthischapterare:

TogainsomebasicskillwithHTML.

ToautomaticallygenerateHTMLforinputdata,likeanindexpageforadirectory

ofimages.

TousedatabasestogenerateWebcontent.

Thecomputersciencegoalsforthischapterare:

Touseanothernumberbase,hexadecimal,forspecifyingRGBcolors.

Tocreateandusehelpermethods.

Toallowamethodtothrowanexception.

Tointroducethe"unnamed"package.



TointroduceMap,whichmapskeystovalues.

Tointroducegenericsfortypingcollections.

TointroduceusinganIteratortoprocesstheelementsofacollection.

ToexplainwhatSQLisandwhatithastodowithrelationaldatabases.



[Page442(continued)]



13.1.HTML:TheNotationoftheWeb

TheWorldWideWebismostlytext,andmostofthattextisin

thespecificationlanguageHTML(HyperTextMarkupLanguage).

HTMLisbasedonSGML(StandardGeneralMarkupLanguage),

whichisawayofaddingadditionaltexttoone'stexttoidentify

logicalpartsofthedocument:"Thisisthetitle,""Thisisa

heading,"and"Thisisjustaplainoleparagraph."Originally,

HTML(likeSGML)wassupposedtoidentifyjustthelogicalparts

ofadocumenthowitlookedwasuptothebrowser.Documents

wereexpectedtolookdifferentfromonebrowsertoanother.

ButastheWebhasevolved,twoseparategoalsdeveloped:

Beingabletospecifylotsoflogicalparts(e.g.,includingprices,

partnumbers,stockertickercodes,temperatures,etc.),and

beingabletocontrolformatting.



[Page443]

Forthefirstgoal,XML(eXtensibleMarkupLanguage)evolved

thatallowsyoutodefinenewtagslike

7834JK.Forthesecondgoal,thingslike

cascadingstylesheetsweredeveloped,whichgiveyoucontrol

overthewaythepageisdisplayed.Yetanothermarkup

language,XHTML,wasdeveloped,whichisHTMLintermsof

XML.

Formostofthischapter,we'llbeintroducingXHTML,butwe're

notgoingtodistinguishitfromoriginalHTML.We'lljusttalk

aboutitasHTML.

We'renotgoingtohaveacompletetutorialforHTMLhere.

Therearemanyoftheseavailable,inbothprintandonthe

Web,andmanyarehigh-quality.Enter"HTMLtutorial"intoyour

favoritesearchengineandtakeyourpick.Instead,we'lltalk



hereaboutsomegeneralnotionsofHTML,andmentionthe

tagsthatyoushouldreallyknow.

Amarkuplanguagemeansthatadditionaltextisinsertedinto

theoriginaltexttoidentifytheparts.InHTML,theinserted

text,calledtags,aredelimitedwithanglebracketsless-thanand

greater-thansigns.Forexample,

startsaparagraph,and

endsaparagraph.

Webpageshaveseveralparts,andthepartsnestwithineach

other.ThefirstisaDOCTYPErightatthetopofthepagethat

announcesthekindofpagethisiswhetherthebrowsershould

trytointerpretitasHTML,XHTML,CSS,orwhat.Followingthe

doctypecomesaheading(...)andabody(...

).Theheadingcancontaininformationlikethetitle

nestedwithinittheendingofthetitlecomesbeforetheending

ofthehead.Thebodycanhavemanypiecesnestedwithinit,

suchasimagesandparagraphs.Allofthebodyandheading

nestswithin...tags.Figure13.1showsasimple

webpage'ssource,andFigure13.2showshowthepage

appearedinInternetExplorer.Trythisyourself!Typeitina

simpletexteditorandsaveitwithahtmlfilesuffix,andthen

openitinaWebbrowser.Theonlydifferencebetweenthisfile

andanyWebpageisthatthisfilelivesonyourdisk.Ifitwere

onaWebserver,itwouldbeaWebpage.



Figure13.1.SimpleHTMLpagesource.

(Thisitemisdisplayedonpage444intheprintversion)



Figure13.2.SimpleHTMLpageopeninInternet

Explorer.

(Thisitemisdisplayedonpage444intheprintversion)



[Viewfullsizeimage]



CommonBug:BrowsersareForgiving,butUsually

Wrong

Browsersareveryforgiving.IfyouforgettheDOCTYPEormake

mistakesintheHTML,itwillliterallyguessatwhatyoumeantandthen

trytoshowit.Murphy'sLaw,though,saysthatitwillprobablyguess

wrong.IfyouwantyourWebpagetolookjustthewayyouwant,get

theHTMLright.



Herearesomeofthetagsthatyoushouldknow:

Thetagcantakeparameterstosetthebackground,

text,andlinkcolors.Thesecolorscanbesimplecolor

nameslike"red"or"green,"ortheycanbespecificRGB

colors.

Youspecifycolorsinhexadecimal.Hexadecimalisanother

numbersystem.Decimalisbase10.Hexadecimalisbase

16.Thedecimalnumbers1to20translatetohexadecimal

1,2,3,4,5,6,7,8,9,A,B,C,D,E,F,10,11,12,13,and

14.Thinkofhexadecimal"14"as16plus4,whichis20.



[Page444]

Theadvantageofhexadecimalisthateachdigit

correspondsto4bits.Twohexadecimaldigitscorrespondto

abyte.Thus,thethreebytesofRGBcolorsaresix

hexadecimaldigits,inRGBorder.HexadecimalFF0000is

red255(FF)forred,0forgreen,and0forblue.0000FFis

blue.000000isblack,andFFFFFFiswhite.



Headingsarespecifiedusingtags

...

tHRough

...
.Smallernumbersaremoreprominent.

Therearelotsoftagsfordifferentkindsofstyles:Emphasis

...,italics...,boldface...,bigger

...andsmaller...fonts,typewriter

font...,pre-formattedtext
...
,block

quotes
...
,andsubscripts...

andsuperscripts...(Figure13.3).Youcan

alsocontrolthingslikefontandcolorusingthe...

tags.



Figure13.3.HTMLstyles.

(Thisitemisdisplayedonpage445intheprintversion)



[Viewfullsizeimage]



Youcanforceanewlineusing
.



[Page445]

Usethetagtoinsertimages(Figure

13.4).Theimagetagtakeswheretogettheimage

informationfromasthesrc=parameter.Thesourcecanbe

specifiedinoneofseveralways.



-Ifit'sjustafilename(like"flower1.jpg"),thenit's

assumedtobeanimageinthesamedirectoryasthe

HTMLfilereferencingit.

-Ifit'sapath,it'sassumedtobeapathfromthesame

directoryastheHTMLpagetothatimage.Soifwehad

anHTMLpagein"MyDocuments"thatreferencedanimage

inmymediasourcesdirectory,wemighthavea

referenceto"mediasources/flower1.jpg".YoucanuseUNIX

(orDOS)conventionshere,e.g.,".."referencesthe

parentdirectory,so"../images/flower1.jpg"wouldsayto

gototheparentdirectory,thendowntoimagestograb

imageflower1.jpg.



[Page446]

-ItcanalsobeacompleteURLyoucanreference

imagesonotherserversentirely!



Figure13.4.InsertinganimageintoanHTML

page.

(Thisitemisdisplayedonpage445intheprintversion)



[Viewfullsizeimage]



Youcanalsomanipulatethewidthandheightofimages

withoptionstotheimagetag,e.g.,
src="flower.jpg">tolimittheheightto100pixelsandto

adjustthewidthsothatthepicturekeepsitsheightto

widthratio.Usingtheoptionalalt,youcanspecifythetext

tobedisplayediftheimagecan'tbedisplayed,e.g.,for

audioorBraillebrowsers.

Youusethelinkoranchortagfrom

texttocreatelinksfromthecurrenttext(sourceanchor)

tosomewhereelse(desti-nationanchor).Inthisexample,

someplace.htmlisthedestinationanchorforthelinkit'swhere

yougowhenyouclickonthelink.Thesourceanchorfor

thelinkisthe"fromtext".Thesourceanchorcanbetextor

animage.AsseeninFigure13.5,thedestinationanchor

canalsobeacompleteURL.



Figure13.5.AnHTMLpagewithalinkinit.



[Viewfullsizeimage]



Notice,too,intheFigure13.5thatlinebreaksinthesource

filedon'tshowupinthebrowser.Wecanevenhaveline

breaksinthemiddleofalinktag,andtheydon'timpactthe

actualdisplayofthelink.Thebreaksthatmatter(thatshow



upinthebrowser)aregeneratedbytagslike
and

.

Youcancreatebulletlists(unorderedlists)andnumbered

lists(orderedlists)usingthe

    ...
and
    ...


tags,respectively.Individualitemsarespecifiedusingthe

tags
  • ...
  • .

    Tablesarecreatedusing...
    tags.Tablesare

    constructedoutoftablerowsusing...tags,and

    eachrowcanhaveseveraltabledataitemsidentifiedwith

    ...tags(Figure13.6).Tablerowsnestwithin

    tables,andtabledataitemsnestwithintablerows.



    Figure13.6.InsertingatableintoanHTML

    page.

    (Thisitemisdisplayedonpage447intheprintversion)



    ThereislotsmoretoHTML,suchasframes(havingsubwindows

    withinone'sHTMLpagewindow),divisions(
    ),horizontal

    rules(
    ),applets,andmore.Wehaveonlycoveredthe

    mostcriticaltagsforunderstandingtherestofthischapter.You

    cansearchtheWebforHTMLtutorials.



    [Page447]







    ×