Html5 & Css3 Visual QuickStart Guide (Visual QuickStart Guides)

• Write semantic HTML, both with elements that have been around for years and ones that are new in HTML5.

• Prepare images for the Web and add them to your pages.

• Use CSS to style text, add background colors and images, and implement a multicolumn layout.

• Build a single site for all users—whether they are using a mobile phone, tablet, laptop, desktop computer, or other Web-enabled device—based on many of the components of responsive Web design, including CSS3 media queries.

• Leverage new selectors in CSS3, add Web fonts to your pages with @font-face, and use CSS3 effects such as opacity, background alpha transparency, gradients, rounded corners, drop shadows, shadows inside elements, text shadows, and multiple background images.

• Improve your site’s accessibility with ARIA landmark roles and other good coding practices.

• Build forms to solicit input from your visitors.

• Include media in your pages with the HTML5 audio and video elements.

• Test and debug your Web pages.

• Secure a domain name and publish your site.

Bruce is an independent developer and consultant to agencies, start-ups, and others, previously having spent a decade in the digital agency world. Formerly, he was the senior director of the Interface Engineering Group (IEG) at Schematic, where he oversaw company-wide efforts to define and implement best practices regarding HTML, CSS, JavaScript, and accessibility wherever they may be applied: the browser, desktop, mobile devices, and emerging platforms.

Bruce was an early adopter of Web standards. At a previous agency in the early 2000s, he lead companies such as Baskin-Robbins and Pacific Gas & Electric into the fray of modern client-side practices while managing development between offices in Los Angeles, China, and New York.

Front matter

     Introduction

     The Internet, the Web, and HTML

     Open but Not Equal

     An Introduction to Web Standards

     A Glimpse at the Past: HTML 4 and XHTML 1

     Upward and Onward: An HTML5 Primer

     CSS and Browser Support

     How This Book Works

     What's Changed in the Seventh Edition

     The HTML VQS Web Site

01     Web Page Building Blocks

     A Basic HTML Page

     Semantic HTML: Markup with Meaning

     Markup: Elements, Attributes, and Values

     A Web Page's Text Content

     Links, Images, and Other Non-Text Content

     File Names

     URLs

     Recap of Key Takeaways

02     Working with Web Page Files

     Planning Your Site

     Creating a New Web Page

     Saving Your Web Page

     Specifying a Default or “Home” Page

     Editing Web Pages

     Organizing Files

     Viewing Your Page in a Browser

     The Inspiration of Others

     Working on a Local Server

03     Basic HTML Structure

     Starting Your Web Page

     Creating the Foundation

     Declaring the Encoding

     Creating a Title

     Creating Headings

     Grouping Headings

     Starting a New Paragraph

     Naming Elements

     Breaking up a Page into Divisions

     Creating Inline Spans

     Adding a Thematic Break or Transition

     Labeling Elements in a Web Page

     Adding Comments

04     Structural Elements Unique to HTML5

     HTML5's Document Outline

     Creating a Header

     Marking Navigation

     Creating a Footer

     Creating an Article

     Creating a Section

     Specifying an Aside

05     Text

     Adding Author Contact Information

     Defining a Figure

     Marking Important and Emphasized Text

     Offset Text Stylistically or in Another Voice

     Highlighting Text

     Quoting Text

     Indicating a Citation or Reference

     Explaining Abbreviations

     Defining a Term

     Creating Superscripts and Subscripts

     Specifying Time

     Marking Changed Text

     Marking Misspelled Text

     Specifying Fine Print

     Marking Code and Using Preformatted Text

     Marking Keyboard Instructions and Sample Output

     Creating a Line Break

     Indicating a Measurement within a Range

     Indicating Progress

     Adding a Ruby Annotation

     Handling Bidirectional Text

06     Images

     About Images for the Web

     Getting Images

     Choosing an Image Editor

     The Save for Web Command

     Inserting Images on a Page

     Specifying Alternate Text

     Determining an Image's Dimensions

     Reducing an Image's Dimensions

     Adding an Icon for Your Web Site

07     Links

     Creating a Link to Another Web Page

     Creating Anchors

     Linking to a Specific Anchor

     Creating Other Kinds of Links

     Using Images to Label Links

08     Style Sheet Building Blocks

     Constructing a Style Rule

     Adding Comments to Style Rules

     The Cascade: When Rules Collide

     A Property’s Value

09     Working with Style Sheet Files

     Creating an External Style Sheet

     Linking External Style Sheets

     Creating an Embedded Style Sheet

     Applying Inline Styles

     Using Media-Specific Style Sheets

     Offering Alternate Style Sheets

     The Importance of Location

     The Inspiration of Others: CSS

10     Defining Selectors

     Constructing Selectors

     Selecting Elements by Name

     Selecting Elements by ID or Class

     Selecting Elements by Context

     Selecting Part of an Element

     Selecting Link Elements Based on Their State

     Selecting Elements Based on Attributes

     Specifying Groups of Elements

     Combining Selectors

11     Formatting Text with Styles

     Choosing a Font Family

     Specifying Alternate Fonts

     Creating Italics

     Applying Bold Formatting

     Setting the Font Size

     Setting the Line Height

     Setting All Font Values at Once

     Setting the Color

     Changing the Text’s Background

     Controlling Spacing between Words and Letters

     Adding Indents

     Setting White Space Properties

     Controlling Word Wrapping

     Aligning Text

     Changing the Text Case

     Using Small Caps

     Decorating Text

     Adding a Shadow to Text

12     Adding a Custom Web Font

     About Web Fonts

     Finding a Web Font

     Adding a Web Font to a Style Sheet

     Testing a Web Font

13     Layout with Styles

     Structuring Your Pages

     The Box Model

     Changing the Background

     Using Multiple Background Images

     Setting the Height or Width for an Element

     Setting the Margins around an Element

     Adding Padding around an Element

     Offsetting Elements In the Natural Flow

     Positioning Elements Absolutely

     Affixing an Element to the Browser Window

     Making Elements Float

     Controlling Where Elements Float

     Positioning Elements in "3D"

     Setting the Border

     Changing the Cursor

     Determining Where Overflow Should Go

     Aligning Elements Vertically

14     Enhancements with CSS3

     Making an Element Semi-transparent

     Changing the Opacity of an Element

     Adding Rounded Corners to an Element

     Adding a Drop Shadow to an Element

     Adding a Linear Gradient to an Element

     Adding a Radial Gradient to an Element

15     Dynamic Effects with Styles

     Displaying and Hiding Elements

     Creating Rollover Buttons

     Creating Drop-Down Menus with Lists

     Replace an Element's Content with an Image

16     Style Sheets for Printing

     Creating a Style Sheet for Print

     How Print Style Sheets Differ

     Controlling Page Breaks

     Printing Link URLs

     Controlling Widows and Orphans

17     Style Sheets for Mobile and Tablets

     Mobilize vs. Miniaturize

     Looking at Your Site

     HTML and CSS for Mobile

     Creating Style Sheets for Mobile

     Targeting Screen Sizes with Media Queries

     Adjusting Layout for the iPhone and iPad

     Hiding Extraneous Elements

     Creating and Using an Image Header

     Creating Extra Links to the Top

     A Look at Responsive Web Design

18     Lists

     Creating Ordered and Unordered Lists

     Choosing Your Markers (Bullets)

     Choosing Where to Start List Numbering

     Using Custom Markers

     Controlling Where Markers Hang

     Setting All List-Style Properties at Once

     Creating Definition Lists

     Styling Nested Lists

19     Forms

     About New Form Inputs in HTML5

     Creating a Form

     Processing Forms

     Sending Form Data via E-mail

     Organizing the Form Elements

     Creating Text Boxes

     Creating Password Boxes

     Formally Labeling Form Parts

     Creating Radio Buttons

     Creating Menus

     Creating Checkboxes

     Creating Larger Text Areas

     Allowing Visitors to Upload Files

     Creating Hidden Fields

     Creating the Submit Button

     Resetting the Form

     Using an Image to Submit Data

     Setting the Tab Order in a Form

     Adding Keyboard Shortcuts

     Disabling Form Elements

     Keeping Elements from Being Changed

     Creating Search Boxes

     Creating Range Sliders

     Creating Number Range Boxes

     Creating Phone Number Boxes

     Creating Date Boxes

20     Video, Audio, and other Multimedia

     About HTML5 and Video

     Of Plugins and Players

     Adding an HTML5 Video Player

     Displaying Fallback Players if HTML5 isn't Available

     Adding an HTML5 Audio Player

     Getting Multimedia Files

     Linking to Multimedia Files

     Embedding QuickTime Movies for Windows

     Embedding QuickTime Movies for Everyone besides IE

     Embedding QuickTime Movies for All

     Using JavaScript to Call a Movie

     Scaling a QuickTime Movie

     Changing the Movie’s Background Color

     Looping a QuickTime Movie

     Offering a Preview Movie

     Adding Attributes to Secondary Movies

     Offering a Sequel

     Embedding MP3 Audio on a Page

     Embedding Windows Media, Part 1

     Embedding Windows Media, Part 2

     Embedding Flash

     Embedding YouTube Video

     Embedding Other Multimedia Files

21     Tables

     Creating a Simple Table

     Adding a Border

     Setting the Width

     Centering a Table

     Wrapping Text around a Table

     Combining Tables

     Aligning a Cell’s Contents

     Changing the Background

     Controlling the Space

     Spanning a Cell across Columns

     Spanning a Cell across Rows

     Dividing Your Table into Column Groups

     Dividing the Table into Horizontal Sections

     Choosing Which Borders to Display

     Controlling Line Breaks in a Cell

     Speeding up Table Display

22     Scripts

     Adding an “Automatic” Script

     Calling an External Automatic Script

     Adding Alternate Information

23     Symbols and Non-English Characters

     About Character Encodings

     Declaring Your Page’s Character Encoding

     Declaring a Style Sheet’s Encoding

     Saving Your Page with the Proper Encoding

     Editing a Page with the Proper Encoding

     Adding Characters from Outside the Encoding

     Specifying A Page’s Language

24     Testing and Debugging Web Pages

     Some Debugging Techniques

     Check the Easy Stuff First!

     Checking the Easy Stuff: HTML

     Checking the Easy Stuff: CSS

     Validating Your Code

     Testing Your Page

     When Images Don’t Appear

     Differences from Browser to Browser

     Still Stuck?

25     Publishing Your Pages on the Web

     Finding a Host for Your Site

     Getting Your Own Domain Name

     Transferring Files to the Server

     Appendix A: HTML Reference

     Appendix B: CSS Properties and Values

     Appendix C: Events

     Appendix D: HTML Symbols and Characters

     Index