You are previewing Sams Teach Yourself HTML, CSS & JavaScript Web Publishing in One Hour a Day, Covering HTML5, CSS3, and jQuery, Seventh Edition.
O'Reilly logo
Sams Teach Yourself HTML, CSS & JavaScript Web Publishing in One Hour a Day, Covering HTML5, CSS3, and jQuery, Seventh Edition

Book Description

Thoroughly revised and updated with examples rewritten to conform to HTML5, CSS3, and contemporary web development practices, this easy-to-understand, step-by-step tutorial helps you quickly master the basics of HTML and CSS before moving on to more advanced topics such as graphics, video, and interactivity with JavaScript.

In just one hour a day, you’ll learn the skills you need to design, create, and maintain a professional-looking website.

  • No previous experience required. By following each short, one-hour lesson in this book, anyone can learn the basics of web development.

  • Learn at your own pace. You can work through each lesson sequentially to make sure you thoroughly understand all the concepts and methodologies, or you can focus on specific lessons to learn the techniques that interest you most.

  • Test your knowledge. Each lesson ends with a Workshop section filled with questions, answers, and exercises for further study.

  • Learn how to...

  • Fully implement the HTML5 and CSS3 standards

  • Work with text and create links

  • Add images and graphics to your page

  • Use CSS to style a site and position elements on a page

  • Structure a page with HTML5

  • Use responsive web design to make your pages look good on different-sized screens

  • Use JavaScript to add dynamic elements and interactivity on your pages

  • Leverage jQuery to add JavaScript features to your pages

  • Design for the mobile web

  • Get your site online and let people know it’s there

  • Optimize your site for search engines

  • Table of Contents

    1. About This E-Book
    2. Title Page
    3. Copyright Page
    4. Contents at a Glance
    5. Table of Contents
    6. About the Authors
    7. We Want to Hear from You!
    8. Reader Services
    9. Introduction
      1. Who Should Read This Book
      2. What This Book Contains
      3. What You Need Before You Start
      4. Conventions Used in This Book
        1. Special Elements
        2. HTML Input and Output Examples
        3. Special Fonts
        4. Workshop
    10. Part I: Getting Started
      1. Lesson 1. What Is Web Publishing?
        1. Thinking Like a Web Publisher
          1. The Web Is a Hypertext Information System
          2. The Web Is Cross-Platform
          3. The Web Is Distributed
          4. The Web Is Dynamic
          5. The Web Is Interactive
        2. Web Browsers
          1. What the Browser Does
          2. An Overview of Some Popular Browsers
        3. Web Servers
        4. Uniform Resource Locators
        5. Defining Web Publishing Broadly
        6. Summary
        7. Workshop
          1. Q&A
          2. Quiz
          3. Quiz Answers
          4. Exercises
      2. Lesson 2. Getting Your Tools in Order
        1. Anatomy of a Website
        2. Setting Up Your Computer for Web Publishing
          1. Text Editors
          2. A Web Browser
        3. Using the Google Chrome Developer Tools
        4. What Do You Want to Do on the Web?
        5. Wireframing Your Website
          1. What’s Wireframing, and Why Do I Need It?
          2. Hints for Wireframing
        6. Web Hosting
          1. Using a Content-Management Application
          2. Setting Up Your Own Web Hosting
        7. Summary
        8. Workshop
          1. Q&A
          2. Quiz
          3. Quiz Answers
          4. Exercises
      3. Lesson 3. Introducing HTML and CSS
        1. What HTML Is (And What It Isn’t)
          1. HTML Describes the Structure of a Page
          2. HTML Does Not Describe Page Layout
          3. Why It Works This Way
          4. How Markup Works
        2. What HTML Files Look Like
          1. Text Formatting and HTML
        3. HTML Attributes
        4. Using the style Attribute
          1. Including Styles in Tags
        5. A Short History of HTML Standards
          1. XHTML
        6. The Current and Evolving Standard: HTML5
        7. Summary
        8. Workshop
          1. Q&A
          2. Quiz
          3. Quiz Answers
          4. Exercises
    11. Part II: Creating Web Pages
      1. Lesson 4. Learning the Basics of HTML
        1. Structuring Your HTML
          1. The <html> Tag
          2. The <head> Tag
          3. The <body> Tag
        2. The Title
        3. Headings
        4. Paragraphs
        5. Comments
        6. Summary
        7. Workshop
          1. Q&A
          2. Quiz
          3. Quiz Answers
          4. Exercises
      2. Lesson 5. Organizing Information with Lists
        1. Lists: An Overview
        2. Numbered Lists
          1. Customizing Ordered Lists
        3. Unordered Lists
          1. Customizing Unordered Lists
        4. Definition Lists
        5. Nesting Lists
        6. Other Uses for Lists
        7. Summary
        8. Workshop
          1. Q&A
          2. Quiz
          3. Quiz Answers
          4. Exercises
      3. Lesson 6. Working with Links
        1. Creating Links
          1. The Link Tag: <a>
        2. Linking Local Pages Using Relative and Absolute Pathnames
          1. Absolute Pathnames
          2. Should You Use Relative or Absolute Pathnames?
        3. Links to Other Documents on the Web
        4. Linking to Specific Places Within Documents
          1. Creating Links and Anchors
          2. The name Attribute of the <a> Tag
          3. Linking to Elements in the Same Document
        5. Anatomy of a URL
          1. Parts of URLs
          2. Special Characters in URLs
          3. The rel Attribute
        6. Kinds of URLs
          1. HTTP
          2. Anonymous FTP
          3. Non-Anonymous FTP
          4. Mailto
          5. File
        7. Summary
        8. Workshop
          1. Q&A
          2. Quiz
          3. Quiz Answers
          4. Exercises
    12. Part III: Doing More with HTML and CSS
      1. Lesson 7. Formatting Text with HTML and CSS
        1. Character-Level Elements
          1. Semantic HTML Tags
          2. Changes to Physical Style Tags in HTML5
        2. Character Formatting Using CSS
          1. The Text Decoration Property
          2. Font Properties
        3. Preformatted Text
        4. Horizontal Rules (or Thematic Breaks)
          1. Attributes of the <hr> Tag
        5. Line Break
        6. Addresses
        7. Quotations
        8. Special Characters
          1. Character Encoding
          2. Character Entities for Special Characters
          3. Character Entities for Reserved Characters
        9. Fonts and Font Sizes
        10. Summary
        11. Workshop
          1. Q&A
          2. Quiz
          3. Quiz Answers
          4. Exercises
      2. Lesson 8. Using CSS to Style a Site
        1. Including Style Sheets in a Page
          1. Creating Page-Level Styles
          2. Creating Sitewide Style Sheets
        2. Selectors
          1. Contextual Selectors
          2. Classes and IDs
          3. What Cascading Means
        3. Units of Measure
          1. Specifying Colors
        4. Editing Styles with Developer Tools
        5. Using Color
        6. Links
        7. The Box Model
          1. Borders
          2. Margins and Padding
          3. Controlling Size and Element Display
          4. Float
        8. More Selectors
          1. Pseudo-Classes
          2. Attribute Selectors
        9. The <body> Tag
        10. Summary
        11. Workshop
          1. Q&A
          2. Quiz
          3. Quiz Answers
          4. Exercises
      3. Lesson 9. Using Images on Your Web Pages
        1. Images on the Web
        2. Image Formats
          1. GIF
          2. JPEG
          3. PNG
          4. SVG
            1. Inline Images in HTML: The <img> Tag
            2. Adding Alternative Text to Images
          5. Images and Text
            1. Text and Image Alignment
            2. Wrapping Text Next to Images
            3. Adjusting the Space Around Images
        3. Images and Links
        4. Other Neat Tricks with Images
          1. Image Dimensions and Scaling
        5. Image Backgrounds
        6. Using Images as Bullets
        7. What Is an Imagemap?
          1. Getting an Image
          2. Determining Your Coordinates
          3. The <map> and <area> Tags
          4. The usemap Attribute
        8. Image Etiquette
        9. Summary
        10. Workshop
          1. Q&A
          2. Quiz
          3. Quiz Answers
          4. Exercises
      4. Lesson 10. Building Tables
        1. Creating Tables
        2. Table Parts
          1. The <table> Element
          2. Summarizing the Table
          3. Rows and Cells
          4. Empty Cells
          5. Captions
        3. Sizing Tables, Borders, and Cells
          1. Setting Table Widths
          2. Changing Table Borders
          3. Cell Padding
          4. Cell Spacing
          5. Column Widths
        4. Table and Cell Color
        5. Aligning Your Table Content
          1. Table Alignment
          2. Cell and Caption Alignment
        6. Spanning Multiple Rows or Columns
        7. More Advanced Table Enhancements
          1. Grouping and Aligning Columns
          2. Grouping and Aligning Rows
        8. How Tables Are Used
        9. Summary
        10. Workshop
          1. Q&A
          2. Quiz
          3. Quiz Answers
          4. Exercises
      5. Lesson 11. Using CSS to Position Elements on the Page
        1. Positioning Schemes
          1. Relative Positioning
        2. Absolute Positioning
          1. Positioning Properties
          2. Positioning Properties and Height and Width
          3. Nesting Absolutely Positioned Elements
          4. Dynamic Overlays
        3. Fixed Positioning
        4. Controlling Stacking
        5. Creating Drop-Down Menus
        6. Summary
        7. Workshop
          1. Q&A
          2. Quiz
          3. Quiz Answers
          4. Exercises
      6. Lesson 12. Designing Forms
        1. Understanding Form and Function
        2. Using the <form> Tag
        3. Using the <label> Tag
        4. Creating Form Controls with the <input> Tag
          1. Creating Text Controls
          2. Adding Options to Text Fields with datalist
          3. Using the New HTML5 Controls
          4. Creating Password Controls
          5. Creating Submit Buttons
          6. Creating Reset Buttons
          7. Creating Check Box Controls
          8. Creating Radio Buttons
          9. Using Images as Submit Buttons
          10. Creating Generic Buttons
          11. Hidden Form Fields
          12. The File Upload Control
        5. Using Other Form Controls
          1. Using the button Element
          2. Creating Large Text-Entry Fields with textarea
          3. Creating Menus with select and option
        6. Grouping Controls with fieldset and legend
          1. Changing the Default Form Navigation
          2. Using Access Keys
          3. Creating disabled and readonly Controls
        7. Displaying Updates with progress and meter
        8. Applying Cascading Style Sheet Properties to Form Elements
        9. Planning Your Forms
        10. Summary
        11. Workshop
          1. Q&A
          2. Quiz
          3. Quiz Answers
          4. Exercises
      7. Lesson 13. Structuring a Page with HTML5
        1. A Short History of HTML Page Layout
        2. Laying Out a Page in HTML5
        3. HTML5 Structural Tags
          1. Sections
          2. Header
          3. Footer
          4. Navigation
          5. Articles
          6. Asides
        4. The Page Outline
          1. Elements with Their Own Outlines
        5. Using HTML5 Structural Elements
          1. Polyfill Scripts
        6. Summary
        7. Workshop
          1. Q&A
          2. Quiz
          3. Quiz Answers
          4. Exercise
      8. Lesson 14. Integrating Multimedia: Video and Sound
        1. Embedding Video the Simple Way
          1. Advantages and Disadvantages of Hosting Videos on External Sites
          2. Uploading Videos to YouTube
          3. Customizing the Video Player
          4. Other Services
        2. Hosting Your Own Video
          1. Video and Container Formats
          2. Converting Video to H.264
        3. Embedding Video Using <video>
          1. The <video> Tag
          2. Using the <source> Element
        4. Embedding Flash Using the <object> Tag
          1. Alternative Content for the <object> Tag
        5. The <embed> Tag
        6. Embedding Flash Movies Using SWFObject
        7. Flash Video Players
          1. JW Player
          2. Using Flowplayer
          3. Using the <object> Tag with the <video> Tag
        8. Embedding Audio in Your Pages
          1. The <audio> Tag
          2. Flash Audio Players
        9. Summary
        10. Workshop
          1. Q&A
          2. Quiz
          3. Quiz Answers
          4. Exercises
      9. Lesson 15. Advanced CSS: Page Layout in CSS
        1. Laying Out the Page
          1. The Problems with Layout Tables
          2. Writing HTML with Structure
          3. Writing a Layout Style Sheet
          4. The Floated Columns Layout Technique
        2. The Role of CSS in Web Design
          1. Style Sheet Organization
          2. Site-Wide Style Sheets
        3. Summary
        4. Workshop
          1. Q&A
          2. Quiz
          3. Quiz Answers
          4. Exercises
      10. Lesson 16. Using Responsive Web Design
        1. What Is Responsive Web Design?
          1. History of Responsive Web Design
          2. Why RWD Is Important
          3. RWD Is More Than Just Changing the Number of Columns
        2. Mobile Devices Should Come First
          1. Mobile First
          2. Affecting the Viewport
        3. Planning a Responsive Website
          1. Check Your Analytics
          2. Try the Site with Your Own Phone
          3. Decide What Content Is Critical
        4. Writing Media Queries
          1. Media Types
          2. Media Features
          3. Breakpoints
          4. Building a Style Sheet with Media Queries
        5. Understanding the Mechanics of RWD
          1. Adjusting the Layout
          2. Making Images and Videos Responsive
          3. Building Responsive Tables
        6. Responsive Web Design Best Practices
          1. Give Everyone the Best Experience
          2. Use the Best Breakpoints for Your Website, Not for Devices
          3. Be Flexible But Think Small
        7. Summary
        8. Workshop
          1. Q&A
          2. Quiz
          3. Quiz Answers
          4. Exercises
    13. Part IV: Using JavaScript and jQuery
      1. Lesson 17. Introducing JavaScript
        1. Why Would You Want to Use JavaScript?
          1. Ease of Use
          2. Improving Performance
          3. Integration with the Browser
        2. The <script> Tag
          1. The Structure of a JavaScript Script
          2. The src Attribute
        3. JavaScript and the Chrome Development Tools
        4. The JavaScript Language
          1. Operators and Expressions
          2. Variables
          3. Control Structures
          4. Functions
          5. Data Types
          6. Arrays
          7. Objects
        5. The JavaScript Environment
        6. Events
        7. Summary
        8. Workshop
          1. Q&A
          2. Quiz
          3. Quiz Answers
          4. Exercises
      2. Lesson 18. Using jQuery
        1. What Are JavaScript Libraries?
        2. Getting Started with jQuery
        3. Your First jQuery Script
        4. Selecting Elements from the Document
        5. Binding Events
        6. Modifying Styles on the Page
          1. Hiding and Showing Elements
          2. Retrieving and Changing Style Sheet Properties
        7. Modifying Content on the Page
          1. Manipulating Classes
          2. Manipulating Form Values
          3. Manipulating Attributes Directly
          4. Adding and Removing Content
        8. Special Effects
        9. AJAX and jQuery
          1. Using AJAX to Load External Data
        10. Summary
        11. Workshop
          1. Q&A
          2. Quiz
          3. Quiz Answers
          4. Exercises
      3. Lesson 19. Using JavaScript in Your Pages
        1. Validating Forms with JavaScript
        2. Hiding and Showing Content
          1. The Same Code with jQuery
        3. Adding New Content to a Page
        4. Summary
        5. Workshop
          1. Q&A
          2. Quiz
          3. Quiz Answers
          4. Exercises
      4. Lesson 20. Working with Frames and Linked Windows
        1. What Are Frames?
          1. Why Were Frames Removed from HTML5?
          2. What About Iframes?
        2. Working with Linked Windows
          1. Browsing Context Keywords
          2. The <base> Tag
        3. Inline Frames
        4. Opening Linked Windows with JavaScript
        5. Summary
        6. Workshop
          1. Q&A
          2. Quiz
          3. Quiz Answers
          4. Exercises
    14. Part V: Designing for Everyone
      1. Lesson 21. Designing for the Mobile Web
        1. People Browse Differently on Mobile Phones
        2. Standards Compliance and the Mobile Web
          1. Progressive Enhancement
          2. Validating Your Pages
        3. Writing for the Mobile Web
          1. Write Clearly and Be Brief
          2. Organize Your Pages for Quick Scanning
          3. Make Each Page Stand on Its Own
          4. Be Careful with Emphasis
          5. Don’t Use Browser-Specific Terminology
          6. Spell Check and Proofread Your Pages
        4. Design and Page Layout
          1. Use Headings as Headings
          2. Group Related Information Visually
          3. Use a Consistent Layout
        5. Using Links
          1. Mobile Users Tap; They Don’t Click
          2. Use Link Menus with Descriptive Text
          3. Use Links in Text
          4. Avoid the “Here” Syndrome
          5. To Link or Not to Link
        6. Using Images and Multimedia
          1. Don’t Overuse Images
          2. Keep Images Small
          3. Watch Out for Assumptions About Your Visitors’ Hardware
          4. Don’t Make Your Videos Annoying
          5. Avoid Flash
        7. Making the Most of CSS and JavaScript
          1. Put Your CSS and JavaScript in External Files
          2. Location Matters
          3. Shrink Your CSS and JavaScript
        8. Take Advantage of Mobile Features
          1. Geolocation
          2. Make Phone Calls
          3. SMS
        9. Other Good Habits and Hints for Mobile Web Design
          1. Link Back to Home
          2. Don’t Split Topics Across Pages
          3. Sign Your Pages
          4. One Final Secret to Mobile Web Design
        10. Summary
        11. Workshop
          1. Q&A
          2. Quiz
          3. Quiz Answers
          4. Exercises
      2. Lesson 22. Designing for User Experience
        1. Considering User Experience Level
          1. Add a Search Engine
          2. Use Concise, Sensible URLs
          3. Navigation Provides Context
          4. Are Your Users Tourists or Regulars?
        2. Determining User Preferences
        3. What Is Accessibility?
          1. Common Myths Regarding Accessibility
          2. Section 508
        4. Alternative Browsers
        5. Writing Accessible HTML
          1. Tables
          2. Links
          3. Images and Multimedia
        6. Designing for Accessibility
          1. Using Color
          2. Fonts
          3. Take Advantage of All HTML Tags
          4. Frames
          5. Forms
        7. Validating Your Sites for Accessibility
        8. Summary
        9. Workshop
          1. Q&A
          2. Quiz
          3. Quiz Answers
          4. Exercises
    15. Part VI: Going Live on the Web
      1. Lesson 23. How to Publish Your Site
        1. What Does a Web Server Do?
          1. Other Things Web Servers Do
        2. How to Find Web Hosting
          1. Using a Web Server Provided by Your School or Work
          2. Using a Commercial Web Host
          3. Commercial Web Builders
          4. Setting Up Your Own Server
          5. Free Hosting
        3. Organizing Your HTML Files for Publishing
          1. Questions to Ask Your Webmaster
          2. Keeping Your Files Organized with Directories
          3. Having a Default Index File and Correct Filenames
        4. Publishing Your Files
          1. Moving Files Between Systems
        5. Troubleshooting
          1. I Can’t Access the Server
          2. I Can’t Access Files
          3. I Can’t Access Images
          4. My Links Don’t Work
          5. My Files Are Being Displayed Incorrectly
        6. Promoting Your Web Pages
          1. Getting Links from Other Sites
          2. Content Marketing Through Guest Posting
          3. Promoting Your Site Through Social Media
          4. Creating a Facebook Page for Your Site
          5. Site Indexes and Search Engines
          6. Business Cards, Letterhead, Brochures, and Advertisements
        7. Finding Out Who’s Viewing Your Web Pages
          1. Log Files
          2. Google Analytics
        8. Summary
        9. Workshop
          1. Q&A
          2. Quiz
          3. Quiz Answers
          4. Exercises
      2. Lesson 24. Taking Advantage of the Server
        1. How PHP Works
        2. Getting PHP to Run on Your Computer
        3. The PHP Language
          1. Comments
          2. Variables
          3. Arrays
          4. Strings
          5. Conditional Statements
          6. PHP Conditional Operators
        4. Loops
          1. foreach Loops
          2. for Loops
          3. while and do...while Loops
          4. Controlling Loop Execution
        5. Built-In Functions
        6. User-Defined Functions
          1. Returning Values
        7. Processing Forms
          1. Handling Parameters with Multiple Values
          2. Presenting the Form
        8. Using PHP Includes
          1. Choosing Which Include Function to Use
        9. Expanding Your Knowledge of PHP
          1. Database Connectivity
          2. Regular Expressions
          3. Sending Mail
          4. Object-Oriented PHP
          5. Cookies and Sessions
          6. File Uploads
        10. Other Application Platforms
          1. Microsoft ASP.NET
          2. Java EE
          3. Ruby on Rails
        11. Summary
        12. Workshop
          1. Q&A
          2. Quiz
          3. Quiz Answers
          4. Exercises
      3. Lesson 25. Search Engines and SEO
        1. What Is SEO?
          1. Why You Need SEO
          2. What About Social Media?
          3. You Can Do Your Own SEO
          4. Why Don’t Search Engines Find Sites Without SEO?
        2. How Search Engines Work
          1. Google
          2. Microsoft Bing
          3. Yahoo!
          4. Don’t Forget International Searches
        3. SEO Techniques
          1. Is Your Site “Friendly?”
          2. Using Keywords and Keyword Research
          3. Creating Content for Customers Is the Best SEO
          4. Myths and Facts About SEO
        4. Tools for Tracking and Managing SEO
          1. Using Sitemaps
          2. The robots.txt File
          3. Understanding Canonical Links
          4. Redirecting Duplicate Content
          5. Checking How Your Site Looks to Search Engines
          6. Tracking Your SEO Efforts
        5. Paying for Links
        6. Summary
        7. Workshop
          1. Q&A
          2. Quiz
          3. Quiz Answers
          4. Exercises
    16. Index
    17. Code Snippets