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

Web Programming with HTML5, CSS, and JavaScript

Book Description

Web Programming with HTML5, CSS, and JavaScript is written for the undergraduate, client-side web programming course. It covers the three client-side technologies (HTML5, CSS, and JavaScript) in depth, with no dependence on server-side technologies.

Table of Contents

  1. Cover Page
  2. Title Page
  3. Copyright Page
  4. Dedication
  5. Brief Table of Contents
  6. Table of Contents
  7. Preface
  8. Acknowledgments
  9. About the Author
  10. 1 Introduction to Web Programming
    1. 1.1 Introduction
    2. 1.2 Creating a Website
    3. 1.3 Web Page Example
    4. 1.4 HTML Tags
    5. 1.5 Structural Elements
    6. 1.6 title Element
    7. 1.7 meta Element
    8. 1.8 HTML Attributes
    9. 1.9 body Elements: hr, p, br, div
    10. 1.10 Cascading Style Sheets Preview
    11. 1.11 History of HTML
    12. 1.12 HTML Governing Bodies
    13. 1.13 Differences Between Old HTML and HTML5
    14. 1.14 How to Check Your HTML Code
    15. 1.15 Case Study: History of Electric Power
  11. 2 Coding Standards, Block Elements, Text Elements, and Character References
    1. 2.1 Introduction
    2. 2.2 HTML Coding Conventions
    3. 2.3 Comments
    4. 2.4 HTML Elements Should Describe Web Page Content Accurately
    5. 2.5 Content Model Categories
    6. 2.6 Block Elements
    7. 2.7 blockquote Element
    8. 2.8 Whitespace Collapsing
    9. 2.9 pre Element
    10. 2.10 Phrasing Elements
    11. 2.11 Editing Elements
    12. 2.12 q and cite Elements
    13. 2.13 dfn, abbr, and time Elements
    14. 2.14 Code-Related Elements
    15. 2.15 br and wbr Elements
    16. 2.16 sub, sup, s, mark, and small Elements
    17. 2.17 strong, em, b, u, and i Elements
    18. 2.18 span Element
    19. 2.19 Character References
    20. 2.20 Web Page with Character References and Phrasing Elements
    21. 2.21 Case Study: A Local Hydroelectric Power Plant
  12. 3 Cascading Style Sheets (CSS)
    1. 3.1 Introduction
    2. 3.2 CSS Overview
    3. 3.3 CSS Rules
    4. 3.4 Example with Type Selectors and the Universal Selector
    5. 3.5 CSS Syntax and Style
    6. 3.6 Class Selectors
    7. 3.7 ID Selectors
    8. 3.8 span and div Elements
    9. 3.9 Cascading
    10. 3.10 style Attribute, style Container
    11. 3.11 External CSS Files
    12. 3.12 CSS Properties
    13. 3.13 Color Properties
    14. 3.14 RGB Values for Color
    15. 3.15 Opacity Values for Color
    16. 3.16 HSL and HSLA Values for Color
    17. 3.17 Font Properties
    18. 3.18 line-height Property
    19. 3.19 Text Properties
    20. 3.20 Border Properties
    21. 3.21 Element Box, padding Property, margin Property
    22. 3.22 Case Study: Description of a Small City’s Core Area
  13. 4 Organizing a Page’s Content with Lists, Figures, and Various Organizational Elements
    1. 4.1 Introduction
    2. 4.2 Unordered Lists
    3. 4.3 Descendant Selectors
    4. 4.4 Ordered Lists
    5. 4.5 Figures
    6. 4.6 Organizational Elements
    7. 4.7 section, article, and aside Elements
    8. 4.8 nav and a Elements
    9. 4.9 header and footer Elements
    10. 4.10 Child Selectors
    11. 4.11 CSS Inheritance
    12. 4.12 Case Study: Microgrid Possibilities in a Small City
  14. 5 Tables and CSS Layout
    1. 5.1 Introduction
    2. 5.2 Table Elements
    3. 5.3 Formatting a Data Table: Borders, Alignment, and Padding
    4. 5.4 CSS Structural Pseudo-Class Selectors
    5. 5.5 thead and tbody Elements
    6. 5.6 Cell Spanning
    7. 5.7 Web Accessibility
    8. 5.8 CSS display Property with Table Values
    9. 5.9 Absolute Positioning with CSS Position Properties
    10. 5.10 Relative Positioning
    11. 5.11 Case Study: A Downtown Store’s Electrical Generation and Consumption
  15. 6 Links and Images
    1. 6.1 Introduction
    2. 6.2 a Element
    3. 6.3 Relative URLs
    4. 6.4 index.html File
    5. 6.5 Web Design
    6. 6.6 Navigation Within a Web Page
    7. 6.7 CSS for Links
    8. 6.8 a Element Additional Details
    9. 6.9 Bitmap Image Formats: GIF, JPEG, PNG
    10. 6.10 img Element
    11. 6.11 Vector Graphics
    12. 6.12 Responsive Images
    13. 6.13 Case Study: Local Energy and Home Page with Website Navigation
  16. 7 Image Manipulations, Audio, and Video
    1. 7.1 Introduction
    2. 7.2 Positioning Images
    3. 7.3 Shortcut Icon
    4. 7.4 iframe Element
    5. 7.5 CSS Image Sprites
    6. 7.6 Audio
    7. 7.7 Background Images
    8. 7.8 Web Fonts
    9. 7.9 Video
    10. 7.10 Centering Content Within the Viewport, Color Gradients
    11. 7.11 Case Study: Using an Image Map for a Small City’s Core Area and Website Navigation with a Generic Home Page
  17. 8 Introduction to JavaScript: Functions, DOM, Forms, and Event Handlers
    1. 8.1 Introduction
    2. 8.2 History of JavaScript
    3. 8.3 Hello World Web Page
    4. 8.4 Buttons
    5. 8.5 Functions
    6. 8.6 Variables
    7. 8.7 Identifiers
    8. 8.8 Assignment Statements and Objects
    9. 8.9 Document Object Model
    10. 8.10 Forms and How They’re Processed: Client-Side Versus Server-Side
    11. 8.11 form Element
    12. 8.12 Controls
    13. 8.13 Text Control
    14. 8.14 Email Address Generator Web Page
    15. 8.15 Accessing a Form’s Control Values
    16. 8.16 reset and focus Methods
    17. 8.17 Comments and Coding Conventions
    18. 8.18 Event-Handler Attributes
    19. 8.19 onchange, onmouseover, onmouseout
    20. 8.20 Using noscript to Accommodate Disabled JavaScript
  18. 9 Additional JavaScript Basics: window Object, if Statement, Strings, Numbers, and Input Validation
    1. 9.1 Introduction
    2. 9.2 window Object
    3. 9.3 alert and confirm Methods
    4. 9.4 if Statement: if by itself
    5. 9.5 Game Night Web Page
    6. 9.6 prompt Method
    7. 9.7 Game Night Web Page Revisited
    8. 9.8 if Statement: else and else if Clauses
    9. 9.9 Strings
    10. 9.10 Word Ordering Web Page
    11. 9.11 More String Details
    12. 9.12 Arithmetic Operators
    13. 9.13 Math Object Methods
    14. 9.14 Parsing Numbers: parseInt, parseFloat
    15. 9.15 Water Balloons Web Page
    16. 9.16 Constraint Validation for Form Controls
    17. 9.17 Constraint Validation Using the Number Control’s Attributes
    18. 9.18 Constraint Validation Using CSS Pseudo-Classes
    19. 9.19 Comparison Operators and Logical Operators
    20. 9.20 JavaScript for the Improved Water Balloons Web Page
    21. 9.21 Case Study: Dynamic Positioning and Collector Performance Web Page
  19. 10 Loops, Additional Controls, Manipulating CSS with JavaScript
    1. 10.1 Introduction
    2. 10.2 while Loop
    3. 10.3 External JavaScript Files
    4. 10.4 Compound Interest Web Page
    5. 10.5 do Loop
    6. 10.6 Radio Buttons
    7. 10.7 Checkboxes
    8. 10.8 Job Skills Web Page
    9. 10.9 for Loop
    10. 10.10 fieldset and legend Elements
    11. 10.11 Manipulating CSS with JavaScript
    12. 10.12 Using z-index to Stack Elements on Top of Each Other
    13. 10.13 Textarea Controls
    14. 10.14 Dormitory Blog Web Page
    15. 10.15 Pull-Down Menus
    16. 10.16 List Boxes
    17. 10.17 Case Study: Collector Performance Details and Nonredundant Website Navigation
  20. 11 Object-Oriented Programming and Arrays
    1. 11.1 Introduction
    2. 11.2 Object-Oriented Programming Overview
    3. 11.3 Classes, Constructors, Properties, new Operator, Methods
    4. 11.4 Point Tracker Web Page
    5. 11.5 static Methods
    6. 11.6 Event Handlers
    7. 11.7 Primitive Values Versus Objects
    8. 11.8 Using addEventListener to Add Event Listeners
    9. 11.9 Using Prototypes to Emulate a Class
    10. 11.10 Inheritance Between Classes
    11. 11.11 Pet Registry Web Page
    12. 11.12 switch Statement
    13. 11.13 Arrays
    14. 11.14 Arrays of Objects
    15. 11.15 Book Club Web Page
    16. 11.16 Case Study: Downtown Properties Data Processing
  21. 12 Canvas
    1. 12.1 Introduction
    2. 12.2 Canvas Syntax Basics
    3. 12.3 Rectangles Web Page
    4. 12.4 Drawing Text with fillText and strokeText
    5. 12.5 Formatting Text
    6. 12.6 Drawing Arcs and Circles
    7. 12.7 Drawing Lines and Paths
    8. 12.8 Umbrella Web Page
    9. 12.9 Face Web Page
    10. 12.10 Using Canvas for Transformations
    11. 12.11 Moving Face Web Page
    12. 12.12 Case Study: Solar Shadowing Dynamics
  22. Appendix A HTML5 and CSS Coding-Style Conventions
  23. Appendix B JavaScript Coding-Style Conventions
  24. Review Question Solutions
  25. Index