The Essential Guide to HTML5 and CSS3 Web Design

621 Pages·2012·31.06 MB·English

by  Craig Grannell

The Essential Guide to HTML5 and CSS3 Web Design
Copyright © 2012 by Craig Grannell, Victor Sumner, Dionysios Synodinos
This work is subject to copyright. All rights are reserved by the Publisher,
whether the whole or part of the material is concerned, specifically the rights of
translation, reprinting, reuse of illustrations, recitation, broadcasting,
reproduction on microfilms or in any other physical way, and transmission or
information storage and retrieval, electronic adaptation, computer software, or
by similar or dissimilar methodology now known or hereafter developed.
Exempted from this legal reservation are brief excerpts in connection with
reviews or scholarly analysis or material supplied specifically for the purpose of
being entered and executed on a computer system, for exclusive use by the
purchaser of the work. Duplication of this publication or parts thereof is
permitted only under the provisions of the Copyright Law of the Publisher’s
location, in its current version, and permission for use must always be obtained
from Springer. Permissions for use may be obtained through RightsLink at the
Copyright Clearance Center. Violations are liable to prosecution under the
respective Copyright Law.
ISBN-13 (pbk): 978-1-43023786-0
ISBN-13 (electronic): 978-1-4302-3787-7
Trademarked names, logos, and images may appear in this book. Rather than use
a trademark symbol with every occurrence of a trademarked name, logos, or
image we use the names, logos, or images only in an editorial fashion and to the
benefit of the trademark owner, with no intention of infringement of the
trademark.
The use in this publication of trade names, service marks, and similar terms,
even if they are not identified as such, is not to be taken as an expression of
opinion as to whether or not they are subject to proprietary rights.
While the advice and information in this book are believed to be true and
accurate at the date of publication, neither the authors nor the editors nor the
publisher can accept any legal responsibility for any errors or omissions that may
be made. The publisher makes no warranty, express or implied, with respect to
the material contained herein.
Distributed to the book trade worldwide by Springer Science+Business Media
New York, 233 Spring Street, 6th Floor, New York, NY 10013. Phone 1-800-
SPRINGER, fax [phone], e-mail [email protected], or visit
www.springeronline.com.
For information on translations, please e-mail [email protected] or visit
www.apress.com.
Apress and friends of ED books may be purchased in bulk for academic,
corporate, or promotional use. eBook versions and licenses are also available for
most titles. For more information, reference our Special Bulk Sales–eBook
Licensing web page at www.apress.com/bulk-sales.
Any source code or other supplementary materials referenced by the author in
this text is available to readers at www.apress.com. For detailed information
about how to locate your book’s source code, go to www.apress.com/source-
code.
Credits
President and Publisher: Copy Editor:
Paul Manning Kim Wimpsett
Lead Editor: Compositor:
Tom Welsh Bytheway Publishing Services
Technical Reviewer: Indexer:
Jeffrey Sambells SPi Globl
Editorial Board: Artist:
Steve Anglin, Ewan Buckingham, Gary SPi Global
Cornell,
Louise Corrigan, Morgan Ertel, Cover Image Artist:
Jonathan Gennick, Comé van Dooren
Jonathan Hassell, Robert Hutchinson,
Michelle Lowman, Cover Designer:
James Markham, Matthew Moodie, Anna Ishchenko
Jeff Olson, Jeffrey Pepper, Douglas
Pundick,
Ben Renow-Clarke, Dominic
Shakeshaft,
Gwenan Spearing, Matt Wade, Tom
Welsh
Coordinating Editors:
Jessica Belanger, Anamika Panchoo
Dedicated to my grandmother, Ellen, whose passion for life has always inspired
me to take on any challenge.
—Victor Sumner
I dedicate this book to my wonderful family.
To my loving mother, Aggeliki.
To my beautiful wife, Elisa.
To my beloved daughter, Aggeliki.
To my precious newborn son.
You make me feel like the luckiest person alive.
—Dionysios Synodinos
Contents at a Glance
About the Authors
About the Technical Reviewer
About the Cover Image Designer
Acknowledgments
Introduction
Chapter 1: An Introduction to Web Design
Chapter 2: Web Page Essentials
Chapter 3: Working With Type
Chapter 4: Working With Images
Chapter 5: Using Links and Creating Navigation
Chapter 6: Tables: How Nature (and the W3C) Intended
Chapter 7: Page Layouts with CSS
Chapter 8: Getting User Feedback
Chapter 9: Dealing with Browser Quirks
Chapter 10: Putting Everything Together
Appendix A: An HTML5 reference
Appendix B: Web Color Reference
Appendix C: ENTITIES reference
Appendix D: CSS Reference
Index
Contents
About the Authors
About the Technical Reviewer
About the Cover Image Designer
Acknowledgments
Introduction
Chapter 1: An Introduction to Web Design
A brief history of the Internet
Why create a website?
Audience requirements
Web design overview
Why WYSIWYG tools aren’t used in this book
Introducing HTML5
Introducing the concept of HTML tags and elements
Nesting tags
Web standards and HTML
Semantic markup
Introducing CSS
Separating content from design
The rules of CSS
Types of CSS selectors
Adding styles to a web page
The cascade
The CSS box model explained
Creating boilerplates
Working with website content
Information architecture and site maps
Basic web page structure and layout
Limitations of web design
Chapter 2: Web Page Essentials
Starting with the essentials
HTML vs. XHTML
Document defaults
DOCTYPE declarations explained
The head section
Page titles
meta tags and search engines
Attaching external documents
The body section
Content margins and padding in CSS
Zeroing margins and padding on all elements
Working with CSS shorthand for boxes
Setting a default font and font color
Web page backgrounds
Web page backgrounds in CSS
Web page background ideas
Closing your document
Naming your files
Commenting your work
Quickly testing your code
Web page essentials checklist
Chapter 3: Working With Type
An introduction to typography
Styling text the old-fashioned way (or, why we hate font tags)
A new beginning: semantic markup
Paragraphs and headings
Logical and physical styles
The importance of well-formed markup
Styling text using CSS
Defining font colors
Defining fonts
Using images for text
Defining font size and line height
Defining font-style, font-weight, and font-variant
CSS shorthand for font properties
Controlling text element margins
Using text-indent for print-like paragraphs
Setting letter-spacing and word-spacing
Controlling case with text-transform
Creating alternatives with classes and spans
Styling semantic markup
Creating drop caps and pull quotes using CSS
Working with lists
Unordered lists
Ordered lists
Definition lists
Nesting lists
Styling lists with CSS
List margins and padding
Inline lists for navigation