Spring Into HTML and CSS

Example(s)

Download the Examples related to this title.

Related Article

The Meaning of Semantics Take II: Naming Conventions for Class and ID in CSS

Online Sample Chapter

How to Add Images, Media, and Scripts to Your Web Site

Index

Download the Index file related to this title.

Preface

The Web might be the most intriguing invention of the 20th century. Certainly, it is a technology that has spread faster than a California wildfire and has, in just a decade's time, changed the ways in which most contemporary societies live, work, study—and, of course, shop.

Hard to imagine that it all began as an experiment in a particle physics laboratory. Tim Berners-Lee and his fellow physicists at CERN (European Organization for Nuclear Research) had been searching for a way to effectively share research documents across a variety of computer platforms. The Internet, with its complex, international network, was a very natural foundation upon which to house the technologies that would ultimately combine to make up the World Wide Web.

From its modest origins to the absolutely astonishing permeation into world culture, the Web, according to its father, Berners-Lee, was intended to be as much a social environment as a technical one. This idea might well have led to the fast proliferation of the Web, largely because it enables us to interact in many different ways socially via the technology, so much so that a new study of social networking has emerged to examine the social implications of the Web on society, and vice versa.

Who Should Read This Book?

And, while intended for nontechnical professionals, the book will most certainly also be useful for people who are working in the web design and development field, and are interested in learning contemporary approaches to working with web pages.

How Is This Book Organized?

--------------------------------------------------------------------------------

Note - Although HTML is still in use, it has been reformulated into a language known as Extensible Markup Language (XHTML). For general purposes, they are essentially the same, with the exception that XHTML can be extended in ways beyond the scope of the book. However, to keep up-to-date and to get you working with modern markup, XHTML is used in this book. In fact, it's an important point that I tend to use the terms HTML and XHTML interchangeably, even though they are, in fact, a bit different.

--------------------------------------------------------------------------------

You'll learn more about HTML and XHTML in the book's first section, which contains the following chapters:

Chapters in Section 1
Chapter 1: Building an HTML Page
Teaches you how to: Create a page in XHTML

Chapter 2: Adding Text and Links
Teaches you how to: Format text and links

Chapter 3: Adding Images, Media, and Scripts
Teaches you how to: Add dynamic content

Chapter 4: Creating Tables
Teaches you how to: Build effective data tables

Chapter 5: Building Forms
Teaches you how to: Create HTML forms

Chapter 6: Working with Frames
Teaches you how to: Work with frames

The second section of the book focuses on Cascading Style Sheets (CSS), which is the language that integrates with HTML and XHTML to add the design features of the page: layout, colors, fonts, and anything decorative. You'll learn how to apply CSS to the pages you build by following the approaches found in the following chapters:

Chapters in Section 2

Chapter 7: Using CSS
Teaches you how to: Integrate CSS with HTML

Chapter 8: Working with Color and Images
Teaches you how to: Add color and imagery

Chapter 9: Styling Text
Teaches you how to: Work with web typography

Chapter 10: Link Effects, Lists, and Navigation
Teaches you how to: Design with links and lists

Chapter 11: Margins, Borders, and Padding
Teaches you how to: Gain control over space

Chapter 12: Positioning, Floats, and Z-index
Teaches you how to: Position and float elements

Chapter 13: CSS Layouts
Teaches you how to: Lay out pages with CSS

Along with the chapters, there are two very important appendixes. The first is "XHTML 1.0 Annotated Reference," which provides a look-up along with proper usage and tips of all the elements available in XHTML 1.0. The second is "CSS 2.1 Annotated Reference," which provides a listing, along with proper usage and tips, of all available CSS properties.

Between the chapters and the appendixes, you'll be set when it comes to the breadth of knowledge required to create great web pages using today's techniques.

What's Unusual About This Book?

Each topic is explained in a discrete one- or two-page unit called a "chunk."

Each chunk builds on the previous chunks in that chapter.

Many chunks contain sidebars and "Quantum Leaps," which provide helpful, _ancillary material that is often more advanced than the main text.

The chunk style has been specifically crafted to meet the needs of busy people. I know you don't have a lot of time to spend learning complex ideas, so giving them to you in bite-size chunks is a helpful way to get you working as fast as possible, the right way, from the get-go.

Where to Get Examples from the Book

Acknowledgments

About the Author

About the Series Editor

Most recently, Barry spent four semesters at MIT where he taught advanced technical writing. Barry is also a professional juggler who has performed more than 1,200 shows, including a three-week run in Japan. Juggling serves as the backdrop for his novel, Cascade (not yet published). Barry currently works as the documentation manager at 170 Systems.

Table of Contents

Preface.

Acknowledgments.

About the Author.

About the Series Editor.

1. Building an HTML Page.

    Declaring and Identifying the Document

    Adding the html Element

    The head and title Elements

    The meta Element

    The body Element

    HTML Comments

    Reviewing the Template

    Text Is Next!

2. Adding Text and Links.

    Using Headers Properly

    Adding Paragraphs

    Working with Page Breaks

    Ordered Lists

    Unordered Lists

    Nesting Lists

    Definition Lists

    The Good Old Link

    Email Links

    Intrapage Linking

    Adding Content to the Template

    Wrapping It Up

3. Adding Images, Media, and Scripts.

    The img Element

    Adding width and height Values

    Providing Alternative Text

    Linking the Image

    Linking to an Audio or Video File

    Embedding Files Using the object Element

    But Your Honor, I Object!

    Adding Scripts

    Scripting and Browser Concerns

    Imagine That!

4. Creating Tables.

    The table Element

    Adding a Table Row

    Adding Table Cells

    Adding Table Headers

    Adding a Caption

    Table Summaries

    Spanning Rows

    Spanning Columns

    Combining colspan and rowspan

    Grouping Table Columns: The col Element

    Grouping Table Columns with colgroup

    Grouping Table Rows

    The Table's Set

5. Building Forms.

    The form Element

    Adding an Input Textbox

    Adding Check Boxes and Radio Buttons

    Preselecting Checked Items

    Using Form Menus

    Working with Text Areas

    Reset and Submit Buttons

    Using a Graphic Submit Button

    Making Forms More Accessible with label

    Grouping Form Fields

    Grouping Menu Items

    Customizing and Advancing Your Forms

    Now That You're Well-Formed

6. Working with Frames.

    The Power of Three

    Creating a Frameset

    Adding Columns

    Working with Rows

    Combining Columns and Rows

    Margin, Resize, and Scroll Controls

    Naming and Targeting Frames

    Frames Without Frontiers

    Making Frames Accessible with noframes

    Wonderful Inline Frames

    You're Framed!

7. Using CSS.

    CSS Theory Simplified

    Adding Style Inline

    Using Embedded Style

    Creating a Linked Style Sheet

    Importing Style Sheets

    Commenting and Formatting CSS

    Time to Put Your Imagination to Work!

8. Working with Color and Images Using CSS.

    Color and CSS

    Adding Color to Backgrounds

    Spicing Up a Table Using Background Color

    Attaching a Background Graphic

    Controlling How Backgrounds Tile

    Positioning a Background Graphic

    Fixing and Scrolling Background Images

    Making a Background Color Transparent

    CSS Shorthand for Backgrounds

    Having Fun Yet?

9. Styling Text.

    Choosing Fonts

    Applying Font Families to Text

    Sizing Fonts

    Font Weight and Style

    Coloring Text

    Aligning Text

    Text Decoration

    Indenting Text

    Transforming and Varying Text

    Setting Line Height

    Spacing Letters and Words

    Modifying First-Letter and First-Line Text

    Using Shorthand for Font Styles

    Now You're Getting Fancy!

10. Link Effects, Lists, and Navigation.

    Working with Link States

    Modifying Link Styles

    Multiple Link Styles Using Class Selectors

    Styling Links Using Descendant Selectors

    Styling Ordered Lists

    Styling Unordered Lists

    Shorthand CSS for List Styles

    List-Based Vertical Navigation Using Color

    Vertical List Navigation with Image Effects

    Horizontal List-Based Navigation with Color

    Horizontal List Navigation with Images

    Rich Links, Lists, and Navigation

11. Margins, Borders, and Padding.

    Exploring the Box Model

    Using Margins

    Using Negative Margins

    Margin Shorthand

    Styling Borders

    Border Shorthand

    Using Padding

    Padding Shorthand

    Toward Gaining More Control

12. Positioning, Floats, and Z-index.

    Getting into Position

    Normal Flow

    Containing Blocks

    The Browser Viewport

    Absolute Positioning: To the Root Element

    Absolute Positioning: To Another Block

    Relative Positioning

    Fixed Positioning

    Floating Elements

    Clearing Floats

    Z-index

    Just Like a Pro

13. CSS Layouts.

    Three Columns with Fixed Flanking Menus

    Three Columns with Masthead and Footer

    Nested Float

    Centered Designs

    Complex Layouts

    Repeat After Me

Appendix A: XHTML 1.0 Annotated Reference.

Appendix B: CSS 2.1 Annotated Reference.

Index.

Downloadable Sample Chapter

Download the Sample Chapter related to this title.