Introduction 1
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 <html> Tag
The <head> Tag
The <body> 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: <a>
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 <a> 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 <hr> 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 <body> 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 <img> 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 <label> 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
