image

image

image

I

Julie C. Meloni


HTMLS

Coverage


Sams Teach Yourself

HTML, CSS

and JavaScript


image


Julie C. Meloni


Sams Teach Yourself

HTML, CSS

All

and JavaScript


image

in One


image

800 East 96th Street, Indianapolis, Indiana, 46240 USA

Sams Teach Yourself HTML, CSS, and JavaScript All in One Copyright © 2012 by Pearson Education, Inc.

All rights reserved. No part of this book shall be reproduced, stored in a retrieval system, or transmitted by any means, electronic, mechanical, photocopying, recording, or other- wise, without written permission from the publisher. No patent liability is assumed with respect to the use of the information contained herein. Although every precaution has been taken in the preparation of this book, the publisher and author assume no responsi- bility for errors or omissions. Nor is any liability assumed for damages resulting from the use of the information contained herein.

ISBN-13: 978-0-672-33332-3

ISBN-10: 0-672-33332-5

Library of Congress Cataloging-in-Publication data is on file. First Printing November 2011

Trademarks

All terms mentioned in this book that are known to be trademarks or service marks have been appropriately capitalized. Sams Publishing cannot attest to the accuracy of this information. Use of a term in this book should not be regarded as affecting the validity of any trademark or service mark.


Warning and Disclaimer

Every effort has been made to make this book as complete and as accurate as possible, but no warranty or fitness is implied. The information provided is on an “as is” basis. The author and the publisher shall have neither liability nor responsibility to any person or entity with respect to any loss or damages arising from the information contained in this book or programs accompanying it.


Bulk Sales

Sams Publishing offers excellent discounts on this book when ordered in quantity for bulk purchases or special sales. For more information, please contact

U.S. Corporate and Government Sales 1-800-382-3419

corpsales@pearsontechgroup.com

For sales outside of the U.S., please contact

International Sales international@pearson.com


Acquisitions Editor

Mark Taber


Development Editor

Songlin Qiu


Managing Editor

Sandra Schroeder


Project Editor

Seth Kerney


Copy Editor

Mike Henry


Indexer

Ken Johnson


Proofreader

Jovana San Nicolas- Shirley

Technical Editor

Phil Ballard


Publishing Coordinator

Cindy Teeters


Book Designer

Gary Adair


Compositor

Trina Wurst


Contents at a Glance


PART I: Getting Started on the Web CHAPTER 1: Publishing Web Content CHAPTER 2: Understanding HTML and XHTML

Connections

CHAPTER 3: Understanding Cascading Style Sheets

CHAPTER 4: Understanding JavaScript


PART II: Building Blocks of Practical Web Design

CHAPTER 5: Working with Fonts, Text Blocks, and Lists

CHAPTER 6: Using Tables to Display Information CHAPTER 7: Using External and Internal Links CHAPTER 8: Working with Colors, Images, and

Multimedia


PART III: Advanced Web Page Design with CSS

CHAPTER 9: Working with Margins, Padding, Alignment, and Floating

CHAPTER 10: Understanding the CSS Box Model and Positioning

CHAPTER 11: Using CSS to Do More with Lists, Text, and Navigation

CHAPTER 12: Creating Fixed or Liquid Layouts


PART IV: Getting Started with Dynamic Web Sites

CHAPTER 13: Understanding Dynamic Websites CHAPTER 14: Getting Started with JavaScript

Programming

CHAPTER 15: Working with the Document Object Model (DOM)

CHAPTER 16: Using JavaScript Variables, Strings, and Arrays

CHAPTER 17: Using JavaScript Functions and

Objects

CHAPTER 18: Controlling Flow with Conditions

and Loops

CHAPTER 19: Responding to Events CHAPTER 20: Using Windows and Frames


PART V: Advanced JavaScript Programming

CHAPTER 21: Using Unobtrusive JavaScript CHAPTER 22: Using Third-Party Libraries CHAPTER 23: Greasemonkey: Enhancing the Web

with JavaScript

CHAPTER 24: AJAX: Remote Scripting


PART VI: Advanced Website Functionality and Management

CHAPTER 25: Creating Print-Friendly Web Pages CHAPTER 26: Working with Web-Based Forms CHAPTER 27: Organizing and Managing a

Website

CHAPTER 28: Helping People Find Your Web Pages

Index


Table of Contents

CHAPTER 1: Publishing Web Content 1

A Brief History of HTML and the World

Wide Web 1

Creating Web Content 2

Understanding Web Content Delivery 3

Selecting a Web Hosting Provider 6

Testing with Multiple Web Browsers 8

Creating a Sample File 9

Using FTP to Transfer Files 10

Distributing Content Without a Web Server 18

Tips for Testing Web Content 19

CHAPTER 2: Understanding HTML and

XHTML Connections 25

Getting Prepared 25

Getting Started with a Simple Web Page 26

HTML Tags Every XHTML Web Page Must Have .. 29 Organizing a Page with Paragraphs and Line

Breaks 31

Organizing Your Content with Headings 34

Validating Your Web Content 36

The Scoop on HTML, XML, XHTML, and HTML5 .. 38

CHAPTER 3: Understanding Cascading Style Sheets 45

How CSS Works 46

A Basic Style Sheet 47

A CSS Style Primer 52

Using Style Classes 57

Using Style IDs 59

Internal Style Sheets and Inline Styles 59

CHAPTER 4: Understanding JavaScript 65

Learning Web Scripting Basics 65

How JavaScript Fits into a Web Page 67

Exploring JavaScript’s Capabilities 70

Displaying Time with JavaScript 71

Beginning the Script 71

Adding JavaScript Statements 72

Creating Output 73

Adding the Script to a Web Page 73

Testing the Script 74

CHAPTER 5: Working with Fonts, Text Blocks, and Lists 81

Boldface, Italics, and Special Text Formatting 82

Tweaking the Font 85

Working with Special Characters 89

Aligning Text on a Page 92

The Three Types of HTML Lists 95

Placing Lists Within Lists 97

CHAPTER 6: Using Tables to Display

Information 107

Creating a Simple Table 107

Controlling Table Sizes 110

Alignment and Spanning Within Tables 113

Page Layout with Tables 116

CHAPTER 7: Using External and Internal

Links 123

Using Web Addresses 123

Linking Within a Page Using Anchors 126

Linking Between Your Own Web Content 129

Linking to External Web Content 131

Linking to an Email Address 132

Opening a Link in a New Browser Window 134

Using CSS to Style Hyperlinks 134

CHAPTER 8: Working with Colors,

Images, and Multimedia 141

Best Practices for Choosing Colors 141

Understanding Web Colors 143

Using Hexadecimal Values for Colors 145

Using CSS to Set Background, Text, and

Border Colors 146

Choosing Graphics Software 148

The Least You Need to Know About Graphics .. 149 Preparing Photographic Images 150

Creating Banners and Buttons 155

Reducing the Number of Colors in an Image 157

Working with Transparent Images 158

Creating Tiled Backgrounds 159

Creating Animated Web Graphics 160

Placing Images on a Web Page 161

Describing Images with Text 163

Specifying Image Height and Width 165

Aligning Images 165

Turning Images into Links 169

Using Background Images 171

Using Imagemaps 173

Integrating Multimedia into Your Website 178

Using Margins 192

CHAPTER 15: Working with the Document

Padding Elements 199

Keeping Everything Aligned 203

Object Model (DOM)

Understanding the Document Object

299

CHAPTER 9: Working with Margins, Padding, Alignment, and Floating 191

CHAPTER 14: Getting Started with JavaScript

Programming 287

Basic Concepts 287

JavaScript Syntax Rules 291

Using Comments 293

Best Practices for JavaScript 293


Understanding the Float Property 204


CHAPTER 10: Understanding the CSS Box

Model and Positioning 209

The CSS Box Model 209

The Whole Scoop on Positioning 213

Controlling the Way Things Stack Up 217

Managing the Flow of Text 220


CHAPTER 11: Using CSS to Do More with

Lists, Text, and Navigation 225

HTML List Refresher 226

How the CSS Box Model Affects Lists 226

Placing List Item Indicators 229

Creating Image Maps with List Items and

CSS 231

How Navigation Lists Differ from Regular

Lists 235

Creating Vertical Navigation with CSS 236

Creating Horizontal Navigation with CSS 245


CHAPTER 12: Creating Fixed or Liquid

Layouts 253

Understanding Fixed Layouts 254

Understanding Liquid Layouts 255

Creating a Fixed/Liquid Hybrid Layout 258


CHAPTER 13: Understanding Dynamic

Websites 273

Understanding the Different Types of Scripting273 Including JavaScript in HTML 274

Displaying Random Content 276

Understanding the Document Object Model .. 280 Changing Images Based on User Interaction .. 281

Model (DOM) 299

Using window Objects 300

Working with the document Object 300

Accessing Browser History 303

Working with the location Object 305

More About the DOM Structure 306

Working with DOM Nodes 309

Creating Positionable Elements (Layers) 311

Hiding and Showing Objects 316

Modifying Text Within a Page 317

Adding Text to a Page 319

CHAPTER 16: Using JavaScript Variables,

Strings, and Arrays 325

Using Variables 325

Understanding Expressions and Operators 328

Data Types in JavaScript 330

Converting Between Data Types 331

Using String Objects 332

Working with Substrings 335

Using Numeric Arrays 337

Using String Arrays 338

Sorting a Numeric Array 340

CHAPTER 17: Using JavaScript Functions

and Objects 347

Using Functions 347

Introducing Objects 352

Using Objects to Simplify Scripting 354

Extending Built-in Objects 356

Using the Math Object 360

Working with Math Functions 361

Using the with Keyword 363

Working with Dates 364


CHAPTER 18: Controlling Flow with

Conditions and Loops 369

The if Statement 369

Using Shorthand Conditional Expressions 372

Testing Multiple Conditions with if and else .. 373 Using Multiple Conditions with switch 375

Using for Loops 377

Using while Loops 379

Using do...while Loops 380

Working with Loops 380

Looping Through Object Properties 382

CHAPTER 19: Responding to Events 389

Understanding Event Handlers 389

Using Mouse Events 394

Using Keyboard Events 397

Using the onLoad and onUnload Events 399

Using onclick to Change <div> Appearance 400

CHAPTER 20: Using Windows and Frames 409

Controlling Windows with Objects 409

Moving and Resizing Windows 413

Using Timeouts 414

Displaying Dialog Boxes 417

Working with Frames 418

Building a Frameset 420

Linking Between Frames and Windows 423

Using Inline Frames 426

CHAPTER 21: Using Unobtrusive

JavaScript 433

Scripting Best Practices 433

Reading Browser Information 440

Cross-Browser Scripting 443

Supporting Non-JavaScript Browsers 445

CHAPTER 22: Using Third-Party Libraries 453

Using Third-Party Libraries 453

Other Libraries 456

CHAPTER 23: Greasemonkey: Enhancing

the Web with JavaScript 463

Introducing Greasemonkey 463

Working with User Scripts 466

Creating Your Own User Scripts 468

CHAPTER 24: AJAX: Remote Scripting 479

Introducing AJAX 479

Using XMLHttpRequest 483

Creating a Simple AJAX Library 485

Creating an AJAX Quiz Using the Library 487

Debugging AJAX Applications 491

CHAPTER 25: Creating Print-Friendly

Web Pages 499

What Makes a Page Print-Friendly? 500

Applying a Media-Specific Style Sheet 503

Designing a Style Sheet for Print Pages 505

Viewing a Web Page in Print Preview 508

CHAPTER 26: Working with Web-Based

Forms 513

How HTML Forms Work 513

Creating a Form 514

Accepting Text Input 519

Naming Each Piece of Form Data 519

Exploring Form Input Controls 521

Submitting Form Data 527

Accessing Form Elements with JavaScript 528

Displaying Data from a Form 528

Sending Form Results by Email 530

CHAPTER 27: Organizing and Managing

a Website 537

When One Page Is Enough 538

Organizing a Simple Site 540

Organizing a Larger Site 543

Writing Maintainable Code 546

Thinking About Version Control 548

CHAPTER 28: Helping People Find Your

Web Pages 553

Publicizing Your Website 553

Listing Your Pages with the Major

Search Sites 555

Providing Hints for Search Engines 556

Additional Tips for Search Engine

Optimization 562

INDEX 567

About the Author

Julie C. Meloni is the Lead Technologist and Architect in the Online Library Environment at the University of Virginia. Before coming to the library, she worked for more than 15 years in web appli- cation development for various corporations large and small in Silicon Valley. She has written sev- eral books and articles on Web-based programming languages and database topics, including the bestselling Sams Teach Yourself PHP, MySQL, and Apache All in One.


We Want to Hear from You!


As the reader of this book, you are our most important critic and commentator. We value your opin- ion and want to know what we’re doing right, what we could do better, what areas you’d like to see us publish in, and any other words of wisdom you’re willing to pass our way.

You can email or write directly to let us know what you did or didn’t like about this book—as well as what we can do to make our books stronger.

Please note that we cannot help you with technical problems related to the topic of this book, and that due to the high volume of mail we receive, we might not be able to reply to every message.

When you write, please be sure to include this book’s title and author as well as your name and email address. We will carefully review your comments and share them with the author and editors who worked on the book.

Email: feedback@samspublishing


Mail: Sams Publishing

800 East 96th Street Indianapolis, IN 46240 USA


Reader Services


Visit our website and register this book at informit.com/register for convenient access to any updates, downloads, or errata that might be available for this book.

image


CHAPTER 1

Publishing Web Content


Before learning the intricacies of HTML (Hypertext Markup Language), CSS (Cascading Style Sheets), and JavaScript, it is important that you gain a solid understanding of the technologies that help transform these plain- text files to the rich multimedia displays you see on your computer or handheld device when browsing the World Wide Web. For example, a file containing markup and client-side code HTML and CSS is useless without a web browser to view it, and no one besides yourself will see your content unless a web server is involved. Web servers make your content available to others who, in turn, use their web browsers to navigate to an address and wait for the server to send information to them. You will be intimately involved in this publishing process because you must create files and then put them on a server to make them available in the first place, and you must ensure that your content will appear to the end user as you intended.


A Brief History of HTML and the World Wide Web


Once upon a time, back when there weren’t any footprints on the moon, some farsighted folks decided to see whether they could connect several major computer networks together. I’ll spare you the names and stories (there are plenty of both), but the eventual result was the “mother of all networks,” which we call the Internet.


Until 1990, accessing information through the Internet was a rather techni- cal affair. It was so hard, in fact, that even Ph.D.-holding physicists were often frustrated when trying to swap data. One such physicist, the now- famous (and knighted) Sir Tim Berners-Lee, cooked up a way to easily cross-reference text on the Internet through hypertext links.

WHAT YOU’LL LEARN IN THIS CHAPTER:


. A very brief history of the World Wide Web

. What is meant by the term web page, and why that term doesn’t always reflect all the content involved

. How content gets from your personal computer to some- one else’s web browser

. How to select a web host- ing provider

. How different web browsers and device types can affect your content

. How to transfer files to your web server using FTP

. Where files should be placed on a web server

. How to distribute web con- tent without a web server

. How to use other publish- ing methods such as blogs

. Tips for testing the appear- ance and functionality of web content.

2 CHAPTER 1 Publishing Web Content


NOTE

For more information about the history of the World Wide Web, see the Wikipedia article on this topic: http://en.wikipedia. org/wiki/History_of_the_Web.

This wasn’t a new idea, but his simple HTML managed to thrive while more ambitious hypertext projects floundered. Hypertext originally meant text stored in electronic form with cross-reference links between pages. It is now a broader term that refers to just about any object (text, images, files, and so on) that can be linked to other objects. Hypertext Markup Language is a language for describing how text, graphics, and files containing other information are organized and linked together.


By 1993, only 100 or so computers throughout the world were equipped to serve up HTML pages. Those interlinked pages were dubbed the World Wide Web (WWW), and several web browser programs had been written to allow people to view web pages. Because of the growing popularity of the Web, a few programmers soon wrote web browsers that could view graph- ical images along with text. From that point forward, the continued devel- opment of web browser software and the standardization of the HTML— and XHTML—languages has lead us to the world we live in today, one in which more than 110 million web servers answer requests for more than 25 billion text and multimedia files.


These few paragraphs really are a brief history of what has been a remark- able period. Today’s college freshmen have never known a time in which the Web didn’t exist, and the idea of always-on information and ubiquitous computing will shape all aspects of our lives moving forward. Instead of seeing web content creation and management as a set of skills possessed only by a few technically oriented folks (okay, call them geeks if you will), by the end of this book, you will see that these are skills that anyone can master, regardless of inherent geekiness.


Creating Web Content


You might have noticed the use of the term web content rather than web pages—that was intentional. Although we talk of “visiting a web page,” what we really mean is something like “looking at all the text and the images at one address on our computer.” The text that we read, and the images that we see, are rendered by our web browsers, which are given certain instructions found in individual files.


Those files contain text that is marked up, or surrounded by, HTML codes that tell the browser how to display the text—as a heading, as a paragraph, in a red font, and so on. Some HTML markup tells the browser to display

Understanding Web Content Delivery 3


an image or video file rather than plain text, which brings me back to the point: Different types of content are sent to your web browser, so simply saying web page doesn’t begin to cover it. Here we use the term web content instead, to cover the full range of text, image, audio, video, and other media found online.


In later chapters, you will learn the basics of linking to or creating the vari- ous types of multimedia web content found in websites. All you need to remember at this point is that you are in control of the content a user sees when visiting your website. Beginning with the file that contains text to display or codes that tell the server to send a graphic along to the user’s web browser, you have to plan, design, and implement all the pieces that will eventually make up your web presence. As you will learn throughout this book, it is not a difficult process as long as you understand all the little steps along the way.


In its most fundamental form, web content begins with a simple text file containing HTML or XHTML markup. XHTML is another flavor of HTML; the “X” stands for eXtensible, and you will learn more about it as you con- tinue through the chapters. The most important thing to know from the outset is that all the examples in this book are HTML 4 and XHTML com- patible, meaning that they will be rendered similarly both now and in the future by any newer generations of web browsers. That is one of the bene- fits of writing standards-compliant code: You do not have to worry about going back to your code sometime in the future and changing it because it doesn’t work. Your code will likely always work for as long as web browsers adhere to standards (hopefully a long time).


Understanding Web Content Delivery


Several processes occur, in many different locations, to eventually produce web content that you can see. These processes occur very quickly—on the order of milliseconds—and occur behind the scenes. In other words, although we might think all we are doing is opening a web browser, typ- ing in a web address, and instantaneously seeing the content we requested, technology in the background is working hard on our behalf. Figure 1.1 shows the basic interaction between a browser and a server.

4 CHAPTER 1 Publishing Web Content


FIGURE 1.1

A browser request and a server response.


image


However, there are several steps in the process—and potentially several trips between the browser and server—before you see the entire content of the site you requested.


Suppose you want to do a Google search, so you dutifully type http://www.google.com in the address bar or select the Google bookmark from your bookmarks list. Almost immediately, your browser will show you something like what’s shown in Figure 1.2.


FIGURE 1.2

Visiting www.google.com.


image


Figure 1.2 shows a website that contains text plus one image (the Google logo). A simple version of the processes that occurred to retrieve that text and image from a web server and display it on your screen is as follows:

  1. Your web browser sends a request for the index.html file located at the http://www.google.com/ address. The index.html file does not have to be part of the address that you type in the address bar; you’ll learn more about the index.html file further along in this chapter.

    Understanding Web Content Delivery 5


  2. After receiving the request for a specific file, the web server process looks in its directory contents for the specific file, opens it, and sends the content of that file back to your web browser.


  3. The web browser receives the content of the index.html file, which is text marked up with HTML codes, and renders the content based on these HTML codes. While rendering the content, the browser hap- pens upon the HTML code for the Google logo, which you can see in Figure 1.2. The HTML code looks like this:


    <img src=”/logos/logo.gif” width=”384” height=”121” border=”0” alt=”Google”/>


    The tag provides attributes that tell the browser the file source loca- tion (src), width (width), height (height), border type (border), and alternative text (alt) necessary to display the logo. You will learn more about attributes throughout later chapters.


  4. The browser looks at the src attribute in the <img/> tag to find the source location. In this case, the image logo.gif can be found in the logos directory at the same web address (www.google.com) from which the browser retrieved the HTML file.


  5. The browser requests the file at the http://www.google.com/logos/logo.gif web address.


  6. The web server interprets that request, finds the file, and sends the contents of that file to the web browser that requested it.


  7. The web browser displays the image on your monitor.


As you can see in the description of the web content delivery process, web browsers do more than simply act as picture frames through which you can view content. Browsers assemble the web content components and arrange those parts according to the HTML commands in the file.


You can also view web content locally, or on your own hard drive, without the need for a web server. The process of content retrieval and display is the same as the process listed in the previous steps in that a browser looks for and interprets the codes and content of an HTML file, but the trip is shorter; the browser looks for files on your own computer’s hard drive rather than on a remote machine. A web server is needed to interpret any server-based programming language embedded in the files, but that is out- side the scope of this book. In fact, you could work through all the chap- ters in this book without having a web server to call your own, but then nobody but you could view your masterpieces.

6 CHAPTER 1 Publishing Web Content


Selecting a Web Hosting Provider


Despite just telling you that you can work through all the chapters in this book without having a web server, having a web server is the recommend- ed method for continuing on. Don’t worry—obtaining a hosting provider is usually a quick, painless, and relatively inexpensive process. In fact, you can get your own domain name and a year of web hosting for just slightly more than the cost of the book you are reading now.


If you type web hosting provider in your search engine of choice, you will get millions of hits and an endless list of sponsored search results (also known as ads). There are not this many web hosting providers in the world, although it might seem like there are. Even if you are looking at a managed list of hosting providers, it can be overwhelming—especially if all you are looking for is a place to host a simple website for yourself or your company or organization.


You’ll want to narrow your search when looking for a provider and choose one that best meets your needs. Some selection criteria for a web hosting provider include the following”

. Reliability/server “uptime”—If you have an online presence, you want to make sure people can actually get there consistently.


. Customer service—Look for multiple methods for contacting cus- tomer service (phone, email, and chat) as well as online documenta- tion for common issues.


. Server space—Does the hosting package include enough server space to hold all the multimedia files (images, audio, and video) you plan to include in your website (if any)?


. Bandwidth—Does the hosting package include enough bandwidth so that all the people visiting your site and downloading files can do so without you having to pay extra?


. Domain name purchase and management—Does the package include a custom domain name, or must you purchase and maintain your domain name separately from your hosting account?


. Price—Do not overpay for hosting. You will see a wide range of prices offered and should immediately wonder “what’s the difference?” Often the difference has little to do with the quality of the service and everything to do with company overhead and what the company thinks they can get away with charging people. A good rule of thumb is that if you are paying more than $75 per year for a basic hosting package and domain name, you are probably paying too much.

Selecting a Web Hosting Provider 7


Here are three reliable web hosting providers whose basic packages con- tain plenty of server space and bandwidth (as well as domain names and extra benefits) at a relatively low cost. If you don’t go with any of these web hosting providers, you can at least use their basic package descrip- tions as a guideline as you shop around.

. A Small Orange (http://www.asmallorange.com)—The “Tiny” and “Small” hosting packages are perfect starting places for the new web content publisher.


. DailyRazor (http://www.dailyrazor.com)—Even its Rookie hosting package is full featured and reliable.


. LunarPages (http://www.lunarpages.com)—The Basic hosting pack- age is suitable for many personal and small business websites.


One feature of a good hosting provider is that it provides a “control panel” for you to manage aspects of your account. Figure 1.3 shows the control panel for my own hosting account at Daily Razor. Many web hosting providers offer this particular control panel software, or some control panel that is similar in design—clearly labeled icons leading to tasks you can perform to configure and manage your account.


NOTE

I have used all these providers (and then some) over the years and have no problem recom- mending any of them; predomi- nantly, I use DailyRazor as a web hosting provider, especially for advanced development envi- ronments.


image

FIGURE 1.3

A sample control panel.

8 CHAPTER 1 Publishing Web Content


You might never need to use your control panel, but having it available to you simplifies the installation of databases and other software, the viewing of web statistics, and the addition of email addresses (among many other features). If you can follow instructions, you can manage your own web server—no special training required.


Testing with Multiple Web Browsers


Having just discussed the process of web content delivery and the acquisi- tion of a web server, it might seem a little strange to step back and talk about testing your websites with multiple web browsers. However, before you go off and learn all about creating websites with HTML and CSS, do so with this very important statement in mind: Every visitor to your website will potentially use hardware and software configurations that are different than your own. Their device types (desktop, laptop, netbook, smartphone, or iPhone), their screen resolutions, their browser types, their browser win- dow sizes, and their speed of connections will be different—remember that you cannot control any aspect of what your visitors use when they view your site. So, just as you’re setting up your web hosting environment and getting ready to work, think about downloading several different web browsers so that you have a local test suite of tools available to you. Let me explain why this is important.


Although all web browsers process and handle information in the same general way, there are some specific differences among them that result in things not always looking the same in different browsers. Even users of the same version of the same web browser can alter how a page appears by choosing different display options or changing the size of their viewing windows. All the major web browsers allow users to override the back- ground and fonts specified by the web page author with those of their own choosing. Screen resolution, window size, and optional toolbars can also change how much of a page someone sees when it first appears on their screens. You can ensure only that you write standards-compliant HTML and CSS.


Do not, under any circumstances, spend hours on end designing some- thing that looks perfect on your own computer—unless you are willing to be disappointed when you look at it on your friend’s computer, on your tablet, or on your iPhone.


You should always test your websites with as many of these web browsers as possible:

Creating a Sample File 9


. Apple Safari (http://www.apple.com/safari/) for Mac and Windows


. Google Chrome (http://www.google.com/chrome) for Windows


. Mozilla Firefox (http://www.mozilla.com/firefox/) for Mac, Windows, and Linux


. Microsoft Internet Explorer (http://www.microsoft.com/ie) for Windows


. Opera (http://www.opera.com/) for Mac, Windows, and Linux/UNIX


Now that you have a development environment set up, or at least some idea of the type you’d like to set up in the future, let’s move on to creating a test file.


Creating a Sample File


Before we begin, take a look at Listing 1.1. This listing represents a simple piece of web content—a few lines of HTML that print “Hello World! Welcome to My Web Server.” in large, bold letters on two lines centered within the browser window.


LISTING 1.1 Our Sample HTML File

image

<html>

<head>

<title>Hello World!</title>

</head>

<body>

<h1 style=”text-align: center”>Hello World!<br/>Welcome to My Web

Server.</h1>

</body>

</html>

image



To make use of this content, open a text editor of your choice, such as Notepad (on Windows) or TextEdit (on a Mac). Do not use WordPad, Microsoft Word, or other full-featured word-processing software because those programs create different sorts of files than the plain-text files we use for web content.


Type the content that you see in Listing 1.1, and then save the file using sample.html as the filename. The .html extension tells the web server that your file is, indeed, full of HTML. When the file contents are sent to the web browser that requests it, the browser will also know that it is HTML and will render it appropriately.

NOTE

image

You will learn a bit about text editors in Chapter 2, “Understanding HTML and XHTML Connections.” Right now, I just want you to have a sample file that you can put on a web server!

10 CHAPTER 1 Publishing Web Content


Now that you have a sample HTML file to use—and hopefully somewhere to put it, such as a web hosting account—let’s get to publishing your web content.


Using FTP to Transfer Files


As you’ve learned so far, you have to put your web content on a web serv- er to make it accessible to others. This process typically occurs by using File Transfer Protocol (FTP). To use FTP, you need an FTP client—a program used to transfer files from your computer to a web server.


FTP clients require three pieces of information to connect to your web serv- er; this information will have been sent to you by your hosting provider after you set up your account:

. The hostname, or address, to which you will connect


. Your account username


. Your account password


After you have this information, you are ready to use an FTP client to transfer content to your web server.


Selecting an FTP Client


Regardless of the FTP client you use, FTP clients generally use the same type of interface. Figure 1.4 shows an example of FireFTP, which is an FTP client used with the Firefox web browser. The directory listing of the local machine (your computer) appears on the left of your screen and the direc- tory listing of the remote machine (the web server) appears on the right. Typically, you will see right-arrow and left-arrow buttons—as shown in Figure 1.4. The right arrow sends selected files from your computer to your web server; the left arrow sends files from the web server to your comput- er. Many FTP clients also enable you to simply select files, and then drag and drop those files to the target machines.


There are many FTP clients freely available to you, but you can also trans- fer files via the web-based File Manager tool that is likely part of your web server’s control panel. However, that method of file transfer typically introduces more steps into the process and isn’t nearly as streamlined (or simple) as installing an FTP client on your own machine.

Using FTP to Transfer Files 11


image


Here are some popular free FTP clients:


. Classic FTP (http://www.nchsoftware.com/classic/) for Mac and Windows


. Cyberduck (http://cyberduck.ch/) for Mac

. Fetch (http://fetchsoftworks.com/) for Mac

. FileZilla (http://filezilla-project.org/) for all platforms


. FireFTP (http://fireftp.mozdev.org/) Firefox extension for all plat- forms


When you have selected an FTP client and installed it on your computer, you are ready to upload and download files from your web server. In the next section, you’ll see how this process works using the sample file in Listing 1.1.


Using an FTP Client


The following steps show how to use Classic FTP to connect to your web server and transfer a file. However, all FTP clients use similar, if not exact, interfaces. If you understand the following steps, you should be able to use any FTP client.


Remember, you first need the hostname, the account username, and the account password.

  1. Start the Classic FTP program and click the Connect button. You will be prompted to fill out information for the site to which you want to connect, as shown in Figure 1.5.


    FIGURE 1.4

    The FireFTP interface.

    12 CHAPTER 1 Publishing Web Content


    FIGURE 1.5

    Connecting to a new site in Classic FTP.


    image


  2. Fill in each of the items shown in Figure 1.5 as follows:


    . The site Label is the name you’ll use to refer to your own site.

    Nobody else will see this name, so enter whatever you want.


    . The FTP Server is the FTP address of the web server to which you need to send your web pages. This address will have been given to you by your hosting provider. It will probably be yourdomain.com, but check the information you received when you signed up for service.


    . The User Name field and the Password field should also be completed using information given to you by your hosting provider.


    . Don’t change the values for Initial Remote Directory on First Connection and Initial Local Directory on First Connection until you are used to using the client and have established a workflow.


  3. When you’re finished with the settings, click OK to save the settings and establish a connection with the web server.


    You will see a dialog box indicating that Classic FTP is attempting to connect to the web server. Upon successful connection, you will see an interface similar to Figure 1.6, showing the contents of the local directory on the left and the contents of your web server on the right.

    Using FTP to Transfer Files 13


    image


  4. You are now almost ready to transfer files to your web server. All that remains is to change directories to what is called the document root of your web server. The document root of your web server is the directo- ry that is designated as the top-level directory for your web content— the starting point of the directory structure, which you will learn more about later in this chapter. Often, this directory will be named public_html (as shown in Figure 1.6), www (also shown in Figure 1.6, as www has been created as an alias for public_html), or htdocs. This is not a directory that you will have to create because your hosting provider will have created it for you.


    Double-click the document root directory name to open it. The dis- play shown on the right of the FTP client interface should change to show the contents of this directory. (It will probably be empty at this point, unless your web hosting provider has put placeholder files in that directory on your behalf.)


  5. The goal is to transfer the sample.html file you created earlier from your computer to the web server. Find the file in the directory listing on the left of the FTP client interface (navigate around if you have to) and click it once to highlight the filename.


    FIGURE 1.6

    A successful connection to a remote web server via Classic FTP.

    14 CHAPTER 1 Publishing Web Content


  6. Click the right-arrow button in the middle of the client interface to send the file to the web server. After the file transfer is completed, the right side of the client interface should refresh to show you that the file has made it to its destination.


  7. Click the Disconnect button to close the connection, and then exit out of the Classic FTP program.


These steps are conceptually similar to the steps you will take anytime you want to send files to your web server via FTP. You can also use your FTP client to create subdirectories on the remote web server. To create a subdi- rectory using Classic FTP, click the Remote menu, and then click New Folder. Different FTP clients will have different interface options to achieve the same goal.


Understanding Where to Place Files on the Web Server


An important aspect of maintaining web content is determining how you will organize that content—not only for the user to find, but also for you to maintain on your server. Putting files in directories will help you to man- age those files.


Naming and organizing directories on your web server, and developing rules for file maintenance, is completely up to you. However, maintaining a well-organized server simply makes your management of its content more efficient in the long run.


Basic File Management


As you browse the Web, you might have noticed that URLs change as you navigate through websites. For instance, if you’re looking at a company’s website and you click on graphical navigation leading to the company’s products or services, the URL will probably change from


http://www.companyname.com/ to

http://www.companyname.com/products/ or

http://www.companyname.com/services/

Understanding Where to Place Files on the Web Server 15


In the previous section, I used the term document root without really explaining what that is all about. The document root of a web server is essentially the trailing slash in the full URL. For instance, if your domain is yourdomain.com and your URL is http://www.yourdomain.com/, the docu- ment root is the directory represented by the trailing slash (/). The docu- ment root is the starting point of the directory structure you create on your web server; it is the place where the web server begins looking for files requested by the web browser.


If you put the sample.html file in your document root as previously direct- ed, you will be able to access it via a web browser at the following URL:


http://www.yourdomain.com/sample.html


If you were to enter this URL into your web browser, you would see the rendered sample.html file, as shown in Figure 1.7.


image


However, if you created a new directory within the document root and put the sample.html file in that directory, the file would be accessed at this URL:


http://www.yourdomain.com/newdirectory/sample.html


If you put the sample.html file in the directory you originally saw upon connecting to your server—that is, you did not change directories and place the file in the document root—the sample.html file would not be accessible from your web server at any URL. The file will still be on the machine that you know as your web server, but because the file is not in the document root—where the server software knows to start looking for files—it will never be accessible to anyone via a web browser.


FIGURE 1.7

The sample.html file accessed via a web browser.

16 CHAPTER 1 Publishing Web Content


The bottom line? Always navigate to the document root of your web server before you start transferring files.


This is especially true with graphics and other multimedia files. A common directory on web servers is called images, where, as you can imagine, all the image assets are placed for retrieval. Other popular directories include css for stylesheet files (if you are using more than one) and js for external JavaScript files. Or, if you know you will have an area on your website where visitors can download many different types of files, you might sim- ply call that directory downloads.


Whether it’s a ZIP file containing your art portfolio or an Excel spreadsheet with sales numbers, it’s often useful to publish files on the Internet that aren’t simply web pages. To make a file available on the Web that isn’t an HTML file, just upload the file to your website as if it were an HTML file, following the instructions provided earlier in this chapter for uploading. After the file is uploaded to the web server, you can create a link to it (as you’ll learn in later chapters). In other words, your web server can serve much more than HTML.


Here’s a sample of the HTML code that you will learn more about later in this book. The following code would be used for a file named artfolio.zip, located in the downloads directory of your website, and link text that reads “Download my art portfolio!”:

<a href=”/downloads/artfolio.zip”>Download my art portfolio!</a>


Using an Index Page


When you think of an index, you probably think of the section in the back of a book that tells you where to look for various keywords and topics. The index file in a web server directory can serve that purpose—if you design it that way. In fact, that’s where the name originates.


The index.html file (or just index file, as it’s usually referred to) is the name you give to the page you want people to see as the default file when they navigate to a specific directory in your website. If you’ve created that page with usability in mind, your users will be able to get to all content in that section from the index page.


For example, Figure 1.8 shows the drop-down navigation and left-side navigation both contain links to three pages: Solutions Overview (the sec- tion index page itself), Connection Management, and Cost Management.

Understanding Where to Place Files on the Web Server 17

The content of the page itself—called index.html and located within the solutions directory—also has links to those two additional pages in the solutions section. When users arrive at the index page of the “solutions” section in this particular website (at least at the time of the snapshot), they can reach any other page in that section (and in three different ways!).


image


Another function of the index page is that when users visit a directory on your site that has an index page, but they do not specify that page, they will still land on the main page for that section of your site—or for the site itself.


For instance, in the previous example, a user could have typed either of the following URLs and landed on the main page of the solutions section of that website:


http://www.ipass.com/solutions/ http://www.ipass.com/solutions/index.html


Had there been no index.html page in the solutions directory, the results would depend on the configuration of the web server. If the server is con- figured to disallow directory browsing, the user would have seen a “Directory Listing Denied” message when attempting to access the URL without a specified page name. However, if the server is configured to allow directory browsing, the user would have seen a list of the files in that directory.


FIGURE 1.8

Showing a good section index page.

18 CHAPTER 1 Publishing Web Content


These server configuration options will have already been determined for you by your hosting provider. If your hosting provider enables you to modify server settings via a control panel, you can change these settings so that your server responds to requests based on your own requirements.


Not only is the index file used in subdirectories, it’s used in the top-level directory (or document root) of your website as well. The first page of your website—or home page or main page, or however you like to refer to the web content you want users to see when they first visit your domain—should be named index.html and placed in the document root of your web server. This will ensure that when users type http://www.yourdomain.com/ into their web browsers, the server will respond with content you intended them to see (rather than “Directory Listing Denied” or some other unin- tended consequence).



NOTE

image

Distributing a web browser isn’t required when creating and dis- tributing a local site, although it’s a nice touch. You can rea- sonably assume that users have their own web browsers and will open the index.html file in a directory to start browsing the hyperlinked content. However, if you would like to distribute a web browser on the USB drive, go to http://www. portableapps.com/ and look for Portable Firefox.

Distributing Content Without a Web Server


Publishing HTML and multimedia files online is obviously the primary reason to learn HTML and create web content. However, there are also sit- uations in which other forms of publishing simply aren’t viable. For exam- ple, you might want to distribute CD-ROMs, DVD-ROMs, or USB drives at a trade show with marketing materials designed as web content—that is, hyperlinked text viewable through a web browser, but without a web serv- er involved. You might also want to include HTML-based instructional manuals on removable media for students at a training seminar. These are just two examples of how HTML pages can be used in publishing scenar- ios that don’t involve the Internet.


This process is also called creating local sites; even though there’s no web server involved, these bundles of hypertext content are still called sites. The local term comes into play because your files are accessed locally and not remotely (via a web server).


Publishing Content Locally


Let’s assume you need to create a local site that you want to distribute on a USB drive. Even the cheapest USB drives hold so much data these days— and basic hypertext files are quite small—that you can distribute an entire site and a fully functioning web browser all on one little drive.

Tips for Testing Web Content 19


Simply think of the directory structure of your USB drive just as you would the directory structure of your web server. The top-level of the USB drive directory structure can be your document root. Or if you are distributing a web browser along with the content, you might have two directories—for example, one named browser and one named content. In that case, the content directory would be your document root. Within the document root, you could have additional subfolders in which you place content and other multimedia assets.


It’s as important to maintain good organization with a local site as it is with a remote website so that you avoid broken links in your HTML files. You will learn more about the specifics of linking together files in a later chapter.


Publishing Content on a Blog


You might have a blog hosted by a third-party, such as Blogger or WordPress (among others), and thus have already published content with- out having a dedicated web server or even knowing any HTML. These services offer visual editors in addition to source editors, meaning that you can type your words and add visual formatting such as bold, italics, or font col- ors without knowing the HTML for these actions. But still, the content becomes actual HTML when you click the Publish button in these editors.


However, with the knowledge you will acquire throughout this book, your blogging will be enhanced because you will able to use the source editor for your blog post content and blog templates, thus affording you more control over the look and feel of that content. These actions occur different- ly from the process you learned for creating an HTML file and uploading it via FTP to your own dedicated web server, but I would be remiss if I did not note that blogging is, in fact, a form of web publishing.


Tips for Testing Web Content


Whenever you transfer files to your web server or place them on remov- able media for local browsing, you should immediately test every page thoroughly. The following checklist will help ensure that your web content behaves the way you expected. Note that some of the terms might be unfa- miliar to you at this point, but come back to this checklist as you progress through this book and create larger projects:

20 CHAPTER 1 Publishing Web Content


. Before you transfer your files, test them locally on your machine to ensure that the links work and the content reflects the visual design you intended. After you transfer the pages to a web server or remov- able device, test them all again.


. Perform these tests with as many browsers that you can—Chrome, Firefox, Internet Explorer, Opera, and Safari is a good list—and on both Mac and Windows platforms. If possible, check at low resolu- tion (800×600) and high resolution (1600×1200).


. Turn off auto image loading in your web browser before you start testing so that you can see what each page looks like without the graphics. Check your alt tag messages, and then turn image loading back on to load the graphics and review the page carefully again.


. Use your browser’s font size settings to look at each page in various font sizes to ensure that your layout doesn’t fall to pieces if users override your font specifications with their own.


. Wait for each page to completely finish loading, and then scroll all the way down to make sure that all images appear where they should.


. Time how long it takes each page to load. Does it take more than a few seconds to load? If so, is the information on that page valuable enough to keep users from going elsewhere before the page finishes loading? Granted, broadband connections are common, but that doesn’t mean you should load up your pages with 1MB images.


If your pages pass all those tests, you can rest easy; your site is ready for public viewing.


Summary


This chapter introduced you to the concept of using HTML to mark-up text files to produce web content. You also learned that there is more to web content than just the “page”—web content also includes image, audio, and video files. All of this content lives on a web server—a remote machine often far away from your own computer. On your computer or other device, you use a web browser to request, retrieve, and eventually display web content on your screen.


You learned the criteria you should consider when determining if a web hosting provider fits your needs. After you have a web hosting provider,

Summary 21

you can begin to transfer files to your web server using an FTP client. You also learned a little bit about web server directory structures and file man- agement, as well as the very important purpose of the index.html file in a given web server directory. You discovered that you can distribute web content on removable media, and how to go about structuring the files and directories to achieve the goal of viewing content without using a remote web server. Finally, you learned the importance of testing your work in multiple browsers after you’ve placed it on a web server. Writing valid, standards-compliant HTML and CSS will help ensure your site looks rea- sonably similar for all visitors, but you still shouldn’t design without receiving input from potential users outside your development team—it is even more important to get input from others when you are a design team of one!

image

22 CHAPTER 1 Publishing Web Content


Q&A


Q. I’ve looked at the HTML source of some web pages on the Internet and it looks frighteningly difficult to learn. Do I have to think like a computer programmer to learn this stuff?


A. Although complex HTML pages can indeed look daunting, learning HTML is much easier than learning actual software programming languages (such as C++ or Java). HTML is a markup language rather than a pro- gramming language; you mark-up text so that the text can be rendered a certain way by the browser. That’s a completely different set of thought processes than developing a computer program. You really don’t need any experience or skill as a computer programmer to be a successful web content author.


One of the reasons the HTML behind many commercial websites looks complicated is because it was likely created by a visual web design tool—a “what you see is what you get” or “WYSIWYG” editor that will use whatever markup its software developer told it to use in certain cir- cumstances—as opposed to being hand-coded, in which you are com- pletely in control of the resulting markup. In this book, you are taught fundamental coding from the ground up, which typically results in clean, easy-to-read source code. Visual web design tools have a knack for making code difficult to read and for producing code that is convoluted and non-standards compliant.


Q. All the tests you recommend would take longer than creating my pages! Can’t I get away with less testing?


A. If your pages aren’t intended to make money or provide an important service, it’s probably not a big deal if they look funny to some users or produce errors once in a while. In that case, just test each page with a couple of different browsers and call it a day. However, if you need to project a professional image, there is no substitute for rigorous testing.


Q. Seriously, who cares how I organize my web content?


A. Believe it or not, the organization of your web content does matter to search engines and potential visitors to your site—you’ll learn more about this in Chapter 28, “Helping People Find Your Web Pages.” But overall, having an organized web server directory structure will help you keep track of content that you are likely to update frequently. For instance, if you have a dedicated directory for images or multimedia, you will know exactly where to look for a file you want to update—no need to hunt through directories containing other content.

image

Workshop 23


Workshop


The workshop contains quiz questions and exercises to help you solidify your understanding of the material covered. Try to answer all questions before looking at the “Answers” section that follows.


Quiz


  1. How many files would you need to store on a web server to produce a single web page with some text and two images on it?


  2. What are some of the features to look for in a web hosting provider?


  3. What three pieces of information do you need to connect to your web server via FTP?


  4. What is the purpose of the index.html file?


  5. Does your website have to include a directory structure?


Answers


  1. You would need three: one for the web page itself, which includes the text and the HTML markup, and one for each of the two images.


  2. Look for reliability, customer service, web space and bandwidth, domain name service, site management extras, and price.


  3. The hostname, your account username, and your account password.


  4. The index.html file is typically the default file for a directory within a web server. It allows users to access http://www.yourdomain.com/ somedirectory/ without using a trailing file name and still end up in the appropriate place.


  5. No. Using a directory structure for file organization is completely up to you, although it is highly recommended to use one because it simplifies content maintenance.


www.it-ebooks.info

image

24 CHAPTER 1 Publishing Web Content


Exercises


. Get your web hosting in order—are you going to go through the chap- ters in this book by viewing files locally on your own computer, or are you going to use a web hosting provider? Note that most web hosting providers will have you up and running the same day you purchase your hosting plan.

. If you are using an external hosting provider, and then using your FTP client, create a subdirectory within the document root of your website. Paste the contents of the sample.html file into another file named index.html, change the text between the <title> and </title> tags to something new, and change the text between the <h1> and </h1> tags to something new. Save the file and upload it to the new subdirectory. Use your web browser to navigate to the new directory on your web server and see that the content in the index.html file appears. Then, using your FTP client, delete the index.html file from the remote subdi- rectory. Return to that URL with your web browser, reload the page, and see how the server responds without the index.html file in place.


. Using the same set of files created in the previous exercise, place these files on a removable media device—a CD-ROM or a USB drive, for example. Use your browser to navigate this local version of your sample website, and think about the instructions you would have to distribute with this removable media so that others could use it.


www.it-ebooks.info

image


CHAPTER 2

Understanding HTML and XHTML Connections


The first chapter gave you a basic idea of the process behind creating web content and viewing it online (or locally, if you do not yet have a web host- ing provider). In this chapter, we’ll get down to the business of explaining the various elements that must appear in an HTML file so that it is dis- played appropriately in your web browser.


By the end of the chapter, you’ll learn how HTML differs from XHTML and why there are two different languages designed to do the same thing— create web content. In general, this chapter provides a quick summary of HTML and XHTML basics and gives some practical tips to make the most of your time as a web page author and publisher. It’s not all theory, howev- er; you do get to see a real web page and the HTML code behind it.


Getting Prepared


Here’s a review of what you need to do before you’re ready to use the rest of this book:

  1. Get a computer. I used a computer running Ubuntu (Linux) to test the sample web content and capture the figures in this book, but you can use any Windows, Macintosh, or Linux/UNIX machine to create and view your web content.


  2. Get a connection to the Internet. Whether you have a dial-up, wire- less, or broadband connection doesn’t matter for the creation and viewing of your web content, but the faster the connection, the better for the overall experience. The Internet service provider (ISP), school, or business that provides your Internet connection can help you with the details of setting it up properly. Additionally, many public spaces such as coffee shops, bookstores, and libraries offer free wireless Internet service that you can use if you have a laptop computer with Wi-Fi network support.

    WHAT YOU’LL LEARN IN THIS CHAPTER:


    . How to create a simple web page in HTML

    . How to include all the HTML Tags that every web page must have

    . How to organize a page with paragraphs and line breaks

    . How to organize your con- tent with headings

    . How to validate your web content

    . How to differentiate between HTML, XML, XHTML, and HTML5

    26 CHAPTER 2 Understanding HTML and XHTML Connections


    NOTE

    Not sure how to find an ISP? The best way is to comparison- shop online (using a friend’s computer or a public computer that’s already connected to the Internet). You’ll find a compre- hensive list of national and regional ISPs at http://www. thelist.com/.


    CAUTION

    image

    Although all web browsers process and handle information in the same general way, there are some specific differences among them that result in things not always looking the same in different browsers. Be sure to check your web pages in multiple browsers to make sure that they look reasonably consistent.


    NOTE

    As discussed in the first chap- ter, if you plan to put your web content on the Internet (as opposed to publishing it on CD- ROM or a local intranet), you’ll need to transfer it to a comput- er that is connected to the Internet 24 hours a day. The same company or school that provides you with Internet access might also provide web space; if not, you might need to pay a hosting provider for the service.

  3. Get web browser software. This is the software your computer needs to retrieve and display web content. As you learned in the first chap- ter, the most popular browser software (in alphabetical order) is Apple Safari, Google Chrome, Microsoft Internet Explorer, Mozilla Firefox, and Opera. It’s a good idea to install several of these browsers so that you can experiment and make sure that your con- tent looks consistent across them all; you can’t make assumptions about the browsers other people are using.


  4. Explore! Use a web browser to look around the Internet for websites that are similar in content or appearance to those you’d like to create. Note what frustrates you about some pages, what attracts you and keeps you reading others, and what makes you come back to some pages over and over again. If there is a particular topic that interests you, consider searching for it using a popular search engine such as Google (http://www.google.com/) or Bing (http://www.bing.com/).


Getting Started with a Simple Web Page


In the first chapter, you learned that a web page is just a text file that is marked up by (or surrounded by) HTML codes that tell the browser how to display the text. To create these text files, use a text editor such as Notepad (on Windows) or TextEdit (on a Mac)—do not use WordPad, Microsoft Word, or other full-featured word-processing software because those create different sorts of files than the plain-text files we use for web content.


Before you begin working, you should start with some text that you want to put on a web page:

  1. Find (or write) a few paragraphs of text about yourself, your family, your company, your softball team, or some other subject in which you’re interested.


  2. Save this text as plain, standard ASCII text. Notepad and most sim- ple text editors always save files as plain text, but if you’re using another program, you might need to choose this file type as an option (after selecting File, Save As).


As you go through this chapter, you will add HTML markup (called tags) to the text file, thus making it into web content.

Getting Started with a Simple Web Page 27


When you save files containing HTML tags, always give them a name end- ing in .html. This is important: If you forget to type the .html at the end of the filename when you save the file, most text editors will give it some other extension (such as .txt). If that happens, you might not be able to find the file when you try to look at it with a web browser; if you find it, it cer- tainly won’t display properly. In other words, web browsers expect a web page file to have a file extension of .html.


When visiting websites, you might also encounter pages with a file exten- sion of .htm, which is also an acceptable file extension to use. You might find other file extensions used on the Web, such as .jsp (Java Server Pages),

.asp (Microsoft Active Server Pages), or .php (PHP: Hypertext Preprocessor), but these file types use server-side technologies that are beyond the scope of HTML and the chapters throughout this book. However, these files also contain HTML in addition to the programming language; although the programming code in those files is compiled on the server side and all you would see on the client side is the HTML output, if you were to look at the source files, you would likely see some intricate weaving of programming and markup codes.


Listing 2.1 shows an example of text you can type and save to create a sim- ple HTML page. If you opened this file with Firefox, you would see the page shown in Figure 2.1. Every web page you create must include the

<html></html>, <head></head>, <title></title>, and <body></body> tag pairs.


LISTING 2.1 The <html>, <head>, <title>, and <body> Ta gs

<?xml version=”1.0” encoding=”UTF-8”?>

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN”

“http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”>


<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en”>

<head>

<title>The First Web Page</title>

</head>


<body>

<p>

In the beginning, Tim created the HyperText Markup Language. The Internet was without form and void, and text was upon the face of the monitor and the Hands of Tim were moving over the face of the keyboard. And Tim said, Let there be links; and there were links. And Tim saw that the links were good; and Tim separated the links from the text. Tim called the links


CAUTION

To reiterate, because it is very important both to the outcome and the learning process itself: Do not create your first HTML file with Microsoft Word or any other HTML-compatible word processor; most of these pro- grams attempt to rewrite your HTML for you in strange ways, potentially leaving you totally confused. Additionally, I recom- mend that you do not use a graphical, what-you-see-is-what- you-get (WYSIWYG) editor, such as Microsoft FrontPage or Adobe Dreamweaver. You’ll likely find it easier and more educational to start out with a simple text edi- tor while you’re just learning HTML. You can move to visual tools (such as FrontPage and Dreamweaver) after you have a better understanding of what’s going on under the hood.


NOTE

If you’re using TextEdit on a Macintosh computer, the steps for creating an HTML file are a little different than for using Notepad on a Windows comput- er. Both are popular text editors, but with the latter, you must

first click on the Format menu, select Make Plain Text, and then change the preferences under the Saving header by uncheck- ing the box for Append ‘.txt’ Extension to Plain Text Files. Also, the default preferences are set to show .html docu- ments as they would appear in a browser, which won’t allow you to edit them. To fix this, check Ignore Rich Text Commands in HTML Files under the Rich Text Processing header.

28 CHAPTER 2 Understanding HTML and XHTML Connections



FIGURE 2.1

When you save the text in Listing

    1. as an HTML file and view it with a web browser, only the actual title and body text are displayed.


      NOTE

      Technically speaking, HTML5 will be the next web standard but it’s not quite at the point of full adoption. Current estimates put the full adoption of HTML sometime in 2011. However, as you learn about important fea- tures of HTML and XHTML in this book, I will include notes about how HTML5 features might differ.

      LISTING 2.1 Continued

      image

      Anchors, and the text He called Other Stuff. And the whole thing together was the first Web Page.

      </p>

      </body>

      </html>

      image


      image


      In Listing 2.1, as in every HTML page, the words starting with < and end- ing with > are actually coded commands. These coded commands are called HTML tags because they “tag” pieces of text and tell the web brows- er what kind of text it is. This allows the web browser to display the text appropriately.


      The first few lines of code in the web page serve as standard boilerplate code that you will include in all of your pages. This code actually identifies the page as a valid XHTML 1.1 document, which means that, technically, the web page is an XHTML page. All the pages developed throughout the book are XHTML 1.1 pages. Because XHTML is a more structured version of HTML, it’s still okay to generally refer to all the pages in the book as HTML pages. By targeting XHTML 1.1 with your code, you are developing web pages that adhere to the very latest web standards. This is a good thing!

      HTML Tags Every XHTML Web Page Must Have 29


      Before you learn the meaning of the HTML tags used in Listing 2.1, you might want to see exactly how I went about creating and viewing the document itself. Follow these steps:


      1. Type all the text in Listing 2.1, including the HTML tags, in Windows Notepad (or use Macintosh TextEdit or another text editor of your choice).


      2. Select File, Save As. Be sure to select plain text (or ASCII text) as the file type.


      3. Name the file firstpage.html.


      4. Choose the folder on your hard drive where you would like to keep your web pages—and remember which folder you choose! Click the Save or OK button to save the file.


      5. Now start your favorite web browser. (Leave Notepad running, too, so you can easily switch between viewing and editing your page.)


In Internet Explorer, select File, Open and click Browse. If you’re using Firefox, select File, Open File. Navigate to the appropriate folder and select the firstpage.html file. Some browsers and operating systems will also enable you to drag and drop the firstpage.html file onto the browser window to view it.


Voilà! You should see the page shown in Figure 2.1.


image

TRY IT YOURSELF


Creating and Viewing a Basic Web Page


If you have obtained a web hosting account, you could use FTP at this point to transfer the firstpage.html file to the web server. In fact, from this chapter forward, the instructions will assume you have a hosting provider and are comfortable sending files back and forth via FTP; if that is not the case, please review the first chapter before moving on. Or, if you are con- sciously choosing to work with files locally (without a web host), be pre- pared to adjust the instructions to suit your particular needs (such as ignoring the commands “transfer the files” and “type in the URL”).


HTML Tags Every XHTML Web Page Must Have


The time has come for the secret language of HTML tags to be revealed to you. When you understand this language, you will have creative powers far beyond those of other humans. Don’t tell the other humans, but it’s really pretty easy.

NOTE

You don’t need to be connected to the Internet to view a web page stored on your own computer. By default, your web browser tries to connect to the Internet every time you start it, which makes sense most of the time. However, this can be a hassle if you’re developing pages locally on your hard drive (offline) and you keep getting errors about a page not being found. If you have a full-time web connection via a LAN, cable modem, or DSL, this is a moot point because the browser will never complain about being offline. Otherwise, the appro- priate disciplinary action will depend on your breed of browser; check the options under your browser’s Tools menu.

30 CHAPTER 2 Understanding HTML and XHTML Connections


NOTE

It isn’t terribly important that you understand concepts such as character encoding at this point. What is important is that you include the appropriate boiler- plate code in your pages so that they adhere to the latest web standards. As of this writing, XHTML 1.1 is a web standard. HTML5 is not yet a web stan- dard, but if you were creating an HTML5 document, these lines at the beginning of your HTML file would not be necessary.


NOTE

The XML/XHTML boilerplate code isn’t strictly required for you to create web pages. You can delete the opening lines of code in the example so that the page starts with the <html> tag and it will still open fine in a web browser. The extra code is included to ensure your pages are up to date with the current web standards. Additionally, the extra code enables you to validate your web pages for accuracy, which you’ll learn how to do a bit later in this chapter.

Before you get into the HTML tags, let’s first address the messy-looking code at the top of Listing 2.1. The first line indicates that the HTML docu- ment is, in fact, an XML document:

<?xml version=”1.0” encoding=”UTF-8”?>


The version of XML is set to 1.0, which is fairly standard, as is the type of character encoding (UTF-8).


The second and third lines of code in Listing 2.1 are even more complicat- ed looking:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN”

“http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”>


Again, the specifics of this code aren’t terribly important as long as you remember to include the code at the start of your pages. This code identi- fies the document as being XHTML 1.1, which then allows web browsers to make sure the code meets all the requirements of XHTML 1.1.


Most HTML tags have two parts: an opening tag, which indicates where a piece of text begins, and a closing tag, which indicates where the piece of text ends. Closing tags start with a / (forward slash) just after the < sym- bol.


Another type of tag is the empty tag, which is unique in that it doesn’t include a pair of matching opening and closing tags. Instead, an empty tag consists of a single tag that starts with a < and ends with a / just before the

> symbol.


Following is a quick summary of these three tags just to make sure you understand the role each plays:

. An opening tag is an HTML tag that indicates the start of an HTML command; the text affected by the command appears after the open- ing tag. Opening tags always begin with < and end with >, as in

<html>.


. A closing tag is an HTML tag that indicates the end of an HTML com- mand; the text affected by the command appears before the closing tag. Closing tags always begin with </ and end with >, as in </html>.


. An empty tag is an HTML tag that issues an HTML command with- out enclosing any text in the page. Empty tags always begin with < and end with />, as in <br /> and <img />.

Organizing a Page with Paragraphs and Line Breaks 31


For example, the <body> tag in Listing 2.1 tells the web browser where the actual body text of the page begins, and </body> indicates where it ends. Everything between the <body> and </body> tags will appear in the main display area of the web browser window, as shown in Figure 2.1.


The very top of the browser window (refer to Figure 2.1) shows title text, which is any text that is located between <title> and </title>. The title text is also used to identify the page on the browser’s Bookmarks or Favorites menu, depending on which browser you use. It’s important to provide titles for your pages so that visitors to the page can properly book- mark them for future reference.


You will use the <body> and <title> tag pairs in every HTML page you create because every web page needs a title and body text. You will also use the <html> and <head> tag pairs, which are the other two tags shown in Listing 2.1. Putting <html> at the very beginning of a document simply indicates that the document is a web page. The </html> at the end indi- cates that the web page is over.


Within a page, there is a head section and a body section. Each section is identified by <head> and <body> tags. The idea is that information in the head of the page somehow describes the page but isn’t actually displayed by a web browser. Information placed in the body, however, is displayed by a web browser. The <head> tag always appears near the beginning of the HTML code for a page, just after the opening <html> tag.


The <title> tag pair used to identify the title of a page appears within the head of the page, which means it is placed after the opening <head> tag and before the closing </head> tag. In upcoming chapters, you’ll learn about some other advanced header information that can go between

<head> and </head>, such as style sheet rules that are used to format the page, as well as the JavaScript you’ll learn to write and embed.


The <p> tag used in Listing 2.1 encloses a paragraph of text. You should enclose your chunks of text in the appropriate container tags whenever possible.


Organizing a Page with Paragraphs and Line Breaks


When a web browser displays HTML pages, it pays no attention to line endings or the number of spaces between words. For example, the top ver- sion of the poem shown in Figure 2.2 appears with a single space between


NOTE

You no doubt noticed in Listing

2.1 that there is some extra code associated with the

<html> tag. This code consists of two attributes (xmlns and xml:lang), which are used to specify additional information related to the tag. These two attributes are standard require- ments of all XHTML web pages; the former defines the XML namespace, whereas the latter defines the language of the content. Throughout this book, a standard namespace is defined, and the English lan- guage is used. If you are writing in a different language, replace the “en” (for English) with the language identifier relevant to you.


TIP

image

You might find it convenient to create and save a bare-bones page (also known as a skeleton page, or template) with just the opening and closing <html>,

<head>, <title>, and <body> tags, similar to the document used in Listing 2.1. You can then open that document as a starting point whenever you want to make a new web page and save yourself the trouble of typing all those obligatory tags every time.

32 CHAPTER 2 Understanding HTML and XHTML Connections


all words, even though that’s not how it’s entered in Listing 2.2. This is because extra whitespace in HTML code is automatically reduced to a sin- gle space. Additionally, when the text reaches the edge of the browser win- dow, it automatically wraps to the next line, no matter where the line breaks were in the original HTML file.


FIGURE 2.2

When the HTML in Listing 2.2 is viewed as a web page, line and paragraph breaks only appear where there are <br /> and <p> tags.


image


LISTING 2.2 HTML Containing Paragraph and Line Breaks

image

<?xml version=”1.0” encoding=”UTF-8”?>

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN”

“http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”>


<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en”>

<head>

<title>The Advertising Agency Song</title>

</head>


<body>

<p>

When your client’s hopping mad, put his picture in the ad.


If he still should prove refractory, add a picture of his factory.


</p>


<hr />


<p>

When your client’s hopping mad,<br /> put his picture in the ad.

Organizing a Page with Paragraphs and Line Breaks 33


LISTING 2.2 Continued

image

</p>

<p>

If he still should prove refractory,<br /> add a picture of his factory.

</p>

</body>

</html>

image


You must use HTML tags if you want to control where line and paragraph breaks actually appear. When text is enclosed within the <p></p> container tags, a line break will be assumed after the closing tag. In later chapters, you will learn to control the height of the line break using CSS. The <br /> tag forces a line break within a paragraph. Unlike the other tags you’ve seen so far, <br /> doesn’t require a closing </br> tag—this is one of those empty tags discussed earlier. Although HTML 4 does not require the / in empty tags, XHTML does and future standards will, so it’s important for you to stick to the latest standards and create web pages that are coded properly. Always code empty tags so that they end with />.


The poem in Listing 2.2 and Figure 2.2 shows the <br /> and <p> tags being used to separate the lines and verses of an advertising agency song. You might have also noticed the <hr /> tag in the listing, which causes a horizontal rule line to appear on the page (see Figure 2.2). Inserting a hori- zontal rule with the <hr /> tag also causes a line break, even if you don’t include a <br /> tag along with it. Like <br />, the <hr /> horizontal rule tag is an empty tag and therefore never gets a closing </hr> tag.

CAUTION

You might come across a lot of web content that includes <br> instead of <br />. Or you might see other content that does not include the closing

</p> tag. Just remember there is a lot of antiquated web con- tent floating around the Internet, and just because you see it in use doesn’t mean it’s correct. Save yourself a lot of future work and frustration by adhering to the standards you learn in this book. Developing clean HTML coding habits is a very important part of becoming a successful web designer.



Take a passage of text and try your hand at formatting it as proper HTML.


  1. Add <html><head><title>My Title</title></head><body> to the beginning of the text (using your own title for your page instead of My Title). Also include the boilerplate code at the top of the page that takes care of meeting the requirements of XHTML.

  2. Add </body></html> to the very end of the text.


  3. Add a <p> tag at the beginning of each paragraph and a </p> tag at the end of each paragraph.

  4. Use <br /> tags anywhere you want single-spaced line breaks.


  5. Use <hr /> to draw horizontal rules separating major sections of text, or wherever you’d like to see a line across the page.

    image

    TRY IT YOURSELF


    Formatting Text in HTML

    34 CHAPTER 2 Understanding HTML and XHTML Connections


    image

    TRY IT YOURSELF


    Formatting Text in HTML

    continued


    CAUTION

    If you are using a word proces- sor to create the web page, be sure to save the HTML file in plain-text or ASCII format.


  6. Save the file as mypage.html (using your own filename instead of mypage).

  7. Open the file in a web browser to see your web content. (Send the file via FTP to your web hosting account, if you have one.)


  8. If something doesn’t look right, go back to the text editor to make cor- rections and save the file again (and send it to your web hosting account, if applicable). You then need to click Reload/Refresh in the browser to see the changes you made.


Organizing Your Content with Headings


When you browse through web pages on the Internet, you’ll notice that many of them have a heading at the top that appears larger and bolder than the rest of the text. Listing 2.3 is sample code and text for a simple web page containing an example of a heading as compared to normal paragraph text. Any text between <h1> and </h1> tags will appear as a large heading. Additionally, <h2> and <h3> make progressively smaller headings, and so on as far down as <h6>.


LISTING 2.3 Heading Tags

image

<?xml version=”1.0” encoding=”UTF-8”?>

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN”

“http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”>


<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en”>

<head>

<title>My Widgets</title>

</head>


<body>

<h1>My Widgets</h1>

<p>My widgets are the best in the land. Continue reading to learn more about my widgets.</p>


<h2>Widget Features</h2>

<p>If I had any features to discuss, you can bet I’d do it here.</p>


<h3>Pricing</h3>

<p>Here, I would talk about my widget pricing.</p>

Organizing Your Content with Headings 35

LISTING 2.3 Continued NOTE

image

<h3>Comparisons</h3>

<p>Here, I would talk about how my widgets compare to my competitor’s widgets.</p>


</body>

</html>

image

By now you’ve probably caught on to the fact that HTML code is often indented by its author to reveal the relationship between different parts of the

HTML document. This indenta-

tion is entirely voluntary—you

As you can see in Figure 2.3, the HTML that creates headings couldn’t be simpler. In this example, the phrase “My Widgets” is prominently dis- played using the <h1> tag. To create the biggest (level 1) heading, just put an <h1> tag at the beginning and a </h1> tag at the end of the text you want to use as a heading. For a slightly smaller (level 2) heading—for information that is of lesser importance than the title— use the <h2> and

</h2> tags around your text. For content that should appear even less prominently than a level 2 heading, use the <h3> and </h3> tags around your text.


However, bear in mind that your headings should follow a content hierar- chy; use only one level 1 heading, have one (or more) level 2 headings after the level 1 heading, use level 3 headings directly after level 2 headings,

and so on. Do not fall into the trap of assigning headings to content just to make that content display a certain way. Instead, ensure that you are cate- gorizing your content appropriately (as a main heading, a secondary head- ing, and so on), while using display styles to make that text render a par- ticular way in a web browser.

could just as easily run all the tags together with no spaces or line breaks and they would still look fine when viewed in a browser. The indentations are for you so that you can quickly look at a page full of code and understand how it fits together. Indenting your code is a very good web design habit and ulti- mately makes your pages easi- er to maintain.


image

FIGURE 2.3

The use of three levels of head- ings shows the hierarchy of con- tent on this sample product page.

36 CHAPTER 2 Understanding HTML and XHTML Connections


NOTE

On many web pages nowadays, graphical images of ornately rendered letters and logos are often used in place of the ordi- nary text headings discussed in this chapter. However, using text headings is one of many search engine optimization (SEO) tips that you will learn about in Chapter 28, “Helping People Find Your Web Pages.” Search engines look at heading tags to see how you organize your content; they give higher preference to content that you have indicated is more impor- tant (for example, a level 1 heading) versus content that you indicate is of lesser impor- tance (lower-level headings).


CAUTION

image

Don’t forget that anything placed in the head of a web page is not intended to be viewed on the page, whereas everything in the body of the page is intended for viewing.

Theoretically, you can also use <h4>, <h5>, and <h6> tags to make progres- sively less important headings, but these aren’t used very often. Web browsers seldom show a noticeable difference between these headings and the <h3> headings anyway, and content usually isn’t displayed in such a manner as to need six levels of headings to show the content hierarchy.


It’s important to remember the difference between a title and a heading. These two words are often interchangeable in day-to-day English, but when you’re talking HTML, <title> gives the entire page an identifying name that isn’t displayed on the page itself; it’s displayed only on the browser window’s title bar. The heading tags, on the other hand, cause some text on the page to be displayed with visual emphasis. There can be only one <title> per page and it must appear within the <head> and

</head> tags, whereas you can have as many <h1>, <h2>, and <h3> head- ings as you want, in any order that suits your fancy. However, as I men- tioned before, you should use the heading tags to keep tight control over content hierarchy; do not use headings as a way to achieve a particular look because that’s what CSS is for.


You’ll learn to take complete control over the appearance of text on your web pages in Parts II and III of this book. Short of taking exacting control of the size, family, and color of fonts, headings provide the easiest and most popular way to draw extra attention to important text.


Validating Your Web Content


In the first chapter, I discussed ways to test your pages; one very important way to test your pages is to validate them. Think of it this way: It’s one thing to design and draw a beautiful set of house plans, but it’s quite another for an architect to stamp it as a safe structure suitable for construc- tion. Validating your web pages is a similar process; in this case, however, the architect is an application—not a person.


In brief, validation is the process of testing your pages with a special appli- cation that searches for errors and makes sure your pages follow the strict XHTML standard. Validation is simple. In fact, the standards body respon- sible for developing web standards—the World Wide Web Consortium (W3C)—offers an online validation tool you can use. To validate a page, follow this URL: http://validator.w3.org/. The W3C Markup Validation Service is shown in Figure 2.4.

Validating Your Web Content 37


image

FIGURE 2.4

The W3C Markup Validation Service enables you to validate an HTML (XHTML) docu- ment to ensure it has been coded accurately.


If you’ve already published a page online, you can use the Validate by URI tab. Use the Validate by File Upload tab to validate files stored on your local computer file system. The Validate by Direct Input tab enables you to paste the contents of a file from your text editor. If all goes well, your page will get a passing report (see Figure 2.5).


If the W3C Markup Validation Service encounters an error in your web page, it will provide specific details (including the line numbers of the offending code). This is a great way to hunt down problems and rid your pages of buggy code. Validation not only informs you whether your pages are constructed properly, it also assists you in finding and fixing problems before you post pages for the world to see.


Peeking at Other Designers’ Pages

Given the visual and sometimes audio pizzazz present in many popular web pages, you proba- bly realize that the simple pages described in this chapter are only the tip of the HTML ice- berg. Now that you know the basics, you might surprise your- self with how much of the rest you can pick up just by looking at other people’s pages on the Internet. You can see the HTML for any page by right-clicking and selecting View Source in any web browser.

Don’t worry if you aren’t yet able to decipher what some HTML tags do or exactly how to use them yourself. You’ll find out about all those things in the next few chapters. However, sneaking a preview now will show you the tags that you do know in action and give you a taste of what you’ll soon be able to do with your web pages.


TIP

image

Some web development tools include built-in validation features you can use in lieu of the W3C Markup Validation Service. Some examples include browser exten- sions such as Firebug (http:// getfirebug.com/) and HTML Validator (http://users.skynet. be/mgueury/mozilla/), but many other programs offer similar functionality; check your user documentation.

38 CHAPTER 2 Understanding HTML and XHTML Connections


FIGURE 2.5

If a page passes the W3C Markup Validation Service, you know it is ready for prime time.


image


The Scoop on HTML, XML, XHTML, and HTML5


In its early days, HTML was great because it allowed scientists to share information over the Internet in an efficient and relatively structured man- ner. It wasn’t until later that graphical web browsers were created and HTML started being used to code more than scientific papers. HTML quickly went from a tidy little markup language for researchers to an online publishing language. After it was established that HTML could be jazzed up for graphical browsing, the creators of web browsers went crazy by adding lots of nifty features to the language. Although these new fea- tures were neat at first, they compromised the original design of HTML and introduced inconsistencies when it came to how browsers displayed web pages; new features worked on only one browser or another, and you were out of luck if you happened to be running the wrong browser. HTML started to resemble a bad remodeling job of a house—a job done by too many contractors and without proper planning. As it turns out, some of the browser-specific features created during this time have now been adopted as standards whereas others have been dropped completely.


As with most revolutions, the birth of the Web was very chaotic, and the modifications to HTML reflected that chaos. Over the years, a significant

The Scoop on HTML, XML, XHTML, and HTML5 39


effort has been made to reel in the inconsistencies of HTML and restore some order to the language. The problem with disorder in HTML is that it results in web browsers having to guess at how a page is to be displayed, which is not a good thing. Ideally, a web page designer should be able to define exactly how a page is to look and have it look the same regardless of what kind of browser or operating system someone is using. Better still, a designer should be able to define exactly what a page means and have that page look consistent across different browsers and platforms. This utopia is still off in the future somewhere, but a markup language called XML (Extensible Markup Language) began to play a significant role in leading us toward it.


XML is a general language used to create specific languages, such as HTML. It might sound a little strange, but it really just means that XML provides a basic structure and set of rules to which any markup language must adhere. Using XML, you can create a unique markup language to describe just about any kind of information, including web pages. Knowing that XML is a language for creating other markup languages, you could create your own version of HTML using XML. You could even create a markup language called BCCML (Bottle Cap Collection Markup Language), for example, which you could use to create and manage your extensive collection of rare bottle caps. The point is that XML lays the ground rules for organizing information in a consistent manner, and that information can be anything from web pages to bottle caps.


You might be thinking that bottle caps don’t have anything to do with the Web, so why mention them? The reason is that XML is not entirely about web pages. XML is actually broader than the Web in that it can be used to represent any kind of information on any kind of computer. If you can visualize all the information whizzing around the globe among computers, mobile phones, handheld computers, televisions, and radios, you can start to understand why XML has much broader applications than just cleaning up web pages. However, one of the first applications of XML is to restore some order to the Web, which is why XML is relevant to learning HTML.


If XML describes data better than HTML, does it mean that XML is set to upstage HTML as the markup language of choice for the Web? No. XML is not a replacement for HTML; it’s not even a competitor of HTML. XML’s impact on HTML has to do with cleaning up HTML. HTML is a relatively unstructured language that benefits from the rules of XML. The natural merg- er of the two technologies resulted in HTML’s adherence to the rules and structure of XML. To accomplish this merger, a new version of HTML was

40 CHAPTER 2 Understanding HTML and XHTML Connections


formulated that follows the stricter rules of XML. The new XML-compliant version of HTML is known as XHTML. Fortunately for you, you’ll actually be learning XHTML throughout this book because it is really just a cleaner ver- sion of HTML.


You might have heard about HTML5, which is touted as the next web stan- dard. It will be, but not quite yet. When it does become a web standard, it will not render XHTML useless—HTML5 is not a replacement for XHTML, but instead is a major revision of HTML 4. In other words, XHTML and HTML5 can coexist on the Web, and web browsers that currently support XHTML will also (one day) support HTML5 as well.


The goal of this book is to guide you through the basics of web publishing, using XHTML and CSS as the core languages of those pages. However, whenever possible, I will note elements of the languages that are not pres- ent in HTML5, should you want to design your content for even further sustainability. If you gain a solid understanding of web publishing and the ways in which CSS works with the overall markup language of the page (be it XHTML or HTML5), you will be in a good position if you decide you want to move from XHTML to HTML5.


Summary


This chapter introduced the basics of what web pages are and how they work, including the history and differences between HTML and XHTML. You learned that coded HTML commands are included in a text file, and that typing HTML text yourself is better than using a graphical editor to create HTML commands for you—especially when you’re learning HTML.


You were introduced to the most basic and important HTML tags. By adding these coded commands to any plain-text document, you can quick- ly transform it into a bona fide web page. You learned that the first step in creating a web page is to put a few obligatory HTML tags at the beginning and end, including a title for the page. You then mark where paragraphs and lines end and add horizontal rules and headings if you want them. Table 2.1 summarizes all the tags introduced in this chapter.

Summary 41


TABLE 2.1 HTML Tags Covered in Chapter 2

Tag Function

<html>...</html> Encloses the entire HTML document.

image

image

image

<head>...</head> Encloses the head of the HTML document. Used with-

in the <html> tag pair.

image

image

<title>...</title> Indicates the title of the document. Used within the

<head> tag pair.

image

image

<body>...</body> Encloses the body of the HTML document. Used with-

in the <html> tag pair.

image

image

<p>...</p> A paragraph; skips a line between paragraphs.

image

image

<br /> A line break.

image

image

<hr /> A horizontal rule line.

image

image

<h1>...</h1> A first-level heading.

image

image

<h2>...</h2> A second-level heading.

image

image

<h3>...</h3> A third-level heading.

image

image

<h4>...</h4> A fourth-level heading (seldom used).

image

image

image

<h5>...</h5> A fifth-level heading (seldom used).

<h6>...</h6> A sixth-level heading (seldom used).


image

Finally, you learned about XML and XHTML, how they relate to HTML, and what HTML5 means in relation to what it is you’re learning here.

image

42 CHAPTER 2 Understanding HTML and XHTML Connections


Q&A


Q. I’ve created a web page, but when I open the file in my web browser, I see all the text including the HTML tags. Sometimes I even see weird gobbledygook characters at the top of the page! What did I do wrong?


A. You didn’t save the file as plain text. Try saving the file again, being careful to save it as Text Only or ASCII Text. If you can’t quite figure out how to get your word processor to do that, don’t stress. Just type your HTML files in Notepad or TextEdit instead and everything should work just fine. (Also, always make sure that the filename of your web page ends in .html or .htm.)


Q. I’ve seen web pages on the Internet that don’t have <html> tags at the beginning. You said pages always have to start with <html>. What’s the deal?


  1. Many web browsers will forgive you if you forget to include the <html> tag and will display the page correctly anyway. However, it’s a very good idea to include it because some software does need it to identify the page as valid HTML. Besides, you want your pages to be bona fide XHTML pages so that they conform to the latest web standards.


    Workshop


    The workshop contains quiz questions and exercises to help you solidify your understanding of the material covered. Try to answer all questions before looking at the “Answers” section that follows.


    Quiz


    1. What four tags are required in every HTML page?


    2. What HTML tags and text would you use to produce the following web content:


      . A small heading with the words We are Proud to Present


      . A horizontal rule across the page


      . A large heading with the one word Orbit


      . A medium-sized heading with the words The Geometric Juggler


      . Another horizontal rule

      image

      Workshop 43


    3. What code would you use to create a complete HTML web page with the title Foo Bar, a heading at the top that reads Happy Hour at the Foo Bar, followed by the words Come on down! in regular type?


Answers

  1. <html>, <head>, <title>, and <body> (along with their closing tags,

    </html>, </head>, </title>, and </body>).

  2. Your code would look like this:


    <h3>We are Proud to Present</h3>

    <hr />

    <h1>Orbit</h1>

    <h2>The Geometric Juggler</h2>

    <hr />


  3. Your code would look like this:


<?xml version=”1.0” encoding=”UTF-8”?>

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN”

“http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”>


<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en”>

<head>

<title>Foo Bar</title>

</head>


<body>

<h1>Happy Hour at the Foo Bar</h1>

<p>Come on Down!</p>

</body>

</html>


Exercises


. Even if your main goal in reading this book is to create web content for your business, you might want to make a personal web page just for practice. Type a few paragraphs to introduce yourself to the world and use the HTML tags you’ve learned in this chapter to make them into a web page.


. Throughout the book, you’ll be following along with the code examples and making pages of your own. Take a moment now to set up a basic document template containing the XML declaration, doctype declara- tion, and tags for the core HTML document structure. That way, you can be ready to copy and paste that information whenever you need it.


This page intentionally left blank

image


CHAPTER 3

Understanding Cascading Style Sheets


In the previous chapter, you learned the basics of HTML and XHTML, including how to set up a skeletal HTML template for all your web con- tent. In this chapter, you will learn how to fine-tune the display of your web content using Cascading Style Sheets (CSS).


The concept behind style sheets is simple: You create a style sheet docu- ment that specifies the fonts, colors, spacing, and other characteristics that establish a unique look for a website. You then link every page that should have that look to the style sheet, instead of specifying all those styles repeatedly in each separate document. Therefore, when you decide to change your official corporate typeface or color scheme, you can modify all your web pages at once just by changing one or two entries in your style sheet rather than changing them in all of your static web files. So, a style sheet is a grouping of formatting instructions that controls the appearance of several HTML pages at once.


Style sheets enable you to set a great number of formatting characteristics, including exacting typeface controls, letter and line spacing, and margins and page borders, just to name a few. Style sheets also enable sizes and other measurements to be specified in familiar units, such as inches, mil- limeters, points, and picas. You can also use style sheets to precisely posi- tion graphics and text anywhere on a web page, either at specific coordi- nates or relative to other items on the page.


In short, style sheets bring a sophisticated level of display to the Web. And they do so—you’ll pardon the expression—with style.

WHAT YOU’LL LEARN IN THIS CHAPTER:


. How to create a basic style sheet

. How to use style classes

. How to use style IDs

. How to construct internal style sheets and inline styles


NOTE

If you have three or more web pages that share (or should share) similar formatting and fonts, you might want to create a style sheet for them as you read this chapter. Even if you choose not to create a com- plete style sheet, you’ll find it helpful to apply styles to individ- ual HTML elements directly within a web page.

46 CHAPTER 3 Understanding Cascading Style Sheets


How CSS Works


The technology behind style sheets is called CSS, which stands for Cascading Style Sheets. CSS is a language that defines style constructs such as fonts, colors, and positioning, which are used to describe how informa- tion on a web page is formatted and displayed. CSS styles can be stored directly in an HTML web page or in a separate style sheet file. Either way, style sheets contain style rules that apply styles to elements of a given type. When used externally, style sheet rules are placed in an external style sheet document with the file extension .css.


NOTE

image

You might notice that I use the term element a fair amount in this chapter (and I will for the rest of the book, for that mat- ter). An element is simply a piece of information (content) in a web page, such as an image, a paragraph, or a link. Tags are used to code elements, and you can think of an element as a tag complete with descriptive information (attributes, text, images, and so on) within the tag.


A style rule is a formatting instruction that can be applied to an element on a web page, such as a paragraph of text or a link. Style rules consist of one or more style properties and their associated values. An internal style sheet is placed directly within a web page, whereas an external style sheet exists in a separate document and is simply linked to a web page via a special tag— more on this tag in a moment.


The cascading part of the name CSS refers to the manner in which style sheet rules are applied to elements in an HTML document. More specifical- ly, styles in a CSS style sheet form a hierarchy in which more specific styles override more general styles. It is the responsibility of CSS to determine the precedence of style rules according to this hierarchy, which establishes a cascading effect. If that sounds a bit confusing, just think of the cascading mechanism in CSS as being similar to genetic inheritance, in which general traits are passed from parents to a child, but more specific traits are entire- ly unique to the child. Base style rules are applied throughout a style sheet but can be overridden by more specific style rules.


A quick example should clear things up. Take a look at the following code to see whether you can tell what’s going on with the color of the text:

<div style=”color:green”> This text is green.

<p style=”color:blue”>This text is blue.</p>

<p>This text is still green.</p>

</div>


In the previous example, the color green is applied to the <div> tag via the color style property. Therefore, the text in the <div> tag is colored green. Because both <p> tags are children of the <div> tag, the green text style

A Basic Style Sheet 47


cascades down to them. However, the first <p> tag overrides the color style and changes it to blue. The end result is that the first line (not surrounded by a paragraph tag) is green, the first official paragraph is blue, and the second official paragraph retains the cascaded green color.


If you made it through that description on your own, congratulations. If you understood it after I explained it in the text, congratulations to you as well. Understanding CSS isn’t like understanding rocket science, although many people will try to convince you that it is (so that they can charge high consultation fees, most likely!).


Like many web technologies, CSS has evolved over the years. The original version of CSS, known as Cascading Style Sheets Level 1 (CSS1) was created in 1996. The later CSS 2 standard was created in 1998, and CSS 2 is still in use today. All modern web browsers support CSS 2, and you can safely use CSS 2 style sheets without too much concern. So when I talk about CSS throughout the book, I’m referring to CSS 2.


You’ll find a complete reference guide to CSS at http://www.w3.org/ Style/CSS/. The rest of this chapter explains how to put CSS to good use.


A Basic Style Sheet


Despite their intimidating power, style sheets can be simple to create. Consider the web pages shown in Figure 3.1 and Figure 3.2. These pages share several visual properties that could be put into a common style sheet:

. They use a large, bold Verdana font for the headings and a normal size and weight Verdana font for the body text.


. They use an image named logo.gif floating within the content and on the right side of the page.


. All text is black except for subheadings, which are purple.


. They have margins on the left side and at the top.


. There is vertical space between lines of text.


. The footnotes are centered and in small print.

48 CHAPTER 3 Understanding Cascading Style Sheets


FIGURE 3.1

This page uses a style sheet to fine-tune the appearance and spacing of the text and images.


FIGURE 3.2

This page uses the same style sheet as the one shown in Figure 3.1, thus maintaining a consistent look and feel.


image


image


Listing 3.1 shows the code for the style sheet specifying these properties.

A Basic Style Sheet 49


LISTING 3.1 A Single External Style Sheet

image

body {

font-size: 10pt;

font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; color: black;

line-height: 14pt; padding-left: 5pt; padding-right: 5pt; padding-top: 5pt;

}


h1 {

font: 14pt Verdana, Geneva, Arial, Helvetica, sans-serif; font-weight: bold;

line-height: 20pt;

}


p.subheader {

font-weight: bold; color: #593d87;

}


img {

padding: 3pt; float: right;

}


a {

text-decoration: none;

}


a:link, a:visited { color: #8094d6;

}


a:hover, a:active { color:#FF9933;

}


div.footer { font-size: 9pt;

font-style: italic; line-height: 12pt; text-align: center; padding-top: 30pt;

}

image


This might initially appear to be a lot of code, but if you look closely, you’ll see that there isn’t a lot of information on each line of code. It’s fairly stan- dard to place individual style rules on their own line to help make style

50 CHAPTER 3 Understanding Cascading Style Sheets


sheets more readable, but that is a personal preference; you could put all the rules on one line as long as you kept using the semicolon to separate each rule (more on that in a bit). Speaking of code readability, perhaps the first thing you noticed about this style sheet code is that it doesn’t look anything like normal HTML code. CSS uses a language all its own to speci- fy style sheets.


Of course, the listing includes some familiar HTML tags. As you might guess, body, h1, p, img, a, and div in the style sheet refer to the correspon- ding tags in the HTML documents to which the style sheet will be applied. The curly braces after each tag name contain the specifications for how all content within that tag should appear.


In this case, the style sheet says that all body text should be rendered at a size of 10 points, in the Verdana font (if possible), with the color black, and 14 points between lines. If the user does not have the Verdana font installed, the list of fonts in the style sheet represents the order in which the browser should search for fonts to use: Geneva, then Arial, and then Helvetica. If the user has none of those fonts, the browser will use whatev- er default sans serif font is available. Additionally, the page should have left, right, and top margins of 5 points each.


Any text within an <h1> tag should be rendered in boldface Verdana at a size of 14 points. Moving on, any paragraph that uses only the <p> tag will inherit all the styles indicated by the body element. However, if the <p> tag uses a special class named subheader, the text will appear bold and in the color #593d87 (a purple color).


NOTE

image

You can specify font sizes as large as you like with style sheets, although some display devices and printers will not correctly handle fonts larger than 200 points.


The pt after each measurement in Listing 3.1 means points (there are 72 points in an inch). If you prefer, you can specify any style sheet measure- ment in inches (in), centimeters (cm), pixels (px), or widths-of-a-letter-m, which are called ems (em).


You might have noticed that each style rule in the listing ends with a semi- colon (;). Semicolons are used to separate style rules from each other. It is therefore customary to end each style rule with a semicolon, so you can easily add another style rule after it.


To link this style sheet to HTML documents, include a <link /> tag in the

<head> section of each document. Listing 3.2 shows the HTML code for the page shown in Figure 3.1. It contains the following <link /> tag:

<link rel=”stylesheet” type=”text/css” href=”styles.css” />

A Basic Style Sheet 51

This assumes that the style sheet is stored under the name styles.css in the same folder as the HTML document. As long as the web browser sup- ports style sheets—and all modern browsers do support style sheets—the properties specified in the style sheet will apply to the content in the page without the need for any special HTML formatting code. This confirms the ultimate goal of XHTML, which is to provide a separation between the content in a web page and the specific formatting required to display that content.


LISTING 3.2 HTML Code for the Page Shown in Figure 3.1

image

<?xml version=”1.0” encoding=”UTF-8”?>

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN”

“http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”>


<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en”>

<head>

<title>About BAWSI</title>

<link rel=”stylesheet” type=”text/css” href=”styles.css” />

</head>

<body>

<h1>About BAWSI</h1>

<p><img src=”logo.gif” alt=”BAWSI logo”/>The Bay Area Women’s Sports Initiative (BAWSI) is a public benefit, nonprofit corporation with a mission to create programs and partnerships through which women athletes bring health, hope and wholeness to our community. Founded in 2005 by Olympic and World Cup soccer stars Brandi Chastain and Julie Foudy and Marlene Bjornsrud, former general manager of the San Jose CyberRays women’s professional soccer team, BAWSI provides a meaningful path for women athletes to become a more visible and valued part of the Bay Area sports culture.</p>

<p class=”subheader”>BAWSI’s History</p>

<p>The concept of BAWSI was inspired by one of the most spectacular achievements in women’s sports history and born out of one its biggest disappointments... </p>

<p><a href=”secondpage.html”>[continue reading]</a></p>

<div class=”footer”>Copyright &copy; 2005-2009 BAWSI (www.bawsi.org). All rights reserved. Used with permission.</div>

</body>

</html>

image


The code in Listing 3.2 is interesting because it contains no formatting of any kind. In other words, there is nothing in the HTML code that dictates how the text and images are to be displayed—no colors, no fonts, nothing. Yet the page is carefully formatted and rendered to the screen, thanks to the link to the external style sheet, styles.css. The real benefit to this


TIP

image

In most web browsers, you can view the style rules in a style sheet by opening the .css file and choosing Notepad or anoth- er text editor as the helper application to view the file. (To determine the name of the .css file, look at the HTML source of any web page that links to it.) To edit your own style sheets, just use a text editor.


NOTE

image

Although CSS is widely support- ed in all modern web browsers, it hasn’t always enjoyed such wide support. Additionally, not every browser’s support of CSS is flawless. To find out about how major browsers compare to each other in terms of CSS sup- port, take a look at this website: http://www.quirksmode.org/css/ contents.html.

52 CHAPTER 3 Understanding Cascading Style Sheets


approach is that you can easily create a site with multiple pages that main- tains a consistent look and feel. And you have the benefit of isolating the visual style of the page to a single document (the style sheet) so that one change impacts all pages.


image

TRY IT YOURSELF


Create a Style Sheet of Your Own


Starting from scratch, create a new text document called mystyles.css and add some style rules for the following basic HTML tags: <body>, <p>, <h1>, and <h2>. After your style sheet has been created, make a new HTML file that contains these basic tags. Play around with different style rules and see for yourself how simple it is to change entire blocks of text in paragraphs with one simple change in a style sheet file.


A CSS Style Primer


You now have a basic knowledge of CSS style sheets and how they are based on style rules that describe the appearance of information in web pages. The next few sections of this chapter provide a quick overview of some of the most important style properties and allow you to get started using CSS in your own style sheets.


CSS includes various style properties that are used to control fonts, colors, alignment, and margins, to name just a few. The style properties in CSS can be generally grouped into two major categories:

. Layout properties—Consist of properties that affect the positioning of elements on a web page, such as margins, padding, alignment, and so on


. Formatting properties—Consist of properties that affect the visual display of elements within a website, such as the font type, size, color, and so on


Layout Properties


CSS layout properties are used to determine how content is placed on a web page. One of the most important layout properties is the display property, which describes how an element is displayed with respect to other elements. There are four possible values for the display property:

A CSS Style Primer 53


image

. block—The element is displayed on a new line, as in a new paragraph.


image

. list-item—The element is displayed on a new line with a list-item mark (bullet) next to it.


image

. inline—The element is displayed inline with the current paragraph.


image

. none—The element is not displayed; it is hidden.


It’s easier to understand the display property if you visualize each ele- ment on a web page occupying a rectangular area when displayed—the display property controls the manner in which this rectangular area is dis- played. For example, the block value results in the element being placed on a new line by itself, whereas the inline value places the element next to the content just before it. The display property is one of the few style properties that can be applied in most style rules. Following is an example of how to set the display property:

display:block;


You control the size of the rectangular area for an element with the width and height properties. Like many size-related CSS properties, width and height property values can be specified in several different units of measurement:

image

. in—Inches


image

. cm—Centimeters


image

. mm—Millimeters


image

. px—Pixels


image

. pt—Points


You can mix and match units however you choose within a style sheet, but it’s generally a good idea to be consistent across a set of similar style prop- erties. For example, you might want to stick with points for font properties or pixels for dimensions. Following is an example of setting the width of an element using pixel units:

width: 200px;


Formatting Properties


CSS formatting properties are used to control the appearance of content on a web page, as opposed to controlling the physical positioning of the con- tent. One of the most popular formatting properties is the border property,


NOTE

The display property relies on a concept known as relative positioning, which means that elements are positioned rela- tive to the location of other ele- ments on a page. CSS also supports absolute positioning, which enables you to place an element at an exact location on a page independent of other elements. You’ll learn more about both of these types of positioning in Part III, “Advanced Web Page Design with CSS.”

54 CHAPTER 3 Understanding Cascading Style Sheets


which is used to establish a visible boundary around an element with a box or partial box. The following border properties provide a means of describing the borders of an element:

. border-width—The width of the border edge


. border-color—The color of the border edge


. border-style—The style of the border edge


. border-left—The left side of the border


. border-right—The right side of the border


. border-top—The top of the border


. border-bottom—The bottom of the border


. border—All the border sides


The border-width property is used to establish the width of the border edge. It is often expressed in pixels, as the following code demonstrates:

border-width:5px;


Not surprisingly, the border-color and border-style properties are used to set the border color and style. Following is an example of how these two properties are set:

border-color:blue; border-style:dotted;


The border-style property can be set to any of the following values:


. solid—A single-line border


. double—A double-line border


. dashed—A dashed border


. dotted—A dotted border


. groove—A border with a groove appearance


. ridge—A border with a ridge appearance


. inset—A border with an inset appearance


. outset—A border with an outset appearance


. none—No border

A CSS Style Primer 55


The default value of the border-style property is none, which is why ele- ments don’t have a border unless you set the border property to a different style. The most common border styles are the solid and double styles.


The border-left, border-right, border-top, and border-bottom proper- ties enable you to set the border for each side of an element individually. If you want a border to appear the same on all four sides, you can use the single border property by itself, which expects the following styles sepa- rated by a space: border-width, border-style, and border-color. Following is an example of using the border property to set a border that consists of two (double) red lines that are a total of 10 pixels in width:

border:10px double red;


Whereas the color of an element’s border is set with the border-color property, the color of the inner region of an element is set using the color and background-color properties. The color property sets the color of text in an element (foreground) and the background-color property sets the color of the background behind the text. Following is an example of setting both color properties to predefined colors:

color:black;

background-color:orange;


You can also assign custom colors to these properties by specifying the col- ors in hexadecimal (covered in more detail in Chapter 8, “Working with Colors, Images, and Multimedia”) or as RGB (Red, Green, Blue) decimal values, just as you do in HTML:

background-color:#999999; color:rgb(0,0,255);


You can also control the alignment and indentation of web page content without too much trouble. This is accomplished with the text-align and text-indent properties, as the following code demonstrates:

text-align:center; text-indent:12px;


After you have an element properly aligned and indented, you might be interested in setting its font. The following font properties are used to set the various parameters associated with fonts:

. font-family—The family of the font


. font-size—The size of the font


NOTE

The exception to the default border-style of none is when an image is placed within an

<a> tag so that it serves as a linked image. In that case, a solid border is automatically set by default. That’s why you often see linked images with the style border-style:none, which turns off the automatic border.

56 CHAPTER 3 Understanding Cascading Style Sheets


. font-style—The style of the font (normal or italic)


. font-weight—The weight of the font (light, medium, bold, and so on)


The font-family property specifies a prioritized list of font family names. A prioritized list is used instead of a single value to provide alternatives in case a font isn’t available on a given system. The font-size property spec- ifies the size of the font using a unit of measurement, usually points. Finally, the font-style property sets the style of the font and the font- weight property sets the weight of the font. Following is an example of set- ting these font properties:

font-family: Arial, sans-serif; font-size: 36pt;

font-style: italic; font-weight:medium;


Now that you know a whole lot more about style properties and how they work, refer back at Listing 3.1 and see whether it makes a bit more sense. Here’s a recap of the style properties used in that style sheet, which you can use as a guide for understanding how it works:

. font—Lets you set many font properties at once. You can specify a list of font names separated by commas; if the first is not available, the next is tried, and so on. You can also include the words bold and/or italic and a font size. Each of these font properties can be specified separately with font-family, font-size, font-weight, and font-style if you prefer.


. line-height—Also known in the publishing world as leading. This sets the height of each line of text, usually in points.


. color—Sets the text color using the standard color names or hexa- decimal color codes (see Chapter 8 for more details).


. text-decoration—Useful for turning link underlining off—simply set it to none. The values of underline, italic, and line-through are also supported. The application of styles to links is covered in more detail in Chapter 7, “Using External and Internal Links.”


. text-align—Aligns text to the left, right, or center, along with justifying the text with a value of justify.


. padding—Adds padding to the left, right, top, and bottom of an ele- ment; this padding can be in measurement units or a percentage of the page width. Use padding-left and padding-right if you want to add padding to the left and right of the element independently. Use

Using Style Classes 57


padding-top or padding-bottom to add padding to the top or bottom of the element, as appropriate. You’ll learn more about these style proper- ties in Chapters 9, “Working with Margins, Padding, Alignment, and Floating,” and 10, “Understanding the CSS Box Model and Positioning.”


Using Style Classes


This is a “teach yourself” book, so you don’t have to go to a single class to learn how to give your pages great style, although you do need to learn what a style class is. Whenever you want some of the text on your pages to look different from the other text, you can create what amounts to a custom- built HTML tag. Each type of specially formatted text you define is called a style class. A style class is a custom set of formatting specifications that can be applied to any element in a web page.


Before showing you a style class, I need to take a quick step back and clarify some CSS terminology. First off, a CSS style property is a specific style that can be assigned a value, such as color or font-size. You associate a style property and its respective value with elements on a web page by using a selector. A selector is used to identify tags on a page to which you apply styles. Following is an example of a selector, a property, and a value all included in a basic style rule:

h1 { font: 36pt Courier; }


In this code, h1 is the selector, font is the style property, and 36pt Courier is the value. The selector is important because it means that the font setting will be applied to all h1 elements in the web page. But maybe you want to differentiate between some of the h1 elements—what then? The answer lies in style classes.


Suppose you want two different kinds of <h1> headings for use in your doc- uments. You would create a style class for each one by putting the following CSS code in a style sheet:

h1.silly { font: 36pt Comic Sans; } h1.serious { font: 36pt Arial; }


Notice that these selectors include a period (.) after h1, followed by a descriptive class name. To choose between the two style classes, use the class attribute, like this:

<h1 class=”silly”>Marvin’s Munchies Inc. </h1>

<p>Text about Marvin’s Munchies goes here. </p>

58 CHAPTER 3 Understanding Cascading Style Sheets


Or you could use this:


<h1 class=”serious”>MMI Investor Information</h1>

<p>Text for business investors goes here.</p>


When referencing a style class in HTML code, simply specify the class name in the class attribute of an element. In the previous example, the words Marvin’s Munchies Inc. would appear in a 36-point Comic Sans font, assuming that you included a <link /> to the style sheet at the top of the web page and assuming that the user has the Comic Sans font installed. The words MMI Investor Information would appear in the 36- point Arial font instead. You can see another example of classes in action in Listing 3.2; look for the subheader <p> class and the footer <div> class.


What if you want to create a style class that could be applied to any ele- ment, rather than just headings or some other particular tag? You can asso- ciate a style class with the <div> tag, as in Listing 3.2, which is used to enclose any text in a block that is somewhat similar to a paragraph of text; the <div> tag is another useful container element.


TIP

image

You might have noticed a change in the coding style when multiple properties are included in a style rule. For style rules with a single style, you’ll commonly see the property placed on the same line as the rule, like this:

div.footer { font-size: 9pt; }


You can essentially create your own custom HTML tag by using the div selector followed by a period (.) followed by any style class name you make up and any style specifications you choose. That tag can control any number of font, spacing, and margin settings all at once. Wherever you want to apply your custom tag in a page, use a <div> tag with the class attribute followed by the class name you created.


For example, the style sheet in Listing 3.1 includes the following style class specification:

div.footer { font-size: 9pt;

font-style: italic; line-height: 12pt; text-align: center;

padding-top: 30pt;

However, when a style rule con-

tains multiple style properties, it’s much easier to read and under- stand the code if you list the properties one-per-line, like this:

div.footer { font-size:9pt;

font-style: italic; line-height:12pt; text-align: center; padding-top: 30pt;

}

}


This style class is applied in Listing 3.2 with the following tag:


<div class=”footer”>


Everything between that tag and the closing </div> tag in Listing 3.2 appears in 9-point, centered, italic text with 12-point vertical line spacing and 30 points of padding at the top of the element.


What makes style classes so valuable is how they isolate style code from web pages, effectively allowing you to focus your HTML code on the actual

Internal Style Sheets and Inline Styles 59


content in a page, not how it is going to appear on the screen. Then you can focus on how the content is rendered to the screen by fine-tuning the style sheet. You might be surprised by how a relatively small amount of code in a style sheet can have significant effects across an entire website. This makes your pages much easier to maintain and manipulate.


Using Style IDs


When you create custom style classes, you can use those classes as many times as you would like—they are not unique. However, there will be some instances when you want to have precise control over unique ele- ments for layout or formatting purposes (or both). In such instances, look to IDs instead of classes.


A style ID is a custom set of formatting specifications that can be applied only to one element in a web page. You can use IDs across a set of pages but only once per time within each page.


For example, suppose you have a title within the body of all your pages. Each page has only one title, but all the pages themselves include one instance of that title. Following is an example of a selector with an ID indi- cated, plus a property and a value:

p#title {font: 24pt Verdana, Geneva, Arial, sans-serif}


Notice that this selector includes a hash mark, or pound sign (#), after p, followed by a descriptive ID name. When referencing a style ID in HTML code, simply specify the ID name in the id attribute of an element, like so:

<p id=”title”>Some Title Goes Here</p>


Everything between the opening and closing <p> tags will appear in 24- point Verdana text—but only once on any given page. You will often see style IDs used to define specific parts of a page for layout purposes, such as a header area, footer area, main body area, and so on. These types of areas in a page will appear only once per page, so using an ID rather than a class is the appropriate choice.


Internal Style Sheets and Inline Styles


In some situations, you might want to specify styles that will be used in only one web page, in which case you can enclose a style sheet between

<style> and </style> tags and include it directly in an HTML document.

60 CHAPTER 3 Understanding Cascading Style Sheets


Style sheets used in this manner must appear in the <head> of an HTML document. No <link /> tag is needed, and you cannot refer to that style sheet from any other page (unless you copy it into the beginning of that document, too). This kind of style sheet is known as an internal style sheet, as you learned earlier in the chapter.


Listing 3.3 shows an example of how you might specify an internal style sheet.


LISTING 3.3 A Web Page with an Internal Style Sheet

image

<?xml version=”1.0” encoding=”UTF-8”?>

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN”

“http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”>


<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en”>

<head>

<title>Some Page</title>


<style type=”text/css”> div.footer {

font-size: 9pt; line-height: 12pt; text-align: center;


NOTE

image

<span> and </span> are dummy tags that do nothing in and of themselves except speci- fy a range of content to apply any style attributes that you add. The only difference between <div> and <span> is that <div> is a block element and therefore forces a line break, whereas <span> doesn’t. Therefore, you should use

<span> to modify the style of any portion of text that is to appear in the middle of a sen- tence or paragraph without any line break.

}

</style>

</head>

<body>

...

<div class=”footer”>

Copyright 2009 Acme Products, Inc.

</div>

</body>

</html>

image


In the listing code, the div.footer style class is specified in an internal style sheet that appears in the head of the page. The style class is now available for use within the body of this page. And, in fact, it is used in the body of the page to style the copyright notice.


Internal style sheets are handy if you want to create a style rule that is used multiple times within a single page. However, in some instances you might need to apply a unique style to one particular element. This calls for an inline style rule, which allows you to specify a style for only a small part of a page, such as an individual element. For example, you can create and apply a style rule within a <p>, <div>, or <span> tag via the style attribute. This type of style is known as an inline style because it is speci- fied right there in the middle of the HTML code.

Internal Style Sheets and Inline Styles 61


Here’s how a sample style attribute might look:


<p style=”color:green”>

This text is green, but <span style=”color:red”>this text is red.</span>

Back to green again, but...

</p>

<p>

...now the green is over, and we’re back to the default color for this page.

</p>


This code makes use of the <span> tag to show how to apply the color

style property in an inline style rule. In fact, both the <p> tag and the

<span> tag in this example use the color property as an inline style. What’s important to understand is that the color:red style property over- rides the color:green style property for the text appearing between the

<span> and </span> tags. Then in the second paragraph, neither of the color styles applies because it is a completely new paragraph that adheres to the default color of the entire page.


Validate Your Style Sheets

Just as it is important to vali- date your HTML or XHTML markup, it is important to vali- date your style sheet. A specific validation tool for CSS can be found at http://jigsaw.w3.org/ css-validator/. Just like the validation tool discussed in Chapter 2, “Understanding HTML and XHTML Connections,” you can point the tool to a web address, upload a file, or paste content into the form field pro- vided. The ultimate goal is a result such as that shown in Figure 3.3: valid!


image

FIGURE 3.3

The W3C CSS Validator shows there are no errors in the style sheet contents of Listing 3.1.

62 CHAPTER 3 Understanding Cascading Style Sheets


Summary


In this chapter, you learned that a style sheet can control the appearance of many HTML pages at once. It can also give you extremely precise control over the typography, spacing, and positioning of HTML elements. You also discovered that by adding a style attribute to almost any HTML tag, you can control the style of any part of an HTML page without referring to a separate style sheet document.


You learned about three main approaches to including style sheets in your website: a separate style sheet file with the extension .css that is linked to in the <head> of your documents, a collection of style rules placed in the head of the document within the <style> tag, and as rules placed directly in an HTML tag via the style attribute.


Table 3.1 summarizes the tags discussed in this chapter. Refer to the CSS 2 style sheet standards at http://www.w3c.org for details on what options can be included after the <style> tag or the style attribute.


TABLE 3.1 HTML Tags and Attributes Covered in Chapter 3

image

Tag/Attributes Function

image

<style>...</style> Allows an internal style sheet to be included within a

document. Used between <head> and </head>.

Attribute

image

type=”contenttype” The Internet content type. (Always “text/css” for a

CSS style sheet.)

<link /> Links to an external style sheet (or other document

type). Used in the <head> section of the document.

Attribute

image

href=”url” The address of the style sheet.

type=”contenttype” The Internet content type. (Always “text/css” for a

CSS style sheet.)

rel=”stylesheet” The link type. (Always “stylesheet” for style

sheets.)

<span></span> Does nothing but provide a place to put style or

other attributes. (Similar to <div>...</div> but does not cause a line break.)

Attribute

image

style=”style” Includes inline style specifications. (Can be used in

<span>, <div>, <body>, and most other HTML tags.)

image

image

Workshop 63


Q&A


Q. Say I link a style sheet to my page that says all text should be blue, but there’s a <span style=”font-color:red”> tag in the page some- where. Will that text display as blue or will it display as red?


A. Red. Local inline styles always take precedence over external style sheets. Any style specifications you put between <style> and

</style> tags at the top of a page will also take precedence over external style sheets (but not over inline styles later in the same page). This is the cascading effect of style sheets that I mentioned earlier in the chapter. You can think of cascading style effects as starting with an external style sheet, which is overridden by an internal style sheet, which is overridden by inline styles.


Q. Can I link more than one style sheet to a single page?


A. Sure. For example, you might have a sheet for formatting (text, fonts, colors, and so on) and another one for layout (margins, padding, align- ment, and so on)—just include a <link /> for both. Technically speak- ing, the CSS standard requires web browsers to give the user the option to choose between style sheets when multiple sheets are pre- sented via multiple <link /> tags. However, in practice, all major web browsers simply include every style sheet. The preferred technique for linking in multiple style sheets involves using the special @import com- mand. Following is an example of importing multiple style sheets with

@import:

@import url(styles1.css);

@import url(styles2.css);


Similar to the <link /> tag, the @import command must be placed in the head of a web page. You learn more about this handy little com- mand in Chapter 25, “Creating Print-Friendly Web Pages,” when you learn how to create a style sheet specifically for printing web pages.


Workshop


The workshop contains quiz questions and exercises to help you solidify your understanding of the material covered. Try to answer all questions before looking at the “Answers” section that follows.


www.it-ebooks.info

image

64 CHAPTER 3 Understanding Cascading Style Sheets


Quiz


  1. What code would you use to create a style sheet to specify 30-point blue Arial headings and all other text in double-spaced, 10-point blue Times Roman (or the default browser font)?


  2. If you saved the style sheet you made for Question 1 as corporate.css, how would you apply it to a web page named intro.html?


  3. How many different ways are there to ensure style rules can be applied to your content?


Answers


  1. Your style sheet would include the following:


    h1 { font: 30pt blue Arial; } body { font: 10pt blue; }


  2. Put the following tag between the <head> and </head> tags of the

    intro.html document:


    <link rel=”stylesheet” type=”text/css” href=”corporate.css” />


  3. Three: externally, internally, and inline.


Exercises


. Using the style sheet you created earlier in this chapter, add some style classes to your style sheet. To see the fruits of your labor, apply those classes to the HTML page you created as well. Use classes with your

<h1> and <p> tags to get the feel for things.


. Develop a standard style sheet for your website and link it into all your pages. (Use internal style sheets and/or inline styles for pages that need to deviate from it.) If you work for a corporation, chances are it has already developed font and style specifications for printed materi- als. Get a copy of those specifications and follow them for company web pages, too.


. Be sure to explore the official style sheet specs at http://www.w3.org/ Style/CSS/ and try some of the more esoteric style properties not cov- ered in this chapter.


www.it-ebooks.info

image


CHAPTER 4

Understanding JavaScript


The World Wide Web (WWW) began as a text-only medium—the first browsers didn’t even support images within web pages. The Web has come a long way since those early days, as today’s websites include a wealth of visual and interactive features in addition to useful content: graphics, sounds, animation, and video. Web scripting languages, such as JavaScript, are one of the easiest ways to spice up a web page and to inter- act with users in new ways.


The first part of this chapter introduces the concept of Web scripting and the JavaScript language. As the chapter moves ahead, you’ll learn how to include JavaScript commands directly in your HTML documents and how your scripts will be executed when the page is viewed in a browser. You will work with a simple script, edit it, and test it in your browser, all the while learning the basic tasks involved in creating and using JavaScript scripts.


Learning Web Scripting Basics


In the world of science fiction movies (and many other movies that have no excuse), computers are often seen obeying commands in English. Although this might indeed happen in the near future, computers current- ly find it easier to understand languages such as BASIC, C, and Java.


You already know how to use one type of computer language: HTML. You use HTML tags to describe how you want your document formatted, and the browser obeys your commands and shows the formatted document to the user. But because HTML is a simple text markup language, it can’t respond to the user, make decisions, or automate repetitive tasks. Interactive tasks such as these require a more sophisticated language: a programming language, or a scripting language.

WHAT YOU’LL LEARN IN THIS CHAPTER:


. What web scripting is and what it’s good for

. How scripting and program- ming are different (and similar)

. What JavaScript is and where it came from

. How to include JavaScript commands in a web page

. What JavaScript can do for your web pages

. Beginning and ending scripts

. Formatting JavaScript statements

. How a script can display a result

. Including a script within a web document

. Testing a script in your browser

. Modifying a script

. Dealing with errors in scripts

. Moving scripts into sepa- rate files

66 CHAPTER 4 Understanding JavaScript


Although many programming languages are complex, scripting languages are generally simple. They have a simple syntax, can perform tasks with a minimum of commands, and are easy to learn. Web scripting languages enable you to combine scripting with HTML to create interactive web pages.



NOTE

image

Is JavaScript a scripting lan- guage or a programming lan- guage? It depends on who you ask. We’ll refer to scripting throughout this book, but feel free to include JavaScript pro- gramming on your résumé after you’ve finished this book.


NOTE

image

Interpreted languages have their disadvantages—they can’t execute quickly, so they’re not ideally suited for complicated work, such as graphics. Also, they require the interpreter (in JavaScript’s case, usually a browser) to work.


NOTE

image

A bit of history: JavaScript was originally called LiveScript and was first introduced in Netscape Navigator 2.0 in 1995. It was soon renamed JavaScript to indicate a market- ing relationship with Sun’s Java language—although there is no other relationship, structurally or otherwise, between Java and JavaScript.

Scripts and Programs


A movie or a play follows a script—a list of actions (or lines) for the actors to perform. A web script provides the same type of instructions for the web browser. A script in JavaScript can range from a single line to a full-scale application. (In either case, JavaScript scripts usually run within a browser.)


Some programming languages must be compiled, or translated, into machine code before they can be executed. JavaScript, on the other hand, is an interpreted language: The browser executes each line of script as it comes to it.


There is one main advantage to interpreted languages: Writing or changing a script is very simple. Changing a JavaScript script is as easy as changing a typical HTML document, and the change is enacted as soon as you reload the document in the browser.


Introducing JavaScript


JavaScript was developed by Netscape Communications Corporation, the maker of the Netscape web browser. JavaScript was the first web scripting language to be supported by browsers, and it is still by far the most popular.


JavaScript is almost as easy to learn as HTML, and it can be included directly in HTML documents. Here are a few of the things you can do with JavaScript:

. Display messages to the user as part of a web page, in the browser’s status line, or in alert boxes


. Validate the contents of a form and make calculations (for example, an order form can automatically display a running total as you enter item quantities)


. Animate images or create images that change when you move the mouse over them


. Create ad banners that interact with the user, rather than simply dis- playing a graphic

How JavaScript Fits into a Web Page 67


. Detect the browser in use or its features and perform advanced func- tions only on browsers that support them


. Detect installed plug-ins and notify the user if a plug-in is required


. Modify all or part of a web page without requiring the user to reload it


. Display or interact with data retrieved from a remote server


You can do all this and more with JavaScript, including creating entire applications. We’ll explore the uses of JavaScript throughout this book.


How JavaScript Fits into a Web Page


Using the <script> tag, you can add a short script (in this case, just one line) to a web document, as shown in Listing 4.1. The <script> tag tells the browser to start treating the text as a script, and the closing </script> tag tells the browser to return to HTML mode. In most cases, you can’t use JavaScript statements in an HTML document except within <script> tags. The exception is event handlers, described later in this chapter.


LISTING 4.1 A Simple HTML Document with a Simple Script

image

<?xml version=”1.0” encoding=”UTF-8”?>

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN”

“http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”>


<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en”>

<head>

<title>The American Eggplant Society</title>

</head>


<body>

<h1>The American Eggplant Society</h1>

<p>Welcome to our site. Unfortunately, it is still under construction.</p>

<p>We last worked on it on this date:

<script type=”text/javascript”>

<!-- Hide the script from old browsers document.write(document.lastModified);

// Stop hiding the script -->

</script>

</p>

</body>

</html>

image

68 CHAPTER 4 Understanding JavaScript


JavaScript’s document.write statement, which you’ll learn more about later, sends output as part of the web document. In this case, it displays the modification date of the document, as shown in Figure 4.1.


image

FIGURE 4.1

Using document.write to display a last-modified date.


In this example, we placed the script within the body of the HTML docu- ment. There are actually four different places where you might use scripts:

. In the body of the page—In this case, the script’s output is displayed as part of the HTML document when the browser loads the page.


. In the header of the page between the <head> tags—Scripts in the header can’t create output within the HTML document, but can be referred to by other scripts. The header is often used for functions— groups of JavaScript statements that can be used as a single unit. You will learn more about functions in Chapter 14, “Getting Started with JavaScript Programming.”


. Within an HTML tag, such as <body> or <form>—This is called an event handler and enables the script to work with HTML elements. When using JavaScript in event handlers, you don’t need to use the

<script> tag. You’ll learn more about event handlers in Chapter 14.


. In a separate file entirely—JavaScript supports the use of files with the .js extension containing scripts; these can be included by specify- ing a file in the <script> tag.

How JavaScript Fits into a Web Page 69


Using Separate JavaScript Files


When you create more complicated scripts, you’ll quickly find your HTML documents become large and confusing. To avoid this, you can use one or more external JavaScript files. These are files with the .js extension that contain JavaScript statements.


External scripts are supported by all modern browsers. To use an external script, you specify its filename in the <script> tag:

<script type=”text/javascript” src=”filename.js”></script>


Because you’ll be placing the JavaScript statements in a separate file, you don’t need anything between the opening and closing <script> tags—in fact, anything between them will be ignored by the browser.


You can create the .js file using a text editor. It should contain one or more JavaScript commands and only JavaScript—don’t include <script> tags, other HTML tags, or HTML comments. Save the .js file in the same directo- ry as the HTML documents that refer to it.


Understanding JavaScript Events


Many of the useful things you can do with JavaScript involve interacting with the user and that means responding to events—for example, a link or a button being clicked. You can define event handlers within HTML tags to tell the browser how to respond to an event. For example, Listing 4.2 defines a button that displays a message when clicked.


LISTING 4.2 A Simple Event Handler

image

<?xml version=”1.0” encoding=”UTF-8”?>

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN”

“http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”>


<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en”>

<head>

<title>Event Test</title>

</head>


<body>

<h1>Event Test</h1>

<button type=”button”

onclick=”alert(‘You clicked the button.’)”> Click Me!</button>

TIP

External JavaScript files have a distinct advantage: You can link to the same .js file from two or more HTML documents. Because the browser stores this file in its cache, this can reduce the time it takes for your web pages to display.

</body>

</html>

image

70 CHAPTER 4 Understanding JavaScript


In various places throughout this book, you’ll learn more about JavaScript’s event model and how to create simple and complex event handlers.


Exploring JavaScript’s Capabilities


If you’ve spent any time browsing the Web, you’ve undoubtedly seen lots of examples of JavaScript in action. Here are some brief descriptions of typical applications for JavaScript, all of which you’ll explore further, later in this book.


Improving Navigation


Some of the most common uses of JavaScript are in navigation systems for websites. You can use JavaScript to create a navigation tool—for example, a drop-down menu to select the next page to read or a submenu that pops up when you hover over a navigation link.


When it’s done right, this kind of JavaScript interactivity can make a site easier to use, while remaining usable for browsers that don’t support JavaScript.


Validating Forms


Form validation is another common use of JavaScript. A simple script can read values the user types into a form and can make sure they’re in the right format, such as with ZIP Codes or phone numbers. This allows users to notice common errors and fix them without waiting for a response from the web server. You’ll learn how to work with form data in Chapter 26, “Working with Web-Based Forms.”


Special Effects


One of the earliest and most annoying uses of JavaScript was to create attention-getting special effects—for example, scrolling a message in the browser’s status line or flashing the background color of a page.


These techniques have fortunately fallen out of style, but thanks to the W3C DOM and the latest browsers, some more impressive effects are pos- sible with JavaScript—for example, creating objects that can be dragged and dropped on a page or creating fading transitions between images in a slideshow.

Beginning the Script 71


Remote Scripting (AJAX)


For a long time, the biggest limitation of JavaScript was that there was no way for it to communicate with a web server. For example, you could use it to verify that a phone number had the right number of digits, but not to look up the user’s location in a database based on the number.


Now that some of JavaScript’s advanced features are supported by most browsers, this is no longer the case. Your scripts can get data from a server without loading a page or send data back to be saved. These features are collectively known as AJAX (Asynchronous JavaScript And XML), or remote scripting. You’ll learn how to develop AJAX scripts in Chapter 24, “AJAX: Remote Scripting.”


You’ve seen AJAX in action if you’ve used Google’s Gmail mail application or recent versions of Yahoo! Mail or Microsoft Hotmail. All of these use remote scripting to present you with a responsive user interface that works with a server in the background.


Displaying Time with JavaScript


One common and easy use for JavaScript is to display dates and times. Because JavaScript runs on the browser, the times it displays will be in the user’s current time zone. However, you can also use JavaScript to calculate “universal” (UTC) time.


As a basic introduction to JavaScript, you will now create a simple script that displays the current time and the UTC time within a web page, start- ing with the next section.


Beginning the Script


Your script, like most JavaScript programs, begins with the HTML

<script> tag. As you learned earlier in this chapter, you use the <script>

and </script> tags to enclose a script within the HTML document.


To begin creating the script, open your favorite text editor and type the beginning and ending <script> tags as shown.

<script type=”text/javascript”></script>


NOTE

UTC stands for Universal Time Coordinated, and is the atomic time standard based on the old GMT (Greenwich Mean Time) standard. This is the time at the Prime Meridian, which runs through Greenwich, London, England.


CAUTION

image

Remember to include only valid JavaScript statements between the starting and ending

<script> tags. If the browser finds anything but valid JavaScript statements within the

<script> tags, it will display a JavaScript error message.

72 CHAPTER 4 Understanding JavaScript


Adding JavaScript Statements


Your script now needs to determine the local and UTC times, and then dis- play them to the browser. Fortunately, all the hard parts, such as convert- ing between date formats, are built in to the JavaScript interpreter.


Storing Data in Variables


To begin the script, you will use a variable to store the current date. You will learn more about variables in Chapter 16, “Using JavaScript Variables, Strings, and Arrays.” A variable is a container that can hold a value—a number, some text, or in this case, a date.


To start writing the script, add the following line after the first <script> tag. Be sure to use the same combination of capital and lowercase letters in your version because JavaScript commands and variable names are case sensitive.

now = new Date();



NOTE

image

Notice the semicolon at the end of the previous statement. This tells the browser that it has reached the end of a state- ment. Semicolons are optional, but using them helps you avoid some common errors. We’ll use them throughout this book for clarity.


NOTE

image

The localtime and utctime variables store a piece of text, such as January 1, 2001 12:00 PM. In programming parl- ance, a piece of text is called a string.

This statement creates a variable called now and stores the current date and time in it. This statement and the others you will use in this script use JavaScript’s built-in Date object, which enables you to conveniently handle dates and times. You’ll learn more about working with dates in Chapter 17, “Using JavaScript Functions and Objects.”


Calculating the Results


Internally, JavaScript stores dates as the number of milliseconds since January 1, 1970. Fortunately, JavaScript includes a number of functions to convert dates and times in various ways, so you don’t have to figure out how to convert milliseconds to day, date, and time.


To continue your script, add the following two statements before the final

</script> tag:


localtime = now.toString(); utctime = now.toGMTString();


These statements create two new variables: localtime, containing the cur- rent time and date in a nice readable format, and utctime, containing the UTC equivalent.

Adding the Script to a Web Page 73


Creating Output


You now have two variables—localtime and utctime—which contain the results we want from our script. Of course, these variables don’t do us much good unless we can see them. JavaScript includes a number of ways to display information, and one of the simplest is the document.write statement.


The document.write statement displays a text string, a number, or any- thing else you throw at it. Because your JavaScript program will be used within a web page, the output will be displayed as part of the page. To dis- play the result, add these statements before the final </script> tag:

document.write(“<strong>Local time:</strong> “ + localtime + “<br/>”); document.write(“<strong>UTC time:</strong> “ + utctime);


These statements tell the browser to add some text to the web page con- taining your script. The output will include some brief strings introducing the results and the contents of the localtime and utctime variables.


Notice the HTML tags, such as <strong>, within the quotation marks— because JavaScript’s output appears within a web page, it needs to be for- matted using HTML. The <br/> tag in the first line ensures that the two times will be displayed on separate lines.


Adding the Script to a Web Page


You should now have a complete script that calculates a result and dis- plays it. Your listing should match Listing 4.3.


LISTING 4.3 The Complete Date and Time Script

image

<script type=”text/javascript”> now = new Date();

localtime = now.toString(); utctime = now.toGMTString();

document.write(“<strong>Local time:</strong> “ + localtime + “<br/>”); document.write(“<strong>UTC time:</strong> “ + utctime);

</script>

image


To use your script, you’ll need to add it to an HTML document. If you use the general template you’ve seen in the chapters so far, you should end up with something like Listing 4.4.


NOTE

image

Notice the plus signs (+) used between the text and variables in Listing 4.3. In this case, it tells the browser to combine the values into one string of text. If you use the plus sign between two numbers, they are added together.

74 CHAPTER 4 Understanding JavaScript


NOTE

image

Notepad and other Windows text editors might try to be help- ful and add the .txt extension to your script. Be sure your saved file has the correct extension.

LISTING 4.4 The Date and Time Script in an HTML Document

image

<?xml version=”1.0” encoding=”UTF-8”?>

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN”

“http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”>


<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en”>

<head>

<title>Displaying Times and Dates</title>

</head>


<body>

<h1>Current Date and Time</h1>

<script type=”text/javascript”> now = new Date();

localtime = now.toString(); utctime = now.toGMTString();

document.write(“<strong>Local time:</strong> “

+ localtime + “<br/>”); document.write(“<strong>UTC time:</strong> “ + utctime);

</script>

</body>

</html>

image


Now that you have a complete HTML document, save it with the .htm or

.html extension.


Testing the Script

To test your script, you simply need to load the HTML document you cre- ated in a web browser. If you typed the script correctly, your browser should display the result of the script, as shown in Figure 4.2. (Of course, your result won’t be the same as mine, but it should be the same as the set- ting of your computer’s clock.)


A note about Internet Explorer 6.0 and above: Depending on your security settings, the script might not execute, and a yellow highlighted bar on the top of the browser might display a security warning. In this case, click the yellow bar and select Allow Blocked Content to allow your script to run. (This happens because the default security settings allow JavaScript in online documents, but not in local files.)


Modifying the Script

Although the current script does indeed display the current date and time, its display isn’t nearly as attractive as the clock on your wall or desk. To remedy that, you can use some additional JavaScript features and a bit of HTML to display a large clock.

Testing the Script 75


image


To display a large clock, we need the hours, minutes, and seconds in separate variables. Once again, JavaScript has built-in functions to do most of the work:

hours = now.getHours(); mins = now.getMinutes(); secs = now.getSeconds();


These statements load the hours, mins, and secs variables with the compo- nents of the time using JavaScript’s built-in date functions.


After the hours, minutes, and seconds are in separate variables, you can create document.write statements to display them:

document.write(“<h1>”);

document.write(hours + “:” + mins + “:” + secs); document.write(“</h1>”);


The first statement displays an HTML <h1> header tag to display the clock in a large typeface. The second statement displays the hours, mins, and secs variables, separated by colons, and the third adds the closing </h1> tag.


You can add the preceding statements to the original date and time script to add the large clock display. Listing 4.5 shows the complete modified version of the script.


FIGURE 4.2

Firefox displays the results of the Date and Time script.

76 CHAPTER 4 Understanding JavaScript


LISTING 4.5 The Date and Time Script with Large Clock Display

image

<?xml version=”1.0” encoding=”UTF-8”?>

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN”

“http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”>


<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en”>

<head>

<title>Displaying Times and Dates</title>

</head>


<body>

<h1>Current Date and Time</h1>

<script type=”text/javascript”> now = new Date();

localtime = now.toString(); utctime = now.toGMTString();

document.write(“<strong>Local time:</strong> “

+ localtime + “<br/>”);

document.write(“<strong>UTC time:</strong> “ + utctime); hours = now.getHours();

mins = now.getMinutes(); secs = now.getSeconds(); document.write(“<h1>”);

document.write(hours + “:” + mins + “:” + secs); document.write(“</h1>”);

</script>

</body>

</html>

image


Now that you have modified the script, save the HTML file and open the modified file in your browser. If you left the browser running, you can simply use the Reload button to load the new version of the script. Try it and verify that the same time is displayed in both the upper portion of the window and the new large clock. Figure 4.3 shows the results.


Dealing with JavaScript Errors


As you develop more complex JavaScript applications, you’re going to run into errors from time to time. JavaScript errors are usually caused by mistyped JavaScript statements.


To see an example of a JavaScript error message, modify the statement you added in the previous section. We’ll use a common error: omitting one of the parentheses. Change the last document.write statement in Listing 4.5 to read:

document.write(“</h1>”;

Testing the Script 77


image


Save your HTML document again and load the document into the browser. Depending on the browser version you’re using, one of two things will happen: Either an error message will be displayed, or the script will simply fail to execute.

If an error message is displayed, you’re halfway to fixing the problem by adding the missing parenthesis. If no error was displayed, you should con- figure your browser to display error messages so that you can diagnose future problems:

. In Firefox, you can also select Tools, JavaScript Console from the menu. The console is shown in Figure 4.4, displaying the error mes- sage you created in this example.

. In Chrome, select Tools, JavaScript Console from the Customizations (Options) menu. A console will display in the bottom of the browser window.

. In Internet Explorer, select Tools, Internet Options. On the Advanced page, uncheck the Disable Script Debugging box and check the Display a Notification About Every Script Error box. (If this is dis- abled, a yellow icon in the status bar will still notify you of errors.)


The error we get in this case is missing ) after argument list (Firefox) or Expected ‘)’ (Internet Explorer), which turns out to be exactly the problem. Be warned, however, that error messages aren’t always this enlightening.


FIGURE 4.3

Firefox displays the modified Date and Time script.


NOTE

image

The time formatting produced by this script isn’t perfect; hours after noon are in 24-hour time, and there are no leading zeroes, so 12:04 is displayed as 12:4. See Chapter 17 for solutions to these issues.

78 CHAPTER 4 Understanding JavaScript


FIGURE 4.4

Firefox’s JavaScript Console displays an error message.


image


Although Internet Explorer displays error dialog boxes for each error, Firefox’s JavaScript Console displays a single list of errors and enables you to test commands. For this reason, you might find it useful to install Firefox for debugging and testing JavaScript, even if Internet Explorer is your primary browser.


Summary


During this chapter, you’ve learned what web scripting is and what JavaScript is. You’ve also learned how to insert a script into an HTML doc- ument or refer to an external JavaScript file, what sorts of things JavaScript can do, and how JavaScript differs from other web languages. You also wrote a simple JavaScript program and tested it using a web browser. You discovered how to modify and test scripts and what happens when a JavaScript program runs into an error.

In the process of writing this script, you have used some of JavaScript’s basic features: variables, the document.write statement, and functions for working with dates and times.

Now that you’ve learned a bit of JavaScript syntax, you’re ready to contin- ue on to learn all manner and sorts of things about web development before settling in to write interactive websites using client-side scripting.

image

Workshop 79


Q&A


Q. Do I need to test my JavaScript on more than one browser?


A. In an ideal world, any script you write that follows the standards for JavaScript will work in all browsers, and 93% of the time (give or take) that’s true in the real world. But browsers do have their quirks, and you should test your scripts on Internet Explorer and Firefox at a minimum.


Q. If I plan to learn PHP or some other server-side programming lan- guage anyway, will I have any use for JavaScript?


A. Certainly. JavaScript is the ideal language for many parts of a web- based application, such as form validation. Although PHP and other server-side languages have their uses, they can’t interact directly with the user on the client-side.


Q. When I try to run my script, the browser displays the actual script in the browser window instead of executing it. What did I do wrong?


A. This is most likely caused by one of three errors. First, you might be missing the beginning or ending <script> tags. Check them, and verify that the first reads <script type=”text/javascript”>. Second, your file might have been saved with a .txt extension, causing the browser to treat it as a text file. Rename it to .htm or .html to fix the problem. Third, make sure your browser supports JavaScript and that it is not disabled in the Preferences dialog.


Q. Why are the <strong> and <br /> tags allowed in the statements to print the time? I thought HTML tags weren’t allowed within the

<script> tags.


  1. Because this particular tag is inside quotation marks, it’s considered a valid part of the script. The script’s output, including any HTML tags, is interpreted and displayed by the browser. You can use other HTML tags within quotation marks to add formatting, such as the <h1> tags we added for the large clock display.


    Workshop


    The workshop contains quiz questions and exercises to help you solidify your understanding of the material covered. Try to answer all questions before looking at the “Answers” section that follows.

    image

    80 CHAPTER 4 Understanding JavaScript


    Quiz

    1. When a user views a page containing a JavaScript program, which machine actually executes the script?

      1. The user’s machine running a web browser


      2. The web server


      3. A central machine deep within Netscape’s corporate offices


    2. What software do you use to create and edit JavaScript programs?


      1. A browser


      2. A text editor


      3. A pencil and a piece of paper


    3. What are variables used for in JavaScript programs?


      1. Storing numbers, dates, or other values


      2. Varying randomly


      3. Causing high school algebra flashbacks


    4. What should appear at the very end of a JavaScript script embedded in an HTML file?

      1. The <script type=”text/javascript”> tag


      2. The </script> tag


      3. The END statement


    Answers

    1. a. JavaScript programs execute on the web browser. (There is actually a server-side version of JavaScript, but that’s another story.)

    2. b. Any text editor can be used to create scripts. You can also use a word processor if you’re careful to save the document as a text file with the .html or .htm extension.

    3. a. Variables are used to store numbers, dates, or other values.


    4. b. Your script should end with the </script> tag.


    Exercises

    . Add a millisecond field to the large clock. You can use the getMilliseconds function, which works just like getSeconds but returns milliseconds.

    . Modify the script to display the time, including milliseconds, twice.

    Notice whether any time passes between the two time displays when you load the page.


    www.it-ebooks.info

    image


    CHAPTER 5

    Working with Fonts, Text Blocks, and Lists


    In the early days of the Web, text was displayed in only one font and in one size. However, a combination of HTML and CSS now makes it possi- ble to control the appearance of text (font type, size, or color) and how it is aligned and displayed on a web page. In this chapter, you’ll learn how to change the visual display of the font—its font family, size, and weight— and how to incorporate boldface, italics, superscripts, subscripts, and strikethrough text into your pages. You will also learn how to change type- faces and font sizes. Then, after becoming conversant in these textual aspects, you’ll learn the basics of text alignment and some advanced text tips and tricks, such as the use of lists. Because lists are so common, HTML provides tags that automatically indent text and add numbers, bullets, or other symbols in front of each listed item. You’ll learn how to format dif- ferent types of lists, which are part of the many ways to display content in your website.

    WHAT YOU’LL LEARN IN THIS CHAPTER:


    . How to use boldface, italics, and special text formatting

    . How to tweak the font

    . How to use special characters

    . How to align text on a page

    . How to use the three types of HTML lists

    . How to place lists within lists


    NOTE

    When viewing other designers’ web content, you might notice methods of marking up text that are different than those taught in this book. The old way of for- matting text includes the use of the <b></b> tag pair to indicate when a word should be bolded, the <i></i> tag pair to indicate when a word should be in italics, and the use of a <font></font> tag pair to specify font family, size, and other attributes. However, there is no reason to learn it because it is being phased out of HTML, and CSS is considerably more powerful.

    82 CHAPTER 5 Working with Fonts, Text Blocks, and Lists


    image

    TRY IT YOURSELF


    Preparing Sample Text


    You can make the most of learning how to style text throughout this chapter if you have some sample text that you can use to display different fonts and colors and that can also be indented, centered, or otherwise manipulated. It doesn’t really matter what type of text you use because there are so many different stylistic possibilities to try that they would never appear all on the same web page anyway (unless you wanted to drive your visitors batty). Take this opportunity just to get a feel for how text-level changes can affect the appearance of your content.


    . If the text you’ll be using is from a word processing or database pro- gram, be sure to save it to a new file in plain-text or ASCII format. You can then add the appropriate HTML tags and style attributes to format it as you go through this chapter.


    . Any text will do, but try to find (or type) some text you want to put onto a web page. The text from a company brochure or from your résumé might be a good choice.


    . Any type of outline, bullet points from a presentation, numbered steps, glossary, or list of textual information from a database will serve as good material to work with.


    . Before you use the code introduced in this chapter to format the body text, add the set of skeleton HTML tags you’ve used in previous chap- ters (the <html>, <head>, <title>, and <body> tags).


    Boldface, Italics, and Special Text Formatting


    Way back in the age of the typewriter, we were content with a plain-text display and with using an occasional underline to show emphasis. Today, boldface and italic text have become de rigueur in all paper communica- tion. Naturally, you can add bold and italic text to your web content as well. There are several tags and style rules that make text formatting possible.


    The old school approach to adding bold and italic formatting to text involves the <b></b> and <i></i> tag pairs. For boldface text, put the <b> tag at the beginning of the text and </b> at the end. Similarly, you can make any text italic by enclosing it between <i> and </i> tags. Although this approach still works fine in browsers and is supported by XHTML, it isn’t as flexible or powerful as the CSS style rules for text formatting.

    Boldface, Italics, and Special Text Formatting 83


    Although you’ll learn much more about CSS style rules in Part III, “Advanced Web Page Design with CSS,” it’s worth a little foreshadowing just so that you understand the text formatting options. The font-weight style rule enables you to set the weight, or boldness, of a font using a style rule. Standard settings for font-weight include normal, bold, bolder, and lighter (with normal being the default). Italic text is controlled via the font-style rule, which can be set to normal, italic, or oblique. Style rules can be specified together if you want to apply more than one, as the following example demonstrates:

    <p style=”font-weight:bold; font-style:italic”>This paragraph is bold and italic!</p>


    In this example, both style rules are specified in the style attribute of the

    <p> tag. The key to using multiple style rules is that they must be separat- ed by a semicolon (;).


    You aren’t limited to using font styles in paragraphs, however. The follow- ing code shows how to italicize text in a bulleted list:

    <ul>

    <li style=”font-style:italic”>Important Stuff</li>

    <li style=”font-style:italic”>Critical Information</li>

    <li style=”font-style:italic”>Highly Sensitive Material</li>

    <li>Nothing All That Useful</li>

    </ul>


    You can also use the font-weight style rule within headings, but a heavier font usually doesn’t have an effect on headings because they are already bold by default.


    Although using CSS enables you to apply richer formatting, there are a few other HTML tags that are good for adding special formatting to text when you don’t necessarily need to be as specific as CSS allows you to be. Following are some of these tags. Listing 5.1 and Figure 5.1 demonstrate each tag in action.

    . <small></small>—Small text


    . <big></big>—Big text; not present in HTML5 because text size is better controlled by CSS


    . <sup></sup>—Superscript text


    . <sub></sub>—Subscript text


    . <em></em> or <i></i>—Emphasized (italic) text


    . <strong></strong> or <b></b>—Strong (boldface) text


    NOTE

    An alternative to style rules when it comes to bold and italic text involves the <strong>

    </strong> and <em></em> tag pairs. The <strong> tag does the same thing as the <b> tag in most browsers, whereas the

    <em> tag acts just like the tag

    <i> by formatting text as italics.

    The <strong> and <em> tags are considered by some to be an improvement over <b> and

    <i> because they imply only that the text should receive special emphasis, rather than dictating exactly how that effect should be achieved. In other words, a browser doesn’t nec- essarily have to interpret

    <strong> as meaning bold or

    <em> as meaning italic. This makes <strong> and <em> more fitting in XHTML because they add meaning to text, along with affecting how the text should be displayed. All four tags remain part of HTML5, although their use becomes slightly more nuanced.

    84 CHAPTER 5 Working with Fonts, Text Blocks, and Lists


    CAUTION

    image

    There used to be a <u> tag for creating underlined text, but there are a couple of reasons not to use it now. First off, users expect underlined text to be a link, so they might get con- fused if you underline text that isn’t a link. Second, the <u> tag is deprecated, which means that it has been phased out of the HTML/XHTML language, as has the <strike> tag. Both tags are still supported in web browsers and likely will be for quite a while, but using CSS is the pre- ferred approach to creating underlined and strikethrough text. In HTML5, deleted text can be surrounded by the <strike>

    <strike> tag pair, which will render as text with a strikethrough.


    . <tt></tt>—Monospaced text (typewriter font) not present in HTML5 because font appearance is better controlled by CSS


    . <pre></pre>—Monospaced text, preserving spaces and line breaks


    image

    FIGURE 5.1

    Here’s what the character formatting from Listing 5.1 looks like.


    LISTING 5.1 Special Formatting Tags

    image

    <?xml version=”1.0” encoding=”UTF-8”?>

    <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN”

    “http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”>


    <html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en”>

    <head>

    <title>The Miracle Product</title>

    </head>


    <body>

    <p>

    New <sup>Super</sup><strong>Strength</strong> H<sub>2</sub>O

    <em>plus</em> will knock out any stain, <big>big</big> or

    <small>small</small>.<br /> Look for new

    <sup>Super</sup><b>Strength</b> H<sub>2</sub>O <i>plus</i> in a stream near you.

    </p>

    <p>

    <tt>NUTRITION INFORMATION</tt> (void where prohibited)

    </p>

    <pre>

    Calories

    Grams

    USRDA

    /Serving

    of Fat

    Moisture

    Regular

    3

    4

    100%

    Unleaded

    3

    2

    100%

    Tweaking the Font 85



    LISTING 5.1

    Continued

    Organic

    2

    3

    99%

    Sugar Free

    </pre>

    0

    1

    110%

    image

    </body>

    </html>

    image


    The <tt> tag usually changes the typeface to Courier New, a monospaced font. (Monospaced means that all the letters and spaces are the same width.) However, web browsers let users change the monospaced <tt> font to the typeface of their choice (look on the Options menu of your browser). The monospaced font might not even be monospaced for some users, although the vast majority of users stick with the standard fonts that their browsers show by default.


    The <pre> tag causes text to appear in the monospaced font, but it also does something else unique and useful. As you learned in Chapter 2, “Understanding HTML and XHTML Connections,” multiple spaces and line breaks are normally ignored in HTML files, but <pre> causes exact spacing and line breaks to be preserved. For example, without <pre>, the text at the end of Figure 5.1 would look like the following:

    calories grams usrda /serving of fat moisture regular

    3 4 100% unleaded 3 2 100% organic 2 3 99% sugar free 0 1 110%


    Even if you added <br /> tags at the end of every line, the columns wouldn’t line up properly. However, when you put <pre> at the beginning and </pre> at the end, the columns line up properly because the exact spaces are kept—no <br /> tags are needed. The <pre> tag gives you a quick and easy way to preserve the alignment of any monospaced text files you might want to transfer to a web page with minimum effort.


    CSS provides you with more robust methods for lining up text (and doing anything with text, actually), and you’ll learn more about them throughout Part III.


    Tweaking the Font


    The <big>, <small>, and <tt> tags give you some rudimentary control over the size and appearance of the text on your pages. However, there might be times when you’d just like a bit more control over the size and appearance of your text. Before I get into the appropriate way to tinker with the font in XHTML code, let’s briefly look at how things were done

    86 CHAPTER 5 Working with Fonts, Text Blocks, and Lists


    NOTE

    You’ll learn more about control- ling the color of the text on your pages in Chapter 8, “Working with Colors, Images, and Multimedia.” That chapter also shows you how to create your own custom colors and how to control the color of text links.

    prior to CSS because you might still find examples of this method when you look at the source code for other websites. Remember, just because these older methods are in use doesn’t mean you should follow suit.


    Before style sheets entered the picture, the now phased-out <font> tag was used to control the fonts in web page text. For example, the following HTML will change the size and color of some text on a page:

    <font size=”5” color=”purple”>this text will be big and purple.</font>


    As you can see, the size and color attributes of the <font> tag made it pos- sible to alter the font of the text without too much effort. Although this approach worked fine, it was replaced with a far superior approach to font formatting, thanks to CSS style rules. Following are a few of the main style rules used to control fonts:

    . font-family—Sets the family (typeface) of the font


    . font-size—Sets the size of the font


    . color—Sets the color of the font


    The font-family style rule enables you to set the typeface used to display text. You can and usually should specify more than one value for this style (separated by commas) so that if the first font isn’t available on a user’s system, the browser can try an alternative. You’ve already seen this in pre- vious chapters.


    Providing alternative font families is important because each user poten- tially has a different set of fonts installed, at least beyond a core set of com- mon basic fonts (Arial, Times New Roman, and so forth). By providing a list of alternative fonts, you have a better chance of your pages gracefully falling back on a known font when your ideal font isn’t found. Following is an example of the font-family style used to set the typeface for a para- graph of text:

    <p style=”font-family:arial, sans-serif, ‘times roman’”>


    There are several interesting things about this example. First, arial is speci- fied as the primary font. Capitalization does not affect the font family, so arial is no different from Arial or ARIAL. Another interesting thing about this code is how single quotes are used around the Times Roman font name because it has a space in it. However, because ’times roman’ appears after the generic specification of sans-serif, it is unlikely that ‘times roman’ would be used. Because sans-serif is in the second position, it says to the browser “if Arial is not on this machine, use the default sans-serif font.”

    Tweaking the Font 87

    The font-size and color style rules are also commonly used to control the size and color of fonts. The font-size style can be set to a predefined size (such as small, medium, or large) or you can set it to a specific point size (such as 12pt or 14pt). The color style can be set to a predefined color (such as white, black, blue, red, or green), or you can set it to a specific hexadecimal color (such as #FFB499). Following is the previous paragraph example with the font size and color specified:

    <p style=”font-family:arial, sans-serif, ‘times roman’; font-size:14pt; color:green”>

    NOTE

    You’ll learn about hexadecimal colors in Chapter 8. For now, just understand that the color style rule enables you to speci- fy exact colors beyond just using green, blue, orange, and so forth.


    The sample web content in Listing 5.2 and shown in Figure 5.2 uses some font style rules to create the beginning of a basic online résumé


    LISTING 5.2 Using Font Style Rules to Create a Basic Résumé

    image

    <?xml version=”1.0” encoding=”UTF-8”?>

    <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN”

    “http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”>


    <html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en”>

    <head>

    <title>R&eacute;sum&eacute; for Jane Doe</title>


    <style type=”text/css”> body {

    font-family: Verdana, sans-serif; font-size: 12px;

    }


    h1 {

    font-family:Georgia, serif; font-size:28px;

    text-align:center;

    }


    p.contactinfo { font-size:14px; text-align:center;

    }


    p.categorylabel { font-size:12px; font-weight:bold;

    text-transform:uppercase;

    }


    div.indented { margin-left: 25px;

    }

    </style>

    88 CHAPTER 5 Working with Fonts, Text Blocks, and Lists


    LISTING 5.2 Continued

    image

    </head>

    <body>

    <h1>Jane Doe</h1>

    <p class=”contactinfo”>1234 Main Street, Sometown, CA 93829<br/>

    tel: 555-555-1212, e-mail: jane@doe.com</p>


    <p class=”categorylabel”>Summary of Qualifications</p>

    <ul>

    <li>Highly skilled and dedicated professional offering a solid background in whatever it is you need.</li>

    <li>Provide comprehensive direction for whatever it is that will get me a job.</li>

    <li>Computer proficient in a wide range of industry-related computer programs and equipment. Any industry.</li>

    </ul>


    <p class=”categorylabel”>Professional Experience</p>

    <div class=”indented”>

    <p><span style=”font-weight:bold;”>Operations Manager, Super Awesome Company, Some City, CA [Sept 2002 – present]</span></p>

    <ul>

    <li>Direct all departmental operations</li>

    <li>Coordinate work with internal and external resources</li>

    <li>Generally in charge of everything</li>

    </ul>

    <p><span style=”font-weight:bold;”>Project Manager,

    Less Awesome Company, Some City, CA [May 2000 - Sept 2002]</span></p>

    <ul>

    <li>Direct all departmental operations</li>

    <li>Coordinate work with internal and external resources</li>

    <li>Generally in charge of everything</li>

    </ul>

    </div>


    <p class=”categorylabel”>Education</p>

    <ul>

    <li>MBA, MyState University, May 2002</li>

    <li>B.A, Business Administration, MyState University, May 2000</li>

    </ul>


    <p class=”categorylabel”>References</p>

    <ul>

    <li>Available upon request.</li>

    </ul>

    </body>

    </html>

    image

    Working with Special Characters 89

    Using CSS, which organizes sets of styles into classes—as you learned in Chapter 3, “Understanding Cascading Style Sheets”—you can see how text formatting is applied to different areas of this content. If you look closely at the definition of the div.indented class, you will see the use of the margin-left style. This style, which you will learn more about in Part III, applies a certain amount of space (25 pixels, in this example) to the left of the element. That space accounts for the indentation shown in Figure 5.2.


    image


    Working with Special Characters


    Most fonts now include special characters for European languages, such as the accented é in Café. There are also a few mathematical symbols and spe- cial punctuation marks, such as the circular bullet •.


    You can insert these special characters at any point in an HTML document using the appropriate codes, as shown in Table 5.1. You’ll find an even more extensive list of codes for multiple character sets at http://www. webstandards.org/learn/reference/named_entities.html.


    For example, the word café could be written using either of the following methods:

    caf&eacute; caf&#233;


    FIGURE 5.2

    Here’s what the code used in Listing 5.2 looks like.

    90 CHAPTER 5 Working with Fonts, Text Blocks, and Lists


    TIP

    image

    Looking for the copyright © and

    registered trademark ®sym- bols? Those codes are &copy;

    and &reg;, respectively.

    To create an unregistered trade- mark ™ symbol, use &trade;.

    Character

    Numeric Code

    Code Name

    Description

    &#34;

    &quot;

    Quotation mark

    &

    &#38;

    &amp;

    Ampersand

    <

    &#60;

    &lt;

    Less than

    >

    &#62;

    &gt;

    Greater than

    ¢

    &#162;

    &cent;

    Cent sign

    £

    &#163;

    &pound;

    Pound sterling

    |

    &#166;

    &brvbar; or &brkbar;

    Broken vertical bar

    §

    &#167;

    &sect;

    Section sign

    ©

    &#169;

    &copy;

    Copyright

    ®

    &#174;

    &reg;

    Registered trademark

    °

    &#176;

    &deg;

    Degree sign

    +–

    &#177;

    &plusmn;

    Plus or minus

    2

    &#178;

    &sup2;

    Superscript two

    3

    &#179;

    &sup3;

    Superscript three

    ·

    &#183;

    &middot;

    Middle dot

    1

    &#185;

    &sup1;

    Superscript one

    14

    &#188;

    &frac14;

    Fraction one-fourth

    12

    &#189;

    &frac12;

    Fraction one-half

    34

    &#190;

    &frac34;

    Fraction three-fourths

    Æ

    &#198;

    &AElig;

    Capital AE ligature

    æ

    &#230;

    &aelig;

    Small ae ligature

    É

    &#201;

    &Eacute;

    Accented capital E

    é

    &#233;

    &eacute;

    Accented small e

    ×

    &#215;

    &times;

    Multiplication sign

    ÷

    &#247;

    &divide;

    Division sign

    TABLE 5.1 Commonly Used English Language Special Characters


    Although you can specify character entities by number, each symbol also has a mnemonic name that is often easier to remember.


    HTML/XHTML uses a special code known as a character entity to represent special characters such as © and ®. Character entities are always specified starting with & and ending with ;. Table 5.1 lists the most commonly used character entities, although HTML supports many more.

    Working with Special Characters 91


    Table 5.1 includes codes for the angle brackets, quotation, and ampersand. You must use those codes if you want these symbols to appear on your pages; otherwise, the web browser interprets them as HTML commands.


    In Listing 5.3 and Figure 5.3, several of the symbols from Table 5.1 are shown in use.


    LISTING 5.3 Special Character Codes

    image

    <?xml version=”1.0” encoding=”UTF-8”?>

    <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN”

    “http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”>


    <html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en”>

    <head>

    <title>Punctuation Lines</title>

    </head>


    <body>

    <p>

    Q: What should you do when a British banker picks a fight with you?<br />

    A: &pound; some &cent;&cent; into him.

    <hr />

    Q: What do you call it when a judge takes part of a law off the books?<br />

    A: &sect; violence.

    <hr />

    Q: What did the football coach get from the locker room vending machine in the middle of the game?<br />

    A: A &frac14; back at &frac12; time.

    <hr />

    Q: How hot did it get when the police detective interrogated the mathematician?<br />

    A: x&sup3;&deg;

    <hr />

    Q: What does a punctilious plagiarist do?<br /> A: &copy;

    <hr />

    </p>

    </body>

    </html>

    image

    92 CHAPTER 5 Working with Fonts, Text Blocks, and Lists


    FIGURE 5.3

    This is how the HTML page in Listing 5.3 looks in most web browsers.


    image


    Aligning Text on a Page


    Now that you’ve seen how to change the appearance of your content at the text level, it’s time to take it a step further and modify the blocks of text that appear on the page. It’s easy to take for granted the fact that most paragraphs are automatically aligned to the left when you’re reading information on the Web. However, there certainly are situations in which you might choose to align content to the right or even the center of a page. HTML gives you the option to align a single HTML block-level element, such as text contained within a <p></p> or <div></div> tag pair. Before we get into the details of aligning block elements, however, let’s briefly note how attributes work.


    Using Attributes


    Attributes are used to provide additional information related to an HTML tag. Attributes are special code words used inside an HTML tag to control exactly what the tag does. They are very important in even the simplest bit of web content, so it’s important that you are comfortable using them.


    Attributes invoke the use of styles, classes, or IDs that are applied to par- ticular tags. If you define a particular class or ID in a style sheet—as you learned in Chapter 3, “Understanding Cascading Style Sheets” then you can invoke that class or ID using class=”someclass” or id=”someid” with- in the tag itself. When the browser renders the content for display, it will look to the style sheet to determine exactly how the content will appear

    Aligning Text on a Page 93


    according to the associated style definitions. Similarly, you can use the style attribute to include style information for a particular element with- out connecting the element to an actual style sheet. For example, when you begin a paragraph with the <p> tag, you can specify whether the text in that particular paragraph should be aligned to the left margin, the right margin, or to the center of the page by setting the style attribute. If you want to associate that particular paragraph with an existing class or ID, you set the class or id attribute.


    In the following example, each paragraph could be left-aligned:


    <p style=”text-align: left;”>Text goes here.</p>

    <p class=”leftAlignStyle”>Text goes here.</p>

    <p id=”firstLeftAlign”>Text goes here.</p>


    In the first paragraph, the style appears directly in the style attribute. In the second paragraph, the paragraph will be left-aligned if the style sheet entry for the leftAlignStyle class includes the text-align statement. Similarly, the third paragraph will be left-aligned if the style sheet entry for the firstLeftAlign class includes the text-align statement.


    In the previous example, you might have noticed the use of lowercase for tags, attributes, and styles. The exacting XHTML standard requires tags and attributes to be lowercase; the XHTML standard also requires quota- tion marks around attribute values.


    For example, the following code will be rendered by most popular web browsers:

    <P STYLE=TEXT-ALIGN:CENTER>


    However, this code does not conform to XHTML standards because the tag is uppercase, the style attribute and its value (text-align:center) is uppercase, and the value isn’t in quotation marks. If you want to stay com- patible with the latest standards and software, you should always use the following instead:

    <p style=”text-align:center”>


    Aligning Block-Level Elements


    To align a block-level element such as <p> to the right margin without creating a separate class or ID in a style sheet, simply place style=

    ”text-align:right” inside the <p> tag at the beginning of the paragraph. Similarly, to center the element, use <p style=”text-align:center”>. To align a paragraph to the left, use <p style=”text-align:left”>.


    NOTE

    image

    Every attribute and style rule in HTML has a default value that is assumed when you don’t set the attribute yourself. In the case of the text-align style rule of the

    <p> tag, the default value is

    left, so using the bare-bones

    <p> tag has the same effect as using

    <p style=”text-align:left”>. Learning the default values for common style rules is an impor- tant part of becoming a good web page developer.

    94 CHAPTER 5 Working with Fonts, Text Blocks, and Lists


    The text-align part of the style attribute is referred to as a style rule, which means that it is setting a particular style aspect of an HTML ele- ment. There are many style rules you can use to carefully control the for- matting of web content.


    The text-align style rule is not reserved for just the <p> tag. In fact, you can use the text-align style rule with any block-level element, which includes

    <h1>, <h2>, the other heading tags, and the <div> tag, among others. The

    <div> tag is especially handy because it can encompass other block-level ele- ments and thus enable you to control the alignment of large portions of your web content all at once. The div in the <div> tag is for division.


    Listing 5.4 demonstrates the style attribute and text-align style rule with both the <p> and the <div> tags. The results are shown in Figure 5.4. You’ll learn many more advanced uses of the <div> tag in Part III.


    LISTING 5.4 The text-align Style Rule Used with the style Attribute

    image

    <?xml version=”1.0” encoding=”UTF-8”?>

    <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN”

    “http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”>


    <html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en”>

    <head>

    <title>Bohemia</title>

    </head>


    <body>

    <div style=”text-align:center”>

    <h1>Bohemia</h1>

    <h2>by Dorothy Parker</h2>

    </div>

    <p style=”text-align:left”>

    Authors and actors and artists and such<br /> Never know nothing, and never know much.<br />

    Sculptors and singers and those of their kidney<br /> Tell their affairs from Seattle to Sydney.

    </p>

    <p style=”text-align:center”>

    Playwrights and poets and such horses’ necks<br /> Start off from anywhere, end up at sex.<br /> Diarists, critics, and similar roe<br />

    Never say nothing, and never say no.

    </p>

    <p style=”text-align:right”>

    People Who Do Things exceed my endurance;<br /> God, for a man that solicits insurance!

    </p>

    </body>

    </html>

    image

    The Three Types of HTML Lists 95


    image


    The use of <div style=”text-align:center”> ensures that the content area, including the two headings, are centered. However, the text align- ment of the individual paragraphs within the <div> override the setting and ensure that the text of the first paragraph is left-aligned, the second paragraph is centered, and the third paragraph is right-aligned.


    The Three Types of HTML Lists


    For clarity, it’s often useful to present information on a web page as a list of items. There are three basic types of HTML lists. All three are shown in Figure 5.5, and Listing 5.5 reveals the HTML used to construct them.

    . Ordered list—An indented list that has numbers or letters before each list item. The ordered list begins with the <ol> tag and ends with a closing </ol> tag. List items are enclosed in the <li></li> tag pair, and line breaks appear automatically at each opening <li> tag. The entire list is indented.


    . Unordered list—An indented list that has a bullet or other symbol before each list item. The unordered list begins with the <ul> tag and closes with </ul>. Like the ordered list, its list items are enclosed in the <li></li> tag pair. A line break and symbol appear at each open- ing <li> tag, and the entire list is indented.


    FIGURE 5.4

    The results of using the text align- ment in Listing 5.4.

    96 CHAPTER 5 Working with Fonts, Text Blocks, and Lists


    . Definition list—A list of terms and their meanings. This type of list, which has no special number, letter, or symbol before each item, begins with <dl> and ends with </dl>. The <dt></dt> tag pair encloses each term and the <dd></dd> tag pair encloses each definition. Line breaks and indentations appear automatically.


    LISTING 5.5 Unordered Lists, Ordered Lists, and Definition Lists

    image

    <?xml version=”1.0” encoding=”UTF-8”?>

    <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN”

    “http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”>


    <html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en”>

    <head>

    <title>How to Be Proper</title>

    </head>


    <body>

    <h1>How to Be Proper</h1>

    <h2>Basic Etiquette for a Gentlemen Greeting a Lady Aquaintance</h2>

    <ul>

    <li>Wait for her acknowledging bow before tipping your hat.</li>

    <li>Use the hand farthest from her to raise the hat.</li>

    <li>Walk with her if she expresses a wish to converse; Never make a lady stand talking in the street.</li>

    <li>When walking, the lady must always have the wall.</li>

    </ul>

    <h2>Recourse for a Lady Toward Unpleasant Men Who Persist in Bowing</h2>

    <ol>

    <li>A simple stare of iciness should suffice in most instances.</li>

    <li>A cold bow discourages familiarity without offering insult.</li>

    <li>As a last resort: “Sir, I have not the honour of your aquaintance.”</li>

    </ol>

    <h2>Proper Address of Royalty</h2>

    <dl>

    <dt>Your Majesty</dt>

    <dd>To the king or queen.</dd>

    <dt>Your Royal Highness</dt>

    <dd>To the monarch’s spouse, children, and siblings.</dd>

    <dt>Your Highness</dt>

    <dd>To nephews, nieces, and cousins of the sovereign.</dd>

    </dl>

    </body>

    </html>

    image

    Placing Lists Within Lists 97


    image


    Placing Lists Within Lists


    Although definition lists are officially supposed to be used for defining terms, many web page authors use them anywhere they’d like to see some indentation. In practice, you can indent any text simply by putting <dl><dd> at the beginning of it and </dd></dl> at the end and skipping over the

    <dt></dt> tag pair. However, a better approach to indenting text is to use the <blockquote></blockquote> tag pair, which indents content without the presumption of a definition and allows for much more clear styling. With one set of attributes, you can set the width, height, background color, border type and color of your element area, and other visual effects.


    Because of the level of control over the display of your items that you have when using CSS, there is no need to use nested lists to achieve the visual appearance of indentation. Reserve your use of nested lists for when the content warrants it. In other words, use nested lists to show a hierarchy of information, such as in Listing 5.6.


    Ordered and unordered lists can be nested inside one another, down to as many levels as you want. In Listing 5.6, a complex indented outline is con- structed from several unordered lists. You’ll notice in Figure 5.6 that Firefox automatically uses a different type of bullet for each of the first three levels of indentation, making the list very easy to read. This is common in modern browsers.


    FIGURE 5.5

    The three basic types of HTML lists.


    NOTE

    image

    Remember that different web browsers can display web con- tent quite differently. The HTML standard doesn’t specify exactly how web browsers should for- mat lists, so users with older web browsers might not see exactly the same indentation you see. You can use CSS to gain precise control over list items, which you will learn about later in this chapter.


    NOTE

    image

    Nesting refers to a tag that appears entirely within another tag. Nested tags are also referred to as child tags of the (parent) tag that contains them. It is a common (but not required) coding practice to indent nested tags so that you can easily see their relationship to the parent tag.

    98 CHAPTER 5 Working with Fonts, Text Blocks, and Lists


    LISTING 5.6 Using Lists to Build Outlines

    image

    <?xml version=”1.0” encoding=”UTF-8”?>

    <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN”

    “http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”>


    <html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en”>

    <head>

    <title>Vertebrates</title>

    </head>


    <body>

    <h1>Vertebrates</h1>

    <ul>

    <li><span style=”font-weight:bold”>Fish</span>

    <ul>

    <li>Barramundi</li>

    <li>Kissing Gourami</li>

    <li>Mummichog</li>

    </ul>

    </li>

    <li><span style=”font-weight:bold”>Amphibians</span>

    <ul>

    <li>Anura

    <ul>

    <li>Goliath Frog</li>

    <li>Poison Dart Frog</li>

    <li>Purple Frog</li>

    </ul>

    </li>

    <li>Caudata

    <ul>

    <li>Hellbender</li>

    <li>Mudpuppy</li>

    </ul>

    </li>

    </ul>

    </li>

    <li><span style=”font-weight:bold”>Reptiles</span>

    <ul>

    <li>Nile Crocodile</li>

    <li>King Cobra</li>

    <li>Common Snapping Turtle</li>

    </ul>

    </li>

    </ul>

    </body>

    </html>

    image

    Placing Lists Within Lists 99


    As shown in Figure 5.6, a web browser will normally use a solid disc for the first-level bullet, a hollow circle for the second-level bullet, and a solid square for all deeper levels. However, you can explicitly choose which type of bullet to use for any level by using <ul style=”list-style-type:disc”>,

    <ul style=”list-style-type:circle”>, or

    <ul style=”list-style-type:square”> instead of <ul>.


    image


    You can even change the bullet for any single point within an unordered list by using the list-style-type style rule in the <li> tag. For example, the following codes displays a hollow circle in front of the words extra and super and a solid square in front of the word special:

    <ul style=”list-style-type:circle”>

    <li>extra</li>

    <li>super</li>

    <li style=”list-style-type:square”>special</li>

    </ul>


    The list-style-type style rule also works with ordered lists, but instead of choosing a type of bullet, you choose the type of numbers or letters to place in front of each item. Listing 5.7 shows how to use Roman numerals (list-style-type:upper-roman), capital letters (list-style-type:upper- alpha), lowercase letters (list-style-type:lower-alpha), and ordinary numbers in a multilevel list. Figure 5.7 shows the resulting outline, which is nicely formatted.


    FIGURE 5.6

    In Firefox, multilevel unordered lists are neatly indented and bul- leted for improved readability.

    100 CHAPTER 5 Working with Fonts, Text Blocks, and Lists


    Although Listing 5.7 uses the list-style-type style rule only with the

    <ol> tag, you can also use it for specific <li> tags within a list (although it’s hard to imagine a situation in which you would want to do this). You can also explicitly specify ordinary numbering with list-style- type:decimal, and you can make lowercase Roman numerals with

    list-style-type:lower-roman.


    LISTING 5.7 Using the list-style-type Style Rule with the style

    Attribute in Multitiered Lists

    image

    <?xml version=”1.0” encoding=”UTF-8”?>

    <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN”

    “http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”>


    <html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en”>

    <head>

    <title>Advice from the Golf Guru</title>

    </head>


    <body>

    <h1>How to Win at Golf</h1>

    <ol style=”list-style-type:upper-roman”>

    <li>Training

    <ol>

    <li>Mental prep

    <ol style=”list-style-type:upper-alpha”>

    <li>Watch golf on TV religiously</li>

    <li>Get that computer game with Tiger whatsisname</li>

    <li>Rent “personal victory” subliminal tapes</li>

    </ol>

    </li>

    <li>Equipment

    <ol style=”list-style-type:upper-alpha”>

    <li>Make sure your putter has a pro autograph on it</li>

    <li>Pick up a bargain bag of tees-n-balls at Costco</li>

    </ol>

    </li>

    <li>Diet

    <ol style=”list-style-type:upper-alpha”>

    <li>Avoid junk food

    <ol style=”list-style-type:lower-alpha”>

    <li>No hotdogs</li>

    </ol>

    </li>

    <li>Drink wine and mixed drinks only, no beer</li>

    </ol>

    </li>

    </ol>

    Placing Lists Within Lists 101


    LISTING 5.7 Continued

    image

    </li>

    <li>Pre-game

    <ol>

    <li>Dress

    <ol style=”list-style-type:upper-alpha”>

    <li>Put on shorts, even if it’s freezing</li>

    <li>Buy a new hat if you lost last time</li>

    </ol>

    </li>

    <li>Location and Scheduling

    <ol style=”list-style-type:upper-alpha”>

    <li>Select a course where your spouse or boss won’t find you</li>

    <li>To save on fees, play where your buddy works</li>

    </ol>

    </li>

    <li>Opponent

    <ol style=”list-style-type:upper-alpha”>

    <li>Look for: overconfidence, inexperience</li>

    <li>Buy opponent as many pre-game drinks as possible</li>

    </ol>

    </li>

    </ol>

    </li>

    <li>On the Course

    <ol>

    <li>Tee off first, then develop severe hayfever</li>

    <li>Drive cart over opponent’s ball to degrade aerodynamics</li>

    <li>Say “fore” just before ball makes contact with opponent</li>

    <li>Always replace divots when putting</li>

    <li>Water cooler holes are a good time to correct any errors in ball

    placement</li>

    </ol>

    </li>

    </ol>

    </body>

    </html>

    image

    102 CHAPTER 5 Working with Fonts, Text Blocks, and Lists


    FIGURE 5.7

    A well-formatted outline can make almost any plan look more plausible.


    image


    Summary


    In this chapter, you learned how to make text appear as boldface or italic and how to code superscripts, subscripts, special symbols, and accented let- ters. You saw how to make the text line up properly in preformatted pas- sages of monospaced text and how to control the size, color, and typeface of any section of text on a web page. You also learned that attributes are used to specify options and special behavior of many HTML tags and how to use the style attribute with CSS style rules to align text. You also discovered how to create and combine three basic types of HTML lists: ordered lists, unordered lists, and definition lists. Lists can be placed within other lists to create outlines and other complex arrangements of text.


    Table 5.2 summarizes the tags and attributes discussed in this chapter. Don’t feel like you have to memorize all these tags, by the way!


    TABLE 5.2 HTML Tags and Attributes Covered in Chapter 5

    image

    Tag/Attribute Function

    image

    <em>...</em> Emphasis (usually italic).

    <strong>...</strong> Stronger emphasis (usually bold).

    <b>...</b> Boldface text.

    Summary 103


    TABLE 5.2 Continued

    image

    Tag/Attribute Function

    image

    <i>...</i> Italic text.

    <tt>...</tt> Typewriter (monospaced) font.

    <pre>...</pre> Preformatted text (exact line endings and spacing will

    be preserved—usually rendered in a monospaced font).

    <big>...</big> Text is slightly larger than normal.

    <small>...</small> Text is slightly smaller than normal.

    <sub>...</sub> Subscript.

    <sup>...</sup> Superscript.

    <div>...</div> A region of text to be formatted.

    <dl>...</dl> A definition list.

    <dt>...</dt> A definition term, as part of a definition list.

    <dd>...</dd> The corresponding definition to a definition term, as

    part of a definition list.

    <ol>...</ol> An ordered (numbered) list.

    <ul>...</ul> An unordered (bulleted) list.

    <li>...</li> A list item for use with <ol> or <ul>.

    Attributes

    image

    style=”font- The typeface (family) of the font, which is the

    family:typeface” name of a font, such as Arial. (Can also be used with

    <p>, <h1>, <h2>, <h3>, and so on.)

    style=”font- The size of the font, which can be set to small, size:size” medium, or large, as well as x-small, x-large, and

    so on. Can also be set to a specific point size (such as 12 pt).

    style=”color:color” Changes the color of the text.

    style=”text- Align text to center, left, or right. (Can also be

    align:alignment” used with <p>, <h1>, <h2>, <h3>, and so on.)

    style=”list- The type of numerals used to label the list. Possible

    style-type: values are decimal, lower-roman, upper-roman,

    numtype” lower-alpha, upper-alpha, and none.

    style=”list-style- The bullet dingbat used to mark list items. Possible

    type:bullettype” values are disc, circle, square, and none.

    style=”list-style- The type of bullet or number used to label this item.

    type:type” Possible values are disc, circle, square, decimal,

    lower-roman, upper-roman, lower-alpha, upper- alpha, and none.

    image

    image

    104 CHAPTER 5 Working with Fonts, Text Blocks, and Lists


    Q&A


    Q. How do I find out the exact name for a font I have on my computer?


    A. On a Windows or Macintosh computer, open the Control Panel and click the Fonts folder—the fonts on your system are listed. (Vista users might have to switch to “Classic View” in your Control Panel.) When specifying fonts in the font-family style rule, use the exact spelling of font names. Font names are not case-sensitive, however.


    Q. How do I put Kanji, Arabic, Chinese, and other non-European charac- ters on my pages?


    A. First of all, users who need to read these characters on your pages must have the appropriate language fonts installed. They must also have selected that language character set and its associated font for their web browsers. You can use the Character Map program in Windows (or a similar program in other operating systems) to get the numerical codes for each character in any language font. To find Character Map, click Start, All Programs, Accessories, and then System Tools. If the character you want has a code of 214, use &#214; to place it on a web page. If you cannot find the Character Map program, use your operating system’s built-in Help function to find the specific location.


    The best way to include a short message in an Asian language (such

    as We Speak Tamil-Call Us!) is to include it as a graphics image. That way every user will see it, even if they use English as their primary lan- guage for web browsing. But even to use a language font in a graphic, you will likely have to download a specific language pack for your oper- ating system. Again, check your system’s Help function for specific instructions.


    Q. I’ve seen web pages that use three-dimensional little balls or other special graphics for bullets. How do they do that?


    A. That trick is a little bit beyond what this chapter covers. You’ll learn how to do it yourself in Chapter 8.


    Q. How do I “full justify” text so that both the left and right margins are flush?


    A. You can use text-align:justify in your style declaration.


    www.it-ebooks.info

    image

    Workshop

    105


    Workshop


    The workshop contains quiz questions and activities to help you solidify your understanding of the material covered. Try to answer all questions before looking at the “Answers” section that follows.


    Quiz


    1. How would you create a paragraph in which the first three words are bold, using styles rather than the <b> or <strong> tags?


    2. How would you represent the chemical formula for water?


    3. How do you display “© 2010, Webwonks Inc.” on a web page?


    4. How would you center everything on an entire page?


    5. What would you use to create a definition list to show that the word glunch means “a look of disdain, anger, or displeasure” and that the word glumpy means “sullen, morose, or sulky”?


Answers


  1. You would use the following:


    <p><span style=”font-weight: bold”>First three words</span> are bold.</p>


  2. You would use H<sub>2</sub>O.


  3. You would use either of the following:


    &copy; 2010, Webwonks Inc.

    &#169; 2010, Webwonks Inc.


  4. If you thought about putting a <div style=”text-align:center”> immediately after the <body> tag at the top of the page, and </div> just before the </body> tag at the end of the page, then you’re correct. However, the text-align style is also supported directly in the <body> tag, which means you can forego the <div> tag and place the style=”text-align:center” style directly in the <body> tag. Presto, the entire page is centered!


  5. You would use the following:


<dl>

<dt>glunch</dt><dd>a look of disdain, anger, or displeasure</dd>

<dt>glumpy</dt><dd>sullen, morose, or sulky</dd>

</dl>


www.it-ebooks.info

image

106 CHAPTER 5 Working with Fonts, Text Blocks, and Lists


Exercises

. Apply the font-level style attributes you learned about in this chapter to various block-level elements such as <p>, <div>, <ul>, and <li> items. Try nesting your elements to get a feel for how styles do or do not cas- cade through the content hierarchy.

. Use the text alignment style attributes to place blocks of text in various places on your web page. Try nesting your paragraphs and divisions (<p> and <div>) to get a feel for how styles do or do not cascade through the content hierarchy.


. Try producing an ordered list outlining the information you’d like to put on your web pages. This will give you practice formatting HTML lists and also give you a head start on thinking about the issues covered in later chapters of this book.


www.it-ebooks.info

image


CHAPTER 6

Using Tables to Display Information


In this chapter, you learn how to build HTML tables you can use to control the spacing, layout, and appearance of tabular data in your web content. Although you can achieve similar results using CSS, there are definitely times when a table is the best way to present information, and you’ll find that tables are useful for arranging information into rows and columns. I will also explain how designers have used tables for page layout in the past and how that isn’t always the best idea. Before we begin, just remem- ber a table is simply an orderly arrangement of content into vertical columns and horizontal rows.


Creating a Simple Table


A table consists of rows of information with individual cells inside. To make tables, you have to start with a <table> tag. Of course, you end your tables with the </table> tag. If you want the table to have a border, use a border attribute to specify the width of the border in pixels. A border size of 0 or none (or leaving the border attribute out entirely) will make the border invisible, which is handy if you find yourself using a table as a page layout tool (not recommended).


With the <table> tag in place, the next thing you need is the <tr> tag. The

<tr> tag creates a table row, which contains one or more cells of informa- tion before the closing </tr>. To create these individual cells, use the <td> tag (<td> stands for table data). Place the table information between the

<td> and </td> tags. A cell is a rectangular region that can contain any text, images, and HTML tags. Each row in a table consists of at least one cell. Multiple cells within a row form columns in a table.

WHAT YOU’LL LEARN IN THIS CHAPTER:


. How to create simple tables

. How to control the size of tables

. How to align content and span rows and columns within tables


TIP

As you read this chapter, think about how arranging text into tables could benefit your web content. The following are some specific ideas to keep in mind:

. The most obvious applica- tion of tables is to organize tabular information, such as a multicolumn list of names and numbers.

. Whenever you need multiple columns of text or images, tables are the answer.

108 CHAPTER 6 Using Tables to Display Information


TIP

Some style properties enable you to take much more control over table borders. For example, you can set the border width (border-width), style (border- style), and color (border- color). These properties work fine, but you have to apply them to each table element, which can be cumbersome even if you use classes for your table row or table cell elements.

There is one more basic tag involved in building tables. The <th> tag works exactly like a <td> tag except <th> indicates that the cell is part of the heading of the table. Most web browsers render the text in <th> cells as centered and boldface.


You can create as many cells as you want, but each row in a table should have the same number of columns as the other rows. The HTML code shown in Listing 6.1 creates a simple table using only the four table tags I’ve mentioned thus far. Figure 6.1 shows the resulting page as viewed in a web browser.


LISTING 6.1 Creating Tables with the <table>, <tr>, <td>, and <th>

Tags

image

<?xml version=”1.0” encoding=”UTF-8”?>

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN”

“http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”>


<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en”>

<head>

<title>Baseball Standings</title>

</head>


<body>

<h1>Baseball Standings</h1>

<table>

<tr>

<th>Team</th>

<th>W</th>

<th>L</th>

<th>GB</th>

</tr>

<tr>

<td>Los Angeles Dodgers</td>

<td>62</td>

<td>38</td>

<td>—</td>

</tr>

<tr>

<td>San Francisco Giants</td>

<td>54</td>

<td>46</td>

<td>8.0</td>

</tr>

<tr>

<td>Colorado Rockies</td>

<td>54</td>

<td>46</td>

<td>8.0</td>

</tr>

Creating a Simple Table 109

LISTING 6.1 Continued TIP

image

<tr>

<td>Arizona Diamondbacks</td>

<td>43</td>

<td>58</td>

<td>19.5</td>

</tr>

<tr>

<td>San Diego Padres</td>

<td>39</td>

<td>62</td>

<td>23.5</td>

</tr>

</table>

</body>

</html>

image


image


The table in the example contains baseball standings, which are perfect for arranging in rows and columns—if not a little plain. You’ll learn to jazz things up a bit during this chapter. The headings in the table show the Team, Wins (W), Losses (L), and Games Behind (GB) in the standings.


Although we did not apply any styles to the HTML in Listing 6.1, you can use any text style in a table cell. However, styles or HTML tags used in one cell don’t carry over to other cells, and tags from outside the table don’t apply within the table. For example, consider the following table:

image

HTML ignores extra spaces between words and tags. However, you might find your HTML tables easier to read (and less prone to time-wasting errors) if you use spaces to indent <tr> and <td> tags, as I did in Listing 6.1.


FIGURE 6.1

The HTML code in Listing 6.1 cre- ates a table with six rows and four columns.

110 CHAPTER 6 Using Tables to Display Information


<p style=”font-weight:bold”>

<table>

<tr>

<td style=”font-style:italic”>hello</td>

<td>there</td>

</tr>

</table>

</p>


In this example, the <p> tag is used around a table to demonstrate how tables are immune to outside tags. The word there would be neither bold- face nor italic because neither the font-weight:bold style outside the table nor the font-style:italic style from the previous cell affects it. In this example, the word hello is in italics, however.


To boldface the words hello and there, change the table code to this:


<table style=”font-weight:bold”>

<tr>

<td style=”font-style:italic”>hello</td>

<td>there</td>

</tr>

</table


In this example, both words are in bold and the word hello is italicized as well. Of course, you don’t have to apply styles at the table level. The font- weight:bold style could just as easily be applied to each cell individually; you could repeat style=”font-weight:bold” in each cell or create a class in your style sheet and use class=”classname” in each cell—it’s your choice.



NOTE

image

There are actually width and height HTML attributes that were deprecated in the move to XHTML, and you might still see them when you look at another designer’s code. These attrib- utes still work in web browsers, but you should use the width and height style properties instead because they represent the appropriate use of XHTML.

Controlling Table Sizes


When a table width is not specified, the size of a table and its individual cells automatically expand to fit the data you place into it. However, you can choose to control the exact size of the entire table by using width and/or height styles in the <table> tag. You can also control the size of each cell by putting width and height styles in the individual <td> tags. The width and height styles can be specified as either pixels or percent- ages. For example, the following code creates a table 500 pixels wide and 400 pixels high:

<table style=”width:500px; height:400px”>


To make the first cell of the table 20% of the total table width and the sec- ond cell 80% of the table width, type the following:

Controlling Table Sizes 111


<table style=”width:100%”>

<tr>

<td style=”width:20%”>skinny cell</td>

<td style=”width:80%”>fat cell</td>

</tr>

</table>


Notice that the table is sized to 100%, which ensures the table fills the entire width of the browser window. When you use percentages instead of fixed pixel sizes, the table will resize automatically to fit any size browser window while maintaining the aesthetic balance you’re after. In this case, the two cells within the table are automatically resized to 20% and 80% of the total table width, respectively.


In Listing 6.2, the simple table from Listing 6.1 is expanded to show specif- ic control over table cell widths.


LISTING 6.2 Specifying Table Cell Widths

image

<?xml version=”1.0” encoding=”UTF-8”?>

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN”

“http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”>


<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en”>

<head>

<title>Baseball Standings</title>

</head>


<body>

<h1>Baseball Standings</h1>

<table>

<tr>

<th style=”width:35px;”></th>

<th style=”width:175px;”>Team</th>

<th style=”width:25px;”>W</th>

<th style=”width:25px;”>L</th>

<th style=”width:25px;”>GB</th>

</tr>

<tr>

<td><img src=”losangeles.gif” alt=”Los Angeles Dodgers” /></td>

<td>Los Angeles Dodgers</td>

<td>62</td>

<td>38</td>

<td>—</td>

</tr>

<tr>

<td><img src=”sanfrancisco.gif” alt=”San Francisco Giants” /></td>

<td>San Francisco Giants</td>

<td>54</td>

112 CHAPTER 6 Using Tables to Display Information


LISTING 6.2 Continued

image

<td>46</td>

<td>8.0</td>

</tr>

<tr>

<td><img src=”colorado.gif” alt=”Colorado Rockies” /></td>

<td>Colorado Rockies</td>

<td>54</td>

<td>46</td>

<td>8.0</td>

</tr>

<tr>

<td><img src=”arizona.gif” alt=”Arizona Diamondbacks” /></td>

<td>Arizona Diamondbacks</td>

<td>43</td>

<td>58</td>

<td>19.5</td>

</tr>

<tr>

<td><img src=”sandiego.gif” alt=”San Diego Padres” /></td>

<td>San Diego Padres</td>

<td>39</td>

<td>62</td>

<td>23.5</td>

</tr>

</table>

</body>

</html>

image


You can see the consistent column widths in Figure 6.2.


image

FIGURE 6.2

The HTML code in Listing 6.2 cre- ates a table with six rows and five columns, with specific widths used for each column.

Alignment and Spanning Within Tables 113


There are two differences between the code from Listing 6.1 and the code used in Listing 6.2. First, an additional column has been added in Listing 6.2; this column does not have a heading, but the <th></th> tag pair is still present in the first table row. In rows two through six, this additional col- umn contains an image (the <img /> tag). The second difference in Listing

6.2 is the addition of a specific width style for each <th> element in the first row. The first column is defined as 35px wide, the second 175px wide, and the third, fourth, and fifth columns are each 25px wide.


Also note that these widths are not repeated in the <td> elements in subse- quent rows. Technically you must define only the widths in the first row; the remaining rows will follow suit because they are all part of the same table. However, if you used another formatting style (such as a style to change font size or color), that style must be repeated for each element that should have those display properties.


Alignment and Spanning Within Tables


By default, anything you place inside a table cell is aligned to the left and vertically centered. Figures 6.1 and 6.2 show this default alignment. However, you can align the contents of table cells both horizontally and vertically with the text-align and vertical-align style properties.


You can apply these alignment attributes to any <tr>, <td>, or <th> tag. Alignment attributes assigned to a <tr> tag apply to all cells in that row. Depending on the size of your table, you can save yourself a considerable amount of time and effort by applying these attributes at the <tr> level and not in each <td> or <th> tag.


The HTML code in Listing 6.3 uses a combination of text alignment styles to apply a default alignment to a row, but it is overridden in a few individ- ual cells. Figure 6.3 shows the result of the code in Listing 6.3.


Following are some of the more commonly used vertical-align style property values: top, middle, bottom, text-top, text-bottom, and baseline (for text). These property values give you plenty of flexibility in aligning table data vertically.

114 CHAPTER 6 Using Tables to Display Information


LISTING 6.3 Alignment, Cell Spacing, Borders, and Background Colors in Tables

image

<?xml version=”1.0” encoding=”UTF-8”?>

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN”

“http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”>


<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en”>

<head>

<title>Things to Fear</title>

</head>


<body>

<h1>Things to Fear</h1>

<table border=”2” cellpadding=”4” cellspacing=”2” width=”100%”>

<tr style=”background-color:red;color:white”>

<th colspan=”2”>Description</th>

<th>Size</th>

<th>Weight</th>

<th>Speed</th>

</tr>

<tr style=”vertical-align:top”>

<td><img src=”handgun.gif” alt=”.38 Special”/></td>

<td style=”font-size: 14px;font-weight:bold;

vertical-align:middle;text-align:center”>.38 Special</td>

<td>Five-inch barrel.</td>

<td>Twenty ounces.</td>

<td>Six rounds in four seconds.</td>

</tr>

<tr style=”vertical-align:top”>

<td><img src=”rhino.gif” alt=”Rhinoceros” /></td>

<td style=”font-size: 14px;font-weight:bold;

vertical-align:middle;text-align:center”>Rhinoceros</td>

<td>Twelve feet, horn to tail.</td>

<td>Up to two tons.</td>

<td>Thirty-five miles per hour in bursts.</td>

</tr>

<tr style=”vertical-align:top”>

<td><img src=”axeman.gif” alt=”Broad Axe” /></td>

<td style=”font-size: 14px;font-weight:bold;

vertical-align:middle;text-align:center”>Broad Axe</td>

<td>Thirty-inch blade.</td>

<td>Twelve pounds.</td>

<td>Sixty miles per hour on impact.</td>

</tr>

</table>

</body>

</html>

image

Alignment and Spanning Within Tables 115


image


At the top of Figure 6.3, a single cell (Description) spans two columns. This is accomplished with the colspan attribute in the <th> tag for that cell. As you might guess, you can also use the rowspan attribute to create a cell that spans more than one row.


Spanning is the process of forcing a cell to stretch across more than one row or column of a table. The colspan attribute causes a cell to span across multiple columns; rowspan has the same effect on rows.


Additionally, text styles are used in the second cell within the Description column to create bold text that is both vertically aligned to the middle and horizontally aligned to the center of the cell.


There are a few tricks in Listing 6.3 that I haven’t explained yet. You can give an entire table—and each individual row or cell in a table—its own back- ground, distinct from any background you might use on the web page itself. You can do this by placing the background-color or background-image style in the <table>, <tr>, <td>, or <th> tag exactly as you would in the <body> tag (see Chapter 8, “Working with Colors, Images, and Multimedia”). To give an entire table a yellow background, for example, you would use

<table style=”background-color:yellow”> or the equivalent <table style=”background-color:#FFFF00”>. In Listing 6.3, only the top row has a background color; it uses <tr style=”background-color:red;color: white”> to apply a red background across the cells in that row. Additionally, the color style ensures that the text in that row is white.


FIGURE 6.3

The code in Listing 6.3 shows the use of the colspan attribute and alignment styles.


TIP

image

Keeping the structure of rows and columns organized in your mind can be the most difficult part of creating tables with cells that span multiple columns or rows. The tiniest error can often throw the whole thing into disarray. You’ll save yourself time and frustration by sketching your tables on paper before you start writing the HTML to implement them.


NOTE

image

You will often see alternating row colors in a table. For instance, one row might have a grey background and the next row might have a white back- ground. Alternating row colors helps users read the content of your table more clearly, espe- cially if the table is quite large.

116 CHAPTER 6 Using Tables to Display Information


NOTE

Although the cellpadding and cellspacing attributes are still allowed in XHTML, a CSS equiv- alent for them exists in the form of the padding and border- spacing style properties.

Similar to the background-color style property is the background-image property (not shown in this example), which is used to set an image for a table background. If you wanted to set the image leaves.gif as the back- ground for a table, you would use <table style=”background- image:url(leaves.gif)”>. Notice that the image file is placed within parentheses and preceded by the word url, which indicates that you are describing where the image file is located.


Tweaking tables goes beyond just using style properties. As shown in Listing 6.3, you can control the space around the borders of a table with the cellpadding and cellspacing attributes. The cellspacing attribute sets the amount of space (in pixels) between table borders and between table cells themselves. The cellpadding attribute sets the amount of space around the edges of information in the cells, also in pixels. Setting the cellpadding value to 0 causes all the information in the table to align as closely as possible to the table borders, possibly even touching the borders. The cellpadding and cellspacing attributes give you good overall con- trol of the table’s appearance.


Page Layout with Tables


At the beginning of this chapter, I indicated that designers have used tables for page layout and to display tabular information. You will still find many examples of table-based layouts if you peek at another designer’s source code. This method of design grew out of the old (mid-1990s to early 2000s) inconsistencies in browser support for CSS. All browsers supported tables and in generally the same way, so web designers latched on to the table- based method of content creation to achieve the same visual page display across all browsers. However, now that support for CSS is relatively similar across all major browsers, designers can follow the long-standing stan- dards-based recommendation not to use tables for page layout.


The World Wide Web Consortium (W3C), the standards body that oversees the future of the Web, promotes style sheets as the proper way to lay out pages (instead of using tables). Style sheets are ultimately much more powerful than tables, which is why the bulk of this book teaches you how to use style sheets for page layout.


The main reasons for avoiding using tables for layout include the following:


. Mixing presentation with content—One of the goals of CSS and standards-compliant web design is to separate the presentation layer from the content layer.

Summary 117


. Creating unnecessarily difficult redesigns—To change a table-based layout, you would have to change the table-based layout on every single page of your site (unless it is part of a complicated, dynamical- ly driven site, in which case you would have to undo all the dynamic pieces and remake them).


. Accessibility issues—Screen reading software looks to tables for con- tent and will often try to read your layout table as a content table.


. Rendering on mobile devices—Table layouts are often not flexible enough to scale downward to small screens (see Chapter 12, “Creating Fixed or Liquid Layouts”).


These are but a few of the issues in table-based web design. For a closer look at some of these issues, see the popular presentation “Why Tables for Layout Is Stupid” at http://www.hotdesign.com/seybold/everything.html.


Summary


In this brief chapter, you learned to arrange text and images into organized arrangements of rows and columns called tables. You learned the three basic tags for creating tables and many optional attributes and styles for controlling the alignment, spacing, and appearance of tables. You also dis- covered that tables can be used together and nested within one another for an even wider variety of layout options.


Table 6.1 summarizes the tags and attributes covered in this chapter.


TABLE 6.1 HTML Tags and Attributes Covered in Chapter 6

image

Tag/Attribute Function

image

<table>...</table> Creates a table that can contain any number of rows

(<tr> tags).

Attributes

image

border=”width” Indicates the width in pixels of the table borders.

Using border=”0” or omitting the border attribute makes borders invisible.

cellspacing= The amount of space between the cells in the

”spacing” table, in pixels.

cellpadding= The amount of space between the edges of the

”padding” cell and its contents, in pixels.

style= The width of the table on the page, either in exact

”width:width” pixel values or as a percentage of the page width.

118 CHAPTER 6 Using Tables to Display Information


TABLE 6.1 Continued

image

Tag/Attribute Function

image

style= The height of the table on the page, either in exact

”height:height” pixel values or as a percentage of the page height.

style=”background- Background color of the table and individual table

color:color” cells that don’t already have a background color.

style= A background image to display within the table

”backgroundimage: and individual table cells that don’t already have

url(imageurl)” a background image. (If a background color is also

specified, the color will show through transparent areas of the image.)

Attributes

image

<tr></tr> Defines a table row containing one or more cells

(<td> tags).

Attributes

image

style=”text-align: The horizontal alignment of the contents of the

alignment” cells within this row. Possible values are left,

right, and center.

style=”vertical- The vertical alignment of the contents of the cells

align:alignment” within this row. Commonly used values include top,

middle, and bottom.

style=”background- Background color of all cells in the row that do not

color:color” already have a background color.

style= Background image to display within all cells in the ”backgroundimage: row that do not already have their own background url(imageurl)” image.

<td>...</td> Defines a table data cell.

<th>...</th> Defines a table heading cell. (Accepts all the

same attributes and styles as <td>.)

Attributes

image

style=”text- The horizontal alignment of the contents of the

align:alignment” cell. Possible values are left, right, and center. style=”vertical- The vertical alignment of the contents of the cell.

align:alignment” Commonly used values are top, middle, and bottom.

rowspan=”numrows” The number of rows this cell will span. colspan=”numcols” The number of columns this cell will span. style=”width:width” The width of this column of cells, in exact pixel

values or as a percentage of the table width.

Summary 119


TABLE 6.1 Continued

image

Attributes

image

style= The height of this row of cells, in exact pixel

”height:height” values or as a percentage of the table height.

style=”background- Background color of the cell.

color:color”


style= Background image to display within the cell.

image

”backgroundimage: url(imageurl)”

image

120 CHAPTER 6 Using Tables to Display Information


Q&A


Q. I made a big table and when I load the page, nothing appears on the page for a long time. Why the wait?


A. Complex tables can take a while to appear on the screen. The web browser has to figure out the size of everything in the table before it can display any part of it. You can speed things up a bit by always including width and height attributes for every graphics image within a table. Using width attributes in the <table> and <td> tags also helps.


Q. Can I put a table within a table?


  1. Yes, you can nest tables within other table cells. However, nested tables—especially large ones—take time to load and render properly. Before you create a nested table, think about the content you are plac- ing on the page and ask yourself if it could be displayed using CSS. You might not know all the answers until you finish this book, but here’s a hint: In most cases, the answer will be yes.


    Workshop


    The workshop contains quiz questions and exercises to help you solidify your understanding of the material covered. Try to answer all questions before looking at the “Answers” section that follows.


    Quiz


    1. How would you create a simple two-row, two-column table with a stan- dard border?


    2. Expanding on question 1, how would you add 30 pixels of space between the table border and the cells?


    3. Continuing with the table you’ve built in questions 1 and 2, how would you make the top-left cell green, the top-right cell red, the bottom-left cell yellow, and the bottom-right cell blue?

image

Workshop 121


Answers


  1. Use the following HTML:


    <table border=”1”>

    <tr>

    <td>Top left...</td>

    <td>Top right...</td>

    </tr>

    <tr>

    <td>Bottom left...</td>

    <td>Bottom right...</td>

    </tr>

    </table>


  2. Add cellspacing=”30” to the <table> tag.


  3. Add style=”background-color:green” to the top left <td> tag, add style=”background-color:red” to the top right <td> tag, add style=”background-color:yellow” to the bottom left <td> tag, and add style=”background-color:blue” to the bottom right <td> tag.


Exercises


. Do you have any pages that have information visitors might be interest- ed in viewing as lists or tables? Use a table to present some tabular information. Make sure each column has its own heading (or perhaps its own graphic). Play around with the various types of alignment and spacing that you have learned in this chapter.


. You will often see alternating row colors in a table, with one row having a grey background and the next a white background. The goal of alter- nating colors in table rows is so that the individual rows are easier to discern when looking quickly at the table full of data. Create a table with alternating row colors and text colors (if necessary). Although the lesson on colors comes in Chapter 8, you have enough information in this lesson to begin trying out the process.


This page intentionally left blank

image


CHAPTER 7

Using External and Internal Links


So far, you have learned how to use HTML tags to create some basic web pages. However, at this point, those pieces of content are islands unto themselves, with no connection to anything else (although it is true that in Chapter 3, “Understanding Cascading Style Sheets,” I sneaked a few page links into the examples). To turn your work into real web content, you need to connect it to the rest of the Web—or at least to your other pages within your own personal or corporate sites.


This chapter shows you how to create hypertext links to content within your own document and how to link to other external documents. Additionally, you will learn how to style hypertext links so that they dis- play in the color and decoration that you desire—not necessarily the default blue underlined display.


Using Web Addresses


The simplest way to store web content for an individual website is to place the files all in the same folder together. When files are stored together like this, you can link to them by simply providing the name of the file in the href attribute of the <a> tag.


An attribute is an extra piece of information associated with a tag that pro- vides further details about the tag. For example, the href attribute of the

<a> tag identifies the address of the page to which you are linking.


After you have more than a few pages, or when you start to have an organization structure to the content in your site, you should put your files into directories (or folders, if you will) whose names reflect the content within them. For example, all your images could be in an “images” direc- tory, corporate information could be in an “about” directory, and so on.

WHAT YOU’LL LEARN IN THIS CHAPTER:


. How to use anchor links

. How to link between pages on your own site

. How to link to external content

. How to link to an email address

. How to use window target- ing with your links

. How to style your links with CSS


NOTE

Before we begin, you might want a refresher on the basics of where to put files on your server and how to manage files within a set of directories. This information is important to know when creating links in web content. Refer back to Chapter 1, “Publishing Web Content,” specifically the sec- tion titled “Understanding Where to Place Files on the Web Server.”

124 CHAPTER 7 Using External and Internal Links


CAUTION

The / forward slash is always used to separate directories in HTML. Don’t use the \ back- slash (which is normally used in Windows) to separate your directories. Remember, every- thing in the Web moves forward, so use forward slashes.

Regardless of how you organize your documents within your own web server, you can use relative addresses, which include only enough informa- tion to find one page from another.


A relative address describes the path from one web page to another, instead of a full (or absolute) Internet address.


If you recall from Chapter 1, the document root of your web server is the directory designated as the top-level directory for your web content. In web addresses, that document root is represented by the forward slash (/). All subsequent levels of directories are separated by the same type of for- ward slash. For example:

/directory/subdirectory/subsubdirectory/


Suppose you are creating a page named zoo.html in your document root and you want to include a link to pages named african.html and asian.html in the elephants subdirectory. The links would look like the following:

<a href=”/elephants/african.html”>Learn about African elephants.</a>

<a href=”/elephants/asian.html”>Learn about Asian elephants.</a>


These specific addresses are actually called relative-root addresses in that they are relative addresses that lack the entire domain name, but they are specifically relative to the document root specified by the forward slash.


Using a regular relative address, you can skip the initial forward slash. This type of address allows the links to become relative to whatever direc- tory they are in—it could be the document root or it could be another directory one or more levels down from the document root:

<a href=”elephants/african.html”>Learn about African elephants.</a>

<a href=”elephants/asian.html”>Learn about Asian elephants.</a>


Your african.html and asian.html documents in the elephants subdirectory could link back to the main zoo.html page in either of these ways:

<a href=”http://www.yourdomain.com/zoo.html”>Return to the zoo.</a>

<a href=”/zoo.html”>Return to the zoo.</a>

<a href=”../zoo.html”>Return to the zoo.</a>


The first link is an absolute link. With an absolute link there is absolutely no doubt where the link should go because the full URL is provided—domain name included.


The second link is a relative-root link. It is relative to the domain you are currently browsing and therefore does not require the protocol type (for

Using Web Addresses 125


example, http://) and the domain name (for example, www.yourdomain. com), but the initial forward slash is provided to show that the address begins at the document root.


In the third link, the double dot (..) is a special command that indicates the folder that contains the current folder—in other words, the parent folder. Anytime you see the double dot, just think to yourself “go up a level” in the directory structure.


If you use relative addressing consistently throughout your web pages, you can move the pages to another folder, disk drive, or web server with- out changing the links.


Relative addresses can span quite complex directory structures if necessary. Chapter 27, “Organizing and Managing a Website,” offers more detailed advice for organizing and linking large numbers of web pages.


TIP

The general rule surrounding relative addressing (elephants/ african.html) versus absolute addressing (http://www.takeme 2thezoo.com/elephants/african

  1. tml) is that you should use relative addressing when linking to files that are stored together, such as files that are all part of the same website. Absolute addressing should be used when you’re linking to files somewhere else—another com- puter, another disk drive, or, more commonly, another web- site on the Internet.



    Hopefully, by now, you’ve created a page or two of your own while working through the chapters. Follow these steps to add a few more pages and link them together:


    1. Use a home page as a main entrance and as a central hub to which all of your other pages are connected. If you created a page about yourself or your business, use that page as your home page. You also might like to create a new page now for this purpose.


    2. On the home page, put a list of links to the other HTML files you’ve cre- ated (or placeholders for the HTML files you plan to create soon). Be sure that the exact spelling of the filename, including any capitalization, is correct in every link.


    3. On every other page besides the home page, include a link at the bot- tom (or top) leading back to your home page. That makes it simple and easy to navigate around your site.


    4. You might also want to include a list of links to related or interesting sites, either on your home page or on a separate links page. People often include a list of their friends’ personal pages on their own home page. Businesses, however, should be careful not to lead potential cus- tomers away to other sites too quickly—there’s no guarantee they’ll remember to use relative addressing for links between your own pages and absolute addressing for links to other sites.

image

TRY IT YOURSELF


Creating a Simple Site Architecture

126 CHAPTER 7 Using External and Internal Links


Linking Within a Page Using Anchors


The <a> tag—the tag responsible for hyperlinks on the Web—got its name from the word “anchor,”and means a link serves as a designation for a spot in a web page. In examples shown throughout this book so far, you’ve learned how to use the <a> tag to link to somewhere else, but that’s only half of its usefulness. Let’s get started working with anchor links that link to content within the same page.


Identifying Locations in a Page with Anchors


The <a> tag can be used to mark a spot on a page as an anchor, enabling you to create a link that points to that exact spot. Listing 7.1, which is pre- sented a bit later in this chapter, demonstrates a link to an anchor within a page. To see how such links are made, let’s take a quick peek ahead at the first <a> tag in the listing:

<a id=”top”></a>


NOTE

image

Instead of using id, older ver- sions of HTML used name. Newer versions of HTML and XHTML have done away with the name attribute and instead use id.

The <a> tag normally uses the href attribute to specify a hyperlinked tar- get. The <a href> is what you click and <a id> is where you go when you click there. In this example, the <a> tag is still specifying a target but no actual link is created. Instead, the <a> tag gives a name to the specific point on the page where the tag occurs. The </a> tag must be included and a unique name must be assigned to the id attribute, but no text between <a> and </a> is necessary.


Linking to Anchor Locations


Listing 7.1 shows a site with various anchor points placed throughout a single page. Take a look at the last <a> tag in Listing 7.1 to see an example:

<a href=”#top”>Return to Index.</a>


The # symbol means that the word top refers to a named anchor point within the current document, rather than to a separate page. When a user clicks Return to Index, the web browser displays the part of the page starting with the <a id=”top”> tag.

Linking Within a Page Using Anchors 127


LISTING 7.1 Setting Anchor Points by Using the <a> Tag with an id Attribute

image

image

<?xml version=”1.0” encoding=”UTF-8”?>

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN”

“http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”>


<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en”>

<head>

<title>Alphabetical Shakespeare</title>

</head>


<body>

<h1><a id=”top”></a>First Lines of Shakespearean Sonnets</h1>

<p>Don’t you just hate when you go a-courting, and you’re down

on one knee about to rattle off a totally romantic Shakespearean sonnet, and zap! You space it. <em>”Um... It was, uh... I think it started with a B...”</em></p>

<p>Well, appearest thou no longer the dork. Simply refer to this page, click on the first letter of the sonnet you want, and get an instant reminder of the first line to get you started. <em>”Beshrew that heart that makes my heart to groan...”</em></p>

<h2 style=”text-align:center”>Alphabetical Index</h2>

<h3 style=”text-align:center”>

<a href=”#A”>A</a> <a href=”#B”>B</a> <a href=”#C”>C</a>

<a href=”#D”>D</a> <a href=”#E”>E</a> <a href=”#F”>F</a>

<a href=”#G”>G</a> <a href=”#H”>H</a> <a href=”#I”>I</a>

<a href=”#J”>J</a> <a href=”#K”>K</a> <a href=”#L”>L</a>

<a href=”#M”>M</a> <a href=”#N”>N</a> <a href=”#O”>O</a>

<a href=”#P”>P</a> <a href=”#Q”>Q</a> <a href=”#R”>R</a>

<a href=”#S”>S</a> <a href=”#T”>T</a> <a href=”#U”>U</a>

<a href=”#V”>V</a> <a href=”#W”>W</a> <a href=”#X”>X</a>

<a href=”#Y”>Y</a> <a href=”#Z”>Z</a>

</h3>

<hr />

<h3><a id=”A”></a>A</h3>

<ul>

<li>A woman’s face with nature’s own hand painted,</li>

<li>Accuse me thus, that I have scanted all, </li>

<li>Against my love shall be as I am now</li>

<li>Against that time (if ever that time come) </li>

<li>Ah wherefore with infection should he live, </li>

<li>Alack what poverty my muse brings forth, </li>

<li>Alas ‘tis true, I have gone here and there, </li>

<li>As a decrepit father takes delight, </li>

<li>As an unperfect actor on the stage, </li>

<li>As fast as thou shalt wane so fast thou grow’st, </li>

</ul>

<p><a href=”#top”><em>Return to Index.</em></a></p>

<hr />

<!-- continue with the alphabet -->

<h3><a id=”Z”></a>Z</h3>

<p>(No sonnets start with Z.)</p>

<p><a href=”#top”><em>Return to Index.</em></a></p>

</body>

</html>


NOTE

image

Near the end of Listing 7.1 you will see a line that reads:

<!-- continue with the alphabet -->

This text (an HTML comment) will appear in your source code, but will not be displayed by the browser. You can learn more about commenting your code in Chapter 27.


CAUTION

image

Anchor names specified via the id attribute in the <a> tag must start with an alphanumeric character. So, if you want to simply number the IDs of anchors, be sure to start them with text (as in photo1, photo2, and so on) instead of just 1, 2, and so on. Purely numeric anchor IDs will work in browsers, but they don’t qualify as valid XHTML code.

image

128 CHAPTER 7 Using External and Internal Links


Each of the <a href> links in Listing 7.1 makes an underlined link leading to a corresponding <a id> anchor—or it would if I had filled in all the text. Only A and Z will work in this example because only the A and Z links have corresponding text to link to, but feel free to fill in the rest on your own! Clicking the letter Z under Alphabetical Index in Figure 7.1, for example, takes you to the part of the page shown in Figure 7.2.


image

FIGURE 7.1

The <a id> tags in Listing 7.1 don’t appear at all on the web page. The <a href> tags appear as underlined links.


image

FIGURE 7.2

Clicking the letter Z on the page shown in Figure 7.1 takes you to the appropriate section of the same page.

Linking Between Your Own Web Content 129


Having mastered the concept of linking to sections of text within a single page, you can now learn to link together other pieces of web content.


Linking Between Your Own Web Content


As you learned earlier in this chapter, you do not need to include http:// before each address specified in the href attribute when linking to content within your domain (or on the same computer, if you are viewing your site locally). When you create a link from one file to another file within the same domain or on the same computer, you don’t need to specify a com- plete Internet address. In fact, if the two files are stored in the same folder, you can simply use the name of the HTML file by itself:

<a href=”pagetwo.html”>Go to Page 2.</a>


As an example, Listing 7.2 and Figure 7.3 show a quiz page with a link to the answers page shown in Listing 7.3 and Figure 7.4. The answers page contains a link back to the quiz page. Because the page in Listing 7.2 links to another page in the same directory, the filename can be used in place of a complete address.


LISTING 7.2 The historyanswers.html file

image

<?xml version=”1.0” encoding=”UTF-8”?>

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN”

“http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”>


<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en”>

<head>

<title>History Quiz</title>

</head>


<body>

<h1>History Quiz</h1>

<p>Complete the following rhymes. (Example: William the Conqueror Played cruel tricks on the Saxons in... ten sixty-six.)</p>

<ol>

<li>Columbus sailed the ocean blue in...</li>

<li>The Spanish Armada met its fate in...</li>

<li>London burnt like rotten sticks in...</li>

</ol>

<p style=”text-align: center;font-weight: bold;”>

<a href=”historyanswers.html”>Check Your Answers!</a>

</p>

</body>

</html>

image

130 CHAPTER 7 Using External and Internal Links


FIGURE 7.3

This is the historyquiz.html file listed in Listing 7.2 and referred to by the link in Listing 7.3.


image


LISTING 7.3 The historyanswers.html File That historyquiz.html

Links To

image

<?xml version=”1.0” encoding=”UTF-8”?>

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN”

“http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”>


<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en”>

<head>

<title>History Quiz Answers</title>

</head>


<body>

<h1>History Quiz Answers</h1>

<ol>

<li>...fourteen hundred and ninety-two.</li>

<li>...fifteen hundred and eighty eight.</li>

<li>...sixteen hundred and sixty-six.</li>

</ol>

<p style=”text-align: center;font-weight: bold;”>

<a href=”historyquiz.html”>Return to the Questions</a>

</p>

</body>

</html>

image

Linking to External Web Content 131


image


Using filenames instead of complete Internet addresses saves you a lot of typing. More important, the links between your pages will work properly no matter where the group of pages is stored. You can test the links while the files are still on your computer’s hard drive. You can then move them to a web server, a CD-ROM, a DVD, or a memory card, and all the links will still work correctly. There is nothing magic about this simplified approach to identifying web pages—it all has to do with web page addressing, as you’ve already learned.


Linking to External Web Content


The only difference between linking to pages within your own site and link- ing to external web content is that when linking outside your site, you need to include the full address to that bit of content. The full address includes the http:// before the domain name, and then the full pathname to the file (for example, an HTML file, image file, multimedia file, and so on).


For example, to include a link to Google from within one of your own web pages, you would use this type of absolute addressing in your <a> link:

<a href=”http://www.google.com/”>Go to Google</a>


You can apply what you learned in previous sections to creating links to named anchors on other pages. Linked anchors are not limited to the same page. You can link to a named anchor on another page by including the address or filename followed by # and the anchor name. For example, the


FIGURE 7.4

The Check Your Answers! link in Figure 7.3 takes you to this answers page. The Return to the Questions link takes you back to what’s shown in Figure 7.3.


CAUTION

image

As you might know, you can leave out the http:// at the front of any address when typ- ing it into most web browsers. However, you cannot leave that part out when you type an Internet address into an <a href> link on a web page.

132 CHAPTER 7 Using External and Internal Links


following link would take you to an anchor named photos within the african.html page inside the elephants directory on the domain www.takeme2thezoo.com.

<a href=”http://www.takemetothezoo.com/elephants/african.html#photos”> Check out the African Elephant Photos!</a>


CAUTION

image

Be sure to include the # symbol only in <a href> link tags. Don’t put the # symbol in the <a id> tag; links to that name won’t work in that case.

If you are linking from another page already on the www.takemetothezoo. com domain (because you are, in fact, the site maintainer), your link might simply be as follows:

<a href=”/elephants/african.html#photos”>Check out the African Elephant Photos!</a>


The http:// and the domain name would not be necessary in that instance, as you have already learned.


Linking to an Email Address


In addition to linking between pages and between parts of a single page, the <a> tag allows you to link to email addresses. This is the simplest way to enable your web page visitors to talk back to you. Of course, you could just provide visitors with your email address and trust them to type it into whatever email programs they use, but that increases the likelihood for errors. By providing a clickable link to your email address, you can make it almost completely effortless for them to send you messages and eliminate the chance for typos.


An HTML link to an email address looks like the following:


<a href=”mailto:yourusername@yourdomain.com”>Send me an email message.</a>


The words Send me an email message will appear just like any other <a>

link.


If you want people to see your actual email address (so that they can make note of it or send a message using a different email program), include it both in the href attribute and as part of the message between the <a> and

</a> tags, like this:


<a href=”mailto:you@yourdomain.com”>you@yourdomain.com</a>


In most web browsers, when someone clicks the link, she gets a window into which she can type a message that is immediately sent to you—whatever email program the person uses to send and receive email will automatically

Linking to an Email Address 133

be used. You can provide some additional information in the link so that the subject and body of the message also have default values. You do this by adding subject and body variables to the mailto link. You separate the vari- ables from the email address with a question mark (?), the value from the variable with an equal sign (=), and then separate each of the variable and value pairs with an ampersand (&). You don’t have to understand the vari- able/value terminology at this point. Here is an example of specifying a sub- ject and body for the preceding email example:

<a href=”mailto:author@somedomain.com?subject=Book Question&body= When is the next edition coming out?”>author@somedomain.com</a>


When a user clicks this link, an email message is created with author@ somedomain.com as the recipient, Book Question as the subject of the mes- sage, and When is the next edition coming out? as the message body.


Before you run off and start plastering your email address all over your web pages, I have to give you a little warning and then let you in on a handy trick. You’re no doubt familiar with spammers that build up data- bases of email addresses and then bombard them with junk mail advertise- ments. One way spammers harvest email addresses is by using programs that automatically search web pages for mailto links.


Fortunately, there is a little trick that will thwart the vast majority of spam- mers. This trick involves using character entities to encode your email address, which confuses scraper programs that attempt to harvest your email address from your web pages. As an example, take the email address, jcmeloni@gmail.com. If you replace the letters in the address with their character entity equivalents, most email harvesting programs will be thrown off. Lowercase ASCII character entities begin at &#97; for letter a and increase through the alphabet in order. For example, letter j is &#106, c is &#99, and so on. Replacing all the characters with their ASCII attributes produces the following:

<a href=”mailto:&#106;&#099;&#109;&#101;&#108;&#111;&#110;&#105;

&#064;&#103;&#109;&#097;&#105;&#108;&#046;&#099;&#111;&#109;”>Send

me an email message.</a>


Because the browser interprets the character encoding as, well, characters, the end result is the same from the browser’s perspective. However, auto- mated email harvesting programs search the raw HTML code for pages, which in this case is showing a fairly jumbled-looking email address. If you don’t want to figure out the character encoding for your own address, just type email address encoder in your search engine and you will find some services online that will produce an encoded string for you.


TIP

image

If you want to specify only an email message subject and not the body, you can just leave off the ampersand and the body variable, equal sign, and value text string as follows:

<a href=”mailto: author@somedomain.com? subject=

Book Question> author@somedomain.com</a>


TIP

image

It is customary to put an email link to the web page author at the bottom of every web page. Not only does this make it easy for others to contact you, it gives them a way to tell you about any problems with the page that your testing might have missed. Just don’t forget to use the email address char- acter entity trick so that your address flies under the radar of spammers.

134 CHAPTER 7 Using External and Internal Links


Opening a Link in a New Browser Window


Now that you have a handle on how to create addresses for links—both internal (within your site) and external (to other sites)—there is one addi- tional method of linking: forcing the user to open links in new windows.


You’ve no doubt heard of pop-up windows, which are browser windows—typi- cally advertising products or services—that are opened and displayed auto- matically without the user’s approval. However, the concept of opening anoth- er window or targeting another location does serve a valid purpose in some instances. For example, you might want to present information in a smaller secondary browser window but still allow the user to see the information in the main window. This is often the case when clicking on a link to an animated demo, movie clip, or other multimedia element. You could also want to target a new browser window when you are linking to content off-site.


However, opening a new browser window on behalf of your user—especially when it’s a full-size new window—goes against some principles of usability and accessibility. When people opened new windows, typically it happened through the use of the target attribute of the <a> tag. The target attribute has been removed from the <a> tag in the strict XHTML 1.1 specification.


There are valid ways to achieve the same result while still adhering to prin- ciples of usability and accessibility, but these methods require a little JavaScript and other advanced techniques. You will learn about these meth- ods as we move into the JavaScript portion of this book, which will also cover standards-compliant and accessible ways to invoke new windows with your external links.



NOTE

image

You can use graphics as links (instead of using text as links) by putting an <img /> tag between the opening <a> and closing </a> tags. You’ll learn how to use graphics as links in Chapter 8, “Working with Colors, Images, and Multimedia.”

Using CSS to Style Hyperlinks


The default display of a text-based hyperlink on a web page is underlined blue text. You might also have noticed that links you have previously visit- ed appear as underlined purple text—that color is also a default. If you’ve spent any time at all on the Web, you will also have noticed that not all links are blue or purple—and for that, I think, we are all thankful. Using a little CSS and knowledge of the various pseudoclasses for the <a> link, you can make your links look however you want.


A pseudoclass is a class that describes styles for elements that apply to certain circumstances, such as various states of user interaction with that element.

Using CSS to Style Hyperlinks 135


For example, the common pseudoclasses for the <a> tag are link, visited, hover, and active. You can remember them with the mnemonic “Love- Hate”—LV (love) HA (hate), if you choose.

. a:link describes the style of a hyperlink that has not been visited previously.


. a:visited describes the style of a hyperlink that has been visited previously and is present in the browser’s memory.


. a:hover describes the style of a hyperlink as a user’s mouse hovers over it (and before it has been clicked).


. a:active describes the style of a hyperlink that is in the act of being clicked, but has not yet been released.


For example, let’s say you want to produce a link with the following styles:


. A font that is bold and Verdana (and not underlined, meaning it has no text decoration)


. A base color that is light blue


. A color of red when users hover over it or when they are clicking it


. A color of gray after users have visited it


Your style sheet entries might look like the following:


a {

font-family: Verdana, sans-serif; font-weight: bold;

text-decoration: none;

NOTE

image

The colors in this example are indicated by their hexadecimal values, which you will learn about in Chapter 8.

}

a:link {

color: #6479A0;

}

a:visited { color: #CCCCCC;

}

a:hover {

color: #E03A3E;

}

a:active {

color: #E03A3E;

}


Because the sample link will be Verdana bold (and not underlined) regard- less of the state it is in, those three property and value pairs can reside in the rule for the a selector. However, because each pseudoclass must have a

136 CHAPTER 7 Using External and Internal Links


specific color associated with it, we use a rule for each pseudoclass as shown in the code example. The pseudoclass inherits the style of the parent rule, unless the rule for the pseudoclass specifically overrides that rule. In other words, all the pseudoclasses in the previous example will be Verdana bold (and not underlined). If, however, we had used the following rule for the hover pseudoclass, the text would display in Comic Sans when users hovered over it (if, in fact, the user has the Comic Sans font installed):

a:hover {

font-family: “Comic Sans MS”; color: #E03A3E;

}


Additionally, because the active and hover pseudoclasses use the same font color, you can combine style rules for them:

a:hover, a:active { color: #E03A3E;

}


Listing 7.4 puts these code snippets together to produce a page using styled pseudoclasses; the results of this code can be seen in Figure 7.5.


LISTING 7.4 Using Styles to Display Link Pseudoclasses

image

<?xml version=”1.0” encoding=”UTF-8”?>

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN”

“http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”>


<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en”>

<head>

<title>Sample Link Style</title>


<style type=”text/css”> a {

font-family: Verdana, sans-serif; font-weight: bold;

text-decoration: none;

}

a:link {

color: #6479A0;

}

a:visited { color: #CCCCCC;

}

a:hover, a:active { color:#FF0000;

}

</style>

</head>

Using CSS to Style Hyperlinks 137

image

LISTING 7.4 Continued

<body>

<h1>Sample Link Style</h1>

<p><a href=”simplelinkstyle.html”>The first time you see me,

I should be a light blue, bold, non-underlined link in the Verdana font</a>.</p>

</body>

</html>

image


image


If you view the example in your web browser, indeed the link should be a light blue, bold, non-underlined Verdana font. If you hover over the link, or click the link without releasing it, it should turn red. If you click and release the link, the page will simply reload because the link points to the file with the same name. However, at that point the link will be in your browser’s memory and thus will be displayed as a visited link—and it will appear gray instead of blue.


You can use CSS to apply a wide range of text-related changes to your links. You can change fonts, sizes, weights, decoration, and so on. Sometimes you might want several different sets of link styles in your style sheet. In that case, you can create classes; you aren’t limited to work- ing with only one set of styles for the <a> tag. The following example is a set of style sheet rules for a footerlink class for links I might want to place in the footer area of my website:


a.footerlink {

font-family: Verdana, sans-serif; font-weight: bold;

font-size: 75%;

text-decoration: none;


FIGURE 7.5

A link can use particular styles to control the visual display.

138 CHAPTER 7 Using External and Internal Links


}

a.footerlink:link, a.footerlink:visited { color: #6479A0;

}

a.footerlink:hover, a.footerlink:active { color: #E03A3E;

}


As you can see in the example that follows, the class name (footerlink) appears after the selector name (a), separated by a dot, and before the pseudoclass name (hover), separated by a colon:

selector.class:pseudoclass a.footerlink:hover


Summary


The <a> tag is what makes hypertext “hyper.” With it, you can create links between pages and links to specific anchor points on any page. This chap- ter focused on creating and styling simple links to other pages using either relative or absolute addressing to identify the pages.


You learned that when you’re creating links to other people’s pages, it’s important to include the full Internet address of each page in an <a href> tag. For links between your own pages, include just the filenames and enough directory information to get from one page to another.


You discovered how to create named anchor points within a page and how to create links to a specific anchor. You also learned how to link to your email address so that users can easily send you messages. You even learned how to protect your email address from spammers. Finally, you learned methods for controlling the display of your links using CSS.


Table 7.1 summarizes the <a> tag discussed in this chapter.


TABLE 7.1 HTML Tags and Attributes Covered in Chapter 7

image

Tag/Attribute Function

image

<a>...</a> With the href attribute, this creates a link to another document or anchor; with the id attribute, this creates an anchor that can be linked to.

Attributes

image

image

href=”address” The address of the document or anchor point to link to. id=”name” The name for this anchor point in the document.

image

Q&A


Q&A


Q. What happens if I link to a page on the Internet, and then the person who owns that page deletes or moves it?

A. That depends on how the maintainer of that external page has set up his web server. Usually, you will see a page not found message or something to that effect when you click a link that has been moved or deleted. You can still click the Back button to return to your page. As a site maintainer, you can periodically run link-checking programs to ensure your internal and external links are valid. An example of this is the Link Checker service at http://validator.w3.org/checklink.


Q. One of the internal links on my website works fine on my computer, but when I put the pages on the Internet, the link doesn’t work any- more. What’s up?

A. These are the most likely culprits:

. Capitalization problems—On Windows computers, linking to a file named MyFile.html with <a href=”myfile.html”> will work. On most web servers, the link must be <a href=”MyFile.html”> (or you must change the name of the file to MyFile.html). To make matters worse, some text editors and file transfer programs actu- ally change the capitalization without telling you! The best solu- tion is to stick with all-lowercase filenames for web pages.

. Spaces in filenames—Most web servers don’t allow filenames with spaces. For example, you should never name a web page my page.html. Instead, name it mypage.html or even my_page.html (using an underscore instead of a space).

. Local absolute addresses—If, for some reason, you link to a file using a local absolute address, such as C:\mywebsite\news. html, the link won’t work when you place the file on the Internet. You should never use local absolute addresses; when this occurs, it is usually an accident caused by a temporary link that was created to test part of a page. So, be careful to remove any test links before publishing a page on the Web.


Q. Can I put both href and id in the same <a> tag? Would I want to for any reason?

A. You can, and it might save you some typing if you have a named anchor point and a link right next to each other. It’s generally better, however, to use <a href> and <a id> separately to avoid confusion because they play very different roles in an HTML document.


Q. What happens if I accidentally misspell the name of an anchor or forget to put the # in front of it?

A. If you link to an anchor name that doesn’t exist within a page or mis- spell the anchor name, the link goes to the top of that page.

139


www.it-ebooks.info

image

140 CHAPTER 7 Using External and Internal Links


Workshop


The workshop contains quiz questions and exercises to help you solidify your understanding of the material covered. Try to answer all questions before looking at the “Answers” section that follows.


Quiz


  1. Your best friend from elementary school finds you on the Internet and says he wants to trade home page links. How do you put a link to his site at www.supercheapsuits.com/~billybob/ on one of your pages?

  2. What HTML would you use to make it possible for someone clicking the words “About the Authors” at the top of a page to skip down to a list of credits somewhere else on the page?

  3. If your email address is bon@soir.com, how would you make the text “goodnight greeting” into a link that people can click to compose and send you an email message?


Answers


  1. Put the following on your page:


    <a href=”http://www.supercheapsuits.com/~billybob/”>Billy Bob’s site</a>


  2. Type this at the top of the page:


    <a href=”#credits”>About the Authors</a>


    Type this at the beginning of the credits section:


    <a id=”credits”></a>


  3. Type the following on your web page:


Send me a <a href=”mailto:bon@soir.com”>goodnight greeting</a>!


Exercises


. Create an HTML file consisting of a formatted list of your favorite web- sites. You might already have these sites bookmarked in your web browser, in which case you can visit them to find the exact URL in the browser’s address bar.


. If you have created any pages for a website, look through them and consider whether there are any places in the text where you’d like to make it easy for people to contact you. Include a link in that place to your email address. You can never provide too many opportunities for people to contact you and tell you what they need or what they think about your products—especially if you’re running a business.


www.it-ebooks.info

image


CHAPTER 8

Working with Colors, Images, and Multimedia


This list might look long, but each of these tasks is short and sweet, and will help you move your web development experience from the white background/black text examples so far in this book to more interesting (or at least colorful) examples. But that’s not to say that dark text on a light background is bad—in fact, it’s the most common color combination you’ll find online.


Although paying attention to color schemes and producing a visually appealing website is important, you don’t have to be an artist by trade to put high-impact graphics on your web pages. More importantly, you don’t need to spend hundreds or thousands of dollars on software, either. This chapter will help you get started with creating some of the images you can use in your website. Although the sample figures in this chapter use a pop- ular and free graphics program for Windows, Mac, and Linux users (GNU Image Manipulation Program, or GIMP), you can apply the knowledge learned in this chapter to any major Windows or Macintosh graphics appli- cation—although the menus and options will look slightly different.


After you learn to create the graphics themselves, you’ll learn how to inte- grate your graphics using HTML and CSS. At the end of the chapter you’ll learn a bit about integrating additional media, or multimedia, into your website.


Best Practices for Choosing Colors


I can’t tell you exactly which colors to use in your website, but I can help you understand the considerations you should make when selecting those colors on your own. The colors you use can greatly influence your visitors; if you are running an e-commerce site, you will want to use colors that

WHAT YOU’LL LEARN IN THIS CHAPTER:


. How to choose colors for your website that work on the Web

. How to use CSS to set background, text, and bor- der colors

. How to prepare photo- graphs for use online

. How to create banners and buttons

. How to reduce the number of colors in an image

. How to create transparent images

. How to prepare an image for a tiled background

. How to place an image on a web page

. How to describe images with text

. How to specify image height and width

. How to align images

. How to use background images

. How to use imagemaps

. How to use multimedia files

142 CHAPTER 8 Working with Colors, Images, and Multimedia


entice your users to view your catalog and eventually purchase something. To that end, you want to make sure colors are used judiciously and with respect. You might wonder how respect enters into the mix when talking about colors, but remember the World Wide Web is an international com- munity and interpretations differ; for instance, pink is a very popular color in Japan, but very unpopular in Eastern European countries. Similarly, green is the color of money in the United States, but the vast majority of other countries have multi-colored paper bills such that “the color of money” isn’t a single color at all and thus the metaphor would be of no value to them.


Besides using colors that are culturally sensitive, other best practices include the following:

. Use a natural palette of colors. This doesn’t mean you should use earth tones, but instead refers to using colors that one would natural- ly see on a casual stroll around town—avoid ultrabright colors that can cause eye strain.


. Use a small color palette. You don’t need to use 15 different colors to achieve your goals. In fact, if your page includes text and images in 15 different colors, you might reevaluate the message you’re attempt- ing to send. Focus on three or four main colors with a few compli- mentary colors, at the most.


. Consider your demographics. You are likely not able to control your demographics and thus have to find a middle ground that accommo- dates everyone. The colors enjoyed by younger people are not neces- sarily those appreciated by older people, just as there are color biases between men and women and people from different geographic regions and cultures.


With just these few tips in mind, it might seem as if your color options are limited. Not so—it simply means you should think about the decisions you’re making before you make them. A search for color theory in the search engine of your choice should give you more food for thought, as will the use of the color wheel.


The color wheel is a chart that shows the organization of colors in a circular manner. The method of display is an attempt to help you visualize the rela- tionships between primary, secondary, and complementary colors. Color schemes are developed from working with the color wheel; understanding color schemes can help you determine the color palette to use consistently throughout your website. For example, knowing something about color

Understanding Web Colors 143


relationships will hopefully enable you to avoid using orange text on a light blue background, or bright blue text on a brown background.


Some common color schemes in web design are as follows:


. Analogous—Colors that are adjacent to each other on the color wheel, such as yellow and green. One color is the dominant color and its analogous friend is used to enrich the display.


. Complementary—Colors that are opposite from each other on the color wheel, such as a warm color (red) and a cool color (green).


. Triadic—Three colors that are equally spaced around the color wheel. The triadic scheme provides balance while still allowing rich color use.


There are entire books and courses devoted to understanding color theory, so continuing the discussion in this book would indeed be a tangent. However, if you intend to work in web design and development, you will be served well by a solid understanding of the basics of color theory. Spend some time reading about it—an online search will provide a wealth of information.


Additionally, spend some hands-on time with the color wheel. The Color Scheme Generator at http://colorschemedesigner.com/ enables you to start with a base color and produce monochromatic, complementary, tri- adic, tetradic, analogic, and accented analogic color schemes.


Understanding Web Colors


Specifying a background color other than white for a web page is easier than you probably realize. For example, to specify blue as the background color for a page, put style=”background-color:blue” inside the <body> tag or in the style sheet rule for the body element. Of course, you can use many colors other than blue. In fact, there are 16 colors listed in the W3C standards: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow.


Obviously there are many more colors displayed on the Web than just those 16. In fact, there are 140 color names that you can use with assurance that all browsers will display these colors similarly. Here’s a partial list of the 140 descriptive color names: azure, bisque, cornflowerblue, dark- salmon, firebrick, honeydew, lemonchiffon, papayawhip, peachpuff, sad- dlebrown, thistle, tomato, wheat, and whitesmoke.


NOTE

For a complete list of the 140 descriptive color names, their hexadecimal codes, and an example of the color as dis- played by your browser, visit http://www.w3schools.com/ HTML/html_colornames.asp.

144 CHAPTER 8 Working with Colors, Images, and Multimedia


TIP

It’s worth pointing out that color names are not case-sensitive. So, Black, black, and BLACK are all black, although most web designers stick with lower- case or mixed case (if they use color names at all, as most designers will use the hexadeci- mal notation for a more nuanced approach to color use).

But names are subjective—for instance, if you look at the color chart of 140 cross-browser color names, you will not be able to distinguish between fuchsia and magenta. You will then realize that the associated hexadecimal color values for those two terms, fuchsia and magenta, are exactly the same: #FF00FF. You’ll learn about hexadecimal color values in the next sec- tion, but for now, know that if you want to be standards-compliant and use more than the 16 color names the W3C standards dictate, you should use the hexadecimal color codes whenever possible.


There are, in fact, 16 million colors made possible with hexadecimal color codes. However, most modern computer displays can display “only” 16,384. But 16,384 is still a lot more than 140, or 16.


You should be aware that not all computer monitors display colors in the same hues. What might appear as a beautiful light blue background color on your monitor might be more of a purple hue on another user’s monitor. Neutral, earth-tone colors (such as medium gray, tan, and ivory) can pro- duce even more unpredictable results on many computer monitors. These colors might even seem to change color on one monitor depending on lighting conditions in the room or the time of day.


In addition to changing the background of your pages to a color other than white, you can change the color of text links, including various properties of links (such as the color for when a user hovers over a link versus when the user clicks a link—as you learned in previous chapters). You can also set the background color of container elements (such as paragraphs, divs, blockquotes, and table cells), and you can use colors to specify the borders around those elements. You’ll see some examples of colors and container elements later in this chapter.


There are plenty of very bad websites, some created by earnest people with no trace of irony whatsoever. However, “The World’s Worst Website” shown in Figure 8.1 was purposefully created to show some of the more egregious sins of website design, especially with its use of colors. A screen- shot does not do it justice—visit and experience the site for yourself at http://www.angelfire.com/super/badwebs/main.htm.


If you search for bad website examples in your search engine, you will find many sites that collect examples of bad design and explain just why such a site should be in a Hall of Shame rather than a Hall of Fame. Many sites are considered bad because of their visual displays, and that display begins with color selection. Therefore, understanding colors, as well as the nuances of their specification and use, is a crucial step to creating a good website.

Using Hexadecimal Values for Colors 145


image


Using Hexadecimal Values for Colors


To remain standards-compliant, as well as to retain precise control over the colors in your website, you can reference colors by their hexadecimal value. The hexadecimal value of a color is an indication of how much red, green, and blue light should be mixed into each color. It works a little bit like Play-Doh—just mix in the amounts of red, blue, and green you want to get the appropriate color.


The hexadecimal color format is #rrggbb, in which rr, gg, and bb are two- digit hexadecimal values for the red (rr), green (gg), and blue (bb) compo- nents of the color. If you’re not familiar with hexadecimal numbers, don’t sweat it. Just remember that FF is the maximum and 00 is the minimum. Use one of the following codes for each component:


. FF means full brightness.

. CC means 80% brightness.

. 99 means 60% brightness.

. 66 means 40% brightness.

. 33 means 20% brightness.

. 00 means none of this color component.


FIGURE 8.1

A partial screenshot of “The World’s Worst Website.”

146 CHAPTER 8 Working with Colors, Images, and Multimedia


For example, bright red is #FF0000, dark green is #003300, bluish-purple is

#660099, and medium-gray is #999999. To make a page with a red back- ground and dark green text, the HTML code would look like the following:

<body style=”background-color:#FF0000; color:#003300”>


Although only six examples of two-digit hexadecimal values are shown here, there are actually 225 combinations of two-digit hexadecimal values— 0 through 9 and A through F, paired up. For example, F0 is a possible hex value (decimal value 240), 62 is a possible hex value (decimal value 98), and so on.


As previously discussed, the rr, gg, and bb in the #rrggbb hexadecimal color code format stand for the red, green, and blue components of the color. Each of those components has a decimal value ranging from 0 (no color) to 255 (full color).


So, white (or #FFFFFF) translates to a red value of 255, a green value of 255, and a blue value of 255. Similarly, black (#000000) translates to a red value of 0, a green value of 0, and a blue value of 0. True red is #FF0000 (all red, no green, and no blue), true green is #00FF00 (no red, all green, no blue), and true blue is #0000FF (no red, no green, and all blue). All other hexadecimal notations translate to some variation of the 255 possible val- ues for each of the three colors. The cross-browser compatible color name cornflowerblue is associated with the hexadecimal notation #6495ED—a red value of 40, a green value of 149, and a blue value of 237 (almost all of the available blue values).


When picking colors, either through a graphics program or by finding something online that you like, you might see the color notion in hexadeci- mal or decimal. If you type hexadecimal color converter in your search engine, you will find numerous options to help you convert color values into something you can use in your style sheets.


Using CSS to Set Background, Text, and Border Colors


When using CSS, there are three instances in which color values can be used: when specifying the background color, the text color, or the border color of elements. Previous chapters contained examples of specifying col- ors without going in great detail about color notion or color theory. For example, in Chapter 7, “Using External and Internal Links,” you learned about using colors for various link states.

Using CSS to Set Background, Text, and Border Colors 147

Figure 8.2 shows an example of color usage that could easily go into a web design Hall of Shame. I can’t imagine ever using these combinations of col- ors and styles in a serious website, but it serves here as an example of how color style could be applied to various elements.


image


Listing 8.1 shows the XHTML and CSS styles used to produce Figure 8.2.


LISTING 8.1 Using Styles to Produce Background, Text, and Border Colors

image

<?xml version=”1.0” encoding=”UTF-8”?>

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN”

“http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”>


<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en”>

<head>

<title>Background, Text, and Border Colors</title>

</head>


<body>

<h1>Background, Text, and Border Colors</h1>


<p style=”background-color:#CCCCCC; border:1px solid #000000; color:#FF0000”> Grey paragraph, black border, red text with a

<span style=”color:#FFA500”>orange span</span>.</p>


<div style=”width:300px; height:75px; margin-bottom: 12px; background-color:#000000; border:2px dashed #FF0000;


FIGURE 8.2

Background, text, and border col- ors can all be set using CSS.

148 CHAPTER 8 Working with Colors, Images, and Multimedia


LISTING 8.1 Continued

image

color: #FFFFFF”>

Black div, red border, white text. </div>


<table border=”1”>

<tr>

<td style=”background-color: #00FF00”>Green Table Cell</td>

<td style=”background-color: #FF0000”>Red Table Cell</td>

</tr>

<tr>

<td style=”background-color: #FFFF00”>Blue Table Cell</td>

<td style=”background-color: #0000FF”>Yellow Table Cell</td>

</tr>

</table>


<blockquote style=”background-color:#0000FF;

border:4px dotted #FFFF00; color:#FFFFFF”><p>Blue blockquote, yellow border, white text.</p></blockquote>

</body>

</html>

image


Looking at the styles used in Listing 8.1, you should be able to figure out almost everything except some of the border styles. In CSS, borders can’t be designated as a color without also having a width and type; in the first example shown in Listing 8.1, the border width is 1px, and the border type is solid. In the second example shown in Listing 8.1, the border width is 2px, and the border type is dashed. In the fourth example shown in Listing 8.1, the border width is 4px, and the border type is dotted.


NOTE

image

Adobe Photoshop is without a doubt the cream of the crop when it comes to image-editing programs. However, it is expen- sive and quite complex if you don’t have experience working with computer graphics. For more information on Adobe’s products, visit the Adobe website at http://www.adobe.com/. If you are in the market for one of their products, you can download a free evaluation version from their site.


When picking colors for your website, remember that a little bit goes a long way—if you really like a bright and spectacular color, use it as an accent color and not throughout the primary design elements. For readabil- ity, remember that light backgrounds with dark text are much easier to read than dark backgrounds with light text.


Finally, consider the not-insignificant portion of your audience that might be color blind. For accessibility, you might consider using the Colorblind Web Page Filter tool at http://colorfilter.wickline.org/ to see what your site will look like to a person with color blindness.


Choosing Graphics Software


Selecting an overall color scheme for your website is one thing; creating or editing images to go into those templates are quite another—and beyond the scope of this book (or a single book, for that matter). However, in the

The Least You Need to Know About Graphics 149


sections that follow, you’ll learn a few of the basic actions that anyone maintaining a website should quickly master.


You can use almost any graphics program to create and edit images for your website, from the simple paint program that typically comes free with your computer’s operating system to an expensive professional program such as Adobe Photoshop. Similarly, if you have a digital camera or scanner attached to your computer, it probably came with some graphics software capable of creating web page graphics. There are also several free image editors available for download—or even online as a web application—that deal just with the manipulation of photographic elements.


If you already have software you think might be good for creating web graphics, try using it to do everything described in these next sections. If your software can’t do some of the tasks covered here, it probably won’t be a good tool for web graphics. In that case, download and install GIMP from http://www.gimp.org. This fully functional graphics program is completely free and is used to perform the actions shown in this chapter.


If GIMP doesn’t suit you, consider downloading the evaluation version of Adobe Photoshop or Corel DRAW. For photo manipulation only, there are many free options, all with helpful features. Google’s Picasa, which is available free at http://picasa.google.com/, is one such option. Picnik (http://www.picnik.com/) is another. Both of these programs are suited for editing images rather than creating them from scratch, and Picasa is also oriented toward organizing your digital photograph collection. As such, these types of programs are not necessarily going to help you design a banner or button image for your site. However, these programs can help you work with some supplementary images, and they are powerful enough that they are worth checking out.


The Least You Need to Know About Graphics


Two forces are always at odds when you post graphics and multimedia on the Internet. The users’ eyes and ears want all your content to be as detailed and accurate as possible, and they also want that information dis- played immediately. Intricate, colorful graphics mean big file sizes, which increase the transfer time even over a fast connection. How do you maxi- mize the quality of your presentation while minimizing file size? To make these choices, you need to understand how color and resolution work together to create a subjective sense of quality.


Using Another Site’s Material

One of the best ways to save time creating the graphics and media files for web pages is, of course, to avoid creating them altogether. Grabbing a graphic from any web page is as simple as right-clicking it (or clicking and holding the but- ton on a Macintosh mouse) and selecting Save Image As or Save Picture As (depending on your browser). Extracting a background image from a page is just as easy: Right-click it and select Save Background As.

However, you should never use images without the explicit per- mission of the owner, either by asking them or by looking for a Creative Commons license. To take images without explicit per- mission is a copyright violation (and is also distasteful). To learn more about copyrights, visit http://www.utsystem.edu/OGC/ IntellectualProperty/cprtindx.htm.

You might also want to consider royalty-free clip art, which doesn’t require you to get copyright per- mission. A good source of clip art online is Microsoft’s Office Online Clip Art and Media web- site, which is located at http://office.microsoft.com/ clipart/. Barry’s Clipart Server is another popular clip art destina- tion, and it’s located at http://www.barrysclipart.com/.

150 CHAPTER 8 Working with Colors, Images, and Multimedia


NOTE

There are several types of image resolution, including pixel, spatial, spectral, tempo- ral, and radiometric. You could spend hours just learning about each type; and if you were tak- ing a graphics design class, you might do just that. For now, however, all you need to remem- ber is that large images take longer to download and also use a lot of space in your dis- play. Display size and storage or transfer size are factors you should take into consideration when designing your website.


TIP

image

If you don’t have a scanner or digital camera, almost all film developers offer a service that transfers photos from 35mm film to a CD-ROM or DVD-ROM for a modest fee. You can then copy the files from the CD-ROM or DVD-ROM to your hard drive, and then use your graphics pro- gram to open and modify the image files.

The resolution of an image is the number of individual dots, or pixels, that make up an image. Large, high-resolution images generally take longer to transfer and display than small, low-resolution images. Resolution is usu- ally specified as the width times the height of the image, expressed in pix- els; a 300×200 image, for example, is 300 pixels wide and 200 pixels high.


You might be surprised to find that resolution isn’t the most significant fac- tor determining an image file’s storage size (and transfer time). This is because images used on web pages are always stored and transferred in compressed form. Image compression is the mathematical manipulation that images are put through to squeeze out repetitive patterns. The mathe- matics of image compression is complex, but the basic idea is that repeat- ing patterns or large areas of the same color can be squeezed out when the image is stored on a disk. This makes the image file much smaller and allows it to be transferred faster over the Internet. The web browser then restores the original appearance of the image when the image is displayed.


In the sections that follow, you’ll learn how to create graphics with big visual impact but small file sizes. The techniques you’ll use to accomplish this depend on the contents and purpose of each image. There are as many uses for web graphics as there are web pages, but four types of graphics are by far the most common:

. Photos of people, products, or places


. Graphical banners and logos


. Buttons or icons to indicate actions and provide links


. Background textures for container elements


Preparing Photographic Images


To put photos on your web pages, you need to convert your print-based photos to digital images or create photos digitally by using a digital cam- era. You might need to use the custom software that comes with your scan- ner or camera to save pictures onto your hard drive, or you can just drag and drop files from your camera to your hard drive. If you are using a scanner to create digital versions of your print photos, you can control just about any scanner directly from the graphics program of your choice—see the software documentation for details.

Preparing Photographic Images 151


After you transfer the digital image files to your computer, you can use your graphics program to crop, resize, color-correct, and compress to get them ready for use in your website.


Cropping an Image


Because you want web page graphics to be as compact as possible, you’ll usually need to crop your digital photos. When you crop a photo, you select the area you want to display, and you crop away the rest.



The GIMP toolbox offers quick access to the crop tool and its possible attrib- utes. Find an image file—either a digital image you have taken with your cam- era and stored on your hard drive or an image you have found online. After opening the image in GIMP, perform the following steps to crop it in GIMP:


  1. In the GIMP toolbox, click the crop tool (see Figure 8.3). Depending on the tool you select, there might be additional attributes you can select. For example, Figure 8.3 shows the attributes for the cropping tool (such as the aspect ratio, position, size, and so on).

    image

    TRY IT YOURSELF


    Cropping in GIMP


    FIGURE 8.3

    Select the crop tool from the toolbox.

    152 CHAPTER 8 Working with Colors, Images, and Multimedia


    image

    TRY IT YOURSELF


    Cropping in GIMP

    continued


  2. In the image you want to crop, draw a box around the selection by click- ing the upper-left corner of the portion of the image you want to keep and holding the left mouse button while you drag down to the lower- right corner (see Figure 8.4).


    FIGURE 8.4

    Select the area of the image that you want to display.


  3. Click one of the corners of the selection to apply the cropping.


Your graphics program will likely have a different method than the one shown, but the concept is the same: select the area to keep, and then crop out the rest.


TIP

Your graphics software will likely have an omnipresent size dis- play somewhere in the image window itself. In GIMP, the cur- rent image size can be seen in the top of the window. Other programs might show it in the lower-right or lower-left corner. You might also see the magnifi- cation ratio in the window and the ability to change it (by zooming in or zooming out).

Even after your image has been cropped, it might be larger than it needs to be for a web page. Depending on the design of a specific web page, you might want to limit large images to no more than 800×600 pixels (if it is shown on a page by itself, such as an item catalog) or even 640×480 pixels or smaller. When shown alongside text, images tend to be in the 250 to 350 pixel range for width, so there’s just enough room for the text as well. In some cases, you might want to also provide a thumbnail version of the image that links to a larger version, in which case you’ll probably stick closer to 100 pixels in the larger dimension for the thumbnail.

Preparing Photographic Images 153

Resizing an Image

The exact tool necessary to change an image’s size will depend on the pro- gram you are using. In GIMP, go to the Image menu and click Scale Image to open the Scale Image dialog box (see Figure 8.5).


image


You’ll almost always want to resize using the existing aspect ratio, meaning that when you enter the width you’d like the image to be, the height will be calculated automatically (and vice versa) to keep the image from squishing out of shape. In GIMP, the aspect ratio is locked by default, as indicated by the chain link displayed next to the Width and Height options shown in Figure 8.5. Clicking once on the chain will unlock it, enabling you to specify pixel widths and heights of your own choosing—squished or not.


In most, if not all, graphics programs, you can also resize the image based on percentages instead of providing specific pixel dimensions. For exam- ple, if my image started out as 1629×1487, and I didn’t want to do the math to determine the values necessary to show it as half that width, I could simply select Percent (in this instance from the drop-down next to the pixel display shown in Figure 8.5) and change the default setting (100) to 50. The image width would then become 815 pixels wide by 744 high—and no math was necessary on my part.


Tweaking Image Colors


If you are editing photographic images rather than creating your own graphics, you might need to use some color-correction tools to get the


FIGURE 8.5

Use the Scale Image dialog box to change the size of an image.


NOTE

As with many of the features in GIMP, the Scale Image dialog box appears in front of the win- dow containing the image being resized. This placement enables you to make changes in the dia- log box, apply them, and see the results immediately.

154 CHAPTER 8 Working with Colors, Images, and Multimedia


photo just right. Like many image editing programs, GIMP offers several options for adjusting an image’s brightness, contrast, and color balance, as well as a filter to reduce the dreaded red-eye. To remove red-eye using GIMP, go to Filters, click Enhance, and then click Red Eye Removal.


Most of these options are pretty intuitive. If you want the image to be brighter, adjust the brightness. If you want more red in your image, adjust the color balance. In GIMP, the Colors menu gives you access to numerous tools. As with the Scale Image dialog box described in the previous section, each tool displays a dialog box in the foreground of your workspace. As you adjust the colors, the image reflects those changes. This preview func- tion is a feature included in most image editing software.


Figure 8.6 shows the Adjust Hue/Lightness/Saturation tool, one of the many tools provided on the Colors menu. As shown in the figure, many color-related changes occur by using various sliders in dialog boxes to adjust the values you are working with. The Preview feature enables you to see what you are doing as you are doing it. The Reset Color button returns the image to its original state without any changes applied.


FIGURE 8.6

The Adjust Hue/Lightness/ Saturation tool is one of many slider-based color modification tools available in GIMP.


image


Because of the numerous tools available to you and the preview function available with each tool, a little playful experimentation is the best way to find out what each tool does.

Creating Banners and Buttons 155


Controlling JPEG Compression


Photographic images on the Web work best when saved in the JPEG file format rather than GIF; JPEG enables you to retain the number of colors in the file while still keeping the overall file size to a manageable level. When you’re finished adjusting the size and appearance of your photo, select File, Save As and choose JPEG as the file type. Your graphics program will likely provide you with another dialog box through which you can control various JPEG options, such as compression.


Figure 8.7 shows the Save as JPEG dialog box you’ll see when you save a JPEG in GIMP. You can see here that you can control the compression ratio for saving JPEG files by adjusting the Quality slider between 1 (low quali- ty, small file size) and 100 (high quality, large file size).


image


You might want to experiment a bit to see how various JPEG compression levels affect the quality of your images, but 85% quality (or 15% compres- sion) is generally a good compromise between file size (and therefore download speed) and quality for most photographic images.


Creating Banners and Buttons


Graphics that you create from scratch, such as banners and buttons, require you to make considerations uniquely different from photographs.


FIGURE 8.7

GIMP enables you to reduce file size while still retaining image quality by saving in the JPEG format.

156 CHAPTER 8 Working with Colors, Images, and Multimedia


TIP

For many years, designing for 800×600 screen resolution has been the norm. Still keep that low number in mind, as many people do not open applica- tions in full-screen mode. However, designing for a base- line 1,024×768 screen resolu- tion is not a bad idea.

The first decision you need to make when you produce a banner or button is how big it should be. Most people accessing the web now have a com- puter with a screen that is at least 1024×768 pixels in resolution, if not con- siderably larger. For example, my screen is currently set at 1440×900 pixels. You should generally plan your graphics so that they will always fit within smaller screens (1024×768), with room to spare for scrollbars and margins. The crucial size constraint is the horizontal width of your pages because scrolling a page horizontally is a huge hassle and a source of confusion for web users. Vertically scrolling a page is much more acceptable, so it’s okay if your pages are taller than the minimum screen sizes.


Assuming that you target a minimum resolution of 800×600 pixels, full-sized banners and title graphics should be no more than 770 pixels wide by 430 pixels tall, which is the maximum viewable area of the page after you’ve accounted for scrollbars, toolbars, and other parts of the browser window. Within a page, normal photos and artwork should be from 100 to 300 pixels in each dimension, and smaller buttons and icons should be 20 to 100 pixels tall and wide. Obviously, if you design for the 1024×768 resolution, you have more screen “real estate” to work with, but the size guidelines for banners, buttons, and other supplementary graphics are still in effect.


To create a new image in GIMP, go to File and choose New. The Create a New Image dialog box displays (see Figure 8.8). If you aren’t sure how big the image needs to be, just accept the default size of a 640×480. Or you can choose one of the other pre-determined sizes in the Template drop-down, such as Web banner common 468×60 or Web banner huge 728×90. Those two settings are indeed considered “common” and “huge” for website banners. Otherwise, enter the width and height of the new image.


For the image’s background color, you should usually choose white to match the background that most web browsers use for web pages (although as you learned in the previous chapter, that color can be changed). When you know that you’ll be creating a page with a back- ground other than white, you can choose a different background color for your image. Or you might want to create an image with no background at all, in which case you’ll select Transparency as the background color. When an image’s background is transparent, the web page behind the image is allowed to show through those areas of the image. In GIMP, select the background color for your new image by opening the Advanced Options in the Create a New Image dialog box.

Reducing the Number of Colors in an Image 157


image


When you enter the width and height of the image in pixels and click OK, you are faced with a blank canvas—an intimidating sight if you’re as art- phobic as most of us! However, because there are so many image creation tutorials (not to mention entire books) available to lead you through the process, I am comfortable leaving you to your own creative devices. This section is all about introducing you to the things you want to keep in mind when creating graphics for use in your sites. This section does not neces- sarily teach you exactly how to do it because being comfortable with the tool you choose is the first step to mastering them.


Reducing the Number of Colors in an Image


One of the most effective ways to reduce the size of, and therefore the download time for, an image is to reduce the number of colors used in the image. This can drastically reduce the visual quality of some photographic images, but it works great for most banners, buttons, and other icons.


You’ll be glad to know that there is a special file format for images with a limited number of colors; it’s called the Graphics Interchange Format (GIF). When you save an image as a GIF, you might be prompted to flatten layers or reduce the number of colors by converting to an indexed image,


FIGURE 8.8

You need to decide on the size of an image before you start working on it.

158 CHAPTER 8 Working with Colors, Images, and Multimedia


TIP

Dithering is a technique used by image-editing programs to simulate a color that isn’t in the color palette with alternat- ing pixels of two similar colors. For example, a dithered pink color would consist of alternat- ing pixels of red and white pix- els, which would give the gener- al impression of pink. Dithering can make images look better in some cases, but it should usu- ally be avoided for web page graphics. Why? It substantially increases the information com- plexity of an image, and that usually results in much larger file sizes and slower down- loads.

as those are requirements for GIFs, as shown in Figure 8.9. The dialog box will simply ask you to confirm these changes that the save process will do for you—do not concern yourself with understanding these options at this time, but read your software’s help file regarding layers and indexed col- ors for a full understanding.


image

FIGURE 8.9

When saving an image as a GIF, you might be prompted to convert it to an indexed color palette.


Remember, the GIF image format is designed for images that contain areas of solid colors, such as web page titles and other illustrated graphics; the GIF format is not ideal for photographs.


PNG (pronounced “ping”) is another useful file format that is supported in all major web browsers. Although the GIF image format enables you to speci- fy a single transparent color, which means that the background of the web page will show through those areas of an image, the PNG format takes things a step further by enabling you to specify varying degrees of transparency.


Working with Transparent Images


You might have seen websites that use background colors or images in their container elements, but also have images present in the foreground that allow the background to show through parts of the foreground graph- ics. In these cases, the images in the foreground have portions which are transparent, so that the images themselves—which are always on a rectan- gular canvas—do not show the areas of the canvas in which the design does not occur. You’ll often want to use these types of partially transparent images to make graphics look good over any background color or back- ground image you might have in place.

Creating Tiled Backgrounds 159


To make part of an image transparent, the image must be saved in the GIF or PNG file format. As mentioned previously in this chapter, most graphics programs that support the GIF format enable you to specify one color to be transparent, whereas PNG images allow for a range of transparency. Largely because of this transparency range, the PNG format is superior to GIF. All the latest web browsers already support PNG images. For more information on the PNG image format, visit http://www.libpng.org/ pub/png/pngintro.html.


The process of creating a transparent image depends on the type of image you are creating (GIF or PNG) and the graphics software you are using to create it. For instructions, look in your graphics program’s help files or type transparent images with [your program here] into your search engine.


Creating Tiled Backgrounds


Any GIF or JPEG image can be used as a background tile within a contain- er element. However, before you go off and create a tiled background, especially a highly patterned tiled background, ask yourself what that tiled background adds to the overall look and feel of your website, and—more importantly—ask yourself if the text of the site can be read easily when placed over that pattern.


Think about the websites you frequent every day and consider the fact that few use tiled, patterned backgrounds on their entire page. If you restrict your browsing to websites for companies, products, sports teams, or other sites in which information (primarily text) is privileged, the number of sites with tiled, patterned backgrounds will decrease even further. Although the Web affords everyone the right of individuality in design, if you are creating a site for your business, you might want to avoid a highly patterned background with contrasting colored text.


If you do use a tiled, patterned background image for your entire site, remember that tiled images look best when you can’t tell they’re tiled images. In other words, you know you have a good image when the top edge of a background tile matches seamlessly with the bottom edge, and the left edge matches with the right.


Figures 8.10 and 8.11 show background tiles in use, both with seamless background, but with varying degrees of effectiveness.

160 CHAPTER 8 Working with Colors, Images, and Multimedia


FIGURE 8.10

This is an example of a seamless background image whereby you can tell the background is tiled because you can see six identical shapes.


FIGURE 8.11

This is also an example of a seam- less background image, only you can’t tell that it is tiled.


TIP

If you really want to use a back- ground tile but you just cannot seem to get the pattern you want, you can check out some of the hundreds of sites on the Internet offering public-domain background images that are free or inexpensive, yet profes- sionally designed.


image


image


Further on in this chapter, you’ll learn how to place background images within your container elements. Despite my warnings in this section, there are actually times when background images can be powerful weapons in your design arsenal—just not when used as entire page backgrounds.


Creating Animated Web Graphics


The GIF image format enables you to create animated images that can be used to add some motion that will spice up any web page. Animated GIF

Placing Images on a Web Page 161

images also transfer much faster than most of the video or multimedia files that are often used for similar effect. With GIMP, you can create animated GIFs by creating multiple layers within an image, and then modifying the Animated GIF options when saving the file. Additionally, if you have a series of images you want to animate, you can use the free, web-based GIF animation service at Gickr (http://www.gickr.com/).

The first step in creating a GIF animation is to create a series of images to be displayed one after the other—or a series of layers, depending on your partic- ular software program. Each of these images is called a frame. By the way, this use of the word frame has nothing whatsoever to do with the frames you’ll learn about in Chapter 20, “Using Windows and Frames.” Instead, think of the frames like how movies or cartoons are put together—the images that you see on the screen are made up of many individual frames with slight dif- ferences in their appearance. After you have your frames in mind, the process of tying them together is relatively simple—it’s the planning stage that’s the most difficult. Take some time to sketch out the frames in storyboard fashion, especially if you plan to have more than just a few frames. After you know how your frames are going to fit together, use the Gickr service mentioned earlier in this section, or read the documentation for your graphics software to learn its particular process for pulling it all together.

You should get two or three images ready now so that you can try putting them on your own pages as you follow along the rest of this chapter. If you have some image files already saved in the GIF, PNG, or JPEG format (the file- names will end in .gif, .png, or .jpg), use those. It’s also fine to use any graph- ics you created while reading the preceding section.

Search engines (such as Google) can become a gold mine of images by leading you to sites related to your own theme. Search engines can also help you discov- er the oodles of sites specifically dedicated to providing free and cheap access to reusable media collections. Also, don’t forget Microsoft’s massive clip art library at the Office Online Clip Art and Media website, located at http://office. microsoft.com/clipart/. Other valuable sources include Google Images (http://images.google.com/) and Flickr (http://www.flickr.com)—look for images using Creative Commons licenses that allow for free use with attribution.

image

TRY IT YOURSELF

Preparing Images for Use in Your Website

Placing Images on a Web Page

To put an image on a web page, first move the image file into the same fold- er as the HTML file or in a directory named images for easy organization.

162 CHAPTER 8 Working with Colors, Images, and Multimedia


NOTE

It doesn’t matter to the web server, web browser, or end user where you put your images, as long as you know where they are and as long as you use the correct paths in your HTML code.


NOTE

image

The <img /> tag also supports a title attribute that is used to describe an image. Unlike the alt attribute, the title attribute is truly intended to provide an image description with the assumption that the image is visible. The alt attrib- ute serves a more important purpose and is put into play pri- marily when an image cannot be displayed, such as when a blind user is “viewing” a page using supplementary screen- reading software. The alt attribute is required, but it’s a good idea to provide both alt and title attributes if you want to ensure that your images are all well-described.


Insert the following HTML tag at the point in the text where you want the image to appear. Use the name of your image file instead of myimage.gif:

<img src=”myimage.gif” alt=”My Image” />


If your image file were in the images directory below the document root, you would use the following:

<img src=”/images/myimage.gif” alt=”My Image” />


Both the src and the alt attributes of the <img /> tag are required in XHTML web pages. The src attribute identifies the image file, and the alt attribute enables you to specify descriptive text about the image, the latter of which is intended to serve as an alternative to the image in the event that a user is unable to view the image. You’ll read more on the alt attrib- ute later, in the section “Describing Images with Text.”


As an example of how to use the <img /> tag, Listing 8.2 inserts an image at the top of the page, before a paragraph of text. Whenever a web browser displays the HTML file in Listing 8.2, it automatically retrieves and dis- plays the image file, as shown in Figure 8.12.


LISTING 8.2 Using the <img /> Ta g to Place Images on a Web Page

<?xml version=”1.0” encoding=”UTF-8”?>

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN”

“http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”>


<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en”>

<head>

<title>A Spectacular Yosemite View</title>

</head>


<body>

<h1>A Spectacular Yosemite View</h1>

<p><img src=”hd.jpg” alt=”Half Dome” /></p>

<p><strong>Half Dome</strong> is a granite dome in Yosemite National

Park,

located in northeastern Mariposa County, California, at the eastern end of Yosemite Valley. The granite crest rises more than 4,737 ft (1,444 m) above the valley floor.</p>

<p>This particular view is of Half Dome as seen from Washburn Point.</p>

</body>

</html>

image

Describing Images with Text 163


image


If you guessed that img stands for image, you’re right. And src stands for source, which is a reference to the location of the image file. As discussed at the beginning of this book, an image is always stored in a file separate from the text, even though it appears to be part of the same page when viewed in a browser.


Just as with the <a href> tag used for hyperlinks, you can specify any complete Internet address in the src attribute of the <img /> tag. Alternatively, if an image is located in the same folder as the HTML file, you can specify just the filename. You can also use relative addresses, such as /images/birdy.jpg or ../smiley.gif.


Describing Images with Text


Each <img /> tag in Listing 8.2 includes a short text message, such as alt=”Half Dome”. The alt stands for alternate text, which is the message that appears in place of the image itself if it does not load. An image might not load if its address is incorrect, if the user has turned off automatic image downloading in her web browser preferences, or if the Internet con- nection is very slow and the data has yet to transfer. Figure 8.13 shows an example of alt text used in place of an image.


FIGURE 8.12

When a web browser displays the HTML code shown in Listing 8.2, it renders the hd.jpg image.


NOTE

image

Theoretically, you can include an image from any website with- in your own pages. In those cases, the image is retrieved from the other page’s web serv- er whenever your page is dis- played. You could do this, but you shouldn’t! Not only is it bad manners because you are using the other person’s bandwidth for your own personal gain, it also can make your pages dis- play more slowly. You also have no way of controlling when the image might be changed or deleted.

If you are granted permission to republish an image from anoth- er web page, always transfer a copy of that image to your com- puter and use a local file refer- ence, such as <img src= ”myimage.jpg” /> instead of

<img src=”http://www. otherserver.com/theirimage. jpg” />. This advice is not applicable, however, when you host your images—such as

photographs—at a service

specifically meant as an image repository, such as Flickr (http://

www.flickr.com/). Services like Flickr provide you with a URL for each image, and each URL includes Flickr’s domain in the address.

164 CHAPTER 8 Working with Colors, Images, and Multimedia


FIGURE 8.13

Users will see alt messages when images do not appear.


image


Even when graphics have fully loaded and are visible in the web browser, the alt message typically appears in a little box (known as a tool tip) when- ever the mouse pointer passes over an image. The alt message also helps any user who is visually impaired (or is using a voice-based interface to read the web page).


You must include a suitable alt attribute in every <img /> tag on your web page, keeping in mind the variety of situations in which people might see that message. A brief description of the image is usually best, but web page authors sometimes put short advertising messages or subtle humor in their alt messages; too much humor and not enough information is frowned upon, however. For small or unimportant images, it’s tempting to omit the alt message altogether, but it is a required attribute of the <img /> tag. This doesn’t mean your page won’t display properly, but it does mean you’ll be in violation of the latest XHTML standards. I recommend assign- ing an empty text message to alt if you absolutely don’t need it (alt=””), which is sometimes the case with small or decorative images.


The title attribute is not required by the <img /> tag, but it functions similarly to the alt attribute; in fact, the title attribute supersedes the alt attribute for tool tips if both attributes are present. Knowing this, the best approach for describing images via text is to use both the alt attribute and the title attribute to provide relevant notation or helpful hints about the image that you think might be useful when viewed as a tool tip or via screen reader software.

Aligning Images 165

Specifying Image Height and Width

Because text moves over the Internet much faster than graphics, most web browsers display the text on a page before they display images. This gives users something to read while they’re waiting to see the pictures, which makes the whole page seem to load faster.


You can make sure that everything on your page appears as quickly as possible and in the right places by explicitly stating each image’s height and width. That way, a web browser can immediately and accurately make room for each image as it lays out the page and while it waits for the images to finish transferring.


For each image you want to include in your site, you can use your graph- ics program to determine its exact height and width in pixels. You might also be able to find these image properties by using system tools. For example, in Windows, you can see an image’s height and width by right- clicking on the image, selecting Properties, and then selecting Details. After you know the height and width of an image, you can include its dimen- sions in the <img /> tag, like this:

<img src=”myimage.gif” alt=”Fancy Picture” width=”200” height=”100” />


Aligning Images


Just as you can align text on a page, you can align images on the page using special attributes. Not only can you align images horizontally, you also can align them vertically with respect to text and other images that surround them.


Horizontal Image Alignment


As discussed in Chapter 5, “Working with Fonts, Text Blocks, and Lists,” you can use <div style=”text-align:center”>, <div style=”text- align:right”> and <div style=”text-align:left”> to align an element to the center, to the right margin, or to the left margin. These style settings affect both text and images and can be used within the <p> tag as well.


Like text, images are normally lined up with the left margin unless a style=”text-align:center” or style=”text-align:right” setting indi- cates that they should be centered or right-justified. In other words, left is the default value of the text-align style property.


TIP

The height and width specified for an image doesn’t have to match the image’s actual height and width. A web browser will try to squish or stretch the image to display whatever size you specify. However, this is generally a bad idea because browsers aren’t particularly good at resizing images. If you want an image to display small- er, you’re definitely better off resizing it in an image editor.

166 CHAPTER 8 Working with Colors, Images, and Multimedia


NOTE

The float style property is actually more powerful than described here and, in fact, applies to more than just images. You can use the float style property creatively to arrive at some interesting page layouts, as you’ll learn later in the book.


NOTE

image

Notice the addition of padding in the style attribute for both

<img/> tags used in Listing 8.3. This padding provides some breathing room between the image and the text—6 pixels on all four sides of the image. You will learn more about padding in Chapter 9, “Working with Margins, Padding, Alignment, and Floating.”

You can also wrap text around images by using the float style property directly within the <img /> tag.


In Listing 8.3, <img style=”float:left” /> aligns the first image to the left and wraps text around the right side of it, as you might expect. Similarly, <img style=”float:right” /> aligns the second image to the right and wraps text around the left side of it. Figure 8.14 shows how these images align on a web page. There is no concept of floating an image to the center because there would be no way to determine how to wrap text on each side of it.


LISTING 8.3 Using text-align Styles to Align Images on a Web Page

image

<?xml version=”1.0” encoding=”UTF-8”?>

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN”

“http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”>


<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en”>

<head>

<title>More Spectacular Yosemite Views</title>

</head>


<body>

<h1>More Spectacular Yosemite Views</h1>

<p><img src=”elcap_sm.jpg” alt=”El Capitan” width=”100” height=”75” style=”float:left; padding: 6px;”/><strong>El Capitan</strong> is a 3,000-foot (910 m) vertical rock formation in Yosemite National Park, located on the north side of Yosemite Valley, near its western end. The granite monolith is one of the world’s favorite challenges for rock climbers. The formation was named “El Capitan” by the Mariposa Battalion when it explored the valley in 1851.</p>

<p><img src=”tunnelview_sm.jpg” alt=”Tunnel View” width=”100” height=”80” style=”float:right; padding: 6px;”/><strong>Tunnel View</strong> is a viewpoint on State Route 41 located directly east of the Wawona Tunnel as one enters Yosemite Valley from the south. The view looks east into Yosemite Valley including the southwest face of El Capitan, Half Dome, and Bridalveil Falls. This is, to many, the first views of the popular attractions in Yosemite.</p>

</body>

</html>

image

Aligning Images 167


image


Vertical Image Alignment


Sometimes, you might want to insert a small image in the middle of a line of text; or you might like to put a single line of text next to an image as a caption. In either case, it would be handy to have some control over how the text and images line up vertically. Should the bottom of the image line up with the bottom of the letters, or should the text and images all be arranged so that their middles line up? You can choose between these and several other options:

. To line up the top of an image with the top of the tallest image or letter on the same line, use <img style=”vertical-align:text-top” />.


. To line up the bottom of an image with the bottom of the text, use

<img style=”vertical-align:text-bottom” />.


. To line up the middle of an image with the overall vertical center of everything on the line, use <img style=”vertical-align:middle” />.


. To line up the bottom of an image with the baseline of the text, use

<img style=”vertical-align:baseline” />.


All four of these options are used in Listing 8.4 and displayed in Figure

8.15. Four thumbnail images are now listed vertically down the page, along with descriptive text next to each image. Various settings for the vertical-align style property are used to align each image and its rele- vant text.


FIGURE 8.14

Showing the image alignment from Listing 8.3.


NOTE

image

The vertical-align style prop- erty also supports values of top and bottom, which can be used to align images with the overall top or bottom of a line of ele- ments regardless of any text on the line.

168 CHAPTER 8 Working with Colors, Images, and Multimedia


TIP

image

If you don’t include any align attribute in an <img /> tag, the bottom of the image will line up with the baseline of any text next to it. That means you never actually have to type style=”vertical-align: baseline” because it is assumed by default. However, if you specify a margin for an image and intend for the align- ment to be a bit more exacting with the text, you might want to explicitly set the vertical- align attribute to text-bottom. Take a look at the last image shown in Figure 8.15 to see an example of the text appearing slightly below the image due to the image margin—this is a result of the baseline setting for vertical-align.


FIGURE 8.15

Showing the vertical image align- ment options used in Listing 8.4.

LISTING 8.4 Using vertical-align Styles to Align Text with Images

image

<?xml version=”1.0” encoding=”UTF-8”?>

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN”

“http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”>


<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en”>

<head>

<title>Small But Mighty Spectacular Yosemite Views</title>

</head>


<body>

<h1>Small But Mighty Yosemite Views</h1>

<p><img src=”elcap_sm.jpg” alt=”El Capitan” width=”100” height=”75” style=”vertical-align:text-top;”/><strong>El Capitan</strong> is a 3,000-foot (910 m) vertical rock formation in Yosemite National Park.</p>

<p><img src=”tunnelview_sm.jpg” alt=”Tunnel View” width=”100” height=”80” style=”vertical-align:text-bottom;”/><strong>Tunnel View</strong> looks east into Yosemite Valley.</p>

<p><img src=”upperyosefalls_sm.jpg” alt=”Upper Yosemite Falls” width=”87” height=”100” style=”vertical-align:middle;”/><strong>Upper Yosemite Falls</strong> are 1,430 ft and are among the twenty highest waterfalls in the world. </p>

<p><img src=”hangingrock_sm.jpg” alt=”Hanging Rock” width=”100” height=”75” style=”vertical-align:baseline;”/><strong>Hanging Rock</strong>, off Glacier Point, used to be a popular spot for people to, well, hang from. Crazy people.</p>

</body>

image

image

</html>

Turning Images into Links 169


Turning Images into Links


You probably noticed in Figure 8.12 that the image on the page is quite large, which is fine in this particular example but isn’t ideal when you’re trying to present multiple images. It makes more sense in this case to cre- ate smaller image thumbnails that link to larger versions of each image. Then, you can arrange the thumbnails on the page so that visitors can easi- ly see all the content, even if they see only a smaller version of the actual (larger) image. Thumbnails are one of the many ways you can use image links to spice up your pages.


To turn any image into a clickable link to another page or image, you can use the <a href> tag that you used previously to make text links. Listing

8.5 contains the code for a modification of Listing 8.3—which already used thumbnails—to provide links to larger versions of the images. To ensure that the user knows to click the thumbnails, the image and some helper text is enclosed in a <div>, as shown in Figure 8.16.


LISTING 8.5 Using Thumbnails for Effective Image Links

image

<?xml version=”1.0” encoding=”UTF-8”?>

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN”

“http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”>


<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en”>

<head>

<title>More Spectacular Yosemite Views</title>

<style type=”text/css”> div.imageleft {

float:left; clear: all;

text-align:center; font-size:9px; font-style:italic;

}

div.imageright { float:right; clear: all;

text-align:center; font-size:9px; font-style:italic;

}

img { padding: 6px; border: none;

}

</style>

</head>

<body>

170 CHAPTER 8 Working with Colors, Images, and Multimedia



FIGURE 8.16

Using thumbnails as links improves the layout of a page that uses large images.

LISTING 8.5 Continued

image

<h1>More Spectacular Yosemite Views</h1>

<p><div class=”imageleft”>

<a href=”http://www.flickr.com/photos/nofancyname/614253439/”><img src=”elcap_sm.jpg” alt=”El Capitan” width=”100” height=”75”/></a>

<br/>click image to enlarge</div><strong>El Capitan</strong>

is a 3,000-foot (910 m) vertical rock formation in Yosemite National Park, located on the north side of Yosemite Valley, near its western end. The granite monolith is one of the world’s favorite challenges for rock climbers. The formation was named “El Capitan” by the Mariposa Battalion when it explored the valley in 1851.</p>

<p><div class=”imageright”>

<a href=”http://www.flickr.com/photos/nofancyname/614287355/”><img src=”tunnelview_sm.jpg” alt=”Tunnel View” width=”100” height=”80”/></a>

<br/>click image to enlarge</div><strong>Tunnel View</strong> is a viewpoint on State Route 41 located directly east of the Wawona Tunnel as one enters Yosemite Valley from the south. The view looks east into Yosemite Valley including the southwest face of El Capitan, Half Dome, and Bridalveil Falls. This is, to many, the first views of the popular attractions in Yosemite.</p>

</body>

</html>

image


image


The code in Listing 8.5 uses additional styles that will be explained in more detail in later chapters, but you should be able to figure out the basics:

. The <a> tags link these particular images to larger versions, which in this case are stored on an external server (at Flickr).


. The <div> tags, and their styles, are used to align those sets of graph- ics and caption text (and also include some padding).

Using Background Images 171


Unless instructed otherwise, web browsers display a colored rectangle around the edge of each image link. Like text links, the rectangle usually appears blue for links that haven’t been visited recently or purple for links that have been visited recently—unless you specify different colored links in your style sheet. Because you seldom, if ever, want this unsightly line around your linked images, you should usually include style=”border:none” in any <img /> tag within a link. In this instance, the border:none style is made part of the style sheet entry for the img ele- ment because we use the same styles twice.


When you click one of the thumbnail images on the sample page shown, the link is opened in the browser, as shown in Figure 8.17.


image

FIGURE 8.17

Clicking a linked thumbnail image opens the target of the link.


Using Background Images


As you learned earlier in this chapter, you can use background images to act as a sort of wallpaper in a container element, so that the text or other images appear on top of this underlying design.


The basic style properties that work together to create a background are as follows:

. background-color—Specifies the background color of the element.

Although not image-related, it is part of the set of background-related

properties.

172 CHAPTER 8 Working with Colors, Images, and Multimedia


. background-image—Specifies the image to use as the background of the element using the following syntax: url(‘imagename.gif’).


. background-repeat—Specifies how the image should repeat, both horizontally and vertically. By default (without specifying anything), background images will repeat both horizontally and vertically. Other options are repeat (same as default), repeat-x (horizontal), repeat-y (vertical), and no-repeat (only one appearance of the graphic).


. background-position—Specifies where the image should be initially placed relative to its container. Options include top-left, top-center, top-right, center-left, center-center, center-right, bottom-left, bottom-center, bottom-right, and specific pixel and percentage placements.


When specifying a background image, you can put all of these specifica- tions together into one property, like so:

body {

background: #ffffff url(‘imagename.gif’) no-repeat top right;

}


In the previous style sheet entry, the body element of the web page will be white and include a graphic named imagename.gif on the top right. Another use for the background property is the creation of custom bullets for your unordered lists. To use images as bullets, first define the style for the <ul> tag as follows:

ul {

list-style-type: none; padding-left: 0;

margin-left: 0;

}


Next, change the declaration for the <li> tag to:


li {

background: url(mybullet.gif) left center no-repeat

}


Make sure that mybullet.gif (or whatever you name your graphic) is on the web server and accessible; in that case, all unordered list items will show your custom image rather than the standard-filled disc bullet.


We will return to the specific use of background properties in Part III, “Advanced Web Page Design with CSS,” when using CSS for overall page layouts.

Using Imagemaps 173


Using Imagemaps


Sometimes you might want to use an image as navigation, but beyond the simple button-based or link-based navigation that you often see in websites. For example, perhaps you have a website with medical information, and you want to show an image of the human body that links to pages that pro- vide information about various body parts. Or, you have a website that pro- vides a world map users can click to access information about countries. You can divide an image into regions that link to different documents, depending on where users click within that image. This is called an imagemap, and any image can be made into an imagemap.


Why Imagemaps Aren’t Always Necessary


The first thing you should know about imagemaps is that you probably won’t need to use them except in very special cases. It’s almost always easi- er and more efficient to use several ordinary images that are placed directly next to one another and provide a separate link for each image.


For example, see Figure 8.18. This is a web page that shows 12 different corpo- rate logos; this example is a common type of web page in the business world, one in which you give a little free advertisement to your partners. You could present these logos as one large image and create an imagemap that provides links to each of the 12 companies. Users could click each logo in the image to visit each company’s site. Or, you could display the images on the page as in this example and use 12 separate images—one for each company—with each image including a link to that particular company.


An imagemap is the best choice for an image that has numerous parts, is oddly arranged, or the design of the image itself might be too complicated to divide into separate images. Figure 8.19 shows an image that is best suit- ed as an imagemap.


Mapping Regions Within an Image


To create any type of imagemap, you need to figure out the numerical pixel coordinates of each region within the image that you want to turn into a click- able link. These clickable links are also known as areas. Your graphics program might provide you with an easy way to find these coordinates. Or you might want to use a standalone imagemapping tool such as Mapedit (http://www. boutell.com/mapedit/) or the online imagemap maker at http://www. image-maps.com/. In addition to helping you map the coordinates, these tools also provide the HTML code necessary to make the maps work.

174 CHAPTER 8 Working with Colors, Images, and Multimedia


FIGURE 8.18

Web page with 12 different logos; this could be presented as a sin- gle imagemap or divided into 12 separate pieces.


FIGURE 8.19

An image that wouldn’t take well to being sliced up—better make it an imagemap.


image


image


Using an imagemapping tool is often as simple as using your mouse to draw a rectangle (or a custom shape) around the area you want to be a link. Figure 8.20 shows the result of one of these rectangular selections as

Using Imagemaps 175

well as the interface for adding the URL and the title or alternate text for this link. Several pieces of information are necessary to creating the HTML for your imagemap: coordinates, target URL, title of link, and alternative text for the link.


image

image


You’re more likely to remember how to make imagemaps if you get an image of your own and turn it into an imagemap as you continue with this chapter:


. For starters, it’s easiest to choose a fairly large image that is visually divided into roughly rectangular regions.


. If you don’t have a suitable image handy, use your favorite graphics pro- gram to make one. Perhaps use a single photograph showing several people and use each person as an area of the imagemap.


. Try a few different imagemapping tools to determine which you like best. Start with standalone software such as MapEdit (http://www.boutell.com/mapedit/) and move to the online imagemap maker at http://www.image-maps.com/. There are others; use the search engine of your choice to find variations on the imagemap soft- ware theme.


FIGURE 8.20

Using an imagemapping tool to create linked areas of a single graphic.


TRY IT YOURSELF


Creating Your Own Imagemap

176 CHAPTER 8 Working with Colors, Images, and Multimedia


Creating the HTML for an Imagemap


If you use an imagemap generator, you will already have the HTML neces- sary for creating the imagemap. However, it is a good idea to understand the parts of the code so that you can check it for accuracy. The following HTML code is required to start any imagemap:

<map name=”mapname”>


Keep in mind that you can use whatever name you want for the name of the

<map> tag, although it helps if you make it as descriptive as possible. Next, you’ll need an <area /> tag for each region of the image. Following is an example of a single <area /> tag that is used in the mapping-a-map imagemap example:

<area shape=”rect” coords=”100,136,116,152” href=”http://www.whitmancounty.org/” alt=”Whitman County, WA”

title=”Whitman County, WA” />


This <area /> tag has five attributes, which you will use with every area you describe in an imagemap:

. shape indicates whether the region is a rectangle (shape=”rect”), a circle (shape=”circle”), or an irregular polygon (shape=”poly”).


. coords gives the exact pixel coordinates for the region. For rectangles, give the x,y coordinates of the upper-left corner followed by the x,y coordinates of the lower-right corner. For circles, give the x,y center point followed by the radius in pixels. For polygons, list the x,y coor- dinates of all the corners in a connect-the-dots order.


. href specifies the page to which the region links. You can use any address or filename that you would use in an ordinary <a href> link tag.


. alt enables you to provide a piece of text that is associated with the shape. Most browsers (Firefox excluded) display this text in a small box when a user hovers his mouse over the shape. This text adds a subtle but important visual cue to users who might not otherwise realize that they are looking at an imagemap. Firefox correctly uses the title attrib- ute in addition to the alt attribute to provide a visual cue, which is why, as noted previously in this chapter, you should use both attributes.


Each distinct clickable region in an imagemap must be described as a single area, which means a typical imagemap consists of a list of areas. After cod- ing the <area /> tags, you are done defining the imagemap, so wrap things up with a closing </map> tag.

Using Imagemaps 177

The last step in creating an imagemap is wiring it to the actual map image. The map image is placed on the page using an ordinary <img /> tag. However, there is an extra usemap attribute that is coded like this:

<img src=”map.png” usemap=”#countymap” style=”border:none; width:650px; height:509px” alt=”Native Peoples Census Map” />

When specifying the value of the usemap attribute, use the name you put in the id of the <map> tag (and don’t forget the # symbol). Also include the style attribute to specify the height and width of the image and to turn off the border around the imagemap, which you might or might not elect to keep in imagemaps of your own.

Listing 8.6 shows the complete code for a sample web page containing the map graphic, its imagemap, and a few mapped areas.


LISTING 8.6 Defining the Regions of an Imagemap with <map> and

<area /> Tags

image

<?xml version=”1.0” encoding=”UTF-8”?>

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>


<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en”>

<head>

<title>Testing an Imagemap</title>

</head>


<body>

<h1>Testing an Imagemap</h1>

<p style=”text-align:center”>Click on a logo to go to the county’s web site.<br/>

<img src=”map.png” usemap=”#countymap” style=”border:none; width:650px;height:509px” alt=”Native Peoples Census Map” /></p>


<map name=”countymap” id=”countymap”>

<area shape=”rect” coords=”100,136,116,152” href=”http://www.whitmancounty.org/”

alt=”Whitman County, WA” title=”Whitman County, WA” />

<area shape=”rect” coords=”29,271,42,283” href=”http://www.sccgov.org/” alt=”Santa Clara County, CA” title=”Santa Clara County, CA” />

<area shape=”rect” coords=”535,216,548,228” href=”http://visitingmifflincounty.com/”

alt=”Mifflin County, PA” title=”Mifflin County, PA” />

</map>

</body>

</html>


NOTE

image

If you’re a stickler for details, you might have noticed—check out the first few lines of code— that this web page is coded as an XHTML 1.0 document, as opposed to the XHTML 1.1 used with most of the other examples in the book. This is done because some browsers (Internet Explorer, for one) are lagging in their support of a sin- gle XHTML 1.1 change in how imagemaps are used. This change is specific to the usemap attribute, which in XHTML 1.1 doesn’t require the

# symbol in front of the map name. In fact, the # symbol isn’t allowed at all in XHTML

1.1. The # symbol is, however, allowed in XHTML 1.0, so to satisfy current web browsers and still provide you with a valid web page; this particular exam- ple uses XHTML 1.0.

image

178 CHAPTER 8 Working with Colors, Images, and Multimedia


Figure 8.21 shows the imagemap in action. Notice in the bottom of your browser window that your browser (in this example, Firefox) displays the link address for whatever area the mouse is hovering over. Additionally, when you hover the mouse over an area, the alt or title text for that area—in this example, Whitman County—is displayed on the imagemap.


FIGURE 8.21

The imagemap defined in Listing

8.6 as it displays on the web page.


NOTE

image

There is a method of producing mapped images that relies solely on CSS and not the HTML <map> tag. You will learn more about this in Chapter 11, “Using CSS to Do More with Lists, Text, and Navigation.”


image


Integrating Multimedia into Your Website


Now that you’ve learned how to work with static images, the natural next step is to work with multimedia. The term multimedia encompasses every- thing we see and hear on a web page: audio, video, and animation, as well as static images and text. In this section, you won’t learn how to create any particular audio, video, or animation, but you will learn how to include such files in your site, through either linking or embedding the content.


Remember, though, that not every user has devices that will play your media type, nor do all users have broadband Internet connections which allow these large files to transfer quickly. Always warn your visitors that the links they click will take them to multimedia files and offer them the choice to view or listen to the content—don’t force the files upon them.

Integrating Multimedia into Your Website 179


Creating multimedia of any kind can be a challenging and complicated task. If you’re planning to create your own content from scratch, you’ll need far more than this book to become the next crackerjack multimedia developer. After you have some content, however, this section will show you how to place your new creations into your web pages.


For those of us who are artistically challenged, several alternative ways to obtain useful multimedia assets are available. Aside from the obvious (such as hiring an artist), here are a few suggestions:

. Much of the material on the Internet is free. Of course, it’s still a good idea to double-check with the author or current owner of the content; you don’t want to be sued for copyright infringement. In addition, various offices of the U.S. government generate content which, by law, belongs to all Americans. (For example, any NASA footage found online is free for your use.)


. Many search engines (google.com, yahoo.com, bing.com, and so on) have specific search capabilities for finding multimedia files. As long as you are careful about copyright issues, this can be an easy way to find multimedia related to a specific topic. A simple search for sam- ple Flash animations, sample QuickTime movie, or sample audio files will produce more results than you can handle.


. If you are creatively inclined, determine the medium you like most— for some of you it might be video production, others may enjoy audio production, and still others might want to dabble in animation. After you have determined a starting point, look into the various types of software which will enable you to create such artistic masterpieces. Many companies provide multimedia software, such as Adobe (http://www.adobe.com/) and Apple (http://www.apple.com/).


Linking to Multimedia Files


The simplest and most reliable option for incorporating a video or audio file into your website is to simply link it in with <a href>, exactly as you would link to another HTML file.


For example, the following line could be used to offer a MOV video of a hockey game:

<a href=”hockey.mov”>View the hockey video clip.</a>


NOTE

Regardless of the specific media types shown in this chapter, the procedures shown for incorporating multimedia into your web pages will be sim- ilar no matter which media for- mat you choose.

180 CHAPTER 8 Working with Colors, Images, and Multimedia


NOTE

In case you’re unfamiliar with helper applications (helper apps for short), they are the external programs that a web browser calls on to display any type of file it can’t handle on its own. Generally, the helper application associated with a file type is called on whenever a web browser can’t display that type of file on its own.

Plug-ins are a special sort of helper application installed directly into a web browser and they enable you to view multi- media content directly within the browser window.


NOTE

image

If your browser has no support for QuickTime, you can down- load the QuickTime player free from Apple at http://www. apple.com/quicktime/. Even if you do have QuickTime installed, some browsers might still play QuickTime movies dif- ferently based on whether a plug-in is installed. For exam- ple, on my Windows computer, Internet Explorer and Firefox both play QuickTime movies directly in the browser window via a plug-in, whereas Opera launches QuickTime as a helper application.

When the user clicks the words View the hockey video clip., the hockey.mov QuickTime video file is transferred to her computer from your web server. Whichever helper application or plug-in she has installed auto- matically starts as soon as the file has finished downloading. If no compat- ible helper or plug-in can be found, the web browser will offer her a chance to download the appropriate plug-in or save the video on her hard drive for later viewing.


The click action results in the browser either playing the video with the help of a plug-in (if one is found that can play the clip) or deferring to a suitable helper application.


If you change the link from pond.wmv (Windows Media) to pond.mov (QuickTime), your browser handles the link differently. Instead of launch- ing another program, the QuickTime plug-in enables you to view the movie clip directly in the browser window.


As you might have guessed, this approach of using a simple link to play multimedia files offers the best backward compatibility because the browser bears all the responsibility of figuring out how to play a multimedia clip. The downside to this is that you don’t have much control over how a clip is played, and you definitely can’t play a clip directly in the context of a page.


Embedding Multimedia Files


XHTML contains a standard <object> tag that is the preferred way to embed multimedia of any kind in a web page. This tag is used instead of the old <embed /> tag that you might still see in some HTML source code.


Embedding a multimedia file into a page produces a set of software con- trols that allow the file to be played directly—no secondary window is nec- essary, and there’s no need to navigate away from the page you are on. Following is code to embed the pond video using the <object> tag by itself:

<object classid=”CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6”

width=”320” height=”305”>

<param name=”type” value=”video/x-ms-wmv” />

<param name=”URL” value=”pond.wmv” />

<param name=”uiMode” value=”full” />

<param name=”autoStart” value=”false” />

</object>


This code isn’t too terribly complicated when you consider that it literally embeds a video directly into your web page (see Figure 8.22). The messiest part of the code is the classid attribute of the <object> tag, which is set to

Integrating Multimedia into Your Website 181


a long alphanumeric code. This code is the global ID for Windows Media Player, which means that you’re telling the <object> tag to embed Windows Media Player on the page to play the video clip. You can just copy and paste this code into your own web pages.


image

FIGURE 8.22

The <object> tag enables you to embed a video clip on a web page while specifying which media player is to play it.


The width and height attributes of the <object> tag determine the size of the embedded Windows Media Player window. Some browsers will auto- matically size the embedded player to fit the content if you leave these attributes off, whereas others won’t show anything at all. Play it safe by setting them to a size that suits the multimedia content being played.


There are four <param> tags within the <object> tag that are responsible for additional details about how the clip is to be played. Each tag has two attributes, name and value, which are responsible for associating data (value) with a particular setting (name). In this example, the URL for the media clip is set to pond.wmv. The third parameter, uiMode, determines which buttons and user interface options are made available by Windows Media Player—full indicates that all user interface features are enabled, such as the control buttons and volume slider. Finally, the autoStart parameter is set to false so that the video clip does not automatically start playing when the page is opened in a browser.


NOTE

It’s important to note that Windows Media Player is a sophisticated enough media player that it automatically streams multimedia files, which means that it begins playing them after loading only the first few seconds of content. The idea is that the rest of the con- tent is loaded in the back- ground while you’re watching or listening to earlier portions. The result is that visitors don’t have to wait through long download times when viewing or listening to your multimedia clips.

182 CHAPTER 8 Working with Colors, Images, and Multimedia


The type parameter is perhaps the trickiest. It identifies the type of media being displayed, which in this case is a Windows Media Video (WMV) file. This media type must be specified as one of the standard Internet MIME types.


A MIME type is an identifier for uniquely identifying different types of media objects on the Internet. MIME stands for Multipurpose Internet Mail Extensions, and this name comes from the fact that MIME types were orig- inally used to identify email attachments. These MIME types should be used in the type attribute of the <object> tag to identify what kind of multimedia object is being referenced in the data attribute.


Following are the MIME types for several popular sound and video for- mats you might want to use in your web pages:

. WAV Audioaudio/x-wav


. AU Audioaudio/basic


. MP3 Audioaudio/mpeg


.MIDIAudioaudio/midi


. WMA Audioaudio/x-ms-wma


. RealAudioaudio/x-pn-realaudio-plugin


. AVIvideo/x-msvideo


. WMVvideo/x-ms-wmv


. MPEG Videovideo/mpeg


. QuickTimevideo/quicktime


Listing 8.7 shows the relevant code for the pond web page, where you can see the <object> tag as it appears in context.


LISTING 8.7 Using an <object> Tag to Directly Embed a WMV Video Clip

image

<?xml version=”1.0” encoding=”UTF-8”?>

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN”

“http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”>


<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en”>

<head>

<title>Fun in the Pond</title>

</head>


<body>

Integrating Multimedia into Your Website 183

LISTING 8.7 Continued NOTE

image

<h1>Fun in the Pond</h1>

<div style=”float:left; padding:3px”>

<object classid=”CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6”

width=”320” height=”305”>

<param name=”type” value=”video/x-ms-wmv” />

<param name=”URL” value=”pond.wmv” />

<param name=”uiMode” value=”full” />

<param name=”autoStart” value=”false” />

<embed width=”320” height=”305” type=”video/x-ms-wmv” src=”pond.wmv” controls=”All” loop=”false” autostart=”false” pluginspage=”http://www.microsoft.com/windows/windowsmedia/” />

</object>

</div>

<p>Michael’s backyard pond is not only a fun hobby but also an ongoing home improvement project that is both creative and relaxing.</p>

<p>He has numerous fish in the pond, all Koi from various places as far as Japan, Israel, and Australia. Although they don’t bark, purr, or fetch anything other than food, these fish are his pets, and good ones at that.</p>

</body>

</html>

image


You might notice that there’s some extra code that didn’t appear in the ear- lier <object> tag example. Unfortunately, as discussed earlier in the section, not all web browsers are entirely consistent in their support of the <object> tag. For this reason, it is necessary to include an <embed /> tag within the

<object> tag to account for browser inconsistencies. This isn’t an ideal solu- tion, but it’s all we have while browser vendors continue to lag behind pre- vailing standards. If you pay close attention, you’ll notice that the <embed

/> tag contains all the same information as the <object> tag.


The <object> tag is a bit more complex than what is revealed here. However, you don’t need to know how to use the more advanced facets of the <object> tag just to play multimedia content. In other words, it isn’t important for you to become a multimedia guru to share some multimedia clips on your web pages.


Additional Tips for Using Multimedia


Before you add video, audio, or animations to your website, first ask your- self if you really should. When you use these types of multimedia, be sure to do so for a reason. Gratuitous sound and video, just like gratuitous images, can detract from your overall message. Then again, if your mes- sage is “Look at the videos I have made” or “Listen to my music and

image

Because the <embed /> tag is not supported in XHTML, it will prevent your pages from validat- ing. Unfortunately, there really is no workaround for this prob- lem—we’ll just have to wait for browsers to fully support the

<object> tag by itself or move to the <embed /> element of HTML5.


NOTE

Video files aren’t the only media files you can include within your website using the

<object> and <embed /> tags. Adding any multimedia file will follow the same process. To determine exactly which classid and codebase attributes to use, as well as additional parame- ters (in the <param /> tags), use your search engine to look up something like object embed mediatype, where mediatype is Real Audio, QuickTime, Flash, or whatever you want.

184 CHAPTER 8 Working with Colors, Images, and Multimedia


download some songs,” then multimedia absolutely must play a role in your website.


Here are a few additional tips to keep in mind:


. Don’t include multimedia in a page and set it to automatically play when the page loads. Always give users the option to start (and stop) your sound or video.


. When possible, give users a choice of multimedia players. Don’t limit yourself to multimedia content playable by only one type of player on only one operating system.


. Multimedia files are larger than the typical graphics and text files, which means you need to have the space on your web server to store them, as well as the bandwidth allotment to transfer them to whomever requests them via your website.


. If your site is entirely audio or video and offers very little by way of text or graphics, understand that a certain segment of your audience won’t see or hear what you want to present because of the limita- tions of their system or bandwidth. Provide these users with addi- tional options to get your information.


. Leverage free online video hosting services, such as YouTube (http://www.youtube.com/). Not only does YouTube provide stor- age for your video clips, it will provide you with the code necessary to embed the video in your own web page. For example, Figure 8.23 shows the YouTube page for the cutest puppy in the world. If you copy and paste the text from the Embed area shown in the figure, you would get the following:


<object width=”425” height=”344”>

<param name=”movie” value=”http://www.youtube.com/v/yPxiHd2BOpo

&rel=0&color1=0xb1b1b1&color2=0xcfcfcf&feature=player_profilepage

&fs=1”></param>

<param name=”allowFullScreen” value=”true”></param>

<param name=”allowScriptAccess” value=”always”></param>

<embed src=”http://www.youtube.com/v/yPxiHd2BOpo&rel=0&color1=0xb1b1b1

&color2=0xcfcfcf&feature=player_profilepage&fs=1” type=”application/x-shockwave-flash” allowfullscreen=”true” allowScriptAccess=”always” width=”425” height=”344”></embed>

</object>


You could then insert the code into your web page.

Summary 185


image


Summary


In this chapter, you learned a few best practices for thinking about color use, and how to use the color wheel to help you find colors that will com- plement your text. Additionally, you learned about hexadecimal notion for colors—that all colors are expressed in notations related to the amount of red, green, and blue in them—and how hexadecimal notation enables you to apply nuanced colors to your elements. More importantly, you learned about the three color-related style properties that can be used to apply color to container backgrounds, borders, and text using CSS.


You also learned the basics of preparing graphics for use on web pages. If nothing else, you learned that this is a very complex topic, and you learned just enough in this chapter to whet your appetite. The examples in this chapter used the popular (and free!) GIMP software package, but feel free to use the graphics software that best suits your needs. Among the actions you learned were how to crop, resize, and tweak image colors, and you also learned about the different file formats. There are many consider- ations you must keep in mind when including graphics in your site, including graphic size and resolution and how to use transparency, ani- mated GIFs, and tiled backgrounds.


After you have created or edited some images, you can place them in your web page, which you also learned how to do through the <img /> tag. You


FIGURE 8.23

YouTube provides storage of your video files as well as links and

<object> code for use in your own pages.

186 CHAPTER 8 Working with Colors, Images, and Multimedia


learned how to include a short text message that appears in place of the image as it loads and also appears whenever users move the mouse pointer over the image. You also discovered how to control the horizontal and vertical align- ment of each image and how to wrap text around the left or right of an image.


You learned how to use images as links—either by using the <a> tag around the images or by creating imagemaps. You also learned a little bit about how to use images in the background of container elements.


Finally, you learned how to embed video and sound into a web page. You discovered how to use a simple link to a multimedia file, which is the most broadly supported but least flexible option for playing media content. You then learned how to use the <object> tag to embed a media player directly in a web page. Not only that, you discovered that for maximum browser compatibility, it helps to assist the <object> tag with the <embed /> tag. The

<object> and <embed /> tags can be used to include a vast array of media types, including WAV, MP3, RealAudio, and MIDI files—not to mention AVI, WMV, and QuickTime videos, to name just a few.


Table 8.1 summarizes the tags and attributes covered in this chapter.


TABLE 8.1 Tags and Attributes Covered in Chapter 8

image

Tag Function

image

<img /> Places an image file within the page.

<map>...</map> A client-side imagemap referenced by <img usemap=

”...” />. Includes one or more <area /> tags.

<area /> Defines a clickable link within a client-side imagemap.

<embed /> Embeds a multimedia file to be read or displayed by a

plug-in application; this tag is technically deprecated but still useful due to browsers not fully supporting the

<object> tag yet.

<object>...</object> Inserts images, videos, Java applets, ActiveX controls,

or other objects into a document.

<param>...</param> Runtime settings for an object, such as the width and

height of the area it occupies on a page.

Attribute/Style Function

image

style=”background- Sets the background color of an element (such as

color:color” <body>, <p>, <div>, <blockquote>, and other

containers).

style=”color:colorSets the color of text within an element.

style=”border:size Sets the color of the four borders around an element.

type color Border colors cannot be used without also specifying

the width and type of the border.

Summary 187


TABLE 8.1 Continued

image

Attribute/Style Function

image

src=”address” The address or filename of the image.

alt= An alternative description of the image that is

”altdescription” displayed in place of the image, primarily for users who

can’t view the image itself.

title=”title” A text message that is displayed as an image title, typi-

cally in a small pop-up box (tool tip) over the image. width=”width” The width of the image (in pixels). height=”height” The height of the image (in pixels).

style= Gets rid of the border around the image if the image

”border:attributes” is serving as a link.

style=”vertical- Aligns the image vertically to text-top, top, text- align:alignment” bottom, bottom, middle, or baseline.

style=”float:float” Floats the image to one side so text can wrap around it.

Possible values are left, right, and none (default).

usemap=”name” The name of an imagemap specification for client-side

image mapping. Used with <map> and <area />. shape=”value” Within the <area /> tag, specifies the shape of the

clickable area. Valid options for this attribute are rect,

poly, and circle.

coords=”values” Within the <area /> tag, specifies the coordinates of

the clickable region within an image. Its meaning and setting vary according to the type of area.

href=”linkurl” Within the <area /> tag, specifies the URL that should

be loaded when the area is clicked.

name=”name” A named parameter property.

value=”value” The value associated with a named parameter property. width=”width” The width of the embedded object in pixels. height=”height”