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 and jQuery.
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
Contents at a Glance
PART I: Getting Started 1 What Is Web Publishing 2 Getting Your Tools in Order 3 Introducing HTML and CSS
PART II: Creating Web Pages 4 Learning the Basics of HTML 5 Organizing Information with Lists 6 Working with Links
PART III: Doing More with HTML and CSS 7 Formatting Text 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 a 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
PART IV: Using JavaScript and jQuery 17 Introducing JavaScript 18 Using jQuery 19 Using JavaScript in Your Pages 20 Working with Frames and Linked Windows
PART V: Designing for Everyone 21 Designing for the Mobile Web 22 Designing for User Experience
PART VI: Going Live on the Web 23 How to Publish Your Site 24 Taking Advantage of the Server 25 Search Engines and SEO
Table of Contents:
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
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 and Tags
The usemap Attribute
Image Etiquette
Summary
Workshop
Q&A
Quiz
Quiz Answers
Exercises
Lesson 10: Building Tables
Creating Tables
Table Parts
The 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
Tag 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
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
The Tag
Using the Element
Embedding Flash Using the
Alternative Content for the
The Tag
Embedding Flash Movies Using SWFObject
Flash Video Players
JW Player
Using Flowplayer
Using the Tag
Embedding Audio in Your Pages
The 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
