Transcription
Foundations of Web DesignIntroduction to HTML & CSSThomas Michaud
Fou n datio n s o f W e b D e sig n :Intro duc tio n to HTM L a n d CSSThomas Michaud
F O U N D AT I O N S O F W E B D E S I G NF o u n d at i o n s o f W e b D e s i g n : I n t r o d u c t i o n t o H T M L a n d CSSThomas MichaudNew RidersNotice of Rightswww.newriders.comAll rights reserved. No part of this book may bereproduced or transmitted in any form by any means,electronic, mechanical, photocopying, recording, orTo report errors, please send a note to [email protected], without the prior written permission of theNew Riders is an imprint of Peachpit, a division of Pearson Education.publisher. For information on getting permission forCopyright 2014 by Thomas Michaudreprints and excerpts, contact [email protected] Editor: Michael J. NolanProduction Editor: Katerina MaloneNotice of LiabilityDevelopment Editor: Margaret Anderson/StellarvisionsThe information in this book is distributed on an “AsTechnical Editor: Chris MillsIs” basis without warranty. While every precaution hasCopyeditor: Jennifer Needhamauthor nor Peachpit shall have any liability to any personbeen taken in the preparation of the book, neither theor entity with respect to any loss or damage causedProofreader: Patricia Paneor alleged to be caused directly or indirectly by theIndexer: Rebecca Plunkettinstructions contained in this book or by the computersoftware and hardware products described in it.Cover & Interior Designer: Jonathon WolferTrademarksMany of the designations used by manufacturers andsellers to distinguish their products are claimed astrademarks. Where those designations appear in thisbook, and Peachpit was aware of a trademark claim,ISBN 13: 978-0-321-91893-2the designations appear as requested by the owner ofISBN 10:identified throughout this book are used in editorialthe trademark. All other product names and services0-321-91893-2fashion only and for the benefit of such companies with987654321no intention of infringement of the trademark. No suchPrinted and bound in the United States of Americaendorsement or other affiliation with this book.use, or the use of any trade name, is intended to conveyii
M e ta I n f o r m at i o nTo my grandmother, Nonnie; you pushed me to never stop learning.And to my wife, Erica; you always sustain me.iii
F O U N D AT I O N S O F W E B D E S I G NI hear and I forget. I seeand I remember. I do andI understand. Confuciusiv
M e ta I n f o r m at i o nAck n owle d g m e nt sI don’t know if I can thank enough people (or thank them enough) for allthe support they’ve provided during the writing of this book. If I leavesomeone out, just let me know on Twitter @coldcoffee!First off, I give thanks to my Creator, who has sustained me throughoutthe writing of this book—all things are truly possible.Thank you to my amazing, beautiful, and patient wife, Erica, andwonderful kids, Dylan and Natalie, who have been a tremendous supportand were extremely accommodating while I worked long hours writingthis book. I’m going to be ever so grateful to be a part of the familyagain. I also give thanks to my mother-in-law, Mary, who helped watchthe kids when my wife needed a break—you are truly a gift!I’d like to thank my team at Peachpit Press: Michael Nolan, who tooka chance on an unknown teacher; and Margaret Anderson, an amazingdevelopmental editor, who helped to make my words clearer than Icould have done on my own, kept me on task, and rapped my knuckleswhen necessary. I owe a great debt to Chris Mills, my tech editor, whohas always been one of my web heroes, for all his suggestions andcorrections. Thank you to Katerina Malone, Jennifer Needham, andPatricia J. Pane, who caught all big, small, and in-between mistakes,and Rebecca Plunkett for indexing the book.vThanks also to my friends—Marc & Sharon, Kai & Kristi,Rob & Sara, Rudy & Stefanie, Tracy & Lori, Brad & Lori,and many others—who constantly gave me support andencouragement.Thank you to my students—all of you whom I’ve taughtover the past six years—who were the inspiration behindthis book. Special thanks go to Jonathon Wolfer, mylongtime student, who designed my book.To iconmonstr (http://iconmonstr.com/) for many of theicons at the start of each chapter and within Chapter 13.To the brilliant and funny Dr. Leslie Jensen-Inman, whosaw something in me I didn’t and recommended me toMichael Nolan: I’m so thankful for our email conversation,which began two years ago, about elevating web designin higher education—and for (most of all) your friendship.Heartfelt thanks to my mom and dad for all those yearsof support and love I sure wish dad could have livedto see his youngest getting a book published.
F O U N D AT I O N S O F W E B D E S I G NCo nte nt sWelcome . . . . . . . . . . . . . . . . . . . . . . . . . . . . xiTitle Element. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8Meta Element. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8Language Attribute. . . . . . . . . . . . . . . . . . . . . . . . . 10Who This Book Is For . . . . . . . . . . . . . . . . . . . . . . . . . xiObjectives . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xiDescription. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xiiBody Elements. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10Structuring Content. . . . . . . . . . . . . . . . . . . . . . . . 10Conventions Used. . . . . . . . . . . . . . . . . . . . . . . . . . . . xiiCode Examples . . . . . . . . . . . . . . . . . . . . . . . . . . . . xiiTips & Notes. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xiiiFiles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xiiiWrapping Things Up . . . . . . . . . . . . . . . . . . . . . . . . . 13Chapter 02Hands On. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16Requirements. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xivText Editor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xivImage Editor. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xivBrowser . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xivWeb Hosting & Domain Registration. . . . . . . . . . . . xvOutline. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16Text Headers. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16Main Topic . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17Sub-Topics. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17Cite Attribute . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21Book Website Enhanced Learning . . . . . . . . . . . . xvChapter Downloads . . . . . . . . . . . . . . . . . . . . . . . . xvForums and Resources . . . . . . . . . . . . . . . . . . . . . . xvVideo Demonstrations. . . . . . . . . . . . . . . . . . . . . . . xvStructure. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xviTeachers. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xviCreating Lists. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22Description Lists . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24Additional Text Elements. . . . . . . . . . . . . . . . . . . . . . 25Adding Comments. . . . . . . . . . . . . . . . . . . . . . . . . . . 28Helpful Hook Element . . . . . . . . . . . . . . . . . . . . . . 28Let’s Get Started. . . . . . . . . . . . . . . . . . . . . . . . . . . . xviiFurther Exploration . . . . . . . . . . . . . . . . . . . . . . . . . . 29Part 01: The Basics. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1Chapter 01Text Elements . . . . . . . . . . . . . . . . . . . . . . 15Wrapping Things Up . . . . . . . . . . . . . . . . . . . . . . . . . 29HTML FOUNDATIONs. . . . . . . . . . . . . . . . . . . . 3CHapter 03Getting Started . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4Creating an HTML Document . . . . . . . . . . . . . . . . . 4Naming Files & Folders . . . . . . . . . . . . . . . . . . . . . . 5Links & Objects. . . . . . . . . . . . . . . . . . . . . . 31Links . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32Objects: Images. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37Objects: Video. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40HTML Structure. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6DOCTYPE. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6HTML ELEMENT . . . . . . . . . . . . . . . . . . . . . . . . . . . 6HEAD ELEMENT . . . . . . . . . . . . . . . . . . . . . . . . . . . 7BODY ELEMENT . . . . . . . . . . . . . . . . . . . . . . . . . . . 7Wrapping Things Up . . . . . . . . . . . . . . . . . . . . . . . . . 43CHapter 04Tables. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45Table Element . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46Table Headings. . . . . . . . . . . . . . . . . . . . . . . . . . . . 46Table Rows. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47Table Data Cell. . . . . . . . . . . . . . . . . . . . . . . . . . . . 48Head Elements. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8vi
M e ta I n f o r m at i o nPart 02: Working Together. . . . . . . . . . . . . . . . . . . . 79Table Border. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48Table Caption. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50Table Header . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50Table Body. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51Table Footer. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51Spanning Columns. . . . . . . . . . . . . . . . . . . . . . . . . 52CHapter 06HTML: Class Attribute. . . . . . . . . . . . . . . . . . . . . . . . 82Multiple Values. . . . . . . . . . . . . . . . . . . . . . . . . . . . 84CSS: Class Selector . . . . . . . . . . . . . . . . . . . . . . . . . 84HTML: ID Attribute. . . . . . . . . . . . . . . . . . . . . . . . . . . 86Wrapping Things Up . . . . . . . . . . . . . . . . . . . . . . . . . 53CHapter 05HTML Attributes. . . . . . . . . . . . . . . . . . . . . 81CSS: ID Selector . . . . . . . . . . . . . . . . . . . . . . . . . . . . 88Specificity Powerof ID Selectors. . . . . . . . . . . . . . . . . . . . . . . . . . . . 89CSS: Introduction. . . . . . . . . . . . . . . . . . . 55The Power of CSS. . . . . . . . . . . . . . . . . . . . . . . . . . . 56HTML: Role Attribute. . . . . . . . . . . . . . . . . . . . . . . . . 90ARIA Landmarks . . . . . . . . . . . . . . . . . . . . . . . . . . 90ARIA Landmark: banner. . . . . . . . . . . . . . . . . . . . . 91ARIA Landmark: navigation. . . . . . . . . . . . . . . . . . 91ARIA Landmark: main . . . . . . . . . . . . . . . . . . . . . . 92ARIA Landmark: complementary. . . . . . . . . . . . . . 92ARIA Landmark: contentinfo . . . . . . . . . . . . . . . . . 92Selectors. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57Multiple Declarations. . . . . . . . . . . . . . . . . . . . . . . 58Adding CSS to HTML . . . . . . . . . . . . . . . . . . . . . . . . 60Embedding CSS. . . . . . . . . . . . . . . . . . . . . . . . . . . 60Inline CSS. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60Link to an External CSS Document. . . . . . . . . . . . 61Challenge: Move CSS out of HTML. . . . . . . . . . . . 62Import a CSS Document . . . . . . . . . . . . . . . . . . . . 64CSS: Attribute Selectors. . . . . . . . . . . . . . . . . . . . . . 94Wrapping Things Up . . . . . . . . . . . . . . . . . . . . . . . . . 95Selector Types. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65Universal Selector . . . . . . . . . . . . . . . . . . . . . . . . . 65Element Selector . . . . . . . . . . . . . . . . . . . . . . . . . . 66Selector Grouping . . . . . . . . . . . . . . . . . . . . . . . . . 66Combinators. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 67CHapter 07CSS: Styling Text . . . . . . . . . . . . . . . . . . . . 97Font Properties . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 98Font Family. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 98Font Size . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 102Font Style. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 104Font Variant . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 105Font Weight . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 105Font Property Shorthand. . . . . . . . . . . . . . . . . . . 106Pseudo-classes. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72:link pseudo-class . . . . . . . . . . . . . . . . . . . . . . . . . 72:visited pseudo-class. . . . . . . . . . . . . . . . . . . . . . . 74:hover pseudo-class. . . . . . . . . . . . . . . . . . . . . . . . 74Challenge. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75:active pseudo-class . . . . . . . . . . . . . . . . . . . . . . . 76:focus pseudo-class. . . . . . . . . . . . . . . . . . . . . . . . 77Text Properties. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 106Text Align. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 106Text Decoration . . . . . . . . . . . . . . . . . . . . . . . . . . 108Text Indent. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 109Wrapping Things Up . . . . . . . . . . . . . . . . . . . . . . . . . 77v ii
F O U N D AT I O N S O F W E B D E S I G NText Transform. . . . . . . . . . . . . . . . . . . . . . . . . . . 109Float: right . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 143Float: inherit. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 144Clear Floats . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 145Fixing the Collapse. . . . . . . . . . . . . . . . . . . . . . . . 146Overflow. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 148Spacing Properties . . . . . . . . . . . . . . . . . . . . . . . . . 110line-height. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 110Fixed vs. Relative Leading. . . . . . . . . . . . . . . . . . 111Challenge. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 111Position . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 151Position: static. . . . . . . . . . . . . . . . . . . . . . . . . . . 151Position: relative. . . . . . . . . . . . . . . . . . . . . . . . . . 151Position: absolute. . . . . . . . . . . . . . . . . . . . . . . . . 152Position: fixed. . . . . . . . . . . . . . . . . . . . . . . . . . . . 153Website Resources on Font Styles . . . . . . . . . . . . . 111Color . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 111Color Property . . . . . . . . . . . . . . . . . . . . . . . . . . . 112Name Value Challenge. . . . . . . . . . . . . . . . . . . . . 112Hex Value Challenge . . . . . . . . . . . . . . . . . . . . . . 114Z-index. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 154Wrapping Things Up . . . . . . . . . . . . . . . . . . . . . . . . 115CHapter 08Display. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 159Display: block. . . . . . . . . . . . . . . . . . . . . . . . . . . . 160Display: inline. . . . . . . . . . . . . . . . . . . . . . . . . . . . 161Display: inline-block. . . . . . . . . . . . . . . . . . . . . . . 162Other Display Values . . . . . . . . . . . . . . . . . . . . . . 163The Box Model. . . . . . . . . . . . . . . . . . . . . . 117Box Dimensions. . . . . . . . . . . . . . . . . . . . . . . . . . . . 118Working with the Box. . . . . . . . . . . . . . . . . . . . . . 120Content. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 120Border . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 121Padding . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 124Margin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 125Wrapping Things Up . . . . . . . . . . . . . . . . . . . . . . . . 163CHapter 10Fixed-Width Layouts. . . . . . . . . . . . . . . . . . . . . . . . 166Why Use a Fixed Design? . . . . . . . . . . . . . . . . . . 167Why Avoid a Fixed Design?. . . . . . . . . . . . . . . . . 167Breaking Down the Structure. . . . . . . . . . . . . . . . 169Coding CSS Fixed Rules. . . . . . . . . . . . . . . . . . . 170Challenge. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 174Background Color. . . . . . . . . . . . . . . . . . . . . . . . . . 126Width, Height, and Overflow. . . . . . . . . . . . . . . . . . 128Box Sizing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 130Box-sizing Box Sizing . . . . . . . . . . . . . . . . . . . . . 132Browser Default Margin & Padding. . . . . . . . . . . . . 134Resetting the Default. . . . . . . . . . . . . . . . . . . . . . 134Fluid Layouts. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 175Fixed Grid to Fluid Grid. . . . . . . . . . . . . . . . . . . . 176Wrapping Things Up . . . . . . . . . . . . . . . . . . . . . . . . 135Part 03: Layout & Interactivity . . . . . . . . . . . . . . . 137CHapter 09Page Layout . . . . . . . . . . . . . . . . . . . . . . . . 165Responsive Layouts. . . . . . . . . . . . . . . . . . . . . . . . . 180Challenge. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 180Mobile First Would Be Best. . . . . . . . . . . . . . . . 181Fixed to Responsive. . . . . . . . . . . . . . . . . . . . . . . 182@media. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 182Convert Pixels to Ems. . . . . . . . . . . . . . . . . . . . . 188Challenge. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 189Viewport. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 190Layout Properties. . . . . . . . . . . . . . . . . . 139Box Element Review. . . . . . . . . . . . . . . . . . . . . . . . 140Block Elements . . . . . . . . . . . . . . . . . . . . . . . . . . 140Inline Elements. . . . . . . . . . . . . . . . . . . . . . . . . . . 140Float. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 141Float: none. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 142Float: left . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 142Wrapping Things Up . . . . . . . . . . . . . . . . . . . . . . . . 191v iii
M e ta I n f o r m at i o nPart 04: Next Steps . . . . . . . . . . . . . . . . . . . . . . . . . . . 231CHapter 11Navigation. . . . . . . . . . . . . . . . . . . . . . . . . . 193CHapter 13The HTML of Navigation . . . . . . . . . . . . . . . . . . . . . 195Unordered Lists. . . . . . . . . . . . . . . . . . . . . . . . . . 195Ordered Lists. . . . . . . . . . . . . . . . . . . . . . . . . . . . 196Description Lists. . . . . . . . . . . . . . . . . . . . . . . . . . 196No Lists . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 197Asking Questions. . . . . . . . . . . . . . . . . . . . . . . . . . . 237Content . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 238Sitemap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 238Categorize . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 239Textual Content . . . . . . . . . . . . . . . . . . . . . . . . . . 239Types of Navigation. . . . . . . . . . . . . . . . . . . . . . . . . 198Vertical Navigation. . . . . . . . . . . . . . . . . . . . . . . . 198Horizontal Navigation. . . . . . . . . . . . . . . . . . . . . . 206Visual Language. . . . . . . . . . . . . . . . . . . . . . . . . . . . 240OS Screenshot. . . . . . . . . . . . . . . . . . . . . . . . . . . 240Sketching. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 242Wireframe. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 243Additional Navigation Patterns . . . . . . . . . . . . . . . . 212Breadcrumbs. . . . . . . . . . . . . . . . . . . . . . . . . . . . 212Drop Down Menus. . . . . . . . . . . . . . . . . . . . . . . . 212Sitemaps . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 213Search Boxes. . . . . . . . . . . . . . . . . . . . . . . . . . . . 213Coding. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 244Prototypes. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 244Wrapping Things Up . . . . . . . . . . . . . . . . . . . . . . . . 245Wrapping Things Up . . . . . . . . . . . . . . . . . . . . . . . . 213CHapter 12Workflow. . . . . . . . . . . . . . . . . . . . . . . . . . 233CHapter 14Looking Ahead. . . . . . . . . . . . . . . . . . . . . . 247HTML5. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 250Resources: Books . . . . . . . . . . . . . . . . . . . . . . . . 251Resources: Online . . . . . . . . . . . . . . . . . . . . . . . . 251Forms . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 215How Do Forms Work?. . . . . . . . . . . . . . . . . . . . . . . 217Form Elements. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 218The form Element. . . . . . . . . . . . . . . . . . . . . . . . . 218Data Input. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 220Textarea. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 224Select Option. . . . . . . . . . . . . . . . . . . . . . . . . . . . 225Labeling Forms. . . . . . . . . . . . . . . . . . . . . . . . . . . 226Fieldset. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 227CSS3. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 252Resources: Books . . . . . . . . . . . . . . . . . . . . . . . . 253Resources: Online . . . . . . . . . . . . . . . . . . . . . . . . 253JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 254Tabbed Boxes . . . . . . . . . . . . . . . . . . . . . . . . . . . 254Lightbox Gallery. . . . . . . . . . . . . . . . . . . . . . . . . . 255JavaScript Libraries. . . . . . . . . . . . . . . . . . . . . . . 256Resources: Books . . . . . . . . . . . . . . . . . . . . . . . . 256Resources: Online . . . . . . . . . . . . . . . . . . . . . . . . 257A Contact Form. . . . . . . . . . . . . . . . . . . . . . . . . . . . 228Form. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 228Thank You. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 228Automated Response. . . . . . . . . . . . . . . . . . . . . . 229Processing Script. . . . . . . . . . . . . . . . . . . . . . . . . 229Help Online. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 229Wrapping Things Up . . . . . . . . . . . . . . . . . . . . . . . . 257Wrapping Things Up . . . . . . . . . . . . . . . . . . . . . . . . 229ix
F O U N D AT I O N S O F W E B D E S I G NI am always doing thatwhich I can not do, inorder that I may learnhow to do it. Pablo Picassox
IntroductionW e lco m e toFou n datio n sOf W e b D e sig n :HTML & CSSSince Sir Tim Berners-Lee, a researchscientist, proposed and developed aninternet-based hypertext system backin 1989, and then, in the early 1990s,developed the first HTML documents,HTML has been the backbone forcreating websites. While style sheetshave been a part of markup languagessince the 1980s, CSS (Cascading StyleSheets), which was created to separatepresentation (design) from content(markup documents), was first adoptedin the mid-1990s; since then, CSS hasbecome the standard styling languagefor the Web. Today, HTML and CSSneed to be a part of every hobby andprofessional web designer’s toolkit.Who This BookIs ForThis book is written primarily for twotypes of readers: Absolute beginners at hand-codingHTML and CSS Those who have used a drag-anddrop website-builder application, butmay have little to no idea what allthose letters (p, q, b, etc.), numbers(h1, h2, etc.), and words (strong, span,div, etc.) inside the angled brackets( ) really areYou may wish to learn HTML andCSS to help build a personal website(professional or for family) or to look totake a step toward working in the field ofweb design. Either way, I believe you’llfind this book, and the accompanyingresources, to be helpful in your journey.ObjectivesThe objective of Foundations of WebDesign: HTML & CSS is to providea fundamental knowledge of HTML(Hypertext Markup Language) and CSS(Cascading Style Sheets). Learning isaccomplished through hands-on codingdemonstrations—in the book and inonline video tutorials—and challenges.Additionally,youcandownloadassignments in which you’ll be askedto develop a basic website basedupon chapter material, a one-pagepromotional site for a midterm project,and a personal website—professional,family, or client—for your final project.Online AssignmentReviewsIf you are a self-learner—andnot in a classroom directed byan instructor—you will be ableto submit your work online forquestions and reviews.xi
F O U N D AT I O N S O F W E B D E S I G NDescriptionConventions UsedThe different parts of this book workto build your knowledge and skill ina slightly different manner than otherbooks of this type.Code examples, notes, and asides willhave different typographical styles fromthe normal body text.Part 1: BasicsIn Chapters 1-5, you’ll learn the basicsof creating and coding HTML andCSS documents. While it may seemvery elementary, it lays an importantfoundation for the subsequent chapters.Part 2: Working TogetherIn Chapters 6-8, you will start to seehow HTML and CSS work together indeveloping more complex web pagesthrough the use of attributes, selectors,typography, and the all-important boxmodel. This is either where it “clicks” formany students or where they become“lost.” Make sure you take your timeand work through each demonstration(multiple times, if necessary).Code ExamplesPart 3: Layout andInteractivityHTML code that is being used as acurrent example is a bright blue color:Chapters 9-12 will teach you how tocreate layouts that are responsivefor different devices, how to developnavigation elements that help users findinformation on your website, and how todesign and use forms. h1 This is a header /h1 Part 4: Next Step p This is a paragraph /p Chapters 13 and 14 talk about the tasksthat are involved in developing a websitefrom beginning to end, and aboutadditional skills a web designer needs—giving you a foretaste of what you can donext and pointing toward where you canlearn those skills.xiiHTML code that has been previouslyshown but is part of a new example isshown in a muted blue color: h1 This is a header /h1
IntroductionFilesWhen downloading files, you’ll find theyare all compressed in the .zip formatand will need to be uncompressed (orextracted) prior to use.Need Help Extracting? VideoCSS code that is being used as a currentexample is a bright magenta color:h1 {color: orange;}CSS code that has been previouslyshown but is part of a new example isshown in a muted magenta color:Sometimes lines of code are intended tobe written on a single line, but the bookrequires a line wrap. An arrow shows wherea line break occurs for print formattingpurposes only and should be ignored. blockquote cite -tooptimize-your-content-for-mobile" h1 {font-size: 2em;about the current topic or step.a ZIP file.When referencing folder and documentnames for demonstration, the names willbe in bold lettering:foldernamedocument.htmlIf you see a forward slash (/) betweentwo names}Tip: Tips & notes provide remindersif you do not know how to uncompressdocument.csscolor: orange;Tips & Notestutorials are available on the websiteSidebarsSidebars help you learn more abouta topic through related information.xiiifowd ch02 folder/01-book.htmlit’s telling you that the document (01book.html) is located in a specific folder(fowd ch02 folder).
F O U N D AT I O N S O F W E B D E S I G NR equir e m e nt sBrowserInternet ExplorerIn order to work through the assignmentsand projects in this book, you do notneed expensive software or hardware.It would be best to download one ortwomodern—standards-compliant—browsers such as Chrome, Firefox, orOpera (Figure 1). All of these can beinstalled on Linux, Mac, and Windowssystems. The screenshots you’ll seein this book were primarily taken whileusing Opera on Mac, unless otherwisenoted.If you’re a Windows user, you mightText EditorYou will need a code text editor—not a texteditor that came with your computer—to write HTML and CSS. An excellent,and free, editor I would recommend isKomodo Edit (http://activestate.com/komodo-edit) for Windows, Mac, andLinux. Other free alternatives includeNotepad for Windows, TextWranglerfor Mac, and Bluefish for Linux.Note: The website has links andtutorials to help you install and setthis book as IE). It’s fine to continueusing it, but the examples in thisbook will primarily work for version8 (IE8) and above. Microsoft hasstoppedsupportingIE6,andIE7 lags behind web standardscommon in most browsers. CheckAbout Internet Explorer under theHelp tab (Figure 2).Figure 1Chrome, Firefox, and Opera are opensource browsers that keep current withmany web standards and are available onmultiple operating systems.SafariIf you’re a Mac user, Safari is pre-installed on your computer andhas kept up good support of webstandards. However, make sureNote: It’s beyond the scope ofthis book to have Mac users set upIf you have Photoshop or PhotoshopElements, those are fine but a bit much
drop website-builder application, but may have little to no idea what all those letters (p, q, b, etc.), numbers (h1, h2, etc.), and words (strong, span, div, etc.) inside the angled brackets ( ) really are You may wish to learn HTML and CSS to help build a pe
