Web Design Playground: HTML & CSS the Interactive Way

439 Pages·2019·59.9 MB·English

by  Paul McFedries

WEB DESIGN
PLAYGROUND

WEB DESIGN
PLAYGROUND
HTML + CSS THE INTERACTIVE WAY
Paul McFedries
MANNING
shelter island
For online information and ordering of this and other Manning books, please visit www.manning.com.
The publisher offers discounts on this book when ordered in quantity.
For more information, please contact
Special Sales Department
Manning Publications Co.
20 Baldwin Road
PO Box 761
Shelter Island, NY 11964
Email: [email protected]
©2019 by Manning Publications Co. All rights reserved.
No part of this publication may be reproduced, stored in a retrieval system, or transmitted, in any form
or by means electronic, mechanical, photocopying, or otherwise, without prior written permission of
the publisher.
Many of the designations used by manufacturers and sellers to distinguish their products are claimed
as trademarks. Where those designations appear in the book, and Manning Publications was aware of a
trademark claim, the designations have been printed in initial caps or all caps.
∞Recognizing the importance of preserving what has been written, it is Manning’s policy to have the
books we publish printed on acid- free paper, and we exert our best efforts to that end. Recognizing
also our responsibility to conserve the resources of our planet, Manning books are printed on paper
that is at least 15 percent recycled and processed without the use of elemental chlorine.
Manning Publications Co. Development editor: Karen Miller
20 Baldwin Road Technical development editors: Doug Sparling and
PO Box 761 Helen Sparling
Shelter Island, NY 11964 Review editor: Aleksandar Dragosavljevic´
Production editor: Deirdre Hiam
Copyeditor: Kathy Simpson
Proofreader: Michelle Melani
Technical proofreader: Louis Lazaris
Typesetting: Happenstance Type-O-Rama
Cover designer: Monica Kamsvaag
ISBN 9781617294402
Printed in the United States of America
For Karen and Chase

Contents
Preface . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .xi
Acknowledgments . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xiii
About This Book . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .xv
About the Author . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xix
PART 1 GETTING STARTED WITH HTML AND CSS
Chapter 1 Getting to Know HTML and CSS . . . . . . . . . . . . . . . . . . . . . 3
What Is HTML? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .4
What Is CSS? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .7
What Can’t You Do with HTML and CSS? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .10
How HTML and CSS Create the Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .10
Introducing the Web Design Playground . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .11
Adding HTML Tag Attributes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
Some Helpful Features of the Playground . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .19
Chapter 2 Building Your First Web Page . . . . . . . . . . . . . . . . . . . . . . . 21
Getting Your Web Page off the Ground . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .22
Learning the Most Common Text Elements . . . . . . . . . . . . . . . . . . . . . . . . . . . . .26
Chapter 3 Adding Structure to Your Page . . . . . . . . . . . . . . . . . . . . . .37
HTML Elements for Structuring Page Text . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .38
Organizing Text Into Lists . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .44
Chapter 4 Formatting Your Web Page . . . . . . . . . . . . . . . . . . . . . . . . . 51
Styling Text . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .52
Working with Text Styles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .57
Styling Paragraphs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .60
Working with Colors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .64
Chapter 5 Project: Creating a Personal Home Page . . . . . . . . . . . . .69
What You’ll Be Building . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .70
Sketching the Layout . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .70
Choosing Typefaces . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71
Choosing a Color Scheme . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71
Building the Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .72
From Here . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .81
vii
PART 2 WORKING WITH IMAGES AND STYLES
Chapter 6 Adding Images and Other Media . . . . . . . . . . . . . . . . . . . .85
Understanding Image File Formats . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .87
Getting Graphics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .88
Inserting an HTML5 Figure . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .89
Setting Up an Image as a Link . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .90
Using an Image as a Custom Bullet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .91
Aligning Images and Text . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .92
Controlling the Background Repeat . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .95
Setting the Background Position . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .96
Adding a Hero Image . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .97
The Background Shorthand Property . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .99
Optimizing Images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .99
Adding Video and Audio to the Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .100
Chapter 7 Learning More About Styles . . . . . . . . . . . . . . . . . . . . . . .109
Adding Styles to a Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 110
Units of Measurement in CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 119
Chapter 8 Floating and Positioning Elements . . . . . . . . . . . . . . . . . 121
Understanding the Default Page Flow . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .122
Chapter 9 Styling Sizes, Borders, and Margins . . . . . . . . . . . . . . . . .139
The Anatomy of an Element Box . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .140
Watch Out for Collapsing Margins! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .152
Chapter 10 Project: Creating a Landing Page . . . . . . . . . . . . . . . . .155
What You’ll Be Building . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .156
Sketching the Layout . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .156
Choosing Typefaces . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .157
Choosing a Color Scheme . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .158
Building the Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .159
From Here . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .178
PART 3 LAYING OUT A WEB PAGE
Chapter 11 Learning Page Layout Basics . . . . . . . . . . . . . . . . . . . . .183
The Holy-Grail Layout . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .184
Understanding Web Page Layout Methods . . . . . . . . . . . . . . . . . . . . . . . . . . . .185
Learning the HTML5 Semantic Page Elements . . . . . . . . . . . . . . . . . . . . . . . .186
Creating Page Layouts with Floats . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 191
Creating Page Layouts with Inline Blocks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .196
viii
Chapter 12 Creating Page Layouts with Flexbox . . . . . . . . . . . . . . .203
Understanding Flexbox . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .204
Chapter 13 Designing Responsive Web Pages . . . . . . . . . . . . . . . . .229
Creating a Responsive Layout . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .233
Chapter 14 Making Your Images and Typography
Responsive . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .251
Making Images Responsive . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .252
Making Typography Responsive . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .257
Gallery of Responsive Sites . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .263
Chapter 15 Project: Creating a Photo Gallery . . . . . . . . . . . . . . . . .269
What You’ll Be Building . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .270
Getting Your Photos Ready . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .270
Sketching the Layout . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .270
Choosing Typefaces . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .271
Choosing the Colors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .272
Building the Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .272
Adding a Few Tricks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .281
From Here . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .286
PART 4 MAKING YOUR WEB PAGES SHINE
Chapter 16 More HTML Elements for Web Designers . . . . . . . . . . .289
More about Links . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .298
Inserting Special Characters . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .302
Using the HTML5 Entity Browser . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .303
Adding Comments . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .304
Chapter 17 Adding a Splash of Color
to Your Web Designs . . . . . . . . . . . . . . . . . . . . . . . . 305
Understanding Colors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .306
Adding Colors with CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .309
Choosing Harmonious Colors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .317
Using the Color Scheme Calculator . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .318
Color Scheme Gallery . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .320
Applying a Color Gradient . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .322
Chapter 18 Enhancing Page Text with Typography . . . . . . . . . . . .331
Specifying the Typeface . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .332
Working with Text Styles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .340
Web Typography Gallery . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .346
ix