Spring into HTML and CSS

by Molly Holzschlag

Overview

The fastest route to true HTML/CSS mastery!

Need to build a web site? Or update one? Or just create some effective new web content? Maybe you just need to update your skills, do the job better.

Welcome. This book's for you. We'll leverage what you already know about the web, so you'll go further, faster than you ever expected. You'll master today's best practices: the real nuts and bolts, not theory or hooey. You'll learn through dozens of focused HTML, XHTML, and CSS examples: crafted for simplicity and easy to adapt for your own projects.

Need specific solutions? This book's modular, visual, high-efficiency format delivers them instantly. Molly E. Holzschlag draws on her unparalleled experience teaching Web design and development. No other HTML/CSS guide covers this much, this well, this quickly. Dig in, get started, get results!

• All you need to succeed with HTML, XHTML, and CSS in real-world projects

• Learn how to build web pages that'll work in any environment, on virtually any contemporary browser

• Construct templates that simplify every page you develop

• Structure and tag text so it's easy to work with and manage

• Add images, media, and scripts–quickly and reliably

• Discover the right ways to use HTML tables

• Build easy-to-use forms and validate your users' input

• Use CSS to take total control over your site's look and feel

• Master core CSS techniques: color, images, text styles, link effects, lists, navigation, and more

• Control margins, borders, padding, positioning, floats, even Z-index

• Design efficient, compatible, easy-to-manage CSS layouts

Includes concise XHTML and CSS annotated references: quick help for every language element

Spring Into... is a new series of fast-paced tutorials from Addison-Wesley. Each book in the series is designed to bring you up to speed quickly. Complex topics and technologies are reduced to their core components, and each component is treated with remarkable efficiency in one- or two-page spreads. Just the information you need to begin working...now! And because the books are example-rich and easy to navigate, you'll find that they make great on-the-job references after you've mastered the basics.

© Copyright Pearson Education. All rights reserved.

Product Details

ISBN-13:	9780321605573
Publisher:	Pearson Education
Publication date:	04/22/2005
Series:	Spring Into... Series
Sold by:	Barnes & Noble
Format:	eBook
Pages:	336
File size:	7 MB
Age Range:	18 Years

About the Author

Coined "one of the greatest digerati" and deemed one of the "Top 25 Most Influential Women on the Web," there is little doubt that in the world of web design and development, Molly E. Holzschlag is a vibrant and influential thinker, teacher, and author. With more than 30 web development book titles to her credit, Molly is a Steering Committee member for the Web Standards Project (WaSP) and an advisory board member to the World Organization of Webmasters. She also has taught Webmaster courses for the University of Arizona, University of Phoenix, New School University, and Pima Community College. Many recognize Molly from her books, feature articles, and popular web site, molly.com.

Read an Excerpt

Spring Into HTML and CSSPreface

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?

You might, in fact, be a particle physicist, but this book is also intended for a wide range of nontechnical professionals interested in building websites and working with web documents for professional application within a given field, such as education, medicine, law, or science. To that end, I've written the book with a bit less technical jargon than I would for an audience of software developers, but you will find that this book, while very approachable, does get into some nitty-gritty concerns. The good news is you don't have to be a rocket scientist to understand it—but if you are, it'll work out for you, too!

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?

I've organized this book into two sections. The first focuses on HTML, the language used to structure the document and its contents.

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:

TABLE 1 Chapters in Section 1

Chapter	Title	Teaches you how to...
1	Building an HTML Page	Create a page in XHTML
2	Adding Text and Links	Format text and links
3	Adding Images, Media, and Scripts	Add dynamic content
4	Creating Tables	Build effective data tables
5	Building Forms	Create HTML forms
6	Working with Frames	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:

TABLE 2 Chapters in Section 2

Chapter	Title	Teaches you how to . . .
7	Using CSS	Integrate CSS with HTML
8	Working with Color and Images	Add color and imagery
9	Styling Text	Work with web typography
10	Link Effects, Lists, and Navigation	Design with links and lists
11	Margins, Borders, and Padding	Gain control over space
12	Positioning, Floats, and Z-index	Position and float elements
13	CSS Layouts	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?

This book, like the other books in the Spring Into... Series, provides the following unique approaches to the content within:

• 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

See the book's web page www.awprofessional.com/springinto/.

Acknowledgments

Writing a book feels like a lonely process, but the fact is that many people help out. Barry Rosenberg provided much needed early guidance on how to best write in the chunk style used in this series. Along the way, three reviewers provided valuable feedback: Kimberly Blessing and Eris Free pointed out ways I could improve the text, and Daniel Smith lent his fine eye and found mistakes and points of clarification, and provided very supportive tips along the way. A special thanks to Mark Taub, who offered the fine opportunity as well as shepherded it through. Finally, to David Fugate, literary agent extraordinaire, who is always there with wit, wisdom, and great movie advice, to boot.

About the Author

Coined "one of the greatest digerati" and deemed one of the "Top 25 Most Influential Women on the Web," there is little doubt that in the world of web design and development, Molly E. Holzschlag is a vibrant and influential thinker, teacher, and author. With more than 30 web development book titles to her credit, Molly is a Steering Committee member for the Web Standards Project (WaSP and an advisory board member to the World Organization of Webmasters. She also has taught Webmaster courses for the University of Arizona, University of Phoenix, New School University, and Pima Community College. Many recognize Molly from her books, feature articles, and popular website, molly.com.

About the Series Editor

Barry Rosenberg wrote the cult classic, KornShell Programming Tutorial (Addison-Wesley, 1991), which pioneered many of the chunk-oriented techniques found in the Spring Into... Series. He is the author of more than sixty corporate technical manuals, primarily on programming. An experienced instructor, Barry has taught everything from high-school physics to weeklong corporate seminars on data structures.

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.

© Copyright Pearson Education. All rights reserved.

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.

Preface

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?

You might, in fact, be a particle physicist, but this book is also intended for a wide range of nontechnical professionals interested in building websites and working with web documents for professional application within a given field, such as education, medicine, law, or science. To that end, I've written the book with a bit less technical jargon than I would for an audience of software developers, but you will find that this book, while very approachable, does get into some nitty-gritty concerns. The good news is you don't have to be a rocket scientist to understand it—but if you are, it'll work out for you, too!

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?

I've organized this book into two sections. The first focuses on HTML, the language used to structure the document and its contents.

---

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:

TABLE 1 Chapters in Section 1

Chapter	Title	Teaches you how to...
1	Building an HTML Page	Create a page in XHTML
2	Adding Text and Links	Format text and links
3	Adding Images, Media, and Scripts	Add dynamic content
4	Creating Tables	Build effective data tables
5	Building Forms	Create HTML forms
6	Working with Frames	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:

TABLE 2 Chapters in Section 2

Chapter	Title	Teaches you how to . . .
7	Using CSS	Integrate CSS with HTML
8	Working with Color and Images	Add color and imagery
9	Styling Text	Work with web typography
10	Link Effects, Lists, and Navigation	Design with links and lists
11	Margins, Borders, and Padding	Gain control over space
12	Positioning, Floats, and Z-index	Position and float elements
13	CSS Layouts	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?

This book, like the other books in the Spring Into... Series, provides the following unique approaches to the content within:

• 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

See the book's web page www.awprofessional.com/springinto/.

Acknowledgments

Writing a book feels like a lonely process, but the fact is that many people help out. Barry Rosenberg provided much needed early guidance on how to best write in the chunk style used in this series. Along the way, three reviewers provided valuable feedback: Kimberly Blessing and Eris Free pointed out ways I could improve the text, and Daniel Smith lent his fine eye and found mistakes and points of clarification, and provided very supportive tips along the way. A special thanks to Mark Taub, who offered the fine opportunity as well as shepherded it through. Finally, to David Fugate, literary agent extraordinaire, who is always there with wit, wisdom, and great movie advice, to boot.

About the Author

Coined "one of the greatest digerati" and deemed one of the "Top 25 Most Influential Women on the Web," there is little doubt that in the world of web design and development, Molly E. Holzschlag is a vibrant and influential thinker, teacher, and author. With more than 30 web development book titles to her credit, Molly is a Steering Committee member for the Web Standards Project (WaSP and an advisory board member to the World Organization of Webmasters. She also has taught Webmaster courses for the University of Arizona, University of Phoenix, New School University, and Pima Community College. Many recognize Molly from her books, feature articles, and popular website, molly.com.

About the Series Editor

Barry Rosenberg wrote the cult classic, KornShell Programming Tutorial (Addison-Wesley, 1991), which pioneered many of the chunk-oriented techniques found in the Spring Into... Series. He is the author of more than sixty corporate technical manuals, primarily on programming. An experienced instructor, Barry has taught everything from high-school physics to weeklong corporate seminars on data structures.

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.

© Copyright Pearson Education. All rights reserved.