Sams Teach Yourself HTML & CSS in 24 Hours

cover of Sams Teach Yourself HTML & CSS in 24 HoursThe following information is for the 9th edition, published in December 2013.

This edition is a long-awaited update to the 8th edition published in 2010. Three years is a long time—long enough for the HTML5 recommendation to settle down a little bit and for browsers to increase support for some of the useful (& cool) things that HTML5 has to offer.

While the structure of the book is generally the same as the previous edition, lessons have been beefed up a bit (or added altogether) to ensure coverage of HTML5 semantic elements, HTML5 form input types and validation, CSS3 transforms, transitions, and animations, plus a little bit about the dynamic web sites (a wee bit of JavaScript is included) and HTML5 application development and frameworks. To be clear, these are not lengthy lessons—as with all of my books the information you learn will provide a solid foundation for taking the next step of many as you work your way toward mastery.

The goal of this book is to give you a taste of many of the skills you will need to create a modern, standards-compliant web site using HTML5 and CSS3. The purely technical stuff is not enough, so this book also includes advice for setting up your own domain, uploading with FTP software, and even a little bit about using GitHub (among other things), all in enough depth to get you beyond the snags that often frustrate beginners.

Previous Editions:

  • 8th ed. ISBN 0672330970, © Sams 2010. Translations: Chinese (Simplified), Greek, Hungarian. Get source code at GitHub.

Table of Contents

This table of contents reflects the sub-headings within each hour/lesson. Each hour/lesson also has a summary, quiz questions, and one or more activities for you to try on your own.

» PART I: GETTING STARTED ON THE WEB

Hour 1: Understanding How the Web Works

  • A Brief History of HTML and the World Wide Web
  • The Scoop on HTML, XML, XHTML, and HTML 5
  • Creating Web Content
  • Understanding Web Content Delivery
  • Selecting a Web Hosting Provider
  • Testing with Multiple Web Browsers
  • Creating a Sample File
  • Using FTP to Transfer Files
  • Distributing Content without a Web Server
  • Tips for Testing Web Content

Hour 2: Structuring an HTML Document

  • Getting Started with a Simple Web Page
  • HTML Tags Every Page Must Have
  • Organizing a Page with Paragraphs and Line Breaks
  • Organizing Your Content with Headings
  • Understanding Semantic Elements
  • Validating Your HTML

Hour 3: Understanding Cascading Style Sheets

  • How CSS Works
  • A Basic Style Sheet
  • A CSS Style Primer
  • Using Style Classes
  • Using Style IDs
  • Internal Style Sheets and Inline Styles

» PART II: BUILDING BLOCKS OF PRACTICAL WEB DESIGN

Hour 4: A Closer Look at HTML5 Page Structure

  • Conceptualizing the Page
  • Using <header> in Multiple Ways
  • Understanding <section>
  • Using <article>
  • Implementing <nav>
  • When to Use <aside>
  • Effective Use of <footer>

Hour 5: Working with Text Blocks and Lists

  • Aligning Text on a Page
  • The Three Types of HTML Lists
  • Placing Lists Within Lists

Hour 6: Working with Fonts

  • Working with Special Characters
  • Boldface, Italics, and Special Text Formatting
  • Using Text Effects
  • Tweaking the Font
  • Using Web Fonts

Hour 7: Working with Colors and Borders

  • Best Practices for Choosing Colors
  • Understanding Web Colors
  • Using Hexadecimal Values for Colors
  • Using CSS to Set Background, Text, and Border Colors
  • Creating Rounded Corners

Hour 8: Using External and Internal Links

  • Using Web Addresses
  • Linking Within a Page Using Anchors
  • Linking Between Your Own Web Content
  • Linking to External Web Content
  • Linking to an Email Address
  • Opening a Link in a New Browser Window
  • Using CSS to Style Hyperlinks

Hour 9: Using Tables and Columns

  • Creating a Simple Table
  • Controlling Table Sizes
  • Alignment and Spanning Within Tables
  • Avoiding Page Layout with Tables
  • Using CSS3 Columns

Hour 10: Creating Images for Use on the Web

  • Choosing Graphics Software
  • The Least You Need to Know About Graphics
  • Preparing Photographic Images
  • Creating Banners and Buttons
  • Reducing or Removing Colors in an Image
  • Creating Tiled Background Images
  • Creating Animated Web Graphics

Hour 11: Using Images in Your Web Site

  • Placing Images on a Web Page
  • Describing Images with Text
  • Specifying Image Height and Width
  • Aligning Images
  • Turning Images into Links
  • Using Background Images
  • Using Imagemaps

Hour 12: Using Multimedia in Your Web Site

  • Linking to Multimedia Files
  • Embedding Multimedia Files the Old Way
  • Using HTML5 for Audio and Video Playback
  • Additional Tips for Using Multimedia

» PART III: ADVANCED WEB PAGE DESIGN WITH CSS

Hour 13: Working with Margins, Padding, Alignment, and Floating

  • Using Margins
  • Padding Elements
  • Keeping Everything Aligned
  • Understanding the Float Property

Hour 14: Understanding the CSS Box Model and Positioning

  • The CSS Box Model
  • The Whole Scoop on Positioning
  • Controlling the Way Things Stack Up
  • Managing the Flow of Text

Hour 15: Creating Fixed or Liquid Layouts

  • Understanding Fixed Layouts
  • Understanding Liquid Layouts
  • Creating a Fixed/Liquid Hybrid Layout
  • Considering Responsive Web Design

Hour 16: Using CSS to Do More with Lists

  • HTML List Refresher
  • How the CSS Box Model Affects Lists
  • Placing List Item Indicators
  • Creating Image Maps with List Items and CSS

Hour 17: Using CSS to Design Navigation

  • How Navigation Lists Differ from Regular Lists
  • Creating Vertical Navigation with CSS
  • Creating Horizontal Navigation with CSS

Hour 18: Using Mouse Actions to Modify Text Display

  • Creating a Tool Tip with CSS
  • Displaying Additional Rollover Text with CSS
  • Accessing Events
  • Using onclick to Change <div> Appearance

Hour 19: Implementing CSS3 Transforms, Transitions, and Animations

  • Accounting for Browser Differences
  • Using 2D Transforms
  • Using 3D Transforms
  • Implementing CSS3 Transitions
  • Getting Started with CSS3 Animations

» PART IV: ADVANCED WEB SITE FUNCTIONALITY AND MANAGEMENT

Hour 20: Creating Print-Friendly Web Pages

  • What Makes a Page Print-Friendly?
  • Applying a Media-Specific Style Sheet
  • Designing a Style Sheet for Print Pages
  • Viewing a Web Page in Print Preview

Hour 21: Understanding Dynamic Web Sites and HTML5 Applications

  • Understanding the Different Types of Scripting
  • Including JavaScript in HTML
  • Displaying Random Content
  • Understanding the Document Object Model
  • Changing Images Based on User Interaction
  • Thinking Ahead to Developing HTML5 Applications

Hour 22: Working with Web-Based Forms

  • How HTML Forms Work
  • Creating a Form
  • Accepting Text Input
  • Naming Each Piece of Form Data
  • Including Hidden Data in Forms
  • Exploring Form Input Controls
  • Using HTML5 Form Validation
  • Submitting Form Data

Hour 23: Organizing and Managing a Web Site

  • When One Page Is Enough
  • Organizing a Simple Site
  • Organizing a Larger Site
  • Writing Maintainable HTML Code
  • Thinking About Version Control
  • Using HTML and CSS Frameworks

Hour 24: Helping People Find Your Web Pages

  • Publicizing Your Web Site
  • Listing Your Pages with the Major Search Sites
  • Providing Hints for Search Engines
  • Additional Tips for Search Engine Optimization