Table of Contents

PART I: Getting Started

Lesson 1: What Is Web Publishing?

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

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

PART II: Creating Web Pages

Lesson 4: Learning the Basics of HTML

Structuring Your HTML

The Tag

The Tag

The Tag

The Title

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

Anatomy of a URL

Parts of URLs

Special Characters in URLs

The rel Attribute

Kinds of URLs

HTTP

Anonymous FTP

Non-Anonymous FTP

Mailto

File

Summary

Workshop

Q&A

Quiz

Quiz Answers

Exercises

PART III: Doing More with HTML and CSS

Lesson 7: Formatting Text 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)

Attributes of the Tag

Line Break

Addresses

Quotations

Special Characters

Character Encoding

Character Entities for Special Characters

Character Entities for Reserved Characters

Fonts and Font Sizes

Summary

Workshop

Q&A

Quiz

Quiz Answers

Exercises

Lesson 8: Using CSS to Style a Site

Including Style Sheets in a Page

Creating Page-Level Styles

Creating Sitewide Style Sheets

Selectors

Contextual Selectors

Classes and IDs

What Cascading Means

Units of Measure

Specifying Colors

Editing Styles with Developer Tools

Using Color

Links

The Box Model

Borders

Margins and Padding

Controlling Size and Element Display

Float

More Selectors

Pseudo-Classes

Attribute Selectors

The Tag

Summary

Workshop

Q&A

Quiz

Quiz Answers

Exercises

Lesson 9: Using Images on Your Web Pages

Images on the Web

Image Formats

GIF

JPEG

PNG

SVG

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

The <map> and <area> Tags

The usemap Attribute

Image Etiquette

Summary

Workshop

Q&A

Quiz

Quiz Answers

Exercises

Lesson 10: Building Tables

Creating Tables

Table Parts

The <table> Element

Summarizing the Table

Rows and Cells

Empty Cells

Captions

Sizing Tables, Borders, and Cells

Setting Table Widths

Changing Table Borders

Cell Padding

Cell Spacing

Column Widths

Table and Cell Color

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

How Tables Are Used

Summary

Workshop

Q&A

Quiz

Quiz Answers

Exercises

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

Summary

Workshop

Q&A

Quiz

Quiz Answers

Exercises

Lesson 12: Designing Forms

Understanding Form and Function

Using the <form> Tag

Using the Tag

Creating Form Controls with the <input> 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

Workshop

Q&A

Quiz

Quiz Answers

Exercises

Lesson 13: Structuring a Page with HTML5

A Short History of HTML Page Layout

Laying Out a Page in HTML5

HTML5 Structural Tags

Sections

Header

Footer

Navigation

Articles

Asides

The Page Outline

Elements with Their Own Outlines

Using HTML5 Structural Elements

Polyfill Scripts

Summary

Workshop

Q&A

Quiz

Quiz Answers

Exercise

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

Embedding Video Using <video>

The <video> Tag

Using the <source> Element

Embedding Flash Using the <object> Tag

Alternative Content for the <object> Tag

The <embed> Tag

Embedding Flash Movies Using SWFObject

Flash Video Players

JW Player

Using Flowplayer

Using the <object> Tag with the <video> Tag

Embedding Audio in Your Pages

The <audio> Tag

Flash Audio Players

Summary

Workshop

Q&A

Quiz

Quiz Answers

Exercises

Lesson 15: Advanced CSS: Page Layout in CSS

Laying Out the Page

The Problems with Layout Tables

Writing HTML with Structure

Writing a Layout Style Sheet

The Floated Columns Layout Technique

The Role of CSS in Web Design

Style Sheet Organization

Site-Wide Style Sheets

Summary

Workshop

Q&A

Quiz

Quiz Answers

Exercises

Lesson 16: Using Responsive Web Design

What Is Responsive Web Design?

History of Responsive Web Design

Why RWD Is Important

RWD Is More Than Just Changing the Number of Columns

Mobile Devices Should Come First

Mobile First

Affecting the Viewport

Planning a Responsive Website

Check Your Analytics

Try the Site with Your Own Phone

Decide What Content Is Critical

Writing Media Queries

Media Types

Media Features

Breakpoints

Building a Style Sheet with Media Queries

Understanding the Mechanics of RWD

Adjusting the Layout

Making Images and Videos Responsive

Building Responsive Tables

Responsive Web Design Best Practices

Give Everyone the Best Experience

Use the Best Breakpoints for Your Website, Not for Devices

Be Flexible But Think Small

Summary

Workshop

Q&A

Quiz

Quiz Answers

Exercises

PART IV: Using JavaScript and jQuery

Lesson 17: Introducing JavaScript

Why Would You Want to Use JavaScript?

Ease of Use

Improving Performance

Integration with the Browser

The <script> Tag

The Structure of a JavaScript Script

The src Attribute

JavaScript and the Chrome Development Tools

The JavaScript Language

Operators and Expressions

Variables

Control Structures

Functions

Data Types

Arrays

Objects

The JavaScript Environment

Events

Summary

Workshop

Q&A

Quiz

Quiz Answers

Exercises

Lesson 18: Using jQuery

What Are JavaScript Libraries?

Getting Started with jQuery

Your First jQuery Script

Selecting Elements from the Document

Binding Events

Modifying Styles on the Page

Hiding and Showing Elements

Retrieving and Changing Style Sheet Properties

Modifying Content on the Page

Manipulating Classes

Manipulating Form Values

Manipulating Attributes Directly

Adding and Removing Content

Special Effects

AJAX and jQuery

Using AJAX to Load External Data

Summary

Workshop

Q&A

Quiz

Quiz Answers

Exercises

Lesson 19: Using JavaScript in Your Pages

Validating Forms with JavaScript

Hiding and Showing Content

The Same Code with jQuery

Adding New Content to a Page

Summary

Workshop

Q&A

Quiz

Quiz Answers

Exercises

Lesson 20: Working with Frames and Linked Windows

What Are Frames?

Why Were Frames Removed from HTML5?

What About Iframes?

Working with Linked Windows

Browsing Context Keywords

The <base> Tag

Inline Frames

Opening Linked Windows with JavaScript

Summary

Workshop

Q&A

Quiz

Quiz Answers

Exercises

PART V: Designing for Everyone

Lesson 21: Designing for the Mobile Web

People Browse Differently on Mobile Phones

Standards Compliance and the Mobile Web

Progressive Enhancement

Validating Your Pages

Writing for the Mobile Web

Write Clearly and Be Brief

Organize Your Pages for Quick Scanning

Make Each Page Stand on Its Own

Be Careful with Emphasis

Don’t Use Browser-Specific Terminology

Spell Check and Proofread Your Pages

Design and Page Layout

Use Headings as Headings

Group Related Information Visually

Use a Consistent Layout

Using Links

Mobile Users Tap; They Don’t Click

Use Link Menus with Descriptive Text

Use Links in Text

Avoid the “Here” Syndrome

To Link or Not to Link

Using Images and Multimedia

Don’t Overuse Images

Keep Images Small

Watch Out for Assumptions About Your Visitors’ Hardware

Don’t Make Your Videos Annoying

Avoid Flash

Making the Most of CSS and JavaScript

Put Your CSS and JavaScript in External Files

Location Matters

Shrink Your CSS and JavaScript

Take Advantage of Mobile Features

Geolocation

Make Phone Calls

SMS

Other Good Habits and Hints for Mobile Web Design

Link Back to Home

Don’t Split Topics Across Pages

Sign Your Pages

One Final Secret to Mobile Web Design

Summary

Workshop

Q&A

Quiz

Quiz Answers

Exercises

Lesson 22: Designing for User Experience

Considering User Experience Level

Add a Search Engine

Use Concise, Sensible URLs

Navigation Provides Context

Are Your Users Tourists or Regulars?

Determining User Preferences

What Is Accessibility?

Common Myths Regarding Accessibility

Section 508

Alternative Browsers

Writing Accessible HTML

Tables

Links

Images and Multimedia

Designing for Accessibility

Using Color

Fonts

Take Advantage of All HTML Tags

Frames

Forms

Validating Your Sites for Accessibility

Summary

Workshop

Q&A

Quiz

Quiz Answers

Exercises

PART VI: Going Live on the Web

Lesson 23: How to Publish Your Site

What Does a Web Server Do?

Other Things Web Servers Do

How to Find Web Hosting

Using a Web Server Provided by Your School or Work

Using a Commercial Web Host

Commercial Web Builders

Setting Up Your Own Server

Free Hosting

Organizing Your HTML Files for Publishing

Questions to Ask Your Webmaster

Keeping Your Files Organized with Directories

Having a Default Index File and Correct Filenames

Publishing Your Files

Moving Files Between Systems

Troubleshooting

I Can’t Access the Server

I Can’t Access Files

I Can’t Access Images

My Links Don’t Work

My Files Are Being Displayed Incorrectly

Promoting Your Web Pages

Getting Links from Other Sites

Content Marketing Through Guest Posting

Promoting Your Site Through Social Media

Creating a Facebook Page for Your Site

Site Indexes and Search Engines

Business Cards, Letterhead, Brochures, and Advertisements

Finding Out Who’s Viewing Your Web Pages

Log Files

Google Analytics

Summary

Workshop

Q&A

Quiz

Quiz Answers

Exercises

Lesson 24: Taking Advantage of the Server

How PHP Works

Getting PHP to Run on Your Computer

The PHP Language

Comments

Variables

Arrays

Strings

Conditional Statements

PHP Conditional Operators

Loops

foreach Loops

for Loops

while and do...while Loops

Controlling Loop Execution

Built-In Functions

User-Defined Functions

Returning Values

Processing Forms

Handling Parameters with Multiple Values

Presenting the Form

Using PHP Includes

Choosing Which Include Function to Use

Expanding Your Knowledge of PHP

Database Connectivity

Regular Expressions

Sending Mail

Object-Oriented PHP

Cookies and Sessions

File Uploads

Other Application Platforms

Microsoft ASP.NET

Java EE

Ruby on Rails

Summary

Workshop

Q&A

Quiz

Quiz Answers

Exercises

Lesson 25: Search Engines and SEO

What Is SEO?

Why You Need SEO

What About Social Media?

You Can Do Your Own SEO

Why Don’t Search Engines Find Sites Without SEO?

How Search Engines Work

Google

Microsoft Bing

Yahoo!

Don’t Forget International Searches

SEO Techniques

Is Your Site “Friendly?”

Using Keywords and Keyword Research

Creating Content for Customers Is the Best SEO

Myths and Facts About SEO

Tools for Tracking and Managing SEO

Using Sitemaps

The robots.txt File

Understanding Canonical Links

Redirecting Duplicate Content

Checking How Your Site Looks to Search Engines

Tracking Your SEO Efforts

Paying for Links

Summary

Workshop

Q&A

Quiz

Quiz Answers

Exercises

9780672336232 TOC 12/1/2015