Read Anytime Anywhere Easy Ebook Downloads at ebookmeta.

com

HTML CSS and JavaScript All in One Covering HTML5

CSS3 and ES6 Sams Teach Yourself 3rd Edition
Meloni

https://ebookmeta.com/product/html-css-and-javascript-all-
in-one-covering-html5-css3-and-es6-sams-teach-yourself-3rd-
edition-meloni/

OR CLICK HERE

DOWLOAD EBOOK

Visit and Get More Ebook Downloads Instantly at https://ebookmeta.com

 Recommended digital products (PDF, EPUB, MOBI) that
you can download immediately if you are interested.

Sams Teach Yourself C in One Hour a Day 9th Edition

Siddhartha Rao

https://ebookmeta.com/product/sams-teach-yourself-c-in-one-hour-a-
day-9th-edition-siddhartha-rao/

ebookmeta.com

Teach Yourself VISUALLY HTML and CSS The Fast and Easy Way
to Learn 2nd Edition Guy Hart-Davis

https://ebookmeta.com/product/teach-yourself-visually-html-and-css-
the-fast-and-easy-way-to-learn-2nd-edition-guy-hart-davis/

ebookmeta.com

Sams Teach Yourself SAP in 24 Hours Fourth Edition George

W Anderson

https://ebookmeta.com/product/sams-teach-yourself-sap-in-24-hours-
fourth-edition-george-w-anderson/

ebookmeta.com

Snowflakes and Holidates 02 Riley Ash My Hero Holidate 1st

Edition Riley Ash

https://ebookmeta.com/product/snowflakes-and-holidates-02-riley-ash-
my-hero-holidate-1st-edition-riley-ash/

ebookmeta.com
Wardlaw's Contemporary Nutrition: A Functional Approach
6th Edition Anne M. Smith

https://ebookmeta.com/product/wardlaws-contemporary-nutrition-a-
functional-approach-6th-edition-anne-m-smith/

ebookmeta.com

Black Mental Health Patients Providers and Systems 1st

Edition Ezra E. H. Griffith

https://ebookmeta.com/product/black-mental-health-patients-providers-
and-systems-1st-edition-ezra-e-h-griffith/

ebookmeta.com

Eye Yield Ophthalmology Basics for Board and FRCS Part 1

Exams Saif Aldeen Saleh Alryalat

https://ebookmeta.com/product/eye-yield-ophthalmology-basics-for-
board-and-frcs-part-1-exams-saif-aldeen-saleh-alryalat/

ebookmeta.com

Art Subjects Making Artists in the American University

Howard Singerman

https://ebookmeta.com/product/art-subjects-making-artists-in-the-
american-university-howard-singerman/

ebookmeta.com

Self-Care All-in-One For Dummies Shamash Alidina

https://ebookmeta.com/product/self-care-all-in-one-for-dummies-
shamash-alidina/

ebookmeta.com
Fokker Aircraft of WWI Volume 5 1918 Design Part 1
Prototypes D VI 1st Edition Jack Herris

https://ebookmeta.com/product/fokker-aircraft-of-wwi-
volume-5-1918-design-part-1-prototypes-d-vi-1st-edition-jack-herris/

ebookmeta.com
 Jennifer Kyrnin
Julie Meloni

SamsTeach Yourself

HTML, CSS,
and JavaScript
Third Edition

All
One
in
Sams Teach Yourself HTML, CSS, and JavaScript All in One, Third Edition Editor-in-Chief
Copyright © 2019 by Pearson Education, Inc. Mark Taub
All rights reserved. This publication is protected by copyright, and permission must be obtained
Editor
from the publisher prior to any prohibited reproduction, storage in a retrieval system, or transmis-
sion in any form or by any means, electronic, mechanical, photocopying, recording, or likewise. Mark Taber
For information regarding permissions, request forms, and the appropriate contacts within the Managing Editor
Pearson Education Global Rights & Permissions Department, please visit www.pearsoned.com/
permissions/. No patent liability is assumed with respect to the use of the information contained Sandra Schroeder
herein. Although every precaution has been taken in the preparation of this book, the publisher Senior Project
and authors assume no responsibility for errors or omissions. Nor is any liability assumed for Editor
damages resulting from the use of the information contained herein.
Lori Lyons
ISBN-13: 978-0-672-33808-3
ISBN-10: 0-672-33808-4 Copy Editor
Library of Congress Control Number: 2018953965 Kitty Wilson
01 18 Project Manager
Trademarks Suganya Karuppasamy
All terms mentioned in this book that are known to be trademarks or service marks have Indexer
been appropriately capitalized. Pearson cannot attest to the accuracy of this information.
Use of a term in this book should not be regarded as affecting the validity of any trademark Ken Johnson
or service mark. Proofreader
Warning and Disclaimer Abigail Manheim
Every effort has been made to make this book as complete and as accurate as possible, but no
Technical Editor
warranty or fitness is implied. The information provided is on an “as is” basis. The author and the
publisher shall have neither liability nor responsibility to any person or entity with respect to any Julie Meloni
loss or damages arising from the information contained in this book or from the use of the CD or Editorial Assistant
programs accompanying it.
Cindy Teeters
Special Sales
For information about buying this title in bulk quantities, or for special sales opportunities (which Cover Designer
may include electronic versions; custom cover designs; and content particular to your business, Chuti Prasertsith
training goals, marketing focus, or branding interests), please contact our corporate sales
Compositor
department at [email protected] or (800) 382-3419.
codemantra
For government sales inquiries, please contact [email protected].
For questions about sales outside the U.S., please contact [email protected].
Contents at a Glance

Part I: Getting Started on the Web

LESSON 1 Understanding How the Web Works . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
2 Structuring an HTML Document . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
3 Understanding Cascading Style Sheets. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55
4 Understanding JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79
5 Validating and Debugging Your Code. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 97

Part II: Building Blocks of Practical Web Design

LESSON 6 Working with Fonts, Text Blocks, Lists, and Tables . . . . . . . . . . . . . . . . . . . . . . . . . . . 121
7 Using External and Internal Links . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 167
8 Working with Colors, Images, and Multimedia . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 191

Part III: Advanced Web Page Design with CSS

LESSON 9 Working with Margins, Padding, Alignment, and Floating . . . . . . . . . . . . . . . 249
10 Understanding the CSS Box Model and Positioning . . . . . . . . . . . . . . . . . . . . . . . . . 271
11 Using CSS to Do More with Lists, Text, and Navigation . . . . . . . . . . . . . . . . . . . . 289
12 Creating Layouts Using Modern CSS Techniques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 317
13 Taking Control of Backgrounds and Borders . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 353
14 Using CSS Transformations and Transitions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 383
15 Animating with CSS and the Canvas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 401

Part IV: Responsive Web Design

LESSON 16 Understanding the Importance of Responsive Web Design . . . . . . . . . . . . . . . 427
17 Designing for Mobile Devices . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 443
18 Using Media Queries and Breakpoints . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 471
iv Sams Teach Yourself HTML, CSS, and JavaScript All in One

Part V: Getting Started with Dynamic Sites

LESSON 19 Understanding Dynamic Websites and HTML5 Applications. . . . . . . . . . . . . 487
20 Getting Started with JavaScript Programming. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 507
21 Working with the Document Object Model (DOM) . . . . . . . . . . . . . . . . . . . . . . . . . . 523
22 Using JavaScript Variables, Strings, and Arrays . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 551
23 Controlling Flow with Conditions and Loops . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 595
24 Responding to Events and Using Windows . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 617
25 JavaScript Best Practices .............................................................. 655
26 Using Third-Party JavaScript Libraries and Frameworks . . . . . . . . . . . . . . . . . . . 681

Part VI: Advanced Website Functionality and Management

LESSON 27 Working with Web-Based Forms. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 695
28 Organizing and Managing a Website . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 729

Index . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 751
Table of Contents

Part I: Getting Started on the Web

LESSON 1: Understanding How the Web Works 1

A Brief History of HTML and the World Wide Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
Creating Web Content . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
Understanding Web Content Delivery ......................................................... 3
Selecting a Web Hosting Provider . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
Testing with Multiple Web Browsers and Devices .......................................... 8
Creating a Sample File. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
Using FTP to Transfer Files ....................................................................... 10
Understanding Where to Place Files on the Web Server . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
Distributing Content Without a Web Server . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
Tips for Testing Web Content . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
Q&A ..................................................................................................... 20
Workshop . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
Exercises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22

LESSON 2: Structuring an HTML Document 23

Getting Prepared . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
Getting Started with a Simple Web Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25
HTML Tags Every Web Page Must Have. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28
Organizing a Page with Paragraphs and Line Breaks. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31
Organizing Your Content with Headings . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33
Understanding Semantic Elements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36
Using <header> in Multiple Ways . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42
Understanding the <section> Element . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44
Using <article> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45
vi Sams Teach Yourself HTML, CSS, and JavaScript All in One

Implementing the <nav> Element . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45

When to Use <aside> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47
Using <footer> Effectively . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49
Q&A ..................................................................................................... 50
Workshop . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51
Exercises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53

LESSON 3: Understanding Cascading Style Sheets 55

How CSS Works. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56
A Basic Style Sheet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57
A CSS Style Primer. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 63
Using Style Classes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 68
Using Style IDs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 70
Internal Style Sheets and Inline Styles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 74
Q&A ..................................................................................................... 75
Workshop . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75
Exercises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 77

LESSON 4: Understanding JavaScript 79

Learning Web Scripting Basics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 80
How JavaScript Fits into a Web Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81
Exploring JavaScript’s Capabilities . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 84
Displaying Time with JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 85
Testing the Script . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 89
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 93
Q&A ..................................................................................................... 93
Workshop . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 94
Exercises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 96

LESSON 5: Validating and Debugging Your Code 97

Validating Your Web Content . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 97
Debugging HTML and CSS Using Developer Tools . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 99
Debugging JavaScript Using Developer Tools . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 112
 Table of Contents vii

Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 118
Q&A ................................................................................................... 118
Workshop . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 118
Exercises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 120

Part II: Building Blocks of Practical Web Design

LESSON 6: Working with Fonts, Text Blocks, Lists, and Tables 121
Working with Special Characters ............................................................ 122
Boldface, Italic, and Special Text Formatting . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 126
Tweaking the Font. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 129
Using Web Fonts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 133
Aligning Text on a Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 136
The Three Types of HTML Lists . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 139
Placing Lists Within Lists . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 142
Creating a Simple Table . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 147
Controlling Table Sizes. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 151
Alignment and Spanning Within Tables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 154
Page Layout with Tables ........................................................................ 157
Using CSS Columns . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 158
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 162
Q&A ................................................................................................... 164
Workshop . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 165
Exercises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 166

LESSON 7: Using External and Internal Links 167

Using Web Addresses . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 167
Linking Within a Page Using Anchors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 170
Linking Between Your Own Web Content . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 174
Linking to Non-HTML Files . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 177
Linking to External Web Content . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 178
Linking to an Email Address . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 179
Opening a Link in a New Browser Window. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 180
Giving Titles to Links . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 181
viii Sams Teach Yourself HTML, CSS, and JavaScript All in One

Using CSS to Style Hyperlinks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 182

Using Links Effectively . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 186
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 187
Q&A ................................................................................................... 188
Workshop . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 189
Exercises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 190

LESSON 8: Working with Colors, Images, and Multimedia 191

Best Practices for Choosing Colors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 192
Understanding Web Colors .................................................................... 194
Using Hexadecimal Values for Colors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 196
Using RGB and RGBa Values for Colors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 197
Using CSS to Set Background, Text, and Border Colors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 199
Choosing Graphics Software . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 201
The Least You Need to Know About Graphics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 202
Preparing Photographic Images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 203
Creating Banners and Buttons . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 210
Optimizing Images by Reducing or Removing Colors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 211
Creating Tiled Background Images. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 212
Placing Images on a Web Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 214
Describing Images with Text. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 217
Specifying Image Height and Width . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 218
Aligning Images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 219
Turning Images into Links . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 223
Using Background Images. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 226
Using Image Maps . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 227
Linking to Multimedia Files . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 233
Embedding Multimedia Files . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 237
Additional Tips for Using Multimedia . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 242
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 242
Q&A ................................................................................................... 245
Workshop . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 246
Exercises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 248
 Table of Contents ix

Part III: Advanced Web Page Design with CSS

LESSON 9: Working with Margins, Padding, Alignment, and Floating 249

Using Margins . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 249
Padding Elements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 257
Keeping Everything Aligned . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 261
Centering Blocks of Content . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 262
Understanding the float Property . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 263
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 267
Q&A ................................................................................................... 267
Workshop . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 267
Exercises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 270

LESSON 10: Understanding the CSS Box Model and Positioning 271
The CSS Box Model . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 271
Changing the Box Model . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 275
The Whole Scoop on Positioning . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 276
Controlling the Way Things Stack Up ...................................................... 281
Managing the Flow of Text . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 284
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 285
Q&A ................................................................................................... 285
Workshop . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 286
Exercises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 288

LESSON 11: Using CSS to Do More with Lists, Text, and Navigation 289
HTML List Refresher . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 290
How the CSS Box Model Affects Lists . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 290
Placing List Item Indicators . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 294
Creating Image Maps with List Items and CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 296
How Navigation Lists Differ from Regular Lists . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 299
Creating Vertical Navigation with CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 300
Creating Horizontal Navigation with CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 310
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 314
Q&A ................................................................................................... 314
Workshop . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 315
Exercises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 316
x Sams Teach Yourself HTML, CSS, and JavaScript All in One

LESSON 12: Creating Layouts Using Modern CSS Techniques 317

Getting Ready to Do Page Layout . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 318
The Importance of Putting Mobile Devices First . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 319
Understanding Fixed Layouts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 319
Understanding Liquid Layouts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 322
Creating a Fixed/Liquid Hybrid Layout . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 324
Using Modern CSS Layout Techniques. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 335
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 349
Q&A ................................................................................................... 350
Workshop . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 350
Exercises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 352

LESSON 13: Taking Control of Backgrounds and Borders 353

Reviewing Background and Border Basics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 353
Using Multiple Borders and Backgrounds. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 355
Using Forgotten Background Properties . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 359
Using Gradients as Backgrounds . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 365
Rounding the Corners of HTML Elements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 371
Using Images as Borders . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 373
Understanding CSS Outlines . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 378
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 379
Q&A ................................................................................................... 379
Workshop . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 379
Exercises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 381

LESSON 14: Using CSS Transformations and Transitions 383

Understanding CSS 2D Transformations .................................................. 383
Transforming Elements in Three Dimensions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 392
Working with CSS Transitions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 393
Using JavaScript to Trigger Transitions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 397
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 398
Q&A ................................................................................................... 399
Workshop . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 399
Exercises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 400
 Table of Contents xi

LESSON 15: Animating with CSS and the Canvas 401

Understanding CSS Animation ............................................................... 401
Using the CSS Canvas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 410
Choosing Between CSS Animation and Canvas Animation . . . . . . . . . . . . . . . . . . . . . . . . . 423
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 424
Q&A ................................................................................................... 424
Workshop . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 424
Exercises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 426

Part IV: Responsive Web Design

LESSON 16: Understanding the Importance of Responsive Web Design 427

What Is Responsive Web Design? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 427
What Is Progressive Enhancement? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 431
Writing HTML for Responsive Web Design . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 435
Validating HTML, CSS, and JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 438
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 439
Q&A ................................................................................................... 440
Workshop . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 440
Exercises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 442

LESSON 17: Designing for Mobile Devices 443

Designing for Mobile Devices . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 443
Understanding Mobile First Design . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 451
Using Responsive Tables and Images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 455
Creating Responsive Layouts Without Media Queries ................................ 464
Alternatives for Mobile Design Besides RWD . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 466
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 468
Q&A ................................................................................................... 469
Workshop . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 469
Exercise . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 470

LESSON 18: Using Media Queries and Breakpoints 471

What Is a Media Query? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 471
Using Media Query Expressions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 476
What Is a Breakpoint? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 477
xii Sams Teach Yourself HTML, CSS, and JavaScript All in One

How to Define Breakpoints in Your CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 477

Optimal Breakpoints . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 483
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 484
Q&A ................................................................................................... 484
Workshop . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 485
Exercises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 486

Part V: Getting Started with Dynamic Sites

LESSON 19: Understanding Dynamic Websites and HTML5 Applications 487

Understanding the Different Types of Scripting . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 487
Including JavaScript in HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 488
Displaying Random Content . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 491
Understanding the Document Object Model. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 495
Changing Images Based on User Interaction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 498
Thinking Ahead to Developing HTML5 Applications . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 501
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 501
Q&A ................................................................................................... 502
Workshop . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 502
Exercises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 506

LESSON 20: Getting Started with JavaScript Programming 507

Basic Concepts. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 507
JavaScript Syntax Rules . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 514
Using Comments . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 515
Best Practices for JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 516
Understanding JSON . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 517
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 518
Q&A ................................................................................................... 518
Workshop . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 519
Exercises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 522

LESSON 21: Working with the Document Object Model (DOM) 523
Understanding the Document Object Model. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 523
Using window Objects ........................................................................... 524
Working with the document Object. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 525
 Table of Contents xiii

Accessing Browser History . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 528

Working with the location Object. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 530
More About the DOM Structure . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 531
Working with DOM Nodes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 534
Creating Positionable Elements (Layers) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 536
Hiding and Showing Objects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 541
Modifying Text in a Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 543
Adding Text to a Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 545
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 547
Q&A ................................................................................................... 547
Workshop . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 548
Exercises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 550

LESSON 22: Using JavaScript Variables, Strings, and Arrays 551

Using Variables. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 552
Understanding Expressions and Operators . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 555
Data Types in JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 556
Converting Between Data Types. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 557
Using String Objects ........................................................................... 558
Working with Substrings . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 562
Using Numeric Arrays ........................................................................... 564
Using String Arrays . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 565
Sorting a Numeric Array . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 567
Using Functions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 570
Introducing Objects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 575
Using Objects to Simplify Scripting . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 577
Extending Built-in Objects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 582
Using the Math Object . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 583
Working with Math Methods . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 585
Working with Dates. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 587
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 590
Q&A ................................................................................................... 590
Workshop . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 591
Exercises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 594
xiv Sams Teach Yourself HTML, CSS, and JavaScript All in One

LESSON 23: Controlling Flow with Conditions and Loops 595

The if Statement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 595
Using Shorthand Conditional Expressions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 599
Testing Multiple Conditions with if and else . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 600
Using Multiple Conditions with switch . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 602
Using for Loops . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 604
Using while Loops ............................................................................... 606
Using do...while Loops . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 607
Working with Loops . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 607
Looping Through Object Properties . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 609
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 612
Q&A ................................................................................................... 612
Workshop . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 613
Exercises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 615

LESSON 24: Responding to Events and Using Windows 617

Understanding Event Handlers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 618
Using Mouse Events. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 623
Using Keyboard Events . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 627
Using the load and unload Events . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 630
Using click to Change the Appearance of a <div> ................................. 631
Controlling Windows with Objects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 638
Moving and Resizing Windows . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 643
Using Timeouts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 645
Displaying Dialog Boxes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 648
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 650
Q&A ................................................................................................... 650
Workshop . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 651
Exercises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 654

LESSON 25: JavaScript Best Practices 655

Scripting Best Practices . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 655
Reading Browser Information . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 666
Cross-Browser Scripting. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 669
 Table of Contents xv

Supporting Non-JavaScript-Enabled Browsers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 671

Creating an Unobtrusive Script . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 674
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 677
Q&A ................................................................................................... 677
Workshop . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 677
Exercises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 680

LESSON 26: Using Third-Party JavaScript Libraries and Frameworks 681

Using Third-Party JavaScript Libraries. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 681
Adding JavaScript Effects by Using a Third-Party Library . . . . . . . . . . . . . . . . . . . . . . . . . . . . 686
Using JavaScript Frameworks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 689
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 691
Q&A ................................................................................................... 691
Workshop . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 692
Exercises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 694

Part VI: Advanced Website Functionality and Management

LESSON 27: Working with Web-Based Forms 695

How HTML Forms Work . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 695
Creating a Form . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 696
Accepting Text Input ............................................................................. 702
Naming Each Piece of Form Data. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 703
Labeling Each Piece of Form Data . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 703
Grouping Form Elements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 705
Exploring Form Input Controls . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 706
Using HTML5 Form Validation. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 716
Submitting Form Data . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 718
Accessing Form Elements with JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 720
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 723
Q&A ................................................................................................... 725
Workshop . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 725
Exercises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 728
xvi Sams Teach Yourself HTML, CSS, and JavaScript All in One

LESSON 28: Organizing and Managing a Website 729

When One Page Is Enough . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 730
Organizing a Simple Site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 732
Organizing a Larger Site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 735
Optimizing Your Site for Search Engines . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 738
Writing Maintainable Code . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 740
Thinking About Version Control . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 743
Using HTML and CSS Frameworks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 745
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 746
Q&A ................................................................................................... 746
Workshop . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 747
Exercises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 750

Index 751
About the Authors

Jennifer Kyrnin consults professionally on web design and web development. She has built
and maintained websites of all sizes, from small single-page sites to large million-page
database-driven sites for international audiences. She has taught HTML, XML, and web
design online since 1997 and is the author of Sams Teach Yourself HTML5 Mobile Application
Development, Sams Teach Yourself Responsive Web Design, and Sams Teach Yourself Bootstrap.

Julie Meloni is a software development manager and technical consultant living in

Washington, DC. She has written several books and articles on web-based programming
languages and database topics, including the bestselling Sams Teach Yourself PHP, MySQL, and
Apache All in One.
Dedication

To Mark and Jaryth. As usual, you inspired me and kept me writing.

Acknowledgments

I would like to thank Mark Taber for thinking of me when this new edition came out. I couldn’t
have had a good-looking book without Kitty Wilson, my extraordinary copy editor. Any errors
are not her fault. And thanks also go to Julie Meloni for believing that I could take over her
book effectively. I hope I live up to her reputation.
Accessing the Free Web Edition

Your purchase of this book in any format, print or electronic, includes access to the
corresponding Web Edition, which provides several special features to help you learn:

N The complete text of the book online

N Interactive quizzes and exercises to test your understanding of the material

N Updates and corrections as they become available

The Web Edition can be viewed on all types of computers and mobile devices with any
modern web browser that supports HTML5.

To get access to the Web Edition of Sams Teach Yourself HTML, CSS, and JavaScript All in One,
Third Edition, all you need to do is register this book:

1. Go to www.informit.com/register.

2. Sign in or create a new account.

3. Enter the ISBN: 9780672338083.

4. Answer the questions as proof of purchase.

The Web Edition will appear under the Digital Purchases tab on your Account page.

Click the Launch link to access the product.

Reader Services

Register your copy of Sams Teach Yourself HTML, CSS, and JavaScript All in One at informit.com
for convenient access to downloads, updates, and corrections as they become available. To
start the registration process, go to informit.com/register and log in or create an account.*
Enter the product ISBN, 9780672338083, and click Submit. Once the process is complete, you
will find any available bonus content under Registered Products.

*Be sure to check the box that you would like to hear from us in order to receive exclusive
discounts on future editions of this product.
 LESSON 1
Understanding
How the Web Works

What You’ll Learn in This Lesson:

N A very brief history of the World Wide Web
N What is meant by the term web page and why this term doesn’t always reflect all the content
involved
N How content gets from your personal computer to someone else’s web browser
N How to select a web hosting provider
N How different web browsers and device types can affect your content
N How to transfer files to your web server by using FTP
N Where files should be placed on a web server
N How to distribute web content without a web server
N How to use other publishing methods, such as blogs
N Tips for testing the appearance and functionality of web content

Before you learn the intricacies of HTML (Hypertext Markup Language), CSS (Cascading Style
Sheets), and JavaScript, it is important to gain a solid understanding of the technologies that
help transform these plain-text files to the rich multimedia displays you see on your computer or
handheld device when browsing the World Wide Web.

For example, a file containing HTML and CSS is useless without a web browser to view it, and no
one besides yourself will see your content unless a web server is involved. Web servers make your
content available to others, who, in turn, use their web browsers and other devices to navigate to
an address and wait for the server to send information to them. You will be intimately involved in
this publishing process because you must create files and then put them on a server to make them
available in the first place, and you must ensure that your content will appear to the end user as
you intended, whether the user has a screen the size of a watch face or a billboard.
2 LESSON 1: Understanding How the Web Works

A Brief History of HTML and

the World Wide Web
Once upon a time, back when there weren’t any footprints on the Moon, some farsighted folks
decided to see whether they could connect several major computer networks. We’ll spare you
the names and stories (there are plenty of both), but the eventual result was the “mother of all
networks,” which we now call the Internet.

Until 1990, accessing information through the Internet was a rather technical affair. It was so
hard, in fact, that even Ph.D.-holding physicists were often frustrated when trying to swap data.
One such physicist, the now-famous (and knighted) Sir Tim Berners-Lee, cooked up a way to easily
cross-reference text on the Internet through hypertext links.

This wasn’t a new idea, but his simple Hypertext Markup Language (HTML) managed to thrive
while more ambitious hypertext projects floundered. Hypertext originally meant text stored in
electronic form with cross-reference links between pages. It is now a broader term that refers to
just about any object (text, images, files, and so on) that can be linked to other objects. Hypertext
Markup Language is a language for describing how text, graphics, and files containing other
information are organized and linked.

By 1993, only 100 or so computers throughout the world were equipped to serve up HTML
pages. Those interlinked pages were dubbed the World Wide Web (WWW ), and several web
browser programs had been written to enable people to view web pages. Because of the growing
popularity of the Web, a few programmers soon wrote web browsers that could view graphical
images along with text. From that point forward, the continued development of web browser
software and the standardization of HTML has led us to the world we live in today, one in which
more than a billion websites serve billions of text and multimedia files.

NOTE
For more information on the history of the World Wide Web, see the Wikipedia article on this topic:
http://en.wikipedia.org/wiki/History_of_the_Web.

These few paragraphs provide a very brief history of what has been a remarkable period. Today’s
college students have never known a time in which the World Wide Web didn’t exist, and the
idea of always-on information and ubiquitous computing will shape all aspects of our lives moving
forward. Instead of seeing web content creation and management as a set of skills possessed by only
a few technically oriented folks (okay, call them geeks, if you will), by the end of these lessons, you
will see that these are skills that anyone can master, regardless of inherent geekiness.

Creating Web Content

You might have noticed the use of the term web content rather than web pages; that was
intentional. Although we talk of “visiting a web page,” what we really mean is something like
 Understanding Web Content Delivery 3

“looking at all the text and the images at one address on our computer.” The text that we
read and the images that we see are rendered by our web browsers, which are given certain
instructions found in individual files.

Those files contain text that is marked up with, or surrounded by, HTML codes that tell the browser
the structure of the text—as a heading, as a paragraph, as a quotation, and so on. Some HTML
markup tells the browser to display an image or video file rather than plain text, which brings us
back to this point: Different types of content are sent to your web browser, so simply saying web
page doesn’t begin to cover it. Here we use the term web content instead, to cover the full range of
text, image, audio, video, and other media found online.

Other files contain CSS that tells the browser how a page should look—bold text, with a blue
border, red color, and so on. CSS defines how the browser should display the content structure
that is defined in the HTML.

In addition, JavaScript tells the browser how a page should interact with the user—changing
colors when clicked, making a sound when the page loads, and so on. Whereas HTML describes
the structure and CSS the design, JavaScript defines the behavior of the content, or how it
responds to different conditions.

In later lessons, you’ll learn the basics of linking to or creating the various types of multimedia
web content found in websites. You will also learn how to style that content with CSS and how
to make it interactive with JavaScript. All you need to remember at this point is that you are in
control of the content a user sees when visiting your website. Beginning with the file that contains
text to display or codes that tell the server to send a graphic along to the user’s web browser,
you have to plan, design, and implement all the pieces that will eventually make up your web
presence. As you will learn throughout these lessons, it is not a difficult process as long as you
understand all the little steps along the way.

In its most fundamental form, web content begins with a simple text file containing HTML
markup. In these lessons, you’ll learn about and compose standards-compliant HTML5 markup.
You will then learn how to decorate it with CSS and modern style properties and how to affect
the page behavior with unobtrusive JavaScript and modern JavaScript frameworks. One of the
many benefits of writing modern, standards-compliant code is that, in the future, you will not
have to worry about having to go back to your code to fundamentally alter it. Instead, your code
will (likely) always work for as long as web browsers adhere to standards (hopefully a long time),
and your code will work on any device that runs a standards-compliant browser (hopefully most
of them).

Understanding Web Content Delivery

Several processes occur, in many different locations, to eventually produce web content that you
can see. These processes occur very quickly—on the order of milliseconds—and occur behind the
4 LESSON 1: Understanding How the Web Works

scenes. In other words, although we might think all we are doing is opening a web browser, typ-
ing in a web address, and instantaneously seeing the content we requested, technology in the
background is working hard on our behalf. Figure 1.1 shows the basic interaction between a
browser and a server.

FIGURE 1.1
A browser request and a server response.

However, the process involves several steps—and potentially several trips between the browser and
the server—before you see the entire content of the site you requested.

Suppose you want to do a Google search, so you dutifully type www.google.com in the address
bar or select the Google bookmark from your bookmarks list. Almost immediately, your browser
shows you something like what’s shown in Figure 1.2.

FIGURE 1.2
Visiting www.google.com.
 Understanding Web Content Delivery 5

Figure 1.2 shows a website that contains text plus one image (the Google logo). A simple version
of the processes that occurred to retrieve that text and image from a web server and display it on
your screen follows:

1. Your web browser sends a request for the index.html file located at the
http://www.google.com address. The index.html file does not have to be part of the
address that you type in the address bar; you’ll learn more about the index.html file
further along in this lesson.

2. After receiving the request for a specific file, the web server process looks in its directory
contents for the specific file, opens it, and sends the content of that file back to your web
browser.

3. The web browser receives the content of the index.html file, which is text marked up with
HTML codes, and renders the content based on these HTML codes. While rendering the
content, the browser happens upon the HTML code for the Google logo, which you can see
in Figure 1.2. The HTML code looks something like this:
<img alt="Google" src="/images/srpr/logo4w.png"
width="275" height="95">

The <img> tag provides attributes that tell the browser the file source location (src),
alternate text (alt), width (width), and height (height) necessary to display the logo.
(You’ll learn more about attributes throughout later lessons.)

4. The browser looks at the src attribute in the <img> tag to find the source location. In
this case, the image logo4w.png can be found in the images directory at the same
web address (www.google.com) from which the browser retrieved the HTML file.

5. The browser requests the file at the web address http://www.google.com/images/srpr/

logo4w.png.

6. The web server interprets that request, finds the file, and sends the contents of that file to
the web browser that requested it.

7. The web browser displays the image on your monitor.

As you can see in the description of the web content delivery process, web browsers do more than
simply act as picture frames through which you can view content. Browsers assemble the web
content components and arrange those parts according to the HTML commands in the file.

It is possible to view web content locally—that is, on your own hard drive—without the need for
a web server. The process of content retrieval and display is the same as the process listed in
the previous steps, in that a browser looks for and interprets the codes and content of an HTML
file. However, the trip is shorter: The browser looks for files on your own computer’s hard drive
rather than on a remote machine. A web server would be needed to interpret any server-based
6 LESSON 1: Understanding How the Web Works

programming language embedded in the files, but that is beyond the scope of these lessons. In
fact, you could work through all the lessons without having a web server to call your own, but
then nobody but you could view your masterpieces.

Selecting a Web Hosting Provider

Despite my just telling you that you can work through all these lessons without having a web
server, having a web server is the recommended method for continuing. Don’t worry; obtaining
a hosting provider is usually a quick, painless, and relatively inexpensive process. In fact, you can
get your own domain name and a year of web hosting for just slightly more than the cost of the
lessons you are reading now.

If you type web hosting provider in your search engine of choice, you will get millions of hits and
an endless list of sponsored search results (also known as ads). Even if you are looking at a man-
aged list of hosting providers, it can be overwhelming—especially if all you are looking for is a
place to host a simple website for yourself or your company or organization.

You’ll want to narrow your search when looking for a provider and choose one that best meets
your needs. Some selection criteria for a web hosting provider follow:

N Reliability/server “uptime”—If you have an online presence, you want to make sure people
can actually get there consistently.

N Customer service—Look for multiple methods for contacting customer service (phone,
email, chat), as well as online documentation for common issues.

N Server space—Does the hosting package include enough server space to hold all the
multimedia files (images, audio, video) you plan to include in your website (if any)?

N Bandwidth—Does the hosting package include enough bandwidth that all the people
visiting your site and downloading files can do so without your having to pay extra?

N Domain name purchase and management—Does the package include a custom domain
name, or must you purchase and maintain your domain name separately from your hosting
account?

N Price—Do not overpay for hosting. You will see a wide range of prices offered and should
immediately wonder, “What’s the difference?” Often the difference has little to do with the
quality of the service and everything to do with company overhead and what the company
thinks it can get away with charging people. A good rule of thumb is that if you are paying
more than $75 per year for a basic hosting package and domain name, you are probably
paying too much.

Here are three reliable web hosting providers whose basic packages contain plenty of server space
and bandwidth (as well as domain names and extra benefits) at a relatively low cost:
 Selecting a Web Hosting Provider 7

NOTE
The authors have used all these providers (and then some) over the years and have no problem
recommending any of them. Julie predominantly uses DailyRazor as a web hosting provider,
especially for advanced development environments, while Jennifer tends to use Bluehost.

N A Small Orange (www.asmallorange.com)—The Tiny and Small shared hosting packages

are perfect starting places for a new web content publisher.

N DailyRazor (www.dailyrazor.com)—Its website hosting package is full featured and reliable.

N Bluehost (www.bluehost.com)—The Basic shared hosting package is suitable for many per-
sonal and small business websites.

If you don’t go with any of these web hosting providers, you can at least use their basic package
descriptions as a guideline as you shop around.

One feature of a good hosting provider is that it provides a “control panel” for you to manage
aspects of your account. Figure 1.3 shows the control panel for a hosting account at DailyRazor.
Many web hosting providers offer this particular control panel software (called cPanel) or another
control panel that is similar in design—with clearly labeled icons leading to tasks you can perform
to configure and manage your account.

FIGURE 1.3
A sample control panel.
8 LESSON 1: Understanding How the Web Works

You might never need to use your control panel, but having it available to you simplifies the
installation of databases and other software, the viewing of web statistics, and the addition of
email addresses (among many other features). If you can follow instructions, you can manage
your own web server—no special training required.

Testing with Multiple Web Browsers and

Devices
Now that we’ve just discussed the process of web content delivery and the acquisition of a web
server, it might seem a little strange to step back and talk about testing your websites with mul-
tiple web browsers and devices. However, before you go off and learn all about creating websites
with HTML and CSS, do so with this very important statement in mind: Every visitor to your web-
site will potentially use hardware and software configurations that are different from your own,
including their device types (desktop, laptop, tablet, phone), operating systems (Windows, Mac,
Android, iOS), screen resolutions, browser types, browser window sizes, and connection speeds.
Remember that you cannot control any aspect of what your visitors use when they view your site.
So just as you’re setting up your web hosting environment and getting ready to work, think about
downloading several web browsers so that you have a local test suite of tools available to you.
Let us explain why this is important.

Although all web browsers process and handle information in the same general way, some specific
differences among them result in things not always looking the same in different browsers. Even
users of the same version of the same web browser can alter how a page appears by choosing
different display options and/or changing the size of their viewing windows. All the major web
browsers allow users to override the background colors and fonts the web page author specifies
with those of their own choosing. Screen resolution, window size, and optional toolbars can also
change how much of a page someone sees when it first appears on their screens. You can ensure
only that you write standards-compliant HTML and CSS.

NOTE
In Part IV, “Responsive Web Design,” you’ll learn about the concept of responsive web design, in
which the design of a site shifts and changes automatically depending on the user’s behavior and
viewing environment (screen size, device, and so on).

Do not, under any circumstances, spend hours on end designing something that looks perfect
only on your own computer—unless you are willing to be disappointed when you look at it on your
friend’s computer, on the computer in the coffee shop down the street, or on your iPhone.

You should always test your websites with as many of these web browsers as possible:

N Apple Safari (https://www.apple.com/safari/) for Mac

N Google Chrome (https://www.google.com/chrome/) for Mac, Windows, and Linux/UNIX

 Creating a Sample File 9

N Mozilla Firefox (https://www.mozilla.com/firefox/) for Mac, Windows, and Linux/UNIX

N Microsoft Edge (https://www.microsoft.com/edge/) for Windows

N Opera (https://www.opera.com) for Mac, Windows, and Linux/UNIX

Now that you have a development environment set up, or at least some idea of the type you’d like
to set up in the future, let’s move on to creating a test file.

Creating a Sample File

Before you actually create a file, take a look at Listing 1.1. This listing represents a simple piece
of web content—a few lines of HTML that print "Hello World! Welcome to My Web
Server." in large bold letters on two lines centered within the browser window. You’ll learn
more about the HTML and CSS used within this file as you read future lessons.

LISTING 1.1 Our Sample HTML File

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Hello World!</title>
</head>
<body>
<h1 style="text-align: center;">Hello World!<br>
Welcome to My Web Server.</h1>
</body>
</html>

To make use of this content, open a text editor of your choice, such as Notepad (on Windows) or
TextEdit (on a Mac). Do not use WordPad, Microsoft Word, or other full-featured word processing
software because those programs create different sorts of files from the plain-text files we use for
web content.

Most web designers don’t use Notepad or TextEdit for writing web pages. Instead, they use editors
designed specifically for the purpose. These editors give you more features to make it easy to write
and design web pages. The following are some of the most popular editors:

N Coda (https://panic.com/coda/)—A text editor for Mac made specifically for editing
web pages.

N HTML-Kit (https://www.htmlkit.com)—A popular text editor for Windows. The older

versions are free.
10 LESSON 1: Understanding How the Web Works

N Komodo Edit (https://www.activestate.com/komodo-edit)—A free, open-source version of

the popular Komodo IDE. It runs on Windows, Mac, and Linux.

N Notepad++ (https://notepad-plus-plus.org)—A free, open-source editor for Windows.

N Sublime Text (https://sublimetext.com)—A popular editor for all platforms that also has a
healthy ecosystem of free plug-ins.

Once you’ve decided on the editor you want to use, type the content that you see in Listing 1.1
and then save the file, using sample.html as the filename. The .html extension tells the web
server that your file is written in HTML. When the file contents are sent to the web browser that
requests it, the browser will also know that it is HTML and will render it appropriately.

Now that you have a sample HTML file to use—and hopefully somewhere to put it, such as a web
hosting account—let’s get to publishing your web content.

Using F TP to Transfer Files

As you’ve learned so far, you have to put your web content on a web server to make it accessible
to others. This process typically occurs by using File Transfer Protocol (F TP). To use FTP, you need an
FTP client—a program used to transfer files from your computer to a web server.

FTP clients require three pieces of information to connect to your web server; this information will
have been sent to you by your hosting provider after you set up your account:

N The hostname, or address, to which you will connect

N Your account username

N Your account password

When you have this information, you are ready to use an FTP client to transfer content to your
web server.

Selecting an F TP Client
All FTP clients generally use the same type of interface. Figure 1.4 shows an example of FireFTP,
which is an FTP client used with the Firefox web browser. The directory listing of the local machine
(your computer) appears on the left of the screen, and the directory listing of the remote machine
(the web server) appears on the right. Typically, you see right arrow and left arrow buttons, as
shown in Figure 1.4. The right arrow sends selected files from your computer to your web server;
the left arrow sends files from the web server to your computer. Many FTP clients also enable you
to simply select files and then drag and drop them to the target machines.
 Using FTP to Transfer Files 11

FIGURE 1.4
The FireF TP interface.

NOTE
Many web editing programs include a built-in FTP client. If you are planning on using a web editing
program, find out if it does before you download (or purchase) another FTP client.

Many FTP clients are freely available to you, but you can also transfer files via the web-based File
Manager tool that is likely part of your web server’s control panel. However, that method of file
transfer typically introduces more steps into the process and isn’t nearly as streamlined (or simple)
as the process of installing an FTP client on your own machine.

Here are some popular free FTP clients:

N Classic FTP (https://www.nchsoftware.com/classic/) for Mac and Windows

N Cyberduck (https://cyberduck.io) for Mac

N FileZilla (https://filezilla-project.org) for all platforms

N Transmit (https://panic.com/transmit) for Mac

When you have selected an FTP client and installed it on your computer, you are ready to upload
and download files from your web server. In the next section, you’ll see how this process works,
using the sample file from Listing 1.1.
12 LESSON 1: Understanding How the Web Works

Using an F TP Client
The following steps show how to use Transmit to connect to your web server and transfer a file.
However, all FTP clients use similar interfaces, so if you understand the following steps, you should
be able to use any FTP client.

Remember that you first need the hostname, the account username, and the account password.
When you have them, follow these steps:

1. Start the Transmit program and click the FTP tab. You are prompted to fill out information
for the site to which you want to connect, as shown in Figure 1.5.

FIGURE 1.5
Connecting to a new site in Transmit.

2. Fill in each of the items shown in Figure 1.5, as described here:

N The Server is the FTP address of the web server to which you need to send your
web pages. Your hosting provider will have given you this address. It probably is
yourdomain.com, but check the information you received when you signed up for
service.

N Complete the User Name field and the Password field using the information your
hosting provider gave you.
 Using FTP to Transfer Files 13

N Leave the Initial Path field blank for now. You learn more about this later in the
lesson.

N Leave the Port field set to 21 and choose FTP unless your hosting provider specified to
use SSL or TLS/SSL.

N When you’re finished with the settings, click Connect to go to the FTP server. You can
click the plus icon if you want to add this server to your favorites.

You now see a countdown timer in the lower right, indicating that Transmit is attempting to
connect to the web server. Upon successful connection, you see an interface like the one in
Figure 1.6, showing the contents of the local directory on the left and the contents of your
web server on the right.

FIGURE 1.6
A successful connection to a remote web server via Transmit.

You are now almost ready to transfer files to your web server. All that remains is to change
directories to what is called the document root of your web server. The document root of
your web server is the directory that is designated as the top-level directory for your web
content—the starting point of the directory structure, which you’ll learn more about later
in this lesson. Often, this directory is named public_html, www (because www has been
created as an alias for public_html), or htdocs. You do not have to create this directory;
your hosting provider will have created it for you.
14 LESSON 1: Understanding How the Web Works

3. Double-click the document root directory name to open it. The display shown on the right
of the FTP client interface changes to show the contents of this directory. (It will probably
be empty at this point, unless your web hosting provider has put placeholder files in that
directory on your behalf.)

4. The goal is to transfer the sample.html file you created earlier from your computer to
the web server, so find the file in the directory listing on the left of the FTP client interface
(navigate if you have to).

5. Click the file and drag it to the right side of the window to send the file to the web server.
(Alternatively, you can double-click the file to transfer it.) When the file transfer completes,
the right side of the client interface refreshes to show you that the file has made it to its
destination.

6. Go to the File menu and choose Disconnect to close the connection and then exit the
Transmit program.

These steps are conceptually similar to the steps you take anytime you want to send files to your
web server via FTP. You can also use your FTP client to create subdirectories on the remote web
server. To create a subdirectory using Transmit, right-click in the directory you want the folder to
be in and choose New Folder. Different FTP clients have different interface options for achieving
the same goal.

Understanding Where to Place Files on the

Web Server
An important aspect of maintaining web content is determining how you will organize that
content—not only for the user to find but also for you to maintain on your server. Putting files in
directories helps you manage those files.

How you name and organize directories on your web server and whether you develop rules for
file maintenance are completely up to you. Maintaining a well-organized server makes your
management of its content more efficient in the long run.

Basic File Management

As you browse the Web, you might have noticed that URLs change as you navigate through web-
sites. For instance, if you’re looking at a company’s website and you click on graphical navigation
leading to the company’s products or services, the URL probably changes from

http://www.companyname.com/
to

http://www.companyname.com/products/
 Understanding Where to Place Files on the Web Server 15

or

http://www.companyname.com/services/

In the preceding section, we used the term document root without really explaining what that is
all about. The document root of a web server is essentially the trailing slash in the full URL. For
instance, if your domain is yourdomain.com and your URL is http://www.yourdomain.com/, the
document root is the directory represented by the trailing slash (/). The document root is the start-
ing point of the directory structure you create on your web server; it is the place where the web
server begins looking for files requested by the web browser.

If you put the sample.html file in your document root as previously directed, you will be able to
access it via a web browser at the following URL:

http://www.yourdomain.com/sample.html

If you entered this URL into your web browser, you would see the rendered sample.html file, as
shown in Figure 1.7.

FIGURE 1.7
The sample.html file, accessed via a web browser.

However, if you created a new directory within the document root and put the sample.html file
in that directory, the file would be accessed at this URL:

http://www.yourdomain.com/newdirectory/sample.html

If you put the sample.html file in the directory you originally saw upon connecting to your
server—that is, if you did not change directories and place the file in the document root—the
sample.html file would not be accessible from your web server at any URL. The file would still
16 LESSON 1: Understanding How the Web Works

be on the machine that you know as your web server, but because the file is not in the document
root—where the server software knows to start looking for files—it will never be accessible to
anyone via a web browser.

The bottom line? Always navigate to the document root of your web server before you start
transferring files. And if your FTP client allows, change the default starting directory to your
document root, just to be extra careful.

This is especially true with graphics and other multimedia files. A common directory on web servers
is called images, where, as you can imagine, all the image assets are placed for retrieval. Other
popular directories include css for style sheet files (if you are using more than one) and js for
external JavaScript files. Alternatively, if you know that you will have an area on your website where
visitors can download many types of files, you might simply call that directory downloads.

Whether it’s a ZIP file containing your art portfolio or an Excel spreadsheet with sales numbers,
it’s often useful to publish files on the Internet that aren’t simply web pages. To make available
on the Web a file that isn’t an HTML file, just upload the file to your website as if it were an HTML
file, following the instructions earlier in this lesson for uploading. After the file is uploaded to the
web server, you can create a link to it (as you’ll learn in Lesson 7, “Using External and Internal
Links”). In other words, your web server can serve much more than HTML.

Here’s a sample of the HTML code that you will learn more about later in these lessons. The
following code would be used for a file named artfolio.zip, located in the downloads
directory of your website, and with link text that reads Download my art portfolio!:
<a href="/downloads/artfolio.zip">Download my art portfolio!</a>

Using an Index Page

When you think of an index, you probably think of the section in the back of a book that tells
where to look for various keywords and topics. The index file in a web server directory can serve a
similar purpose—if you design it that way. In fact, that’s where the name originates.

The index.html file (or just index file, as it’s usually referred to) is the name you give to the
page you want people to see as the default file when they navigate to a specific directory in your
website.

Another function of the index page is that users who visit a directory on your site that has an
index page but who do not specify that page will still land on the main page for that section of
your site—or for the site itself.

For instance, you can type either of the following URLs and land on Apple’s iPhone informational
page:

http://www.apple.com/iphone/
http://www.apple.com/iphone/index.html
 Distributing Content Without a Web Server 17

If there were no index.html page in the iphone directory, the results would depend on the
configuration of the web server. If the server is configured to disallow directory browsing, the
user would see a “Directory Listing Denied” message when attempting to access the URL without
a specified page name. However, if the server is configured to allow directory browsing, the user
would see a list of the files in that directory.

Your hosting provider will already have determined these server configuration options. If your
hosting provider enables you to modify server settings via a control panel, you can change these
settings so that your server responds to requests based on your own requirements.

Not only is the index file used in subdirectories, but it’s used in the top-level directory (or docu-
ment root) of your website as well. The first page of your website—or home page or main page,
or however you like to refer to the web content you want users to see when they first visit your
domain—should be named index.html and placed in the document root of your web server.
This ensures that when users type http://www.yourdomain.com/ into their web browsers, the
server responds with the content you intended them to see (instead of “Directory Listing Denied”
or some other unintended consequence).

Distributing Content Without a Web Server

Publishing HTML and multimedia files online is obviously the primary reason to learn HTML and
create web content. However, there are also situations in which other forms of publishing may
be useful? For example, you might want to distribute CD-ROMs, DVD-ROMs, or USB drives at a
trade show with marketing materials designed as web content—that is, hyperlinked text viewable
through a web browser but without a web server involved. You might also want to include HTML-
based instructional manuals on removable media for students at a training seminar. These are
just two examples of how HTML pages can be used in publishing scenarios that don’t involve the
Internet.

This process is called creating local sites; even though no web server is involved, these bundles
of hypertext content are still called sites. The local term comes into play because your files are
accessed locally and not remotely (via a web server).

Publishing Content Locally

Let’s assume that you need to create a local site that you want to distribute on a USB drive. Even
the cheapest USB drives hold so much data these days—and basic hypertext files are quite small—
that you can distribute an entire site and a fully functioning web browser all on one little drive.
18 LESSON 1: Understanding How the Web Works

NOTE
Distributing a web browser isn’t required when you are creating and distributing a local site, although
it’s a nice touch. You can reasonably assume that users have their own web browsers and will open
the index.html file in a directory to start browsing the hyperlinked content. However, if you want
to distribute a web browser on the USB drive, go to https://portableapps.com/ and look for Portable
Firefox or Portable Chrome.

You can think of the directory structure of your USB drive just as you would the directory structure
of your web server. The top level of the USB drive directory structure can be your document root.
Or if you are distributing a web browser along with the content, you might have two directories—
for example, one named browser and one named content. In that case, the content directo-
ry would be your document root. Within the document root, you could have additional subfolders
in which you place content and other multimedia assets.

It’s as important to maintain good organization with a local site as it is with a remote website so
that you avoid broken links in your HTML files. You’ll learn more about the specifics of linking
files in Lesson 7.

Publishing Content on a Blog

You might have a blog hosted by a third party, such as WordPress, Tumblr, or Blogger, and thus
have already published content without having a dedicated web server or even knowing any
HTML. These services offer visual editors in addition to source editors, meaning that you can type
your words and add presentational formatting such as bold, italics, or font colors without know-
ing the HTML for these actions. The content becomes actual HTML when you click the Publish but-
ton in these editors.

However, with the knowledge you will acquire from these lessons, your blogging will be enhanced
because you will be able to use the source editor for your blog post content and blog templates,
and this will afford you more control over the look and feel of that content. These actions occur
differently from the process you learned for creating an HTML file and uploading it via FTP to
your own dedicated web server, but we would be remiss if we did not note that blogging is, in fact,
a form of web publishing.

Tips for Testing Web Content

Whenever you transfer files to your web server or place them on removable media for local brows-
ing, you should test every page thoroughly. The following list helps you ensure that your web con-
tent behaves the way you expect. Note that some of the terms might be unfamiliar to you at this
point, but come back to this list as you progress through these lessons and create larger projects:

N Before you transfer your files, test them locally on your machine to ensure that the links
work and the content reflects the visual design you intended. After you transfer the pages to
a web server or removable device, test them all again.
 Summary 19

N Perform these tests with as many browsers and devices as you can—Chrome, Firefox,
Microsoft Edge, Opera, and Safari is a good list—and on both Mac and Windows platforms,
as well as mobile devices like phones and tablets. If possible, check at low resolution
(800 × 600) and high resolution (1920 × 1080).

N Turn off auto image loading in your web browser before you start testing so that you can see
what each page looks like without the graphics. Check your alt text and then turn image
loading back on to load the graphics and carefully review the page again.

N Use your browser’s font size settings to look at each page in various font sizes to ensure that
your layout doesn’t fall to pieces if users override your font specifications with their own.

N Wait for each page to completely finish loading and then scroll all the way down to make
sure all images appear where they should.

N Time how long it takes each page to load. Use a tool like Google Page Speed
(https://developers.google.com/speed/) to make sure it isn’t too slow. Slow pages annoy
users and can get your site penalized by search engines.

If your pages pass all those tests, you can rest easy: Your site is ready for public viewing.

Summary
This lesson introduced you to the concept of using HTML to mark up text files to produce web con-
tent. You learned that HTML generates the structure, while CSS creates the look, and JavaScript
controls the behavior of the pages. You also learned that there is more to web content than just
the “page”; web content also includes image, audio, and video files. All this content lives on a
web server—a remote machine often far from your own computer. On your computer or other
device, you use a web browser to request, retrieve, and eventually display web content onscreen.

You learned the criteria to consider when determining whether a web hosting provider fits your
needs. After you have selected a web hosting provider, you can begin to transfer files to your web
server by using an FTP client, which you also learned how to do. You also learned a bit about web
server directory structures and file management, as well as the very important purpose of the
index.html file in a given web server directory. In addition, you learned that you can distrib-
ute web content on removable media, and you learned how to go about structuring the files and
directories to achieve the goal of viewing content without using a remote web server.

Finally, you learned the importance of testing your work in multiple browsers after you’ve placed
it on a web server. Writing valid, standards-compliant HTML and CSS helps ensure that your site
looks reasonably similar for all visitors, but you still shouldn’t design without receiving input from
potential users outside your development team; it is especially important to get input from others
when you are a design team of one!
Exploring the Variety of Random
Documents with Different Content
“Get up, Rowen!” commanded the senior captain,
sternly. “We are not on duty, or I’d put up with this trick
just long enough to order you under arrest! I don’t mind
telling you frankly that you won’t last long enough in
the corps to ever graduate if this story gets out!”

“I don’t care a hang about the corps!” snapped Rowen.

“How about Mercer here? Don’t forget that he struck
me.”

“I won’t forget him for doing it, instead I will remember

him gratefully for doing it. Perhaps it was too bad that
we arrived just as we did.”

Rowen looked up at Jordan shamefaced yet still

belligerent. “I’ll get even with you boys! Just wait and
see. And you can’t prove I harmed your old horse,
either, Mercer.” With these remarks, Rowen turned on
his heel and strode away, his chin high in the air.

“Gee! How do you like that?” Terry exclaimed. “He sure

has some nerve carrying a grudge after what’s
happened just now!”

“I thought I had met up with a lot of the mean, tricky

people!” exclaimed Jordan. “But that beats me!”

“What about the horse, Jim?” Don asked.

“I’ll have to duck over to the canteen and get out some 57
of the horse medicine and then run him around until he
gets over the effects of the green apples,” replied the
cavalry captain. “No water for you, Squall old boy, until
you have lost the effects of your unexpected meal.”

While Jim was looking after the horse the others walked
over to the tents, talking the matter over. All of them
were deeply upset by the total unjustness of it all.

“Just because Jim slipped on the springboard and made

a dive like Rowen’s!” said Vench. “I can’t understand
some fellows.”

“Well, I’ll tell you,” replied Don, slowly. “For a long time
Rowen has had a grouch against all of us; for no
particular reason at all. He’s the kind of boy who just
seems to have trouble wherever he goes.”

It was not until they were preparing for bed that

evening that the three boys had an opportunity to
further discuss the afternoon’s incident.

“Is your horse OK?” Terry asked, kicking off his shoes.

“Yes,” Jim answered. “As long as he didn’t get a big

drink of water he—Oh, golly!”

“What’s the matter?” the other two asked, aroused at

the dismay in Jim’s tone.

“I’ve lost my belt,” Jim returned. “I had it on when I 58

went to the corral, and I guess I must have dropped it
there. I’ll have to go back and find it.”

“You’ve got to have it for inspection tomorrow,” said

Don. “Wait a shake, and I’ll go back with you.”

“No, you won’t,” vetoed Jim. “I can sneak out myself

and make the trip in record time. No use in running the
risk of having you reported with me. Douglas is
patrolling post Number Five and I can slip through him.”

“Yes, but the guard will have been changed by the time
you get back,” Terry reminded him. “Then what are you
going to do?”

“I’ll just have to take my chances and slip through while

he is at the far end of the patrol,” replied Jim, putting
his shirt on again. “I should have seen to it that I didn’t
drop my belt, that’s all. You fellows go to sleep, and I’ll
soon be back.”

“OK,” agreed Don. “Good luck, kid!”

“Thanks,” murmured Jim, looking carefully from the flap

of the tent. “See you later.”

With that he was gone, slipping back of the tents and

keeping well in the shadows. At the edge of the camp
he waited until he saw Douglas standing with his back
toward him. Then Jim slipped by him and plunged into
the woods.

It didn’t take him long to reach the spot where the 59

horses were corralled and after a little hunting he found
his belt. It had dropped close to the foot of a clump of
bushes and was out of the direct rays of the moon.
Buckling it around his waist Jim began his return
journey to the camp.

But now, as he approached the place, he became very

cautious. He must trust to luck to slip past the man at
the post and it would be no easy task.

He decided that perhaps by flitting along past the

animals he could more easily gain the corner of the
nearest company street and by lying on his stomach in
the shadow of a tent he could escape the eyes of the
cadet until it was safe to move on. With this thought in
mind Jim moved to the horses and then paused.
There was a tall white shape close to the animals, and
they had sensed the presence of the thing. It looked to
be a very tall man shrouded in white, and he was at the
moment near the foremost horses. Forgetting his
unusual position Jim rushed forward to see what was
going on.

The shape before him heard his quick step, turned

toward him, and then moved with an agility that
astonished the cadet captain. Slapping the flanks of the
horses right and left the man in white started them
moving. Jim jumped forward.

“Hey, you!” he cried. “What are you doing to those

horses?”

The figure in white took to the trees swiftly and Jim was 60
unable to stop him. For the horses, frightened by
something, perhaps the white shape itself, moved with
increasing speed out of the corral. Before Jim could call
to them it had developed into a wild stampede, and the
horses were headed like a cyclone for the nearest tents.

61
 6
The Trouble Bug Bites Deep

After that, things happened rapidly. Just as the horses

began their rapid flight the sentry on the post rushed up
to Jim. As luck would have it, it was none other than
Rowen.

Before he could say anything the stampeding horses hit

the first tents. They had spread out fan-wise on their
wild run, and those on the wings were unable to push
into the company streets. Blindly they crashed into the
tents, taking two of them down in a flash and tipping a
third over. The thunder of hoofs, the ripping of tent
cords and the shouts of bewildered cadets buried under
the entangling canvas turned the peaceful camp into a
raging scene of chaos.

Cadets at the further end of the camp ran out, only to 62

meet the galloping horses face to face. They were too
bewildered to comprehend at once just what was going
on, but they scurried back under cover. There was a
vast uproar on all sides. A cloud of dust rose over the
camp, partially obscuring the moon. To add to the
confusion the sentries on other posts excitedly fired
their guns.

Jim stood confused, wiping the dust from his eyes

impatiently. Close beside him stood Rowen, coughing
violently from the dust that the horses had raised. When
he could speak he turned to Jim sternly.

“What are you doing here, Mercer?” he asked.

“I went back to the corral for my belt and then I saw a

white shape near the horses,” related Jim. “Just as I
challenged him he slapped them on the flank, starting
the stampede.”

Rowen looked around the near-by woods. There was

nothing to be seen. Deliberately he faced Jim.

“Absurd, Mercer,” he declared, his intention plain.

“Do you mean you think I’m lying?” Jim demanded, his
cheeks flushing.

“I don’t have to mean anything. You tell me a story like 63

that but I don’t see the faintest evidence of it. What do
you expect of me?”

“Look here, Rowen,” said Jim. “How far away were you
when these horses started?”

“A few yards. I was just patrolling this way when I

heard them go,” answered the sentry.

“Then you heard me say, ‘What are you doing to those

horses?’ didn’t you?”

“No, Mercer, I did not,” returned Rowen, steadily.

“You did so!” retorted Jim, flatly.

“I heard nothing,” repeated Rowen. “When I got here I

found the horses in flight and I saw you standing back
of them. Under the circumstances I must tell that to the
proper officers and the colonel.”

“Certainly you must. But I will also tell them about the
white shape.”

“I hope they will be a little more inclined to believe you

than I am,” sneered Rowen.

Jim took a step forward. “Rowen, if you intimate that I

lie, I’ll surely thrash you worse than I did this
afternoon!”

“Mercer, in addition to reporting you for stampeding the

horses, I shall also report you for threatening the sentry
while he was performing his duty,” followed up the
vengeful cadet.

Hot words leaped to Jim’s lips, but he stopped them. 64

More words would lead to trouble, and he was sure that
he had enough of that on his hands right now to last
him for some time. Beside that, the camp was a bedlam
and the horses were scattered all over the meadow
below. Outwardly cool he faced the sentry.

“I am going to help round up the horses,” he told

Rowen. “I’ll see you later.”

With this Jim turned and ran across the camp, heading
down the slope to the field below. The colonel was now
on the job, with some realization of what had occurred.
A detail of cadets was busy at the fallen tents, lifting the
canvas and helping the stunned soldiers out into the
open. One boy had had his shoulder sprained but that
was all the physical damage there was. Most of the
horses had halted on the plain below and were quietly
cropping the grass.
All of the cavalrymen turned instinctively toward the
horses and were now engaged in the difficult job of
trying to secure them. The infantrymen and artillerymen
stood around talking things over, understanding that
there had been a stampede but not fully realizing why
the horses had run away.

“Guess something just scared them and they bolted,”

Cadet Douglas said, speaking to a group.

“I’d like to know where Jim is?” murmured Terry. 65

“Too bad it had to happen while he was out of the

camp,” returned Don, in a low voice. “If the colonel ever
learns that he was absent at the time he’ll have a job
explaining where he was. If he doesn’t turn up and go
hunting the horses he’ll have to answer for that.”

Drill Master Rhodes bore down on the assembled

cadets. “A few fires to be lighted, please,” he directed
briskly. At this word the cadets scattered and fell to
work gathering fuel for fires. A short time later a half-
dozen fires lighted up the sky and threw the camp into
bright relief.

“There’s Jim!” cried Don, pulling at Terry’s sleeve. “He

has been right on the job.”

Jim was riding Squall bareback and driving other horses

before him. Lieutenant Thompson brought in others,
and the main band of the animals had been captured.
But there were now at least five horses that had run far
off and some of the cadets saddled and went after
them.

This time they found real work cut out for them. The
horses that had run the farthest away were the unruly
ones. They objected strongly to being captured and led
the cadets a merry chase. After an hour of hard work all
but one horse had been captured.

“Mr. Mercer,” called the colonel. “Take Mr. Thompson and 66

get that one stray horse.”

Jim and Thompson mounted and dashed across the

field toward Twinkletoes, the stubborn cavalry horse.
The animal, a beautiful chestnut stallion, tossed his
head disdainfully and trotted off in a sweeping circle,
seeming to enjoy the chase keenly. He was moving
away from the camp and Jim saw that unless he could
get on the far side of the horse he would lose him.
Accordingly, he abandoned the direct chase, heading
Squall out across the moonlit field until he had passed
the cavorting horse. Then Jim swung sharply in toward
the camp, the animal now in front of him. Thompson
stopped and allowed Twinkletoes to retreat past him,
and then the two cavalry officers began a chase that
entertained and delighted the camp.

Twinkletoes tried in vain to dodge out of the circle which 67

the two young soldiers had drawn around him, and it
took all of their skill to keep him from attaining his
objective. Twinkletoes raced and plunged, first toward
one side and then toward the other, making short, mad
little dashes, but as fast as he dashed the officers
dashed after him. In this fashion, working ever in
toward the slope, the two cadets drove the frisky animal
in far enough to make escape possible only by dashing
up the hill. This Twinkletoes refused to do, and Jim,
staking all on a last desperate drive, forced Squall up
beside the fugitive horse and secured him. As he led
him into camp a cheer went up.
“Very good work, men,” nodded the colonel.

The horses were now all in and the work of securing

them firmly went on. No recall was sounded and the
cadets wandered aimlessly around the camp. When Jim
and the other cavalrymen returned to the central fire
they found the colonel standing there, surrounded by
the instructors and most of the cadets. Jim was walking
toward the colonel to make his report when Rowen
stepped from the group, triumph written on his face.

“Mr. Mercer!” he called, loudly. All of the assembled

soldiers, including the colonel, turned to look at him.

“What is it, Mr. Rowen?” Jim asked, quietly.

“You will kindly consider yourself under arrest for

starting the stampede!” continued Rowen, still in the
loud voice.

His words produced a decided sensation. The colonel

looked particularly astonished. Terry groaned and
nudged Don.

“What do you know about that! Jim started the

stampede!”

“Mr. Mercer, did you start the stampede?” the colonel 68

asked.

“No, sir,” replied Jim, promptly.

The colonel turned to Rowen. “What is your exact

charge against Captain Mercer, Mr. Rowen?” he asked.

“I charge Captain Mercer with being absent from camp

without official leave, of stampeding the horses, and of
threatening a sentry in the performance of his duty!”
cried Rowen.

“Those are very serious charges, Captain Mercer,” the

colonel told Jim. “What have you to say to them?”

“I admit being out of camp without leave, but refuse to

acknowledge stampeding the horses or having been in
any way responsible for their breaking loose. I did
threaten to thrash Mr. Rowen because he insisted that I
was deliberately lying when I informed him that a figure
clothed entirely in white slapped the horses and started
them on their stampede,” reported Jim. There was a stir
of eager interest from the cadets.

“A figure in white?” said the colonel, sharply. “What was

that, Captain Mercer?”

“I do not know, sir,” replied Jim. “I challenged him

sharply and at the sound of my voice he slapped the
horses on the flanks, starting them on their break.”

“Captain Mercer says he called out to the figure in 69

white,” said the colonel, turning to Rowen. “Did you
hear him call, Mr. Rowen?”

“I did not, sir,” answered the sentry. “Colonel Morrell,

Captain Mercer did not call out!”

“Limit your statement to the fact that you did not hear
him, Mr. Rowen,” advised the colonel. Rowen flushed
and trembled with rage.

“And you really saw a white shape at the horses,

Captain Mercer? This talk of ghosts has not influenced
you any, has it?”
“Not a bit, sir,” affirmed Jim, gravely. “I distinctly heard
the sharp sounds of his slaps and as I started for him he
glided into the woods close at hand.”

“Did you see anything, Mr. Rowen?” the colonel asked.

“The only thing I saw was Mr. Mercer standing there,

watching the horses tear across the camp, sir,”
answered Rowen.

The colonel thought for a moment. “Very well, men,” he 70

returned. “I will consider the case carefully. Captain
Mercer, you will consider yourself at least temporarily
under arrest, on the two charges preferred by Mr.
Rowen, namely, for being absent without official leave
and for threatening the sentry, although I realize that
you threatened Mr. Rowen not for ordering your arrest,
but for doubting your word. All these things don’t go
well with an officer’s commission, Captain Mercer, and I
shall be compelled to look into the entire affair.”

“Very good, sir,” responded Jim, saluting.

The cadets were sent back to their cots and soon quiet
settled over the entire camp. In their tent Jim, Terry and
Don discussed the situation.

“Just your luck to run right into Rowen,” commented

Terry. “I’d like to bet my last nickel that he heard you
call out, too.”

“I think that he did, but we can’t prove it,” sighed Jim.

“Well, I’m not going to worry about it.”

“You won’t need to,” reassured Don. “The colonel will

see to it that you have the proper justice. Your word is
as good as Rowen’s and he will find out the truth some
way.”

71
 7
The Old Man of the Ridge

Jim’s punishment did not last long. A circumstance came

up that made the colonel suspend judgment for some
time.

One morning, soon after the incidents related, a man in

a battered old car drove up to the camp. He was a
minister who preached in a regular circuit of county
churches and he was known to the colonel. The
headmaster received him with great pleasure and the
two men talked of many things as they sat in the
colonel’s tent.

“By the way,” said the Reverend Mr. Powers, after a

time. “Did someone go past your camp very hurriedly a
few nights ago?”

The colonel showed signs of unusual interest. “Why, 72

yes, a few nights ago a wagon with two men in it tore
right through the camp,” he said. “We couldn’t stop it.”

“There was a man and a boy in it,” corrected the pastor.

“Well, then you don’t know what sent them flying past
you like that?”

“No,” confessed the colonel. “If you had seen the way
they flew by, you wouldn’t wonder that I didn’t learn
anything about them. But tell me what you know.”
“First, I would like to ask you a question. Have you
heard anything about a ghost of the Ridge, since you
have been here?”

The colonel snorted. “I haven’t heard much about

anything else,” he retorted.

“The ghost scared these two off. The father is a farmer

who came down here from Pennsylvania. As it turns out,
he is very superstitious, and the very first night on his
own farm, while driving into the yard with his only son,
he saw the white shape skulking along near his barn.
He was just about crazed with fear and fled to the
valley, passing your camp as he did.”

“Of course this ghost is simply some would-be

humorous person who is having some fun,” was the
colonel’s opinion. But Mr. Powers had another opinion.

“I doubt that very much, Morrell. The thing has been 73

going on for years and some very good citizens have
given up their homes just on account of it. The joke
would have worn out years ago. No, I’m inclined to
think that there is something deeper in it than mere
fun.”

“Some determined effort should be made to drive the

ghost from the Ridge,” grumbled the headmaster.

“Who is to start it?” shrugged the parson. “No one

seems to want to and the sheriff of the county simply
laughs at the whole business.”

As a result of this talk the colonel called Rowen and Jim

into his tent after drill that very afternoon. They faced
him expectantly.
“Gentlemen,” said the colonel. Then he paused, and a 74
frown swept over his face. “I call you gentlemen, and
will continue to do so until one of you is proved guilty of
deliberate lying. Your conflicting stories show that one
of your statements, coming from one or the other of
you, is a deliberate falsehood. But to get back to the
business in hand: I have just heard some more tales
concerning this ghost of the Ridge, and in view of it I
have decided to drop the suspension against Captain
Mercer. The word of one of you is as good to me as the
word of the other, and until I prove that one of you is
trying to conceal anything I must consider the case
dismissed until further notice. Mr. Rowen, you say you
did not hear Mr. Mercer call out nor did you see the
white shape. But on the other hand, Captain Mercer did
tell you immediately that he had seen a white shape,
and that the ghost—or whatever it was—had started the
stampede. Inasmuch as you did not see Captain Mercer
start the stampede, and you doubted his word, I shall
be able to hold him only on the count of being absent
without official leave. For that Captain Mercer will
receive demerits. It that all clear, and satisfactory?”

“Very much so, to me, sir,” approved Jim. Rowen

muttered.

“What was that, Mr. Rowen?” the colonel asked, sharply.

Rowen lost his temper in his sudden fright. “I simply

said that of course a Mercer would get the breaks, sir!”
he sneered. Then, realizing the slip he had made, his
face turned white.

“So!” murmured the colonel. His eyes flashed but his

voice was calm. “I asked you if my decision was
satisfactory, Mr. Rowen.”
“Yes, sir,” murmured the disappointed cadet.

“Very well. You are both dismissed,” nodded the colonel.

Left alone, his brain worked busily. He saw a good many
things in a clear light now.

“Petty jealousy, and he is trying to revenge himself on 75

Mercer,” thought the little colonel. “I guess I can pretty
well tell which one of those young men is lying!”

On the following morning, when the Orders of the Day

were read, Jim and his friends were delighted to hear in
the crisp voice of the battalion orderly that the charges
brought against Captain Mercer by Sentry Rowen were
to be temporarily dismissed, with the exception of the
charge of leaving camp unofficially, for which Captain
Mercer was to receive twenty-five demerits.

A hundred demerits were sufficient to send a man home

from the encampment and two hundred at school would
dismiss any cadet permanently.

That afternoon there was a partial holiday and the

cadets set out to enjoy themselves. It was a mild and
warm afternoon, with a fleecy sky overhead, through
which the sun peeped at intervals. Don and Jim sat in
the tent, trying to decide just what to do.

“What do you say to a hike over the Ridge, a sort of

exploring trip?” was Don’s suggestion.

“Sounds good,” approved Jim. “Who can we get to go

along with us?”

“We’ll scout around and find out,” announced Don,

getting up from his cot.
After looking up their most intimate friends they found 76
that only Terry and Raoul Vench cared to go tramping.

“We’ll be glad to go along,” yawned the redhead. He

and Raoul had been idly watching the swimmers when
Jim and Don found them. “I’m weary o’ doing nothing!”

“Too lazy to do anything but watch the other fellows

swim around and enjoy themselves, is that it?” inquired
Jim.

“Yes, but you see, I enjoy it that way,” returned Terry,

seriously. “I have a vivid imagination and in time, by
concentrating on the swimmers, I too feel the cool of
the water and the exhilaration of the exercise. Just
requires a little imaginative concentration, Jimmie my
friend.”

“You’re a wonderful fellow,” glowed Jim. “Just you

imagine me a couple of ice-cream sodas, will you?”

“Pay me first!” grinned Terry. “Money back if I fail to

come across.”

The four cadets set out at a brisk pace up the slope of

the Ridge. It was heavily wooded and every now and
then they came across a clearing in which a farmhouse
could be seen. They were not long in reaching the very
top of the series of hills called Rustling Ridge and they
paused to look down into the opposite valley from the
one above which their camp was pitched.

“Nice picture,” observed Terry. “Why do they call this 77

place Rustling Ridge?”

“In the fall, when the wind blows hard, the leaves
rustle, and from that fact comes the name,” Don
volunteered.

“How’d you learn that?” Vench wanted to know.

“I asked a farm boy who was watching us play baseball

the other day,” replied the infantry lieutenant.

“Look at that old house up there,” called out Jim,

pointing to a huge square structure that showed a
battered roof with leaning chimneys over the tops of the
trees. “Looks like a fitting habitation for the ghost of this
place.”

“Just about,” agreed Vench. “But that little cabin down

below looks better to me, because I bet we can get a
good drink at the place. Let’s go down.”

The others agreed and they tramped down the side of

the slope toward a plain little cabin, constructed of
unpainted boards, with a roofed front porch on it. At
some distance below them they could see the largest
town in the county.

“What town is that?” asked Jim.

“I think that must be Rideway,” replied Don.

Reaching the cabin they rounded the corner, to halt 78

suddenly as they saw a figure there. It was a little old
man in a wheelchair, a man with sparse gray hair, sallow
cheeks, and a few good teeth remaining. His eyes were
keen and penetrating and he was puffing in evident
enjoyment on a huge pipe.

He greeted them readily enough. “Hi, there, boys, step

right up,” he shrilled, in a rasping voice. “Soldiers, eh?
You look pretty young. Where you stationed?”
“We aren’t soldiers of the United States Army,” Don told
him. “We are cadets from Woodcrest Military Institute,
and we’re camping over on the other side of the Ridge.
We were passing by and thought we’d drop in for a
drink of water.”

“Thought you were too young-looking for regular

soldiers,” nodded the old man, taking in every detail of
their uniforms. “Want a drink of good water, eh?”

“Yes,” Don replied. “But we wouldn’t want to trouble you

any.”

“Oh, hush up!” was the good-natured reply. “I know

that you’re thinking I’m out of commission and I can’t
help you. Just sit down on the porch here and see how
old Peter Vancouver does it.”

With that the old man gave the right wheel of his chair 79
a whirl and to the astonishment of the boys shot himself
around in a half circle and in through the open door.
From there they saw him roll across the room and
vanish through the door of another room.

“My gosh!” breathed Terry. “Can’t he work that buggy of

his!”

“Probably years of practice has made him proficient,”

said Don, softly.

With the same bewildering speed and dexterity the man

returned in his chair, holding a pitcher and a tin cup in
his hand. Even while in motion he poured the water out.

He seemed to enjoy watching the boys drink deeply,

and when they had finished he wheeled back to the
kitchen and returned at lightning speed. Noting the
interested looks of the boys he chuckled.

“Guess the old man knows how to walk well’s if he had

feet, eh?”

“You walk better than a whole lot of people who have

feet,” gravely affirmed Vench.

“If you was spending your life in one of these all-fired

things you’d know how to ride one, too,” he told them.
“Don’t you fellows go. I don’t see a heap of folks and I
like to chin once in a while.”

“We’ll be glad to stay and talk with you, Mr. Vancouver,”

smiled Jim, leaning back against a post. “We are just
out exploring and we’d just as soon sit here and talk as
wander around.”

“Glad to hear you say it,” approved the old man. “Let’s 80
hear something about that there camp of yourn.”

The boys told him several things about the camp, all of
which seemed to interest him deeply. In the course of
the talk the incident of the ghost and the stampede was
mentioned. The old man bent eagerly forward.

“Did you get a visit from the ghost?” he cried.

“Yes, he stampeded our horses,” Jim told him. “What do

you know about him, Mr. Vancouver?”

The man chuckled. “All a poor old invalid would know

about such like he hears,” the man replied. “I ain’t never
seen the thing, but I heard plenty. Raises old Ned in the
hills here, and has been at it for years.”
“If we get a chance we are going to nail him good,” Don
promised.

“Good idea,” Mr. Vancouver approved. “Blasted business

has been driving people off the Ridge for years.
Wouldn’t be surprised if the fellow drove you cadets
home.”

“Drive us out of camp!” ejaculated Vench, stirring.

“He might!” the old man said.

“He’ll have to go some to do that,” snorted Terry. “He’ll

be lucky if we don’t steal his best nightgown right off
him!”

“Getting late, fellows,” warned Don. “We had better be 81

getting back. Thanks a lot for your good drink of water,
Mr. Vancouver, and we’ve enjoyed being with you.”

“Enjoyed being able to talk to you boys,” he returned

heartily. “Come up again some time.”

“We’ll be glad to,” promised the boys, as they started

off. Mr. Vancouver called a final word after them.

“You had better keep your eyes open for that cussed
ghost! No tellin’ when he’ll pop up and scare the life out
of you!”

The cadets laughed good-naturedly and walked at a

rapid pace up the side of the Ridge. The sun was going
down in the west and they would have to keep up a
good stride in order to arrive in time for supper.

“Interesting old fellow, that Vancouver,” Jim observed.

“He surely is,” Vench agreed. “We’ll have to chat with
him some other time.”

“Too bad he can’t move around—that is, walk around,”

Don said. “As a matter of fact, he does move around
mighty fast, but I mean it is a shame he can’t go
walking around, same as you and me.”

“Like everybody else around here, he believes that dog- 82

goned ghost is the last word in efficiency,” growled
Terry. “I guess the real trouble is that nobody dares to
put on a real hunt for the ghost. Fellows, we’ll have to
make it our business to run down that ghost!”

“If it pops up again soon, we will,” Don promised.

83
 8
Moving Flame

For a week or more there were no unusual events.

Camping life went on calmly, the drill and fun occupying
the days in regular succession. By this time all of the
boys were enjoying themselves to the utmost. Muscles
were limber and strong, bodies straight and vigorous,
and the appetites outrageous.

“We certainly are keeping the cooks hustling,” Terry

chuckled one day in the mess tent. “I’m going for
another helping of beans.”

But when the genial redhead went to the kitchen tent 84

he was firmly but politely refused “Nothing doing, Mr.
Mackson,” said the mess sergeant, firmly. “You’ve
already had three plates full and that is the allotment.”

“No more beans for a starving man?” Terry inquired, in

dismay.

“No more for you anyway. I don’t know why you should
be starving, I’m sure.”

“All right,” returned the red-headed one, calmly. “My

mother will get even with you!”

“What do you mean, your mother will?” cried the cook,

staring.
“When my body is shipped home, and she learns that
her darling boy starved to death in the camp, she will
spend the rest of her life calling down vengeance upon
the head of the hard-headed and hard-hearted cook
that turned him away with tears in his eyes!” was the
answer. The mess tent shook with the laugh that went
up. But the cook was prepared to answer him back.

“You’re right about the cook turning him away with

tears in his eyes,” the cook said. “It brings tears to my
eyes to see the hole in the bean pile when you get
eating!”

Terry retired thoughtfully, paying no heed to the

mocking gibes which greeted him on all sides. After a
moment he looked at Vench, who was eating across the
table from him. Vench had just pushed his plate to one
side.

“How many plates of beans did you have, Raoul?” Terry 85

whispered.

“Two was enough for me,” returned the little one.

“My son, heaven’s blessings upon you! Just take my

plate and hit the trail for the cook!”

Mr. Vench took Terry’s plate and gravely approached the

cook. But as soon as that worthy saw the particular
dent in the tin plate he shook his head wisely.

“Nothing doing, Mr. Vench,” he said. “That is Mackson’s

plate. You don’t work that game here!”

“Thank you, sir!” Vench murmured, while the cadets

enjoyed the failure of the move to the utmost. With that
Vench turned away. But at that moment the cook was
called to the far end of the mess tent. With swiftness
that was commendable Vench reached over the stove
and heaped the plate. Then he sped back to the
delighted Terry.

“Ram that in your musket and keep still!” he said, as he

took his place.

Terry needed no second invitation. He dug into the pile

of beans with alacrity. And in a moment the sharp voice
of the cook reached him.

“Mr. Mackson, where did you get those beans?”

Terry looked blank. “I am not at all sure, sir,” he 86

answered, politely. “I had just turned my back, and
when I looked around there they were, right under my
nose!”

“Did you come and take them while I was not looking?”
cried the cook.

“Haven’t been out of my seat since you broke my heart

with your refusal,” was the answer. “And you didn’t give
any to Mr. Vench, so it is up to you to figure out how I
got the beans!”

“Bring them here, Mr. Mackson!” ordered the mess

sergeant.

Terry shoveled the last forkful into his mouth. “Beg

pardon?” he asked blandly.

“I’ll put you on report!” growled the sergeant.

“My dear fellow, you can’t,” smiled Terry. “I didn’t take

them myself and so you have no charge to prefer. And if
you did I’d pound all the beans out of you once I got
you away from the mess tent!”

“That amounts to threatening an officer while on duty,

Mr. Mackson!” charged the sergeant.

“That’s not a threat, that’s a promise,” grinned the

redhead. The sergeant muttered savagely but subsided.

“Much obliged,” Terry whispered to Vench. “Some day

I’ll help you out.”

“But not in the matter of beans,” smiled Vench. “They

just don’t happen to be my weakness!”

One of the steady visitors to the camp was the little 87

Carson boy. He was the son of the farmer from whom
the camp supplies were purchased, and the cadets had
taken a great liking to him. He was a friendly, likable
boy and obviously deeply interested in the activities of
the young soldiers. He watched all of their maneuvers
with fascinated interest and the cadets welcomed him in
their tents.

“That youngster has the makings of a good cadet in

him,” Don said. “Too bad he isn’t one of us. How would
you like to be a cadet, Jimmie?”

The boy flushed with pleasure and looked around the

tent. “I’d like it more than anything else in the world,”
he told them. “I’ll tell you a secret. Want to hear it?”

“Well, if it isn’t too deep for us, we would,” Jim assured

him.

“I’m saving my money to go to Woodcrest,” the little

fellow confided. “Guess how much I have saved
already?”

“I can’t imagine, but I hope it is a lot,” replied Don.

“It is!” was the eager retort. “I have a dollar and fifty-
seven cents toward it!”

“That’s great!” said Terry promptly. “You’ll need a little 88

more than that, but it is a good beginning, anyway. Just
you keep on going.”

“I’ll surely be glad when I get a uniform like you have,”

the boy went on, wistfully. “I think they’re swell.”

There were other boys who drifted to the camp but they
did not attract the attention of the cadets as much as
the Carson boy did. They came to look around and fool
a bit and in time most of them were chased away. But
Jimmie Carson was never in the way and so he was
allowed to come often to camp.

One afternoon a group of cadets went for another hike

over the Ridge and on the way back they passed the
Carson farm. Jimmie called to them to come in and they
did so. To their delight Mrs. Carson, a plain, kindly
woman of middle age, insisted that they try a huge
apple pie that she had made.

“Don’t give any to Terry, Mrs. Carson,” begged Jim, as

they sat on the back porch. Don, Jim, Terry, Douglas
and Vench were there at the time.

“Why is that? Doesn’t he feel well?” the farmer’s wife

inquired, anxiously.

“He has had stomach trouble for a long time,” returned

Jim, gravely. “The doctor said that of all things in the