Download - All IT eBooks
Transcript
www.allitebooks.com AlsobyMarkMyers www.allitebooks.com www.allitebooks.com www.allitebooks.com ASmarterWay ToLearnHTML&CSS Learnitfaster.Rememberitlonger. www.allitebooks.com MarkMyers www.allitebooks.com Copyright©2015MarkMyers Allrightsreserved,includingtherighttoreproducethisbook,oranyportionsofit,inany form. 1.0 http://www.ASmarterWayToLearn.com www.allitebooks.com Chapters Learnitfaster.Rememberitlonger. Howtousethisbook 1HTML&CSS 2Creatingparagraphs 3Creatingheadings 4Specifyingfonts 5LinkingyourCSStoyourHTML 6Specifyingafont-size 7CSSclasses 8Classesnottiedtoanelement 9Font-weight 10Font-style 11Stylingbitsandpieces 12Colors 13Spacing 14Aligningtext 15First-lineindentandblockquote 16Margins 17Borders 18Padding 19Inheritance 20Grouping 21ID 22Div 23Images www.allitebooks.com 24Blockvs.inline 25Addingmoreinfototheimagetag 26Positioninganimage 27Centeringanimage 28Floatingimages 29Links 30Linkaddresses 31Linkingtoalocationonapage 32Openinganewwindow 33Stylinglinks 34Clickableimages 35Imagemapspart1 36Imagemapspart2 37Bulletlistsandnumberedlists 38Stylinglists 39Stylingalist’smarkers 40MoreCSSselectors 41Tables:basicstructure 42Tables:headings 43Tables:spanningcolumnsandrows 44Tables:borders 45Tables:spacingpart1 46Tables:spacingpart2 47Tables:aligningtext 48Tables:background-color 49Forms:theformtag 50Forms:textinput www.allitebooks.com 51Forms:textarea 52Forms:submit 53Forms:radiobuttons 54Forms:checkboxes 55Forms:selectbox 56Forms:label 57Groupingrelatedelements 58Forms:styling 59Comments 60Layout:nestedboxes 61Layout:divs 62Layout:divwidthsandcentering 63Layout:side-by-sidedivs 64Layout:amodernheaderpart1 65Layout:amodernheaderpart2 66Layout:amodernheaderpart3 67Layout:amodernheaderpart4 68Layout:amodernheaderpart5 69Averticalnavigationbarpart1 70Averticalnavigationbarpart2 71Averticalnavigationbarpart3 72Averticalnavigationbarpart4 73Averticalnavigationbarpart5 74Ahorizontalnavigationbarpart1 75Ahorizontalnavigationbarpart2 76Backgroundimagespart1 77Backgroundimagespart2 www.allitebooks.com 78Iframes 79EmbeddingYouTubevideos 80FurthercustomizingYouTubevideos 81EmbeddingVimeovideos 82Audio 83Emsvs.percentagesvs.pixels 84Relativeandstaticpositioning 85Z-index 86Mediaqueries 87Min-andmax-width,min-andmax-height 88Thestuffatthetop 89Themetadescription 90Buildasite Acknowledgements Learnitfaster. Rememberitlonger. Ifyouembracethismethodoflearning,you’llgetthehangofHTMLandCSSin lesstimethanyoumightexpect.Andtheknowledgewillstick. You’llcatchontoconceptsquickly. You’llbelessbored,andmightevenbeexcited.You’llcertainlybemotivated. You’llfeelconfidentinsteadoffrustrated. You’llrememberthelessonslongafteryouclosethebook. Isallthistoomuchforabooktopromise?Yes,itis.YetIcanmakethesepromises andkeepthem,becausethisisn’tjustabook.It’sabookplus1,800interactiveonline exercises.I’vedonemybesttowriteeachchaptersoit’seasyforanyonetounderstand, butit’stheexercisesthataregoingtoturnyouintoarealHTMLcoder. Cognitiveresearchshowsthatreadingalonedoesn’tbuyyoumuchlong-term retention.Evenifyoureadabookasecondorevenathirdtime,thingswon’timprove much,accordingtoresearch. Andforgethighlightingorunderlining.Markingupabookgivesustheillusionthat we’reengagingwiththematerial,butstudiesshowthatit’sanexerciseinself-deception. Itdoesn’tmatterhowmuchyellowyoupaintonthepages,orhowmanytimesyoureview thehighlightedmaterial.BythetimeyougettoChapter50,you’llhaveforgottenmostof whatyouhighlightedinChapter1. Thisallchangesifyoureadlessanddomore—ifyoureadashortpassageandthen immediatelyputitintopractice.WashingtonUniversityresearcherssaythatbeingasked toretrieveinformationincreaseslong-termretentionbyfourhundredpercent.Thatmay seemimplausible,butbythetimeyoufinishthisbook,Ithinkyou’llbelieveit. Practicealsomakeslearningmoreinteresting. Tryingtoabsorblongpassagesoftechnicalmaterialputsyoutosleepandkillsyour motivation.Tenminutesofreadingfollowedbytwentyminutesofchallengingpractice keepsyouawakeandspursyouon. Anditkeepsyouhonest. Ifyouonlyread,it’seasytokidyourselfthatyou’relearningmorethanyouare.But whenyou’rechallengedtoproducethegoods,there’samomentoftruth.Youknowthat youknow—orthatyoudon’t.Whenyoufindoutthatyou’realittleshakyonthispointor that,youcanreviewthematerial,thenre-dotheexercise.That’sallittakestomasterthis bookfrombeginningtoend. I’vetalkedwithmanyreaderswhosaytheythoughttheyhadaproblem understandingtechnicalconcepts.Butwhatlookedlikeacomprehensionproblemwas 1hasfadedfrommemory,howcanyouunderstandChapter50,whichdependsonyour knowingChapter1cold?Theread-then-practiceapproachembedstheconceptsofeach chapterinyourlong-termmemory,soyou’repreparedtotacklematerialinlaterchapters thatbuildsontopofthoseconcepts.Whenyou’reabletorememberwhatyouread,you’ll findthatyoulearnHTMLandCSSquitereadily. Ihopeyouenjoythislearningapproach.AndthenIhopeyougoontosetthe Internetonfirewithsometerrificwebpages. Howtousethisbook Sinceyoumaynothavelearnedthiswaybefore,abriefusermanualmightbe helpful. Study,practice,thenrest.Ifyou’reintentonmasteringthefundamentalsofHTML andCSS,asopposedtojustgettingafeelforit,workwiththisbookandtheonline exercisesina15-to-30-minutesession,thentakeabreak.Studyachapterfor5to10 minutes.Immediatelygototheonlinelinksgivenattheendofeachchapterandcode for10to20minutes,practicingthelessonuntilyou’vecodedeverythingcorrectly. Thentakeawalk. Don’twearyourselfout.Youlearnbestwhenyou’refresh.Ifyoutrytocovertoo muchinoneday,yourlearningwillgodownhill.Mostpeoplefindtheycan comfortablycoveronetothreechaptersaday.Yourexperiencemayvary. Ifyoufindsomeoftherepetitiontiresome,skipexercises.Iwrotetheexercisesfor peoplelikeme,whoneedalotofrepetition.Ifyou’reafastlearneroralearnerwith someHTMLexperience,there’snoreasontoburdenyourself.ClicktheSkip ExerciseandGetCreditbuttontojumpahead.Skipwholesetsofexercisesifyou don’tneedthem.Practiceasmuchasyouneedto,butnomore. Ifyoustrugglewithsomeexercises,youknowyou’rereallylearning.An interestingfeatureofyourbrainisthattheharderitisforyoutoretrieveapieceof information,thebetteryourememberitnexttime.Soit’sactuallygoodnewsifyou havetostruggletorecallsomethingfromthebook.Don’tbeafraidtorepeatasetof exercises.Andconsiderrepeatingsomeexercisesafterlettingafewweeksgoby.If youdothis,you’llbeusingspacedrepetition,apower-learningtechniquethat providesevenmorelong-termretention. Dothecodingexercisesonaphysicalkeyboard.Amobiledevicecanbeidealfor reading,butit’snowaytocode.Very,veryfewWebdeveloperswouldattempttodo theirworkonaphone.Thesamethinggoesforlearningtocode.Theoretically,most oftheinteractiveexercisescouldbedoneonamobiledevice.Buttheideaseemsso perversethatI’vedisabledonlinepracticeontablets,readers,andphones.(Italso simplifiedmyowncodingwork.) Ifyouhaveanauthorityproblem,trytogetoverit.Whenyoustartdoingthe exercises,you’llfindthatIcanbeapainaboutinsistingthatyougeteverylittledetail right.Forexample,ifyouomitasemicolon,theprogrammonitoringyourworkwill tellyouthecodeisn’tcorrect,eventhoughitmightrun.Learningtowritecodewith fastidiousprecisionhelpsyoulearntopaycloseattentiontodetails,afundamental requirementforcodinginanylanguage. Subscribe,temporarily,tomyformattingbiases.Currentcodeformattingislike seventeenth-centuryspelling.Everyonedoesithisownway.Therearenouniversally acceptedstandards.Butthealgorithmsthatcheckyourworkwhenyoudothe teachercould,because,let’sfaceit,algorithmsaren’tthatbright.SoI’vehadtosettle oncertainconventions.AlloftheconventionsIteachareembracedbyalarge segmentofthecodingcommunity,soyou’llbeingoodcompany.Butthatdoesn’t meanyou’llbemarriedtomyformattingbiasesforever.Whenyoubegincoding projects,you’llsoondevelopyourownopinionsorjoinanorganizationthathasa stylebook.Untilthen,I’llaskyoutomakeyourcodelooklikemycode. 1 HTML&CSS AnHTML(HypertextMarkupLanguage)documentisatextfilethattellsthe browser(Chrome,Firefox,InternetExplorer,Safari,andothers)howtoassemblea webpage.Itsaystothebrowser,“Putthisheadinghere.Putthatparagraphthere.Insert thispicturehere.Putthattablethere.” Thoughitcancreatewebpageswithformattingthatissometimeselaborateandeven beautiful,anHTMLdocumentitselfispuretext,withoutanyformattingwhatsoever.This meansyoucan’tuseawordprocessingprogramlikeMicrosoftWordtowriteHTML, becauseWordandotherwordprocessorsaddformatting.Instead,you’llchoosefromany numberofeditingprogramsthatproducepuretext.ThesimplestoftheseisNotepadona PCandTextEdit,inPlainTextmode,onaMac.Youcanalsousefancierediting programs.AndtherearewebdevelopmenttoolslikeDreamweaver.Theyallcreatethe puretextrequiredforHTML.MyfavoritecodeeditoristheopensourceBrackets,freeat http://brackets.io/. WhenIaskyoutodosomethinginBrackets,Notepad,orTextEdit,feelfreeto substituteanyofthealternativeeditors. EachHTMLdocumentcreatesasinglewebpageinthebrowser.Ifasitehasa hundredpages,ithasahundredHTMLdocuments. AnHTMLdocument’snameendswiththe.htmlextension,asinabout.htmlor products.html. Whenyou’relookingatawebpage,youcanseethenameofthepage’sHTML documentinthebrowser’saddressbar. http://www.ASmarterWayToLearn.com/htmlcss/23.html Whenthelineofcharactersshownaboveisenteredinthebrowser’saddressbar,the browserloadstheHTMLdocument23.html,andthatpageisassembledinthebrowser anddisplayedontheuser’sscreen.Ifauserclicksalinkonthepagefor,say help.html,thenthefilehelp.htmlloads,andthatpageisdisplayed. There’soneHTMLnameyouusuallywon’tseeinthebrowser’saddressbar, index.html.That’sthenameofthepagethatloadsbydefaultwhennoHTML documentisspecified.It’sthesite’shomepage.Soifyouenterthisinthebrowser’s addressbar… http://www.asmarterwaytolearn.com …thedocumentthatloads(withsomeexceptions)isindex.html. AlltheHTMLdocumentsforasitearestoredonthewebhosts’sserver,or,inthe caseofabig,importantsite,oftenonthesiteowner’sownserver.Whenthebrowseris serveranddisplaysthatpage. AbrowserwillalsodisplayanHTMLdocumentstoredonyourcomputer’shard drive.Thatwillpromptyourbrowsertodisplaythepageonyourscreen. WhereasanHTMLdocumentspecifiesthecontentsofawebpage—theheadings, paragraphs,images,tables,etc.—ACSS(cascadingstylesheets)filespecifiesthestyling ofthatpage—fonts,colors,columnwidths,andthelike. LikeanHTMLdocument,aCSSfileisplaintext.Youcancreateitwiththesame editoryouusetocreateanHTMLdocument.ACSSfilehastheextension.css. WhenanHTMLdocumentloads,itcallstheCSSfilethatstylesitscontents. RatherthancreatingaseparateCSSfile,it’spossibletoincludeallofthestyling specificationsinanHTMLdocument.Butthepreferredwaytostylewebpagesistoputall thestylinginformationinaseparateCSSfile,sothat’swhatI’mgoingtoteachyou. ThesearetherulesI’mgoingtoaskyoutofollowfornamingbothHTMLandCSS files: Useonlylower-casecharacters. Avoidspaces. Stickto0-9,a-z,and_. Findtheinteractivecodingexercisesforthischapterat: http://www.ASmarterWayToLearn.com/htmlcss/1.html www.allitebooks.com 2 Creatingparagraphs Let’sgetyourfeetwet. 1. Onyourharddrivecreateafoldercalledmy-smarter-site.(Ifyou’reunclearhowto createafolderinyourparticularoperatingsystem,Googleit.There’splentyofgood WindowsandMacinstructionforthisonline.) 2. Underthemy-smarter-sitefoldercreateasubfoldercalledcss.(Again,ifthisisn’t somethingyouknowhowtodo,Googleit.) 3. Online,gotohttp://asmarterwaytolearn.com/htmlcss/practice-2-0.html 4. Copyallthetextonthepage. 5. Openyourplain-texteditor(seethelastchapter)andcreateanewdocument. 6. Pastethecopiedtextintoit. 7. Savethedocumentinyourmy-smarter-sitefolderaspractice.html 8. Ontheemptylinebetween<body>and</body>typeyourname. 9. Savethefile. 10. GotoWindowsExplorer(PC)orFinder(Mac)anddouble-clickthefile.Andvoila! There’syourname,displayedinthebrowser.You’vejustcreatedanddisplayedyour firstwebpage. Ifitdoesn’twork,takealookatthesamplecodeat: http://asmarterwaytolearn.com/htmlcss/practice-2-1.html Now,onanewline,addafewmorewordstoyourcode,soitlookslikethis. <html> <head> <title>Practice</title> </head> <body> MarkMyers That’smyname. </body> </html> Savethefileanddisplaythepage,followingsteps8and9above. Samplecode,ifyouneedit,isat: http://asmarterwaytolearn.com/htmlcss/practice-2-2.html. MarkMyers That’smyname. Butthebrowserdisplayeditallononeline. MarkMyersThat’smyname. Theproblemisthatthebrowserdoesn’trecognizeacarriagereturn. Whenyouhitacarriagereturninawordprocessororyourtexteditor,the applicationbreaksthetextyouwritenextintoanewparagraph,butwhenyouentera carriagereturninanHTMLdocument,thebrowserignoresit.Ifyouwanttodisplayyour twosentencesintwoseparateparagraphs,youhavetoexplicitlytellthebrowsertodoit. Youdothiswithparagraphtags. <html> <head> <title>Practice</title> </head> <body> <p>MarkMyers</p> <p>That’smyname.</p> </body> </html> Reviseyourpractice.htmltextdocumenttoincludethetagsshownabove.Savethe file.Displaythepageinyourbrowser. Ifyoucodedcorrectly,thepagewillnowdisplaythetextintwoseparateparagraphs. Samplecodeisat: http://asmarterwaytolearn.com/htmlcss/practice-2-3.html. TagsarethecommonestfeatureofanHTMLdocument.Youusethemforallkinds ofthings.Lookatthe9linesofHTMLabove.Therearetagsoneveryline.Usually—but notalways—HTMLtagscomeinpairs,anopeningtagpairedwithaclosingtag.The openingtagconsistsofsomecharactersenclosedbyand>.Forexample,<p>.The closingtagisthesameastheopeningtag,excepta/followstheopening<.Forexample, </p>. Theopeningtagtellsthebrowser,“Beginhere.”Theclosingtagtellsthebrowser, “Endhere.”So,forexample,ifyouwrite… <p>Thesedirectionsareimportant.Readthemcarefully.</p> …you’retellingthebrowsertobegintheparagraphat“These”andtoenditat “carefully.” Thebrowserdoesn’tcarewhetheryouputseparateparagraphsonseparatelines.AsI yourcode,likethis. <p>Hi.</p> <p>Ho.</p> Thingstokeepinmind: It’slegaltowrite<P>insteadof<p>butI’llaskyoutosticktolower-casetags. Therearenospacesbetweenthetagsandthetextthattheyenclose. Goodhousekeepingdemandsthatwheneverthebrowserexpectsaclosingtag,you provideit.Sometimesyoucangetawaywithwriting<p>withoutclosingwith </p>,butitcanproduceunpredictableresults. TakegoodcareoftheHTMLandCSSfilesyoucreatedinthischapter.You’llbe revisingthefilesonaregularbasisasyoumakeyourwaythroughthisbook.Whenyou completethebookandfinishcodingthefiles,youwillhavetheworst-lookingwebpagein Internethistory.Butitwillbeadetaileddemonstration—ademonstrationthatyoumade— ofthemostimportantconceptsinHTMLandCSScoding. Findtheinteractivecodingexercisesforthischapterat: http://www.ASmarterWayToLearn.com/htmlcss/2.html 3 Creatingheadings Aheadingonawebpageservesthesamepurposeasaheadinginanewspaperor magazine.Itshowstheuserwhat’simportantandgivesherasenseofwhattheparagraphs underneathitareabout.Headingsalsohelpsearchenginesunderstandapage. HTMLgivesyousixsizesofheadingstochoosefrom,h1throughh6.h1isthe largest,h6isthesmallest. Youdon’thavetoincludeallthedifferentsizesofheadingsinyourHTML document,butyoushouldincludeanh1heading,becausesearchengineslookforit.You canhaveasmanyh2,h3,h4,h5,andh6headingsinyourdocumentasyouwant,but youshouldhaveonlyoneh1heading.Otherwise,searchenginesmightgetconfused. Thisishowyoucodethelargestheading. <h1>Thisisthelargestheading.</h1> Noticethatthere’sbothanopeningandaclosingtag. Here’salongerone,inh3size. <h3>Thisisalongheadingthatgoesonandonandon,butitstill </h3> Let’slookatanotherheading.Ifyouwrite… <h3>Alltheking’shorsesandalltheking’smencouldn’tputHumpt </h3> …thebrowserwillbreakthelinesaccordingtohowmuchwidthisavailable.It mightbreaktheheadinglikethis: Alltheking’shorsesandalltheking’s mencouldn’tputHumptytogetheragain. Oritmightbreakitlikethis: Alltheking’shorsesandalltheking’s mencouldn’tputHumptytogether again. topredict,howtheheadingbreaks.Ifyou’reatallfussy,youmightwanttotellthe browserhowtobreakit.Maybeyouwantitbrokenthisway: Alltheking’shorses andalltheking’smen couldn’tputHumpty togetheragain. Soyoutrywriting… <h3>Alltheking’shorses andalltheking’smen couldn’tputHumpty togetheragain.</h3> Butthiswayofwritingtheheadinghasnoeffectonthebrowser.Itstillbreaksthe headingthewayitwantsto.Thebrowserignorescarriagereturns. Ifyouwantthebrowsertobreaktheheadingacertainway,youhavetotellittodo soexplicitly,usingthetag<br>. <h3>Alltheking’shorses<br>andalltheking’smen<br>couldn’tput </h3> Notethatthere’snospacebetweenthetextand<br>.Andthere’snoclosingbr tag. Bydefault,browsersseparateparagraphsbyaddingspacebetweenthem.For example,ifyouwrite… <p>Slowlorisesareagroupofseveralspeciesofprimateswhichma </p> <p>Theyhavearoundhead,narrowsnout,largeeyes,anddistinctiv dependent.</p> …thetwoparagraphsmightcomeoutlookingsomethinglikethis: Slowlorisesareagroupofseveralspeciesofstrepsirrhineprimateswhich makeupthegenusNycticebus. Theyhavearoundhead,narrowsnout,largeeyes,andavarietyof distinctivecolorationpatternsthatarespecies-dependent. nextsentence,you’dconsolidatebothsentencesintoasingleparagraphanduse<br>. <p>Slowlorisesareagroupofseveralspeciesofprimateswhichma <br>Theyhavearoundhead,narrowsnout,largeeyes,anddistincti dependent.</p> Thenitwoulddisplaylikethis: Slowlorisesareagroupofseveralspeciesofstrepsirrhineprimateswhich makeupthegenusNycticebus. Theyhavearoundhead,narrowsnout,largeeyes,andavarietyof distinctivecolorationpatternsthatarespecies-dependent. Thebrowserdisplayseachheadingonitsownline.Thebrowserdoesn’tcare whetheryouputeachheadingonitsownseparateline,butforhuman-readability,please do.Forexample: <h1>OurMission</h1> <h2>HelpingPeopleHelpPeople</h2> Inyourpractice.htmldocumentreplacethetwoparagraphsaboutyournamewithan h1heading,anh2heading,andamulti-lineparagraph.Savethefileanddisplayitinyour browser.SampleHTMLcode: http://asmarterwaytolearn.com/htmlcss/practice-3-1.html. Findtheinteractivecodingexercisesforthischapterat: http://www.ASmarterWayToLearn.com/htmlcss/3.html 4 Specifyingfonts Browsersdisplayheadingsandparagraphsinthefontoftheirownchoosing.Butyou canspecifythefontyouwant.Let’sspecifyafontforparagraphs.Openyourtexteditor andcreateanewfile. 1. Inthenewfiletype: p{ font-family:Georgia,“TimesNewRoman”,Times,serif; } 2. Savethefileasstyles.cssinthecsssubfolderofyourmy-smarter-site folder. Nowyouhavetwofiles,practice.htmlinthemy-smarter-sitefolderand styles.cssinthecsssubfolderofthemy-smarter-sitefolder.Thingstokeep inmind: There’snothingsacredaboutcallingyourHMTLdocumentpractice.htmland yourCSSfilestyles.css.Youcannamethefilesanythingyouwant,aslongas theHTMLfilehastheextensionhtmlandtheCSSfilehastheextensioncss. I’veaskedyoutoputtheCSSfileinasubfolderofyourmainfolder.Thisis conventional,butnotnecessary.YoucouldputtheCSSfileinthesamefolderasyour HTMLfileifyouwantedto,butmostdevelopersdo Let’slookatyourCSScodeindetail.Itbeginswithp.Itmeans,“Thisisastylefor paragraphs”—thatis,alltextenclosedbythetags<p>and</p>. p{ font-family:Georgia,“TimesNewRoman”,Times,serif; } pisfollowedbyaspaceandanopeningcurlybracket. p{ font-family:Georgia,“TimesNewRoman”,Times,serif; } Next,indented2spaces,isthespecification. p{ font-family:Georgia,“TimesNewRoman”,Times,serif; } Noticethatit’sfont-family,followedbyacolonandaspace.Thelistoffour www.allitebooks.com serif,sans-serif,etc.,youneedtogivethebrowseroneormorefallbackfonts.(Ifyou’re unclearaboutthedifferencebetweenserifandsans-seriffonts,Googleit.)Fallbackfonts arenecessarybecausethebrowsergrabsthefontsforthewebpagefromtheuser’s computer.Ifyourfirstfontchoiceisn’tinstalledonthecomputer,thebrowsermovesonto yoursecond-choicefont,thenyourthird-choicefont,etc.Thestackcanlistasmanyfonts asyoulike,butthecommonpracticeistolistthreeorfour.Thelastfallback—thelastfont inthestack—isalwaysthegeneric,forexamplesans-serif,toguaranteethatthebrowser willbeabletodisplaysomethinginthefamilyifnoneofyourotherchoicesisfound.Ifa fontnamehasanyspacesinit,encloseitinquotationmarks,asin“TimesNew Roman”.Thespecificationendswithasemicolon. p{ font-family:Georgia,“TimesNewRoman”,Times,serif; } Finally,onalineofitsown,there’saclosingcurlybracket. p{ font-family:Georgia,“TimesNewRoman”,Times,serif; } Websafefontsarefontsthathaveahighlikelihoodofbeingfoundontheuser’s computer,whichmakesthemgoodtouseonyourpage.Youcanfindalistofcommon websafefontstacksathttp://abt.cm/O7bwre.Nowlet’sspecifyadifferentfontforh1 headings.AddthiscodetoyourCSSfile. h1{ font-family:“TrebuchetMS”,Helvetica,sans-serif; } YourCSSfileshouldnowincludetwostyles. p{ font-family:Georgia,“TimesNewRoman”,Times,serif; } h1{ font-family:“TrebuchetMS”,Helvetica,sans-serif; } Savethefile.SampleCSScodeisat: http://asmarterwaytolearn.com/htmlcss/practice-4-1.html. Findtheinteractivecodingexercisesforthischapterat: http://www.ASmarterWayToLearn.com/htmlcss/4.html 5 LinkingyourCSS toyourHTML SincetheCSSfileisseparatefromtheHTMLfile,thebrowserhastobetoldwhere tofindit.Thisishowyoudoit. <html> <head> <title>Practice</title> <linkrel=“stylesheet”type=“text/css”href=“css/styles.css”> <body> <p>MarkMyers</p> <p>That’smyname.</p> </body> </html> Thisisamouthful,solet’sbreakitdown. First,noticethatthelinkinformationgoesbetweenthe<head>and</head>tags, ratherthanbetweenthe<body>and</body>tags,whereyouwroteyourtwo paragraphs.Thedifferencebetweentheheadandbodysectionsisthattheheadsection dealswithafewtechnicalmatters—liketellingthebrowserwheretofindtheCSSfile— whilethebodysectioncontainsthecontentofthepage. Next,noticethatthelinkinformationitselfisatag.It’splacedinsideanopening< andaclosing>.Butunlikealltheothertagsyouseeinthecodeabove,itisn’tpairedwith aclosingtag.Itstandsalone. Thelinktagconsistsofthree“equations:”Eachequationsaysthatsomethingequals somethingelse.Thesecondsomethingisinquotationmarks. 1st“equation”:linkrel=“stylesheet”tellsthebrowserthatthelink relationshipiswithastylesheet. 2nd“equation”:Thisisauseless,vestigialpartofthetag,likeyourappendix.We’ve alreadytoldthebrowserthelinkistoastylesheet.Allstylesheetsendwiththeextension “css,”andthey’realltextdocuments,sothisjustrepeatswhatthebrowsershouldalready know.Butwestillhavetoincludeit(butmaybenotforlong). 3rd“equation”:hrefstandsforhypertextreference.Thispartofthetagtellsthe browserwheretofindtheCSSfiletolinkto.We’veputitinthecsssubfolderofthe folderwherethisHTMLdocumentresides,themy-smarter-sitefolder.Thefile nameis“styles.css.” Somethingtonoticeaboutformattinghere:Therearenospacesinthetag,except Enterthelinktaginyourpractice.htmldocument.Saveit,andhaveyour browserdisplaythewebpageitcreates.Expecttheparagraphstobeinaseriffontandthe headinginasans-seriffont,asyouspecifiedintheCSSfile.FindsampleHTMLcodeat: http://asmarterwaytolearn.com/htmlcss/practice-5-1.html. Findtheinteractivecodingexercisesforthischapterat: http://www.ASmarterWayToLearn.com/htmlcss/5.html 6 Specifyingafontsize Let’schangethefont-sizeofyourparagraphtextandyourh1heading.Openyour styles.cssfileandaddthetwolineshighlightedbelow. p{ font-family:Georgia,“TimesNewRoman”,Times,serif; font-size:1.2em; } h1{ font-family:“TrebuchetMS”,Helvetica,sans-serif; font-size:2em; } Whenyouspecify1.2emastheparagraphfontsize,you’resaying(withoutgetting tootechnical)thatyouwantparagraphtexttobe1.2timesthedefaulttextsize—thesize thatthebrowserwoulddisplayifyoudidn’tspecifyasize.Ifyouspecified1em,you’dget thedefaultsize..75emwouldbethree-quartersofdefaultsize.1.5emwouldbe150%of defaultsize.3.5emwouldbethree-and-a-halftimesdefaultsize.Thismaycomeasa surprise:Whenyouspecify2emastheh1size,you’renotsayingyouwanttheh1 headingtobe200%ofthedefaulth1size,but200%ofthedefaulttextsize.A2em headingisthesamesizeas2emparagraphtext.Theheading,though,willbeboldby defaultandtheparagraphwon’tbe.Thingstonotice: font-size:1.2em;isindented2spaces. Thereisnospacebetween1.2andem. Thelineendswithasemicolon. CodingAlternativestobeAwareOf Insteadofspecifyingfont-sizeinems,youcanspecifyitinpercentages,pixels,or points.Inthisprogramwe’llsticktoemsforfont-size. SavetheCSSfile.DisplayyourHTMLfile.FindsampleCSScodeat: http://asmarterwaytolearn.com/htmlcss/practice-6-1.html. Findtheinteractivecodingexercisesforthischapterat: http://www.ASmarterWayToLearn.com/htmlcss/6.html 7 CSSclasses You’vespecifiedafontfamilyandafontsizeforparagraphsandh1headings.You canalsocreateclassesofparagraphsandheadingswithformattingthatvariesfrom generalstylingforparagraphsandheadings.Infact,youcancreateclassesofjustabout anyelementonthepageforcustomformatting.Openyourstyles.cssfileandadd thisstyle… p.important{ font-size:1.5em; } SaveyourCSSfile.Nowyou’vecreatedspecialstylingforaclassofparagraphs. Thisspecialstylenamed“important”willoverridethegeneralstylethatyoucreated earlier.Whenyousayyouwanttextinparagraphsoftheclass“important”tohaveafontsizeof1.5em,you’resayingyouwantthetexttobeone-and-a-halftimesnormalsize. Butwhatisnormalsize?Itdependsonwhetheryou’vecreatedageneralstyleinyourCSS filethatappliestothewholepage(SeeChapter19).Ifyouhaven’tcreatedageneral paragraphstyle,normalsizeisthebrowserdefaultsize—1em.Sothena1.5emfont-size fortheparagraphclass“important”wouldbeone-and-a-halftimesthebrowserdefault size.Therulesfornamingclasseswouldfillabook.Tokeepthingssimple,I’mgoingto askyoutouselowercasealphabetletters,hyphens,underlines,andnumbers.Butdon’t startanamewithanumber.Here’sanexampleofaclassforh3headings. h3.bigger{ font-size:2.5em; } Thisclasswillbe250%ofthesizeofnormaltext.Again,“normal”means250%of thesizeofthebrowserdefaulttextsizeifyouhaven’tspecifiedastyleforthewholepage. Ifyouhavestyledh3headings,the“bigger”classofheadingswillbe250%ofthatsize. SaveyourCSSfile.OpenyourHTMLfileandaddthisline… <pclass=“important”>Warning:Wehavenoslowloriseshere. </p> Nowthetext“Warning:Wehavenoslowloriseshere.”willbeone-and-a-halftimes “normal”textsize.Thingstonotice: Theclassreferenceispartoftheopeningptag,allenclosedinbrackets. Theclassnameisenclosedinquotationmarks. Theclosingparagraphtagdoesn’tchange.It’sstill</p>. Note:Thesameclasscanbeassignedtoanynumberofelements.Andyoucan Here’sanexample. <h3class=”specialconspicuousenhanced“>Heynow!<h3/> Let’ssayyou’vecreatedaclassnamed“special”thatspecifiesafontsize,asecond classcalled“conspicuous”thatdisplaysitinred,andathirdclasscalled“enhanced”that specifiesafont-weightofbold.Intheexampleabove,allthreeclasseswillapplytothe heading.Itwillbeextra-large,red,andbold. Saveyourfiles.Displaythepage. SampleCSScode: http://asmarterwaytolearn.com/htmlcss/practice-7-1.html. SampleHTMLcode: http://asmarterwaytolearn.com/htmlcss/practice-7-2.html. Findtheinteractivecodingexercisesforthischapterat: http://www.ASmarterWayToLearn.com/htmlcss/7.html www.allitebooks.com 8 Classesnottied toanelement Ifyouintendtodefineaparticularclassforonlyonetypeofelement—forexample, onlyparagraphtextoronlyh3headings—writetheelementnamebeforethedotandclass name,asin… p.special{ …or… h3.special{ Ifyouwantaclasstobeuseableformorethanonetypeofelement—forexample, bothparagraphtextandheadings—omittheelementname.Justwrite,forexample… .special{ OpenyourCSSfileandaddthestylebelow. .typewriter{ font-family:“CourierNew”,Courier,monospace; } You’vecreatedanewstylenamed“typewriter”thatwillstyletextinatypewriter font.Itcouldbeparagraphtext.Itcouldbeheadingtext.Itcouldbeotherkindsoftext elementsthatI’llintroduceyoutolater. Noticethatthere’snoelementname,likeporh3,involvedhere.It’sjustadotwith theclassnamefollowingit.Savethefile. OpenyourHTMLfileandaddthecodebelow. <h2class=“typewriter”>Thisheadingisintypewritertext. </h2> <pclass=“typewriter”>Thisparagraphisalsointypewritertext. </p> You’veassignedtheclass“code”toaheadingandaparagraph.SinceyourCSSfile doesn’ttietheclasstoanyparticularelement,youcanuseitforanytextelement. SavetheHTMLfileanddisplayit. SampleCSScodeisat: http://asmarterwaytolearn.com/htmlcss/practice-8-1.html. SampleHTMLcodeisat: http://asmarterwaytolearn.com/htmlcss/practice-8-2.html. http://www.ASmarterWayToLearn.com/htmlcss/8.html 9 Font-weight InChapter7youcreatedaparagraphclasscalled“important,”andspecifiedafont sizeone-and-a-halftimes“normal.”Nowlet’smakeparagraphsclassedas“important” evenmoreimportant.We’llboldthem. OpenyourCSSfileandaddthelinehighlightedbelow. p.important{ font-size:1.5em; font-weight:900; Byspecifyingafont-weightof900,you’retellingthebrowsertomakeallthe paragraphsoftheclassimportantasboldaspossible.Thescaleforfont-weightranges from100through900—100,200,300andsoon.100isthelightestweight.400isnormal. 900isasheavyasitgets. Now,whenthebrowserencountersaparagraphoftheimportantclass,itwill displayitlargerandinboldface. Anoteaboutfont-weight:Asanalternativetothenumericalscale,youcanuseone offourfont-weightwords:lighter,normal,bold,andbolder. SaveyourCSSfile.DisplayyourHTMLfile.“Warning:Wehavenoslowlorises here.”shouldnowbeinbold. FindsampleCSScodeat: http://asmarterwaytolearn.com/htmlcss/practice-9-1.html. Findtheinteractivecodingexercisesforthischapterat: http://www.ASmarterWayToLearn.com/htmlcss/9.html 10 Fontstyle Youcanspecifyitalicsforanytext.Here’saclassthatappliesitalicstoaparagraph. p.standout{ font-style:italic; } Here’saclassthatappliesitalicstoh4headingsoftheclass“special”. h4.special{ font-style:italic; } Here’saclassthatappliesitalicstoanytext,whetherit’saparagraph,heading,or someothertextelement. .emphasized{ font-style:italic; } Remember,classnamescanbeanythingyoulike,withintheboundsofthenaming rulesIcoveredinChapter7. InsteadofdefiningCSSclassestoitalicizetext,youcanusethe<i>taginyour HTML. Inthefollowingparagraph,thewords“DavidCopperfield”areitalicized. <p>Leadingstylemanualssaybooktitles,like<i>DavidCopperfield </p> Analternativetothe<i>tagisthe<em>tag. <p>Youmustbedressed<em>and</em>readytogo.</p> Bydefault,the<em>taghasthesamevisualeffectasthe<i>tag.Theyboth italicizetext.Themaindifferenceisthatwhenascreenreaderseesthe<em>tag,itputs extravocalemphasisonthetextenclosedinthetag.Itdoesn’tdothatwith<i>text. InsteadofcreatingaclassforboldtextinCSS,youcanusethe<b>taginHTML. Inthefollowingparagraphthetext“Pleasenote:”isbolded. <p><b>Pleasenote: </b>Theflightscheduleissubjecttochangewithoutnotice. </p> Analternativetothe<b>tagisthe<strong>tag.Bydefault,the<strong>tag hasthesamevisualeffectasthe<b>tag.Theybothboldtextinmostbrowsers.Themain textinalowertone.Itdoesn’tdothatwith<b>text. InyourCSSfile,addaclassnottiedtoanelementthatitalicizestext.InyourHTML filecodeaheadingofthatclass.Thenwriteaone-sentenceparagraph.Intheparagraph, usethetwoHTMLtagsthatitalicizetextandthetwoHTMLtagsthatboldtext.Savethe filesanddisplayyourHTMLfile. SampleCSScodeisat: http://asmarterwaytolearn.com/htmlcss/practice-10-1.html. SampleHTMLcodeisat: http://asmarterwaytolearn.com/htmlcss/practice-10-2.html. Findtheinteractivecodingexercisesforthischapterat: http://www.ASmarterWayToLearn.com/htmlcss/10.html 11 Stylingbitsandpieces Sofaryou’vebeenusingCSStostylewholeblocksoftext—paragraphsand headings.Butyoucanalsostylebitsandpiecesofthoseblocksusingthe<span>tag. Let’sgobacktotheemphasizedclassfromthelastchapter. .emphasized{ font-style:italic; } Sincetheclass,asyoudefinedit,isn’ttiedtoanyparticulartextelement—itisn’t p.emphasizedorh5.emphasizedbutjust.emphasized—itcanbeappliedto anytextyouchoose,includingpartofaparagraphorheading.Inthefollowingparagraph thewords“somuch”areitalicized. <p>Iloveyou<spanclass=“emphasized”>somuch</span>Ihavetouse </p> InyourHTMLfileitalicizeaportionoftheparagraphyoucreatedinthelastchapter, usingaspanclassof“emphasized.”SaveyourHTMLfileanddisplayit. SampleHTMLcodeisat: http://asmarterwaytolearn.com/htmlcss/practice-11-1.html. Findtheinteractivecodingexercisesforthischapterat: http://www.ASmarterWayToLearn.com/htmlcss/11.html www.allitebooks.com 12 Colors Let’ssayyouwanttodisplaycertaintextinred.We’llcalltheclassstandout. .standout{ color:#cc0000; } Youcould,ofcourse,tietheclasstoatextelement.Itcouldbep.standoutor h2.standout,forinstance.Butwe’llmakeitanall-purposeclasssowecanuseitfor anytypeoftextelement.Hereitis,appliedtoasinglehyphenatedword. <p>Thisisgoingtobea<spanclass=“standout”>redletter</span>day!</p> Hereitis,appliedtoawholeparagraph. <pclass=“standout”>Pleasereadthischaptercarefully.There<em>w </p> Andhereitis,appliedtoaheading. <h1class=“standout”>RobotsthatCare</h1> IntheCSSclassasIdefinedit,thecolorisspecifiedbyahexvalue,#cc0000.You canalsousenamesfromtheCSSlistofcolors,likered,gold,and mediumslateblue.Gethexvaluesforcolorsathttp://www.colorpicker.com/.Geta listofCSScolornamesathttp://www.crockford.com/wrrrld/color.html. InyourCSSfilecreateaclassnottiedtoanelementthatcolorstextred.Inyour HTMLfileuseaspantocolorsometextred.SavethefilesanddisplayyourHTMLfile. SampleCSScodeisat: http://asmarterwaytolearn.com/htmlcss/practice-12-1.html. SampleHTMLcodeisat: http://asmarterwaytolearn.com/htmlcss/practice-12-2.html. Findtheinteractivecodingexercisesforthischapterat: http://www.ASmarterWayToLearn.com/htmlcss/12.html 13 Spacing Youcancreatestylesfortextspacing.Let’ssayyourh2headingnormallylookslike this.Signupforthecoursenow.Ifyoucreatethisstyle… h2{ letter-spacing:.1em; } …theh2headingwouldaddextraspacebetweentheletters.Itwouldlooklike this… Signupforthecoursenow. Notethatwhenyouspecifyanemvalueforletter-spacing,ittellsthebrowserhow muchmorespaceyouwantbeyondthenormalspacing.Orhowmuchless.Lookatthis style. h2{ letter-spacing:-.05em; } Thecodeabovetightensthespacebetweenletters,sotheheadinglookslikethis… Signupforthecoursenow. Ifyouwantedtousedefaultletter-spacing,you’dwrite… h2{ letter-spacing:0; } Letter-spacingdoesn’tdistinguishbetweencharactersinthemiddleofawordand charactersthatbeginorendaword.Thismeansthatletterspacingadjuststhespacenot onlybetweencharactersinawordbutalsobetweenthelastcharacterofawordandthe firstcharacterofthenextword.Ifyouincreaseletter-spacing,thespacingbetweenwords increasesautomatically.Ifyoucomparethethreeexamplesabove,you’llseethatspace hasopenedupbetweenwordsinthefirstandsecondexamples. Ifyouwanttoadjustspacingonlybetweenwords,useword-spacing. I’llexaggeratetheword-spacingsoyoucanclearlyseeit. word-spacing:1em; } TheCSSabovestylestheheadingtolooklikethis. Signupforthecoursenow. Youprobablywon’tuseword-spacingveryoften.Themostcommonuseforitisto slightlyopenupthespacebetweenboldedwords,forbetterreadability. Youcanspecifythespacingbetweentextlines,knownintheanalogworldas “leading,”byusingline-height. Here’saparagraphwithnormalline-height. Slowlorisesareagroupofseveralspeciesofstrepsirrhineprimateswhichmakeupthegenus Nycticebus.Theyhavearoundhead,narrowsnout,largeeyes,andavarietyofdistinctivecoloration patternsthatarespecies-dependent. Supposeyoucreatethisstyle. p.more-readable{ line-height:2em; } AnyparagraphintheHTMLfileassignedtheclass“more-readable”wouldlooklike this. Slowlorisesareagroupofseveralspeciesofstrepsirrhineprimateswhichmakeupthegenus Nycticebus.Theyhavearoundhead,narrowsnout,largeeyes,andavarietyofdistinctivecoloration patternsthatarespecies-dependent. Inthecaseofline-height,1.2emmeansnormallinespacing.1.8emwouldbe roughlyanextrahalf-lineofspacing.1emwouldbeslightlytighterspacingthannormal. InyourCSSfilecodeaparagraphclassthatincreasesletter-spacing,word-spacing,and line-height. InyourHTMLfilecodeaparagraphandassignitthatclass.Savethefilesand displayyourHTMLfile.SampleCSScodeisat: http://asmarterwaytolearn.com/htmlcss/practice-13-1.html. SampleHTMLcodeisat: http://asmarterwaytolearn.com/htmlcss/practice-13-2.html. http://www.ASmarterWayToLearn.com/htmlcss/13.html 14 Aligningtext Youcancenter,left-align,right-align,andjustifytext.Thiscodecentersh1 headings… h1{ text-align:center; } Anh1headingthatwouldnormallylooklikethis… HydrogenSkateboards …nowlookslikethis… HydrogenSkateboards Left-alignedisthedefaultstyleforHTMLtext.Butyoucanmakeitexplicit: p{ text-align:left; } Supposeyouwanttoplaceadateallthewayovertotheright.Youcouldwrite… .date-style{ text-align:right; } Textassignedthatclasswouldlookthisthis.(Lookforthedatewayoveronthe right.) July1,2018 Here’saparagraphinthedefaultleft-alignedstyle. Slowlorisesareagroupofseveralspeciesofstrepsirrhineprimateswhichmakeupthegenus Nycticebus.Theyhavearoundhead,narrowsnout,largeeyes,andavarietyofdistinctivecoloration patternsthatarespecies-dependent.FoundinSoutheastAsiaandborderingareas,theyrangefrom ChinainthenorthtotheislandofJavainthesouth. Noticethattherightsideis“ragged.” Ifyouwanttoevenitup,youcouldcreateastyle… p.pretty{ text-align:justify; } Aparagraphassignedtheprettyclasswouldhaveanevenrightedge,likethis. Slow lorises are a group of several species of strepsirrhine primates which make up the genus Nycticebus. They have a round head, narrow snout, large eyes, and a variety of distinctive coloration patterns that are species-dependent. Found in Southeast Asia and bordering areas, they range from BangladeshandNortheastIndiainthewesttothePhillipinesintheeast,andfromYunnanprovincein ChinainthenorthtotheislandofJavainthesouth. InyourCSSfilecodeallh3headingssotheycenter.Createaclassofparagraphs thatjustifiestheparagraph.InyourHTMLfilecodeacenteredheadingandajustified paragraph. SampleCSScodeisat: http://asmarterwaytolearn.com/htmlcss/practice-14-1.html. SampleHTMLcodeisat: http://asmarterwaytolearn.com/htmlcss/practice-14-2.html. Findtheinteractivecodingexercisesforthischapterat: http://www.ASmarterWayToLearn.com/htmlcss/14.html 15 First-lineindent andblockquote Bydefault,browsersdon’tindentthefirstlineofaparagraph.Thefollowing paragraphshowshowthebrowserdisplaysaparagraphifyoudon’ttellittodisplayit differently. Slowlorisesareagroupofseveralspeciesofstrepsirrhineprimateswhichmakeupthegenus Nycticebus.Theyhavearoundhead,narrowsnout,largeeyes,andavarietyofdistinctivecoloration patternsthatarespecies-dependent. Butyoucanspecifyafirst-lineindent. p{ text-indent:1em; } Sonowaparagraphwouldhaveafirst-lineindent,likethis. Slowlorisesareagroupofseveralspeciesofstrepsirrhineprimateswhichmakeupthegenus Nycticebus.Theyhavearoundhead,narrowsnout,largeeyes,andavarietyofdistinctivecoloration patternsthatarespecies-dependent. Notethatanypositiveemvaluegivesyouanindent.Thelargerthevalue,thedeeper theindent. Toexplicitlyspecifythedefault,nofirst-lineindent,youcouldwrite… p{ text-indent:0; } Youuseblockquotetovisuallysetoffaquotationthat’smorethanafewwordslong. Bydefault,anyparagraphplacedinsideblockquotetagsisindented,likethis. Weholdthesetruthstobeself-evident,thatallmenarecreatedequal,thattheyareendowedbytheir CreatorwithcertainunalienableRights,thatamongtheseareLife,Libertyandthepursuitof Happiness. ThisistheHTML. <blockquote><p>Weholdthesetruthstobeselfevident,thatallmenarecreatedequal,thattheyareendowedbyth www.allitebooks.com Youcanenclosemorethanoneparagraphinblockquotetags.Youcanenclose headings,too.Andifyoudon’tlikethedefaultblockquotestyling,youcanchangeitin yourCSS.Forexample,thiscodeincreasesthesizeofthetextanddisplaysthetextin gray. blockquote{ font-size:1.4em; color:darkslategray; } Youcanevenincreaseoreliminatetheamountofblockquoteindent.That’sinthe nextchapter. InyourCSSfilecodeaclassofparagraphsthatindentsthefirstline.Thencodea blockquotethatdecreasesthetextsizeandcolorsthetextgray.InyourHTMLfilecodea paragraphthatindentsthefirstline.Thencodeaparagraphinsideblockquotetags. SampleCSScodeisat: http://asmarterwaytolearn.com/htmlcss/practice-15-1.html. SampleHTMLcodeisat: http://asmarterwaytolearn.com/htmlcss/practice-15-2.html. Findtheinteractivecodingexercisesforthischapterat: http://www.ASmarterWayToLearn.com/htmlcss/15.html 16 Margins Youcanputmarginsaroundparagraphs,headings,andmanyotherHTMLelements. Amargincreatesextrawhitespacearoundthetop,bottom,orsidesofanelement.For example,ifyouhaveaparagraphthatwouldnormallylooklikethis… Slowlorisesareagroupofseveralspeciesofstrepsirrhineprimateswhichmakeupthegenus Nycticebus.Theyhavearoundhead,narrowsnout,largeeyes,andavarietyofdistinctivecoloration patternsthatarespecies-dependent. …addingaleftmarginwouldaddwhitespaceontheleft,likethis… Slowlorisesareagroupofseveralspeciesofstrepsirrhineprimateswhichmakeupthegenus Nycticebus.Theyhavearoundhead,narrowsnout,largeeyes,andavarietyofdistinctive colorationpatternsthatarespecies-dependent. Andaddingarightmargin,inadditiontoaleftmargin,wouldaddwhitespaceonthe right,likethis… Slowlorisesareagroupofseveralspeciesofstrepsirrhineprimateswhich makeupthegenusNycticebus.Theyhavearoundhead,narrowsnout,large eyes,andavarietyofdistinctivecolorationpatternsthatarespeciesdependent. Ifyouwanted,youcouldspecifytopand/orbottommarginstoaddwhitespaceabove and/orbelowtheparagraph. Here’ssomeCSScodethatcreatesaclassofparagraphsthatI’venamedoffsetthat addsmarginspaceallaroundthetext.Theamountofwhitespaceistwotimesthesizeof defaulttext. p.offset{ margin:2em2em2em2em; } Amoreconcisewaytocodeequalmarginsonallfoursides… p.offset{ margin:2em; } Whenyou’respecifyingallfourmarginsinonestatement,youspecifythemin defaulttext,aleftmargin1.75thesizeofthefont,andnomarginsonthetoporbottom. You’dwrite… p.offset{ margin:02em01.75em; } Notethatwhenyouwantnomargin,youwrite0,not0em. Ifyouwanttoaddspacebetweenparagraphs,insteadoforinadditiontoafirst-line indent,specifyabottommargin.Thiscodeaddsspacebetweenparagraphs. p{ margin:001em0; } Insteadofspecifyingallfourmargins,youcanspecifyindividualmargins.An alternativetotheexampleaboveis… p{ margin-bottom:1em; } Youcanalsospecifymargin-top,margin-right,andmargin-left. AddaclassofparagraphstoyourCSSfilethathasextrawhitespaceallaroundit. ThenaddaparagraphtoyourHTMLdocumentthat’sinthisclass.Displaythepage. SampleCSScodeisat: http://asmarterwaytolearn.com/htmlcss/practice-16-1.html. SampleHTMLcodeisat: http://asmarterwaytolearn.com/htmlcss/practice-16-2.html. Findtheinteractivecodingexercisesforthischapterat: http://www.ASmarterWayToLearn.com/htmlcss/16.html 17 Borders Youcanputaborderaroundaparagraph,aheading,andmanyotherHTML elementsthatI’llintroduceyoutoinlaterchapters.Thefollowingcodedemonstratesthe simplestwaytospecifyaborder.(Imadeuptheclassname.Youcouldmakeupa differentname.) p.boxed{ border:5pxsolidred; } Nowanyparagraphwiththeclassboxedassignedtoitwillhavea5-pixel-wide, solid,redborderonallfoursides. Asusual,youdon’thavetotiethestyletoaparticularelement,likeaparagraphor heading.Youcanwrite,forinstance… .enclosed{ border:1pxdotted#0000ff; } Nowanyelementwiththeclass“enclosed”assignedtoit—paragraph,heading,or somethingelse—willhavea1-pixel-wide,dotted,blueborderonallfoursides. Youcanchooseamong8borderstyles: dotted dashed solid double groove ridge inset outset Thingstokeepinmind: There’snospacebetweenthenumberandpx.It’s2px,not2px. Youcanusehexvalueslike#ff00fforcolornameslikebluetospecifycolors. Gethexvaluesforcolorsathttp://www.colorpicker.com/.GetalistofCSScolor namesathttp://www.crockford.com/wrrrld/color.html. them,butnocomma. Youaren’tlimitedjustto4-sidedborders.Youcanspecifywhichsidesyouwant, andcanevenmixwidths,styles,andcolorsondifferentsidesofthesameborder(though thiswouldn’tnecessarilybeconsideredgoodgraphicdesign).Herearesomeexamples. border-top:4pxdoublered; border-right:2pxsolid#666666; border-bottom:6pxdasheddarkviolet; border-left:1pxdotted#00ee44; InyourCSSfileaddaclassnottiedtoanelementthatspecifiesaborder.Inyour HTMLfilewriteaheadingofthatclass.Savethefilesanddisplaythepage. SampleCSScodeisat: http://asmarterwaytolearn.com/htmlcss/practice-17-1.html. SampleHTMLcodeisat: http://asmarterwaytolearn.com/htmlcss/practice-17-2.html. Findtheinteractivecodingexercisesforthischapterat: http://www.ASmarterWayToLearn.com/htmlcss/17.html 18 Padding Whenyouputaborderaroundaparagraph,heading,orotherelement,you’lloften wanttoaddbreathingroom—whitespace—betweentheborderandwhat’sinsideit.To addafewpixelsofwhitespaceallaround,forexample,youcouldwrite… p.boxed{ border:5pxsolidred; padding:.1em; } Thehighertheemvalue,thewiderthegapbetweentheborderanditscontent. Tospecifygapsofdifferentwidthsfordifferentsides: p.boxed{ border:5pxsolidred; padding:.1em.2em0.3em; } Thecodeabovespecifiesasmallgapatthetop,alargergapontheright,nogapat thebottom,andthelargestgapontheleft. Likecodeformargins,thenumbersstartatthetopandgoclockwise. Youcanalsospecifypaddingforindividualsides.Thefollowingcodeduplicatesthe effectofthemoreconcisecodeabove. p.boxed{ border:5pxsolidred; padding-top:.1em; padding-right:.2em; padding-bottom:0; padding-left:.3em; } Ifyou’regoingtospecifypaddingforallfoursides,themoreconcisecodeis preferable.Butifyouwanttospecifypaddingforjustoneortwosides,youmightprefer theindividualspecifications. ReviseyourCSSfiletoincludesomepaddingintheclassthatspecifiesaborder. Savethefile.DisplayyourHTMLfile. SampleCSScodeisat: http://asmarterwaytolearn.com/htmlcss/practice-18-1.html. Findtheinteractivecodingexercisesforthischapterat: http://www.ASmarterWayToLearn.com/htmlcss/18.html www.allitebooks.com 19 Inheritance InheritanceisanefficiencyfeatureofCSS.Itmeansyouhavetowritefarlesscode. Inordertounderstandinheritance,youneedtounderstandthatanHTMLpageis organizedintoparentsandchildren.Achildelementofaparentelementisanyelement that’senclosedbytheparentelement. Let’sstartwiththeuber-parent.InanHTMLdocument,theparentofallthecontent thatdisplaysonthepageis<body>.Everythingonthepageisachildof<body>, becauseeveryelementisenclosedbythe<body>tags.(Both<head>and<body> haveaparent,<html>,butwe’renotconcernedwiththatnow.) LookatthesimplifiedwebpagefromChapter2. <html> <head> <title>Practice</title> </head> <body> <p>MarkMyers</p> <p>That’smyname.</p> </body> </html> Thetwoparagraphs,likeeverythingelsewemightaddtothepage,areenclosedby theopeningandclosing<body>tags,sotheyareallchildrenof<body>.Asthebody element’schildren,theyinheritalltheCSSpropertiesofthatelement.So,forexample,if westylethebodyelementlikethis… body{ font-family:Georgia,“TimesNewRoman”,Times,serif; font-size:1.2em; color:darkslategray; } …allthetextonthepagewilldisplayinGeorgiaoroneofthealternatives,at1.2 timesthedefaultsize,andingray.ParagraphswillbeinGeorgiaoroneofitsalternatives. Sowillheadings.Alltextwillbebasedona“normal”textsizeof1.2timesthebrowser’s defaulttextsize.Alltext,whetherparagraphsorheadings,willbegray.Unless… …youoverridetheinheritance. Forexample,ifyouincludethisstyleinyourCSS… h2{ font-family:“TrebuchetMS”,Helvetica,sans-serif; …itoverridestheinheritedfont-family,Georgiaoritsrelatives,andstylesallh2 headingsinTrebuchetoritsrelatives.Sinceyouhaven’tspecifiedanyoverridingstyles forsizeorcolor,theh2headingswillinheritthesestylesasspecifiedfortheparent,the bodyelement.h2headingswillbe120%thesizeofthedefaultforh2headings,and they’llbegray.Ofcourse,youcanoverridetheseinheritedstylesaswell,forexample: h2{ font-family:“TrebuchetMS”,Helvetica,sans-serif; font-size:.5em; color:black; } Nowwe’veoverriddenalltheinheritedstyles. Whenyouoverrideaninheritedsizewithanemvalueasinthecodeabove,thenew emvalueisrelativetotheinheritedsize.Thestylethattheh2headinginthecodeabove inheritsfromthebodyelementis1.2em—1.2timesthedefaulttextsize.Sowhenwe styletheh2headingat.5em,we’resaying,“Makeh2headingshalftheinheritedsize.” Theinheritedsize,thankstothestyleofthebodyelement,is1.2timesthedefaultsize. Halfofthatsize,specifiedby.5em,is.6timesthedefaultsize. That’sprettyconfusing,whichiswhymanydevelopersspecify1emforfont-sizein thebodystyle.Thatmakesitclearthatallemvaluesspecifiedforotherelementswillbe relativetothebrowser’sdefaultsize. Findtheinteractivecodingexercisesforthischapterat: http://www.ASmarterWayToLearn.com/htmlcss/19.html 20 Grouping Youcangroupelementsthatshareoneormorestylecharacteristics.Forexample,if h1,h3,andh5headingsarealltobeintheArialfontoroneofitsrelativesandyouwant themallcentered,youcanwrite… h1,h3,h5{ font-family:Arial,Helvetica,sans-serif; text-align:center; } Nowallthreetypesofheadingssharethesamefont-familyandtextalignment. Thisdoesn’tpreventyoufromindividuallystylingtheseelementswithother characteristics.Forexample,ifyouwanth1andh5headingsinonecolorandh3 headingsinanothercolor,youcouldaddthiscode… h1,h5{ color:#333333; } h3{ color:#999999; } Nowallthreeheadingtypessharethesamefont-familyandtextalignment.h1and h5headingsareonecolor.Andh3headingsareanothercolor. InyourCSSfilegrouph4headingsandaclassofparagraphsthatcenter.Inyour HTMLfilecodeanh4headingandaparagraphofthatclass.Savethefilesanddisplay thepage. SampleCSScodeisat: http://asmarterwaytolearn.com/htmlcss/practice-20-1.html. SampleHTMLcodeisat: http://asmarterwaytolearn.com/htmlcss/practice-20-2.html. Findtheinteractivecodingexercisesforthischapterat: http://www.ASmarterWayToLearn.com/htmlcss/20.html 21 ID AtthispointyoushouldbeclearaboutCSSclasses.Theycanbetiedtoanelement, likethis. p.extra-special{ font-style:italic; } Ortheycanbeforgeneraluse—thatis,nottiedtoanyparticularelement,likethis. .extra-special{ font-style:italic; } InHTMLyouassignaclasstoanelementlikethis. <pclass=“extra-special”>DailySpecial<p/> Aclasscanbeassignedtoanynumberofelements.Andanelementcanbeassigned anynumberofclasses.Ifyouhaveaparagraphclass,itcanbeassignedtoathousand differentparagraphsifyoulike.Ifyouhaveaclassthatisn’ttiedtoaparticularelement,it canbeassignedtodifferentkindsofelements. Anidislikeaclass,butmoreexclusive.ItcanbeassignedonlyonceinanHTML document.Andanelement,thoughitcanhavemanyclasses,canhaveonlyoneid. Forexample,supposeyou’restylingaparagraphthatcontainsamissionstatement. Thisparticularstylingwon’tbeusedforanyotherparagraph.Youcouldstylethisspecial paragraphwithaclass,butitwouldbeclearer,fromahumanpointofview,tosingleitout asuniquebyassigningitanid. Thefollowingcodecreatesanidandstylingforthemissionstatement. p#mission-statement{ font-family:“TimesNewRoman”,Times,serif; font-size:1.2em; color:darkblue; } NotethatintheCSSthesyntaxyouusetodefineidsisexactlythesameasfor classes,exceptthata#replacesthedot. Thefollowingcodecreatesaheadingid. Thefollowingcodecreatesanidthatcanbeusedforaparagraph,aheading,orother elementsthatyou’lllearnaboutlater.Butremember,anyid,includingthisone,shouldbe usedonlyonceonanyHTMLpage.Forexample,ifyouuseitforaparagraph,don’tuseit foranotherparagraph,aheading,oranyotherelementonthepage. font-size:1.5em; font-style:italic; } Here’sanexampleofHTMLthatassignsanidtoanelement. <pid=“whatever”>Thisparagraphhasauniqueid.</p> IntheHTMLthesyntaxisexactlythesame,exceptthatyoureplaceclasswith id. idsareimportantinHTML,buttheyplayanevenlargerroleinJavaScript,asyou’ll learninmybookASmarterWaytoLearnJavaScript,availableatAmazon. InyourCSSfilecodeanh2idthatcolorstheheadingorange.InyourHTMLfile codeaheadingwiththatid.Savethefiles.Displaythepage. SampleCSScodeisat: http://asmarterwaytolearn.com/htmlcss/practice-21-1.html. SampleHTMLcodeisat: http://asmarterwaytolearn.com/htmlcss/practice-21-2.html. Findtheinteractivecodingexercisesforthischapterat: http://www.ASmarterWayToLearn.com/htmlcss/21.html 22 Div Youcanbreakupawebpageintosections,calleddivs.Eachofthesedivscanhave itsownstyling,usingeitheraclassoranid.Coderscommonlycreateseparatedivsfor headers,navigationbars,maincontent,andfooters.Here’ssomecodethatcreatesadiv forthemaincontentofthepage.Sincetherewouldbeonlyonesuchsection,Iuseanid ratherthanaclass. div#main{ font-size:1.1em; margin:.1em.2em.2em.2em; } Here’stheHTMLthatassignstheid. <divid=“main”> <h2>Here’sthewholestory.</h2> <p>It’ssoft.</p> <p>It’sfluffy.</p> </div> Allelementswithinthisdivwillbecontainedinasectionthathasamarginoneach side.Unlessyou’vewrittenoverridingCSScodethatchangesthefont-sizeofcertaintext elements,allelementsinthediv,whicharechildrenofthediv,willbe110%of “normal”size(howeveryou’vedefined“normal”whenyoustyledthebody).Ifthose individualtextelementsarestyledsmaller(lessthan1em)orlarger(morethan1em)than normal,they’llbescaledupordowninrelationtothe1.1emspecifiedforthediv,notthe “normal”specifiedforthebody.Soifyouspecified1em(thebrowser’sdefaultsize)for thebody,1.1emforthediv,and1.5emforh3headings,theheadingswillbe150%of 110%ofthebrowser’sdefaulttextsize. Notethatthe<div>tagisclosed,andthattheelementsthatareenclosedbythe <div>tagsareindented2spaces,sincethey’reallchildrenofthediv. Whenyou’restylingadivthatappearsonlyonceonthepage,likethenavigation section,maincontent,orfooter,it’sbesttocreateanidratherthanaclassforit.Ifthere’sa possibilityadivstylemaybeusedmorethanonce,defineaclass.Forexample: div.special{ margin:.1em.5em.1em.5em; } Anydivassignedthe“special”classwillhaveextramarginsontheleftandright. Theresultisthatitwillbeinset. AddadividtoyourCSSfile.Giveit3emleftandrightmargins.Assignitthefont divcodeaheadingandparagraph.Savethefilesanddisplaythepage. SampleCSScodeisat: http://asmarterwaytolearn.com/htmlcss/practice-22-1.html. SampleHTMLcodeisat: http://asmarterwaytolearn.com/htmlcss/practice-22-2.html. Findtheinteractivecodingexercisesforthischapterat: http://www.ASmarterWayToLearn.com/htmlcss/22.html 23 Images Imagesonawebpagearealmostalwaysoneofthreetypes:jpg,gif,orpng.Ineach case,thethreeinitialsrefertothefileextensionthatdenotestheimageformat.Thejpg formatisbestforphotographsandforillustrationswithmanysubtlecolors.Thegifformat canbeusedforlinedrawings,illustrationswithjustafewcolors,andimagesoftext.Gifs offertransparency,meaningthatthebackgroundcolorcanshowthroughwhereveryou wantitto.Gifscanbeanimated.Unlessyouneedanimation,thegifformatisrarelyyour bestchoice.Thepngformatisbetter.Ithasthesamegeneralfeaturesasgif,buthasno animation.It’spreferredovergifbecauseitgivesyouhigherqualitythanagifandina smallerfilesize.Asmallerfilesizemeanspagesloadfaster. AnHTMLfiletellsthebrowserwhichimagestoplaceonthepageandwhereto placethem,buttheimagesthemselvesaren’tpartoftheHTMLfile.They’reindividual jpg,gif,orpngfilesthatcanbestoredanywhereontheInternet.Inpractice,they’re usuallyplacedinasubfolderunderthesite’smainfolder.Thenamemostoftenusedfor thesubfolderis“images.” Let’sassumethatyoursite’simagesareinthe“images”subfolderofyoursite’smain folder.Thisishowtoplaceanimagecalled“founder.jpg”onyourpage. imgsrc=“images/founder.jpg”> imgsrcstandsfor“imagesource.”Ittellsthebrowserwheretofindtheimage. Anequalsigncomesnext.Thenthere’sthepathandfilename,allinquotes. Thereisnoclosingtag. InthenormalflowofHTMLcode,animagewillbeplacedonthepageinthesame locationasitappearsinthecode.Forexample,inthefollowingcode… <h3>Ourfounder</h3> <imgsrc=“images/founder.jpg”> <p>Ourfounderisnolongerwithus,alas.<p/> …thephotoappearsundertheheadingandbeforetheparagraph. Youcan,althoughoftennotlegally,displayanimagefromanotherwebsite.Inthat case,youhavetoincludethewholeURL. <imgsrc=“http://www.asmarterwaytolearn.com/surprise.jpg”> Thefollowingdisplaysanimagestoredinthesubfolder“pics”ofmywebsite. <imgsrc=“http://www.asmarterwaytolearn.com/pics/loris.jpg”> UnlessyoutellitotherwiseinyourCSSfile,thebrowserwillplaceanimageallthe wayoverontheleft.Later,you’lllearnhowtoplaceitwhereyouwantit—forexample, inthecenterofthepage. http://www.asmarterwaytolearn.com/loris.jpg. Savethefileanddisplayit. SampleHTMLcodeisat: http://asmarterwaytolearn.com/htmlcss/practice-23-1.html. Findtheinteractivecodingexercisesforthischapterat: http://www.ASmarterWayToLearn.com/htmlcss/23.html 24 Blockvs.inline MostmajorHTMLelements—headings,paragraphs,lists,tables,anddivs—are blockelements.Whenanelementisablockelement,itmeansthebrowserdoesn’tputany otherelementbesideit.Ifyouwriteaheading,thenaparagraph,thenalist,theheading willbeginonanewline.Theparagraphwillbeginonanewline.Thelistwillbeginona newline. Blockelementscanbeplacedside-by-side,butonlyifyouspecifyspecialstyling. Divsareblockelements,butweplacethemside-by-sideallthetimeusingsomething calledfloat,forexamplewhenweplaceasidebarnexttoacontentsection.You’lllearn moreaboutthislater. Allblockelementsinsideadivowntheirownhorizontalspaceonlyinsidethatdiv. IfyourCSSspecifiesthattwodivsaretobeplacedside-by-side,thenofcourseelements ofonedivwillsitnexttoelementsoftheotherdiv.It’llbeliketwocolumns,witheach elementhavingitsownhorizontalspace,butonlywithinitscolumn. Inadditiontostartingeachblockelementonanewline,thebrowserwilladdextra spacebetweenthem.Lateryou’lllearntoadjustthisspaceusingCSS. Inlineelementsdon’tstartonanewline.Forexample,alinkisaninlineelement.If youwrite… <p>Tofindthecolorthatcomplementsyourcomplexion,tryour picker.html”>ColorPicker</a>.</p> …theahrefelementdoesn’tstartonanewline.That’sgood,becauseyouwantit tobepartofthesentenceflow,notsetoff. Youmayfinditsurprisingthatimagesareinlineratherthanblockelements.Ifyou write… <imgsrc=“pic-1.jpg”> <imgsrc=“pic-2.jpg”> <imgsrc=“pic-3.jpg”> …thethreeimageswillbearrayedacrossthediv,ifthere’sroomforthemall. YoucanconvertimagesintoblockelementsusingCSS. img.owns-its-own-line{ display:block; } Nowanyimageassignedtotheclass“owns-its-own-line”won’tsharehorizontal spacewithotherimages. assignthatclasstothelorisimagethatyou’vealreadycoded.Thenduplicatethatimage tag.Nowyouhavetwoimagesoftheloris.Savethefilesanddisplaythepage. SampleCSScodeisat: http://asmarterwaytolearn.com/htmlcss/practice-24-1.html. SampleHTMLcodeisat: http://asmarterwaytolearn.com/htmlcss/practice-24-2.html. Findtheinteractivecodingexercisesforthischapterat: http://www.ASmarterWayToLearn.com/htmlcss/24.html 25 Addingmoreinfo totheimagetag Inthelastchapteryoulearnedtowritetheminimalamountofcodeforplacingan imageonthepage. <imgsrc=“images/founder.jpg”> Thistaggivesthebrowserthenameoftheimagefileandthepathwhereit’sstored. Thatwillgetthejobdone.Inpractice,though,you’llwanttowriteamoreelaboratetag. <imgsrc=“images/founder.jpg”alt=“Ourfounder”width=“55”height=“ Thealtspecificationprovidesawordorafewwordsthatdescribetheimage.It’s thetextalternativetotheimage,whichthebrowsermaydisplayincasethebrowserfails todisplaytheimageforsomereasonorapersonisusingascreenreader.Thetextisupto you,butitshouldbebrief. Thewidthandheightspecificationstellthebrowserhowbigtheimageistobewhen it’sdisplayed.Thenumbersarepixels. Thecommonpracticeistosizeoriginalimagestoexactlythedimensionsthatthey’ll displayinthebrowser.So,intheexampleabove,theimagefounder.jpgwouldbesavedin Photoshoporanotherimageeditingprogram55pixelswideand85pixelshigh.Stating thedimensionsintheimagetaggivesthebrowserahead-startondisplayingtheimage correctly,whichspeedsuploading. Thedimensionsyouspecifyintheimagetagdon’thavetobethesameasthe dimensionsoftheimage.Forexample,ifyouhaveanimagethat’s200pixelswideby300 pixelshigh,youcouldaskthebrowsertoscaleitto50%bywritingwidth=“100” height=“150”.Youcouldalsoaskthebrowsertoscaleupanimage,butthisisrarely done,sinceitdegradestheimage. Askingthebrowsertorescaleanimageslowsdownpageloadingminutely.Ifyou havemanyimagesonyourpage,theremightbeanoticeabledelay. Browsersdon’tcareabouttheorderinwhichyouspecifysrc,alt,width,and height,buttheorderI’vegivenisconventional.I’llaskyoutosticktoitintheexercises. Areaderandbeta-tester,JohnKoch,rememberstheorderofthefirstthreespecifications bythinkingofaSAW. InyourHTMLfileaddanaltspecificationtobothlorisimagetags.Alsoaddwidth andheightspecifications.Theimagesizeis250x197.Specifythatforthefirstimage. Specify125x99forthesecondimage.Savethefileanddisplaythepage. SampleHTMLcodeisat: Findtheinteractivecodingexercisesforthischapterat: http://www.ASmarterWayToLearn.com/htmlcss/25.html 26 Positioninganimage Ifyoudon’ttellthebrowserwhereyouwantanimageplaced,thebrowserwillplace itallthewayoverontheleft.It’llalsoarrayconsecutiveimagesside-by-sideacrossthe screenifthere’sroom. Youcanisolateanimageonitsownlinebylettingthebrowserknowthatyouwant theimagetreatedasablock,notaninlineelement.Whenit’streatedasablock,itgetsto monopolizethehorizontalspaceitsitsin. Asyou’velearned,thisishowyoutellthebrowsertotreatanimageasablock. img.normal{ display:block; } Eventhoughthebrowserpositionsanimageallthewayoverontheleftbydefault, youcanmoveittotherightasfarasyoulike,usingmargins.Thefollowingcodedefines animageclassthatmovesanimageslightlytotherightoftheleftedgeofthepageorof thedivthatcontainsit. img.inset{ display:block; margin-left:1em; } Ifyouwanteditfarthertotheright,you’dincreasetheemnumber. Areminder:insetisanameImadeup.Youcannameaclassanythingyoulikeas longasyoufollowthenamingrules. InyourCSSfilecreateaclassthatmovesanimageright.InyourHTMLfileadd thatclasstothesecondlorisimage.Remember,anelementcanhavemorethanoneclass assignedtoit.Sotheimagewillhaveboththeclass“has-own-line”andtheclass“inset.” Savethefilesanddisplaythepage. SampleCSScodeisat: http://asmarterwaytolearn.com/htmlcss/practice-26-1.html. SampleHTMLcodeisat: http://asmarterwaytolearn.com/htmlcss/practice-26-2.html. Findtheinteractivecodingexercisesforthischapterat: http://www.ASmarterWayToLearn.com/htmlcss/26.html 27 Centeringanimage Let’screateaclassforcenteringimages.I’mgoingtogiveitaridiculousname,to remindyouthatclassnamesaremadeup. img.smack-in-the-middle{ display:block; margin-left:auto; margin-right:auto; } autotellsthebrowsertosplittheleftandrightmarginsequally.Theresultisa centeredimage. Here’stheHTML. <imgclass=“smack-in-themiddle”src=“images/founder.jpg”alt=“Ourfounder”width=“55”heigh NotethatintheHTMLaboveclasscomesbeforesrcandalltheother specifications.Thisisn’tstrictlynecessary,butI’llaskyoutofollowtheconventionwhen youdotheexercises. Analternativewaytocodethestyling: img.smack-in-the-middle{ display:block; margin:0auto0auto; } InyourCSSfilecodeaclassofimagesthatcenters.InyourHTMLfileaddathird lorisimageandassignitthisclass.Savethefilesanddisplaythepage. SampleCSScodeisat: http://asmarterwaytolearn.com/htmlcss/practice-27-1.html. SampleHTMLcodeisat: http://asmarterwaytolearn.com/htmlcss/practice-27-2.html. Findtheinteractivecodingexercisesforthischapterat: http://www.ASmarterWayToLearn.com/htmlcss/27.html 28 Floatingimages Wouldyouliketowrapsometextaroundanimage?Here’show. img.wrap-around-the-right-side{ float:left; } NowanytextthatcomesaftertheimageinyourHTMLcodewillwraparoundthe image,ontheright.Ifthetextistoolongtofitcompletelynexttotheimage,it’llcontinue atfullwidthundertheimage. Notethatthere’snodisplay:blockhere.Theimagewillshareitshorizontalspaceif there’sroom. Ifyouwanttexttowraparoundtheleftsideoftheimage,you’dwrite: img.r-float{ float:right; } Whenyoudothis,you’llnoticethatthebrowserjamsthetextupagainsttheimage, leavingnobreathingroom.Youcancorrectthisbyaddingsomemargintotheimage.In thefollowingcode,whitespaceisaddedbetweentheimageandthetextonitsright. Whitespaceisalsoaddedbelowtheimage,togivebreathingroombetweentheimageand anytextthatflowsbeneaththeimage. img.wrap-around-the-right-side{ float:left; margin:0.75em.5em0; } There’soneunintendedconsequenceyouneedtoavoid.Let’ssayyouhaveashort paragraphwrappingaroundtheleftsideofanimage.Theparagraphissoshortthatit doesn’tfillallthespacetotheleftoftheimage.Ifyouaddanotherparagraphunderthe shortparagraph,itwillwrap.Ifyoudon’twantthis,youneedtotellthebrowsertoclear thefloatafterthefirstparagraph.Todothis,youcreateaclass. p.no-wrap{ clear:both; } Bytellingthebrowsertoclearboth,you’resaying,“Don’twrapanythingfromhere on.”Here’stheHTML. <imgclass=“wrap-around-the-rightside”src=“images/founder.jpg”alt=“Ourfounder”width=“55”height= <p>Thisisourfounder,BradleyB.Bradley,whoenvisionedaBrad’s wrap”>Whereveryougo,you’llfindaBrad’sBreadsticksnearby,wit </p> 1. InyourCSSfilecodeaclassofimagesthatfloatsandcreatessomespacebetweenit andthetextthatwrapsaroundit. 2. Createaclassofparagraphsthatclearsthewrap. 3. InyourHTMLfilecopytheimagetagforthesmallerversionoftheloris.Replace theclassnamewiththeclassthatfloats. 4. Codeaparagraphthatwillwraparoundtheimage. 5. Codeaparagraphthatclearsthewrap. 6. Savethefilesanddisplaythepage. SampleCSScodeisat: http://asmarterwaytolearn.com/htmlcss/practice-28-1.html. SampleHTMLcodeisat: http://asmarterwaytolearn.com/htmlcss/practice-28-2.html. Findtheinteractivecodingexercisesforthischapterat: http://www.ASmarterWayToLearn.com/htmlcss/28.html 29 Links NowwecometothefeatureforwhichHTMLisnamed,hypertexta.k.a.hyperlinks a.k.a.links.Youclickonsometextoranimage,andanewpageloads.Orperhaps somethingelsehappens. Alinkisdisplayed,bydefault,inblue,withanunderline.Let’ssayIwanttohavea linkonmysite,ASmarterWaytoLearn,thattakestheusertotheprogrammingsiteStack Overflow.WhentheuserclicksStackOverflow,heistakentothehomepageofthatsite. ThisistheHTMLthatcreatesthelink: <ahref=“http://www.stackoverflow.com”>StackOverflow</a> Thesearetheparts. atellsthebrowsertowatchforananchor.Theanchoristhelinktextbetweenthe opening<a>tagandtheclosing</a>tag.Itisthetextthattheusersees.Inthis casetheanchor,orlinktext,isStackOverflow. hrefstandsfor“hypertextreference.”hreftellsthebrowser,“Watchforan addressimmediatelyfollowingtheequalsign.Thiswillbethepagetoloadwhenthe userclickstheanchor.” TheWebaddressisinquotes.Inthiscasetheaddressis http://www.stackoverflow.com. Aftertheopeningtagcomestheanchor,thetextthattheuserclickstotellthe browsertoexecutethelink.Theanchorisnotinquotes. Theclosingtagendsit. Ifyou’relinkingtoapageonthesamewebsite,inthesamefolder,allyouneedis thepagename: <ahref=“products.html”>Ourproducts</a> Ifit’sonthesamewebsitebutinasubdirectory,youaddthesubdirectoryname.In thefollowingcode,thefileisinthecatalogsubdirectory. <ahref=”catalog/products.html”>Ourproducts</a> InyourHTMLfilecodealinktoStackOverflowathttp://www.stackoverflow.com”. Savethefileanddisplaythepage.Clickthelink. SampleHTMLcodeisat: http://asmarterwaytolearn.com/htmlcss/practice-29-1.html. Findtheinteractivecodingexercisesforthischapterat: http://www.ASmarterWayToLearn.com/htmlcss/29.html 30 Linkaddresses Whenalinkaddressdoesn’tspecifyapage,likeabout.htmlorfaq.html,the browserknowstogotothehomepageofthesite,usuallycalledindex.html. http://www.stackoverflow.com… …isthesameas… http://www.stackoverflow.com/index.html IfIwantedtolinktoapageotherthanindex.html,Iwouldincludethepagenamein theaddress,like…http://www.stackoverflow.com/web-design.html Notethatthere’sa/betweenthedomainnameandthepagename.Thereareno spaces. IfthepageIwantedtolinktowereinasubfolderunderthemainfolder,I’dinclude thesubfoldernameaswell: http://www.stackoverflow.com/questions/web-design.html Alinkmightdrilldownthroughadditionallevelsofsubdirectories,togettoapage. Forexample: http://www.stackoverflow.com/questions/rookie/newest/web-design.html Youdon’thavetohaveseverallevelsofsubdirectoriesinyoursitestructure,butyou mightwanttoforpurposesoforganizationifthesitehashundredsofpages.Ontheother hand,ifit’sasimplesite,youmighthave,forexample,justan“images”subfolderanda “styles”subfolderunderthemainfolder.AlltheHTMLpageswouldbeinthemain folder.Oryoumightchoosetohaveaflatstructure,withnosubdirectoriesatall.It’supto you. Whenyoulinktoapageonyourownsite,youcanskipthedomainname.For example,ifIwanttodisplayalinkonthehomepageofmysitethattakestheusertomy ownsite’sfaqpage,Iwon’thavetowrite… <ahref=“http://www.asmarterwaytolearn.com/faq.html”>FrequentlyAs Icanwrite,simply… <ahref=“faq.html”>FrequentlyAskedQuestions</a> WhenIomitthedomainname,thebrowserunderstandsthatI’mlinkingtoapageon thesamesite. IfthepageI’mlinkingtoisonthesamesitebutinafolderorseverallevelsof directorieslowerthanthefolderyou’relinkingfrom,youcanstillskipthedomainname, butyouhavetoincludethename(s)ofthelowerfolderordirectories. checking.html”>FrequentlyAskedQuestions</a> Intheexampleabove,you’retellingthebrowserthatthepagecode-checking.html isonelevelbelowthefolderyou’relinkingfrom,inthesubfolderservices.Notethatthere isno/beforethesubfoldername. Butsupposeyouwanttolinkfromapageintheservicessubfoldertoapageinthe productssubfolderthat’sonthesamelevelastheservicessubfolder.Sonowyouhaveto tellthebrowsertofirstgobackuponelevel,andthengodownfromtheretotheproducts subfolder.Thisishowyoudoit. <ahref=”../products/texteditors.html”>FrequentlyAskedQuestions</a> Foreachlevelthebrowserneedstogobackupinordertogodownagain,addan additional../ Forexample,supposeyou’rewritingalinkonapagethat’sinafoldertwolevels downfromthehomepage.Tolinkbacktothehomepage(index.html),you’dwrite: <ahref=”../../index.html“>Home</a> InyourHTMLfilecreateabriefparagraphthatincludesalinkthattakestheuserto thewhy-exercises.htmlpageatsmarterwaytolearn.com.Savethefileanddisplaythe page.Clickthelink. SampleHTMLcodeisat: http://asmarterwaytolearn.com/htmlcss/practice-30-1.html. Findtheinteractivecodingexercisesforthischapterat: http://www.ASmarterWayToLearn.com/htmlcss/30.html 31 Linkingtoalocation onapage Whenyoucreateapageofsignificantlength,youmightwanttoprovidelinksto varioussectionsofthepage,sotheuserdoesn’thavetoscrollthroughthepagelooking forthesectionshewantstosee.Onalongpage,it’salsonicetoprovidelinkstothetopof thepage,sowhenshe’sfinishedwithalowersection,shecanjumpbacktothetop. Youbeginbychoosingaheading,paragraph,orotherelementtoserveasthestarting pointforthesection.Yougivethiselementanid. <h2id=“fame-claim”>OURCLAIMTOFAME</h2> Thenyoucreatealinktoit. <ahref=”#fame-claim”>Readallaboutourclaimtofame.</a> It’slikelinksyoulearnedaboutinthelastchapter,exceptthata#precedestheidin thereference. Toinsertalinkbacktothetop,you’dcreateanidforanelementatornearthetopof thepage.Itcouldbethemainheadingforthepage.Oritcouldbethecontentdivthat encompassesallthecontentonthepage. <divclass=“content”id=“top”> Then,whereveryouwanttoplacethelink,youcouldwrite… <ahref=”#top“>Backtothetop</a> Whenyouwanttolinktoalocationonanotherpageonthesamesite,youhaveto includethenameofthepage. <ahref=”faq.html#whyme“>Getanswerstoyourcosmicquestions</a> Thecodeabovelinkstoaheading,paragraph,orotherelementwiththeidwhy-me onthefaq.htmlpage. Whenyouwanttolinktoasectionofapageonanothersite,youhavetoincludethe domainname. <ahref=”http://www.cosmicquestions.com/faq.html#whyme“>Getanswerstoyourcosmicquestions</a> Inorderforthistowork,thepageontheothersitehastohaveanelementwiththeid “why-me.” InyourHTMLfilegivetheheadingatthetopofthepageanid.Atthebottomofthe andclickit. SampleHTMLcodeisat: http://asmarterwaytolearn.com/htmlcss/practice-31-1.html. Findtheinteractivecodingexercisesforthischapterat: http://www.ASmarterWayToLearn.com/htmlcss/31.html 32 Openinganewwindow Nooneeverwantstoloseausertoanothersite,butsometimeswehavetolinkaway anyway.Thetacticforencouragingtheusernottoleavepermanentlyistoopenthelinked siteinanewwindow,leavingyoursiteinitsexistingwindow.Thisishowtodoit. Lookitupat<ahref=“http://www.wikipedia.org”target=“_blank” WhentheuserclicksthelinktextWikipediaanewwindowopensforWikipedia. Theoriginalpageremainsopeninitsownwindow. Haveyouseenlinktextthatsaysthingslike“Explainthis”or“Whatisthis”?When youclickoneoftheselinks,asmallwindowopensontopofthemainwindowwithabit ofusefulinformation.Mostofthemainwindowstillshows,sotheuserdoesn’tget disoriented.Sheseesthelittlewindowasanaddendumtothemainwindow. Unfortunately,youcan’tcreateoneoftheselittleinformationalwindowsinHTML.You needJavaScript.MybookASmarterWaytoLearnJavaScriptshowsyouhow,step-bystep.Buthere’ssomecodethatyoucanpasteintoyourpageifyou’dliketocreateasmall windowwithoutknowingJavaScript. <pid=“openWindow”>Tellmealittlemoreaboutthis.</p> <script> document.getElementById(“openWindow”).onclick=openWindow; functionopenWindow(){ varw=window.open(“moreinfo.html”,””,“width=200,height=300,left=300,top=400”); } </script> Adaptthescriptabovetoyourneedsbymakingthesechanges: SubstituteyouranchorforTellmealittlemoreaboutthis. SubstituteyourHTMLfilenameformore-info.html Substituteyourpreferredwidthandheightforwidth=200,height=300.Thenumbers arepixels. Substituteyourpreferredwindowplacementonthescreenforleft=300,top=400.The firstnumbertellsthebrowserhowmanypixelstoinsetthewindowfromtheleftedge ofthescreen.Thesecondnumbertellsthebrowserhowmanypixelstodropthe windowfromthetopofthescreen. Don’taddordeleteanyspacesfromthecode.Thespacingmaylookodd,butifyou trytoimproveitinanyofthewrongplaces,thewindowwon’topen. InyourHTMLfilecodeaparagraphthatincludesalinktoasmarterwaytolearn.com. SampleHTMLcodeisat: http://asmarterwaytolearn.com/htmlcss/practice-32-1.html. Findtheinteractivecodingexercisesforthischapterat: http://www.ASmarterWayToLearn.com/htmlcss/32.html 33 Stylinglinks Bydefaultbrowsersstylelinktextinbluewithanunderline.Butyoucangiveita differentstyle.Youcanspecifyadifferentfont-family,font-size,font-weight,color,and otherfontcharacteristics. Youcanevenlosetheunderlineifyoulike.Butbecareful.Usershavebeen conditionedtoassociatetheunderlinewithlinks.Ifthere’snounderline,they’llhavea hardertimeidentifyingtextassomethingtheycanclick.Conversely,it’sabadideato underlinenon-linkingtextforemphasis.Someuserswilltrytoclickonit.Foremphasis, it’sbettertoputnon-linkingtextinitalicsorbold. ThisCSScodecolorsallyourlinksgoldenrod. a{ color:#b8860b; } Youcanmakelinkschangetheirappearancewhentheuserhoversthemouseover them.Thiscodeboldsthemandremovestheunderlinewhentheuserhovers.(Removing theunderlineonhoverisn’taproblem,becausetheuserhasalreadyidentifieditasalink.) a:hover{ font-weight:bold; text-decoration:none; } Inthecodeabove,text-decoration:noneremovestheunderline. It’snotagoodideatounderlinenonlinkingtextsinceitmayconfusethereaderby signallingthatthetextisclickable,butyoucanunderlinetextifyouchooseto,by specifyingtext-decoration:underline. Youcanchangetheappearanceoflinksatthemomenttheuserclicks.Thiscode increases a:active{ font-size:1.25em; } Youcanchangetheappearanceoflinksthattheuserhasalreadyclicked.Thiscode changestheircolor. a:visited{ color:deeppink; } InyourCSSfilecodelinksgreyandlinksthatarehoveredonorange.Savethefile. SampleCSScodeisat: http://asmarterwaytolearn.com/htmlcss/practice-33-1.html. Findtheinteractivecodingexercisesforthischapterat: http://www.ASmarterWayToLearn.com/htmlcss/33.html 34 Clickableimages Youcansubstituteanimageforalinkanchor(thetextthattheuserclicks).Whenthe userclicksontheimage,itworksthesameasanchortext:anewpageloadsorsomething elsehappens.Todoit,youcombinetwotagsyoualreadyknow,theatagandtheimgtag. LookagainatthelinkcodefromChapter28. <ahref=“http://www.stackoverflow.com”>StackOverflow</a> Whentheuserclicksthewords“StackOverflow”she’stakentostackoverflow.com. Here’ssomecodethatusestheStackOverflowlogoinsteadofananchor. <ahref=“http://www.stackoverflow.com”> <imgsrc=“images/stack-overflowlogo.pngalt=“StackOverflowlogo”width=“85”height=“25”> </a> Whentheuserclickstheimage,she’stakentostackoverflow.com Onewaytocreateaclickablebuttonistomakeanimageofabutton,thenmakethe imageclickable. <ahref=“faq.html”><imgsrc=“images/buttonfaq.pngalt=“ButtonlinkingtoFAQpage”width=“50”height=“18”> </a> Anothergooduseforclickableimagesisaphotogallery.Youarrayoneormore rowsofthumbnailimagesacrossthepage.Whentheuserclicksoneofthem,alarger versionoftheimageloadsinanewwindow.Here’scodethatturnsanarrayofthumbnails intoaclickablecatalog. <ahref=“full-size-robin.html”><imgclass=“flleft”src=“images/thumbnail1.jpg”alt=“Robin”width=“50”height=“50”></a> <ahref=“full-size-blue-jay.html”><imgclass=“flleft”src=“images/thumbnail2.jpg”alt=“BlueJay”width=“50”height=“50”></a> <ahref=“full-size-cardinal.html”><imgclass=“flleft”src=“images/thumbnail3.jpg”alt=“Cardinal”width=“50”height=“50”></a> <ahref=“full-size-sparrow.html”><imgclass=“flleft”src=“images/thumbnail4.jpg”alt=“Sparrow”width=“50”height=“50”></a> <ahref=“full-size-pigeon.html”><imgclass=“flleft”src=“images/thumbnail- Anicewaytodothisistoaddtarget=“_blank”totheatagasIshowedyouin Chapter32,sothepagewiththebigpictureopensinanewwindow.Evennicer:openitin awindowthat’ssmallerthanfull-sizesotheusercanseeaportionoftheoriginalpage underneath,asIshowedyouattheendofChapter32. InyourHTMLfilecreateanimagetagfor http://www.asmarterwaytolearn.com/robo_guy.pngandlinkittoasmarterwaytolearn.com. Savethepageanddisplayit.Clickthepicture. SampleHTMLcodeisat: http://asmarterwaytolearn.com/htmlcss/practice-34-1.html. Findtheinteractivecodingexercisesforthischapterat: http://www.ASmarterWayToLearn.com/htmlcss/34.html 35 Imagemapspart1 Animagemapisspecialtypeofclickableimage.Yourcodesectionsitintotwoor moreparts.Iftheuserclicksonesectionoftheimage,anewpageloads.Ifheclicks anothersection,adifferentpageloads.Forexample,youmighthaveaphotograph showingsixhistoricalbuildingsinatownsquare.Whenyouclickonaparticularbuilding, apageloadsthattellsthestoryofthebuilding. Imagemapsrequirequiteabitofcode,soI’mgoingtodividethesubjectintotwo chapters. Let’ssayyourimageis“6-buildings.jpg.”Youbeginwithastandardimgtag. <imgsrc=“6buildings.jpg”alt=“6historialbuildings”width=“800px”height=“55 Withinthetagyouspecifythenameoftheimagemapthat’sgoingtodivideupthe photointoclickableregions. <imgsrc=“6buildings.jgp”alt=“6historialbuildings”width=“800px”height=“55 Givethemapanynameyoulikeaslongasitdoesn’tincludespaces.Precedethe namewith#. Nextyoucodetheimagemap.It’sasectionofcodethatbeginswithanopeningmap tagandendswithaclosing/maptag. <mapname=“buildings”> [Hereyoudefineeachofthesectionsandgivetheir linkaddresses.I’llcoverthisinthenextchapter.] </map> Noticethatthemapname,“buildings,”isthesamenameyouspecifiedintheimg tag,butwithoutthe#.You’venowtoldthebrowsertodisplaythepictureofthesix buildings,andtoconnectthepicturetoanimagemapnamed“buildings.”Inthenext chapter,we’llcreatethemapitself. Findtheinteractivecodingexercisesforthischapterat: http://www.ASmarterWayToLearn.com/htmlcss/35.html 36 Imagemapspart2 You’veplacedanimageonthepage,andyou’veconnectedittoanimagemapby writing,withintheimgtag,usemap=”#buildings”.Thenyou’vestartedanimage mapdefinitionwiththeline… <mapname=“buildings”> Here’sthewholething. <mapname=“buildings”> <areashape=“rect”alt=“TuttleHouse”coords=“76,42,279,510”href=“ house.html”> <areashape=“rect”alt=“TittleHall”coords=“286,125,346,503”href= hall.html”> <areashape=“rect”alt=“ToobleTower”coords=“352,134,445,482”href tower.html”> <areashape=“rect”alt=“TibbleManse”coords=“448,119,559,471”href manse.html”> <areashape=“rect”alt=“TrebleCottage”coords=“559,211,605,466”hr cottage.html”> <areashape=“rect”alt=“TikkelPlace”coords=“606,180,682,460”href place.html”> </map> Thesearethepartsofeachmapsection. 1. Theshapeofthearea.Write“rect”forrectangle,“circle”forcircle,or“polygon”for polygon. 2. Alternativetextforscreenreaders.YoulearnedaboutthisinChapter2 3. Thescreencoordinatesthatdefinethearea.Seebelowforhowtogetthese coordinates.Examples:Forarectangle,coordinatesof76,42,279,510meanthe clickablerectanglebegins76pixelsinfromtheleftedgeoftheimageand42pixels downfromthetopoftheimage,andextendsrightby279pixelsfromtheleftedgeof theimageand510pixelsdownfromthetopoftheimage.Foracircle,coordinatesof 100,60,10meantheclickablecirclehasacenterat100pixelsinfromtheleftedgeof theimageand60pixelsdownfromthetopoftheimage,andhasaradiusof10 pixels.Forapolygon,coordinatesof150,217,190,257,150,297,110,257createa diamondshape.Thetoppointofthediamondis150pixelsinfromtheleftedgeof theimageand217pixelsdownfromthetopoftheimage.Therightpointofthe diamondis190pixelsinfromtheleftedgeoftheimageand257pixelsdownfrom thetopoftheimage,andsoon.Threesetsofcoordinatescreateatrianglearea,five setsapentagonalarea,andsoon. Ratherthantryingtocreateanimagemapbyhand,automatethetaskwithautility thatdoesmostoftheworkforyou,includingthefussyworkofestablishingcoordinates. WebdevelopmenttoolslikeDreamweaverincludesuchautility.Youcanalsouseafree onlineimagemapcreatorliketheoneathttp://www.image-maps.com.Myfavoritetool forcreatingimagemapsisMapedit,adownloadableprogramfrom http://www.boutell.com.There’sagenerousfreetrialperiod,afterwhichyoupay$15. 1. InyourHTMLfileinsertabreakaftertherobo_guy.pngimage. 2. Createanimagemapusinghttp://www.asmarterwaytolearn/stooges.jpg 3. I’vemappedtheStooges’facesasthreeclickableareas.They’recircles.The coordinatesare56,56,47…126,93,31…and208,66,3 4. DoaGooglesearchforeachoftheStooges.CopytheGoogleURLsthatthesearches generateandusethemasthelinks.Forexample,whentheuserclicksCurly’sface, she’stakentotheGooglesearchforCurly. 5. Savethefileanddisplaythepage.Clickoneachofthefaces. SampleHTMLcodeisat: http://asmarterwaytolearn.com/htmlcss/practice-36-1.html Findtheinteractivecodingexercisesforthischapterat: http://www.ASmarterWayToLearn.com/htmlcss/36.html 37 Bulletlists andnumberedlists TheHTMLtermforabulletlistisunorderedlist.Unorderedmeansnotnumbered. Anorderedlistisanumberedlist.MakingbulletandnumberedlistsinHTMLis convenient,becauseHTMLautomaticallyindentslistsandautomaticallynumbersordered lists. Inbothtypesoflist,youwriteatagforthelist—<ul>forunorderedlistsand<ol> fororderedlists.Thenyouwriteatagforeachitem—<li>,whichstandsforlistitem. <li>isthetagforindividualitemsineithertypeoflist,orderedorunordered. Thiscodecreatesabullet(unordered)list. <ul> <li>Sun</li> <li>Moon</li> <li>Planets</li> <li>Stars</li> </ul> Thiscodecreatesanumbered(ordered)list. <ol> <li>Wash</li> <li>Rinse</li> <li>Repeat</li> </ol> Thingstonotice: Eachlistitemisindentedtwospaces. Eachopeningtagiscompletedwithaclosingtag. SampleHTMLcodeisat: http://asmarterwaytolearn.com/htmlcss/practice-37-1.html. Findtheinteractivecodingexercisesforthischapterat: http://www.ASmarterWayToLearn.com/htmlcss/37.html 38 Stlyinglists Sincelistsaretextelements,youcanstylethemthewayyou’dstyleaparagraphor heading,withacustomizedfont-family,font-size,font-weight,color,andmargins. ThisCSScodeinsetsanyunorderedlist,assigningextrawhitespaceonboththeleft andright. ul{ margin:01.5em01.5em; } Youcould,ofcourse,adjustthetopand/orbottommargins,too.Usethesametype ofcodefororderedlists.Justsubstituteolforulinthecodeabove. Thecodeabovestylesalltheunorderedlistsonthepage.Youcouldcreateaclassof lists,justforsomeofyourlists. ol.special{ margin:01.5em01.5em; } Bydefault,browsersdon’taddanyspacebetweenlistitems.Ithinktheylookbetter ifthey’reseparatedabit. li{ margin:.75em; } Notethatthere’sonlyonemarginnumberinthecodeabove.Browsersunderstand thatitspecifiesthespacebetweenlistitems. Thedefaultisabulletontheoutsidewithalllinesoftextindented.Tomakethe defaultexplicit,write… ul{ list-style-position:outside; } Toindentonlythefirstlineoftextandmakeallotherlinesflushwiththebullet, write… ul{ list-style-position:inside; } InyourCSSfileaddspacebetweenlistitems.Savethefile.Displaythepage. http://asmarterwaytolearn.com/htmlcss/practice-38-1.html. Findtheinteractivecodingexercisesforthischapterat: http://www.ASmarterWayToLearn.com/htmlcss/38.html 39 Stylingalists’smarkers Markersarethebulletsinanunorderedlistorthenumbersinanorderedlist. Ifyoudon’tspecifywhatkindofbulletsyouwantinanunorderedlist,thebrowser displaysadisc:• ThisistheCSScodethatexplicitlyspecifiesadiscasthemarker.Itwouldnormally besuperfluous,sincethediscisthedefault. ul{ list-style-type:disc; } Tousea○forthebullet,substitutecirclefordiscinthecodeabove. Tousea■substitutesquare. Youcanuseanimageforabullet.Theexamplebelowcreatesaclassofunordered listthatusesanimage. ul.custom{ list-style-image:url(“images/heart.png”); } Inthecodeabove,“images/heart.png”tellsthebrowserthepathandfile nameoftheimage. Animageusedasabulletcreatesheadaches.Tobeginwith,youmustsizetheimage tofitthelisttext.Then,iftheuserzoomsinoroutonthepage,thebrowserdoesn’tadjust thebullettofit,asitdoeswiththebuilt-indisc,circle,andsquare.Everythinggetsoutof whack.It’spossibletobuildadefenseagainstthis,butyou’reprobablybetteroffspending yourcodingtimeonsomethingthattheusercaresmoreabout. Thedefaultlist-style-typefororderedlistsisdecimal—1,2,3etc.Youcanchange ittodecimal-leading-zero—01,02,03etc.;lower-alpha—a,b,cetc.; upper-alpha—A,B,Cetc.;lower-roman—i.,ii.,iii.etc.;andupper-roman—I, II,IIIetc.Here’scodethatcreatesaclassforupper-roman. ol.second-level{ list-style-type:upper-roman; } InyourCSSfilestyleunorderedlistmarkersassquares.Savethefile.Displaythe page. SampleCSScodeisat: http://asmarterwaytolearn.com/htmlcss/practice-39-1.html. http://www.ASmarterWayToLearn.com/htmlcss/39.html 40 MoreCSSselectors ACSSselectoriseverythingonthefirstlinethatprecedesthe{.It’sthepartofa stylerulethattellsthebrowserwhatelements,classes,andidsaruleappliesto.The selectorsarehighlightedinthefollowingcodefragments. p{ p.special{ .special{ p#intro{ #intro{ Sofaryou’velearnedtocreate… 1. Anelementselectorlikep,div,orimg. 2. Anelementclassselectorlikep.special,div.important,orimg.gallery. 3. Aclassselectortiedtonoparticulartypeofelementlike.special,.important, or.gallery. 4. Anelementidselectorlikep#intro,div#sidebar,orimg#logo. 5. Anidselectortiedtonoparticulartypeofelementlike#intro,#sidebar,or #logo. Youcancombineselectorstocreatemorecomplicatedselectors.Here’sone. div.importantp{ Thecodeaboveselectsallparagraphsinadivthat’sbeenassignedtheclass “important.” Thefollowingcodeselectsallimages…thatareinlistitems…inanunorderedlist… withtheid“pix-list.” ul#pixListliimg{ Here’ssomecodethatselectsthefirstparagraphfollowinganydiv. div+p{ Thefollowingcodeselectsonlythefirstlevelofdivswithinthedivthathasanid of“main.” div#content>div{ Sointhefollowingcode,onlythehighlighteddivsareselected. <divid=“main”> <div> [somecontent] </div> [somecontent] <div> [somecontent] </div> </div> <div> [somecontent] <div> [somecontent] </div> </div> YoucanlearnalotaboutselectorsbyplayingaroundwiththeinteractiveW3Schools CSSselectortesterathttp://www.w3schools.com/CSSref/trysel.asp. InyourHTMLfileyoucodedadivwithanid.InyourCSSfiledoublethesizeof allparagraphswithinthatdiv.Savethefile.Displaythepage. SampleCSScodeisat: http://asmarterwaytolearn.com/htmlcss/practice-40-1.html. Findtheinteractivecodingexercisesforthischapterat: http://www.ASmarterWayToLearn.com/htmlcss/40.html 41 Tables:basicstructure AlltheHTMLcodeforatableisenclosedinanopeningandclosingtag. <table> [Thedetailsofthetablegohere.] </table> Withinthosetagsyoucreaterowsandcolumns.Here’satablewithtworowsand twocolumns. <table> <tr> <td>Row1,column1</td> <td>Row1,column2</td> </tr> <tr> <td>Row2,column1</td> <td>Row2,column2</td> </tr> </table> Thisiswhatthetablelookslike(withaborderthatIaddedtomaketherowsand columnsstandout). Unlessyoustyleaborderexplicitly,mostbrowsersdisplayitwithoutborders,like this. You’lllearnhowtoaddborders,ifyouwantthem,inalaterchapter,andtostyle tablessothey’remoreattractive.Fornow,let’sgetyoufamiliarwiththisbarebones structure. AsyoucanseefromtheHTMLcode,youbuildatablearowatatime.Youcreatea rowusingthe<tr>(for“tablerow”)tag.Thenyoucreateallthecellswithinthatrow usingthe<td>(for“tabledata”)tag. Allthetextcontentofatablecellisenclosedbetweentheopeningtagandthe closing<td>tag.Theopening<tr>tagandclosing</tr>tagdon’tencloseanytext content.Theyonlycontainthe<td>tagsandtheirtextcontent. Allopeningtagsarepairedwithclosingtags. Eachrowmusthavethesamenumberofcells,createdwiththe<td>and</td> tags,evenifsomeofthecellsareempty.Tocreatethistable,withnothinginrow2, column1… …you’dwrite… <table> <tr> <td>Apples</td> <td>Oranges</td> </tr> <tr> <td></td> <td>Pears</td> </tr> Noticethatallthe<tr>tagsareindentedtwospacesinsidethe<table>tag,and the<td>tagsareindentedtwospacesinsidethe<tr>tags. InyourHTMLfilecodeatablewithtworowsandtwocolumns.Savethefile. Displaythepage. SampleHTMLcodeisat: http://asmarterwaytolearn.com/htmlcss/practice-41-1.html. Findtheinteractivecodingexercisesforthischapterat: http://www.ASmarterWayToLearn.com/htmlcss/41.html 42 Tables:headings Youcantellthebrowsertoaddheadingsfortables.Here’satablewithcolumn headings. Thisisthecode. <table> <tr> <thscope=“col”>Dog</th> <thscope=“col”>Cat</th> </tr> <tr> <td>Canine</td> <td>Feline</td> </tr> <tr> <td>Bark</td> <td>Meow</td> </tr> <td>Puppy</td> <td>Kitten</td> </tr> </table> Youbeginbycreatingarowfortheheadings,justasyouwouldforregularcells. Then,usingtheopening<th>(for“tableheading”)andclosing</th>tags,you constructcellswithtextinthem,asyouwouldforregulartextcells.Butnote scope=“col”.Thistellsthebrowserthatyouwantcolumnheadings—headingsontop —notrowheadings,whichwouldbegineachrowontheleft.Bydefault,mostbrowsers boldheadingtextandcenterithorizontallywiththecell.Nowlet’screateatablewithrow headings,likethisone. Thisisthecode. <table> <tr> <thscope=“row”>Species</th> <td>Canine</td> <td>Feline</td> </tr> <tr> <thscope=“row”>Sound</th> <td>Bark</td> <td>Meow</td> </tr> <tr> <thscope=“row”>Immature</th> <td>Puppy</td> <td>Kitten</td> </table> Youcreateaheadingforeachrow.Andyouwritescope=“row”.Here’sthetable withbothcolumnandrowheadings. Thisisthecode. <table> <tr> <thscope=“col”></th> <thscope=“col”>Dog</th> <thscope=“col”>Cat</th> </tr> <tr> <thscope=“row”>Species</th> <td>Canine</td> <td>Feline</td> </tr> <tr> <thscope=“row”>Sound</th> <td>Bark</td> <td>Meow</td> </tr> <tr> <td>Puppy</td> <td>Kitten</td> </tr> </table> Noticethattherearethreecolumnheadings,thefirstoneblank.Thistellsthe browserthatthereisnocolumnheadingoverthecolumnofrowheadings. InyourHTMLfilecodeatablewithbothcolumnandrowheadings.Savethefile. Displaythepage. SampleHTMLcodeisat: http://asmarterwaytolearn.com/htmlcss/practice-42-1.html. Findtheinteractivecodingexercisesforthischapterat: http://www.ASmarterWayToLearn.com/htmlcss/42.html 43 Tables: spanningcolumnsandrows Sometimesyouneedtocombinetwoormorecellsintoasingle,extra-widecell. Thetableaboveshowstheearly-afternoonscheduleforthreefacilities.I’veadded borders,andI’vehighlightedthetwospannedrowsthatIwantyoutopayattentionto. Neitherthebordersnorthehighlightingarepartofthecodebelow.You’lllearnhowto addbothkindsofstylinginsubsequentchapters.Thisisthecode. <table> <tr> <thscope=“col”></th> <thscope=“col”>1pm</th> <thscope=“col”>2pm</th> <thscope=“col”>3pm</th> </tr> <tr> <thscope=“row”>Gym</th> <td>Dodgeball</td> <td>Kickboxing</td> <td>Sackracing</td> </tr> <tr> <thscope=“row”>Exerciseroom</th> <td>Spinning</td> <tr> <thscope=“row”>Pool</th> <tdcolspan=“3”>Waterpolo</td> </tr> </table> Thecodeforacolumn-spancelllookslikearegular<td>cell,exceptforthecode colspan=”[numberofcolumnstospan]”.Theclosingtagisthesameasfor aregular<td>cell.Noticethata<td>withthecolspanfeaturereplacesthesame numberofregular<td>sasthenumberofcolumnsthatarespanned.Inthefirstrow, therearethreeregular<td>s.Inthesecondrow,wheretwocolumnsarespanned,there’s oneregular<td>plusthespan.Inthethirdrow,wherethreecolumnsarespanned,there’s noregular<td>.Youcanmaketableheadingsspancolumns,too.Thecodeis… <thscope=“row”colspan=”[numberofcolumnstospan]”>Whatever</t Spanningrowsworksthesamewayasspanningcolumns,butusesrowspan. Here’sthetableabove,reconfiguredsothefacilitiesareatthetopandthetimesareonthe left. Thisisthecode. <table> <tr> <thscope=“col”></th> <thscope=“col”>Gym</th> <thscope=“col”>ExerciseRoom</th> <thscope=“col”>Pool</th> </tr> <tr> <thscope=“row”>1pm</th> <td>Dodgeball</td> <td>Spinning</td> </tr> <tr> <thscope=“row”>2pm</th> <td>Spinning</td> <tdrowspan=“2”>Yogamarathon</td> <tr> <thscope=“row”>3pm</th> <tdrowspan=“3”>Sackracing</td> </tr> </table> Youcanmaketableheadingsspanrows,too.Thecodeis… <thscope=“column”rowspan=”[numberofrowstospan]”>Whatever</th> Youcandivideatableintothreesections:aheader,body,andfooter.Thishelps screenreaders,butdoesn’tdoanythingforsightedusersthatyoucan’tdousingthecode I’vealreadytaughtyou.I’llshowyouanexample.Youwon’tbetestedonitinthe exercises. Thisisthecode. <table> <thead> <tr> <th></th> <th>Gym</th> <th>ExerciseRoom</th> <th>Pool</th> </thead> <tfoot> <tr> <th></th> <th>3activities</th> <th>2activities</th> <th>1activity</th> </tr> </tfoot> <tbody> <tr> <thscope=“row”>1pm</th> <td>Dodgeball</td> <td>Spinning</td> <tdrowspan=“3”>Waterpolo</td> </tr> <tr> <thscope=“row”>2pm</th> <td>Spinning</td> <tdrowspan=“2”>Yogamarathon</td> <tr> <thscope=“row”>3pm</th> <tdrowspan=“3”>Sackracing</td> </tr> </tbody> </table> Codeasimpletablewithtworowsandtwocolumns.Inthesecondrow,spanthe columns. SampleHTMLcodeisat: http://asmarterwaytolearn.com/htmlcss/practice-43-1.html. Findtheinteractivecodingexercisesforthischapterat: http://www.ASmarterWayToLearn.com/htmlcss/43.html 44 Tables:borders Youcancreateatablewithbordersorwithout.Here’satablewhereallthecellshave borders. ThisistheCSScode. th,td{ border:1pxsolidblack; } Byspecifying1pxsolidblackI’maskingforasolidblacklineofminimal— 1-pixel—width.Foraheavierline,increasethepixelnumber.Foranothertypeofline, specifydottedoroneoftheotherborderstylescoveredinChapter17. Bydefault,browsersaddalittlespacebetweencells,asinthetableshownabove. Thiscreatesgapsbetweenthehairlineborders.Ifyoudon’twantthosegaps,adda specificationforthetable: table{ border-collapse:collapse; } Thisistheresult. Bydefault,browsersdon’tdrawaborderaroundanything.Ifyoudon’twant borders,there’snothingtocode.ButwithCSSyoucanaddbordersanywhereyoulike. Forexample,here’satablewithtopandbottombordersframingthetableheaders. Here’stheCSScode. th.top-row{ border-top:1pxsolidblack; border-bottom:1pxsolidblack; } ThefirstsevenlinesofHTMLwouldbe… <table> <tr> <thclass=“top-row”scope=“col”></th> <thclass=“top-row”scope=“col”>Gym</th> <thclass=“top-row”scope=“col”>ExerciseRoom</th> <thclass=“top-row”scope=“col”>Pool</th> [etc.] TheonlyreasonIhavetodefineaspecialclassof<th>isthatI’vealsogot<th>s runningdowntheleftsideofthetable,denotingtimes.SinceIdon’twantborderson these,Ineedtomakeadistinctionfor<th>sthathavecolumnscope.Otherwise,Icould justwrite… th{ border-top:1pxsolidblack; border-bottom:1pxsolidblack; } Tocreateleftandrightbordersuseborder-leftandborder-right.For example,supposeyouwantheavyorangebordersdefiningtheleftandrightedgesof certaintables. Thisisthecode. table.standout{ border-left:5pxsolidorange; border-right:5pxsolidorange; } ThefirstlineofHTMLwouldbe… <tableclass=“standout”> InyourCSSfilespecifybordersforallcells.Eliminatespacebetweenborders.Save thefile.Displaythepage.SampleCSScodeisat: http://asmarterwaytolearn.com/htmlcss/practice-44-1.html.Findtheinteractivecoding exercisesforthischapterat:http://www.ASmarterWayToLearn.com/htmlcss/44.html 45 Tables: Spacingpart1 Bydefault,browsersdon’taddbreathingroombetweenthetablecellbordersandthe texttheycontain.They’rejammedupagainsteachother.Itlookscrowded. Thesolutionistoaddpadding. th,td{ padding:.25em; } TheCSScodeaboveaddsalittlewhitespaceallaroundthetext. Youincreaseordecreasetheamountofpaddingbychangingtheemnumber.You canalsospecifydifferentpaddingfordifferentsides. td{ padding:.25em1.5em01.5em; } TheCSScodeaboveaddsextrapaddingatthetop,justalittleonthesides,andnone specifynone,write0,not0em. Supposeyouwantcellsspacedapart—say,evenfartherapartthanthebrowser default.Here’stheCSScode.I’mgoingtospecifylargespaces,sothey’reeasytosee. table{ border-spacing:1em; } Thisistheresult. Notethatborder-spacingissomethingyouspecifyforthewholetable,notthe<th> table{ border-spacing:0.25em0.25em; } TheaboveCSScodewouldaddextraspaceontheleftandrightandleavetopand bottomspaceatthedefaultwidth. Evenifatabledoesn’thaveborders,youcanuseborder-spacingtoaddwhitespace betweenthecells.Here’sthesametable,withnoborderspecifiedbutwiththeall-around border-spacingof2.5em. InyourCSSfileadd.25emofpaddingtoallcells.Savethefile.Displaythepage. SampleCSScodeisat: http://asmarterwaytolearn.com/htmlcss/practice-45-1.html. http://www.ASmarterWayToLearn.com/htmlcss/45.html 46 Tables: spacingpart2 Bydefault,browsersadjustcellsizetocontents.Ifyouwrite… <table> <tr> <th>Monday</th> <th>Tuesday</th> <th>Wednesday</th> <th>Thursday</th> <th>Friday</th> </tr> <tr> <td>Rome</td> <td>AddisAbaba</td> <td>Cairo</td> <td>SaintSeaburyontheThames</td> <td>Dublin</td> </tr> </table> …thebrowserdisplaysthis…(I’vestyleditwithaborderandpaddingandcollapsed thespacesbetweencells.) Thebrowserhasusedspaceefficiently,assigningjustenoughwidthtofiteverything in.Ithinkthislooksbetter: they’dallbe20%ofthewidthofthefulltable.Inotherwords,they’dallbethesame width. th,td{ border:1pxsolidblack; padding:5px; width:20%; } WhenIspecifycellwidthinsteadoflettingthebrowserallocatespacebasedon content,Iforcethebrowsertoautomaticallywraplongertextlinessotheyfitintomy chosenwidth. Icould,ifIwantedto,definesomeCSSclassesoridstomakedifferentcells differentwidths. Nextpoint:I’mnotsureIwantthetabletobesobig.SoI’llforcethebrowserto givemeanarrowertablebyspecifyingitswidthaslessthan100%.I’lltellittomakeit three-quartersthewidthofthewindowordivthatitsitsin. table{ width:75%; } Thisistheresult. Noticethatthebrowserautomaticallywrapslongerlinesintomultiplelinestofit themintothewidth. 1. InyourHTMLfilecodeasimpletablewithtworowsandtwocolumns.Giveitanid. 2. InyourCSSfilereducethetable’swidthtoafractionofthewindow’swidth. 3. Makethetworowsequal. SampleHTMLcodeisat: http://asmarterwaytolearn.com/htmlcss/practice-46-1.html. http://asmarterwaytolearn.com/htmlcss/practice-46-2.html. Findtheinteractivecodingexercisesforthischapterat: http://www.ASmarterWayToLearn.com/htmlcss/46.html 47 Tables:aligningtext InChapter14youlearnedtoaligntextonthepageusing… text-align:left; text-align:right; text-align:center; text-align:justify; Youcanusethissamecodetoaligntextintablecells.Forexample,youcanwrite… table{ text-align:left } Thetextinallcells,including<th>cells,willbepositionedontheleftofthecell. (Thetextin<td>cellswouldhavebeenpositionedontheleftanyway,bydefault.)You canbemoresurgicalbystyling,say,just<th>or<td>cells.Forexample,youknow thatbydefault,browserssettextin<td>cellsontheleft.Ifyou’dprefertocenterthe text,youcouldwrite… td{ text-align:center; } Ifyouhaveacolumnofnumbers,youmightwanttosetthemtotheright.You’d createaclassof<td>todothat. td.num{ text-align:right; } Youcanalsocontroltheverticalalignmentwithincells,using… vertical-align:bottom; vertical-align:center; Youcan’tspecifyverticalalignmentforthewholetable,onlyfor<th>and<td> elements.Youcan,ofcourse,createclassesof<th>and<td>elementsthathavetheir ownalignment.Bydefault,textisverticallycenteredinboth<th>and<td>cells.Ifyou wanted<th>textmovedtothebottomofthecell,youcouldwrite. th{ vertical-align:bottom; } Thiscodewouldmovethetexttothetop… th{ vertical-align:top; } InyourCSSfilecentertextinthecellsofthemostrecenttable,theonewiththeid. Savethefile.Displaythepage. SampleCSScodeisat: http://asmarterwaytolearn.com/htmlcss/practice-47-1.html. Findtheinteractivecodingexercisesforthischapterat: http://www.ASmarterWayToLearn.com/htmlcss/47.html 48 Tables:backgroundcolor Youcanusecodeyoulearnedinearlierchapterstostylethetextforanentiretable, for<th>and<td>elements,andforclassesandidsofanyoftheseelements.For example: th,td{ font-family:Georgia,“TimesNewRoman”,Times,serif; font-size:1.5em; font-weight:900; color:gray; letter-spacing:.1em; } Thiswhatthetablewouldlooklike. Acharacteristicthatcanbeespeciallyusefulintablesisbackground-color.For exampleyoucanuseittoshadealternativerowstomakereadingaroweasier. Startbydefiningaclassof<tr>andspecifying,let’ssay,lightgrayasthe background-color. tr.even-row{ background-color:lightgray; } You’dwritetheHTMLlikethis. <table> <tr> <thscope=“col”>Price</th> <thscope=“col”>Shipping</th> <thscope=“col”>Tax</th> <thscope=“col”>Total</th> </tr> <tr> <td>Swisher</td> <td>76.75</td> <td>6.50</td> <td>.83</td> <td>83.93</td> </tr> <trclass=“even-row”> <td>Stirrer</td> <td>106.60</td> <td>8.00</td> <td>1.33</td> <td>115.93</td> </tr> <tr> <td>Shaker</td> <td>31.50</td> <td>2.90</td> <td>.33</td> <td>34.37</td> </tr> <trclass=“even-row”> <td>Swirler</td> <td>220.00</td> <td>14.00</td> <td>2.60</td> <td>236.60</td> </tr> <tr> <td>Splasher</td> <td>89.00</td> <td>6.50</td> <td>.91</td> <td>96.41</td> </tr> </table> WithsomeadditionalstylingI’mnotshowingyouhere,thetablewouldlooklike this. 1. InyourHTMLfilerevisethemostrecenttable,theonewithanid.Assignaclassto thesecondrow.Savethefile. 2. InyourCSSfilecodealightbackgroundcolorforthatclass.Savethefile. 3. Displaythepage. SampleHTMLcodeisat: http://asmarterwaytolearn.com/htmlcss/practice-48-1.html. SampleCSScodeisat: http://asmarterwaytolearn.com/htmlcss/practice-48-2.html. Findtheinteractivecodingexercisesforthischapterat: http://www.ASmarterWayToLearn.com/htmlcss/48.html 49 Forms:theformtag It’sararewebsitethatdoesn’tusesomeforms.Ataminimum,you’reprobably goingtowanttoincludeanemailformonyoursitetomakeiteasyforuserstocontact you.Everyformbeginsandendswithanopening<form>andclosing</form>tag. <formaction=“send-email.php”method=“post”> [Here’swherethecontentsoftheform,likeinput fieldsandasubmitbutton,arecoded.We’llstart workingontheseinthenextchapter.] </form> Inmostcases,whenausercompletesaform,aprogramseparatefromtheHTML fileruns.Intheexampleabove,action=“send-email.php”tellsthebrowserthat whentheusersubmitstheform,theinformationtheuserhasenteredintheformistobe senttoaPHPprogramonthewebsiteforprocessing.Theprogram’sURLis“sendemail.php.”It’saprogramthatrunsonthehost’sserver.ThisisdifferentfromanHTML file.AnHTMLfileisstoredonthehost’sserverbutrunsintheuser’sbrowser. Inthecaseoftheexample,send-email.phpmightsendanemailtothesite ownerthatincludesthedatatheuserhasentered.Oraprogrammightwritethedata enteredbytheusertoadatabaseontheserver.Oraprogrammightprocesscreditcard informationenteredinaform. Thereareallkindsofprograms,writteninvariouslanguages,thatcanprocessdata fromaform.ThelanguagesincludePHP,Ruby,Python,Perl,Java,andC#.The processingprogramswrittenintheselanguagesareoutsidethescopeofthisbook,soyou won’tlearnanythingaboutprocessingformshere,otherthanlearninghowtospecifythe formactioninHTMLtags. Butdon’tbediscouragedifyoudon’tknowanyoftheselanguages.Atsiteslike http://www.hotscripts.com/you’llfindthousandsofprograms,bothfreeandforsale,that processformsforeverypurpose.Youdon’tneedtoknowacomputerlanguagetouse thesescripts.Thepeoplewhowritethemtellyouhowtochangeafewlinesofthecodeto adaptthemsothey’llworkonyoursite.Makeafewsimplechanges,thenuploadthecode toyoursite,andyou’reinbusiness. Theexampleabovespecifiesmethod=“post”.Thismethodistheoneyouuseto processmorethanalittlebitofinformation,andwhenyouwanttokeeptheinformation secure.Thesecondmethod,get,isusedmostlyforsearchforms.Youknowaformis usingthegetmethodwhentheinformationenteredintheform(connectedbyplussigns) appearsintheURLafteryouclickSubmit.Here’stheURLthatdisplayedwhenIsearched http://www.newyorker.com/search? qt=dismax&sort=score+desc&query=alice+munro&submit= Ifyoudon’tspecifyamethod,thegetmethodisused.Sincethisunsecuremethod isn’tappropriateformostpurposes,you’llusuallywanttospecifythepostmethod. Findtheinteractivecodingexercisesforthischapterat: http://www.ASmarterWayToLearn.com/htmlcss/49.html 50 Forms:textinput Here’saformthat’slimitedtoonesingle-linetextfield.It’suseless,becauseit doesn’tincludeaSubmitbutton.We’lladdthatlater. ThisistheHTML. <formaction=“send-email.php”method=“post”> Lastname: <inputtype=“text”name=“surname”size=“25”maxlength=“40 </form> Itbeginswithsomeplaintext,Lastname:Itdoesn’thavetobeplacedtotheleft ofthefield.Itcouldbeabove,totheright,orevenbelowthefield. Theinputtaghasfourparts: 1. type=“text”.Thistellsthebrowsertodisplayasingle-lineboxinwhichtheuser canentertext. 2. name=“surname”.Thenamecanbealmostanythingyoulike,butdon’tuse spacesinit.Thenametellstheprogramthat’sprocessingthedatawhattocallthe informationthattheuserentersinthatfield. 3. size=“25”.Thistellsthebrowserhowwidetomakethebox.Whenyouwrite size=“25”you’retellingthebrowsertomaketheboxroughly25characterswide. Iftheusertypesmorethan25characters,thelinewillscrollhorizontally.Specifying thesizeisoptional.Ifyoudon’tspecifyit,thebrowserwillmakeatextbox20 characterswidebydefault. 4. maxlength=“40”.Thistellsthebrowsertoputalimitonthenumberofcharacters thatcanbetypedintothisfield.Ifthere’sscrolling,thescrollingwillstopatthis limit.Specifyingthemaximumlengthisoptional.Ifyoudon’tspecifyit,theboxwill acceptanynumberofcharactersandwillscrollasfarasitneedstoinorderto accommodateallthecharacters. Apasswordfieldislikeatextinputfield,exceptthatthecharactersthattheuser entersaredisguisedasasterisksorcirclesinthefield.Youcodeapasswordfieldthesame wayyoucodeatextinputfield,exceptthatyoureplacetheworld“text”withtheword “password”. Alloftheindividualpartsofaform—theone-linetextboxthatyoujustlearnedto createandalltherestthatyou’reabouttolearn—arecalledcontrols. Codeaformwithasingletextinput.Don’tbotherwiththeactionormethod.Specify name,size,andmaxlength.Savethefile.Displaythepage. SampleHTMLcodeisat: http://asmarterwaytolearn.com/htmlcss/practice-50-1.html. Findtheinteractivecodingexercisesforthischapterat: http://www.ASmarterWayToLearn.com/htmlcss/50.html 51 Forms:textarea Inthelastchapteryoulearnedhowtocodeaone-linetextboxusinginput type=“text”.Here’sasecondtypeofcontrol,amulti-linetextbox.(Inthisexample formIhaven’tincludedafirst-namefield.Thisexampleformisonlyforlearning,sowe’ll limitittojustonecontrolofeachtype.) ThisistheHTML. <formaction=“send-email.php”method=“post”> Lastname: <br> <inputtype=“text”name=“surname”size=“25”maxlength=“40”> <br><br> Message: <br> <textareaname=“message”rows=“4”cols=“30”></textarea> </form> Notice,first,thatthistagisclosed,with</textarea>. rows=“8”cols=“30”specifiesthenumberofvisiblerowsandcolumns.By default,thefieldcanberesizedbytheuserwhenshedragsthelower-rightcornerwiththe mouse. InyourHTMLfileaddatextareatotheformyou’vealreadycoded.Specifyrows andcolumns.Savethefile.Displaythepage. SampleHTMLcodeisat: http://asmarterwaytolearn.com/htmlcss/practice-51-1.html. Findtheinteractivecodingexercisesforthischapterat: http://www.ASmarterWayToLearn.com/htmlcss/51.html 52 Forms:submit Let’saddasubmitbuttontotheform.Whentheuserclicksit,theformissubmitted. Thatis,allthedataissenttotheprogram(PHPoranotherlanguage)thatprocessesit. Thisisthecode. <formaction=“send-email.php”method=“post”> Lastname: <br> <inputtype=“text”name=“surname”size=“25”maxlength=“40”> <br><br> Message: <br> <textareaname=“message”rows=“4”cols=“30”></textarea> <inputtype=“submit”value=“Sendemailmessage”> </form> Thisisasimpleinputtag,withonlytwoparts.Thefirstpartcreatesthebuttonthat, whenclicked,submitstheform: inputtype=“submit” Thesecondpartspecifiesthebuttontext.Insteadof“Sendemailmessage,”itcould be“Submit,”“Send,”“Subscribe,”“Purchase,”oranyothertextyouwant… value=“Sendemailmessage” Thesubmittagcreatesastandardbutton.Ifyouwantacustombutton,createyour ownbuttonimageandwriteataglikethis. <inputtype=“image”src=“images/subscribebutton.png”alt=“Signup”width=“72”height=“18”> ThebrowserknowsthisisaSubmitbuttoneventhoughyousaytheinputtypeis “image”.Everythingyouwriteafter<inputtype=“image”isexactlythesameas theimgtagyoulearnedtowriteinChapter24. InyourHTMLfileaddaSubmitbuttontotheformyou’vealreadycreated.Save thefile.Displaythepage.SampleHTMLcodeisat: http://asmarterwaytolearn.com/htmlcss/practice-52-1.html. Findtheinteractivecodingexercisesforthischapterat: http://www.ASmarterWayToLearn.com/htmlcss/52.html 53 Forms:radiobuttons Nowwe’lladdradiobuttonstotheform.Radiobuttonsallowtheusertomakeone andonlyoneselection.We’llasktheusertotellushowshefoundoursite. <formaction=“send-email.php”method=“post”> Lastname: <br> <inputtype=“text”name=“surname”size=“25”maxlength=“40”> <br><br> Howdidyoufindus?<br> <inputtype=“radio”name=“foundthru”value=“Google”checked=“checked”>Google <inputtype=“radio”name=“foundthru”value=“Review”>Review <inputtype=“radio”name=“foundthru”value=“Friend”>Friend <br><br> Message: <br> <textareaname=“message”rows=“4”cols=“30”></textarea> <br><br> <inputtype=“submit”value=“Sendemailmessage”> </form> Noticethateachradiobuttonhasitsownseparateinputtag.Whatbindsallthe radiobuttonsinagrouptogetheristhatthey’reallgiventhesamename.Intheexample, I’vegivenitthename“found-thru.” Itbeginsasotherinputtagsdo,butspecifies“radio”insteadof“text,”“submit,” oranotherinputtype… inputtype=“radio” Thename,sharedbyalltheradiobuttonsinaparticularradiobuttongroup,bindsall thebuttonswithinthegrouptogether.Youmakeupthename… name=“found-thru” Thevalueisthewordorwordssenttotheprocessingprogramtellingtheprogram whichbuttonhasbeenchecked. value=“Google” Thenextpartisoptional.Whenyouincludeitinatag,itmeansthebuttonis checkedbydefault.Sinceonlyonebuttoninagroupcanbechecked,youwouldinclude thisinonlyonebuttontagwithinagroup.Ifyouomitit,nobuttonischeckedbydefault. checked=“checked” Finally,there’sthetextthattheusersees.Itwouldnormallybethesamewordor wordsthatyouspecifyforvalue. Google InyourHTMLfileaddtworadiobuttonstotheformyou’vealreadycoded.Savethe SampleHTMLcodeisat: http://asmarterwaytolearn.com/htmlcss/practice-53-1.html. Findtheinteractivecodingexercisesforthischapterat: http://www.ASmarterWayToLearn.com/htmlcss/53.html 54 Forms:checkboxes Checkboxesworklikeradiobuttons,exceptthattheusercancheckmorethanone. Let’saddcheckboxesthatallowtheusertogiveussomefeedback. Thisisthecode. <formaction=“send-email.php”method=“post”> Lastname: <br> <inputtype=“text”name=“surname”size=“25”maxlength=“40”> <br><br> Howdidyoufindus?<br> <inputtype=“radio”name=“foundthru”value=“Google”checked=“checked”>Google <inputtype=“radio”name=“foundthru”value=“Review”>Review <inputtype=“radio”name=“foundthru”value=“Friend”>Friend <br><br> Howwouldyoudescribeoursite?<br> <inputtype=“checkbox”name=“feedback”value=“Wonderful”checked= <inputtype=“checkbox”name=“feedback”value=“Fabulous”>Fabulous <inputtype=“checkbox”name=“feedback”value=“Brilliant”>Brillia <br><br> Message: <br> <textareaname=“message”rows=“4”cols=“30”></textarea> <br><br> <inputtype=“submit”value=“Sendemailmessage”> </form> Again,aswithradiobuttons,eachcheckboxhasitsownseparateinputtag.And again,whatbindsallthecheckboxesinagrouptogetheristhatthey’reallgiventhesame name.Intheexample,thenameis“feedback.” You’refamiliarwiththebeginningpartbynow. inputtype=“checkbox” Thename,sharedbyallthecheckboxesinaparticularcheckboxgroup,bindsallthe checkboxeswithinthegrouptogether.Youmakeupthename. name=“feedback” Thevalueisthewordorwordssenttotheprocessingprogramtellingtheprogram thatthisboxhasbeenchecked. value=“Wonderful” Thenextpartisoptional.Whenyouincludeitinatag,itmeanstheboxischecked bydefault.Youcanusethisspecificationtopre-checkasmanyboxesasyoulike.Ifyou omititfromallcheckboxtags,noboxispre-checked. checked=“checked” Finally,there’sthetextthattheusersees.Itwouldnormallybethesamewordor Wonderful InyourHTMLfileaddtwocheckboxestotheformyou’vealreadycoded.Savethe file.Displaythepage.SampleHTMLcodeisat: http://asmarterwaytolearn.com/htmlcss/practice-54-1.html. Findtheinteractivecodingexercisesforthischapterat: http://www.ASmarterWayToLearn.com/htmlcss/54.html 55 Forms:selectbox Thestandardwaytoasktheusertotellyouthestatehelivesinistheselectbox.A selectboxworkswellwhenyouwanttheusertoselectfromalistthat’stoolongtobe handledgracefullybyradiobuttons.Likeradiobuttons,onlyoneselectioncanbemadein aselectbox.Let’saddoneforastateselection.I’lljustdothreestatestoshowyouhowit works. Thisisthecode. <formaction=“send-email.php”method=“post”> Lastname: <br> <inputtype=“text”name=“surname”size=“25”maxlength=“40”> <br><br> Howdidyoufindus?<br> <inputtype=“radio”name=“foundthru”value=“Google”checked=“checked”>Google <inputtype=“radio”name=“foundthru”value=“Review”>Review <inputtype=“radio”name=“foundthru”value=“Friend”>Friend <br><br> Howwouldyoudescribeoursite?<br> <inputtype=“checkbox”name=“feedback”value=“Wonderful”checked= <inputtype=“checkbox”name=“feedback”value=“Fabulous”>Fabulous <inputtype=“checkbox”name=“feedback”value=“Brilliant”>Brillia <br><br> Yourstate:<br> <selectname=“current-state”> <optionvalue=“AL”>Alabama</option> <optionvalue=“AK”>Alaska</option> <optionvalue=“AZ”>Arizona</option> </select> <br><br> Message: <br> <textareaname=“message”rows=“4”cols=“30”></textarea> <br><br> <inputtype=“submit”value=“Sendemailmessage”> </form> Thesyntaxforaselectboxisdifferentthanthesyntaxyou’velearnedforotherinput types. Startswith<select,not<inputtype= Unlikeradiobuttonsandcheckboxes,whicharefreestandingandboundtogetherbya commonname,allthechoicesareenclosedbyopeningandclosingselecttags. Unlikemostotherinputtypes,optiontagsareclosed. Thenameisspecifiedonlyonce,intheselecttag. Bydefault,thefirstoptionispre-selected.Intheexample,it’sAlabama.Youcan pre-selectanotheroptionbyincludinginoneoftheoptiontagsthewords Aproblemwiththeexampleisthatiftheuserdoesn’tbothertomakeaselection,his statewillbeinputasAlabamaevenifhelivesinAlaska,sinceAlabamadefaultsasthe choiceiftheuserdoesn’tmakeone.Thesolutionistomakethefirstoptionsomethinglike “Selectastate.”Whentheuserclickstheinputbutton,alittleJavaScriptroutinecancheck toseewhether“Selectastate”istheselectedoption,whichmeansthattheuserhasn’t madeaselection.Ifso,theusercanbepromptedtoselectastate.MybookASmarter WaytoLearnJavaScript,availableatAmazon,showsyouhowtowritethisroutine. InyourHTMLfileaddaselectboxwithtwoselectionstotheformyou’vealready coded.Savethefile.Displaythepage. SampleHTMLcodeisat: http://asmarterwaytolearn.com/htmlcss/practice-55-1.html. Findtheinteractivecodingexercisesforthischapterat: http://www.ASmarterWayToLearn.com/htmlcss/55.html 56 Forms:label It’sagoodideatogiveeachcontrolalabeltag.Theformtagitselfdoesn’ttake one,butit’sagoodideatoaddonetoeachtextfield,textarea,radiobutton,checkbox, andselectionoption.Butitisn’trequired. Labelsallowscreenreaderstocalloutthetextthatgoeswitheachcontrol. Forexample,iftheuserisworkingwithascreenreaderandyou’regotaone-line textboxfortheuser’slastname,thelabeltagmakesthescreenreadersay,“Lastname” whentheusertabstothefield. Inadditiontomakingthetextreadablebyascreenreader,alabelmakesthetext clickablelikethecontrolitself,givingtheuserabiggertarget.Thisisespeciallyhelpful forradiobuttonsandboxes,whichcanbehardtohitwiththecursor.Forexample,ifyou write… <label><inputtype=“radio”name=“foundthru”value=“Google”>Google</label> …theuserdoesn’thavetohitthebutton.Hecanclick“Google”andthebuttonwill bechecked. Noticehowthelabeltagenclosesboththetextandthecontrol.Thisistheeasyway toaddalabeltag.Thehardway,preferredbyexpertsforesotericreasons,requiresthat yougivethecontrolanid.Inthismethod,theopeningandclosinglabeltagsencloseonly thetext. <inputtype=“radio”name=“foundthru”id=“goo”value=“Google”> <labelfor=“goo”>Google</label> InyourHTMLfileusetheeasywaytoaddlabelstotheradiobuttons.Usethehard waytoaddlabelstothecheckboxbuttons.Savethefile.Displaythepage. SampleHTMLcodeisat: http://asmarterwaytolearn.com/htmlcss/practice-56-1.html. Findtheinteractivecodingexercisesforthischapterat: http://www.ASmarterWayToLearn.com/htmlcss/56.html 57 Groupingrelatedelements Ifyourformhasalotofparts,youcanimprovetheuser’sexperiencebygrouping relatedpartstogethervisually.Takethisform… It’llbeeasierfortheusertounderstandifyouencloseeachgroupinabox… Thisisthecode.(I’veaddedalittleCSSstyling.Wewon’tgointothatnow.) <formaction=“questionnaire.php”method=“post”> <fieldset> <label>Firstname:<inputtype=“text”name=“firstname”size=“15”maxlength=“30”></label> <label>Lastname:<inputtype=“text”name=“lastname”size=“15”maxlength=“30”></label><br><br> <label>Email:<inputtype=“text”name=“email”size=“25”maxleng </label> </fieldset> <br> <fieldset> <textareaname=“meaning”rows=“4”cols=“40”> </textarea></label><br><br> Whatdoyouwantonyourpizza?<br> <label> <inputtype=“checkbox”name=“topping”>Pepperoni</label> <label> <inputtype=“checkbox”name=“topping”>Sausage</label> <label> <inputtype=“checkbox”name=“topping”>Mushrooms</label> <label> <inputtype=“checkbox”name=“topping”>Olives</label> </fieldset> </form> Byenclosingthetwogroupsofcontrolsinopeningandclosingfieldsettags,we tellthebrowsertoenclosethegroupsinseparateboxes. Notethateverythingwithinthefieldsettagsisindented2spaces. Wecanimprovethereadabilityoftheformevenfurtherbyaddinglegends— descriptivetextthat’satthetopofthebox. Nowthefirstgrouphasthelegend“Contactinfo”andthesecondgrouphasthe legend“Questions.”Thisisthecode. <formaction=“questionnaire.php”method=“post”> <fieldset> <legend>Contactinfo</legend> <label>Firstname:<inputtype=“text”name=“firstname”size=“15”maxlength=“30”></label> <label>Lastname:<inputtype=“text”name=“lastname”size=“15”maxlength=“30”></label><br><br> <label>Email:<inputtype=“text”name=“email”size=“25”maxleng </label> <br> <fieldset> <legend>Questions</legend> <label>Whatisthemeaningoflife?<br> <textareaname=“meaning”rows=“4”cols=“40”></textarea> </label><br><br> Whatdoyouwantonyourpizza?<br> <label>Pepperoni<inputtype=“checkbox”name=“topping”> </label> <label>Sausage<inputtype=“checkbox”name=“topping”> </label> <label>Mushrooms<inputtype=“checkbox”name=“topping”> </label> <label>Olives<inputtype=“checkbox”name=“topping”> </label> </fieldset> </form> Thelegendtagsgoonthelinefollowingtheopeningfieldsettagand,like everythingenclosedbythefieldsettags,areindented2spaces. InyourHTMLgroupthetwotextfieldswithonesetoffieldsettagsandthe radio,checkbox,andselectioncontrolswithasecondsetoffieldsettags.Makeup legendsforbothgroups.Savethefile.Displaythepage. SampleHTMLcodeisat: http://asmarterwaytolearn.com/htmlcss/practice-57-1.html. Findtheinteractivecodingexercisesforthischapterat: http://www.ASmarterWayToLearn.com/htmlcss/57.html 58 Forms:styling Here’safilled-outformwithoutanyCSSstyling. NowI’llgiveitsomestyling.Itisn’tmuseum-quality,butIlikeitbetter. TherearemorewaystocustomizeHTMLformsthantherearestarsinthegalaxy. LetmeshowyoutheminimalstylingIusedfortheformshownabove. Tobeginwith,Istyledthelabelsandlegendsbyspecifyingasans-seriffont-family andlargerfont-sizefortheform. form{ width:50%; margin:0auto0auto; font-family:Verdana,Geneva,sans-serif; font-size:1em; } Thestylingshownabovecontrolsthewidthoftheformandalsocentersit.Fontstylingfortheformaffectsonlythelabelsandlegends.Iwantedalargerfont-sizeforthe userinputsaswell,soIhadtocreateseparatestylingforthem. input[type=“text”],input[type=“email”],textarea{ margin-bottom:.25em; padding:.25em; font-size:1em; } Asyoucansee,thesyntaxvaries,dependingonthetypeofinputsyou’restyling. Forsingle-linetextandemailinputs,theselectorsareinput[type=“text”]and input[type=“email”]. Foratextarea,it’sjusttextarea. IwantedaheftySubmitbutton,soIcodedthisstyling. input[type=“submit”]{ font-size:1.25em; } Thebuttonwillexpandtoaccommodatetheenlargedtext. Iboldedthelegends. legend{ font-weight:700; } InyourCSSfiledoublethefont-sizeoftextinputandtextareacontrols,andgive themsomepaddingallaround.Savethefile.Displaythepage. SampleCSScodeisat: http://asmarterwaytolearn.com/htmlcss/practice-58-1.html. Findtheinteractivecodingexercisesforthischapterat: http://www.ASmarterWayToLearn.com/htmlcss/58.html 59 Comments Commentingisawaytotellthebrowsertoignorecertainportionsoftextthatyou includewithinthebodyofcode.Commentsareforthehuman,notthemachine.Theyhelp youandothersunderstandyourcodewhenitcomestimetorevise.Youcanalsouse commentingtocommentoutportionsofyourcodefortestinganddebugging. InHTMLanytextenclosedbyanopening<!—tagandaclosing-->tagis invisibletothebrowser.Inthefollowingcode“Beginningofquestionnaireform”isa commentthatthebrowserignores. <!—Beginningofquestionnaireform--> <formaction=“questionnaire.php”method=“post”> <fieldset> <legend>Contactinfo</legend> <label>Firstname:<inputtype=“text”name=“firstname”size=“15”maxlength=“30”></label> [etc.] Here’samulti-linecomment.Whenyouwriteamulti-linecomment,putthetagson theirownseparatelinesforreadability. <!— Notetomyself.Thinkaboutcombiningthe questionnaireformwiththefeedbackform. --> YoucanalsocommentCSScode,butthetagsaredifferent.It’s/*toopen,*/to close. /*Stylesforheadings*/ h1{ font-size:3em; } h2{ [etc.] Youcanhavemutli-lineCSScomments.Again,puttagsontheirownseparatelines forreadability. /* ThisCSSfilewascreatedonMay28,2018. Thestylesareoptimizedforalearningsite. */ InyourHTMLfileaddamulti-linecomment.InyourCSSfileaddamulti-line SampleHTMLcodeisat: http://asmarterwaytolearn.com/htmlcss/practice-59-1.html. SampleCSScodeisat: http://asmarterwaytolearn.com/htmlcss/practice-59-2.html. Findtheinteractivecodingexercisesforthischapterat: http://www.ASmarterWayToLearn.com/htmlcss/59.html 60 Layout:nestedboxes ThefirstthingtoknowaboutHTMLpagelayoutisthatit’salwaysacollectionof invisiblenestedboxes.Everything,fromtheheadertotheshortestparagraphortiniest icon,isinsidesomethingelse. Inanearlierchapteryoulearnedthatallofthecontentofawebpageisenclosedby anopening<body>tagandclosing</body>tag.Thismeansthatthebodyisthe biggestbox,theboxthatcontainseverythingelse.(Well,it’sthebiggestboxyourCSS codecanaffect.Thebodyisactuallyinsidetheboxcreatedbytheopening<html>and closing</html>tags.)ThinkofthebodyasthebrownboxwiththeAmazonlogoonit thatthepostalcarrierdelivers.Alltheotherboxesareinsideit.Totakethemetaphoreven further,theoutermostbox,definedbytheopeningandclosing<html>tags,whichyou neverdealwithexcepttowritethetags,isthemailtruck. Howmanyboxesarecontainedinsidethebigouterbox(thebody),andhowmany levelsofnestingwindupinsideit,aredecisionsyoumake,dependingonwhatyouwant yourpagetolooklike.Ataminimum,mostprofessionalwebsitesincludeacollectionof boxesthatlookssomethinglikethis. Oftheboxesshowninthediagram,theonlybigboxthatyouabsolutelymusthave inyourcodeistheouterboxcreatedbytherequiredopening<body>andclosing </body>tags.Youcan,ifyouchoose,putallofyourheadings,paragraphs,images,and linksinsidethatonebig,undifferentiatedbox,andsomepeopledo.You’veseensuch pages.Thetextstretchesallthewayacrossthebrowserwindow.There’snolayout,really. Youexitthesiteasfastasyoucan. Thediagramaboveshowstheboxesthatrepresentmajorsectionsofthepage.IfI hadwantedtoshowallthesmallerboxesthatarecontainedwithinthoseboxes,Iwould haveincludedtheboxescontainingtext.Theseboxesarecreatedbyopening<p>and closing</p>tags,openingandclosingheadingtags,opening<ul>andclosing</ul> tags,andopening<li>andclosing</li>tags.OnanHTMLpage,everythingisinside somethingelse.WheneveryouwriteanHTMLtag,youcreateabox.Theopening<p> andclosing</p>tagsinthefollowingexamplecreateaboxcontainingthetext“Hey now!” <p>Heynow!</p> Inthefollowingexampletheopening<a>andclosing</a>tagscreateabox containingthetext“StackOverflow.” ahref=“http://www.stackoverflow.com”>StackOverflow</a> Foranyboxofanysize,itscontentsareaffectedbyanystylesyouspecifyforthat box.Soifyouwrite… p{ color:purple; } …allthetextenclosedbyanopening<p>tagoraclosing</p>tagwillbe,God helpyou,purple. …unlessyoumakeanexception.Forexample,youcanwrite… .sane-color{ color:black; } Then,althoughthegeneralstyleforparagraphsisstillpurple,anytextenclosedbya tagthatbegins<pclass=“sane-color…”willbeblack. Oryoucouldwrite… <p>Thisis<spanclass=“sane-color”>not</span>apretty sentence.</p> …andyou’vecreatedaspanboxwithintheparagraphboxthatcolorstheword “not”black,whiletherestofthesentenceispurple. Here’ssomestylingforthebiggestbox,theboxthatcontainsever body{ width:100%; font-size:1em; background-color:white; color:black; } Sincethebodyisthebiggestbox,thisbitofCSSmeansthatallthetextonthepage, includingallparagraphs,headings,tabletext,andlistitems,willbeblackonawhite background,willbeintheGeorgiafontoravariant,andwillbebasedonthebrowser’s defaulttextsize. …unlessyoumakeanexception.Andofcourse,youmightmakeallkindsof exceptions,onjustabouteverylevel.Forexample,youcancreateageneralstylefor paragraphsthatdiffersfromthedefaultforalltextestablishedinthebodystyle.Another example:whenyouexplicitlycallforpurpletextasapstyle,alltextenclosedin<p>tags ispurpleratherthanthebody’sdefaultblack.Asyoulearnedinanearlierchapter,youcan alsomakeexceptionstothatrulebycreatingclassesandIDsforparagraphsthatspecify differentcharacteristics. LaterI’lldiscussthewidth:100%andfont-size:1emspecificationsinthe bodystyleshownabove.Butfirstweneedtotalkabouthowtocreatethebigsections, liketheheaderandmainsections,showninthediagramabove. Findtheinteractivecodingexercisesforthischapterat: http://www.ASmarterWayToLearn.com/htmlcss/60.html 61 Layout:divs AlltheboxesthatconstituteanHTMLlayoutarecontainedinthebigboxcreatedby theopening<body>andclosing</body>tags—thetagsthatbeginandendthemain sectionofeveryHTMLdocument.Inthediagraminthelastchapter,yousawsome relativelylargeboxesnestedinsidethebigoutermostBodybox.Whatthediagramdoesn’t showisallthesmallerboxesnestedinsidetheserelativelylargeboxes.Thesmallerboxes arecreatedbytheopeningandclosingtagsforheadings,paragraphs,listitems,andsoon. Sohowdoyoucreatetherelativelylargeboxes,fortheheader,navigationsection, mainsection,andsoon—theboxesshowninsidethebigBodyboxinthediagram? Youcreatetheseboxesbyusingdivtags.Forexample: <divid=“content”> <h3>Theslowloris.</h3> <imgsrc=“slowloris.jpg”alt=“Slowloris”width=“55”height=“85”> <p>Slowlorisesareagroupofseveralspeciesofprimateswhich </p></div> Intheexample,therearethreeelementsgroupedtogetherinsidethediv—a heading,animage,andaparagraph.Justasanystylingthatyouspecifyforthebodywill beappliedtoallelementscontainedinthebodyunlessyoumakeexplicitexceptions,any stylingthatyouspecifyforthedivwillbeappliedtoallelementsinsidethedivunless youmakeexplicitexceptions.IntheHTMLcodeabove,I’vecreatedadivwithanidof “content.”I’llstylethedivwithacolor. div#content{ color:red; } Withthisstyle,theheadingandparagraphtextinthedivwillbered—unlessyou createexceptions.Anexceptionwouldbeifyou’veexplicitlyspecifiedaparticularcolor forh3headingsoraparticularcolorforparagraphs.Thenthosespecificationswill overridethedefaultcolorthatyou’respecifyingforthediv. Stylingprecedenceworkslikethis: Stylingforaninnerboxoverridesstylingforanouterbox.Forexample,inthelast chapterwespecifiedblackasthecolorforallthetextinthebody.Blackisthecolor unlessotherwisespecified.Thisdefaultisoverriddenbythedivwecreatedabove, whichcallsforredtext.Sonowthedefaultcolorforallthetextinthedivisred. Stylingforanelement,likeaparagraph,overridesstylingforadiv.Thisisreally thesameruleasthefirstruleabove,sincetheboxcreatedbytagsisinsidethebox stylingforanouterbox.Stylingforthedivsaysblack,butwecreateastyleforallp elementsthatsayspurple,thepurpleparagraphstylewilloverridethedivblack style. Classandidstylingoverridegeneralstyling.Ifwecreatea“sane-color”classof paragraphs,thegeneralpurplespecificationforparagraphsisoverriddenforany paragraphswhosetagbegins<pclass=“sane-color…” WhydidIcreateanidforthedivratherthanaclass?Becausethisparticulardiv— theonethatcontainsallthecontentonthepage—occursjustonceinthedocument.A classcanbeusedmorethanonce,anidonlyonce.Ifwewerestylingadivthatmight occurmorethanonceintheHTML,we’dcreateaclassratherthananid. Asyou’veseeninthischapter,adivishandyforsettingdefaultstylingwithina section,butthemostimportantfunctionofdivsislayoutpositioning.That’snext. Findtheinteractivecodingexercisesforthischapterat: http://www.ASmarterWayToLearn.com/htmlcss/61.html 62 Layout: divwidthsandcentering Let’stalkaboutthedivthatcontainsmostofthecontentofthepage,theonethat,in ourexample,createstheMainbox.It’sthethirdboxdowninthediagramshowninthe lastchapter.StickingwiththenameIusedinthediagram,we’llgivethedivanidof “main.” Usually,youdon’twantthecontentsofasectiontobumpupagainsttheleftand rightedgesofthewindow.Asinabook,youcreatesomewhitespaceontheleftandright. Agoodwaytodoitistospecifyawidthforthesection,likethis. div#main{ width:90%; } Thisstyleaddsaminimumamountofwhitespaceontheside. But90%ofwhat?Well,whenyouspecifyemsorpercentages,thesevaluesare alwaysrelativetowhat’s“normal”—eitherthebrowser’sdefaultorastyleyou’ve overriddenwithCSSstyling.Inourexample,wecreatedadefaultwidthinthebody styling,width:100%.Thisstyletellsthebrowsertomakethebodywidththefull widthofthebrowserwindow.That’sthebrowser’sdefault,sowe’rejusttellingittodo whatitwoulddoanyway.Butbymakingitexplicit,wetellanyhumanreaderstryingto understandourCSSthatwe’reacceptingthebrowser’sdefault. Sowhenyouspecifywidth:90%forthemainsection,you’retellingthebrowser tomakethesectiononly90%aswideasthebrowserwindow.Ifwehadspecified width:60%forthebody,specifyingwidth:90%forthemainsectionwouldmake thesection60%times90%,or54%ofthefullwindowwidth. Butthere’saproblem.Bydefault,browsersplacethingsontheleft.Thismeansthat ifwemakethemainsectionnarrowerthanthebody,themainsectionwillbumpup againsttheleftedgeofthebrowserwindow,andallthewhitespacewillwinduponthe right.That’snotwhatwewant.Wewantthesectioncentered.Soweaddaline. div#main{ width:90%; margin:0auto0auto; } Oncewe’vetoldthebrowserhowwidetomakethediv,specifyingautoforleft andrightmarginstellsthebrowserthatifthere’sanywidthleftover—inthiscase10%— tosplitthedifference.Nowthere’llbeamarginontheleftthat’sequalto5%ofthe willbecentered. Youcanmakethesectionnarrower,withwidermargins,byreducingthepercentage youspecifyforthewidth. Youcanaddwhitespaceaboveand/orbelowthesectionbyreplacingthezeroswith emvalues. div#main{ width:90%; margin:1.5emauto1%auto; } You’llhavetoplayaroundwiththeemvaluestogetthemarginstosuityou. Nowsupposeyouhaveseveraldifferentdivswithinthemaindiv,andyouwant togivetheseproportionallythesamemarginsthatyou’veassignedtothemaindiv(not thatthemarginshavetobeproportional).Youcoulddothisbyusingexactlythesame specificationsyouusedforthemaindiv. div.inset{ width:90%; margin0auto0auto; } Sinceallvaluesoftheinnerdivarerelativetothevaluesoftheouterdiv,the divsoftheclass“inset”willhave90%ofthewidthoftheouterdiv.Thisistheresult. Ofcourse,theinnerdiv’swidthvaluedoesn’thavetobethesameasthewidth valueoftheouterdiv.Ijustdiditthiswaysoyoucanseethatthewidthoftheinner div,thoughitsharesthesamevalue,isnarrowerthantheouterdiv,sinceit’s90%of 90%ofthebodywidth,whereastheouterdivis90%ofthefullbodywidth. InChapter60Ipromisedtodiscusstwospecificationsinthebodystyling: body{ width:100%; font-family:Georgia,“TimesNewRoman”,Times,serif; font-size:1em; background-color:white; color:black; } Amomentago,Idiscussedthewidth:100%specificationforthebodystyle, sayingthatit’sredundantinthesensethatyou’retellingthebrowsertodowhatitwould doanyway.Thepurposeistohelpothercoders,byexplicitlysayingthatyou’reaccepting thedefaultwidth—thefullwidthofthebrowserwindow—asthebodywidththatthe lettingothercodersknowthatyou’reacceptingthebrowser’sdefaultsizeasthevaluethat allotherstyleswillbebasedon. InyourCSSfilecodeadividthat’s20%wideandcentered.InyourHTMLfile codethedivandputaparagraphinit.Savethefiles.Displaythepage. SampleCSScodeisat: http://asmarterwaytolearn.com/htmlcss/practice-62-1.html. SampleHTMLcodeisat: http://asmarterwaytolearn.com/htmlcss/practice-62-2.html. Findtheinteractivecodingexercisesforthischapterat: http://www.ASmarterWayToLearn.com/htmlcss/62.html 63 Side-by-sidedivs Lookattheboxdiagramagain.I’vemadeasmallchangetoit.I’venudgedthe Contentsectionleft,soit’supagainsttheleftsideoftheMainbox,andtheSidebar sectionright,soit’supagainsttherightsideoftheMainbox.Intheoriginaldiagram,I leftsomespacebetweenthesetwosectionsandtheMainsectionsoyoucouldseeallthe boxesclearly,butIdon’treallywantanyextrawhitespaceontheleftandrightbetween theouterboxandthetwoinnerboxes. Iwantthetwosectionstositside-by-side.Iwantnoextrawhitespaceontheleftor right,separatingthemfromtheouterMainbox.Thisishowwedoit. First,wespecifyawidthforeachofthetwoinnerboxessowhentheirwidthsare addedtogethertheydon’tadduptomorethan100%ofthewidthofthedivthatcontains them,theMainbox.ButsinceIdon’twantthembumpingupagainsteachotherinthe middle,I’mgoingtogivethemwidthsthatadduptojust97%.Thisleavestheremaining 3%foracentergutterbetweenthem.Here’sthecode. div#content{ width:68%; } div#sidebar{ width:29%; } Sofar,thisstylingdoesn’tpreventthebrowserfromplacingoneelementunderneath theother.Ifwedon’tdosomethingaboutit,theseconddivwillgorightunderneaththe firstdiv,sinceadivisablockelement.Bothofthemwillbeflushwiththeleftedgeof theMainbox.Soweneedtodoonemorething.Rememberhowyoulearnedtowrite float:leftandfloat:righttostyleanimagesotextwrapsaroundit?Weuse thesamelanguagetoplacethetwodivsside-by-side. div#content{ width:68%; float:left; } div#sidebar{ width:29%; float:right; } Nowthey’reside-by-side,andthere’sagutterbetweenthemthat’s3%ofthewidth oftheircontainingelement,theMainbox. Letmegiveyouanotherexample.Supposeyouwantthreedivsofequalwidth placedside-by-side. div#d1{ width:31%; float:left; } div#d2{ width:31%; float:left; margin:0003.5%; } div#d3{ width:31%; } Thefirsttwodivsarefloatedleft.Thethirddivisfloatedright.Eachdivis31% wide,addinguptoatotalof93%ofthewidthofthecontainingMainbox.Thatleaves7% forthetwogutters.Ispecifyaleftmarginof3.5%fortheseconddiv,forcingittothe right.Thisleaves3.5%forthesecondgutter.Nowthethreesectionsarespacedevenly. RememberlearninginChapter27thatyouneedtoclearimagefloatstoavoidunintended wraps?Youdothesamethingwithdivfloats. .no-wrap{ clear:both; } Aftercodingside-by-sidedivsinHTML,you’dcodeanemptydivwhoseonly purposeistoclearthefloataboveit. <divclass=“no-wrap”></div> Oryoucoulddoitwithaparagraphthatclearsthefloat. InyourCSSfilecreatetwodividsthatwillplacethedivsside-by-side,witha gutterofwhitespacebetweenthem.InyourHTMLfilecodethetwodivsandputa paragraphineachone.Savethefiles.Displaythepage. SampleCSScodeisat: http://asmarterwaytolearn.com/htmlcss/practice-63-1.html. SampleHTMLcodeisat: http://asmarterwaytolearn.com/htmlcss/practice-63-2.html. Findtheinteractivecodingexercisesforthischapterat: http://www.ASmarterWayToLearn.com/htmlcss/63.html 64 Layout: amodernheaderpart1 Theboxdiagramwe’vebeenworkingwithshowstheheadersectionscaledalittle narrowerthanthebodysection,withsomewhitespaceatthetop. Whenthepagedisplays,there’sasmallamountofwhitespacebetweenthetopedge ofthewindowandthetopoftheheader.Andthere’sasmallamountofwhitespacealsoon bothsidesoftheheader.Thishappensautomaticallyifyoudon’toverrideit. Aheaderwithwhitespaceallarounditisacceptable,butamoremoderndesign wouldhavetheheaderonacolorblockthatisflushwiththetopofthewindowand stretchesallthewayacrossthewindowfromedgetoedge.Theboxdiagramwouldlook likethis. Let’smakeoneofthesemodernheaders. Westartbymakingtheheaderstretchfromedgetoedge.Andwecreatethecolor blockbygivingitabackground-colorofdarkcrimson. div#header{ background-color:#990000; } ThisistheHTMLthatcreatesthediv. <divid=“header”> [Thecontentsofthedivwillgohere.] </div> Byspecifyingawidthof100%,we’veaskedthebrowsertostretchthedivfrom edge-to-edge,butthebrowserisn’tcooperatingfully.It’sstillleavingalittlewhitespace ontheleftandrightedges. Soweneedtoforcetheissue: div#header{ width:100% position:absolute; left:0; background-color:#990000; } Byspecifyingposition:absolute,weoverridewhateverthebrowserthinks wemeanbywidth:100%andexplicitlytellitwherewewanttheleftedgetostart.By specifyingleft:0,wesay,“Startit0pixelsinfromtheleftedgeofthewindow.”In otherwords,eliminateallwhitespace.Happily,withoutanyadditionalinstructions,the browsereliminatesallwhitespaceontherightedgeaswell. But,thankstothebrowser’stendencytosurroundadivwithwhitespace,westill haveagapabovetheheader.Howdowesolvethis?Youcanprobablyguess. div#header{ width:100% position:absolute; top:0; left:0; background-color:#990000; } Nowwe’vetoldthebrowsertostartthediv0pixelsfromthetopofthewindow. Thegapdisappears. Sodoweseeacolorblockatthetopofthebrowser?No.Ifyouopenthepageina browser,thecolorblockisn’tanywheretobefound. InthenextchapterI’lldealwiththis. Findtheinteractivecodingexercisesforthischapterat: http://www.ASmarterWayToLearn.com/htmlcss/64.html 65 Layout: amodernheaderpart2 Inthelastchapterwetookthefirststepstocreateaheaderthat’sflushwiththetop ofthebrowserwindowandstretchesfromedgetoedgeofthewindow.Wespecifieda widthof100%forthediv.Weinstructedthebrowsertoeliminatethewhitespaceitwould normallyaddtothetopandsides.Andweaddedabackgroundcolor. Butnoheadercolorblockshowedup.Why?Becausewithoutaheightspecification oranycontentthatwouldforcethebrowsertostretchthedivupanddownto accommodatethecontent,thebrowserassignsthedivaheightof0.Thecrimsoncolor blockhasawidthbutnoheight.It’sone-dimensional,aninvisiblephantom. Wecouldassignitaheight,specifyinganumberofpixels,butwe’reavoidingpixels becausetheypreventthepagefromadaptingtodifferent-sizewindows.Wecouldassignit aheightasapercentagetoavoidthepixelproblem,butwedon’tneedto.Whenweput somecontentinsidethediv,thedivwillexpandtoaccommodateit.Forcontent,I’ll startwithaheading. Westartbycreatingastylefortheheading. div#headerh2{ font-family:Verdana,Geneva,sans-serif; font-weight:900; color:white; } Thehighlightedfirstlinesays,“Applythisstyletoanh2headingwithinthediv whoseidis“header.”Nowwecanwrite… <divid=“header”> <h2>ASmarterWaytoLearn</h2> </div> …andaheaderappearsinthebrowser. I’dliketomaketheheadingalittlebeefier,soIaddthis: div#headerh2{ font-family:Verdana,Geneva,sans-serif; font-weight:900; color:white; font-size:2em; } Thisistheresult: div#headerh2{ font-family:Verdana,Geneva,sans-serif; font-weight:900; color:white; font-size:2em; margin-left:2%; padding:0; } Andherewego: InyourCSSfilecodea100%-widedivwithabsolutepositioningatthetopleft. Assignitalightcolor.InyourHTMLfilecodethedivandputaheadinginit.Savethe files.Displaythepage.(Thedivwillbeatthetopofthepageifyoucodedcorrectly.) SampleCSScodeisat: http://asmarterwaytolearn.com/htmlcss/practice-65-1.html. SampleHTMLcodeisat: http://asmarterwaytolearn.com/htmlcss/practice-65-2.html. Findtheinteractivecodingexercisesforthischapterat: http://www.ASmarterWayToLearn.com/htmlcss/65.html 66 Layout: amodernheaderpart3 Let’saddalogototheheader.We’llplaceittotheleftoftheheadertext. Here’sastart: <divid=“header”> <imgsrc=“images/logo_led_bulb.png”alt=“logo”width=“40”height= <h2>ASmarterWaytoLearn</h2> </div> Thatgivesusthis: That’snotwhatwewant.We’llhavetofloattheimage. div#headerimg{ float:left; Here’swhatthefloataccomplishes: We’regettingclose.Wejustneedtoaddsomespacearoundthelogo. div#headerimg{ float:left; margin:.9em.6em0.75em; } Andthereyouhaveit. Noticethatthecolorblock—thediv—hasexpandedverticallytoaccommodatethe topandbottommargins. 1. InyourCSSfilestyletheimageinsidethedivsoitfloatsleftandhas1emof margin. 2. Givetheheadinginsidethedivsometop-paddingsoitmovesdowntocenter vertically. 3. InyourHTMLfileaddanimageinsidethediv: http://www.asmarterwaytolearn.com/loris_50.jpg 4. Savethefileanddisplaythepage.(Don’tbesurprisedtoseetheheadercoverup somecontent.We’lldealwiththisinChapter6) SampleCSScodeisat: http://asmarterwaytolearn.com/htmlcss/practice-66-1.html. SampleHTMLcodeisat: http://asmarterwaytolearn.com/htmlcss/practice-66-2.html. Findtheinteractivecodingexercisesforthischapterat: http://www.ASmarterWayToLearn.com/htmlcss/66.html 67 Layout: amodernheaderpart4 Inthelastchapteryoulearnedhowtoforcethebrowsertopositionadivprecisely whereyouwantit.Theheaderthatwecreatedusingthisapproachappearsinthatposition whenthepagefirstdisplays.Theniftheuserscrollsthepage,theheaderscrollswithall theothercontent.Butyoucantellabrowsertoleaveadivwhereyouputit,tonotscroll itwhenthepagescrolls.Forexample,youmightwanttheheadertostayvisibleatthetop ofthebrowserwindowaseverythingbelowitscrolls.Here’sthecode.(I’momittingall theheaderstylingthatIcoveredinthelastchapter.) div#header{ position:fixed; top:0; left:0; } position:fixedtellsthebrowsertokeepthedivimmobilizedaseverything elseonthepagescrolls.Thismakesthediv’spositionwithinthewindowpermanent.As youlearnedinthelastchapter,top:0andleft:0tellthebrowsertoplacethe headerflushagainstthetopofthewindowandflushagainsttheleftsideofthewindow. Ifyouweretowritethis… div#ad-box{ postion:fixed; top:150px; left:50px; } …thedivwiththeid“ad-box”wouldbepermanentlypositioned150pixelsfrom thetopofthewindowand50pixelsinfromtheleftsideofthewindow. Youcanalsospecifyapositionsomedistance(ornodistance)infromtherightside ofthewindow.Thefollowingcodepositionstheadboxflushagainstthetopofthe windowand10pixelsinfromtheright. div#ad-box{ postion:fixed; top:0; right:10px; } Alternatively,youcanspecifyapositionsomedistance(ornodistance)upfromthe div#footer{ position:fixed; bottom:0; left:0; } I’vecodedthepositionsinpixels,becausethat’seasierforyoutounderstand.But,as youknow,percentagesarepreferable,so… div#ad-box{ postion:fixed; top:0; right:2%; } InyourCSSfilechangetheabsolutely-positioneddivtofixedposition.Savethe fileanddisplaythepage.Tryscrollingdownfromthetop.(Don’tbesurprisedtoseethe headercoverupsomecontent.We’lldealwiththisinthenextchapter.) SampleCSScodeisat: http://asmarterwaytolearn.com/htmlcss/practice-67-1.html. Findtheinteractivecodingexercisesforthischapterat: http://www.ASmarterWayToLearn.com/htmlcss/67.html 68 Layout: amodernheaderpart5 Inthelasttwochapterswecreatedheaderswithafixedpositionatthetopofthe browserwindow.InChapter66,youlearnedtocreateaheaderwithabsolutepositioning thatscrolls.InChapter67,youlearnedtocreateaheaderwithfixedpositioningthat doesn’tscroll.We’llsoonbeaddingmoretotheHTMLdocument,withtheintentionof buildingapagewhosecontentlookslikethis.(I’mshowingonlyatopportionofthe page.) Thepictureaboveshowswhatwewant,butthat’snotwhatwe’regoingtoget.When youspecifyposition:absoluteorposition:fixed,youremovethediv thenaturalflowoftheotherHTMLelements.Theyreturnthefavorbytotallyignoringthe divelement.Theybehaveasifitweren’tthere.Whatthismeansisthatwhenyouforcea headertotakeaparticularposition,theotherstuffonthepagewon’trespectfullymake roomforit.Sincetheotherelementsdon’tknowit’sthere,they’llpositionthemselvesas ifitisn’tthere,rightwherethedivis,violatingthenaturallawthatsaystwothingscan’t occupythesamespace.Unawareofthediv,they’llflownormallyandwillwindup underthediv.They’llbeinvisible. Youcouldstylethesidebarandmainsectionwithbigtopmarginstomovethem downbelowtheheadersothey’reintheclear.ButIpreferamoreelegantsolution. Createaduplicateoftheheader—acopyofitthatisn’tfixed,aheaderthatispartof themainflow.Youmakethisheadervisibletothebrowserbutinvisibletotheuser.In effect,it’saspacer. div#invisible-header{ width:100%; visibility:hidden; } Addanewselectortotheheader’sh2stylingsotheinvisibleheadingisstyledlike thevisibleheading: div#headerh2,div#invisible-headerh2{ font-family:Verdana,Geneva,sans-serif; font-weight:900; color:white; font-size:2em; margin-left:2%; padding:0; } Dothesamethingfortheimage. div#headerimg,div#invisible-headerimg{ float:left; margin:.9em.6em0.75em; } visibility:hidden,specifiedfortheheaderdivandeverythingitencloses, tellsthebrowsertokeepitscontentsinvisible(thoughthebrowserknowsit’sthere). Sincewefloatedtheimage,weneedaparagraphthatclearsthefloat.We’llstyleit thisway: p.clearFloat{ clear:both; } TheHMTLcodefortheinvisibleheaderanditscontentsisinsertedatthetopofthe page. <divid=“invisible-header”> <imgsrc=“robot-logo-bust.png”alt=“logo”> <h2>ASmarterWaytoLearn</h2> </div> Forprecisionplacementoftheelementsimmediatelybelowtheheader,youmay needtoadjustthemarginofthespacerdiv.Sincethebrowserwilladdalittlewhitespace abovethespacerdiv,it’sgoingtodropalittlebelowthevisibleheader.Tomoveitupso itmimicsthevisibleheader,giveitsomenegativetop-margin. Whyisthevisiblefixedheadercoveringuptheotherelementsinsteadoftheother wayaround?Becausebydefaultafixed-positionelementgoesontop.Butyoucan interferewiththisstackorder,usingz-index.Thelowerthez-indexnumber,the loweritsplaceinthestackorder.AllelementsthatareinthenormalHTMLflowhavean implicitz-indexof0. InyourCSSfile,codeinvisibleversionsofthefixed-positiondiv,itsheading,and itsimage.InyourHTMLfileinsertthedivanditscontentsatthetopofthepage contents,under<body>. SampleCSScodeisat: http://asmarterwaytolearn.com/htmlcss/practice-68-1.html. SampleHTMLcodeisat: http://asmarterwaytolearn.com/htmlcss/practice-68-2.html. Findtheinteractivecodingexercisesforthischapterat: http://www.ASmarterWayToLearn.com/htmlcss/68.html 69 Averticalnavigationbar part1 Sinceanavigationbarpresentstheuserwithalistofchoices,theusualwaytomake oneistocodeanunorderedlist.Here’ssomecode. <divid=“navbar”> <ul> <li>WhyChooseUs</li> <li>RecentProjects</li> <li>OurTeam</li> <li>GetaQuote</li> <li>ContactUs</li> </ul> </div> Thisiswhatitlookslikesofar. Itisn’tanavigationbarifitisn’tclickable.Solet’saddsomelinks. <divid=“navbar”> <ul> <li><ahref=“why-choose-us.html”>WhyChooseUs</a></li> <li><ahref=“recent-projects.html”>RecentProjects</a> <li><ahref=“our-team.html”>OurTeam</a></li> <li><ahref=“get-a-quote.html”>GetaQuote</a></li> <li><ahref=“contact-us.html”>ContactUs</a></li> </ul> </div> Nowthelistitemsareblueandareunderlined,indicatinglinks. Sinceit’sgoingtobeanavigationbar,wedon’tneedthebullets.Thisisthecode thatremovesthem. div#navbarul{ list-style-type:none; } Nowthebulletsaregone. We’llcontinuewiththenavigationbarinthenextchapter. 1. InyourCSSfile,codeadividforanavigationbar.Includeanid.Giveitaclear: bothspecificationtopreventwrapfromthedivaboveit. 2. Styleanunorderedlistwithinthedivsoithasnobullets. 3. InyourHTMLfile,codethediv. 4. Withinthediv,codeanunorderedlistwithlinks.Makeupthelinks.Theydon’t havetowork. 5. Savethefiles.Displaythepage. SampleCSScodeisat: http://asmarterwaytolearn.com/htmlcss/practice-69-1.html. SampleHTMLcodeisat: http://asmarterwaytolearn.com/htmlcss/practice-69-2.html. 70 Averticalnavigationbar part2 Inthelastchapter,westartedconstructinganavigationbar.Wecreatedanunordered list,madethelistitemsclickable,andremovedthebullets.Nowlet’sstyletheanchors. Thestylewillapplytoallanchorsthatarelistitemsinanunorderedlistinthedivwith anidof“navbar.” div#navbarullia{ font-family:Arial,Helvetica,sans-serif; font-size:1.1em; font-weight:900; } Nowwehavethis. Sinceit’sanavigationbar,wecanassumethattheuserknowsit’sclickable.We don’tneedtheunderlinetocommunicatethatthetextitemsarelinks.So… div#navbarullia{ font-family:Arial,Helvetica,sans-serif; font-size:1.1em; font-weight:900; text-decoration:none; } Thisistheresult. We’llcontinueconstructingthenavigationbarinthenextchapter. InyourCSSfile,maketheanchorsbigger,bolder,andsans-serif.Takeawaythe underlines.Savethefile.Displaythepage. SampleCSScodeisat: http://asmarterwaytolearn.com/htmlcss/practice-70-1.html. Findtheinteractivecodingexercisesforthischapterat: http://www.ASmarterWayToLearn.com/htmlcss/70.html 71 Averticalnavigationbar part3 Inthelastchapterwestyledtheanchors.Nowlet’sgivethedivabluebackground. div#navbar{ background-color:blue; } We’llmaketheanchorswhitesotheyshowuponthebluebackground. div#navbarullia{ font-family:Arial,Helvetica,sans-serif; font-size:1.1em; font-weight:900; text-decoration:none; color:white; } Andwe’llstylethedivsoit’sjustwideenoughtoaccommodatethelistitems,but nowider. div#navbar{ clear:both; background-color:blue; display:inline-block; } inline-blocktellsthebrowsertoshrinktofit. Nowwehave… Thebrowserhasn’tforgottenthatthisisalist,soithasaddedpaddingontheleft sidetoindentit.Wedon’twantitindented.Sowespecifyzeroleft-sidepaddingforthe ul. div#navbarul{ list-style-type:none; padding-left:0; } Thatmovesitflush-left. Becauseanunorderedlistisablockelement,thebrowserhasaddedtopandbottom margins.We’llkeepthem.InyourCSSfile… 1. Makethenavigationbardivadarkcolor. 2. Maketheanchorsalightcolor. 3. Shrinkthenavigationbartofit. 4. Removepaddingfromtheleftsideofthelist. 5. Savethefile.Displaythepage. SampleCSScodeisat: http://asmarterwaytolearn.com/htmlcss/practice-71-1.html. http://www.ASmarterWayToLearn.com/htmlcss/71.html 72 Averticalnavigationbar part4 We’restillworkingontheverticalnavigationbar. Iwantthecolorblocktoexpandhorizontally.Wecoulddothisbyaddingleftand rightpaddingtotheul,butbecauseofsomethingwe’regoingtodointhenextchapter, I’lladdthepaddingtothelielementsinstead. div#navbarulli{ padding:01em01em; } Nowwe’lladdalittlepaddingbeloweachlistitemtoseparatethem. div#navbarulli{ padding:01em.3em1em; } Theresult: InyourCSSfile,addsomepaddingontheleftandrightoflistitems.Addalittle paddingtothebottomofeachlistitemtoseparatethem.Savethefile.Displaythepage. SampleCSScodeisat: http://asmarterwaytolearn.com/htmlcss/practice-72-1.html.Findtheinteractivecoding exercisesforthischapterat:http://www.ASmarterWayToLearn.com/htmlcss/72.html 73 Averticalnavigationbar part5 Theverticalnavigationbarwecreatedinthelastchapterisfunctional,butdoesn’t lookthatgreat.Let’sdressitupalittle. Insteadofalistoflinksagainstabluebackground,we’regoingtohavefiveseparate blueblocks.Eachblockisanavigationchoice. Weremovethebluebackgroundfromthediv,sincewe’regoingtocolortheli elementsindividually. div#navbar{ background-color:blue; display:inline-block; clear:both; } Thestylingfortheunorderedlistisunchanged… div#navbarul{ list-style-type:none; padding-left:0; } We’regoingtocoloreachlielementseparately,sowewrite… div#navbarulli{ background-color:blue; padding:01em.3em1em; } We’regoingtostretchoutthebluelielementsbypaddingtheaelementsinside them,sowenolongerneedpaddingonthelielements. div#navbarulli{ background-color:blue; padding:01em.3em1em; } Toenlargethebluebackgroundofthelielements,wedeclareeachaelementa blockandpaditout. div#navbarullia{ font-family:Arial,Helvetica,sans-serif; font-size:3em; font-weight:900; text-decoration:none; color:white; display:block; } Allthesechangesproducethis. Separatethelistitemswithalittlebitofbottommargin… div#navbarulli{ background-color:blue; margin:00.25em0; } Andthereyouhaveit: ReviseyourCSSfiletostylethenavbarliketheoneshownabove.Savethefile. Displaythepage.(Codethelibottommarginasabove,specifying0fortheotherthree sides,tooverrideageneralmarginspecificationforlielementsthatyoucodedearlier.) SampleCSScodeisat: Findtheinteractivecodingexercisesforthischapterat: http://www.ASmarterWayToLearn.com/htmlcss/73.html 74 Ahorizontalnavigationbar part1 Youdon’tneedtoknowmuchmorethanyoualreadyknowinordertocreatea horizontalnavigationbar.Likeaverticalnavigationbar,it’sjustalistoflinkswithsome styling. We’llstartbyreplacingtheshrink-to-fitinline-blockspecificationwithawidth. div#navbar{ display:inline-block; width:100%; } Theulstylingisthesameasbefore. div#navbarul{ list-style-type:none; } Theaelementstylinghasonlyonechange. div#navbarullia{ font-family:Arial,Helvetica,sans-serif; font-size:1.1em; font-weight:900; text-decoration:none; color:white; display:block; padding:.75em; } Thebigchangesareinthelistyling. div#navbarulli{ background-color:blue; text-align:center; display:inline; width:19%; float:left; margin-right:.5em; } display:inlinetellsthebrowsernottoarrangethelistitemsvertically,the default,buttoputthemside-by-side. Wewanteachofthefiveblockstobethesamewidth.Byspecifyingthateachblock occupy19%ofthewidthofthediv,weleaveroomforthemarginthatcreatesalittle whitespacebetweeneachblock. acrossthewindow. The.5emrightmarginseparatestheblockswithalittlewhitespace.Wewouldn’t havetodothis,ofcourse.Wecouldskipthemarginandhavethenavigationbarbeasolid blueblockacrossthewindow. Thisistheresult.(I’mshowingyoujustthelefthalfofthemenu.) ChangeyourCSSfiletoconverttheverticalmenutoahorizontalmenu.Savethe file.Displaythepage. SampleCSScodeisat: http://asmarterwaytolearn.com/htmlcss/practice-74-1.html. Findtheinteractivecodingexercisesforthischapterat: http://www.ASmarterWayToLearn.com/htmlcss/74.html 75 Ahorizontalnavigationbarpart2 Let’saddtwomorefeaturestothenavigationbar.Whentheuserhoversovera selection,thebluecolorblockturnslightblue. Inordertodothis,weneedtocreatespecialclassforthelielements.Westartby removingalinewe’vealreadycoded. div#navbarulli{ background-color:blue; text-align:center; display:inline; width:19%; float:left; margin-right:.5em; } Thenwecreatethespecialliclass. li.changeBackground{ Westartbycodinganormalcolorfortheclass. li.changeBackground{ background-color:blue; } Thenwecodethehoverstate. li.changeBackground:hover{ background-color:lightBlue; } Wecanalsocodeacolorfortheactivestate. li.changeBackground:active{ background-color:darkBlue; } Whentheuserclicksaselection,thecolorblockturnsdarkblue. ThisistheHTML. <divid=“navbar”> <ul> <liclass=“changeBackground”><ahref=“why-chooseus.html”>WhyChooseUs</a></li> <liclass=“changeBackground”><ahref=“recentprojects.html”>RecentProjects</a></li> <liclass=“changeBackground”>ahref=“ourteam.html”>OurTeam</a></li> <liclass=“changeBackground”><ahref=“get-aquote.html”>GetaQuote</a></li> <liclass=“changeBackground”><ahref=“contactus.html”>ContactUs</a></li> </ul> </div> ChangeyourCSSandHTMLfilestocreateaclassoflistitemthatisonecolorto startwith,asecondcolorwhenit’smousedover,andathirdcolorwhenit’sactive.Save thefiles.Displaythepage. SampleCSScodeisat: http://asmarterwaytolearn.com/htmlcss/practice-75-1.html. SampleHTMLcodeisat: http://asmarterwaytolearn.com/htmlcss/practice-75-2.html. Findtheinteractivecodingexercisesforthischapterat: http://www.ASmarterWayToLearn.com/htmlcss/75.html 76 Backgroundimagespart1 Inpreviouschaptersyoulearnedhowtounderlayanelementwithasolidcolorusing background-color.Youcanalsounderlayanelementwithanimage.Thisisan example. div#main{ background-image:url(“images/field-of-poppies.jgp”); } Thedivwithanidof“main”willbeunderlaidwiththeimagewhoseURLisshown insidetheparenthesesandquotationmarks. Youcanputabackgroundimagebehindanyelement.It’scommontounderlaythe wholepagewithanimage. body{ background-image:url(“images/gray-gradient.png”);} TheentirepagewillbeunderlaidwiththeimagewhoseURLis“images/graygradient.png”.Intheexampleabove,theimage,whichmustbesizedtofitthewholepage, willbealargeone,andsowilltakesometimetoload.Ifyourbackgroundimageis nothingbutarepeatingpattern,youcanmakeitloadfasterbyspecifyingasmallslicefor theimageandaskingthebrowsertorepeatit. Youcancutthisimagedowntoa1-pixel-wideslicethathasthesameheight,and writethisCSS: body{ background-image:url(“images/gray-gradient-slice.png”); background-repeat:repeat-x; } Theslicewillbetiledallacrossthewidthofthepage(thex-axis),creatingthesame effectasthebigimage,butusingafast-loadingsmallimage. Supposeyouhaveagradientfadingfromleft-to-rightratherthantop-to-bottom. Thenyouwouldtakea1-pixel-highhorizontalsliceandtileitfromtoptobottom(theyaxis). body{ background-image:url(“images/gray-gradient-slice.png”); background-repeat:repeat-y; } Ifyouhaveabackgroundimagethatyouwanttorepeatbothhorizonallyand vertically,omitthebackground-repeat:specification. background-image:url(“images/gray-gradient-slice.png”); background-repeat:repeat-x; } Thebrowserwillautomaticallytiletheimageinbothdirectionstofillthepage. InyourCSSfile,findthedivthat’s20%wide.Tilethefollowingimageacrossthe widthofthediv:http://www.asmarterwaytolearn.com/gray-gradient-slice.png.Savethe file.Displaythepage.Checkoutthediv. SampleCSScodeisat: http://asmarterwaytolearn.com/htmlcss/practice-76-1.html. Findtheinteractivecodingexercisesforthischapterat: http://www.ASmarterWayToLearn.com/htmlcss/76.html 77 Backgroundimagespart2 Supposeyouhaveanimagethat’ssmallerthanthepageandyouwanttokeepitthat way.Youdon’twantittorepeat.Butifyouwrite… body{ background-image:url(“images/faded-logo.png”); } …thebrowserwillautomaticallyrepeatit,tofillthepage.Soyouwrite… body{ background-image:url(“images/faded-logo.png”); background-repeat:no-repeat; } Asmallimagethatdoesn’trepeatisplaced,bydefault,attheleft-uppercorner.But youcanspecifyaposition. body{ background-image:url(“images/faded-logo.png”); background-repeat:no-repeat; background-position:righttop; } Nowtheimagewillbepositionedattheright-topcorner. Thehorizontalspecificationsareleft,center,andright.Thevertical specificationsaretop,center,andbottom.Youalwayswritethehorizontal specificationfirst.It’sleftbottom,neverbottomleft.Ifyouwanttocenteran imagebothhorizontallyandvertically,youwrite: background-position:center; Doyouwanttheimagetoscrollwitheverythingelse?Ifso,youwrite… body{ background-image:url(“images/faded-logo.png”); background-repeat:no-repeat; background-position:righttop; background-attachment:scroll; } Ifyouwanttheimagetostayput,youwrite… body{ background-image:url(“images/faded-logo.png”); background-repeat:no-repeat; background-attachment:fixed; } InyourCSSfile,addabackgroundimagetotherighttopofthewindow.Don’tletit repeat.Fixitinplace.Theimageishttp://www.asmarterwaytolearn.com/monarch.jpg.In yourHTMLfile,use<!—and-->tohidethefixed-positionheaderfromthebrowserso itdoesn’tdisplay.Savethefile.Displaythepage. SampleCSScodeisat: http://asmarterwaytolearn.com/htmlcss/practice-77-1.html. SampleHTMLcodeisat: http://asmarterwaytolearn.com/htmlcss/practice-77-2.html. Findtheinteractivecodingexercisesforthischapterat: http://www.ASmarterWayToLearn.com/htmlcss/77.html 78 iframes AniframeislikeyourTV’spicture-in-picture.It’sanHTMLpagewithinanHTML page.Forexample,supposeIwanttoruntheMetropolitanOpera’spageinsidemypage. ThisistheHTML. <iframesrc=“http://metopera.org/”width=”700”height=“450”> </iframe> <p>TheMetropolitanOpera,commonlyreferredtoasthe“Met”,isa profitMetropolitanOperaAssociation,withPeterGelbasetc. Thingstonotice: There’sanopening<iframe>tagandaclosing</iframe>tag. src=”[URL]”specifiesthelocationoftheHTMLfilethat’stobeimbedded,the samewaysrc=”[URL]”specifiesthelocationofanimagefile.I’veshortenedthe URLsoyoucanfocusonthesyntax. Youspecifywidthandheightinpixels.Scrollbarsallowtheusertoexplorethewhole embeddedpage. Youcanwraptextaroundaniframe.ThisistheCSS. iframe{ float:left; margin:02em00; } InyourHTML,createaniframethatembedsanonlinewebpageofyourchoice. Savethefile.Displaythepage.Adjustthedimensionsoftheiframeuntilyou’rehappy withtheresult. SampleHTMLcodeisat: http://asmarterwaytolearn.com/htmlcss/practice-78-1.html. Findtheinteractivecodingexercisesforthischapterat: http://www.ASmarterWayToLearn.com/htmlcss/78.html 79 EmbeddingYouTubevideos Thereareseveralwaysyoucanaddvideotoyourwebsite.Theeasiestistoembeda YouTubeorVimeovideo.Plus,whenyouletYouTubeorVimeohostthevideofree insteadofstoringitonyourwebhost’sserver,youavoidpossibleextrachargesyour webhostmighthityouwithforusingextrabandwidth(videoisabandwidthhog). Forcompletecontrol,youcanhostvideosyourself.Thevastmajorityofsiteowners don’tdoit,though,becauseit’saheadache—andnotjustaregularheadachebuta migraine.Becausemakersofdevices,operatingsystems,andbrowserscan’tagreeonone videostandard,youhavetocreateavarietyofdifferentvideofilesifyouwantyourvideo tobeseenbyeverybody.You’reashoemanufacturerwhohastomakesixteendifferent sizes. Sinceit’ssomucheasiertoletYouTubeorVimeohandlethecompatibilityissues, that’swhatI’mgoingtofocuson. InthelastchapteryoulearnedhowtoplaceanexteriorpageinsideanHTMLpage bycodinganiframe.That’sthemethodyouusetoembedaYouTubeorVimeovideo. Let’sstartwithYouTube. YoucanfindouthowtopostaYouTubevideoatYouTubeorelsewhereonline.I’m goingtoassumeyou’veproducedyourvideoandpostedittoYouTube.Here’showtoput itonyourwebpage. 1. FindyourvideoonYouTube.Locate“Share”underthevideowindowandclickit. 2. Click“Embed.” 3. Click“SHOWMORE.” 4. Scrolldowntoseesomechoicesyoucanmake. 5. ClicktheVideosizedropdown,andyoucanchoosefromfourstandardvideosizes. Youcanalsochoose“Custom.” Ifyouchooseacustomsize,besuretokeeptheratioofwidthtoheightat16to Otherwise,thepicturewilldistort.Toremembertheratio,pictureayoungpersonin theU.S.gettingherdriver’slicense(16yearsold),anddrivingthenumber9around. Youcanalsousearatioof4to3.Ifyoudo,you’llneedtochangetheAspectRatio onyourvideo’sPlayercontrolspanel.Seethenextchapterformoreonthis. 6. Next,lookattheotherchoicesyouhave,belowtheVideosizedropdown. You’llwanttouncheck“Showsuggestedvideoswhenthevideofinishes,”unlessyou finishes. “Enableprivacy-enhancedmode”meansthatYouTubewon’tstoreinformationabout visitorstoyoursiteunlesstheyplaythevideo.Inmostcases,youwon’tcareabout this. 7. Whenyou’vefinishedmakingyourselections,copyandpastetheYouTubegeneratediframecodeintoyourHTMLdocument. 8. Ifyou’dliketoaddaframeborder,changethe“0”toa“1”. <iframewidth=“640”height=“360”src=”//www.youtube.com/embed/_t rel=0”frameborder=“1”allowfullscreen></iframe> 9. Ifyoudon’twanttheusertobeabletoenlargetheframetofullscreensize,delete allowfullscreen. <iframewidth=“640”height=“360”src=”//www.youtube.com/embed/_t rel=0”frameborder=“1”allowfullscreen></iframe> InyourHTMLfile,replacetheiframeyoucodedforthelastchapterwithan embeddedYouTubevideo.Itdoesn’thavetobeyourownvideo.Usemineifyoulike: https://www.youtube.com/watch?v=_tky2rAxBIUSavethefile.Displaythepageandplay thevideo. SampleHTMLcodeisat: http://asmarterwaytolearn.com/htmlcss/practice-79-1.html. Findtheinteractivecodingexercisesforthischapterat: http://www.ASmarterWayToLearn.com/htmlcss/79.html 80 Furthercustomizing YouTubevideos Whenyou’reembeddingavideoonyoursite,youmaynotwantaYouTubevideoto looklikeaYouTubevideo.YoumaywantittodisplaywithouttheYouTubebrandingand controls. WhenyoubanishtheYouTubebrandingandcontrols,aYouTubelogowillappearin thelowerrightcornerbeforeplaybackandwhentheusermousesoverthevideo,but otherwise,you’vegotavideothatlooksproprietary. Youcanchoosefromanumberofoptionstomakethevideolookandperformthe wayyouwantitto.ButyouhavetogotoGoogle,theownerofYouTube,todoit. Beginbycopyingyourvideo’sYouTubeIDfromtheYouTubeURLforyourvideo. It’sthecodethatfollowstheequalsign. Alternatively,youcancopytheIDfromtheiframecodethatYouTubeoriginally generatedforyou. <iframewidth=“640”height=“360”src=”//www.youtube.com/embed/ rel=0”frameborder=“1”allowfullscreen></iframe> NotethattheIDendsatthelastcharacterbeforethequestionmark.Goto: https://developers.google.com/youtube/youtube_player_demo. Pasteyourvideo’sIDintothevideoIDfield. Click“Updateplayerwithselectedoptions. Googlereplacesthedemovideoswithyourvideowhenyouclick“Updateplayer withselectedoptions.” IfyourIDiscorrect,thefourvideothumbnailsarereplacedbyyourvideo.Itplays. Youcanpauseitwhileyouchoosecustomoptions. Next,clicktheShowplayerparametersbuttonatthetopofthepanel. Anotherpanelwithanarrayofcustomizingchoicesdisplays. ClickmodestbrandingtobanishtheYouTubelogo. Whenyou’vefinishedmakingselections,onceagainclick“UpdatePlayerwith SelectedOptions”atthetopofthepanel. Theiframeembedcodechangestoreflectyourselections.Copyandpasteitinto yourHTMLdocument. InyourHTMLfile,changeyourembeddedvideosoithasmodestbranding.Save SampleHTMLcodeisat: http://asmarterwaytolearn.com/htmlcss/practice-80-1.html. Findtheinteractivecodingexercisesforthischapterat: http://www.ASmarterWayToLearn.com/htmlcss/80.html 81 EmbeddingVimeovideos IfYouTubeisthenetworkTVofonlinevideo,Vimeoiscable.It’salittleclassier, looksalittlebetter,andispreferredbymanycreativepeople.It’sfreeforthebasicservice. YoucanremoveallVimeobrandingifyou’rewillingtopay$199ayear. TheprocessofembeddingaVimeovideoissimilartoYouTube’s. I’massumingyou’veproducedyourvideoandpostedittoVimeo.Here’showtoput itonyourwebpage. 1. OnyourVideospageatVimeolocatethevideoyouwanttoembed.Clickthepaperairplaneiconattheupperright. 2. Anewwindowopens.Ifyoudon’tchoosetocustomize,copytheiframecodeand pasteitintoyourHTMLdocument,andyou’redone. 3. Tocustomize,click+ShowOptions. 4. Selecttheoptionstochangefromthedropdown. 5. Intheoptionspanelyoucanspecifythedimensionsofthevideoplayer.Changethe widthortheheight.Vimeowillautomaticallychangetheotherdimensiontopreserve theratioof16to 6. Byclickingonacolorblockorspecifyingacolorbyhexcodeyoucanchangethe colorthevideotitle.Thecoloroftheprogressbarwillchangetomatch. 7. Foracleanlook,you’llprobablywanttouncheckPortrait,Title,Byline,andShow textlinkunderneaththisvideo. 8. Tomakethevideoplayautomatically,checkAutoplaythisvideo.Tomakeitloop checkLoopthisvideo.Chancesare,youdon’twantavideodescription.Ifyou don’t,leavethelastitemunchecked. 9. CopytheembedcodeandpasteitintoyourHTMLdocument. For$59.95ayearVimeogivesyouadditionalcustomizationoptionsandother privilegesincludingfasterconversion.For$199ayear,theVimeologogoesaway;you can,ifyouwish,insertyourownlogo. InyourHTMLfile,replacetheembeddedYouTubevideowithanembeddedVimeo video.Usemineifyoulike:https://vimeo.com/97326700Sinceyou’rerunningtheHTML locallyratherthanontheWeb,youneedtoinserthttp:atthebeginningofthevideo URLsoyourpagecanconnecttothevideoonline.Savethefile.Displaythepage. SampleHTMLcodeisat: http://asmarterwaytolearn.com/htmlcss/practice-81-1.html. http://www.ASmarterWayToLearn.com/htmlcss/81.html 82 Audio It’sfareasiertohostyourownaudiofilesthanyourownvideofiles,becausethe compatibilityissuesaretamer.IfyouuseAudacityoranotheraudioeditortosaveyour fileinjusttwoformats,mp3andOggVorbis,youraudiowillplayinanymodernbrowser, usingHTML5.Thisisthecode. <audiocontrols> <sourcesrc=“whatever.ogg”> <sourcesrc=“whatever.mp3”> </audio> Ifaparticularbrowsercan’thandletheOggVorbisfile,it’llplaythemp3file. Theaudiotagshownaboveincludestheoptionalcontrols.Thistellsthebrowser tomaketheplayervisibleandallowtheusertocontrolit. <audiocontrols> <sourcesrc=“whatever.ogg”> <sourcesrc=“whatever.mp3”> </audio> Analternativeistohavetheaudioautoplay,withorwithoutcontrols.Thefollowing codestartstheaudioautomatically,withoutavisibleplayer. <audioautoplay> <sourcesrc=“whatever.ogg”> <sourcesrc=“whatever.mp3”> </audio> Thefollowingcodestartstheaudioautomaticallyanddisplayscontrols. <audiocontrolsautoplay> <sourcesrc=“whatever.ogg”> <sourcesrc=“whatever.mp3”> </audio> Becarefulwithautoplay.Inmostsituations,usersfinditannoying. Youcanaddaparagraphinsidetheaudiotagsthatdisplaysiftheuserhasanantique browserthatdoesn’thandleHTML5. <audiocontrols> <sourcesrc=“whatever.ogg”> <sourcesrc=“whatever.mp3”> </audio> InyourHTMLfile,inserta<br>atthebottom,thenembedtheaudiofiles http://www.asmarterwaytolearn.com/boing.oggand http://www.asmarterwaytolearn.com/boing.mp3.Savethefile.Displaythepage.Playthe audio. SampleHTMLcodeisat: http://asmarterwaytolearn.com/htmlcss/practice-82-1.html. Findtheinteractivecodingexercisesforthischapterat: http://www.ASmarterWayToLearn.com/htmlcss/82.html 83 Emsvs.percentagesvs.pixels Ems,percentages,andpixelsarethreedifferentunitsofmeasurementthatyouuseto styletheelementsofawebpage.They’resomewhatinterchangeable.Thatis,although I’vetaughtyou,forexample,toexpressfont-sizeinems,youcan,ifyoulike,express itinpixelsorasapercentage. Pixelsareeasytoworkwith,becausethey’resimpleandabsolute.Withpixels,you don’thavetodealwiththesometimesconfusingrelativismofemsandpercentages.But theproblemwithpixelsisthattheyareabsolute.ACSSfilefullofpixelspecifications doesn’tadapttodifferent-sizescreens,becauseitisn’trelative.Theneedforresponsive designforcesustolimitouruseofpixelsandstickmostlytoemsandpercentages.Here aretherulesofthumbthatmanydevelopersfollow,andthatIusuallyfollowinthisbook. Ems—Usethemfortypography,margins,andpadding. Percentages—Usethemfordivs,tables,iframes,andsometimesmarginsand padding. Pixels—Usethemforimages,borders,windows,iframes,andfixed,absolute,and relativepositioning(seenextchapter). InyourCSSfile,styleanewdivclass.Makeitlessthanthefullwidthofthe window.Thenstyleanewparagraphclass.Makeitlessthanthefullwidthofthedivand centerit.InyourHTMLfile,codeadivofthatclassand,withinit,aparagraphofthat class.Savethefiles.Displaythepage. SampleCSScodeisat: http://asmarterwaytolearn.com/htmlcss/practice-83-1.html. SampleHTMLcodeisat: http://asmarterwaytolearn.com/htmlcss/practice-83-2.html. Findtheinteractivecodingexercisesforthischapterat: http://www.ASmarterWayToLearn.com/htmlcss/83.html 84 Relativeandstaticpositioning Asyouknow,thebrowserdisplaystheelementsofyourpageinthesameorderin whichyouwritetheminyourHTMLdocument.Ifyouwriteaheading,followitwitha paragraph,followthatwithatable,andfollowthetablewithasecondparagraph,the browserwilldisplayeverythinginthatorder: Heading Paragraph1 Table Paragraph2 ButasyousawinChapters64and67,youcaninterferewiththisnaturalorder.In thosechapters,youlearnedhowtopositionaheaderexactlywhereyouwantitregardless ofitsorderintheHTMLdocumentusingabsoluteandfixedpositioning.So,withabsolute andfixedpositioning,whereyouplacethecodeinthedocumentdoesn’taffectitsposition onthepage.Youcouldaddthecodetotheveryendofthebodysection,putitsomewhere inthemiddle,orstartitoffatthebeginning.Itslocationonthepageisdeterminedbythe positionyouspecifyinyourCSS,notitspositionintheHTMLdocument. Andremember,withthesetypesofpositioning,alltheotherelementsbehaveasif theydon’tknowtheelementisthere.Theydon’tmakeroomforit,astheydofornormally positionedelements.Thiscreatesoverlapunlessyoupullatrickliketheoneyoulearned inChapter68,creatinganinvisiblecopyoftheheaderthat’spositionednormallyandso actsasaspacer,tokeeptheothernormally-positionedelementsfromdisappearing underneaththefixed-positionheader. Bothabsoluteandfixedpositioningspecifyspacingintermsofhowfartheyare fromtheedgesofthebrowserwindow. Athirdwaytointerferewiththebrowser’sdefaultlayoutistospecifyrelative positioning.Relativepositioningtellsthebrowsertopositionanelementacertaindistance fromitsnormalposition. Forexample,ifyouwantedtopositionsomeparagraphs50pixelsbelowtheir normalposition,youcouldwrite,forexample… p.spaced-out{ position:relative; top:50px; } Ifyouwantedatablepushedupandnudgedleft,youcouldwrite,forexample… position:relative; bottom:25%; right:35%; } Inrelativepositioningtheotherelementsdon’tadjusttotherelativelypositioned element’salteredposition.Theybehaveasiftheelementwereinitsnormalposition.So, aswithabsoluteandfixedpositioning,it’spossibletohaveoverlap.Ifnecessary,youcan solvethiswithaspacingtacticsimilartotheoneyoulearnedinChapter68. Inmostcircumstances,youdon’thavetotellthebrowsertopositionanelement normally,sincethat’sthedefault.Butjustsoyouknow,anormallypositionedelementhas staticpositioning. div.normal{ position:static; } InyourCSSfile,userelativepositioningtomovethedivthatyoucreatedforthelast chaptertotheright.Savethefile.Displaythepage. SampleCSScodeisat: http://asmarterwaytolearn.com/htmlcss/practice-84-1.html. Findtheinteractivecodingexercisesforthischapterat: http://www.ASmarterWayToLearn.com/htmlcss/84.html 85 z-index Inthelastchapteryoulearnedthatwhenyouoverridethenormalflowofawebpage byusingfixed,absolute,orrelativepositioning,elementsmayoverlapeachother. Occasionally,youmaywantthistohappen.Forexample,youmightwanttooverlaya headingontopofanimage. Youwanttheheadingtobeontopoftheimage,nottheotherwayaround.Howdo youtellthebrowsertoputtheheadingontop?Byspecifyingaz-indexfortheheading. Thehigherthez-index,thehigheritgoesinthestack.Anelementwithazindexof10willsitontopofanelementwithaz-indexof9. Thedefaultz-indexofelementsis0.Soifyougiveyourheadingaz-indexof 1,it’llbeplacedontopoftheimage,which,assumingyouhaven’tassigneditazindex,hasaz-indexof0. h2#header{ z-index:1; } Ifyougiveitaz-indexof-1,it’llbeonelayerbelowthedefault. 1. InyourCSSfile,codeadivid. 2. Fixitspositionatthebottom-left. 3. Giveitaz-indexof-1. 4. InyourHTMLfile,codetheid.Placeanimageinsideit: http://www.asmarterwaytolearn.com/monarch.jpg. 5. Savethefiles.Displaythepage.Scrollandseewhathappens. SampleCSScodeisat: http://asmarterwaytolearn.com/htmlcss/practice-85-1.html. SampleHTMLcodeisat: http://asmarterwaytolearn.com/htmlcss/practice-85-2.html. Findtheinteractivecodingexercisesforthischapterat: http://www.ASmarterWayToLearn.com/htmlcss/85.html 86 Mediaqueries Thesedays,youalmosthavetomakeyoursiteresponsive.Thatmeanscreating customstylingforscreensofdifferentsizes,fromthesmallestphonetothelargest desktop. Forexample,fivemedium-sizeimagesarrayedacrossthescreenarefineifthe screenis1280pixelswide.Butnotifit’sa480-pixeliPhonescreen.Onaphone,you’ll wanttoforcethemtostackvertically. Tocreatedifferentstylerulesfordifferentscreens,youwritemediaqueries.For example,amediaqueryasks,“Isthescreennowiderthanxpixelsandnonarrowerthany pixels?Ifso,followthesestylerules.” Responsivedesigncanbeamaddeninglycomplicatedbusinessanddeservesabook ofitsown,butIwanttogiveyouasenseofhowitworks,soI’llshowyouoneexample. Therearevariouswaystoincorporatemediaqueriesinyourcode.I’llshowyouhow toaddthemtoastylesheet. Therearethirteendifferentmediacharacteristicsyoucantestforinamediaquery, includingcolorandwhethertheuserislookingatamobiledeviceinportraitorlandscape orientation.I’llfocusonthemostcommontests,forascreenofanykind(thatis,nota printer)andforminimumdevicewidthandmaximumdevicewidth. Here’ssomecode. @mediaonlyscreenand(min-device-width:320px)and(maxdevice-width:480px){ img.gallery{ display:block; } } Thecodeabovespecifiesblock—thatis,oneoneachline—forthe“gallery”class ofimageswhendisplayedonaphone,adevicewedefineashavingaminimumwidthof 320pixelsandamaximumwidthof480pixels. Let’slookateachpieceofthecode. @mediaishowallmediaqueriesbegin. @mediaonlyscreenand(min-device-width:320px)and(maxdevice-width:480px){ img.gallery{ display:block; } onlyscreenmeansthestyleruleappliesonlytodeviceswithscreens.Thismeansit doesn’tapplytoprinters. @mediaonlyscreenand(min-device-width:320px)and(maxdevice-width:480px){ img.gallery{ display:block; } } Whenyouwriteandinamediaquery,you’resaying,“Thefollowingmustalsobe trueinorderforthestyleruletoapply.”Soit’snotenoughforthedevicetobeascreen.It mustbeascreenandtheminimumdevicewidthmustbe320pixels(portraitmode)and themaximumdevicewidthmustbe480pixels(landscapemode). @mediaonlyscreenand(min-device-width:320px)and(maxdevice-width:480px){ img.gallery{ display:block; } } Thedevice-widthspecificationsmustbeenclosedinparentheses. @mediaonlyscreenand(min-device-width:320px)and(maxdevice-width:480px){ img.gallery{ display:block; } } Bywritingdisplay:block,youtellthebrowsernottofloattheimages. @mediaonlyscreenand(min-device-width:320px)and(maxdevice-width:480px){ img.gallery{ display:block; } } Thefollowingmediaquerytellsthebrowsertofloattheimageswhenthey’re displayedonadesktoporlaptop,definedashavingaminimumwidthof1224pixels.Note thatthere’snomaximumwidth,sincewe’retestingforjustoneorientation. @mediaonlyscreenand(min-device-width:1224px){ img.gallery{ float:left; } } family“ComicSansMS”,cursive,sans-serif—ifthescreenisat: least800pixelswide. 2. InyourHTMLfile,codeaparagraphofthatclass. 3. Savethefiles.Displaythepage. SampleCSScodeisat: http://asmarterwaytolearn.com/htmlcss/practice-86-1.html. SampleHTMLcodeisat: http://asmarterwaytolearn.com/htmlcss/practice-86-2.html. Findtheinteractivecodingexercisesforthischapterat: http://www.ASmarterWayToLearn.com/htmlcss/86.html 87 Min-andmax-width Min-andmax-height Supposeyou’vestyledadivtooccupy20%ofthewidthofthescreen.Thisworks fineaslongasthescreenislarge,butwhathappensonaphonewitha320-pixelscreen? Thedivwidthshrinksto64pixels—anarrowstripedownthepagewithroomforoneor twowordsperline.Topreventthis,youspecifyamin-width. div#additional-info{ width:20%; min-width:200px; } Nowthedivwillrun20%ofthewidthofthescreen—butonlyaslongasthewidth doesn’tgobelow200pixels.Whenthatpointisreached,yourCSStellsthebrowserto makethewidth200pixels. Thenthere’stheoppositeproblem.You’vecreatedadivthatruns40%ofthewidth ofthescreen.Ablockoftextinsidethisdivmightmeasureauser-friendly12to14 wordswide.Butwhenthesamepageisdisplayedonanoversizescreen,itcouldstretchto 20wordswide.That’stoowideforeasyreading.Soyouspecifyamax-width. div#main{ width:40%; max-width:500px; } Now,onawidescreen,thewidthwillshrinkto500pixelswhen40%translatesinto morethan500pixels. Youcanalsoestablishlimitsonheight,usingmax-heightandmin-height. p.article{ min-height:150px; max-height:600px; } Aproblemoccurswhenthecontentofanelementexceedsthemax-heightthat you’vespecifiedfortheelement.Intheexampleabove,youtellthebrowsertolimitthe paragraphtoaheightof600pixels.Ifthetextintheparagraphruns,say750pixelshigh, thetextoverflows,potentiallycreatingamess.Yousolvethiswithoverflow: hiddenoroverflow:scroll. Inthefollowingexample,youtellthebrowsertomakeanyoverflowingcontent invisible. min-height:150px; max-height:600px; overflow:hidden; } Inthefollowingexample,youtellthebrowsertodisplayascrollbarthatallowsthe usertoscrolldowntoanyoverflow. p.article{ min-height:150px; max-height:600px; overflow:scroll; } 1. InyourCSSfile,codeaclassofparagraphwithamax-widthof100pixelsanda max-heightof100pixels.Maketheoverflowscroll. 2. InyourHTMLfile,codeaparagraphofthatclass,includingatleastadozenwords. 3. Savethefiles.Displaythepage. SampleCSScodeisat: http://asmarterwaytolearn.com/htmlcss/practice-87-1.html. SampleHTMLcodeisat: http://asmarterwaytolearn.com/htmlcss/practice-87-2.html. Findtheinteractivecodingexercisesforthischapterat: http://www.ASmarterWayToLearn.com/htmlcss/87.html 88 Thestuffatthetop ThestandardcodeyoufindatthetopofanHTMLdocumentisgobbledygook,but asaconscientiouscoder,you’realwaysgoingtoincludeit,soyoumayaswellknowwhat itmeans. Thefirstlineinthedocumentisthedoctypedeclaration. <!DOCTYPEHTML> ThistellsthebrowserthedocumentiswritteninHTML5.Thisiswhatyou’llalways writewhenyou’recreatinganewdocument,whetherthedocumenthasanyHTML5 featuresinitornot.Thingstonotice: 1. Theexclamationpoint. 2. It’sinall-capitalletters,aconventionnotarequirement. 3. There’snoclosingtag. Nextcomesthe<html>tag.Tokeepthingssimple,I’vecodeditminimallyin previouschapters,buttherecommendedwaytowriteitislikethis. <!DOCTYPEHTML> <htmllang=“en”> Thatlittlebitofextrainformationtellsthebrowser,thesearchengines,andscreen readersthatthetextcontentofthepage—theheadings,paragraphs,andtables—arein English.IfyourpageisinItalian,you’dwritelang=“it”;inHindi,lang=“hi”;etc. Asyouknow,the<html>tagisclosedwith</html>attheendofthedocument. The<head>tag,whichyou’refamiliarwith,goesonthethirdline. <!DOCTYPEHTML> <htmllang=“en”> <head> Itisclosedwiththe</head>tagattheendoftheheadsection.Ataminimum,the headsectioncontains… <metacharset=“utf-8”> Thistagtellsthebrowsertouseaparticularflavoroftextencodingthatpermitsthe greatestvarietyofcharacters,thusaccommodatingthegreatestnumberoflanguages.The tagisn’tclosed. Next,you’llwriteopeningandclosingtitletags.Insidethemyou’llwritethetext thatwillappearinthebrowsertoolbar,inabookmarklist,andinsearchengineresults. Giveeachpageauniquetitlethatdescribesitsparticularcontents. <htmllang=“en”> <head> <metacharset=“utf-8”> <title>CharacteristicsoftheSlowLoris</title> InyourHTMLfile,codethefirsttwotagsatthetopofadocument.Codethemeta charsettagbeneaththeheadtag.Savethefile.Displaythepagetobesureyour changeshaven’tbrokenanything. SampleHTMLcodeisat: http://asmarterwaytolearn.com/htmlcss/practice-88-1.html. Findtheinteractivecodingexercisesforthischapterat: http://www.ASmarterWayToLearn.com/htmlcss/88.html 89 Themetadescription Ifyou’rehopingpeoplewillfindyourpagethroughasearchengineandthenclick onthelink,youneedametadescription.Agoodmetadescriptiondoesn’timproveyour searchranking,butitdoesincreaseclicks,becausesearchenginesdisplaythedescription inthesearchresult.WhenIgoogled“Carlypso,”Googledisplayedthisresult… www.carlypso.com SellyourcarwithCarlypso.Getupto40%morethantrade-inwiththesame convenience. Thetwosentencesfollowingthelinkarethemetadescriptioncodedintothe Carlypsohomepage.CanyouseewhyhavingGoogledisplaythesesentenceswould increasethenumberofclicks? Youwritethemetadescriptionintheheadsectionofyourpage. <head> <metacharset=“utf-8”> <title>SellYourCarHassle-Free</title> <metaname=“description”content=“SellyourcarwithCarlypso.Ge inwiththesameconvenience.”> Thingstonotice: Itbeginswith<metaname=“description” That’sfollowedbycontent= Thencomesthedescriptionitself,inquotes. There’snoclosingtag. Someadvice: Makeyourdescriptionasappealingaspossible,butdon’tpromisemorethanyoucan deliver. Searchenginescutoffadescriptionafterabout160characters.That’safewmore charactersthanaTwitterTweet.Limityourdescriptiontothatlength. Don’trepeatyourtitleasadescription. Giveeachpageonyoursiteauniquemetadescription. AddametadescriptiontoyourHTMLfile.Savethefile.Displaythepagetomake sureyourchangehasn’tbrokenanything.SampleHTMLcodeisat: Findtheinteractivecodingexercisesforthischapterat: http://www.ASmarterWayToLearn.com/htmlcss/89.html 90 Buildasite. Lookhowfaryou’vecome,andhowmuchHTMLandCSSyou’velearnedina rathershorttime.Congratulations. Sonowyou’rereadytobuildasite.(Andifyou’renottotallyready,youknow wheretofindtheinformationyouneedifyouforgethowtodosomething:rightherein thisbook.) Asafinalproject,I’mgoingtoaskyoutobuildathree-pagesiteforyourcity, region,orcountry.It’lldemonstratethemostimportantthingsyou’velearnedinthisbook. Youdon’thavetodoanyoriginalwriting.Allthecontentyouneedisat: Wikipedia,yourchamberofcommerce,oranynumberofinformationalwebsitesthat coveryourarea. Youcancreatethesiteonyourharddriveandrunitoffthedrive,asyou’vebeen doingwiththepracticepage.Or,ifyouhaveawebsite,youcanuploadittoyoursite.If youdopublishthesite,takecarethatyoudon’tviolateanycopyrightswhenyoucopy contentfromothersitesandpasteitintoyourHTMLfiles.(Wikipediaissafe.) I’vebuiltanexamplesitethatyoucanuseasamodel.It’sat http://www.asmarterwaytolearn.com/htmlcss/taos.html. FindtheCSSandHTMLfilesforthesiteat: http://www.asmarterwaytolearn.com/htmlcss/taos_css_code.html http://www.asmarterwaytolearn.com/htmlcss/taos_code.html http://www.asmarterwaytolearn.com/htmlcss/hiking_code.html http://www.asmarterwaytolearn.com/htmlcss/skiing_code.html I’veheavilycommentedthefirsttwofiles,tohelpguideyouinbuildingyourown site. ForcapturingimagesfromtheWeb,Ilikethefreeutilityfromhttp://prntscr.com. (Again:don’tviolateanyone’scopyrightifyou’regoingtopublish.) Tocropandresizeimagesonline,thefreehttp://picresize.comisexcellent. http://www.awardspace.comoffersfreehostingforasmallwebsite. https://filezilla-project.orgoffersafreeFTPclientthatmakesiteasytouploadyour filestoyourwebhost. Happywebsitebuilding. Acknowledgements Ifyoulikethebookandtheonlineexercises,giveatipofthehattothesereaders, whotookthetimetomakecorrectionsinthebookandexercises.Thisprogramisnowso muchbetterbecauseoftheirgenerosity. JamesFoxworthy JohnKoch JackMcKinnon TimMiller JimRohrer ChristopherUrrutia