HTML & CSS

Design and Build Websites

Jon Duckett

John Wiley & Sons, Inc.

HTML & CSS
Design and build Websites

Published by ©2011 by John Wiley & Sons, Inc., Indianapolis, Indiana

John Wiley & Sons, Inc. ISBN: 978-1-118-00818-8
10475 Crosspoint Boulevard Manufactured in the United States of America
Indianapolis, IN 46256 Published simultaneously in Canada
www.wiley.com 10 9 8 7 6 5 4 3 2 1

No 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 the
Copyright Clearance Center, 222 Rosewood Drive, Danvers, MA 01923, (978) 750-8400, fax (978) 646-8600. Requests to the Publisher for
permission should be addressed to the Permissions Department, John Wiley & Sons, Inc., 111 River Street, Hoboken, NJ 07030, (201) 748-
6011, 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 the
accuracy or completeness of the contents of this work and specifically disclaim all warranties, including without limitation warranties of
fitness for a particular purpose. No warranty may be created or extended by sales or promotional materials. The advice and strategies
contained herein may not be suitable for every situation. This work is sold with the understanding that the publisher is not engaged in
rendering legal, accounting, or other professional services. If professional assistance is required, the services of a competent professional
person should be sought. Neither the publisher nor the author shall be liable for damages arising herefrom. The fact that an organization
or 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 the
publisher endorses the information the organization or website may provide or recommendations it may make. Further, readers should be
aware 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: 2011932082

Trademarks: Wiley and the Wiley logo are trademarks or registered trademarks of John Wiley & Sons, Inc. and/or its
affiliates, in the United States and other countries, and may not be used without written permission. All other trademarks are
the property of their respective owners. John Wiley & Sons, Inc. is not associated with any product or vendor mentioned in
this book.
 Credits

For John Wiley & Sons, Inc.

Executive Editor Author Photography

Carol Long Jon Duckett John Stewardson
johnstewardson.com
Marketing Manager Cover Designer
Ashley Zurcher Emme Stone Additional Photography
Hesperian
Production Manager Design and Layout Joe Robertson
Tim Tate Jon Duckett flickr.com/photos/mindfire
Emme Stone Jules Clancy
PRODUCTION EDITOR thestonesoup.com
Daniel Scribner Technical Editor Kylie Gusset
Chris Mills gusset.net
Vice President and Michael Stillwell
Executive Group Publisher TECHNICAL REVIEWERS beebo.org
Richard Swadley Andy Stone
Angela Shimell
Vice President and Donna Watson
Executive Publisher Martin Callanan
Barry Pruett Rob Jacoby
Tony Berry
Associate Publisher
Jim Minatel

Production Coordinator,
Cover
Katie Crocker
Try out and download all of the code for this book online at:
http://www.htmlandcssbook.com/code/
 Contents

Introduction 2
Chapter 1: Structure 12
Chapter 2: Text 40
Chapter 3: Lists 62
Chapter 4: Links 74
Chapter 5: Images 94
Chapter 6: Tables 126
Chapter 7: Forms 144
Chapter 8: Extra Markup 176
Chapter 9: Flash, Video & Audio 200
Chapter 10: Introducing CSS 226
Chapter 11: Color 246
Chapter 12: Text 264
Chapter 13: Boxes 300
Chapter 14: Lists, Tables & Forms 330
Chapter 15: Layout 358
Chapter 16: Images 406
Chapter 17: HTML5 Layout 428
Chapter 18: Process & Design 452
Chapter 19: Practical Information 476
Index 493
 Introduction

XX About this book

XX How the web works
XX Learning from other pages
 Firstly, thank you for picking up this
book. It has been written with two very
different types of people in mind:

●● Those who want to learn how to design and build websites

from scratch

●● Anyone who has a website (that may be built using a

content management system, blogging software, or an
e-commerce platform) and wants more control over the
appearance of their pages

The only things you need in order to use this book are a
computer with a web browser and a text editor (such as
Notepad, which comes with Windows, or TextEdit, which
comes with Macs).

3 INTRODUCTION
Introduction pages come at the beginning of each Reference pages introduce key pieces of HTML &
chapter. They introduce the key topics you will learn CSS code. The HTML code is shown in blue and CSS
about. code is shown in pink.

Background pages appear on white; they explain the Diagram and infographics pages are shown on a
context of the topics covered that are discussed in dark background. They provide a simple, visual
each chapter. reference to topics discussed.

Example pages put together the topics you have Summary pages come at the end of each chapter.
learned and demonstrate how they can be applied They remind you of the key topics that were covered
in each. in each chapter.

INTRODUCTION 4
 Is it hard to Learn?

Many books that teach HTML and CSS I've focussed on the code you
need to use 90% of the time
resemble dull manuals. To make it easier for and omitted the code that you
you to learn, we threw away the traditional would rarely see even if writing
websites is your full time job. By
template used by publishers and redesigned the end of the book, if you come
this book from scratch. across the other 10% you will be
able to Google it to find out what
it means quickly and easily.

At work, when people look Understanding HTML and CSS I have also added practical
at my screen and see it full of can help anyone who works information on topics I am
code, it's not unusual to get a with the web; designers can commonly asked about, such as
comment about it looking very create more attractive and how to prepare images, audio
complicated or how clever I must usable sites, website editors can and video for the web, how to
be to understand it. The truth create better content, marketers approach the design and build
is, it's not that hard to learn how can communicate with their of a new site, how to improve
to write web pages and read audience more effectively, and your rankings in search engines
the code used to create them; managers can commission (SEO), and how to use Google
you certainly don't have to be a better sites and get the best out Analytics to learn about visitors
"programmer." of their teams. to your site.

5 INTRODUCTION