HTML, CSS, and JavaScript All in One: Covering HTML5, CSS3, and ES6, Sams Teach Yourself, 3rd edition

PART I: GETTING STARTED ON THE WEBLesson 1: Understanding How the Web Works 1A Brief History of HTML and the World Wide Web 2Creating Web Content 2Understanding Web Content Delivery 3Selecting a Web Hosting Provider 6Testing with Multiple Web Browsers and Devices 8Creating a Sample File 9Using FTP to Transfer Files 10Understanding Where to Place Files on the Web Server 14Distributing Content Without a Web Server 17Tips for Testing Web Content 18Summary 19Q&A 20Workshop 20Exercises 22Lesson 2: Creating Web Content 2Getting Prepared 24Getting Started with a Simple Web Page 25HTML Tags Every Web Page Must Have 28Organizing a Page with Paragraphs and Line Breaks 31Organizing Your Content with Headings 33Understanding Semantic Elements 36Using <header> in Multiple Ways 42Understanding the <section> Element 44Using <article> 45Implementing the <nav> Element 45When to Use <aside> 47Using <footer> Effectively 48Summary 49Q&A 50Workshop 51Exercises 53Lesson 3: Understanding Cascading Style Sheets 55How CSS Works 56A Basic Style Sheet 57A CSS Style Primer 63Using Style Classes 68Using Style IDs 70Internal Style Sheets and Inline Styles 71Summary 74Q&A 75Workshop 75Exercises 77Lesson 4: Understanding JavaScript 79Learning Web Scripting Basics 80How JavaScript Fits into a Web Page 81Exploring JavaScript’s Capabilities 84Displaying Time with JavaScript 85Testing the Script 89Summary 93Q&A 93Workshop 94Exercises 96Lesson 5: Validating and Debugging Your Code 97Validating Your Web Content 97Debugging HTML and CSS Using Developer Tools 99Debugging JavaScript Using Developer Tools 112Summary 118Q&A 118Workshop 118Exercises 120PART II: BUILDING BLOCKS OF PRACTICAL WEB DESIGNLesson 6: Working with Fonts, Text Blocks, Lists, and Tables 121Working with Special Characters 122Boldface, Italic, and Special Text Formatting 126Tweaking the Font 129Using Web Fonts 133Aligning Text on a Page 136The Three Types of HTML Lists 139Placing Lists Within Lists 142Creating a Simple Table 147Controlling Table Sizes 151Alignment and Spanning Within Tables 154Page Layout with Tables 157Using CSS Columns 158Summary 162Q&A 164Workshop 165Exercises 166Lesson 7: Using External and Internal Links 167Using Web Addresses 167Linking Within a Page Using Anchors 170Linking Between Your Own Web Content 174Linking to Non-HTML Files 177Linking to External Web Content 178Linking to an Email Address 179Opening a Link in a New Browser Window 180Giving Titles to Links 181Using CSS to Style Hyperlinks 182Using Links Effectively 186Summary 187Q&A 188Workshop 189Exercises 190Lesson 8: Working with Colors, Images, and Multimedia 191Best Practices for Choosing Colors 192Understanding Web Colors 194Using Hexadecimal Values for Colors 196Using RGB and RGBa Values for Colors 197Using CSS to Set Background, Text, and Border Colors 199Choosing Graphics Software 201The Least You Need to Know About Graphics 202Preparing Photographic Images 203Creating Banners and Buttons 210Optimizing Images by Reducing or Removing Colors 211Creating Tiled Background Images 212Placing Images on a Web Page 214Describing Images with Text 217Specifying Image Height and Width 218Aligning Images 219Turning Images into Links 223Using Background Images226Using Image Maps 227Linking to Multimedia Files 233Embedding Multimedia Files 237Additional Tips for Using Multimedia 242Summary 242Q&A 245Workshop 246Exercises 248PART III: ADVANCED WEB PAGE DESIGN WITH CSSLesson 9: Working with Margins, Padding, Alignment, and Floating 249Using Margins 249Padding Elements 257Keeping Everything Aligned 261Centering Blocks of Content 262Understanding the float Property 263Summary 267Q&A 267Workshop 267Exercises 270Lesson 10: Understanding the CSS Box Model and Positioning 271The CSS Box Model 271Changing the Box Model 275The Whole Scoop on Positioning 276Controlling the Way Things Stack Up 281Managing the Flow of Text 284Summary 285Q&A 285Workshop 286Exercises 288Lesson 11: Using CSS to Do More with Lists, Text, and Navigation 289HTML List Refresher 290How the CSS Box Model Affects Lists 290Placing List Item Indicators 294Creating Image Maps with List Items and CSS 296How Navigation Lists Differ from Regular Lists 299Creating Vertical Navigation with CSS 300Creating Horizontal Navigation with CSS 310Summary 314Q&A 314Workshop 315Exercises 316Lesson 12: Creating Layouts Using Modern CSS Techniques 317Getting Ready to Do Page Layout 318The Importance of Putting Mobile Devices First 319Understanding Fixed Layouts 319Understanding Liquid Layouts 322Creating a Fixed/Liquid Hybrid Layout 324Using Modern CSS Layout Techniques 335Summary 349Q&A 350Workshop 350Exercises 352Lesson 13: Taking Control of Backgrounds and Borders 353Reviewing Background and Border Basics 353Using Multiple Borders and Backgrounds 355Using Forgotten Background Properties 359Using Gradients as Backgrounds 365Rounding the Corners of HTML Elements 371Using Images as Borders 373Understanding CSS Outlines 378Summary 379Q&A 379Workshop 379Exercises 381Lesson 14: Using CSS Transformations and Transitions 383Understanding CSS 2D Transformations 383Transforming Elements in Three Dimensions 392Working with CSS Transitions 393Using JavaScript to Trigger Transitions 397Summary 398Q&A 399Workshop 399Exercises 400Lesson 15: Animating with CSS and the Canvas 401Understanding CSS Animation 401Using the CSS Canvas 410Choosing Between CSS Animation and Canvas Animation 423Summary 424Q&A 424Workshop 424Exercises 426PART IV: RESPONSIVE WEB DESIGNLesson 16: Understanding the Importance of Responsive Web Design 427What Is Responsive Web Design? 427What Is Progressive Enhancement? 431Writing HTML for Responsive Web Design 435Validating HTML, CSS, and JavaScript 438Summary 439Q&A 440Workshop 440Exercises 442Lesson 17: Designing for Mobile Devices 443Designing for Mobile Devices 443Understanding Mobile First Design 451Using Responsive Tables and Images 455Creating Responsive Layouts Without Media Queries 464Alternatives for Mobile Design Besides RWD 466Summary 468Q&A 469Workshop 469Exercise 470Lesson 18: Using Media Queries and Breakpoints 471What Is a Media Query? 471Using Media Query Expressions 476What Is a Breakpoint? 477How to Define Breakpoints in Your CSS 477Optimal Breakpoints 483Summary 484Q&A 484Workshop 485Exercises 486PART V: GETTING STARTED WITH DYNAMIC SITESLesson 19: Understanding Dynamic Websites and HTML5 Applications 487Understanding the Different Types of Scripting 487Including JavaScript in HTML 488Displaying Random Content 491Understanding the Document Object Model 495Changing Images Based on User Interaction 498Thinking Ahead to Developing HTML5 Applications 501Summary 501Q&A 502Workshop 502Exercises 506Lesson 20: Getting Started with JavaScript Programming 507Basic Concepts 507JavaScript Syntax Rules 514Using Comments 515Best Practices for JavaScript 516Understanding JSON 517Summary 518Q&A 518Workshop 519Exercises 522Lesson 21: Working with the Document Object Model (DOM) 523Understanding the Document Object Model 523Using window Objects 524Working with the document Object 525Accessing Browser History 528Working with the location Object 530More About the DOM Structure 531Working with DOM Nodes 534Creating Positionable Elements (Layers) 536Hiding and Showing Objects 541Modifying Text in a Page 543Adding Text to a Page 545Summary 547Q&A 547Workshop 548Exercises 550Lesson 22: Using JavaScript Variables, Strings, and Arrays 551Using Variables 552Understanding Expressions and Operators 555Data Types in JavaScript 556Converting Between Data Types 557Using String Objects 558Working with Substrings 562Using Numeric Arrays 564Using String Arrays 565Sorting a Numeric Array 567Using Functions 570Introducing Objects 575Using Objects to Simplify Scripting 577Extending Built-in Objects 582Using the Math Object 583Working with Math Methods 585Working with Dates 587Summary 590Q&A 590Workshop 591Exercises 594Lesson 23: Controlling Flow with Conditions and Loops 595The if Statement 595Using Shorthand Conditional Expressions 599Testing Multiple Conditions with if and else 600Using Multiple Conditions with switch 602Using for Loops 604Using while Loops 606Using do...while Loops 607Working with Loops 607Looping Through Object Properties 609Summary 612Q&A 612Workshop 613Exercises 615Lesson 24: Responding to Events and Using Windows 617Understanding Event Handlers 618Using Mouse Events 623Using Keyboard Events 627Using the load and unload Events 630Using click to Change the Appearance of a <div> 631Controlling Windows with Objects 638Moving and Resizing Windows 643Using Timeouts 645Displaying Dialog Boxes 648Summary 650Q&A 650Workshop 651Exercises 654Lesson 25: JavaScript Best Practices 655Scripting Best Practices 655Reading Browser Information 666Cross-Browser Scripting 669Supporting Non-JavaScript-Enabled Browsers 671Creating an Unobtrusive Script 674Summary 677Q&A 677Workshop 677Exercises 680Lesson 26: Using Third-Party JavaScript Libraries and Frameworks 681Using Third-Party JavaScript Libraries 681Adding JavaScript Effects by Using a Third-Party Library 686Using JavaScript Frameworks 689Summary 691Q&A 691Workshop 692Exercises 694PART VI: ADVANCED WEBSITE FUNCTIONALITY AND MANAGEMENTLesson 27: Working with Web-Based Forms 695How HTML Forms Work 695Creating a Form 696Accepting Text Input 702Naming Each Piece of Form Data 703Labeling Each Piece of Form Data 703Grouping Form Elements 705Exploring Form Input Controls 706Using HTML5 Form Validation 716Submitting Form Data 718Accessing Form Elements with JavaScript 720Summary 723Q&A 725Workshop 725Exercises 728Lesson 28: Organizing and Managing a Website 729When One Page Is Enough 730Organizing a Simple Site 732Organizing a Larger Site 735Optimizing Your Site for Search Engines 738Writing Maintainable Code 740Thinking About Version Control 743Using HTML and CSS Frameworks 745Summary 746Q&A 746Workshop 747Exercises 750Index 751