HTML Programming
HTML programming
Create a Design Document, outlining a website with at least 5 pages demonstrating the content from this course, relating to an interest or hobby the student has.
Include:
Brief Description of the following pages, including a layout mockup and a color palette
o 1 text/terms
o 1 images
o 1 multimedia page
o 1 links page
o 1 user designed
W
he
th
er
y
o
u
re
a
b
eg
in
ne
r
o
r
b
ri
ng
in
g
y
o
ur
s
ki
lls
u
p
t
o
d
a
te
, t
hi
s
b
o
o
k
g
iv
es
y
o
u
a
s
o
lid
f
o
ot
in
g
in
m
o
d
er
n
w
eb
p
ro
d
uc
ti
o
n.
I
te
a
ch
e
a
ch
t
o
p
ic
v
is
ua
lly
a
t
a
p
le
a
sa
nt
p
a
ce
, w
it
h
fr
eq
ue
nt
e
xe
rc
is
es
to
le
t
yo
u
tr
y
o
ut
n
ew
s
ki
lls
. R
ea
d
in
g
it
f
ee
ls
li
ke
s
it
ti
ng
in
m
y
cl
a
ss
ro
o
m
!
J
en
ni
fe
r
R
o
b
b
in
s
Learning
Web Design
A BEGINNER’S GUIDE TO HTML, CSS,
JAVASCRIPT, AND WEB GRAPHICS
Jennifer Niederst Robbins
Unlike all the other books that start at the beginning, this one
will get you to the good stuff, fast. Jennifer will explain every
step you need, including some very advanced concepts.
JEN SIMMONS, MOZILLA AND W3C CSS WORKING GROUP
5TH EDITION
Fifth Edition
LEARNING WEB DESIGN
A BEGINNERS GUIDE TO HTML, CSS,
JAVASCRIPT, AND WEB GRAPHICS
Jennifer Niederst Robbins
Beijing Boston Farnham Sebastopol Tokyo
Learning Web Design, Fifth Edition
A Beginners Guide to HTML, CSS, JavaScript, and Web Graphics
by Jennifer Niederst Robbins
Copyright 2018 OReilly Media, Inc. All rights reserved.
Printed in Canada.
Published by OReilly Media, Inc., 1005 Gravenstein Highway North, Sebastopol, CA 95472.
OReilly Media books may be purchased for educational, business, or sales promotional use. Online editions are also avail-
able for most titles (oreilly.com/safari). For more information, contact our corporate/institutional sales department: 800-998-
9938 or [emailprotected]
EDITORS: Meg Foley and Jeff Bleiel
PRODUCTION EDITOR: Kristen Brown
COVER DESIGNER: Edie Freedman
INTERIOR DESIGNER: Jennifer Robbins
PRINT HISTORY:
March 2001: First edition.
June 2003: Second edition.
June 2007: Third edition.
August 2012: Fourth edition.
May 2018: Fifth edition.
The OReilly logo is a registered trademark of OReilly Media, Inc. OReilly Digital Studio and related trade dress are
trademarks of OReillyMedia, Inc. Photoshop, Illustrator, Dreamweaver, Elements, HomeSite, and Fireworks are either regis-
tered trademarks or trademarks of Adobe Systems Incorporated in the United States and/or other countries. Microsoft and
Expression Web are either registered trademarks or trademarks of Microsoft Corporation in the United States and/or other
countries. Many of the designations used by manufacturers and sellers to distinguish their products are claimed as trade-
marks. Where those designations appear in this book, and OReillyMedia, Inc. was aware of a trademark claim, the designa-
tions have been printed in caps or initial caps.
While every precaution has been taken in the preparation of this book, the publisher and author assume no responsibility for
errors or omissions, or for damages resulting from the use of the information contained herein.
ISBN: 978-1-491-96020-2
[TI] [2018-04-16]
CONTENTS
FOREWORD ….. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xi
PREFACE …. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xiii
Part I. GETTING STARTED
1. Getting Started in Web Design …………………………………… 3
Where Do I Start? ………………………………………………………………….. 4
It Takes a Village (Website Creation Roles) …………………………………. 4
Gearing Up for Web Design …………………………………………………… 14
What Youve Learned ……………………………………………………………. 20
Test Yourself ……………………………………………………………………….. 20
2. How the Web Works ……………………………………………….. 21
The Internet Versus the Web ………………………………………………….. 21
Serving Up Your Information …………………………………………………. 22
A Word About Browsers ………………………………………………………… 23
Web Page Addresses (URLs) …………………………………………………… 24
The Anatomy of a Web Page …………………………………………………… 27
Putting It All Together …………………………………………………………… 32
Test Yourself ……………………………………………………………………….. 34
3. Some Big Concepts You Need to Know ………………………. 35
A Multitude of Devices …………………………………………………………. 36
Sticking with the Standards ……………………………………………………. 38
Progressive Enhancement ………………………………………………………. 38
iii
Responsive Web Design ………………………………………………………… 40
One Web for All (Accessibility) ………………………………………………. 42
The Need for Speed (Site Performance) …………………………………….. 44
Test Yourself ……………………………………………………………………….. 46
Part II. HTML FOR STRUCTURE
4. Creating a Simple Page …………………………………………… 49
A Web Page, Step-By-Step ……………………………………………………… 49
Launch a Text Editor …………………………………………………………….. 50
Step 1: Start with Content ……………………………………………………… 53
Step 2: Give the HTML Document Structure …………………………….. 55
Step 3: Identify Text Elements ………………………………………………… 59
Step 4: Add an Image ……………………………………………………………. 62
Step 5: Change the Look with a Style Sheet ………………………………. 66
When Good Pages Go Bad …………………………………………………….. 67
Validating Your Documents ……………………………………………………. 68
Test Yourself ……………………………………………………………………….. 70
Element Review: HTML Document Setup ……………………………….. 70
5. Marking Up Text …………………………………………………….. 71
Paragraphs ………………………………………………………………………….. 71
Headings …………………………………………………………………………….. 72
Thematic Breaks (Horizontal Rule) ………………………………………….. 74
Lists …………………………………………………………………………………… 74
More Content Elements …………………………………………………………. 78
Organizing Page Content ……………………………………………………….. 82
The Inline Element Roundup ………………………………………………….. 88
Generic Elements (div and span) ……………………………………………… 98
Improving Accessibility with ARIA ……………………………………….. 102
Character Escapes ………………………………………………………………. 105
Putting It All Together …………………………………………………………. 108
Test Yourself ……………………………………………………………………….111
Element Review: Text Elements …………………………………………….. 112
Contents
iv
6. Adding Links ……………………………………………………….. 113
The href Attribute ………………………………………………………………..114
Linking to Pages on the Web ………………………………………………… 115
Linking Within Your Own Site ………………………………………………116
Targeting a New Browser Window ………………………………………… 126
Mail Links ………………………………………………………………………… 127
Telephone Links …………………………………………………………………. 128
Test Yourself ……………………………………………………………………… 128
Element Review: Links ………………………………………………………… 130
7. Adding Images …………………………………………………….. 131
First, a Word on Image Formats ……………………………………………. 132
The img Element ………………………………………………………………… 134
Adding SVG Images ……………………………………………………………. 139
Responsive Image Markup …………………………………………………… 146
Whew! Were Finished ………………………………………………………… 159
Test Yourself ……………………………………………………………………… 159
Element Review: Images ……………………………………………………….162
8. Table Markup ………………………………………………………. 163
How to Use Tables ……………………………………………………………… 163
Minimal Table Structure ……………………………………………………… 165
Table Headers ……………………………………………………………………. 167
Spanning Cells …………………………………………………………………… 168
Table Accessibility ……………………………………………………………….169
Row and Column Groups ………………………………………………………171
Wrapping Up Tables ……………………………………………………………. 173
Test Yourself ……………………………………………………………………….175
Element Review: Tables …………………………………………………………176
9. Forms ………………………………………………………………… 177
How Forms Work……………………………………………………………….. 177
The form Element …………………………………………………………………179
Variables and Content …………………………………………………………. 182
The Great Form Control Roundup…………………………………………. 183
Form Accessibility Features ………………………………………………….. 203
Contents
v
Form Layout and Design ……………………………………………………… 206
Test Yourself ……………………………………………………………………… 208
Element Review: Forms ……………………………………………………….. 209
10. Embedded Media …………………………………………………. 215
Window-In-A-Window (iframe) ……………………………………………. 215
Multipurpose Embedder (object) …………………………………………….218
Video and Audio ………………………………………………………………… 219
Canvas ……………………………………………………………………………… 228
Test Yourself ……………………………………………………………………… 233
Element Review: Embedded Media ………………………………………… 234
Part III. CSS FOR PRESENTATION
11. Introducing Cascading Style Sheets ………………………… 239
The Benefits of CSS …………………………………………………………….. 239
How Style Sheets Work ……………………………………………………….. 240
The Big Concepts ……………………………………………………………….. 246
CSS Units of Measurement …………………………………………………… 253
Developer Tools Right in Your Browser ………………………………….. 256
Moving Forward with CSS …………………………………………………… 258
Test Yourself ……………………………………………………………………… 259
12. Formatting Text …………………………………………………… 261
Basic Font Properties …………………………………………………………… 261
Advanced Typography with CSS3 ………………………………………….. 277
Changing Text Color …………………………………………………………… 280
A Few More Selector Types ………………………………………………….. 281
Text Line Adjustments ………………………………………………………… 287
Underlines and Other Decorations ……………………………………… 290
Changing Capitalization ………………………………………………………. 291
Spaced Out ……………………………………………………………………….. 292
Text Shadow ……………………………………………………………………… 293
Changing List Bullets and Numbers ………………………………………. 296
Test Yourself ……………………………………………………………………… 299
CSS Review: Font and Text Properties ……………………………………. 301
Contents
vi
13. Colors and Backgrounds ……………………………………….. 303
Specifying Color Values ……………………………………………………….. 303
Foreground Color …………………………………………………………………311
Background Color ………………………………………………………………. 312
Clipping the Background ……………………………………………………….314
Playing with Opacity …………………………………………………………… 315
Pseudo-Class Selectors ………………………………………………………….316
Pseudo-Element Selectors …………………………………………………….. 320
Attribute Selectors ………………………………………………………………. 323
Background Images ………………………………………………………………324
The Shorthand background Property ……………………………………… 338
Like a Rainbow (Gradients) ………………………………………………….. 340
Finally, External Style Sheets ………………………………………………… 348
Wrapping It Up ………………………………………………………………….. 351
Test Yourself ……………………………………………………………………… 352
CSS Review: Color and Background Properties ………………………… 354
14. Thinking Inside the Box ………………………………………… 355
The Element Box ………………………………………………………………… 355
Specifying Box Dimensions ………………………………………………….. 356
Padding ……………………………………………………………………………. 361
Borders …………………………………………………………………………….. 366
Margins ……………………………………………………………………………..376
Assigning Display Types ………………………………………………………. 380
Box Drop Shadows ……………………………………………………………… 382
Test Yourself ……………………………………………………………………… 384
CSS Review: Box Properties …………………………………………………. 384
15. Floating and Positioning ……………………………………….. 387
Normal Flow ……………………………………………………………………… 387
Floating ……………………………………………………………………………. 388
Fancy Text Wrap with CSS Shapes ……………………………………….. 399
Positioning Basics ……………………………………………………………….. 405
Relative Positioning …………………………………………………………….. 407
Absolute Positioning ……………………………………………………………. 408
Fixed Positioning ………………………………………………………………….416
Contents
vii
Test Yourself ……………………………………………………………………….417
CSS Review: Floating and Positioning Properties ……………………….418
16. CSS Layout with Flexbox and Grid …………………………… 419
Flexible Boxes with CSS Flexbox …………………………………………….419
CSS Grid Layout ………………………………………………………………… 447
Test Yourself ……………………………………………………………………… 478
CSS Review: Layout Properties ……………………………………………… 482
17. Responsive Web Design ………………………………………… 485
Why RWD? ……………………………………………………………………….. 485
The Responsive Recipe ………………………………………………………… 486
Choosing Breakpoints …………………………………………………………. 495
Designing Responsively ……………………………………………………….. 499
A Few Words About Testing …………………………………………………. 512
More RWD Resources …………………………………………………………..514
Test Yourself ……………………………………………………………………….516
18. Transitions, Transforms, and Animation ………………….. 517
Ease-y Does It (CSS Transitions) ……………………………………………..517
CSS Transforms …………………………………………………………………. 527
Keyframe Animation …………………………………………………………… 536
Wrapping Up …………………………………………………………………….. 542
Test Yourself ……………………………………………………………………… 542
CSS Review: Transitions, Transforms, and Animation ………………. 545
19. More CSS Techniques ……………………………………………. 547
Styling Forms …………………………………………………………………….. 547
Styling Tables …………………………………………………………………….. 551
A Clean Slate (Reset and Normalize.css) …………………………………. 554
Image Replacement Techniques …………………………………………….. 556
CSS Sprites ………………………………………………………………………… 557
CSS Feature Detection…………………………………………………………. 559
Wrapping Up Style Sheets ……………………………………………………. 564
Test Yourself ……………………………………………………………………… 564
CSS Review: Table Properties ……………………………………………….. 566
Contents
viii
20. Modern Web Development Tools …………………………….. 567
Getting Cozy with the Command Line …………………………………… 567
CSS Power Tools (Processors) ……………………………………………….. 572
Build Tools (Grunt and Gulp) ……………………………………………….. 578
Version Control with Git and GitHub …………………………………….. 581
Conclusion ………………………………………………………………………… 588
Test Yourself ……………………………………………………………………… 589
Part IV. JAVASCRIPT FOR BEHAVIOR
21. Introduction to JavaScript …………………………………….. 593
What Is JavaScript? …………………………………………………………….. 593
Adding JavaScript to a Page ………………………………………………….. 597
The Anatomy of a Script ………………………………………………………. 598
The Browser Object …………………………………………………………….. 612
Events ………………………………………………………………………………. 613
Putting It All Together …………………………………………………………..616
Learning More About JavaScript …………………………………………….617
Test Yourself ……………………………………………………………………… 619
22. Using JavaScript ………………………………………………….. 621
Meet the DOM …………………………………………………………………… 621
Polyfills …………………………………………………………………………….. 630
JavaScript Libraries …………………………………………………………….. 632
Big Finish ………………………………………………………………………….. 637
Test Yourself ……………………………………………………………………… 637
Part V. WEB IMAGES
23. Web Image Basics ………………………………………………… 641
Image Sources ……………………………………………………………………. 641
Meet the Formats ……………………………………………………………….. 644
Image Size and Resolution ……………………………………………………. 657
Image Asset Strategy …………………………………………………………… 660
Favicons ……………………………………………………………………………. 665
Contents
ix
Summing Up Images …………………………………………………………… 668
Test Yourself …………………………………………………………………….. 668
24. Image Asset Production ………………………………………… 671
Saving Images in Web Formats ……………………………………………… 671
Working with Transparency …………………………………………………. 676
Responsive Image Production Tips ………………………………………… 680
Image Optimization ……………………………………………………………. 691
Test Yourself ……………………………………………………………………….701
25. SVG …………………………………………………………………… 703
Drawing with XML …………………………………………………………….. 705
Features of SVG as XML ……………………………………………………… 713
SVG Tools …………………………………………………………………………. 718
SVG Production Tips …………………………………………………………… 721
Responsive SVGs ………………………………………………………………… 724
Further SVG Exploration ……………………………………………………… 731
Test Yourself …………………………………………………………………….. 731
And…Were Done! ………………………………………………………………. 733
Part VI. APPENDICES
A. Answers ……………………………………………………………… 737
B. HTML5 Global Attributes ……………………………………….. 753
C. CSS Selectors, Levels 3 and 4 …………………………………. 755
D. From HTML+ to HTML5 ………………………………………….. 759
INDEX …. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 767
Contents
x
FOREWORD
BY JEN SIMMONS
If you travel to Silicon Valley and navigate between the global headquarters
of some of the worlds most famous internet companies, you can head to
the Computer History Museum. Wander through the museum, past the
ancient mainframes and the story of the punch card, and youll eventually
find yourself at the beginning of the Wide World Web. Theres a copy of the
Mosaic browser on a floppy disk tucked in a book of the same name, a copy
of Netscape Navigator that was sold in a box, and something called Internet
in a Box, the #1 best-selling internet solution for Windows. Then there are
the websites. Some of the earliest, most notable, and most important websites
are on permanent display, including something called the Global Network
Navigator, from 1993. It was designed by none other than the author of this
book, Jennifer Robbins. Long before most of us had any idea the web existed,
or even before many of you were born, Jen was busy designing the first com-
mercial website. Shes been there from the very beginning, and has watched,
taught, and written about every stage of evolution of the web.
Learning Web Design is now in its 5th edition, with a gazillion new pages and
updates from those early days.
I am constantly asked, What are the best resources for learning web technol-
ogy? I learned by reading books. Blog posts are great, but you also need an
in-depth comprehensive look at the subject. In the beginning, all books were
beginner books, teaching HTML, URLs, and how to use a browser. When
CSS came along, the books assumed youd already been using HTML, and
taught you how to change to the new techniques. Then CSS3 came along,
and all the books taught us how to add new CSS properties to our preexist-
ing understanding of CSS2. Of course there were always books for beginners,
but they were super basic. They never touched on professional techniques for
aspiring professionals. Each new generation of books assumed that you had
prior knowledge. Great for those of us in the industry. Tough for anyone new.
xi
But how in the world are you supposed to read about two decades of tech-
niques, discarding what is outdated, and remembering what is still correct?
How are you supposed to build a career from knowledge thats so basic that
you have no idea what real pros code in their everyday jobs?
You cant. Thats why today when people ask me for a book recommendation,
I have only one answer. This book.
This book you are reading now doesnt require any prior knowledge. You
dont need to have made a web page before, or to have any idea where to get a
code editor. It starts at the very beginning. And yet, unlike all the other books
that start at the beginning, this one will get you to the good stuff, fast. Jen will
explain every step you need, including some very advanced concepts. Shes
packed this book full of cutting edge, insider knowledge from top experts.
I honestly dont know how she does it. How can someone teach the basics
and the advanced stuff at the same time? Usually youll learn those things
years apart, with lots of struggling in the dark in the meantime. Here, Jen
will lift you up from wherever you are in your journey, and take you farther.
Every one of usmyself included, and Im on the CSS Working Group (the
group of people who invent new CSS)can learn a lot from this book. I do
every time I pick it up.
Pay attention to the notes in the margins. Read the websites she recommends,
watch the videos. Jen is giving you a shortcut to a professional network.
Follow the people she mentions. Read the links they suggest. These might
be your future colleagues. Dare to dream that you will meet them. They are,
after all, only a tweet away. It is a small world, full of real people, and you can
become part of it all. This book will get you started.
Jen Simmons
Designer and Developer Advocate at Mozilla
Member of the CSS Working Group
April 2018
Learning Web Designxii
Foreword
PREFACE
Hello and welcome to the fifth edition of Learning Web Design!
Ive been documenting web design and development in books like this one
for decades, and it continues to fascinate me how the web landscape changes
from edition to edition. This fifth edition is no exception! Not only is this
version nearly 200 pages longer than the last one, but there are also some
significant updates and additions worth noting.
First, some technologies and techniques that were brand new or even experi-
mental in the last edition have become nicely settled in. HTML5 is the new
normal, and CSS is moving ahead with its modular approach, allowing new
technologies to emerge and be adopted one at a time. Weve largely gotten our
heads around designing for a seemingly infinite range of devices. Responsive
Web Design is now the de facto approach to building sites. As a result, RWD
has earned its own chapter in this edition (Chapter 17, Responsive Web
Design). Where in the last edition we pondered and argued how to handle
responsive image markup, in this edition, the new responsive image elements
are standardized and well supported (Chapter 7, Adding Images). I think were
getting the hang of this mobile thing!
Ive seen a lot of seismic shifts in web design over the years, and this time,
Flexbox and Grid are fundamentally changing the way we approach design.
Just as we saw CSS put table-based layouts and 1-pixel spacer GIFs out of
their misery, Flexbox and Grid are finally poised to kick our old float-based
layout hacks to the curb. It is nothing short of a revolution, and after 25 years,
its refreshing to have an honest-to-goodness solution for layout. This edition
sports a new (and hefty!) chapter on proper page layout with Flexbox and
Grid (Chapter 16, CSS Layout with Flexbox and Grid).
Although knowledge of HTML, CSS, and JavaScript is at the heart of web
development, the discipline has been evolving, and frankly, becoming more
O N L I N E r E S O U rC E
The Companion Website
Be sure to visit the companion
website for this book at
learningwebdesign.com.
It features materials for the
exercises, downloadable articles,
lists of links from the book, contact
information, and more.
xiii
complicated. I would be shirking my duty if I didnt at least introduce you
to some of the new tools of the tradeCSS processors, feature detection, the
command line, task runners, and Gitin a new chapter on the modern web
developer toolkit (Chapter 20, Modern Web Development Tools). Sure, its more
stuff to learn, but the benefit is a streamlined and more efficient workflow.
The biggest surprise to me personally was how much web image production
has changed since the fourth edition. Other than the introduction of the
PNG format, my graphics chapters have remained essentially unchanged for
20 years. Not so this time around! Our old standby, GIF, is on the brink of
retirement, and PNG is the default thanks to its performance advantages and
new tools that let even smaller 8-bit PNGs include multiple levels of transpar-
ency. But PNG will have to keep its eye on WebP, mentioned in this edition for
the first t
