In Full What you need to know and how to do it In Full Colour James A. Brannan Colour Brilliant guides allow you to fi nd the information that you need easily and without fuss. Using a highly visual, bbbrrriiilllllliiiaaannnttt b b step-by-step approach,Brilliant books will solve your technology problems and guide you through essential tasks, providing you with exactly what you need to know, just when you really need it. rr ii ll Spend less time reading and more time doing with a visual step-by-step approach to ll HTML & CSS programming ii aa nn brilliant HTML & CSS tt HTML & BrilliantHTML & CSS provides quick, easy-to- Brilliant HTML & CSS will enable you to create H access information with… accessible, standards-compliant websites – equipping you with knowledge on the theory, T • Full colour design throughout coding skills, and best practice needed to build M • Detailed Contents to help you fi nd exactly what you need sophisticated Web pages. This book will show you • Practical tasks presented in short accessible sections how to… L • Numbered steps to guide you through each task • Understand and use HTML tags and attributes • Numerous example screenshots • Mark-up text, links, images, tables and forms & • Cross reference boxes pointing you to related tasks in the • Get started with CSS book, or completed examples upon the website • Work with Style Sheets and selectors • For your information sections alerting you to relevant • Format basic elements and font styles C tips, tricks and advice CSS • Start using Web-safe colour in your pages • And a Troubleshooting guide to help you sort out the S most common problems and queries • Understand and defi ne Link States S • Master spacing, borders and element sizing • Align and place elements within your page • Understand and organise your site structure • Perfect your site navigation • Take your website live! Visit us on the Web at www.pearson-books.com/brillianthtml HTML & CSS wwhhaatt yyoouu nneeeedd ttoo kknnooww aanndd hhooww ttoo ddoo iitt £17.99 CVR_BRAN1529_01_SE_CVR.indd 1 2/3/09 15:20:11 A01_BRAN1529_01_SE_FM.QXD:BRILLIANT 30/1/09 10:38 Page i Brilliant HTML & CSS James A. Brannan A01_BRAN1529_01_SE_FM.QXD:BRILLIANT 30/1/09 10:38 Page ii PearsonEducationLimited EdinburghGate HarlowCM202JE UnitedKingdom Tel:+44(0)1279623623 Fax:+44(0)1279431059 Website:www.pearsoned.co.uk FirstpublishedinGreatBritainin2009 ©PearsonEducationLimited2009 TherightofJamesA.Brannantobeidentifiedasauthor ofthisworkhasbeenassertedbyhiminaccordance withtheCopyright,DesignsandPatentsAct1988. ISBN:978-0-273-72152-9 BritishLibraryCataloguing-in-PublicationData AcataloguerecordforthisbookisavailablefromtheBritishLibrary LibraryofCongressCataloging-in-PublicationData Brannan,JamesA. BrilliantHTML&CSS/JamesA.Brannan. p.cm. ISBN978-0-273-72152-9(pbk.) 1. Websites--Design.2. HTML(Documentmarkuplanguage)3. Cascadingstylesheets. I.Title. TK5105.888.B72432009 006.7'4--dc22 2009002154 Allrightsreserved.Nopartofthispublicationmaybereproduced,stored inaretrievalsystem,ortransmittedinanyformorbyanymeans,electronic, mechanical,photocopying,recordingorotherwise,withouteithertheprior writtenpermissionofthepublisheroralicencepermittingrestrictedcopying intheUnitedKingdomissuedbytheCopyrightLicensingAgencyLtd, SaffronHouse,6–10KirbyStreet,LondonEC1N8TS.Thisbookmaynotbelent, resold,hiredoutorotherwisedisposedofbywayoftradeinanyform ofbindingorcoverotherthanthatinwhichitispublished,withoutthe priorconsentofthePublishers. 10 9 8 7 6 5 4 3 2 1 13 12 11 10 09 Typesetin11ptArialCondensedby30 PrintedandboundinGreatBritainbyAshfordColourPressLtd,Gosport,Hants Thepublisher’spolicyistousepapermanufacturedfromsustainableforests. A01_BRAN1529_01_SE_FM.QXD:BRILLIANT 30/1/09 10:38 Page iii Brilliant guides What you need to know and how to do it When you’re working on your computer and come up against a problem that you’re unsure how to solve, or want to accomplish something that you aren’t sure how to do, where do you look? Manuals and traditional training guides are usually too big and unwieldy and are intended to be used as end-to-end training resources, making it hard to get to the info you need right away without having to wade through pages of background information that you just don’t need at that moment – and helplines are rarely that helpful! Brilliantguides have been developed to allow you to find the info you need easily and without fuss and guide you through the task using a highly visual, step-by-step approach – providing exactly what you need to know when you need it! Brilliantguides provide the quick easy-to-access information that you need, using a table of contents and troubleshooting guide to help you find exactly what you need to know, and then presenting each task in a visual manner. Numbered steps guide you through each task or problem, using numerous screenshots to illustrate each step. Added features include ‘Cross reference’ boxes that point you to related tasks and information on the website or in the book, while ‘For your information’ sections alert you to relevant expert tips, tricks and advice to further expand your skills and knowledge. In addition to covering all major office PC applications, and related computing subjects, the Brilliantseries also contains titles that will help you in every aspect of your working life, such as writing the perfect CV, answering the toughest interview questions and moving on in your career. Brilliantguides are the light at the end of the tunnel when you are faced with any minor or major task. iii A01_BRAN1529_01_SE_FM.QXD:BRILLIANT 30/1/09 10:38 Page iv Publisher’s acknowledgements Every effort has been made to obtain necessary permission with reference to copyright material.Insomeinstanceswehavebeenunabletotracetheownersof copyrightmaterial, and we would appreciate any information that would enable us to do so. Author’s acknowledgements Thanks to Adobe, for allowing screen shots of Adobe Kuler. Thanks also to FreeCSSTemplates (www.freecsstemplates.org); Rock Racing, and other websites who were gracious enough to permit me to include screenshots of their website. I am indebted to the creator of Vista Inspirate icons, by Saki on KDE-look.org; the website www.w3schools.com provided references on HTML and CSS, both of which are invaluable online resources. And thanks to the editorial team at Pearson, and my book agent, Neil Salkind at StudioB. About the author James A. Brannan is a consultant in Washington, DC, in the United States. He’s developed websites, using everything from AWK to CSS to Enterprise Java, and lives off government spending. Other than that he lives a pretty boring, but reasonably fulfilling, life. He has two kids and a wife but no dog. Like a true American, rather than bike commuting, he drives his car – correction, Sports Utility Vehicle – an hour each way to work every day, but then turns around and rides his bike so hard his eyes pop out for two hours or so near his home. Like a true computer book author, he has a pipe-dream that someday authoring technical books will lead to writing the ‘Great American Novel’. For Dr. Rosemary Conover. Thanks, I followed your advice and never looked back after making my decision. Now I'm doing it again… iv A01_BRAN1529_01_SE_FM.QXD:BRILLIANT 30/1/09 14:29 Page v i Introduction What you’ll do HTML & CSS Findwhatyouneedtoknow– WelcometoBrilliant HTML & CSSavisual,quickreference guidethatwillteachyouallthatyouneedtoknowtocreate whenyouneedit clean,forward-looking,standards-compliant,accessible Howthisbookworks websitesusingHyperTextMarkupLanguage&CascadingStyle Sheets.Itwillgiveyouasolidgroundingonthetheory,coding Step-bystepinstructions skills,andbestpracticesneededtouseHTML&CSStobuild sophisticatedWebpages–acompletereferenceforthe Troubleshootingguide beginnerandintermediateuser. Spelling Find what you need to know – when you need it Youdon’thavetoreadthisbookinanyparticularorder.We’ve Completed Task designedthebooksothatyoucanjumpin,gettheinformationyou examples can be found at: need,andjumpout.Tofindtheinformationthatyouneed,justlook www.pearson-books.com/ upthetaskinthetableofcontentsorTroubleshootingguide,and brillianthtml turntothepagelisted.Readthetaskintroduction,followthestep- by-stepinstructionsalongwiththeillustration,andyou’redone. Wherever you see a ‘Cross reference’ box, How this book works just log onto the website and select the appropriate Eachtaskispresentedintwodistinctcolumns:withtaskslisted inthesidebarandexamplescreenshotsandHTMLorCSScode link to view an example of displayedonthemainpartof thepage. the task. Everyexamplefollowsasetof TaskStepswhicharenumbered ( 2 )toindicateascreenshot,featureorfunction. TheHTMLandCSSexampleswithinthemaintextaredisplayed alongsideanumberedlist,tohelpyouidentifyanyparticularpiece of codingmentionedinaTaskStep.Justreferthetobracketed numbersattheendof aTaskStepwiththelistbesidethecode. Numbersarecolouredaccordingtochapter.Pleasenote:the numberedlistdoesnotformpartof thecode! v A01_BRAN1529_01_SE_FM.QXD:BRILLIANT 30/1/09 10:38 Page vi Pleasenote: CcoremamtinegntHsTML (cid:1) TYhoiusccahnapatdedrccloomsemsewnittshinonyeoufirnaHlT,MsimLpplaegbesu.tCimompomrteannttstaasrek. ‘HTML’and‘CSS’areinitialisms,soarecapitalised notestoyourselfandarenotrenderedbybrowsers.Computer programmersusecommentsextensivelyintheirprograms. Commentsdescribewhatthecodeisdoingandallowpeople throughoutthisbook,forstyleandconsistency.The toviewthecodelaterandfigureitout.HTMLcommentsserve thesamepurpose.CommentsaredifferentfromHTMLtags. actualcodewritteninsideHTMLtagsisnotcase- HTMLcommentsbeginwitha<!--andendwitha-->. Tasksteps Everythingbetweenisconsideredacommentandisnot sensitive,butforbestpracticeitisadvisedtobe renderedbybrowsers. 1 OpentheHTMLpagefromthe consistentthroughout.Documentextensionshowever, previoustask. <!--Thisisacomment.--> 2 Addacommentwithinthe bodyelement.(7)(8) (.htmlforexample),shouldalwaysbelowercase! 3 Saveandviewinyour Crossreference browser. Refertotasks_html/task_basic_html_document/ first.htmlforcompletedexample. Step-by-step instructions Jargonbuster Tshhoisurldesnu’tltbseovfisthibisletianskyoaurerWsterabigbhrtofworswear.rd,thecomment Extension–Letter followingafilename'sthat 1<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML Thisbookprovidesconcisestep-by-stepinstructions indicatestheinformation 24.01Transitional//EN" typeoffile.Forinstance, 3"http://www.w3.org/TR/HTML4/loose.dtd"> thatshowyouhowtoaccomplishatask.Eachsetof .inhdtmiclaitsesantheexfitelenscioonntathinast 45<<HhTeMaLd>><title>MyfirstHTMLdocument’s HTML. 6title.</title></head> instructionsincludesimagesthatdirectlycorrespond Integer–Awholenumber. 7<body><!—ThisismyfirstHTML totheeasy-to-readsteps.Eye-catchingtextfeatures Cisnoosudtrreucec–tciCooondmse,.psSuhotoeurrrtcfeorcode 1089dd<oo/ccHuuTmmMeeLnn>tt..</—b>odMyy>firstHTML provideadditionalhelpfulinformationinbite-sized iswrittencomputer instructions. ! chunkstohelpyouworkmoreefficientlyortoteach Important youmorein-depthinformation.The‘Foryour Pbrleoawsseenroatned:UresaedrsyocuanrccohmoomseenVtsie.wSourceintheir information’,‘Timesavertip’and‘Jargonbuster’ featuresprovidetipsandtechniquestohelpyouwork 14 smarter,whiletheCross-referenceURLsshowyou completedexamplesof thetask.Essentialinformation ishighlightedin‘Important’boxesthatwillensureyou don’tmissanyvitalsuggestionsandadvice. Troubleshootingguide Troubleshooting guide HTMLbasics Understandinghyperlinks IfyouwishtocreateanHTMLdocument, IfyouwishtoaddaURLtoyourdocument, andyoudon’tknowhow,seeCreatinga seeUsinghyperlinks-absoluteURLs,pg. Thisbookoffersquickandeasywaystodiagnoseand basicdocument:documentdeclaration, 47;seealso:Usinghyperlinks:relative header,metadataandbody,pg.12. URLs,pg.49. solvecommonproblemsthatyoumightencounter, IfyouwishtoaddacommenttoyourHTML, Ifyouwishtohavealinkedpageopenina usingtheTroubleshootingguide.Theproblemsare seeCreatingHTMLcomments,pg.14. newbrowserwindow,seeAddingtargetsto IfyouwishtocreateanHTMLparagraph, hyperlinks,pg.52. groupedintocategories. seeCreatingHTMLparagraphs,pg.20. Ifyouwishtolinkfromonelocationina Ifyouwishtocreateheadings,seeAdding documenttoanotherlocationinthe headingstoyourdocument,pg.22. document,seeCreatinganchors,pg.55. Spelling Idfoycouumwenisth,steoeaCdrdeaatilnisgtoofrditeermedsatnodyour ILfinykoiungwtisohatnoelminkailtoadadnreesmsa,iplga.d5d7re.ss,see unorderedlists,pg.24;seealso:Creatinga Ifyouwishtochangeahyperlink’s definitionlist,pg.28. appearanceorcolour,seeFormatting Ifyouwishtochangealisttouselettersor hyperlinks:color,pg.184;seealso: WehaveusedUKspellingconventionsthroughoutthis Romannumerals,seeFormattingordered Formattinghyperlinks-lines,borders, andunorderedlists,pg.30. backgroundcolor,pg.186. book,withtheexceptionofallcode,whichALWAYS Ifyouwishtoaddquotationmarks,see Ifyouwishtocreateanimagelink,see Formattingquotations,pg.32. Formattinghyperlinks-imagelinks,pg.188. usesUSspellings.Youmayalsonoticesome IfyouwishtoformatyourHTML,see inconsistenciesbetweenthetextandthesoftwareon Markingupothertextelements,pg.35. AddingandeditingimageswithHTML Ifyouwishtoaddspecialcharactersto Ifyouwishtoaddanimagetoyourpage, yourcomputerwhichislikelytohavebeendevelopedin yourHTML,seeInsertingspecial seeAddingimagestoaWebpage,pg.64. characters,pg.39. theUSA.WehavehoweveradoptedUSspellingforthe words‘disk’and‘program’,withinthemaintext,as Troubleshootingguide228899 thesearecommonlyacceptedthroughouttheworld. vi A01_BRAN1529_01_SE_FM.QXD:BRILLIANT 30/1/09 10:38 Page vii Contents 1. Introducing HyperText Markup Language (HTML) 1 Getting everything in order – text editors and Web browsers 3 Understanding elements, tags and attributes 7 Looking at the basic structure of an HTML page 9 Creating a basic document – document declaration, header, metadata and body 12 Creating HTML comments 14 2. HTML text layout tags 15 Creating HTML paragraphs 18 Adding headings to your document 20 Creating ordered and unordered lists 22 Creating a definition list 26 Formatting ordered and unordered lists 28 Formatting quotations 30 Marking up other text elements 33 Inserting special characters 37 3. Understanding hyperlinks 41 Understanding Uniform Resource Locators (URLs) 43 Using hyperlinks – absolute URLs 45 Using hyperlinks – relative URLs 47 Adding targets to hyperlinks 50 Creating anchors 53 Linking to an email address 55 4. Adding images to your Web page 59 Exploring image optimisation 61 Adding images to a Web page 62 How to display a custom icon in a browser (a favicon) 65 Creating image links 66 Creating image links – thumbnails 68 Creating an image map 70 vii A01_BRAN1529_01_SE_FM.QXD:BRILLIANT 30/1/09 10:38 Page viii 5. HTML tables 73 Creating table rows and data cells 75 Adding padding and spacing to table cells 78 Adding headings to tables 81 Adding a caption to a table 83 Adding frame attributes to tables 85 Specifying column spans and row spans 88 Specifying a table’s header, body and footer 90 Adding table dividing lines using rules 92 6. HTML forms 95 Building a simple form 97 Adding a check box 101 Adding radio buttons 104 Adding file fields 106 Adding a text area 108 Adding select elements (lists and menus) 110 Adding a fieldset and legend 114 7. Introducing Cascading Style Sheets (CSS) 117 Understanding ids and class names 120 Understanding the div element 122 Understanding the span element 126 Understanding CSS rules 128 Specifying CSS styles 133 Adding CSS comments 137 8. Formatting fonts and text using CSS 141 Setting an element’s font-family 144 Setting an element’s font-style 149 Setting an element’s font-weight and size 152 Setting an element’s font using the font declaration 155 Decorating text and changing case 157 Aligning text 159 Formatting text using word- and letter-spacing 161 9. Using CSS to assign colour 163 Understanding Web colours – choosing a palette 165 Specifying a colour four different ways 168 Setting background colour 170 Setting foreground colour 175 viii A01_BRAN1529_01_SE_FM.QXD:BRILLIANT 30/1/09 14:30 Page ix 10. Using CSS to format hyperlinks 177 Formatting hyperlinks – colour 180 Formatting hyperlinks – lines, borders, background colour 182 Formatting hyperlinks – image links 184 11. Using CSS to asign padding, margins and borders 187 Setting element padding 191 Setting element margins 194 Setting element borders 197 Setting width and height (percentage) 199 Setting width and height (pixels) 201 12. Positioning elements using CSS 203 Positioning elements using float and clear 206 Positioning elements using relative positioning 211 Positioning elements using absolute positioning 214 Positioning elements using fixed positioning 222 13. Exploring different page layout strategies 225 Using a fixed-width layout – one column 229 Using a liquid layout – one column, centred 231 Using a liquid layout – two columns 233 Using a liquid layout – three columns 236 Using a combined layout – two columns liquid, one fixed 238 Creating a liquid layout using a table 240 14. Site structure and navigation 243 Understanding a flat site structure 247 Understanding a tiered site structure 250 Looking at some websites’ navigation strategies 253 Creating a global top or bottom menu 256 Creating a left floating site menu 259 Creating a local navigation menu 261 Creating a breadcrumb trail 262 15. Validating and publishing your website 267 Validating your HTML and CSS 268 Uploading your website to a service provider 270 Jargon buster 273 Appendix A. HTML tags used in this book 275 Appendix B. CSS properties covered in this book 278 Appendix C. CSS colour name, hexadecimal value and RGB value 284 Troubleshooting guide 289 ix