Start Here!™ Learn HTML5

Start Here!™ Learn HTML5

by Faithe Wempen
Released November 2012
Publisher(s): Microsoft Press
ISBN: 9780735670358

Read it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial

Book description

Ready to learn HTML5 programming? Start Here!

Learn the fundamentals of programming with HTML5—and begin building your first standards-based web pages from the ground up. If you have absolutely no previous experience, no problem—simply start here! This book introduces must-know concepts and getting-started techniques through easy-to-follow explanations, examples, and exercises.

Here’s where you start learning HTML5

  • Create a web site using HTML5 tags in a simple text editor

  • Use semantic tags to make your pages easier to layout and find

  • Draw in HTML5 using the canvas element

  • Embed audio and video in your web pages

  • Get HTML5 to work in older browsers

  • Develop your future skills in web design

.

Code Samples

Each chapter includes exercises that let you interactively try out new material learned in the main text. All files you will need to complete these exercises can be downloaded from the following page:

https://www.microsoftpressstore.com/store/start-here-learn-html5-9780735669826

Table of contents

  1. Table of Contents
  2. Dedication
  3. Introduction
    1. Who Should Read This Book
    2. Assumptions
    3. Who Should Not Read This Book
    4. Organization of This Book
    5. Conventions and Features in This Book
    6. System Requirements
    7. Code Samples
    8. Installing the Code Samples
    9. Using the Code Samples
    10. Acknowledgments
    11. Errata & Book Support
    12. We Want to Hear from You
    13. Stay in Touch
  4. I. Getting Started with HTML
    1. 1. HTML Basics: The Least You Need to Know
      1. Understanding HTML Tags
      2. Opening a Webpage in Notepad
        1. Open a Webpage in Notepad
          1. Open a Webpage in Notepad
        2. Other Ways of Opening Webpages in Notepad
        3. Adding a Location to the Favorites List
          1. Add a Location to Your Favorites List
      3. Previewing HTML Files in a Web Browser
        1. Open a Webpage in Internet Explorer
          1. Open a Webpage in Internet Explorer
      4. Making, Saving, and Viewing Changes
        1. Make and View Changes to an HTML File
          1. Make and View Changes to an HTML File
      5. Key Points
    2. 2. Setting Up the Document Structure
      1. Specifying the Document Type
      2. Creating the HTML, Head, and Body Sections
        1. Create an HTML5 Template
          1. Create an HTML5 Template
        2. Creating Paragraphs and Line Breaks
          1. Add Text to an HTML File
        3. Specifying a Page Title and Metatags
          1. Specify a Page Title and Metatags
      3. Key Points
    3. 3. Formatting Text with Tags
      1. Creating Headings
        1. Create Headings
          1. Create Headings
      2. Applying Bold and Italic Formatting
        1. Apply Bold and Italic
          1. Apply Bold and Italic
      3. Applying Superscript and Subscript Formatting
        1. Apply Superscript Formatting
          1. Apply Superscript Formatting
      4. Using Monospace and Preformatted Text
        1. Use Monospaced and Preformatted Text
          1. Use Monospaced and Preformatted Text
      5. Formatting a Block Quotation
        1. Use a Block Quotation Tag
          1. Use a Block Quotation Tag
      6. Configuring View Settings in Internet Explorer
        1. Configure Internet Explorer View Settings
          1. Configure Internet Explorer View Settings
      7. Key Points
    4. 4. Using Lists and Backgrounds
      1. Creating Bulleted and Numbered Lists
        1. Nesting Lists
        2. Changing the Bullet or Number Character
        3. Specifying the Start of a Numbered List
          1. Create Ordered (Numbered) and Unordered (Bulleted) Lists
      2. Creating Definition Lists
        1. Create a List of Definitions
          1. Create a List of Definitions
      3. Inserting Special Characters
        1. Insert Special Characters
          1. Insert Special Characters
      4. Inserting Horizontal Lines
        1. Add Decorative Horizontal Lines
          1. Add Decorative Horizontal Lines
      5. Choosing Background Colors and Foreground Colors
        1. Understanding How Colors are Specified on Webpages
        2. Applying a Background Color
        3. Applying a Foreground Color
          1. Apply Background and Foreground Colors
        4. Specifying a Background Image File
          1. Use a Graphic as a Background
      6. Key Points
    5. 5. Creating Hyperlinks and Anchors
      1. Hyperlinking to a Webpage
        1. Using Partial Paths and Filenames
        2. Using Relative and Absolute Paths
        3. Setting a Target Window
          1. Create Hyperlinks to Files
      2. Hyperlinking to an Email Address
        1. Create a mailto: Hyperlink
          1. Create a mailto: Hyperlink
      3. Creating and Hyperlinking to Anchors
        1. Create an Anchor Point
          1. Create an Anchor Point
      4. Hyperlinking to Other Content
        1. Hyperlink to Other Content
          1. Hyperlink to Other Content
      5. Key Points
  5. II. Style Sheets and Graphics
    1. 6. Introduction to Style Sheets
      1. Understanding Styles
      2. Constructing Style Rules
        1. Create an Embedded Style Sheet
          1. Create an Embedded Style Sheet
      3. Creating Styles for Nested Tags
        1. Use Styles to Format a Nested List
          1. Use Styles to Format a Nested List
      4. Creating Classes and IDs for Applying Styles
        1. Create and Use Classes
          1. Create and Use Classes
      5. Applying Styles to Hyperlinks with Pseudo-Classes
        1. Use Pseudo-Classes to Define Hyperlink Formatting
          1. Use Pseudo-Classes to Define Hyperlink Formatting
      6. Creating and Linking to External Style Sheets
        1. Create and Use an External Style Sheet
          1. Create and Use an External Style Sheet
      7. Key Points
    2. 7. Formatting Text with CSS
      1. Specifying a Font Family
        1. Apply Fonts with Styles
          1. Apply Fonts with Styles
      2. Specifying a Font Size and Color
        1. Specify a Font and Color
          1. Specify a Font and Color
      3. Applying Bold and Italics
        1. Apply Bold and Italic with Styles
          1. Apply Bold and Italic with Styles
      4. Applying Strikethrough and Underlining
        1. Apply Underlining and Strikethrough
          1. Apply Underlining and Strikethrough
      5. Creating Inline Spans
        1. Format Text with Inline Spans
          1. Format Text with Inline Spans
      6. Adjusting Spacing between Letters
        1. Change Word and Letter Spacing
          1. Change Word and Letter Spacing
      7. Key Points
    3. 8. Formatting Paragraphs with CSS
      1. Indenting Paragraphs
        1. Apply Paragraph Indentation and Padding
          1. Apply Paragraph Indentation and Padding
      2. Applying a Border to a Paragraph
        1. Specifying a Border Style
        2. Setting Border Padding
        3. Specifying Border Width and Color
        4. Formatting Border Sides Individually
        5. Setting All Border Attributes at Once
          1. Format Paragraph Borders
      3. Specifying the Horizontal Alignment of a Paragraph
        1. Change Horizontal Alignment
          1. Change Horizontal Alignment
      4. Specifying Vertical Space within a Paragraph
        1. Change Vertical Spacing
          1. Change Vertical Spacing
      5. Key Points
    4. 9. Inserting Graphics
      1. Understanding Graphic Size and Resolution
      2. Inserting a Graphic
        1. Insert a Graphic
          1. Insert a Graphic
      3. Clearing a Graphic
        1. Set an Object to Clear a Graphic
          1. Set an Object to Clear a Graphic
      4. Controlling Image Size and Padding
        1. Size the Size, Padding, and Margin for a Graphic
          1. Size the Size, Padding, and Margin for a Graphic
      5. Using a Graphic as a Hyperlink
        1. Create a Graphical Hyperlink
          1. Create a Graphical Hyperlink
      6. Creating Thumbnails
        1. Hyperlink Thumbnails of Images
          1. Hyperlink Thumbnails of Images
      7. Including Alternate Text for Graphics
        1. Use Alt Tags
          1. Use Alt Tags
      8. Adding Figure Captions
        1. Add a Single Caption to a Group of Figures
          1. Add a Single Caption to a Group of Figures
      9. Key Points
  6. III. Page Layout and Navigation
    1. 10. Creating Navigational Aids
      1. Planning Your Site’s Organization
      2. Creating a Text-Based Navigation Bar
        1. Create a Text-Based Navigation Bar
          1. Create a Text-Based Navigation Bar
      3. Creating a Graphical Navigation Bar
        1. Create a Graphical Navigation Bar
          1. Create a Graphical Navigation Bar
      4. Redirecting to Another URL
        1. Redirect to Another URL
          1. Redirect to Another URL
      5. Creating Custom Error Pages
        1. Create a Custom 404 Error Page
          1. Create a Custom 404 Error Page
      6. Key Points
    2. 11. Creating Division-Based Layouts
      1. Understanding HTML5 Semantic Tags
      2. Beginning to Think in Divisions
      3. Creating Divisions
        1. Create Divisions
          1. Create Divisions
      4. Creating an HTML5 Semantic Layout
        1. Create an HTML5 Semantic Layout
          1. Create an HTML5 Semantic Layout
      5. Positioning Divisions
        1. Floating a Division to the Right or Left
        2. Positioning a Division on the Page
          1. Position Divisions
      6. Formatting Divisions
        1. Format Divisions
          1. Format Divisions
      7. Key Points
    3. 12. Creating Tables
      1. Creating a Simple Table
        1. Create a Table
          1. Create a Table
      2. Specifying the Size of a Table
        1. Resize a Table
          1. Resize a Table
      3. Specifying the Width of a Column
        1. Change Table Column Widths
          1. Change Table Column Widths
      4. Spanning (Merging) Table Cells
        1. Change Table Column Widths
          1. Change Table Column Widths
      5. Using Tables for Page Layout
        1. Build a Table-Based Page Layout
          1. Build a Table-Based Page Layout
      6. Key Points
    4. 13. Formatting Tables
      1. Applying Table Borders
        1. Applying Borders by Using Attributes
        2. Applying Borders by Using Styles
          1. Apply and Remove Table Borders
      2. Applying Background and Foreground Fills
        1. Format a Table’s Foreground and Background
          1. Format a Table’s Foreground and Background
      3. Changing Cell Padding, Spacing, and Alignment
        1. Setting Cell Padding
        2. Setting Cell Spacing
        3. Setting Horizontal and Vertical Alignment
          1. Change a Table’s Padding, Spacing, and Alignment
      4. Key Points
    5. 14. Creating User Forms
      1. Creating a Basic Form
        1. Creating a Text Box
        2. Special Field Types for Email and Web Addresses
        3. Creating a Text Area
        4. Creating a Submit or Clear Button
        5. Adding Default or Placeholder Text
          1. Create a Simple Form with Text Boxes
      2. Creating Check Boxes and Option Buttons
        1. Add Option Buttons and a Check Box to a Form
          1. Add Option Buttons and a Check Box to a Form
      3. Creating Menu Lists
        1. Create a Drop-Down Menu List on a Form
          1. Create a Drop-Down Menu List on a Form
      4. Additional Input Types in HTML5
      5. Understanding CGI and Other Advanced Tools
      6. Key Points
    6. 15. Incorporating Sound and Video
      1. Understanding Audio and Video in HTML5
      2. HTML Multimedia Basics
        1. Multimedia Formats and Containers
        2. Codecs: Decoding the Video and Audio
        3. Which Format to Choose?
        4. Encoding Video
          1. Encode a Video Clip with VLC Media Player
      3. Embedding Video Clips
        1. Introducing the <video> Tag
        2. The <embed> Tag: Your Fallback Plan
        3. Place a Video Clip on a Webpage
          1. Add a Video Clip to a Webpage
      4. Incorporating Audio on a Webpage
        1. Playing Audio with the <audio> Tag
        2. Playing Audio in Older Browsers
          1. Add an Audio Clip to a Webpage
      5. Key Points
    7. 16. HTML and Microsoft Expression Web
      1. Exploring the Expression Web Interface
        1. View a Webpage in Expression Web
          1. View a Webpage in Expression Web
      2. Creating Websites and Webpages
        1. Start a New Website
          1. Start a New Website
        2. Create a Page by Using a CSS Template
          1. Create a Website Using a CSS Template
      3. Insert Graphics
        1. Import an Images Folder
          1. Import an Images folder
        2. Place Images on a Page
          1. Insert Graphics
        3. Add a Background Image to a Division
          1. Add a Background Image to a Division
      4. Formatting Text
        1. Format Text
          1. Format Text
      5. Formatting a Division
        1. Format a Division
          1. Format a Division
      6. Inserting Hyperlinks
        1. Insert Text and Graphical Hyperlinks
          1. Insert Text and Graphical Hyperlinks
      7. Key Points
  7. IV. Appendices
    1. A. Designing for Usability
      1. Understanding Usability
      2. Planning for Usability
      3. Sketching the Site Organization
      4. Designing a Consistent Page Template
      5. Designing the Content of Individual Pages
      6. Performing Usability Testing
    2. B. Designing for Accessibility
      1. Guideline 1: Provide Equivalent Alternatives to Auditory and Visual Content
      2. Guideline 2: Don’t Rely on Color Alone
      3. Guideline 3: Use Markup and Style Sheets, and Do So Properly
      4. Guideline 4: Clarify Natural Language Usage
      5. Guideline 5: Create Tables that Transform Gracefully
      6. Guideline 6: Ensure Pages that Feature New Technologies Transform Gracefully
      7. Guideline 7: Ensure User Control of Time-Sensitive Content Changes
      8. Guideline 8: Ensure Direct Accessibility of Embedded User Interfaces
      9. Guideline 9: Design for Device Independence
      10. Guideline 10: Use Interim Solutions
      11. Guideline 11: Use W3C Technologies and Guidelines
      12. Guideline 12: Provide Context and Orientation Information
      13. Guideline 13: Provide Clear Navigation Mechanisms
      14. Guideline 14: Ensure that Documents are Clear and Simple
    3. C. Quick Reference
      1. Tags Added in HTML 5
      2. Tags Removed in HTML 5
  8. Glossary
  9. Index
  10. About the Author
  11. Copyright

Product information

  • Title: Start Here!™ Learn HTML5
  • Author(s): Faithe Wempen
  • Release date: November 2012
  • Publisher(s): Microsoft Press
  • ISBN: 9780735670358