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:  Creating Web Content     2
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 in Multiple Ways     42
Understanding the Element     44
Using      45
Implementing the Element     45
When to Use      47
Using 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
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
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 Images226
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

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
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
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
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
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
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

     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
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
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 Author

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.