O'Reilly logo

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Introduction to Web Development Using HTML 5

Book Description

The HTML 5 Web Development book provides a hands-on experience that allows first-time Web-site developers to create their first Web pages and experienced developers to quickly master HTML 5. The book is filled with thousands of real-world examples. The book starts by introducing standard HTML and its use in creating traditional Web sites. Within this context, the book teaches developers how to format and style their pages using cascading style sheets (CSS) and how to automate pages using JavaScript and JQuery. HTML 5 allows Web developers to not only build pages for the World Wide Web, but also to build pages for mobile devices and tablet PCs. The second half of the book introduces developers to all aspects of HTML 5. Developers will learn to create location-aware applications that display content based on the user’s current location, to drag and drop items within a Web page, and much more. Instructors will receive a Test Bank, while the Student Companion Website hosts chapter PowerPoints, assignments, learning objectives, a glossary of must-know terms and quizzes.

Table of Contents

  1. Cover
  2. Title Page
  3. Copyright
  4. Dedication
  5. Brief Contents
  6. Contents
  7. Acknowledgments
  8. Preface
  9. Chapter 1 Getting Started with HTML
    1. Understanding How a Browser Displays a Webpage
    2. Understanding the Need for a Web Server
      1. Getting a Web Server
      2. Understanding Domain Names
    3. Web-Development Software You Can Use to Build a Webpage
    4. Viewing a Site’s HTML
    5. Creating Your Own HTML File
    6. Understanding the HTML Tags
    7. How Web Browsers Treat Spacing and Carriage Returns
    8. Creating Paragraphs Within HTML Content
    9. Formatting Text
      1. Displaying Bold Text
      2. Forgetting a Stop Tag
      3. Displaying Italic Text
      4. Understanding Nested Tags
      5. Displaying Document Headings
      6. Displaying a Horizontal Rule
    10. Understanding Deprecated Tags
    11. Using Special Characters
    12. Placing Comments Within HTML Files
    13. Understanding HTML Tag Attributes
    14. Displaying a Page Title
    15. Using FTP to Upload Files to a Web Server
    16. Real-World Web Design
    17. Hands-On HTML
    18. Chapter Summary
    19. Key Terms
    20. Chapter Review
  10. Chapter 2 Integrating Images
    1. Placing an Image Within a Webpage
    2. Understanding Absolute and Relative Image URLs
    3. Specifying Alternative Text for an Image
    4. Controlling Image Height and Width
    5. Centering an Image
    6. Images and Copyrights
    7. Understanding Image Types and File Sizes
    8. Optimizing Graphics for Web Use
    9. Displaying a Background Image on Your Page
    10. Controlling an Image Border
    11. Padding an Image
    12. Adjusting Image Opacity
    13. Aligning Text and Images
    14. Displaying an Image at a Fixed Location
    15. Rotating an Image
    16. Real-World Web Design
    17. Hands-On HTML
    18. Chapter Summary
    19. Key Terms
    20. Chapter Review
  11. Chapter 3 Using Hyperlinks to Connect Content
    1. Creating a Text-Based Hyperlink
    2. Opening a Hyperlink Within a New Window
    3. Using an Image as a Hyperlink
    4. Using Absolute, Relative, and Page-Based Hyperlink References
    5. Creating an In-Page Hyperlink
    6. Creating a Mailto Hyperlink
    7. Creating an Image Map
    8. Real-World Web Design
    9. Hands-On HTML
    10. Chapter Summary
    11. Key Terms
    12. Chapter Review
  12. Chapter 4 Presenting Lists
    1. Creating an Ordered List
      1. Formatting List Item Content
      2. Changing an Ordered List’s Numbering Scheme
    2. Creating an Unordered List
      1. Formatting List Items Within an Unordered List
    3. Controlling the Appearance of the Unordered List Bullet
    4. Using a Graphic for a Custom Bullet
    5. Positioning List Content
    6. Creating a Definition List
    7. Creating a Nested List
    8. Real-World Web Design
    9. Hands-On HTML
    10. Chapter Summary
    11. Key Terms
    12. Chapter Review
  13. Chapter 5 Formatting Content with Tables
    1. Creating a Table Within a Webpage
    2. Formatting Content Within an HTML Table
    3. Embedding Images Within an HTML Table
    4. Nesting One Table Within Another
    5. Centering a Table
    6. Centering Content Within a Table Cell
    7. Aligning Contents of a Specific Row or Cell
    8. Vertically Aligning Table Row or Cell Contents
    9. Controlling Table Cell Borders
      1. Bordering Specific Parts of a Table
      2. Controlling Borders (Rules) Around Table Cells
    10. Controlling Table Cell Spacing and Padding
    11. Providing a Table Caption
    12. Providing a Table Heading
    13. Displaying a Table Header and Footer
    14. Handling an Unequal Number of Table Rows and Columns
      1. Using the Rowspan Attribute
      2. Revisiting Nested Tables
      3. Treating One or More Columns Uniquely
    15. Controlling a Table’s Width and Height
      1. Revisiting Table Cell Sizes
    16. Formatting an Entire Webpage Using a Single Table
    17. Real-World Web Design
    18. Hands-On HTML
    19. Chapter Summary
    20. Key Terms
    21. Chapter Review
  14. Chapter 6 Getting User Input with Forms
    1. Creating a Simple Form
      1. Understanding the Form Submission Process
    2. Directing a Form to Submit Data
      1. Examining the FormEcho.php Script
    3. Integrating Content Within an HTML Form
    4. Prompting the User for a Password
    5. Limiting the Number of Characters Entered
    6. Prompting the User for a Large Amount of Text
      1. Limiting the Number of Characters Within a Text Area
    7. Placing a Radio Button Within a Form
      1. Selecting a Default Radio Button
    8. Placing Checkboxes Within a Form
      1. Preselecting Checkbox Fields
    9. Creating a Pull-Down List
      1. Controlling the Pull-Down List Size
      2. Selecting Multiple List Elements
    10. Resetting a Form’s Contents
    11. Creating a Custom Button
    12. Labeling Input Fields
    13. E-mailing a Form’s Contents
    14. Using Hidden Fields
    15. Allowing a User to Upload a File
    16. Grouping Related Input Fields Within a Form
    17. Grouping Related Items Within a Pull-Down List
    18. Real-World Web Design
    19. Hands-On HTML
    20. Chapter Summary
    21. Key Terms
    22. Chapter Review
  15. Chapter 7 Styling Content with Cascading Style Sheets
    1. Applying Inline Styles
      1. Revisiting Inline Styles
    2. Defining Embedded Style Definitions
      1. Inline Styles Override Embedded Styles
      2. Making Quick Changes to Your Page
    3. Creating External Style Sheets
    4. Understanding the “Cascading” in Cascading Style Sheets
    5. Real-World Web Design
    6. Hands-On HTML
    7. Chapter Summary
    8. Key Terms
    9. Chapter Review
  16. Chapter 8 Advanced Cascading Style Sheets
    1. Assigning Formatting Styles to a CSS Class Definition
    2. Defining a Style for Multiple Selectors
    3. Combining Style Definitions
    4. Creating a Selector-Specific Class Definition
    5. Assigning CSS Formatting Styles to a Name
    6. Applying CSS Styles to Predefined Pseudo Classes
    7. Applying CSS Styles to Pseudo Elements
    8. Real-World Web Design
    9. Hands-On HTML
    10. Chapter Summary
    11. Key Terms
    12. Chapter Review
  17. Chapter 9 Creating Page Divisions
    1. Using Tables to Format Text and Images
    2. Creating Page Divisions
    3. Using Page Divisions to Create Columns
    4. Using Tables to Format Content
    5. Creating Fixed-Size Content
    6. Real-World Web Design
    7. Hands-On HTML
    8. Chapter Summary
    9. Key Terms
    10. Chapter Review
  18. Chapter 10 JavaScript
    1. Getting Started With JavaScript
      1. JavaScript <script> Tags the Old-Fashioned Way
      2. Looking at a Second Example
    2. Understanding Syntax
    3. Using JavaScript Operators
    4. Storing Data in JavaScript Variables
    5. JavaScript Is Case Sensitive
      1. Assigning a Value to a Variable
      2. Single Quotes Versus Double Quotes
      3. Breaking a Character String
    6. Commenting JavaScript Code
    7. Making Decisions Within JavaScript Code
      1. JavaScript Comparison Operators
      2. JavaScript Logical Operators
      3. JavaScript “if” Statements and Indentation
      4. JavaScript and Whitespace
      5. Using the JavaScript switch Statement
      6. Using the JavaScript Conditional Operator
    8. Repeating One or More Statements
    9. Using JavaScript Functions
    10. Using JavaScript Events
      1. Returning a Value from a Function
      2. Declaring Variables Within a Function
    11. Storing Multiple Values in an Array
    12. Using JavaScript Objects
    13. Using an External JavaScript File
    14. Real-World Web Design: Form Validation
    15. Hands-On HTML
    16. Chapter Summary
    17. Key Terms
    18. Chapter Review
  19. Chapter 11 Using the Document Object Model
    1. A Closer Look at Objects
    2. Common DOM Mouse Events
    3. Taking Advantage of Frame-Based Events
    4. Using an Object’s InnerHTML Attribute
    5. Using the Document Object
    6. Still More Operations to Perform with DOM
      1. Using the Window Object
      2. Using the Screen Object
      3. Using the Navigator Object
      4. Using the History Object
      5. Using the Location Object
    7. Real-World Web Design
    8. Hands-On HTML
    9. Chapter Summary
    10. Key Terms
    11. Chapter Review
  20. Chapter 12 Unleashing JavaScript Using jQuery
    1. Integrating the jQuery Library
    2. The jQuery Syntax
    3. JQuery Fade Operations
    4. Hiding and Showing Page Elements
    5. Using jQuery to Slide Content
    6. Creating jQuery Animations
    7. Using jQuery to Access HTML and CSS Settings
      1. Adding or Removing Page Elements
      2. JQuery CSS Operations
      3. JQuery AJAX Operations
    8. Real-World Web Design
    9. Hands-On HTML
    10. Chapter Summary
    11. Key Terms
    12. Chapter Review
  21. Chapter 13 Communicating with AJAX
    1. How AJAX Helps JavaScript Communicate with Servers
    2. The Three-Step AJAX Process
    3. Understanding the XMLHttpRequest Object
    4. When a Page Makes a Request
      1. A Second Example
    5. Submitting Data to a Remote Server
      1. Receiving XML-Based Data
    6. Real-World Web Design
    7. Hands-On HTML
    8. Chapter Summary
    9. Key Terms
    10. Chapter Review
  22. Chapter 14 Processing JavaScript Object Notation (JSON)
    1. Getting Started with JSON
    2. Using JSON to Create an Object
    3. Creating an Array of Objects
    4. Real-World Web Design: Using JSON to Exchange Information
    5. Hands-On HTML
    6. Chapter Summary
    7. Key Terms
    8. Chapter Review
  23. Chapter 15 Webpage Optimization
    1. Testing Webpage Performance
    2. Revisiting Browser and Server Interactions
    3. Reducing Home Page HTTP-Based File Requests
    4. Reducing Your Image Resolution
    5. Reducing JavaScript Download Overhead
      1. Move JavaScript Code to the Bottom of the Page
    6. Using Multiple Servers
      1. Consider a Content Delivery Network
    7. Compressing Text-Based Content
    8. Improving Download Performance
      1. Move CSS Definitions to the Top of Your Page
      2. Avoiding Redirects
      3. Controlling Browser Caching
    9. Real-World Web Design
    10. Hands-On HTML
    11. Chapter Summary
    12. Key Terms
    13. Chapter Review
  24. Chapter 16 Search Engine Optimization
    1. Tracking Your Network Traffic
    2. Finding Ad Revenue: Pros and Cons of Two Approaches
    3. Optimizing Your Page Keywords So Robots Can Find Them
    4. The Role of Metadata Keywords Within a Webpage
    5. The Role of the <title> and <img> Tags
    6. Building Credibility Through Incoming Links
    7. Selecting a Good Domain Name
    8. Creating a Well-Behaved Robots.txt File
      1. Using the Rel=“nofollow” Attribute
    9. Creating an XML-Based Site Map
    10. Specifying Canonicalization
    11. Using 301 Redirects
    12. Real-World Web Design
    13. Hands-On HTML
    14. Chapter Summary
    15. Key Terms
    16. Chapter Review
  25. Chapter 17 The Need for HTML 5
    1. Understanding the Need for HTML 5
    2. Support for Mobile Devices
    3. Improved Support for Video and Audio
    4. Canvas Programming
    5. Enhanced Client-Side Storage Capabilities
    6. Support for Drag-and-Drop Operations
    7. Multitasking with Web Workers
    8. Communication with WebSockets
    9. HTML 5 Document Structure and Page Semantics
    10. Real-World Web Design
    11. Hands-On HTML
    12. Chapter Summary
    13. Key Terms
    14. Chapter Review
  26. Chapter 18 Integrating Audio and Video
    1. Using HTML 5 Video Within a Webpage
    2. Adding Video Controls
    3. Saving Video Files
    4. Streaming Versus Downloaded Video
    5. Controlling Your Video File Size
    6. Understanding Video Codecs
    7. Supporting Older Browsers
    8. Directing the Browser to Start Buffering Video
    9. Displaying a Default Image Until a Video Starts to Play
    10. Looping a Video
    11. Letting YouTube Handle the Details
    12. Providing Multiple Audio Formats for Browsers
    13. Making Audio Files Work with Older Browsers
    14. Using a Link to an Audio File
    15. Background Audio the Old-Fashioned Way
    16. Real-World Web Design
    17. Hands-On HTML
    18. Chapter Summary
    19. Key Terms
    20. Chapter Review
  27. Chapter 19 HTML 5 Document Structure and Semantics
    1. HTML 5’s New Tags for Defining a Document Structure
    2. Creating a Document Sidebar
    3. Organizing Article Content
    4. Organizing Page Sections
    5. Working with Figures and Figure Captions
    6. Identifying Document Navigational Links
    7. Hiding Underlying Content
    8. Highlighting Document Text
    9. Specifying a Word Break
    10. Real-World Web Design: Supporting User Agents and International Pages
    11. Hands-On HTML
    12. Chapter Summary
    13. Key Terms
    14. Chapter Review
  28. Chapter 20 Creating Scalable Vector Graphics Files
    1. Placing an SVG Image Within an HTML Page
    2. Creating Common Shapes
      1. Drawing an SVG Line
      2. Creating a Square or Rectangle
      3. Drawing a Circle or Ellipse
      4. Drawing a Polygon
      5. Drawing a Polyline
      6. Drawing a Path with Lines and Curves
    3. Drawing Text in SVG
    4. Advanced SVG Capabilities
    5. Real-World Web Design
    6. Hands-On HTML
    7. Chapter Summary
    8. Key Terms
    9. Chapter Review
  29. Chapter 21 Introducing the HTML 5 Canvas
    1. Ways to Use and Not Use the Canvas
    2. Testing for Browser Canvas Support
    3. Displaying a Canvas
    4. Drawing a Line Within the Canvas
    5. Scaling a Canvas Object
    6. Drawing and Filling Rectangles
    7. Drawing a Circle
      1. Drawing an Ellipse
    8. Working with Images
    9. Displaying Text Within the Canvas
    10. Drawing Curved Lines
    11. Real-World Web Design
    12. Hands-On HTML
    13. Chapter Summary
    14. Key Terms
    15. Chapter Review
  30. Chapter 22 Advanced Canvas Programming
    1. Applying Linear and Radial Gradients
    2. Using a Fill Pattern
    3. Applying Drop Shadows to Text and Graphics
    4. Moving an Image on the Canvas
    5. Rotating the Canvas
    6. Manipulating Pixel Data
      1. Accessing Alpha Values to Change Image Transparency
    7. Real-World Web Development
    8. Hands-On HTML
    9. Chapter Summary
    10. Key Terms
    11. Chapter Review
  31. Chapter 23 CSS Transformations and Rotations
    1. The CSS Transform Property
    2. Rotating an Object
      1. Combining JavaScript and CSS to Spin an Object
    3. Translating an Object
    4. Scaling an Object
      1. Flipping an Object
    5. Skewing an Object
    6. Real-World Web Design
    7. Hands-On HTML
    8. Chapter Summary
    9. Chapter Review
  32. Chapter 24 Performing CSS Transitions and Animations
    1. Getting Started with CSS Transitions
      1. Looking at a Second Transition Example
    2. Using a Timer as a Transition Trigger
      1. A Final Transition Example
      2. Getting More Specifics on CSS Transitions
    3. Real-World Web Design
    4. Hands-On HTML
    5. Chapter Summary
    6. Key Terms
    7. Chapter Review
  33. Chapter 25 Utilizing Web Storage
    1. Data Storage the Old-Fashioned Way
    2. Storing Temporary Data in HTML 5
      1. Storing Multiple Values
      2. Clearing Data from the Session Storage
    3. Storing Long-Term Data
    4. Real-World Web Design
    5. Hands-On HTML
    6. Chapter Summary
    7. Key Terms
    8. Chapter Review
  34. Chapter 26 Creating Location-Aware Webpages Using Geolocation
    1. How Geopositioning Identifies Your Location
      1. Working with Latitudes and Longitudes
    2. Enabling Geolocation Capabilities
    3. Testing a Browser for Geolocation Support
    4. Understanding Callback Functions
    5. Tracking a User’s Position
    6. Integrating Google Maps
    7. Mapping Your Current Location
    8. Real-World Web Design
    9. Hands-On HTML
    10. Chapter Summary
    11. Key Terms
    12. Chapter Review
  35. Chapter 27 Drag-and-Drop Processing
    1. How “Drag-and-Drop” Works
    2. Creating a Draggable Webpage Element
    3. Handling a Drag Operation
    4. Making an Area “Droppable”
    5. Allowing the Drop Operation to Occur
      1. A Second Example
    6. Real-World Web Design
    7. Hands-On HTML
    8. Chapter Summary
    9. Key Terms
    10. Chapter Review
  36. Chapter 28 Integrating Web Workers
    1. Understanding Web Workers
      1. Testing a Browser for Web Worker Support
    2. Creating a Web Worker Script
    3. Using the Web Worker
      1. Looking at a Second Example
    4. Objects a Web Worker Can and Cannot Access
    5. Real-World Web Design
    6. Hands-On HTML
    7. Chapter Summary
    8. Key Terms
    9. Chapter Review
  37. Chapter 29 Communicating via WebSockets
    1. Understanding Sockets
    2. Testing Browsers for WebSocket Support
    3. Exchanging Messages with a WebSocket Server
      1. Expanding the Example
    4. Real-World Web Design
    5. Hands-On HTML
    6. Chapter Summary
    7. Key Terms
    8. Chapter Review
  38. Chapter 30 HTML 5 Forms Processing
    1. HTML 5 Form Elements
    2. Creating a Data List
    3. Creating a Private and Public Key Pair
    4. Using the Output of a Calculation
    5. HTML 5 Form Attributes
      1. Directing the Browser to Autocomplete a Field or Form
      2. Disabling Form Validation
      3. Specifying a Field to Receive the Input Focus Within a Form
      4. Using the <Input> Tag Form Attribute
      5. Overriding a Form’s Submit-Method Attribute
      6. Overriding a Form’s Validation Processing
      7. Controlling the Display of a Server’s Response
      8. Specifying an Input Tag’s Height and Width
      9. Using a Data List Reference
      10. Specifying Min and Max Values
      11. Specifying Multiple Values for a File-Upload Operation
      12. Specifying a Regular Expression Pattern for Text Input
      13. Specifying a Field Placeholder
      14. Specifying That a Field Is Required
      15. Specifying a Step Attribute
    6. Understanding HTML 5 Input
    7. Real-World Web Design
    8. Hands-On HTML
    9. Chapter Summary
    10. Key Terms
    11. Chapter Review
  39. Chapter 31 Browser Identification
    1. A Word on “Hacks”
    2. Understanding the User Agent
    3. Determining the Browser Type on the Web Server
      1. Other Navigator Object Fields
    4. Identifying a Mobile Browser
      1. Let Others Do the Mobile Device Detection Work
    5. Real-World Web Design
    6. Hands-On HTML
    7. Chapter Summary
    8. Key Terms
    9. Chapter Review
  40. Glossary of Key Terms
  41. Index