WIXLIB

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 errata@peachpit.comotherwise, 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 permissions@peachpit.com.Project 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