Sams Teach Yourself HTML, CSS & JavaScript Web Publishing in One Hour a Day

ptg

Introduction

1 What Is Web Publishing? PART I: Getting Started

2 Getting Your Tools in Order

3 Introducing HTML and CSS

4 Learning the Basics of HTML PART II: Creating Web Pages

5 Organizing Information with Lists

6 Working with Links

7 Formatting Text with HTML and CSS PART III: Doing More with HTML and CSS

8 Using CSS to Style a Site

9 Using Images on Your Web Pages

10 Building Tables

11 Using CSS to Position Elements on the Page

12 Designing Forms

13 Structuring a Page with HTML5

14 Integrating Multimedia: Video and Sound

15 Advanced CSS: Page Layout in CSS

16 Using Responsive Web Design

17 Introducing JavaScript PART IV: Using JavaScript and jQuery

18 Using jQuery

19 Using JavaScript in Your Pages

20 Working with Frames and Linked Windows

21 Designing for the Mobile Web PART V: Designing for Everyone

22 Designing for User Experience

23 How to Publish Your Site PART VI: Going Live on the Web

24 Taking Advantage of the Server

25 Search Engines and SEO

Index

ptg

Introduction Table of Contents

LESSON 1: What Is Web Publishing? PART I: Getting Started

Thinking Like a Web Publisher

The Web Is a Hypertext Information System

The Web Is Cross-Platform

The Web Is Distributed

The Web Is Dynamic

The Web Is Interactive

Web Browsers

What the Browser Does

An Overview of Some Popular Browsers

Web Servers

Uniform Resource Locators

Defining Web Publishing Broadly

Summary

Workshop

Q&A

Quiz

Quiz Answers

Exercises

LESSON 2: Getting Your Tools in Order

Anatomy of a Website

Setting Up Your Computer for Web Publishing

Text Editors

A Web Browser

Using the Google Chrome Developer Tools

What Do You Want to Do on the Web?

Wireframing Your Website

What’s Wireframing, and Why Do I Need It?

Hints for Wireframing

ptg

Web Hosting

Using a Content-Management Application

Setting Up Your Own Web Hosting

Summary

Workshop

Q&A

Quiz

Quiz Answers

Exercises

LESSON 3: Introducing HTML and CSS

What HTML Is (And What It Isn’t)

HTML Describes the Structure of a Page

HTML Does Not Describe Page Layout

Why It Works This Way

How Markup Works

What HTML Files Look Like

Text Formatting and HTML

HTML Attributes

Using the style Attribute

Including Styles in Tags

A Short History of HTML Standards

XHTML

The Current and Evolving Standard: HTML5

Summary

Workshop

Q&A

Quiz

Quiz Answers

Exercises

LESSON 4: Learning the Basics of HTML PART II: Creating Web Pages

Structuring Your HTML........................................................................................

The Tag

ptg

The Title vi Sams Teach Yourself HTML, CSS & JavaScript Web Publishing in One Hour a Day

Headings

Paragraphs

Comments

Summary

Workshop

Q&A

Quiz

Quiz Answers

Exercises

LESSON 5: Organizing Information with Lists

Lists: An Overview

Numbered Lists

Customizing Ordered Lists

Unordered Lists

Customizing Unordered Lists

Definition Lists

Nesting Lists

Other Uses for Lists

Summary

Workshop

Q&A

Quiz

Quiz Answers

Exercises

LESSON 6: Working with Links

Creating Links

The Link Tag:

Linking Local Pages Using Relative and Absolute Pathnames

Absolute Pathnames

Should You Use Relative or Absolute Pathnames?

Links to Other Documents on the Web

Linking to Specific Places Within Documents

Creating Links and Anchors

The name Attribute of the Tag

Linking to Elements in the Same Document

ptg

Anatomy of a URL Contents vii

Parts of URLs...........................................................................................

Special Characters in URLs

LESSON 7: Formatting Text with HTML and CSS PART III: Doing More with HTML and CSS

Character-Level Elements

Semantic HTML Tags

Changes to Physical Style Tags in HTML5

Character Formatting Using CSS

The Text Decoration Property

Font Properties

Preformatted Text

Horizontal Rules (or Thematic Breaks)

Character Entities for Special Characters

Character Entities for Reserved Characters

ptg

Fonts and Font Sizes........................................................................................... viii Sams Teach Yourself HTML, CSS & JavaScript Web Publishing in One Hour a Day

LESSON 8: Using CSS to Style a Site

Including Style Sheets in a Page

Creating Page-Level Styles

Creating Sitewide Style Sheets

Specifying Colors......................................................................................

Editing Styles with Developer Tools

Controlling Size and Element Display

LESSON 9: Using Images on Your Web Pages

Inline Images in HTML: The Tag

Adding Alternative Text to Images

Images and Text

Text and Image Alignment

Wrapping Text Next to Images

Adjusting the Space Around Images

Images and Links

Other Neat Tricks with Images

Image Dimensions and Scaling

Image Backgrounds

Using Images as Bullets

What Is an Imagemap?

Getting an Image

Determining Your Coordinates

LESSON 10: Building Tables

Creating Tables

Table Parts

The Element

Summarizing the Table

Rows and Cells

ptg

Empty Cells x Sams Teach Yourself HTML, CSS & JavaScript Web Publishing in One Hour a Day

Captions

Sizing Tables, Borders, and Cells

Setting Table Widths

Changing Table Borders

Aligning Your Table Content

Table Alignment

Cell and Caption Alignment

Spanning Multiple Rows or Columns

More Advanced Table Enhancements

Grouping and Aligning Columns..................................................................

Grouping and Aligning Rows

LESSON 11: Using CSS to Position Elements on the Page

Positioning Schemes

Relative Positioning

Absolute Positioning...........................................................................................

Positioning Properties

Positioning Properties and Height and Width

Nesting Absolutely Positioned Elements........................................................

Dynamic Overlays

Fixed Positioning

Controlling Stacking

Creating Drop-Down Menus

LESSON 12: Designing Forms

Understanding Form and Function

Using the Tag

Creating Form Controls with the Tag

Creating Text Controls

Adding Options to Text Fields with datalist

Using the New HTML5 Controls

Creating Password Controls

Creating Submit Buttons

Creating Reset Buttons

Creating Check Box Controls

Creating Radio Buttons

Using Images as Submit Buttons

Creating Generic Buttons............................................................................

Hidden Form Fields

The File Upload Control

Using Other Form Controls

Using the button Element

Creating Large Text-Entry Fields with textarea

Creating Menus with select and option

Grouping Controls with fieldset and legend

Changing the Default Form Navigation

Using Access Keys

Creating disabled and readonly Controls

Displaying Updates with progress and meter

Applying Cascading Style Sheet Properties to Form Elements

Planning Your Forms

Summary

ptg

Workshop xii Sams Teach Yourself HTML, CSS & JavaScript Web Publishing in One Hour a Day

LESSON 13: Structuring a Page with HTML5

A Short History of HTML Page Layout

Laying Out a Page in HTML5

HTML5 Structural Tags

Elements with Their Own Outlines

Using HTML5 Structural Elements

LESSON 14: Integrating Multimedia: Video and Sound

Embedding Video the Simple Way

Advantages and Disadvantages of Hosting Videos on External Sites

Uploading Videos to YouTube

Customizing the Video Player

Other Services

Hosting Your Own Video

Video and Container Formats

Converting Video to H.264

ptg

Embedding Video Using

The

Using the Element.......................................................................

Embedding Flash Using the