0%

Book Description

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

  1. Cover Page
  2. Title Page
  3. Copyright Page
  4. Contents at a Glance
  5. Table of Contents
  6. About the Authors
  7. Dedication
  8. Acknowledgments
  9. Accessing the Free Web Edition
  10. Reader Services
  11. Part I: Getting Started on the Web
    1. Lesson 1 Understanding How the Web Works
      1. A Brief History of HTML and the World Wide Web
      2. Creating Web Content
      3. Understanding Web Content Delivery
      4. Selecting a Web Hosting Provider
      5. Testing with Multiple Web Browsers and Devices
      6. Creating a Sample File
      7. Using FTP to Transfer Files
      8. Understanding Where to Place Files on the Web Server
      9. Distributing Content Without a Web Server
      10. Tips for Testing Web Content
      11. Summary
      12. Q&A
      13. Workshop
      14. Exercises
    2. Lesson 2 Structuring an HTML Document
      1. Getting Prepared
      2. Getting Started with a Simple Web Page
      3. HTML Tags Every Web Page Must Have
      4. Organizing a Page with Paragraphs and Line Breaks
      5. Organizing Your Content with Headings
      6. Understanding Semantic Elements
      7. Using <header> in Multiple Ways
      8. Understanding the <section> Element
      9. Using <article>
      10. Implementing the <nav> Element
      11. When to Use <aside>
      12. Using <footer> Effectively
      13. Summary
      14. Q&A
      15. Workshop
      16. Exercises
    3. Lesson 3 Understanding Cascading Style Sheets
      1. How CSS Works
      2. A Basic Style Sheet
      3. A CSS Style Primer
      4. Using Style Classes
      5. Using Style IDs
      6. Internal Style Sheets and Inline Styles
      7. Summary
      8. Q&A
      9. Workshop
      10. Exercises
    4. Lesson 4 Understanding JavaScript
      1. Learning Web Scripting Basics
      2. How JavaScript Fits into a Web Page
      3. Exploring JavaScript’s Capabilities
      4. Displaying Time with JavaScript
      5. Testing the Script
      6. Summary
      7. Q&A
      8. Workshop
      9. Exercises
    5. Lesson 5 Validating and Debugging Your Code
      1. Validating Your Web Content
      2. Debugging HTML and CSS Using Developer Tools
      3. Debugging JavaScript Using Developer Tools
      4. Summary
      5. Q&A
      6. Workshop
      7. Exercises
  12. Part II: Building Blocks of Practical Web Design
    1. Lesson 6 Working with Fonts, Text Blocks, Lists, and Tables
      1. Working with Special Characters
      2. Boldface, Italic, and Special Text Formatting
      3. Tweaking the Font
      4. Using Web Fonts
      5. Aligning Text on a Page
      6. The Three Types of HTML Lists
      7. Placing Lists Within Lists
      8. Creating a Simple Table
      9. Controlling Table Sizes
      10. Alignment and Spanning Within Tables
      11. Page Layout with Tables
      12. Using CSS Columns
      13. Summary
      14. Q&A
      15. Workshop
      16. Exercises
    2. Lesson 7 Using External and Internal Links
      1. Using Web Addresses
      2. Linking Within a Page Using Anchors
      3. Linking Between Your Own Web Content
      4. Linking to Non-HTML Files
      5. Linking to External Web Content
      6. Linking to an Email Address
      7. Opening a Link in a New Browser Window
      8. Giving Titles to Links
      9. Using CSS to Style Hyperlinks
      10. Using Links Effectively
      11. Summary
      12. Q&A
      13. Workshop
      14. Exercises
    3. Lesson 8 Working with Colors, Images, and Multimedia
      1. Best Practices for Choosing Colors
      2. Understanding Web Colors
      3. Using Hexadecimal Values for Colors
      4. Using RGB and RGBa Values for Colors
      5. Using CSS to Set Background, Text, and Border Colors
      6. Choosing Graphics Software
      7. The Least You Need to Know About Graphics
      8. Preparing Photographic Images
      9. Creating Banners and Buttons
      10. Optimizing Images by Reducing or Removing Colors
      11. Creating Tiled Background Images
      12. Placing Images on a Web Page
      13. Describing Images with Text
      14. Specifying Image Height and Width
      15. Aligning Images
      16. Turning Images into Links
      17. Using Background Images
      18. Using Image Maps
      19. Linking to Multimedia Files
      20. Embedding Multimedia Files
      21. Additional Tips for Using Multimedia
      22. Summary
      23. Q&A
      24. Workshop
      25. Exercises
  13. Part III: Advanced Web Page Design with CSS
    1. Lesson 9 Working with Margins, Padding, Alignment, and Floating
      1. Using Margins
      2. Padding Elements
      3. Keeping Everything Aligned
      4. Centering Blocks of Content
      5. Understanding the float Property
      6. Summary
      7. Q&A
      8. Workshop
      9. Exercises
    2. Lesson 10 Understanding the CSS Box Model and Positioning
      1. The CSS Box Model
      2. Changing the Box Model
      3. The Whole Scoop on Positioning
      4. Controlling the Way Things Stack Up
      5. Managing the Flow of Text
      6. Summary
      7. Q&A
      8. Workshop
      9. Exercises
    3. Lesson 11 Using CSS to Do More with Lists, Text, and Navigation
      1. HTML List Refresher
      2. How the CSS Box Model Affects Lists
      3. Placing List Item Indicators
      4. Creating Image Maps with List Items and CSS
      5. How Navigation Lists Differ from Regular Lists
      6. Creating Vertical Navigation with CSS
      7. Creating Horizontal Navigation with CSS
      8. Summary
      9. Q&A
      10. Workshop
      11. Exercises
    4. Lesson 12 Creating Layouts Using Modern CSS Techniques
      1. Getting Ready to Do Page Layout
      2. The Importance of Putting Mobile Devices First
      3. Understanding Fixed Layouts
      4. Understanding Liquid Layouts
      5. Creating a Fixed/Liquid Hybrid Layout
      6. Using Modern CSS Layout Techniques
      7. Summary
      8. Q&A
      9. Workshop
      10. Exercises
    5. Lesson 13 Taking Control of Backgrounds and Borders
      1. Reviewing Background and Border Basics
      2. Using Multiple Borders and Backgrounds
      3. Using Forgotten Background Properties
      4. Using Gradients as Backgrounds
      5. Rounding the Corners of HTML Elements
      6. Using Images as Borders
      7. Understanding CSS Outlines
      8. Summary
      9. Q&A
      10. Workshop
      11. Exercises
    6. Lesson 14 Using CSS Transformations and Transitions
      1. Understanding CSS 2D Transformations
      2. Transforming Elements in Three Dimensions
      3. Working with CSS Transitions
      4. Using JavaScript to Trigger Transitions
      5. Summary
      6. Q&A
      7. Workshop
      8. Exercises
    7. Lesson 15 Animating with CSS and the Canvas
      1. Understanding CSS Animation
      2. Using the CSS Canvas
      3. Choosing Between CSS Animation and Canvas Animation
      4. Summary
      5. Q&A
      6. Workshop
      7. Exercises
  14. Part IV: Responsive Web Design
    1. Lesson 16 Understanding the Importance of Responsive Web Design
      1. What Is Responsive Web Design?
      2. What Is Progressive Enhancement?
      3. Writing HTML for Responsive Web Design
      4. Validating HTML, CSS, and JavaScript
      5. Summary
      6. Q&A
      7. Workshop
      8. Exercises
    2. Lesson 17 Designing for Mobile Devices
      1. Designing for Mobile Devices
      2. Understanding Mobile First Design
      3. Using Responsive Tables and Images
      4. Creating Responsive Layouts Without Media Queries
      5. Alternatives for Mobile Design Besides RWD
      6. Summary
      7. Q&A
      8. Workshop
      9. Exercise
    3. Lesson 18 Using Media Queries and Breakpoints
      1. What Is a Media Query?
      2. Using Media Query Expressions
      3. What Is a Breakpoint?
      4. How to Define Breakpoints in Your CSS
      5. Optimal Breakpoints
      6. Summary
      7. Q&A
      8. Workshop
      9. Exercises
  15. Part V: Getting Started with Dynamic Sites
    1. Lesson 19 Understanding Dynamic Websites and HTML5 Applications
      1. Understanding the Different Types of Scripting
      2. Including JavaScript in HTML
      3. Displaying Random Content
      4. Understanding the Document Object Model
      5. Changing Images Based on User Interaction
      6. Thinking Ahead to Developing HTML5 Applications
      7. Summary
      8. Q&A
      9. Workshop
      10. Exercises
    2. Lesson 20 Getting Started with JavaScript Programming
      1. Basic Concepts
      2. JavaScript Syntax Rules
      3. Using Comments
      4. Best Practices for JavaScript
      5. Understanding JSON
      6. Summary
      7. Q&A
      8. Workshop
      9. Exercises
    3. Lesson 21 Working with the Document Object Model (DOM)
      1. Understanding the Document Object Model
      2. Using window Objects
      3. Working with the document Object
      4. Accessing Browser History
      5. Working with the location Object
      6. More About the DOM Structure
      7. Working with DOM Nodes
      8. Creating Positionable Elements (Layers)
      9. Hiding and Showing Objects
      10. Modifying Text in a Page
      11. Adding Text to a Page
      12. Summary
      13. Q&A
      14. Workshop
      15. Exercises
    4. Lesson 22 Using JavaScript Variables, Strings, and Arrays
      1. Using Variables
      2. Understanding Expressions and Operators
      3. Data Types in JavaScript
      4. Converting Between Data Types
      5. Using String Objects
      6. Working with Substrings
      7. Using Numeric Arrays
      8. Using String Arrays
      9. Sorting a Numeric Array
      10. Using Functions
      11. Introducing Objects
      12. Using Objects to Simplify Scripting
      13. Extending Built-in Objects
      14. Using the Math Object
      15. Working with Math Methods
      16. Working with Dates
      17. Summary
      18. Q&A
      19. Workshop
      20. Exercises
    5. Lesson 23 Controlling Flow with Conditions and Loops
      1. The if Statement
      2. Using Shorthand Conditional Expressions
      3. Testing Multiple Conditions with if and else
      4. Using Multiple Conditions with switch
      5. Using for Loops
      6. Using while Loops
      7. Using do...while Loops
      8. Working with Loops
      9. Looping Through Object Properties
      10. Summary
      11. Q&A
      12. Workshop
      13. Exercises
    6. Lesson 24 Responding to Events and Using Windows
      1. Understanding Event Handlers
      2. Using Mouse Events
      3. Using Keyboard Events
      4. Using the load and unload Events
      5. Using click to Change the Appearance of a <div>
      6. Controlling Windows with Objects
      7. Moving and Resizing Windows
      8. Using Timeouts
      9. Displaying Dialog Boxes
      10. Summary
      11. Q&A
      12. Workshop
      13. Exercises
    7. Lesson 25 JavaScript Best Practices
      1. Scripting Best Practices
      2. Reading Browser Information
      3. Cross-Browser Scripting
      4. Supporting Non-JavaScript-Enabled Browsers
      5. Creating an Unobtrusive Script
      6. Summary
      7. Q&A
      8. Workshop
      9. Exercises
    8. Lesson 26 Using Third-Party JavaScript Libraries and Frameworks
      1. Using Third-Party JavaScript Libraries
      2. Adding JavaScript Effects by Using a Third-Party Library
      3. Using JavaScript Frameworks
      4. Summary
      5. Q&A
      6. Workshop
      7. Exercises
  16. Part VI: Advanced Website Functionality and Management
    1. Lesson 27 Working with Web-Based Forms
      1. How HTML Forms Work
      2. Creating a Form
      3. Accepting Text Input
      4. Naming Each Piece of Form Data
      5. Labeling Each Piece of Form Data
      6. Grouping Form Elements
      7. Exploring Form Input Controls
      8. Using HTML5 Form Validation
      9. Submitting Form Data
      10. Accessing Form Elements with JavaScript
      11. Summary
      12. Q&A
      13. Workshop
      14. Exercises
    2. Lesson 28 Organizing and Managing a Website
      1. When One Page Is Enough
      2. Organizing a Simple Site
      3. Organizing a Larger Site
      4. Optimizing Your Site for Search Engines
      5. Writing Maintainable Code
      6. Thinking About Version Control
      7. Using HTML and CSS Frameworks
      8. Summary
      9. Q&A
      10. Workshop
      11. Exercises
  17. Index