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

  Sams Teach Yourself HTML, CSS, and JavaScript All in One combines these three fundamental web development technologies into one clearly written, carefully organized, step-by-step tutorial that expertly guides the beginner through these three interconnected technologies. In just a short time, you can learn how to use HTML, Cascading Style Sheets (CSS), and JavaScript together to design, create, and maintain world-class websites. Each lesson in this book builds on the previous ones, enabling you to learn the essentials from the ground up. Clear instructions and practical, hands-on examples show you how to use HTML to create the framework of your website, design your site’s layout and typography with CSS, and then add interactivity with JavaScript and jQuery. Step-by-step instructions carefully walk you through the most common web development tasks. Practical, hands-on examples show you how to apply what you learn. Quizzes and exercises help you test your knowledge and stretch your skills. Learn how to… Build your own web page and get it online in an instant Format text for maximum clarity and readability Create links to other pages and to other sites Add graphics, color, and visual pizzazz to your web pages Work with transparent images and background graphics Design your site’s layout and typography using CSS Make elements move on your page with CSS transformations and transitions Animate with CSS and the HTML5 Canvas element Write HTML that’s responsive web design-ready Design a site for mobile devices Use CSS media queries and breakpoints Get user input with web-based forms Use JavaScript to build dynamic, interactive web pages Add AJAX effects to your web pages Leverage JavaScript libraries such as jQuery Make your site easy to maintain and update as it grows

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