WIXLIB

HTML & CSSDesign and Build WebsitesJon DuckettJohn Wiley & Sons, Inc.

HTML & CSSDesign and build WebsitesPublished byJohn Wiley & Sons, Inc.10475 Crosspoint BoulevardIndianapolis, IN 46256www.wiley.com 2011 by John Wiley & Sons, Inc., Indianapolis, IndianaISBN: 978-1-118-00818-8Manufactured in the United States of AmericaPublished simultaneously in Canada10 9 8 7 6 5 4 3 2 1No part of this publication may be reproduced, stored in a retrieval system or transmitted in any form or by any means, electronic, mechanical,photocopying, recording, scanning or otherwise, except as permitted under Sections 107 or 108 of the 1976 United States Copyright Act,without either the prior written permission of the Publisher, or authorization through payment of the appropriate per-copy fee to theCopyright Clearance Center, 222 Rosewood Drive, Danvers, MA 01923, (978) 750-8400, fax (978) 646-8600. Requests to the Publisher forpermission should be addressed to the Permissions Department, John Wiley & Sons, Inc., 111 River Street, Hoboken, NJ 07030, (201) 7486011, fax (201) 748-6008, or online at http://www.wiley.com/go/permissions.Limit of Liability/Disclaimer of Warranty: The publisher and the author make no representations or warranties with respect to theaccuracy or completeness of the contents of this work and specifically disclaim all warranties, including without limitation warranties offitness for a particular purpose. No warranty may be created or extended by sales or promotional materials. The advice and strategiescontained herein may not be suitable for every situation. This work is sold with the understanding that the publisher is not engaged inrendering legal, accounting, or other professional services. If professional assistance is required, the services of a competent professionalperson should be sought. Neither the publisher nor the author shall be liable for damages arising herefrom. The fact that an organizationor Web site is referred to in this work as a citation and/or a potential source of further information does not mean that the author or thepublisher endorses the information the organization or website may provide or recommendations it may make. Further, readers should beaware that Internet websites listed in this work may have changed or disappeared between when this work was written and when it is read.For general information on our other products and services please contact our Customer Care Department within the United States at (877)762-2974, outside the United States at (317) 572-3993 or fax (317) 572-4002.Wiley also publishes its books in a variety of electronic formats. Some content that appears in print may not be available in electronic books.Library of Congress Control Number: 2011932082Trademarks: Wiley and the Wiley logo are trademarks or registered trademarks of John Wiley & Sons, Inc. and/or itsaffiliates, in the United States and other countries, and may not be used without written permission. All other trademarks arethe property of their respective owners. John Wiley & Sons, Inc. is not associated with any product or vendor mentioned inthis book.

CreditsFor John Wiley & Sons, Inc.Executive EditorCarol LongAuthorJon DuckettMarketing ManagerAshley ZurcherCover DesignerEmme StoneProduction ManagerTim TateDesign and LayoutJon DuckettEmme StonePhotographyJohn Stewardsonjohnstewardson.comPRODUCTION EDITORDaniel ScribnerVice President andExecutive Group PublisherRichard SwadleyVice President andExecutive PublisherBarry PruettAssociate PublisherJim MinatelProduction Coordinator,CoverKatie CrockerAdditional PhotographyHesperianJoe Robertsonflickr.com/photos/mindfireJules Clancythestonesoup.comTechnical EditorChris MillsKylie Gussetgusset.netMichael StillwellTECHNICAL REVIEWERSAndy StoneAngela ShimellDonna WatsonMartin CallananRob JacobyTony Berrybeebo.org

Try out and download all of the code for this book online at:http://www.htmlandcssbook.com/code/

ContentsIntroductionChapter 1: StructureChapter 2: TextChapter 3: ListsChapter 4: LinksChapter 5: ImagesChapter 6: TablesChapter 7: FormsChapter 8: Extra MarkupChapter 9: Flash, Video & AudioChapter 10: Introducing CSSChapter 11: ColorChapter 12: TextChapter 13: BoxesChapter 14: Lists, Tables & FormsChapter 15: LayoutChapter 16: ImagesChapter 17: HTML5 LayoutChapter 18: Process & DesignChapter 19: Practical 0330358406428452476493

IntroductionXXXXXXAbout this bookHow the web worksLearning from other pages

Firstly, thank you for picking up thisbook. It has been written with two verydifferent types of people in mind: Those who want to learn how to design and build websitesfrom scratch Anyone who has a website (that may be built using acontent management system, blogging software, or ane-commerce platform) and wants more control over theappearance of their pagesThe only things you need in order to use this book are acomputer with a web browser and a text editor (such asNotepad, which comes with Windows, or TextEdit, whichcomes with Macs).3INTRODUCTION

Introduction pages come at the beginning of eachchapter. They introduce the key topics you will learnabout.Reference pages introduce key pieces of HTML &CSS code. The HTML code is shown in blue and CSScode is shown in pink.Background pages appear on white; they explain thecontext of the topics covered that are discussed ineach chapter.Diagram and infographics pages are shown on adark background. They provide a simple, visualreference to topics discussed.Example pages put together the topics you havelearned and demonstrate how they can be appliedin each.Summary pages come at the end of each chapter.They remind you of the key topics that were coveredin each chapter.INTRODUCTION4

Is it hard to Learn?Many books that teach HTML and CSSresemble dull manuals. To make it easier foryou to learn, we threw away the traditionaltemplate used by publishers and redesignedthis book from scratch.At work, when people lookat my screen and see it full ofcode, it's not unusual to get acomment about it looking verycomplicated or how clever I mustbe to understand it. The truthis, it's not that hard to learn howto write web pages and readthe code used to create them;you certainly don't have to be a"programmer."5INTRODUCTIONUnderstanding HTML and CSScan help anyone who workswith the web; designers cancreate more attractive andusable sites, website editors cancreate better content, marketerscan communicate with theiraudience more effectively, andmanagers can commissionbetter sites and get the best outof their teams.I've focussed on the code youneed to use 90% of the timeand omitted the code that youwould rarely see even if writingwebsites is your full time job. Bythe end of the book, if you comeacross the other 10% you will beable to Google it to find out whatit means quickly and easily.I have also added practicalinformation on topics I amcommonly asked about, such ashow to prepare images, audioand video for the web, how toapproach the design and buildof a new site, how to improveyour rankings in search engines(SEO), and how to use GoogleAnalytics to learn about visitorsto your site.

The Structure ofThis BookIn order to teach you about creating web pages,this book is divided into three sections:1: HTML2: CSS3: PracticalWe will spend the first chapterlooking at how HTML is used tocreate web pages. You will seethat you start by writing downthe words you want to appearon your page. You then add tagsor elements to the words sothat the browser knows what isa heading, where a paragraphbegins and ends, and so on.We start this section with achapter that explains how CSSuses rules to enable you tocontrol the styling and layoutof web pages. We then go on tolook at the wide variety of CSSproperties you can use in yourCSS rules. These propertiesgenerally fall into one of twocategories:We end up with some helpfulinformation that will assist you inbuilding better websites.The rest of this sectionintroduces the tags you haveat your disposal to create webpages, grouped into chapters on:text, lists, links, images, tables,forms, video audio and flash, andmiscellaneous elements.Presentation: How to controlthings like the color of text, thefonts you want to use and thesize of those fonts, how to addbackground colors to pages (orparts of a page), and how to addbackground images.I should warn you that theexamples in the first ninechapters are not exciting to lookat, yet they are the foundation ofevery web page. The followingchapters on CSS will show youhow to make your pages look alot more interesting.Layout: How to control wherethe different elements arepositioned on the screen. Youwill also learn several techniquesthat professionals use to maketheir pages more attractive.We look at some new tags thatwill be introduced in HTML5 tohelp describe the structure ofyour pages. HTML5 is the latestversion of HTML (still underdevelopment at the time ofwriting). Before learning aboutthese elements, you need a goodgrasp of how CSS is used tocontrol the design of web pages.There is a chapter that talks youthrough a design process thatyou might like to follow whencreating a new website.Finally, we end up looking attopics that will help you onceyou have built your site, suchas putting it on the web, searchengine optimisation (SEO) andusing analytics software to trackwho comes to your site and whatthey are looking at.INTRODUCTION6

How PeopleAccess the WebBefore we look at the code used to buildwebsites it is important to consider thedifferent ways in which people access the weband clarify some terminology.BrowsersWeb ServersScreen readersPeople access websites usingsoftware called a web browser.Popular examples includeFirefox, Internet Explorer, Safari,Chrome, and Opera.When you ask your browser fora web page, the request is sentacross the Internet to a specialcomputer known as a webserver which hosts the website.Screen readers are programsthat read out the contents of acomputer screen to a user. Theyare commonly used by peoplewith visual impairments.In order to view a web page,users might type a web addressinto their browser, follow alink from another site, or use abookmark.Web servers are specialcomputers that are constantlyconnected to the Internet, andare optimized to send web pagesout to people who request them.Software manufacturersregularly release new versionsof browsers with new featuresand supporting new additionsto languages. It is important,however, to remember thatmany computer owners will notbe running the latest versionsof these browsers. Thereforeyou cannot rely on all visitors toyour site being able to use thelatest functionality offered in allbrowsers.Some big companies run theirown web servers, but it is morecommon to use the services ofa web hosting company whocharge a fee to host your site.In the same way that manycountries have legislationsthat require public buildingsto be accessible to those withdisabilities, many laws havealso been passed that requirewebsites be accessible to thosewith disabilities.You will learn how to tell whichbrowsers visitors use to accessyour website in Chapter 19.7INTRODUCTIONDevicesPeople are accessing websiteson an increasing range of devicesincluding desktop computers,laptops, tablets, and mobilephones. It is important toremember that various deviceshave different screen sizes andsome have faster connections tothe web than others.Throughout this book you willsee several references to screenreaders. These notes will helpensure that the sites you createare accessible to people who usesuch software.It is interesting to note thattechnologies similar to thoseemployed by screen readers arealso being used in other areaswhere people are unable read ascreen, such as when they aredriving or jogging.