内容简介

一本给初学者的HTML+CSS 入门书籍

作品目录

Preface

What is a Browser?

Who Should Read This Book

What You’ll Learn from This Book

How You’ll Learn to Build Your Website

HTML, Markup, CSS — Welcome to Your First Bits of Jargon!

Building the Example Site

What This Book Won’t Tell You

What’s in This Book

Where to Find Help

The SitePoint Forums

The Book’s Website

The SitePoint Newsletters

The SitePoint Podcast

Your Feedback

Acknowledgements

Conventions Used in This Book

Markup Samples

Tips, Notes, and Warnings

1. Setting Up Shop

The Basic Tools You Need

Windows Basic Tools

Mac OS X Basic Tools

Beyond the Basic Tools

Windows Tools

Mac OS X Tools

Not Just Text, Text, Text

Windows Tools

Mac OS X Tools

Online Tools

Creating a Spot for Your Website

Windows

Mac OS X

Summary

2. Your First Web Pages

Nice to Meet You, HTML

Anatomy of a Web Page

Viewing the Source

Basic Requirements of a Web Page

The Doctype

The html Element

The head Element

The title Element

meta Elements

Other head Elements

The body Element

The Most Basic Web Page in the World

Headings and Document Hierarchy

Paragraphs

For People Who Love Lists

Commenting Your HTML

Symbols

Diving into Our Website

The Home Page: the Starting Point for All Websites

Splitting Up the Page

Linking Between Our New Pages

The blockquote (Who said that?)

The cite Element

strong and em

Taking a Break

Summary

3. Adding Some Style

What is CSS?

Inline Styles

Adding Inline Styles

The span Element

Embedded Styles

Jargon Break

Why Embedded Styles Are Better Than Inline Styles

External stylesheets

Why External Stylesheets Are Better Than Embedded Styles

Creating an External CSS File

Linking CSS to a Web Page

Starting to Build Our Stylesheet

Stylish Headings

A Mixture of New Styles

A New Look in a Flash!

A Beginner’s Palette of Styling Options

Recap: the Style Story so Far

Looking at Elements in Context

Contextual Selectors

Grouping Styles

Which Rule Wins?

Recapping Our Progress

Styling Links

Class Selectors

Styling Partial Text Using span

Summary

4. Shaping Up Using CSS

Block-level Elements versus Inline Elements

Block-level Elements

Inline Elements

Inline Begets Inline

Inline Elements Can Never Contain Block-level Elements

Styling Inline and Block-level Elements

Sizing Up the Blocks

Setting a Width

Setting a Height

Adding Borders to Block-level Elements

Example Borders

Styling Individual Sides of an Element

Shorthand Border Styles

Border Styles You Can Use

Shaping and Sizing Our Diving Site

Adding Padding

Introducing Padding to the Project Site

Margins

The Box Model

Positioning Elements Anywhere You Like!

Showing the Structure

Absolute Positioning

Other Layout Options

More Absolute Positioning

Relative Positioning

Floated Positioning

Styling Lists

Summary

5. Picture This! Using Images on Your Website

Inline Images

Anatomy of the Image Element

Web Accessibility

JPEG versus GIF versus PNG

Transparency

PNG: King of Transparency

Adding an Image Gallery to the Site

Updating the Navigation

Adding the New Gallery Page

Adding the First Image

Formatting the Picture Using CSS

Captioning the Picture

Basic Image Editing

Image Cropping

Special Effects

Resizing Large Images

Other Software

Filling up the Gallery

Sourcing Images for Your Website

Background Images in CSS

Repeated Patterns

Nonrepeating Images

Shorthand Backgrounds

Fixed Heights and Widths

Setting a Background for Our Navigation

Summary

6. Tables: Tools for Organizing Data

What is a Table?

Anatomy of a Table

Styling the Table

Borders, Spacing, and Alignment

Making Your Tables Accessible

Linearization

summary

Captioning Your Table

Adding an Events Table

Stylish Table Cells

Advanced Tables

Merging Table Cells

Advanced Accessibility

Summary

7. Forms: Interacting with Your Audience

Anatomy of a Form

A Simple Form

The Building Blocks of a Form

The form Element

The fieldset and legend Elements

The label Element

The input Element

The select Element

The textarea Element

Submit Buttons

The Default Control Appearance

Building a Contact Page

Editing the Contact Us Page

Adding a form and a fieldset Element

Styling fieldset and legend with CSS

Adding Text Input Controls

Tidying Up label Elements with CSS

Adding a select Element

Adding a textarea Element

Adding Radio Buttons and Checkboxes

Completing the Form: a Submit Button

Processing the Form

Signing Up for Form Processing

Inserting the Form Code

Feedback By Email

Summary

8. Interacting with Social Media

But Facebook is the Internet, right?

Go Where the Audience Is

A Two-pronged Attack: Facebook and Twitter

Setting Up a Facebook Page

Adding a Like Box to Your Site

Let’s Sprinkle on Some Twitter Glitter

Adding Your Twitter Updates to the Site

Getting a Follow Button

Updating from a Twitter Client on Your Smartphone

But the Page Looks Really Messy Now!

Get Twitter to Update Facebook to Update Your Site

Now the Training Wheels Are Off …

Get Smart!

Summary

9. Launching Your Website

The Client—Server Model

Web Hosting Jargon

Hosting Your Website—Finding Server Space

Free Hosting—with a Catch!

Free Hosting—with a Domain Name at Cost

What is Web Forwarding?

The Downsides of Web Forwarding

Paying for Web Hosting

Hosting Essentials

FTP Access to Your Server

Adequate Storage Space

A Reasonable Bandwidth Allowance

Hosting Nice-to-haves

Email Accounts

Server Side Includes (SSIs)

Support for Scripting Languages and Databases

Pre-flight Check: How Do Your Pages Look in Different Browsers?

Uploading Files to Your Server

FTP Settings

Uploading with FileZilla for Windows

Uploading with Cyberduck—Mac OS X

Other Uploading Tools

Where’s Your Site At?

Checking Links

Validating Your Web Pages

Promoting Your Website

Submit Your Website to Search Engines

Tell Your Friends and Colleagues

Craft an Email Signature with Your Website Details

Post on a Related Forum

Link Exchange

Summary

10. Enhancing the Site with HTML5 and CSS3

HTML5: A Brief History

CSS3 —CSS2 —what’s the difference?

CSS3: Not Yet Universally Supported

The Good News on CSS3

Look at All Those Sharp, Pointy Corners!

The Details in the Shadows

From box-shadow to text-shadow

We Don’t Serve Your Type Around Here!

Other CSS3 Features to be Aware of

IE as a Second-class Citizen

Summary

11. Adding Interactivity with jQuery

JavaScript? jQuery? What’s the difference?

Standard JavaScript versus jQuery: A Simple Example

How do I get jQuery and use it?

Hang On a Moment!

jQuery: Primed and Ready For Action

Using jQuery on the Project Site

Setting Up References to jQuery

Adding Default Form Value

Showing the Picture Gallery’s Captions on Hover

Summary

12. What to Do When Things Go Wrong

Prevention

Keep Multiple Browsers Open While Developing

Validate HTML and CSS as You Go

Learn About Known Browser CSS Bugs

Prepare Your Browser for Battle—with Extensions!

Inspecting Problems with Firebug

Web Developer Toolbar

Disable CSS

Disable JavaScript

Outline Elements on the Page

Hide Images or Reveal alt Attributes

View Information about CSS and JavaScript

And So Much More …

How to use XRAY

Summary

13. Pimp My Site: Cool Stuff You Can Add for Free

Getting the Low-down on Your Visitors

Choosing a Statistics Service

Registering a Google Account

Adding the Statistics Code to Your Web Pages

A Search Tool for Your Site

Searching by Genre

Enhancing Search Further with jQuery

Discussion Forums

Summary

14. Where to Now? What You Could Learn Next

Improving Your HTML

The Official Documentation

Other Useful HTML Resources

Advancing Your CSS Knowledge

The Official Documentation

The Ultimate CSS Reference

HTML Dog

CSS3.info

CSS Discussion Lists

The CSS Discuss List’s Companion Site

Learning JavaScript

Becoming a jQuery Guru

Improving Website Performance

Learning Server-side Programming

Scripting Languages in Brief

Learning PHP

Summary

Index