HTML in 10 simple step or less

• You can embed style definitions in the head section of an HTML document (see Task 74), place them in their own CSS document and link to them (see Task 75), or define them inline, usi[r]

(1)

(2)

HTML in 10 Simple Steps or Less

(3)

(4)

(5)

(6)

HTML in 10 Simple Steps or Less

(7)

Wiley Publishing, Inc.

10475 Crosspoint Boulevard Indianapolis, IN 46256 www.wiley.com

ISBN: 0-7645-4123-4

Manufactured in the United States of America 10

1O/QV/RS/QT/IN

No part of this publication may be reproduced, stored in a retrieval system or transmitted in any form or by any means, electronic, mechanical, photocopying, recording, scanning or otherwise, except as permitted under Sec-tions 107 or 108 of the 1976 United States Copyright Act, without either the prior written permission of the Publisher, or authorization through payment of the appropriate per-copy fee to the Copyright Clearance Cen-ter, 222 Rosewood Drive, Danvers, MA 01923, (978) 750-8400, fax (978) 646-8700 Requests to the Publisher for permission should be addressed to the Legal Department, Wiley Publishing, Inc., 10475 Crosspoint Blvd., Indianapolis, IN 46256, (317) 572-3447, fax (317) 572-4447, E-mail: permcoordinator@wiley.com

Limit of Liability/Disclaimer of Warranty: While the publisher and author have used their best efforts in

preparing this book, they make no representations or warranties with respect to the accuracy or completeness of the contents of this book and specifically disclaim any implied warranties of merchantability or fitness for a par-ticular purpose No warranty may be created or extended by sales representatives or written sales materials The advice and strategies contained herein may not be suitable for your situation You should consult with a profes-sional where appropriate Neither the publisher nor author shall be liable for any loss of profit or any other com-mercial damages, including but not limited to special, incidental, consequential, or other damages

For general information on our other products and services or to obtain technical support, please contact our Cus-tomer Care Department within the U.S at (800) 762-2974, outside the U.S at (317) 572-3993 or fax (317) 572-4002 Wiley also publishes its books in a variety of electronic formats Some content that appears in print may not be available in electronic books

Library of Congress Cataloging-in-Publication Data Fuller, Robert,

1966-HTML in 10 simple steps or less / Robert Fuller and Laurie Ulrich p cm

Includes index ISBN 0-7645-4123-4

1 HTML (Document markup language) I Title: HTML in ten simple steps or less II Ulrich, Laurie Ann III Title

QA76.76.H94 F84 2003 006.7'4 dc22

2003020606

Trademarks: Wiley, the Wiley Publishing logo and related trade dress are trademarks or registered trademarks

(8)

(9)

Acquisitions Editor Jim Minatel

Development Editor Adaobi Obi Tulton Technical Editor Will Kelly Copy Editor Stefan Gruenwedel Editorial Manager Kathryn Malm

Vice President & Executive Group Publisher Richard Swadley

Vice President and Executive Publisher Robert Ipsen

Vice President and Publisher Joseph B Wikert

Executive Editorial Director Mary Bednarek

Project Coordinator April Farling

Graphics and Production Specialists

Joyce Haughey, Jennifer Heleine, LeAndra Hosier, Lynsey Osborn, Heather Pope

Quality Control Technicians

John Greenough, Susan Moritz, Charles Spencer Book Designer

Kathie S Schnorr Proofreader Christine Pingleton Indexer

(10)

Robert G Fuller used to work in the Tech Sector of Corporate America Realizing this was a big

mis-take, he left and began sharing what he knew with anyone who’d listen He writes when the mood suits him, teaches wherever he can find students who are interested, and every now and again offers his skills to worthy causes You can reach him at robert@highstrungproductions.com

Laurie Ulrich is the author and coauthor of more than 25 books on computer software, with specific

(11)

(12)

Welcome to HTML in 10 Simple Steps or Less Our mission in writing this book is to provide a quick and accessible way for you to learn Hypertext Markup Language — the lingua franca of the World Wide Web We hope this book provides a resource that beginning and intermediate HTML coders can use to improve their Web development skills It is also our hope that it fills multiple roles as both a teach-ing tool and a reference once you expand your skills

What This Book Is

Each part in this book pertains to a different aspect of HTML and Web production, and we devote each task within the parts to building a specific piece of Web page content We’ve laid out these tasks in 10 steps or less so they’re easy to internalize and become part of your personal skill set

Who We Are and What We Know

Robert Fuller has an extensive background in Web development and design He served as senior

devel-oper for Travelocity’s Site59.com and takes his experience into the classroom — both live and online — every day He believes that in order for new Web developers truly to flourish, they must gain a solid understanding of the Web’s underlying language, HTML

He has authored, coauthored, and contributed to several books about HTML, Web design, graphic soft-ware applications, and general computing His online courses are currently available in college curricula throughout the United States, Europe, and Australia

Laurie Ulrich has used, written about, and helped others use computers since the early 1980s She ran

two large training centers for computer resellers in Philadelphia and New York, and she served as an IT manager specializing in the proprietary software needs of midsize distributors In 1992 she founded Limehat & Company, Inc., a firm providing Web hosting, design, and Webmaster services to growing businesses and nonprofit organizations She has taught more than 10,000 students to make more effective and creative use of their computers and software

Laurie has also authored, coauthored, and contributed to more than 25 nationally published books on desktop applications, graphics and illustration, and Web design

How to Use This Book

(13)

In addition to the material found in this book, the publisher maintains a companion Web site where you’ll find information that doesn’t lend itself to a task-oriented approach We point you to the Web site (www.wiley.com/compbooks/10simplestepsorless) at various points throughout the book to give you detailed information about particular concepts, help you learn about other Web-based resources, and provide samples of some of the content you create

What You Need to Get Started

As long as you have a computer, the list of requirements is quite short To create Web page content you need only two things: a program for writing code (a text editor) and another program for viewing the fin-ished product (a Web browser)

Text Editors

In nearly every case, a computer’s operating system (OS) comes with a text editor For example, Microsoft Windows provides its users with the program called Notepad It is a very simple, bare-bones application that allows you to write simple text files — which is all that an HTML document is Mac OS (and earlier versions) contains a native text editor, called SimpleText Apple refers to it as “the utility-knife of software.” This simple application is designed for simple tasks Mac OS X provides a new pro-gram, called TextEdit, that replaces SimpleText Both of these applications are more than sufficient for writing HTML documents Having written a vast quantity of HTML over the years, however, we’re sure you’ll ultimately want to work with a text editor that offers more functionality than these limited-range word processors Like anything else, you want the right tool for the job

More robust programs offer advantages that make learning HTML easy Just as a full-featured word processor makes it easy to write letters, term papers, and books — compared with using Notepad or SimpleText — an HTML code editor makes it easy to generate code properly and build robust Web pages For example, most HTML editors feature syntax-checking and code-coloring Because they understand the code you write, these programs assign colors to different functional parts of the code so that you can easily spot errors (mostly caused by typos) and fix them

Each major operating system — Windows, Macintosh, and UNIX/Linux — offers a number of HTML editors that cost anywhere from nothing to over $100 (But as we said earlier, you get what you pay for.) We review here some of the more popular editors available on each platform Later on in the book, we discuss these products and others in greater detail

TextPad from Helios Software Solutions (Windows)

TextPad is shareware, which means you can download it for free and generally use it indefinitely However, if you intend to use the program for an extended period, and derive much productive use from it, you should register and pay for the program — if at least to get technical support and notifications of upgrades or improvements (bug fixes) TextPad currently runs about US $26

(14)

BBEdit from Bare Bones Software (Macintosh)

BBEdit, whose marketing slogan is “It Doesn’t Suck,” emphasizes its HTML editing capabilities, although it certainly isn’t limited to HTML BBEdit functions similarly to TextPad and includes color syntax-checking, spell-checking, and multiple undo and redo, just to name the basics The only drawback to BBEdit is its US $179 price tag However, Bare Bones Software makes a free version called BBEdit Lite Although they don’t target it as keenly at the HTML coder, it is still a powerful, all-purpose text editor

Web Browsers

We suspect you already have a favorite Web browser, but if you’re serious about developing Web sites, one browser isn’t enough At the very least you should install the most current releases of both Netscape and Microsoft Internet Explorer As of this writing, here are the most current versions of these browsers (version numbers may vary by the time you check these sites):

• Netscape 7.1 for Mac OS and Windows:http://channels.netscape.com/ ns/browsers/

• Internet Explorer Service Pack for Windows, Internet Explorer 5.1.7 for Mac OS 8.1 to 9.x, and Internet Explorer 5.2.3 for Mac OS X: www.microsoft.com/downloads/ search.aspx

Professional Web development environments test their Web sites with more browsers than these They test with computers running different operating systems using different monitor configurations and both current and older versions of the most commonly — and sometimes not so commonly — used browsers They this so that their site looks as good as possible for as many visitors as possible

Don’t feel you need to strap yourself financially in the name of good Web design Neither of us maintains the ultimate testing suite at home (the office is a different story, but those costs are a business expense) Although hardware costs money, browsers are typically free, so you should be able to round out your browser-testing suite without spending a dime

In addition to the current releases of Netscape and Internet Explorer, test your sites with a few older versions of the big-name browsers For example, get copies of Netscape 6.x and 4.x There’s still value in having old versions of browser software Netscape made significant changes to their support for Cascading Style Sheets and JavaScript when they released version 6.x, and it’s valuable to know the differ-ences You may be asked to develop a Web site that’s compatible with Netscape Navigator 4.7 — we’ve had stranger requests

Unfortunately, running multiple versions of browsers requires significant planning For instance, you can’t run two versions of Netscape at the same time, and you can’t even install two versions of Internet Explorer on the same Windows machine (the later version overrides the earlier one) That’s one reason why professional Web developers test their sites on more than one machine

Stick with the Internet Explorer version you already have, or upgrade to the latest version and leave it at that Don’t downgrade your home machine; your operating system may be adversely affected Macintosh users seem to be able to install more than one version of Internet Explorer without incident but

(15)

The world of browsers extends beyond that of Netscape and Internet Explorer Opera (www.opera com) is a favorite among those who are fed up with Microsoft and Netscape You can find current ver-sions of many alternate browsers on CNET (www.browsers.com) It is also important to realize that

there are Web surfers who not see the Web but who listen to it instead They use text-to-speech browsers, of which WeMedia Talking Browser (www.wemedia.com) is perhaps the best known

If you ever need to test your work on any flavor of practically any browser ever made, you’ll find a comprehensive archive of browsers at Evolt.org (http://browsers.evolt.org) It contains not only previous versions of Netscape Navigator or Internet Explorer but also some of the earliest browsers ever made — including the world’s first Web browser, Nexus, created by the inventor of HTML, Tim Berners-Lee

(16)

(17)

(18)

Credits vi

About the Authors vii

Introduction ix

Acknowledgments xiii

Part 1: HTML Document Structure 1

Task 1: How to Write a Tag

Task 2: Structuring an HTML Document

Task 3: Defining Meta Tag Keywords

Task 4: Defining Meta Tag Descriptions

Task 5: Defining the Author of a Document Using Meta Tags 10

Task 6: Defining Meta Tag Expiration Dates 12

Task 7: Refreshing Page Content Using Meta Tags 14

Task 8: Defining Meta Tag Robot Values 16

Task 9: Controlling the Document Background 18

Task 10: Working with Source Code in the Browser 20

Part 2: Working with Text 23

Task 11: Working with Headings 24

Task 12: Working with Paragraphs 26

Task 13: Applying Fonts 28

Task 14: Setting the Font Size 30

Task 15: Setting the Font Color 32

Task 16: Applying Physical Styles 34

Task 17: Applying Logical Styles 36

Task 18: Inserting Character Entities 38

Task 19: Using the Preformatted Text Element 40

(19)

Task 21: Setting Document Margins 44

Task 22: Creating an Ordered List 46

Task 23: Modifying Ordered List Styles 48

Task 24: Modifying an Ordered List’s Starting Character 50

Task 25: Creating an Unordered List 52

Task 26: Modifying Bullet Styles 54

Task 27: Nesting Lists 56

Task 28: Creating Definition Lists 58

Part 3: Working with Images 61

Task 29: Inserting Images 62

Task 30: Controlling Image Alignment and Spacing 64

Task 31: Resizing Images Using Photoshop Elements 66

Task 32: Optimizing GIF Images Using Photoshop Elements 68

Task 33: Optimizing JPEG Images Using Photoshop Elements 70

Task 34: Optimizing PNG Images Using Photoshop Elements 72

Part 4: Audio and Video 75

Task 35: Embedding Audio Files 76

Task 36: Adding Background Sounds 78

Task 37: Embedding Video 80

Task 38: Embedding Java Applets 82

Part 5: Hyperlinks 85

Task 39: Defining Hyperlinks 86

Task 40: Defining Pathnames 88

Task 41: Creating mailto Links 90

Task 42: Linking to Named Anchors 92

Part 6: Building Tables 95

Task 43: Defining Tables 96

Task 44: Working with Table Borders 98

Task 45: Spanning Cells 100

Task 46: Aligning Table Elements 102

Task 47: Defining Dimensions for Table Elements 104

Task 48: Working with Table Background Properties 106

Task 49: Nesting Tables 108

(20)

Part 7: Working with Forms 113

Task 51: Defining Form Elements 114

Task 52: Formatting Text Fields 116

Task 53: Formatting Password Fields 118

Task 54: Formatting Text Areas 120

Task 55: Formatting Check Boxes 122

Task 56: Formatting Radio Buttons 124

Task 57: Formatting Selection Menus 126

Task 58: Formatting Selection Lists 128

Task 59: Formatting File Fields 130

Task 60: Formatting Submit and Reset Buttons 132

Task 61: Using Graphic Images for Submit Buttons 134

Task 62: Using Hidden Fields 136

Task 63: Specifying the Focus Order of Form Controls 138

Task 64: Using Field Sets 140

Part 8: Working with Frames 143

Task 65: Defining Frameset Documents 144

Task 66: Specifying Frame Dimensions 146

Task 67: Specifying Border Properties 148

Task 68: Controlling Frame Margins and Scroll Bars 150

Task 69: Nesting Framesets 152

Task 70: Targeting Frames 154

Task 71: Providing noframes Content 156

Task 72: Working with Inline Frames 158

Part 9: Cascading Style Sheets 161

Task 73: Writing Style Rules 162

Task 74: Creating an Embedded Style Sheet 164

Task 75: Creating an External Style Sheet 166

Task 76: Defining Style Classes 168

Task 77: Defining the font-family Property 170

Task 78: Defining the font-size Property with Keywords 172

Task 79: Defining the font-size Property with Lengths 174

Task 80: Working with Font Styling 176

Task 81: Using the Font Property Shorthand 178

Task 82: Working with Foreground and Background Colors 180

Task 83: Controlling Character and Word Spacing 182

(21)

Task 85: Defining the text-decoration Property 186

Task 86: Defining the text-transform Property 188

Task 87: Controlling Text Alignment and Indentation 190

Task 88: Working with Background Images 192

Task 89: Defining CSS Padding Properties 194

Task 90: Defining Border Style Properties 196

Task 91: Defining Border Width Properties 198

Task 92: Defining Border Color Properties 200

Task 93: Using the Border Property Shorthand 202

Task 94: Working with Margin Properties 204

Task 95: Defining Element Dimensions 206

Task 96: Working with the float Property 208

Task 97: Controlling List-Item Bullet Styles 210

Task 98: Controlling List-Item Number Styles 212

Task 99: Creating Layers with Absolute Positions 214

Task 100: Creating Layers with Relative Positions 216

Task 101: Defining a Layer’s Clipping Area 218

Part 10: Simple JavaScript 221

Task 102: Preparing Documents for Scripting 222

Task 103: Inserting Simple Time Stamps 224

Task 104: Changing Content Based on Time 226

Task 105: Writing to the Browser’s Status Bar 228

Task 106: Hiding E-mail Addresses from Spammers 230

Task 107: Preloading Images 232

Task 108: Creating Simple Image Rollovers 234

Task 109: Creating Simple Pop-up Windows 236

Part 11: Adding Third-Party Elements 239

Task 110: Adding a Free Google Search Bar 240

Task 111: Adding a Free News Ticker 242

Task 112: Adding a Web Poll 244

Task 113: Becoming an Amazon.com Associate 246

Task 114: Adding a Free Hit Counter 248

Task 115: Adding Weather Data to Your Site 250

Part 12: TextPad 253

Task 116: Downloading and Installing TextPad 254

(22)

Task 118: Moving Around in Text 258

Task 119: Selecting Code 260

Task 120: Using the Clipboard 262

Task 121: Managing Files 264

Task 122: Using the Find and Replace Tools 266

Task 123: Searching for Strings in Multiple Files 268

Task 124: Finding Matching Brackets 270

Task 125: Using the Spelling Checker 272

Task 126: Working with the Document Selector 274

Task 127: Creating Workspaces 276

Task 128: Working with the Clip Library 278

Task 129: Editing Clip Libraries 280

Task 130: Downloading Clip Libraries 282

Task 131: Configuring TextPad with Web Browsers 284

Task 132: Configuring an HTML Validator 286

Task 133: Creating Keystroke Macros 288

Task 134: Creating a Tag-Wrapping Macro 290

Task 135: Working with Color Syntax Checking 292

Part 13: Working with BBEdit 295

Task 136: Downloading and Installing BBEdit 296

Task 137: Configuring BBEdit for Web Site Development 298

Task 138: Creating New HTML Documents 300

Task 139: Using the Tag Maker Edit Tag Tools 302

Task 140: Formatting Text 304

Task 141: Creating Lists 306

Task 142: Inserting Images 308

Task 143: Creating Tables 310

Task 144: Building Forms 312

Task 145: Working with Frames 314

Task 146: Defining CSS Font Properties 316

Task 147: Defining CSS Text Properties 318

Task 148: Defining CSS Background Properties 320

Task 149: Defining CSS Padding and Margin Properties 322

Task 150: Defining CSS Border Properties 324

Task 151: Defining CSS Box Properties 326

Task 152: Validating HTML 328

Task 153: Using BBEdit Utilities 330

(23)

Task 155: Working with File Groups 334

Task 156: Setting Menu Keys 336

Task 157: Modifying Color Syntax Checking 338

Task 158: Modifying HTML Color Preferences 340

Part 14: Working with HomeSite 343

Task 159: Exploring the HomeSite Environment 344

Task 160: Creating a New Project 346

Task 161: Organizing a Project with Folders 348

Task 162: Starting a New HomeSite Document 350

Task 163: Creating and Using Web Page Templates 352

Task 164: Inserting and Converting Files 354

Task 165: Finding and Inserting Tags and Attributes 356

Task 166: Cleaning Code with CodeSweeper 358

Task 167: Editing Cascading Style Sheets with the Style Editor 360

Task 168: Previewing in External Browsers 362

Task 169: Formatting Body Text 364

Task 171: Checking the Spelling 368

Task 172: Adding a Horizontal Rule 370

Task 173: Searching an HTML Document 372

Task 174: Replacing Web Page Content 374

Task 175: Inserting an Image 376

Task 176: Using the Image Map Editor 378

Task 177: Inserting Tags Automatically 380

Task 178: Inserting Tables 382

Task 179: Building Framesets 384

Task 180: Creating Forms 386

Task 181: Determining Document Weight 388

Task 182: Validating and Verifying Your Code 390

Task 183: Customizing HomeSite 392

Task 184: Using Auto-Backup 394

Task 185: Establishing Deployment Options 396

Task 186: Deploying Files and Folders 398

Part 15: Working with Dreamweaver 401

Task 187: Assigning Preview Browsers 402

Task 188: Defining Sites 404

(24)

Task 190: Establishing Page Properties 408

Task 191: Setting Code View Options 410

Task 192: Working with Code Snippets 412

Task 193: Inserting and Formatting Text 414

Task 195: Proofing Page Text 418

Task 196: Using Find and Replace to Edit Page Content 420

Task 197: Importing Word HTML 422

Task 198: Importing Data Tables from Other Applications 424

Task 199: Inserting and Formatting Images 426

Task 200: Inserting Flash Text 428

Task 201: Inserting Flash Buttons 430

Task 202: Testing and Formatting a Flash Button 432

Task 203: Assigning an External Image Editor 434

Task 204: Creating Image Maps 436

Task 205: Creating Image Rollovers 438

Task 206: Building Navigation Bars 440

Task 207: Creating Tables 442

Task 208: Modifying an Existing Table 444

Task 209: Creating Forms 446

Task 210: Working with Frames 448

Task 211: Working with Layers 450

Task 212: Creating Style Sheets 452

Task 213: Using Behaviors 454

Task 214: Using the Preload Images Behavior 456

Task 215: Using the Open Browser Window Behavior 458

Task 216: Using the Validate Form Behavior 460

Task 217: Using the Set Text for Status Bar Behavior 462

Task 218: Working with Assets 464

Task 219: Setting Up a Remote Host 466

Task 220: Downloading and Uploading Files 468

Task 221: Using Check In/Check Out 470

Part 16: Working with FrontPage 473

Task 222: Setting Up a Web Site 474

Task 223: Creating and Rearranging Blank Web Pages 476

Task 224: Naming and Saving Pages 478

Task 225: Viewing and Changing Page Properties 480

(25)

Task 227: Creating a New Theme 484

Task 228: Creating and Using Templates 486

Task 229: Inserting and Formatting Text 488

Task 230: Proofing and Improving Web Page Text 490

Task 231: Inserting Clip Art and Pictures 492

Task 232: Adding Alternative Text to Images 494

Task 233: Drawing and Formatting Shapes and Lines 496

Task 234: Adding Flash Content to Web Pages 498

Task 235: Creating WordArt Images 500

Task 236: Adding Navigation Bars 502

Task 237: Inserting and Aligning Page Banners 504

Task 238: Creating Interactive Buttons 506

Task 239: Changing Page Backgrounds and Colors 508

Task 240: Creating Bulleted and Numbered Lists 510

Task 241: Applying Borders to Text 512

Task 242: Applying Shading to Text or Blank Lines 514

Task 243: Inserting Tables 516

Task 244: Adding and Deleting Table Rows, Columns, and Cells 518

Task 245: Splitting and Merging Table Cells 520

Task 246: Resizing and Reformatting Table Cells 522

Task 247: Populating a Table with Graphics and Text 524

Task 248: Creating Frames 526

Task 249: Adding Layers 528

Task 250: Building Page Bookmarks 530

Task 251: Setting Up Keywords and Page Description Text 532

Task 252: Publishing a FrontPage Web Site 534

(26)

Task 1: How to Write a Tag

Task 2: Structuring an HTML Document Task 3: Defining Meta Tag Keywords Task 4: Defining Meta Tag Descriptions

Task 5: Defining the Author of a Document Using Meta Tags Task 6: Defining Meta Tag Expiration Dates

Task 7: Refreshing Page Content Using Meta Tags Task 8: Defining Meta Tag Robot Values

(27)

How to Write a Tag

Prior to computer-assisted publishing, you wrote notes to the manuscript’s typesetter directly in the document — hence the phrase to mark up In an electronic text document, like a Web page, you can’t scribble in the margins; you need another mechanism That mechanism is the tag Hypertext Markup Language is based on tags that mark up text-based documents They instruct Web browsers how to display content What we’ll look at in this task is the basic

syntax (grammatical rules) for writing HTML tags.

1. To indicate where a given element begins, place the appropriate tag before it This consists of a certain abbreviation sandwiched by the less-than (<) and greater-than (>) symbols For example, to mark up a paragraph, precede the text with the opening-paragraph tag (<p>), as shown in Listing 1-1

<p>She stretched herself up on tiptoe, and peeped over the edge of the mushroom, and her eyes immediately met those of a large blue caterpillar, that was sitting on the top, with its arms folded, quietly smoking a long hookah, and taking not the smallest notice of her or of anything else

Listing 1-1:Placement of the opening-paragraph tag

2. To indicate where an element ends, place the corresponding closing tag at the end This looks the same as the opening tag, except for the addition of the forward slash, as shown in Listing 1-2

<p>She stretched herself up on tiptoe, and peeped over the edge of the mushroom, and her eyes immediately met those of a large blue caterpillar , that was sitting on the top, with its arms folded, quietly smoking a long hookah, and taking not the smallest notice of her or of anything else.</p>

Listing 1-2:Placement of the closing-paragraph tag

notes

• When HTML was first cre-ated, the standard practice was to write tags in upper-case Over time, this stan-dard changed to lowercase to mimic the syntax of pro-gramming languages Browsers currently treat uppercase and lowercase code identically However, Extensible Hypertext Markup Language (XHTML), which is destined to replace HTML, is case-sensitive, so XHTML-compliant browsers will see

<P>and <p>as different tags To make sure your code is always XHTML-compliant, write your code in lowercase

• The majority of tags in HTML come in pairs: the opening and closing tags Together, these tags form a container around the page content they define, indi-cating to your Web browser the beginning and end of a particular element

• Not all HTML tags have a corresponding closing tag Some tags only have an opening one These empty tagsare used to define elements that don’t have logical beginnings and endings For instance, the line-break tag is written as just <br />(there is no closing </br>tag)

(28)

tip

• If what you see when you test your work in a browser doesn’t correspond to the code you thought you wrote, chances are you just missed a space between a tag character and its attribute, forgot an equal sign, or omitted a quotation mark

3. When you define a tag’s attributes, which are its individual properties, enter them inside the opening tag and separate them by spaces The closing tag doesn’t get any attributes For instance, the attribute for aligning a paragraph is written, simply enough, as align Add it to the opening tag as shown in Listing 1-3

<p align>She stretched herself up on tiptoe, and peeped over the edge of the mushroom, and her eyes immediately met those of a large blue caterpillar , that was sitting on the top, with its arms folded, quietly smoking a long hookah, and taking not the smallest notice of her or of anything else.</p>

Listing 1-3:The opening paragraph tag and its align attribute

4. To set the attribute equal to an appropriate value, define that value by using an equal sign and quotation marks, as shown in Listing 1-4

<p align=”right”>She stretched herself up on tiptoe, and peeped over the edge of the mushroom, and her eyes immediately met those of a large blue caterpillar , that was sitting on the top, with its arms folded, quietly smoking a long hookah, and taking not the smallest notice of her or of anything else.</p>

Listing 1-4:A properly defined attribute that right-aligns the paragraph text

Figure 1-1 shows how this paragraph appears in the browser

Figure 1-1:The sample paragraph rendered by Internet Explorer

Task 1

cross-reference

(29)

Structuring an HTML Document

The simple document template that you are about to build can be used again and again as the starting point for every page you create All HTML docu-ments share this identical underlying structure — a kind of backbone onto which you build your unique page content As you learned in the previous task, most HTML tags come in pairs which define the content within them HTML refers to these as container tags An HTML document’s basic structure is really just a series of large containers, inside of which you define the two main sections of your page: the document head and the document body

1. Open your text editor and begin a new blank document

2. Type the tag <html>at the top of the document This tag begins the document’s primary container It defines the type of document you’re creating: an HTML document

3. This opening <html>tag requires a closing tag, so hit Enter (or

Return) twice to move down a few lines and then enter the closing tag, </html> Your document should appear like this:

4. Place your cursor on the line between the opening and closing tags Type the tag <head>, which defines the head section of the document

5. Hit Enter (Return) twice and then type </head> Your document

should now resemble Listing 2-1

</head> </html>

Listing 2-1:The head section of your HTML document

notes

• Indenting the tags for the document title, as we’ve done in Listing 2-2, has no impact on the way the code is rendered by a browser However, it greatly improves the readability of your code by others, includ-ing yourself

• The head section defines information about the document that doesn’t get displayed in the browser window You’ll learn how to define much of this type of content in Tasks 3–8

(30)

cross-reference

• Many text editors have fea-tures that write these initial document tags for you See Part 12: TextPad; Part 13: Working with BBEdit; and Part 14: Working with HomeSite

6. To create the document title, which appears in the title bar of the browser window, enter <title>and </title>between the head tags of your document, as shown in Listing 2-2 For example, entering <title>HTML in 10 Simple Steps or Less</title>

produces what you see in Figure 2-1

<title>HTML in 10 Simple Steps or Less</title>

</head> </html>

Listing 2-2:Defining the document title

Figure 2-1:The document title displayed on the title bar of the browser 7. The last element to add to your document template is the body

sec-tion Between the closing </head>and the closing </html>tags, enter opening and closing body tags, as shown in Listing 2-3

<title> HTML in 10 Simple Steps or Less </title> </head>

<body>

</body> </html>

Listing 2-3:An HTML document with head and body sections defined 8. Save your document You can give it a name like blank.htmland

then use it each time you want to start a new document by opening it, making changes, and resaving the file with a different name

(31)

Defining Meta Tag Keywords

Adocument’s head section often contains descriptive information about the document, referred to as metadata Using the <meta>tag and its various

attributes, you can define such document properties as the author, the expiration date, document key words, and descriptions When search engines that support metadata read your document, they can use this information to index it in order to return your page when someone does a search on subjects matching the key-words you have defined

1. In the head section of your document, below the document title, enter the <meta>tag, as shown in Listing 3-1

<title>HTML in 10 Simple Steps or Less</title> <meta>

</head>

Listing 3-1:Inserting the <meta> tag

2. Add the nameattribute to the <meta>tag and set it equal to

“keywords”, as shown in Listing 3-2

<title>HTML in 10 Simple Steps or Less</title> <meta name=”keywords”>

</head>

<body>

</body> </html>

Listing 3-2:The name attribute set equal to “keywords”

caution

• If you repeat yourself by using the same or similar keywords, for example “stamp, stamps, stamp collecting,” some search engines may view this as a spamming tactic and rank your page low, or not at all

(32)

tips

• The object is not to supply every conceivable keyword you can think of but to tailor your keywords to the specific information con-tained in the document Keywords can be single words as well as two- or three-word phrases

• Work your keywords into your document titles and body text The first word in your document title should be referenced early in your list of keywords, too, so you probably shouldn’t start page titles with words like “The.” Any keyword that appears in the text of your document shouldn’t be repeated more than seven times in that page

3. Insert a space and add the contentattribute, as shown in Listing 3-3

<title>HTML in 10 Simple Steps or Less</title> <meta name=”keywords” content>

</head>

<body>

</body> </html>

Listing 3-3:Adding the content attribute

4. Set the contentattribute equal to a comma-separated list of key-words pertinent to your page’s subject matter, as shown in Listing 3-4

</head>

<body>

</body> </html>

Listing 3-4:Defining keywords for the <meta> tag

5. Because the <meta>tag is an empty tag, you want to make sure that the code is both XHTML-compliant and still recognizable to browsers that don’t yet support XHTML To that, conclude the tag with a forward slash (/), placing a space between the last entry in the tag and the forward slash:

(33)

Defining Meta Tag Descriptions

Search engines use the <meta>tag’s description of the document for indexing and ranking purposes Some search engines also display the description entries underneath the links on results pages Because this text is meant for both human and search engine readability, be sure to write it in a way that entices people to click to your site

1. In the head section of your document, below the document title, insert another <meta>tag

2. Add the nameattribute to your <meta>tag and set it equal to

“description”, as shown in Listing 4-1

<body>

</body> </html>

Listing 4-1:Specifying that this <meta> tag contains a document description 3. Press the Spacebar and add the contentattribute, which accepts

your description, as shown in Listing 4-2

<body>

</body> </html>

Listing 4-2:Adding the content attribute

note

• What you enter for the

nameand content attrib-utes defines something called a property/value pair The nameattribute defines what the property is, and the content

attribute defines the value of that property

(34)

tip

• In search engines that make use of <meta>tags, it is this descriptive text, combined with the text you place between your title tags, that potential site visitors see in their search results Your primary key-word or keykey-word phrase for this document should be part of your description text You don’t want to pack the description with key-words, or be heavy-handed with text that reads like a late-night infomercial Remember that this text is for human consumption; there’s a reason why infomercials aren’t regarded positively as sources of objective information

4. Set the contentattribute equal to a short piece of descriptive text, as shown in Listing 4-3

<body>

</body> </html>

Listing 4-3:Completing the property/value pair of a <meta> tag description 5. To make the <meta>tag both XHTML-compliant and still

recog-nizable to browsers that don’t yet support XHTML, insert a space and forward slash at the end of the tag, as shown:

Task 4

cross-reference

(35)

Defining the Author of a Document Using Meta Tags

If you want to put your John Hancock on your document, <meta>tags allow you

to this quite simply To date, none of the search engines that take advantage of metadata specifically target author information, but supplying it does clearly mark who the content author is and who is responsible for updating the page

1. Enter a <meta>tag into the head section of your document, setting the nameattribute equal to author, as shown in Listing 5-1

<body>

</body> </html>

Listing 5-1:Set the name attribute equal to”author”

2. Follow the nameattribute and authorvalue with the content

attribute:

• If you search the Internet for information concerning metadata, you’ll find more than a few sites offering to maintain your <meta>

tags and guarantee high search engine rankings — for a small fee Perhaps they’ve published a book or online document that contains the “secrets” of preparing <meta>tags Buyer beware: All this infor-mation is publicly available (how you think they got it?), so you can find it out for yourself Realize, too, that as of this writing the most popular search engine in use is Google, which does notmake use of metadata whatsoever

(36)

tip

• You can also include an e-mail address for the content value

3. Set the contentattribute equal to the name of the author, as seen in Listing 5-2

</head>

<body>

</body> </html>

Listing 5-2:The content attribute set to the author’s name

4. To make the <meta>tag both XHTML-compliant and still recog-nizable to browsers that don’t yet support XHTML, insert a space and forward slash at the end of the tag, as shown:

Task 5

cross-reference

(37)

Defining Meta Tag Expiration Dates

The default behavior of most browsers is to cache (a fancy word for save) the pages it visits so that if you request the page again, it can pull it quickly from your computer’s hard drive instead of pulling it off the Internet, which might take more time Although most browsers allow users to control this behavior, as a developer you can specify the date on which the current content of your page expires From that point on, browsers visiting the site will have to connect to your server to get the latest version You can also instruct browsers not to cache your Web pages at all

1. Insert a <meta>tag in the head section, setting the nameattribute

equal to expires, as shown in Listing 6-1

Listing 6-1:Setting the name attribute equal to expires 2. Insert the contentattribute as shown:

3. Set the contentattribute equal to the expiration date, in Greenwich Mean Time (GMT), as shown in Listing 6-2

4. To prevent browsers from caching your documents at all, enter a

note

• Greenwich Mean Time (GMT) format uses the three-character abbrevia-tions for the days of the week (Mon, Tue, Wed, Thu, Fri, Sat, Sun), followed by the day, month, full year, and time in hours: minutes:seconds Of course, it helps if you know what your local time translates to in GMT You can find out at www greenwichmeantime.com

Task 6

caution

(38)

cross-reference

• See Task to learn how to use meta tags to refresh page content

</head>

<body>

</body> </html>

Listing 6-2:Expressing the expiration date in GMT

<body>

</body> </html>

Listing 6-3:Preventing a browser from caching your page with a special <meta> tag 5. To make these <meta>tags both XHTML-compliant and still

rec-ognizable to browsers that don’t yet support XHTML, insert a space and forward slash at the end of each tag:

(39)

Refreshing Page Content Using Meta Tags

It’s possible to modify a browser’s behavior using <meta>tags In this task,

you’re going to generate code that has the same effect as hitting the browser’s refresh button You’ll also see how this same code can force the browser to load another document

1. In the head section of your document, below the document title, enter a new <meta>tag

2. Add the http-equivattribute and set it equal to refresh, as shown in Listing 7-1

<body>

</body> </html>

Listing 7-1:Inserting the http-equiv attribute

3. Follow the http-equivattribute and refreshvalue with the contentattribute and set it equal to the number of seconds you want the page to remain static before refreshing, as shown in Listing 7-2 In this example, the page will refresh every five seconds

(continued) note

• Use the http-equiv

attribute in place of the

nameattribute when the action being taken retrieves data using the Hypertext Transfer Protocol (http://)

(40)

<body>

</body> </html>

Listing 7-2:Setting the number of seconds to wait before a forced refresh 4. To force the browser to load another document after the refresh time

elapses, follow the refresh rate value with a semicolon and enter

url=pathname, where pathnameequals the file path to a document

on your Web server or a complete URL to a document on another site, as shown in Listing 7-3

</head>

<body>

</body> </html>

Listing 7-3:Supplying the URL of another document you want the browser to load after the forced refresh

5. To make your code both XHTML-compliant and still recognizable to browsers that don’t yet support XHTML, insert a space and for-ward slash at the end of the <meta>tag:

(41)

Defining Meta Tag Robot Values

Arobot is a type of program that search engines use to browse Web site

docu-ments and update their databases Robots that make use of <meta>tag

infor-mation read the metadata and index it for the search engine You can control how much or how little of your site a robot reads using the following attributes and values for the <meta>tag

1. Enter a <meta>tag in the head section of your document, below the document title

2. Define the nameattribute and set it equal to robots, as shown in Listing 8-1

<body>

</body> </html>

Listing 8-1:Setting the name attribute equal to robots

note

• The reasons for allowing a robot to crawl your site are obvious You want the search engine to explore your site fully in order to index everything, baring it all for public consumption However, there are times when you don’t want this to happen; for example, if you have pages you don’t want the world knowing about yet, like ones you’re in the process of testing, or pages that contain information you only want a limited audience to know about

(42)

3. To instruct robots to read your entire page and follow all the links within it, follow the nameattribute and robotsvalue with the content

attribute and set it equal to all, follow, as shown in Listing 8-2

<head>

Listing 8-2:Code allowing robots to read the entire page and follow all links 4. To instruct robots to read your page, but refrain from following the

links within it, set the contentattribute equal to all, nofollow:

5. To prevent robots from reading your page at all, set the content

attribute equal to none:

6. Insert a space and forward slash at the end of the <meta>tag to make sure your code is both XHTML-compliant and still recogniz-able to browsers that don’t yet support XHTML:

(43)

Controlling the Document Background

You can specify a document’s background color or background image using two different attributes of the <body>tag Background colors simply fill the

entire document Background images are tiled by the browser, meaning they are repeated left to right, top to bottom, filling up the visible space of the browser window

1. To define a background color for a document, add the bgcolor

attribute to the <body>tag, as shown here:

<body bgcolor

2. Set the bgcolorattribute equal to a hexadecimal color value or

pre-defined color name Listing 9-1 shows a document with a black back-ground color defined in hexadecimal notation Figure 9-1 shows the result in a browser

<title>Background Color</title> </head>

<h1>Here we have a black background with white text </h1>

</body> </html>

Listing 9-1:Setting the bgcolor attribute (and text color)

3. To specify a background image, add the backgroundattribute to the

<body>tag, as shown here:

<body background

4. Set the backgroundattribute equal to the pathname of the image

file on your Web server Listing 9-2 provides a code sample of a doc-ument that makes use of a tiling background texture graphic Figure 9-2 displays the result in a browser

note

• The default body text color is controlled with the text

attribute of the <body>

tag To learn more, see Task 15

(44)

cross-references

• To see a hexadecimal color chart and learn more about hexadecimal notation, see our Web site at www.wiley com/compbooks/ 10simplestepsorless

• Each listing here shows an example of a heading tag To learn more, see Task 11

<title>Background Images</title> </head>

<body background=”images/bg_stone.jpg”> <h1>Isn’t this a nice stone background?</h1> </body>

</html>

Listing 9-2:The background attribute

Figure 9-1:White text on a black background

Figure 9-2:White text over a stone background

(45)

Working with Source Code in the Browser

All major Web browsers allow you to view the source code of documents you view — an extremely useful feature For example, imagine you’re surfing the Internet and you come across a page you’re really impressed with To see how it was built, just view the source HTML code Granted, if this book is your first foray into HTML you may not understand what you’re looking at, but you will in time Each browser has slightly different commands and it supplies slightly dif-ferent options Here’s how you can view source code using Netscape Navigator and Microsoft Internet Explorer

1. While viewing a page in Netscape Navigator, go to the View menu and select Page Source This opens the Source window, as shown in Figure 10-1 From here you can examine the source code, copying and pasting the code into a text editor if you wish

Figure 10-1:The Source window in Netscape Navigator

2. To save the source code from the Source window, select File➪Save Page As and enter a filename

3. In Microsoft Internet Explorer, select View➪Source This opens the source code of the document in Notepad, as shown in Figure 10-2

4. To save the source code, choose File➪Save As from the Internet Explorer window This opens the Save Web Page dialog box shown in Figure 10-3

5. In the Save Web Page dialog box, set the Save As Type pop-up menu to Web Page Complete, as shown in Figure 10-4

notes

• While it’s fine to copy source code to examine and learn from, not plagiarize another devel-oper’s HTML You could run into potential legal issues with the site’s owner

• Because Notepad is a text editor, you can make changes to the code right there Of course, if you’re viewing a Web page on the Internet, changes you make to the code won’t have an effect on the actual Web site

(46)

tips

• If you are viewing a page in Internet Explorer that’s located on your computer, you can open the HTML document in Notepad, make edits, and choose Save As from Notepad’s File menu, and add a htm or html extension to the file By clicking the browser’s refresh button, you’ll see your changes take effect

• Internet Explorer offers an extremely useful feature for copying an entire Web page to your computer that not only saves a copy of the HTML document but also saves all the images and other media into a folder beside the document This allows you to later open the file locally and see the document in its entirety If you then make changes, you can see how they affect all the content Simply choose Save As, and select Web Page, Complete from the Save As Type menu in the dialog box

6. Choose a location on your hard drive to save the file and click Save A copy of the HTML document and a folder containing all the asso-ciated images and media are saved to the location you chose

Figure 10-2:Source code in Notepad

Figure 10-3:The Save Web Page dialog box in Internet Explorer

Figure 10-4:Choosing Web Page Complete in the Save As Type menu

(47)

(48)

Task 11: Working with Headings Task 12: Working with Paragraphs Task 13: Applying Fonts

Task 14: Setting the Font Size Task 15: Setting the Font Color Task 16: Applying Physical Styles Task 17: Applying Logical Styles Task 18: Inserting Character Entities

Task 19: Using the Preformatted Text Element Task 20: Using the Blockquote Element Task 21: Setting Document Margins Task 22: Creating an Ordered List Task 23: Modifying Ordered List Styles

Task 24: Modifying an Ordered List’s Starting Character Task 25: Creating an Unordered List

Task 26: Modifying Bullet Styles Task 27: Nesting Lists

(49)

Working with Headings

The following series of tags create document headings akin to those in newspa-pers and magazines, or the task headings you see in this book There are six levels of headings, ranging from a heading (the largest) to a heading (the smallest)

1. To format a word or phrase as a heading, place an opening heading tag in front of it, as shown in Listing 11-1

<h1>This is a Heading <h2>This is a Heading <h3>This is a Heading <h4>This is a Heading <h5>This is a Heading <h6>This is a Heading

Listing 11-1: A series of opening heading tags

2. Place a corresponding closing heading tag after the word or phrase, as shown in Listing 11-2 Figure 11-1 shows how these six headings appear in the browser

<h1>This is a Heading 1</h1> <h2>This is a Heading 2</h2> <h3>This is a Heading 3</h3> <h4>This is a Heading 4</h4> <h5>This is a Heading 5</h5> <h6>This is a Heading 6</h6>

Listing 11-2: A series of corresponding closing heading tags

3. The heading tag’s only allowable attribute is align Its possible val-ues are left, right, and center To align a heading, insert the

alignment attribute within the heading tag, as shown here:

4. Set your alignattribute equal to the desired alignment Here we use the centeralignment The result appears in Figure 11-2

<h1 align=”center”>Heading - Centered</h1> note

• Heading alignment is deprecated in XHTML You should use Cascading Style Sheets instead (see Part 9) to control a head-ing’s alignment

(50)

tip

• These heading tags indi-cate a subject’s level of importance For example, if a heading marks the introduction to a main topic, then a subtopic would be indicated with a heading A subtopic of a heading topic would be a heading 3, and so on

Figure 11-1:Six levels of HTML headings

Figure 11-2:A center-aligned heading

Task 11

cross-reference

(51)

Working with Paragraphs

HTML only recognizes single spaces between characters Other than a single tap on the Spacebar, HTML has little regard for how you physically type your paragraphs What HTML does recognize is tags to format paragraphs This task shows you how to format basic paragraph text

1. To indicate the beginning of a paragraph, enter an opening <p>tag

in the <body>section of your code, as shown in Listing 12-1

<body>

<p>

</body> </html>

Listing 12-1: Starting a paragraph in the body of the document

2. To mark the end of a paragraph, place the closing </p>tag at the end of your paragraph, as shown in Listing 12-2

<title>Defining and Aligning Paragraphs</title> </head>

<body>

<p>HTML only recognizes single spaces between characters Other than a single tap on the space bar, HTML has little regard for how you type things What it does have regard for is tags.</p>

</body> </html>

Listing 12-2: Inserting text between the opening and closing paragraph tags

notes

• Enclosing text in paragraph tags does not produce any eye-catching effects in your browser Embellishments come from style sheets or other tags Browsers have traditionally rendered para-graphs with white space before and after

• The alignattribute is the

<p>tag’s only attribute By default, a paragraph (and just about everything else in HTML) appears left-aligned However, para-graphs sometimes fall inside other elements that include their own alignment settings For example, table cells (covered in Part 6) specify horizontal alignment with aligntoo Therefore, to force left-alignment of a given paragraph, set its

alignattribute to left

Task 12

caution

(52)

cross-reference

• In XHTML, alignment is a style consideration; therefore Cascading Style Sheets (CSS) controls it, which we cover in Part CSS makes the align

attribute obsolete The Word Wide Web Consortium (W3C) uses the term

deprecatedto describe obsolete elements and attributes, meaning their use is disapproved of To learn more about XHTML, see www.wiley com/compbooks/ 10simplestepsorless/

3. To align a paragraph, add the alignattribute to the paragraph tag:

4. Set the alignattribute equal to left, right, center, or

justified, as shown in Listing 12-3 The effect, when previewed in a browser, appears in Figure 12-1

<p align=”right”>HTML only recognizes single spaces between characters Other than a single tap on the space bar, HTML has little regard for how you type things What it does have regard for is tags.</p>

Listing 12-3: Defining the align attribute

Figure 12-1:A right-aligned paragraph

(53)

Applying Fonts

The <font>tag determines which font is applied to your text By itself, this tag has no effect on text You specify the fonts as a value of the face

attribute The most important thing you need to understand about specifying fonts in HTML is that you don’t really determine the font that visitors see — the browsers The best you can achieve is specifying the font you want them to use If people don’t have the proper fonts installed on their computers, the browsers will use whatever font is installed as the default Because you’re at the mercy of visitors’ font collections, you can define a list of fonts, giving them a choice of three or four similar fonts If they don’t have your first choice, perhaps they have your second choice or, failing that, your third

1. To specify the font for a range of text, type an opening <font>tag

and add a faceattribute to it as shown in Listing 13-1

<body>

</body> </html>

Listing 13-1: Beginning the <font> tag

2. Set the faceattribute equal to your first font choice, as shown here:

3. Type a comma and follow your first font choice with your second, third, and fourth (if necessary):

<p> <font face=”Arial, Helvetica, sans-serif”> note

• In XHTML, the <font>tag is deprecated Cascading Style Sheets (see Part 9) are the recommended method for formatting type

Task 13

caution

• When placing <font>

tags in paragraphs, place the opening font tag after the opening <p>tag and the closing </font>

tag in front of the closing

(54)

tips

• When you define the font list, use three or four that share similar characteris-tics For example, here we’ve defined “Arial, Helvetica, sans-serif”

because Arial and Helvetica look alike Arial is a com-mon Windows sans-serif font, while Helvetica is a common Macintosh sans-serif font By including the term “sans-serif” in the list, we’re telling the browser to use the system’s default sans-serif font if it does not have the other two fonts installed

• “What are serifs for any-way?” Serifs aid the eye in moving from letter to letter and word to word So serifs are pretty useful in print On a computer monitor, it’s a different story: Serifs actually muddy the text and make it harder to read For this reason, sans-serif fonts are the best choice for the body text on your Web site Microsoft, for example, created the sans-serif font Verdana specifi-cally to address this issue

4. Directly following the <font>tag, enter the text you want it to affect:

<p> <font face=”Arial, Helvetica, sans-serif”>By itself, this tag has no effect on the text you apply it to You actually specify your chosen fonts as a value of the face attribute The most important thing to understand about specifying fonts in HTML is that you don’t really

determine the font the visitor sees – their computer does

5. At the end of this range of text, place a closing </font>tag:

<p> <font face=”Arial, Helvetica, sans-serif”>By itself, this tag has no effect on the text you apply it to You actually specify your chosen fonts as a value of the face attribute The most important thing to understand about specifying fonts in HTML is that you don’t really determine the font the visitor sees – their computer does.</font> </p>

The effect of this is to display the text in this paragraph in Arial, as shown in Figure 13-1

Figure 13-1:A paragraph set in Arial

(55)

Setting the Font Size

To specify the font size, use the sizeattribute of the <font>tag The size

attribute accepts a numeric value from one of two scales: the absolute or rela-tive scale

1. To define the font size for a preexisting <font>tag, simply add a size attribute set equal to your chosen value Figure 14-1 shows what the following code looks like in your browser

<p> <font face=”Arial, Helvetica, sans-serif” size=”2”>All text affected by this font tag is now set to size

2.</font> </p>

<p> <font face=”Arial, Helvetica, sans-serif”>All text affected by this font tag is defaulting to the browser’s base font size, because no size attribute is

defined.</font> </p>

Figure 14-1:A font size of 2, in contrast to undefined font size

2. You can control the font size by simply adding a <font>tag with just

the sizeattribute defined The following code changes the font size of the word here to Figure 14-2 shows what it looks like in your browser

<p> <font face=”Arial, Helvetica, sans-serif” size=”2”>All text affected by this font tag is now set to size Except this word <font size=”5”>here</font>, around which I’ve nested a second font tag with a different size setting.</font> </p>

<p> <font face=”Arial, Helvetica, sans-serif”>All text affected by this font tag is defaulting to the browser’s base font size, because no size attribute is

defined.</font> </p>

3. To define the base font size for your entire document, enter the

<basefont>tag just below the opening <body>tag and set its size

attribute to a value from to 7:

Figure 14-2:The word hereaugmented by a second font size value

notes

• The absolute scale ranges from (the smallest) to (the largest) A size value of is the same as the browser’s current default font size (also called the

basefont size) Provided the user hasn’t modified the default browser set-tings, this makes a size equal to 12-point text The rest of the scale con-verts as follows: = 7.5pt., = 10pt., = 13.5pt., = 18pt., = 24pt., and = 36pt

• The relativescale runs from –7 to +7 and sets the font size in relation to the base font of the browser So set-ting the font size to +1 makes the text appear one size larger than the base font size This is why you use a relative font size value in conjunction with an absolute base font value Otherwise, you have no idea what the browser is using for the base font size

Task 14

caution

• The relative scale doesn’t allow you to display a font size outside of the absolute scale of through The browser’s base font size always equals a font size of 3, regardless how the user sets the point value Therefore, you cannot apply a relative size value that adds to more than or sub-tracts to less than from the current font size you’ve set The relative scale is best used in conjunction with the

(56)

tips

• Because a user can change the default font size setting, the absolute scale isn’t exactly “absolute”; any font size value you define with it will still be relative to the user’s base font size If this seems like too much to worry about, just remember that size is really tiny and size is really big Size is the most common because it’s small enough to allow you to fit plenty of text into a page, while being large enough so that most folks don’t have to squint to read it

• Remember that the browser’s default font size is equal to a base font value of So entering

is the same as entering nothing at all Just like the <font>tag, the

<basefont>tag is deprecated in HTML 4.0 through the current XHTML standard, in favor of CSS (see Part 9)

4. With the <basefont>tag and sizeattribute defined, use the relative scale to increase or decrease individual regions of text Figure 14-3 shows what this code looks like in your browser

<p>All text in this document will default to size <font size=”+3”>T</font>he first letter in this sentence has now been punched up to a size using a +3 size value </p>

Figure 14-3:The Tincreased to a font size of using a relative +3 value 5. To make a region of text one size larger than the surrounding text,

wrap it inside the <big>and </big>tags You can make this

addi-tive by using multiple <big>tags To make the text smaller, use

<small>and </small>tags Figure 14-4 shows what the code

looks like in your browser

<p> We’ve made this word three times

<big><big><big>bigger</big></big></big> by nesting it inside three sets of big tags.</p>

<p> <font size=”5”>We’ve made this word three times <small><small><small>smaller</small></small></small> by nesting it inside three sets of small tags.</font></p>

Figure 14-4:Multiple <big> and <small> tags with their cumulative effects

Task 14

cross-reference

(57)

Setting the Font Color

In the <font>tag, the faceattribute sets the typeface and the sizeattribute sets the text size It shouldn’t come as a big surprise then that the color

attribute sets the text color In HTML, colors can be defined using hexadecimal

notation (a six-character code for expressing the combined red, green, and blue

values of affected pixels) or a number of predefined English equivalents There are different methods for defining font color, with or without using the <font>

tag’s colorattribute

1. To define the font color for a preexisting <font>tag, simply insert the colorattribute and set it equal to your chosen color value, as

shown in Listing 15-1

<body>

<p> <font face=”Arial, Helvetica, sans-serif” size=”2” color=”#0000FF”>This text has been turned blue using

hexadecimal notation, which uses six characters preceded by a pound sign (#) </font> </p>

</body> </html>

Listing 15-1: Use of hexadecimal value #0000FF to turn a paragraph blue 2. You can also control the font color by simply adding a <font>tag

with only a colorattribute defined, as shown in Listing 15-2

<title>Setting Font Color</title> </head>

<body>

<p> <font face=”Arial, Helvetica, sans-serif” size=”2” color=”#0000FF”>All text affected by this font tag is blue Except this word <font color=”#00FF00”>here</font>, around which I’ve nested a second font tag turning the word green.</font> </p>

</body> </html>

Listing 15-2: Use of hexadecimal value #00FF00 to turn a word green

note

• Although the HTML stan-dard only recognizes 16 predefined color words (Black, Green, Silver, Lime, Gray, Olive, White, Yellow, Maroon, Navy, Red, Blue, Purple, Teal, Fuchsia, Aqua), browsers like Internet Explorer (http:// msdn.microsoft.com/ workshop/author/dhtml/ reference/colors/colors asp) and Netscape (http:// devedge.netscape.com/ library/manuals/1998/ htmlguide/colortab.html) can support a much broader list

(58)

• You can find a hexadecimal color chart at www.wiley com/compbooks/ 10simplestepsorless

• To learn more about hexadecimal notation and supported English equivalents, go to www wiley.com/compbooks/ 10simplestepsorless

3. To use predefined color names instead of hexadecimal values, set the

colorattribute to equal the word color of your choice, as shown in Listing 15-3

<body>

<p> <font face=”Arial, Helvetica, sans-serif” size=”2” color=”Purple”>This text is making use of the word “Purple” – one of the 16 recognized colors in the HTML

standard.</font></p>

<p> <font face=”Arial, Helvetica, sans-serif” size=”2” color=”DarkOliveGreen”>This text is making use of the word “DarkOliveGreen” (no spaces) – one of the many colors browsers like Internet Explorer and Netscape Navigator recognize So much for standards compliance, huh?</font></p>

</body> </html>

Listing 15-3: Use of the color names Purple and DarkOliveGreen

4. To define the default text color for your entire document, instead of relying on the <font>tag, use the textattribute of the <body>tag, as shown in Listing 15-4

<p> All text in this document defaults to dark red If you prefer words over hexadecimal notation, the value would coincidentally be “DarkRed”.</p>

</body> </html>

Listing 15-4: Body text set to hexadecimal color #8B0000, which means dark red

(59)

Applying Physical Styles

Your typical word processor has buttons for bolding, italicizing, and underlin-ing text — and probably some other stylistic options hidunderlin-ing in a menu some-where In HTML, these are called physical styles because the tags used to create them imply specific rendering by the browser

1. To create bold text, wrap the chosen word or phrase with <b>and </b>tags:

2. To italicize text, place the text between <i>and </i>tags:

<i>Italic</i>

3. To underline text, place the text between <u>and </u>tags:

<u>Underline</u>

4. To strike through text, use the <s>and </s>tags:

<s>Strikethrough </s>

5. To produce a monospace (code-like) formatting, place the text between <tt>and </tt>tags (stands for “teletype”):

<tt>Teletype</tt>

6. Although not technically considered physical styles in HTML, the ability to superscript and subscript text also exists To use these styles, insert text between the following tag pairs: <sup></sup>for

super-script and <sub></sub>for subscript:

<p>Superscript: a<sup>2</sup> x b<sup>2</sup> = c<sup>2</sup></p>

<p>Subscript: H<sub>2</sub>O</p>

Listing 16-1 shows all these formatting codes and Figure 16-1 shows what the results should look like in a browser

caution

• Because most browsers format text-based hyper-links with an underline, most site visitors instinc-tively consider underlined text as hyperlinks Avoid underlining text to empha-size it Use italics instead

(60)

• In XHTML, styles are taken care of by Cascading Style Sheets (see Part 9) Consequently, physical style tags have been deprecated in favor of logical styles (see Task 17)

• You guessed it — this type of formatting is deprecated in HTML To learn how to accomplish this sort of thing in CSS, see Part

<title>Physical Styles</title> </head>

<body>

<p><b>Bold</b> <br> <i>Italic</i> <br> <u>Underline</u> <br> <s>Strikethrough</s> <br> <tt>Teletype</tt>

</p>

<p>Superscript: a<sup>2</sup> x b<sup>2</sup> = c<sup>2</ sup></p>

<p>Subscript: H<sub>2</sub>O</p> </body>

</html>

Listing 16-1: Physical styles set in HTML

Figure 16-1:Physical styles rendered in the browser

7. You can combine these tags to double their effect For example, if you want to make text both bold and italic, simply surround your chosen text with the bold and italic opening and closing tags Figure 16-2 shows the resulting effect in your browser

<p><b><i>Bold and italicized</i></b></p>

<p><i><b>The order of tags makes no difference</b></i></p>

Figure 16-2:Nested physical styles

(61)

Applying Logical Styles

The physical styles you learned about in Task 16 apply a specific appearance to text Logical style tags format text according to the text’s meaning without implying a specific appearance This sounds like two different things, but because the HTML standard leaves the rendering of logical styles up to the browser, logi-cal styles, to date, produce the same effect on text as physilogi-cal styles

1. To place emphasis on a chosen word, place the text between <em>

and </em>tags:

<em>Emphasis</em> looks <i>italic</i>

2. To place stronger emphasis on a chosen word, use the <strong>and </strong>tags:

<strong>Strong</strong> looks <b>bold</b>

3. To define a section of text as a code sample, use the <code>and

</code>tags:

<code>Code</code> looks like <tt>teletype</tt>

4. To define a sample of literal characters, use the <samp>and </samp>tags:

<samp>Sample</samp> looks like <tt>teletype</tt> too

5. To define text as it should be typed by a user, for example in an instructional manual, use the <kbd>and </kbd>tags (short for

“keyboard”):

<kbd>Keyboard</kbd> also looks like <tt>teletype</tt>

6. To define text as a variable name, for example in a programming lan-guage, use the <var>and </var>tags:

<var>Variable</var> looks <i>italic</i>

7. To format text as a term definition, use the <dfn>and </dfn>tags:

<dfn>Definition</dfn> also looks <i>italic</i>

8. To define a citation, as out of a book, use the <cite>and </cite>

tags:

<cite>Cite</cite> is another logical style that looks <i>italic</i>

Figure 17-1 shows the results of the code listed in Listing 17-1

note

• Logical styles are favored over the deprecated physi-cal styles not only in XHTML but also in HTML and 4.01

(62)

• To learn more about the HTML and CSS standards, visit the World Wide Web Consortium at www.w3.org

• To control how the browser displays text formatted with a specific tag, learn about Cascading Style Sheets (see Part 9)

<title>Logical Styles</title> </head>

<body>

<p>

<em>Emphasis</em> looks <i>italic</i> <br> <strong>Strong</strong> looks <b>bold</b> <br> <code>Code</code> looks like <tt>teletype</tt> <br> <samp>Sample</samp> looks like <tt>teletype</tt> too <br> <kbd>Keyboard</kbd> also looks like <tt>teletype</tt> <br> <var>Variable</var> looks <i>italic</i> <br>

<dfn>Definition</dfn> also looks <i>italic</i> <br> <cite>Cite</cite> is another logical style that looks <i>italic</i>

</p>

</body> <html>

Listing 17-1: Logical styles set in HTML

Figure 17-1:Logical styles rendered in the browser

(63)

Inserting Character Entities

There are about 100 keys on your keyboard, but with all those choices, how you type something obscure like the copyright symbol (©)? In a word proces-sor, you insert a symbol from some menu or dialog box In HTML, these sym-bols are referred to as character entities or special characters Instead of tags, character entities are rendered numerically, beginning with an ampersand (&) and pound sign (#) and ending with a semicolon This task shows you how to render a number of the more common character entities

1. Type ©to display the copyright symbol:

2. Type ®to produce the registered symbol:

3. Type to produce the trademark symbol:

<p>Alpha-Gizmo</p>

4. Enter ¼to produce the fraction one-quarter:

<p>¼ teaspoon salt</p>

5. Enter ½to produce the fraction one-half:

<p>½ teaspoon sugar</p>

6. Enter ¾to produce the fraction three-quarters:

<p>¾ cup of honey</p>

7. Enter ¢to produce the cent symbol:

8. Enter £to produce the British Pound symbol:

9. Enter ¥to produce the Japanese Yen symbol:

10. Enter €to produce the European Union’s Euro symbol:

Listing 18-1 provides examples of these symbols and Figure 18-1 dis-plays the results in a browser

note

• Character entities are also referred to as special characters

(64)

tip

• Most character entities have an English-language equivalent For example, the copyright symbol can also be written as © and the registered sign as

®

<title>Character Entities</title> </head>

<body>

<p>This book is copyrighted ©2003</p> <p>My Favorite cola is Pepsi®</p> <p>My company name: Alpha-Gizmo</p> <p>¼ teaspoon salt in my soup.</p> <p>½ teaspoon sugar in my tea.</p> <p>¾ cup of honey is way too much!</p> <p>I remember when a pay phone cost 10¢</p> <p>A $500,000 house only costs £300,084.44 </p> <p>Which is an astronomical ¥59,037,844.65 </p> <p>But a moderate €436,305.17 </p></body> </html>

Listing 18-1: Character entities in HTML

Figure 18-1:Character entities rendered in the browser

Task 18

cross-reference

(65)

Using the Preformatted Text Element

There is a way to make a browser display text almost exactly as you type it in your HTML document The <pre>tag tells the browser that text is

prefor-matted, which means it should leave all white space as entered In other words, if

you hit the Spacebar seven times, the browser will respect those seven spaces Typically, browsers display any text written between <pre>tags with a mono-spaced font

1. Begin the region of your document to preformat with an opening

<pre>tag

2. Enter the text you want preformatted into the document

3. Close the preformatted region with a closing </pre>tag, as in the following code Figure 19-1 shows how it looks in your browser

<pre>

| Mon | Tues | Wed | Thurs | Fri | | | | | Calculus | X | | X | |

-English | | X | | X |

-Latin | X | | X | |

</pre>

Figure 19-1:Code inside the <pre> tag rendered in the browser

4. If you choose, you can include <font>tags to control the size and color, as shown in the following code Figure 19-2 shows how the modified code appears in the browser (except for the color, of course)

| Mon | Tues | Wed | Thurs | Fri | | | | | Calculus | X | | X | |

-English | | X | | X |

-Latin | X | | X | |

</font> </pre> note

• Though the tags will then move the original text out of position, the browser doesn’t display space occupied by tags so there won’t be any effect on alignment

(66)

tip

• Monospaced fonts give each character identical spacing, which allows you to line up text evenly If you include a faceattribute in your <font>tag and don’t specify a monospaced font, the alignment of preformatted elements may be off

Figure 19-2:Nesting <font> tags within preformatted text to enlarge the point size 5. To include logical or physical style tags inside <pre>tags, first enter

your text and test it in a browser to check your alignments Then go back to the code and insert the tags around your text choices, as shown in the following code Figure 19-3 shows how it looks in the browser

| | | | |

<b>Calculus</b> | X | | X | | -<b>English</b> | | X | | X | -<b>Latin</b> | X | | X | | </font></pre>

Figure 19-3:Physical styles (bolding) applied to preformatted text

Task 19

cross-reference

(67)

Using the Blockquote Element

The <blockquote>tag designates quoted text, specifically long quotations of paragraph length or more Browsers typically render text wrapped in

<blockquote>tags as an indented paragraph

1. To designate a block of quoted text, place an opening <blockquote>

tag at the beginning of the text to be quoted

2. To conclude the block of quoted text, place a closing </blockquote>

tag at the end of the text to be quoted A completed example is shown in Listing 20-1 Figure 20-1 shows the results in the browser

<title>The Blockquote Element</title> </head>

<h1>Edgar Allan Poe</h1>

<p>The following is a quote from www.poets.org:</p>

<blockquote><p>Edgar Allan Poe was born in Boston,

Massachusetts, on January 19, 1809 Poe’s father and mother, both professional actors, died before the poet was three and John and Frances Allan raised him as a foster child in Richmond, Virginia John Allan, a prosperous tobacco

exporter, sent Poe to the best boarding schools and later to the University of Virginia, where Poe excelled academically After less than one year of school, however, he was forced to leave the University when Allan refused to pay his gambling debts.</p></blockquote>

</body> </html>

Listing 20-1: Code example of a block of quoted text

Figure 20-1:A block-quoted paragraph rendered in the browser

(68)

tips

• A quick and easy way to ensure a printable margin for a Web page is to block-quote the entire HTML document by placing opening and closing

<blockquote> tags just inside the opening and closing <body>tags

• Using multiple

<blockquote>tags to indent text is deprecated by the W3C in favor of Cascading Style Sheets (see Part 9)

3. You can increase the amount of indentation using multiple

<blockquote>tags, as shown in Listing 20-2 Figure 20-2 shows the results in the browser

<title>the Blockquote Element</title> </head>

<h1>Edgar Allan Poe</h1>

<p>The following is a quote from www.poets.org:</p>

<blockquote><blockquote><p>Edgar Allan Poe was born in Boston, Massachusetts, on January 19, 1809 Poe’s father and mother, both professional actors, died before the poet was three and John and Frances Allan raised him as a foster child in Richmond, Virginia John Allan, a prosperous tobacco exporter, sent Poe to the best boarding schools and later to the University of Virginia, where Poe excelled academically After less than one year of school, however, he was forced to leave the University when Allan refused to pay his gambling debts.</p></blockquote></blockquote>

</body> </html>

Listing 20-2: Using multiple <blockquote> tags to increase the indentation of a quoted paragraph

Figure 20-2:Multiple <blockquote> tags that have a cumulative effect

Task 20

cross-reference

(69)

Setting Document Margins

You can control the document margin with four nonstandard attributes of the

<body>tag Two of the attributes were introduced by Microsoft Internet

Explorer; the other two by Netscape Navigator When defined together, you’re guaranteed margin control, not only in these two major browsers but also in their competitors

1. In your text editor, open an existing document whose margins you want to modify or just begin a new document

2. To define the margins of your document, first enter Internet Explorer’s two margin attributes leftmarginand topmarginin

your <body>tag:

<title>Non-standard Margin Attributes</title> </head>

</html

3. Follow these two attributes with Netscape Navigator’s two attributes,

marginwidthand marginheight:

4. Set each attribute equal to a numeric value (representing pixels), as shown in Listing 21-1 The value you specify for leftmarginand

marginwidthset the width of both your left and right margins

Your topmarginand marginheightvalues set the width of both the top and bottom margins Figure 21-1 shows the result of this code in your browser

(70)

tips

• Setting your margins to zero allows your design to run to the edges of the browser window

• If being printer-friendly is an issue for your document, understand that the reason some Web pages don’t print nicely is because there’s content running out to the edges of the screen, which corresponds to where the printer rollers grab the paper If you define sufficiently wide margins, there will be plenty of room for the rollers to grab without interfering with your page content

<title>Non-standard Margin Attributes</title> </head>

<p>The values we’ve set for the four margin attributes result in left and right margins that are 100 pixels wide, and top and bottom margins that are 50 pixels high.</p>

</body> </html>

Listing 21-1: A document with 50-pixel margins set for top and bottom, and 100-pixel margins set for the left and right sides

Figure 21-1:Specified margin settings rendered in the browser

Task 21

cross-reference

(71)

Creating an Ordered List

If you use a word processor to make a numbered list of items, all you have to is click a button and start typing Creating them in HTML is almost as easy: Use the <ol>(ordered list) and <li>(list item) tags Both are container tags with opening and closing forms As the name implies, you use ordered lists to render information of a procedural nature — for example, the items in this task

1. In the body of your HTML document, enter an opening <ol>tag to mark where the list begins

2. Proceed to the next line, indent and enter an opening <li>tag to mark the start of the first list item

3. Follow the opening <li>tag with the text for your list item

4. Finish the list item with a closing </li>tag

5. Continue this process, entering as many list items as required to complete your ordered list There is no limit to the number of items a list can have

6. To conclude your ordered list, enter a closing </ol>tag after the last

list item

7. To format the text of your list, place an opening <font>tag above

the list and a closing </font>tag after the list This way the entire list — numbers and all — receives your formatting

An example of an ordered list is shown in Listing 22-1 The page this code produces appears in Figure 22-1

note

• Browsers indent list items by default, not because we’ve done so in the code Indenting your code just makes it easier to read

Task 22

caution

• Even though browsers allow you to omit them, always use closing </li>

(72)

cross-reference

• Bulleted lists (also called unordered lists) aren’t radi-cally different from ordered lists in their construction To construct an unordered list, see Task 25

<title>Ordered Lists</title> </head>

<body>

<h1>Honest Shampoo Instructions</h1>

<li>Apply to wet hair</li>

<li>Massage gently into hair and scalp</li> <li>Rinse thoroughly</li>

<li>Repeat steps - to ensure you burn through a bottle of this stuff a week.</li>

</ol> </font> </body> </html>

Listing 22-1: An ordered list

Figure 22-1:An ordered list rendered in the browser

(73)

Modifying Ordered List Styles

By default, an ordered list renders items with Arabic numerals: 1, 2, 3, and so on You can modify the style of list items by defining the type attribute of the

<ol>tag The typeattribute for the <ol>tag accepts five possible values

1. To create an uppercase alphabetical list, set the typeattribute equal to “A”:

2. To create a lowercase alphabetical list, set the typeattribute equal

to “a”:

3. To create an uppercase Roman numeral list, set the typeattribute equal to “I”:

4. To create a lowercase Roman numeral list, set the typeattribute

equal to “i”:

5. To create an Arabic numeral list, set the typeattribute equal to “1”:

6. To see how each of these styles appears in a browser, enter the code shown in Listing 23-1 into your text editor and test it in a browser Your results should look similar to Figure 23-1

Figure 23-1:List styles rendered in the browser

notes

• Lists force a blank line after them, just like paragraphs and headings

• In theory, you shouldn’t apply the typeattribute to the <li>tag However, browsers allow you to get away with using it, not that you’d ever have a reason to so

(74)

• By nesting a series of ordered lists with different styles, you can create highly detailed formal out-lines To learn more about nested lists, see Task 27

• Ordered list styles can also be controlled via Cascading Style Sheets To learn more about CSS, see Part

<title>Effects of the Type Attribute</title> </head>

<body>

<li>First this</li> <li>Then that</li>

<li>And then, everything else</li> </ol>

<li>I’m not going to this</li> <li>Or that</li>

<li>Or anything else</li> </ol>

<li>She Conquered</li> </ol>

<li>This is the same as not defining a type at all</li> <li>You might use this type in a nested list</li> <li>Nested lists are covered a few tasks ahead</li> </ol>

</body> </html>

Listing 23-1: Different ordered list styles

(75)

Modifying an Ordered List’s Starting Character

HTML tries to be logical Consequently, the attribute you define to specify the starting number or character in an ordered list is named start This attribute allows you to maintain an unbroken ordering sequence even if you have to separate lists with paragraph text You specify the value of an individual list item using the valueattribute

1. Enter an ordered list as discussed in Tasks 22 and 23

2. Follow the list with paragraph text

3. Create a second ordered list, defining the startattribute and setting

it equal to the number you want the second list to begin with Listing 24-1 shows a complete document sample, and Figure 24-1 shows the sample code displayed in the browser In this example, the start

attribute equals 4, which forces the second list to begin with

<title>Ordered Lists</title> </head>

<body>

<p>To shampoo, follow these steps:</p> <ol>

<li>Apply to wet hair</li>

<li>Massage gently into hair and scalp</li> <li>Rinse thoroughly</li>

</ol>

<p>Then, to condition proceed by:</p>

<li>Wringing excess water from hair</li>

<li>Apply conditioner and massage gently into hair from roots to ends</li>

<li>Rinse thoroughly with warm water</li> </ol>

</body> </html>

Listing 24-1: Specifying an ordered list’s starting number

note

• While the values of the

startand value attrib-utes are always defined with an integer, the corre-sponding list item charac-ter may not be numerical For example, if the ordered list’s typeattribute equals A (creating an uppercase A, B, C list), setting the

startor valueattribute equal to begins the list with “C.” In an uppercase Roman numeral list (type=“I”), the list would begin with III, etc

(76)

Figure 24-1:A continuous ordered list, separated by text, rendered in the browser 4. You can achieve the same effect using the valueattribute of the first

<li>tag, as shown here Subsequent <li>tags follow in order

<ol>

<li value=”4”>Wringing excess water from hair</li> <li>Apply conditioner and massage gently into hair from roots to ends</li>

<li>Rinse thoroughly with warm water</li> </ol>

(77)

Creating an Unordered List

What word processing calls a bulleted list, HTML refers to as an unordered

list You create these using the <ul>tag and the same <li>tag that

ordered lists use

1. In the body of your HTML document, enter a <ul>tag

2. Begin your list items by proceeding to the next line, indenting, and entering an <li>tag

3. Follow the opening <li>tag with the text for your list item and end

it with a closing </li>tag

4. Continue this process, entering list items to complete your unordered list

5. End the unordered list with a closing </ul>tag An example of an

unordered list appears in Listing 25-1 The page this code produces appears in Figure 25-1

notes

• Just like ordered lists, there’s no limit to the number of list items you can have

• As with the ordered lists, browsers indent list items by default, not because we’ve done so in the code Indenting your code makes it easier to read

• The HTML standard con-tains a directory and menu list, created with <dir>

and <menu>tags Like ordered and unordered lists, they used <li>tags for their list items The directory list was supposed to create multicolumn lists, and the menu list was meant for single columns Unfortunately, no browser ever attempted to render these lists Using these tags simply creates an unordered list

Task 25

caution

• Always use closing </li>

(78)

cross-reference

• The default bullet style for unordered lists is typically a small filled-in disc To see how to modify bullet styles, see Task 26

<title>Unordered Lists</title> </head>

<body>

<h1>Points to Remember</h1>

<ul>

<li>Don’t run with scissors</li> <li>Don’t play with your food</li> <li>Don’t forget to wash your hands</li> </ul>

</body> </html>

Listing 25-1: An unordered list

Figure 25-1:An unordered list rendered in the browser

(79)

Modifying Bullet Styles

Just like the <ol>tag, the <ul>tag accepts the typeattribute In this case, the

typeattribute governs the style of the bullet that precedes each list item The

possible values for the typeattribute are disc, square, and circle

1. Create an unordered list as described in Task 25

2. To create square bullets, set the typeattribute equal to square:

3. To create circular bullets, set the typeattribute equal to circle:

4. To create disc bullets, set the typeattribute equal to disc:

5. To see how each of these styles appears in a browser, enter the code shown in Listing 26-1 into your text editor and test it in a browser Your results should look similar to Figure 26-1

Figure 26-1:Different bullet styles rendered in the browser

notes

• Browsers typically display “square” as a small filled-in square, “circle” as a small circle outline, and “disc” as a small filled-in circle

• The disc style is the com-mon browser default value, meaning it’s the style most browsers display if you don’t define the type

attribute

Task 26

caution

• The HTML standard states that disc,square, and

(80)

tip

• Although the HTML and XHTML standards don’t recognize this practice, most browsers allow you to define the typeattribute for the individual <li>

tags as well

<title>Unordered Lists</title> </head>

<body>

<h1>Points to Remember</h1>

<li>Ordered lists have alpha-numeric styles</li> <li>Unordered lists have bullet styles</li> <li>Each list controls these styles with the

<tt>type</tt> attribute</li> </ul>

<ul>

<li>Unordered lists default to a disc style</li> <li>Ordered lists default to Arabic numerals</li> <li>We still have a third kind of list to learn</li> </ul>

</body> </html>

Listing 26-1: Code showing different bulleted list styles

Task 26

cross-reference

(81)

Nesting Lists

Nesting simply means to place elements inside other elements When you nest lists, you insert a new ordered or unordered list between list items in an existing list The existing list is called the parent list and the second, nested list is called the child list You can, in turn, nest a third list within the second, a fourth within the third, and so on By nesting lists in this fashion, each list becomes a sublist of the parent list item above it This technique is ideal for creating formal outlines

1. In the body of an HTML document, begin the parent list by enter-ing an <ol>or <ul>tag

2. Define an appropriate typeattribute

3. Move to the next line, indent, and insert list items for your primary topics using <li>and </li>tags

4. End the parent list with a closing </ol>or </ul>tag

5. Beneath a list item, nest a child list whose items represent subcate-gories of the parent list item above it Set an appropriate type

attribute for this list’s <ol>or <ul>tag also

6. Nest subsequent lists for each new subcategory level you require A full code example appears in Listing 27-1 Figure 27-1 shows how the document appears in the browser

Figure 27-1Nested lists rendered in the browser

note

• Each nested list is indented beneath its parent list item The deeper you nest, the deeper the list is indented

(82)

tip

• By indenting your code, and even adding blank lines before and after nested lists, you can easily locate where each new list begins and ends

<title>Nested Lists</title> </head>

<body>

<li>Subordinate Idea</li> <ol type=”1”>

<li>Supporting Detail</li> <ol type=”a”>

<li>Example</li> <li>Example</li> </ol>

<li>Supporting Detail</li> </ol>

</ol> </ol> <ul>

<li>Type defaults to disc</li> <ul>

<li>First nest defaults to circle</li> <ul>

<li>Third nest defaults to square </li> <ul>

<li>and continues as square until you set a

</ul> </ul> </ul>

</body> </html>

Listing 27-1: Example of nested lists

Task 27

cross-reference

(83)

Creating Definition Lists

Definition lists are slightly different than the previous list types you’ve encoun-tered The list items in a definition list consist of two parts: a term and a description Browsers render definition lists by placing the term on one line and indenting the definition underneath it, creating what’s called a hanging indent. You use three pairs of tags to create a definition list: <dl>and </dl>tags define where the list begins and ends, <dt>and </dt>tags define the term, and <dd>

and </dd>tags define the term’s definition

1. In the body of your HTML document, enter a <dl>tag to begin your list

2. Begin your term by proceeding to the next line, indenting, and enter-ing a <dt>tag Follow this opening <dt>tag with the first term you

intend to define and finish it with a closing </dt>tag

3. Begin the term’s definition by proceeding to the next line, indenting to be directly under the term, and then entering a <dd>tag

4. Follow this tag with the text that defines the term and close this with a </dd>tag

5. Continue this process, entering as many terms and definitions as you require, as shown in Listing 28-1

<dl>

<dt>The Ordered List</dt>

<dd>Created using the OL element This list should contain information where order should be emphasized.</dd>

<dt>The Unordered List</dt>

<dd>Created using the UL element

Listing 28-1: Example of a definition list

6. End the definition list with a closing </dl>tag An example of a

completed definition list is shown in Listing 28-2 The page this code produces appears in Figure 28-1

caution

• The W3C, which maintains the HTML standard, dis-courages designers from using lists purely as a means of indenting text

(84)

tip

• Definition lists can be used to create written dialog For the term, enter the speaker’s name; for the definition, enter the speaker’s lines

<title>Definition Lists</title> </head>

<body>

<h1>Lists in HTML</h1>

<dl>

<dt>The Ordered List</dt>

<dd>Created using the OL element This list should contain information where order should be emphasized.</dd>

<dt>The Unordered List</dt>

<dd>Created using the UL element This list should be used to express a series of significant points </dd>

<dt>The Definition List</dt>

<dd>Create using the DL element This list should be used to define a list of terms.</dd>

</dl>

</body> </html>

Listing 28-2: A definition list

Figure 28-1:A definition list indenting the definitions beneath each term, thereby creating a hanging indent

Task 28

cross-reference

(85)

(86)

Task 29: Inserting Images

(87)

Inserting Images

When you place the <img>tag in your document’s code, the browser embeds the image file you reference in the document Referencing a specific image file in the <img>tag requires an attribute; the <img>tag — just like the <font>

tag you saw in Part — doesn’t really anything by itself

1. To embed an image, place an <img>tag within the body of your

doc-ument, as shown here:

<img>

2. To specify the image you want displayed, add a srcattribute, setting it equal to the pathname of the image on the server, as shown here:

3. To specify the image’s dimensions, include widthand height

attributes and set them equal to the pixel dimensions of the image:

4. To specify alternative text to be used in place of the image for users with nonvisual browsers, include an altattribute:

5. To place a border around an image, include a borderattribute, set-ting it equal to the border’s thickness in pixels:

6. To render your <img>tag XHTML-compliant, include a space after your last attribute and enter a forward slash, as shown here:

Listing 29-1 shows how each attribute is used Figure 29-1 displays the code in a browser

note

• In the past, when connec-tion speeds were so slow that downloading images was time-consuming, the

altattribute allowed you to give visitors a hint of what the picture was about Today, alternate text is useful for visually impaired visitors who use speaking browsers to expe-rience the Web The inclu-sion of the altattribute is also a federal requirement for making a site compliant with Section 508 (www section508.gov), which states that all govern-ment sites must be handicap-accessible

Task 29

caution

• Don’t simply change an

<img>tag’s widthand

(88)

tips

• An <img>tag with a defined

srcattribute is sufficient for embedding an image in your document However, Web browsers that encounter an

<img>tag stop rendering any code that follows it until they’ve downloaded the image If the connection is poor, the rest of the page sits blank until the image loads, then continues You can miti-gate this by defining the image’s dimensions using the widthand height

attributes These tell the browser how much space to reserve for the image and allow it to continue rendering the rest of the document while the images download

• Because Alt text appears in browsers when images fail to load (for whatever reason), by including the filename of the image in your Alt text, it helps you troubleshoot where missing images are on the Web server Simply make note of the filename, and then make sure you upload that missing file to the server If it’s already present on the server, you can then check to see if it’s become corrupted

<title>Inserting Images</title> </head>

<body>

<font face=”Arial, Helvetica, sans-serif” size=”2”> <b>Daisy and Calvin – the gruesome twosome.</b> </font>

</p> </body> </html>

Listing 29-1: An image with text below it

Figure 29-1:An image with text below it, rendered in the browser

Task 29

cross-reference

(89)

Controlling Image

Alignment and Spacing

Image alignment is controlled with the alignattribute The valuestop, middle, and bottomrelate to the image’s position relative to the surrounding text The values leftand rightcause the image to float to the left or right

margin, wrapping text down the image’s opposite side White space surrounding an image is controlled with the hspaceand vspaceattributes

1. To align an image element, add an alignattribute to the <img>tag

as shown here:

2. To vertically align the top of the image with the top, middle, or bottom of the preceding line of text, set the alignattribute equal to

top, middle, or bottom Figure 30-1 shows the results created by

each value

Figure 30-1:The effects of the align attribute set to top, middle, and bottom, respectively

3. To float an image element to the left or right margin, set the align

attribute equal to either leftor right Figure 30-2 illustrates both

alignments

notes

• Images floated to the left are pinned to the left margin; text wraps around them down the right side When floated to the right, the image is pinned to the right margin and text starts on the left margin, wrapping down the left side of the image

• The hspaceattribute affects the spacing on the left and right side of an image; the vspace

attribute affects the spac-ing above and below the image

• The alignattribute is deprecated in favor of Cascading Style Sheets (see Part 9)

(90)

tips

• The default value of align

is bottom, so using this value is the same as not defining the attribute at all

• The <div>tag is short for “division.” Use it wherever you intend to make a logical division of page content that doesn’t lend itself easily to textual markup, like the <p>tag The <div>

tag’s alignattribute accepts the value center, just as the <p>tag does

• Another way to center any-thing in HTML is to place content between opening and closing <center> </center>tags This practice is deprecated by the World Wide Web Consortium, but it works in all browsers

• You typically modify the white space around an image when it floats amongst text Browsers generally default to an

hspacevalue of 3, while the vspacevalue defaults to

Figure 30-2:Two paragraphs with images floated to the left and right 4. To center an image, wrap the <img>tag inside opening and closing

<div>tags and add an alignattribute to it instead, setting it equal to “center” Figure 30-3 shows the results of centering an image

Figure 30-3:A centered image

5. To increase the amount of white space around an image, add the

hspaceand vspaceattributes and set them equal to a pixel value, as shown in Figure 30-4

Figure 30-4:An image with 25 pixels of horizontal and vertical space added with the hspace and vspace attributes

(91)

Resizing Images Using Photoshop Elements

Image editing is not exactly specific to HTML, but it is important to understand whenever you work with images

Changing an image’s pixel dimensions in an image editor is called resampling As you might guess, decreasing the image’s dimensions — also called

downsampling — deletes data from your image Increasing the dimensions

(resampling up) adds new pixels through a process called interpolation — which looks at existing pixels in the image and determines what the best color values of the added pixels should be In general, resampling up results in a loss of detail

1. To resample an image using Photoshop Elements, first open the file you want to resample by choosing File➪Open from the menu

2. Choose Image➪Resize➪Image Size from the menu This opens the Image Size dialog box (see Figure 31-1)

Figure 31-1:The Image Size dialog box in Adobe Photoshop Elements 3. At the bottom of the dialog box, select the Resample Image option

and choose an interpolation method from the pop-up menu (see Figure 31-2)

Figure 31-2:The Resample Image interpolation pop-up menu

notes

• For Tasks 31–34, we chose to use Adobe Photoshop Elements 2.0 because it’s based on Adobe Photoshop — the most widely used professional image-editing application on the market Currently list-priced at USD $99, it can be found at retailers (educational and other-wise) where discounts and manufacturer’s rebates reduce the price to less than USD $50 Download a 30-day free trial version from www.adobe.com/ products/tryadobe/main jhtml#product=40 If you own a scanner, chances are it came bundled with image editing software which should also be able to handle these tasks

• Bicubic is the most precise interpolation method in Photoshop Element It takes longer to process but it produces the best results Nearest Neighbor is the fastest and, conse-quently, least precise inter-polation method Bilinear falls between Bicubic and Nearest Neighbor, as a medium-quality interpola-tion method

(92)

cross-reference

• Manually resizing an image in this fashion is preferred to simply changing the val-ues of an <img>tag’s

widthand height

attributes See Task 29

4. Click the Constrain Proportions option if it isn’t already checked Doing so maintains the image’s proportions by automatically updat-ing the width or height when you alter one of the dimensions

5. Enter Width and Height values in the Pixel Dimensions fields If you want to use percentages of the current dimensions instead, click the pop-up menus to the right of the Width and Height fields to switch from Pixels to Percent (see Figure 31-3)

Figure 31-3:Choose a unit of measure: pixels or percentage

6. The image’s resulting file size appears at the top of the Image Size dialog box, with the old file size in parentheses Click OK to process your resampling choices and close the dialog box

(93)

Optimizing GIF Images Using Photoshop Elements

Optimizing images results in a tradeoff between achieving the highest quality image with the smallest possible file size In this task, you’ll learn how to optimize images and save them in the Graphic Interchange Format (GIF) This file format is designed to create relatively detailed image files while retaining a small file size, so you can transfer images quickly across the Web

1. To optimize and save an image as a GIF file, open your selected image by choosing File➪Open from the Photoshop Elements menu This displays the Open dialog box From here, locate your image and click the Open button

2. Choose Save for Web from the File menu This opens the Save for Web dialog box (shown in Figure 32-1) The interface displays the original image in one pane and the optimized image in the other Make your optimization adjustments using the tools in the Settings area on the right side of the dialog box

Figure 32-1:The Save for Web dialog box’s Settings tools for GIFs include: Optimization preset menu, File Format menu, Color Reduction Algorithm menu, Dithering Algorithm menu, Transparency check box, Interlaced check box, Colors menu, Dither percentage, and Matte Color

2

54 89

note

• Pattern produces a rectangular dither pattern Diffusion creates a random pattern Noise produces a more random pattern

(94)

tips

• One reason why GIF files (GIFs) are small is because they contain no more than 256 colors Consequently, some pictures are better suited as GIFs than others Color photographs make bad GIFs because they typically contain millions of colors Converting them to GIFs removes most of the colors, making them look like a paint-by-numbers project The best images for converting into GIFs contain a limited number of colors that meet at discreet edges (like logos) GIFs sometimes yield high-quality, black-and-white photos, provided they aren’t too detailed to begin with

• Control-click (Mac) or right-click (Windows) next to the download information to access a menu where you can specify a connection speed to calculate the download time

3. If you want to use one of the optimization presets in Photoshop Elements, make a selection from the presets menu The choices on this menu modify all the tools in the Settings area; they have names like GIF 128 Dithered

4. To choose custom settings, simply use the rest of the tools in the Settings area:

a. Choose GIF from the file format menu

b. Select a color reduction algorithm, a mathematical formula for deciding where and how to remove colors from an image without making it look terrible Choose from among Perceptual,

Selective, Adaptive, Web, or Custom For most purposes, Selective is the best choice

c. To specify manually the maximum number of colors in the image, select a number from the Colors pop-up menu You can enter the value manually or click the arrows to increase or decrease the value one number at a time

d. Use the Dithering Algorithm pop-up menu if you choose to set a dithering algorithm Choose No Dither, Diffusion, Pattern, or Noise Use the Dithering Percentage pop-up menu to specify the amount of dithering

5. Look at the lower-left corner of the optimized image to see what your optimization settings have done to the file size and download time (see Figure 32-2)

Figure 32-2:The optimized file size and download time determined by the Settings area

6. To save your optimized image, click OK In the Save Optimized As dialog box, type a filename and click Save

Task 32

cross-reference

(95)

Optimizing JPEG Images Using Photoshop Elements

JPEG stands for Joint Photographic Experts Group, which is responsible for creating standards for “continuous tone image coding.” An image with contin-uous tone has a virtually unlimited range of colors or shades of gray Whereas GIFs can only handle 256 colors or shades of gray, JPEG images (also called just JPEGs) can display 16,777,215 JPEGs are best suited for color photographs and photorealistic images

1. Open your image in Photoshop Elements and choose File➪Save for Web from the menu to open the Save for Web dialog box

2. Choose a JPEG preset or choose JPEG from the File Format menu (see Figure 33-1)

Figure 33-1:The Save for Web dialog box’s Settings tools for JPEGs include: File format menu, Quality Level menu, and Quality slider

1

note

• When you choose a JPEG preset or choose JPEG from the File Format menu in Photoshop Elements, the Settings tools in the Save for Web dialog box change JPEG quality is a function of choosing a value between and 100: the higher the number, the bet-ter the final image quality, and the higher the file size The Optimization preset menu has three choices for JPEG images: JPEG High, JPEG Medium, and JPEG Low, which correspond to values of 60, 30, and 10, respectively (Find out more about the JPEG format at www.jpeg.org.)

(96)

tip

• Just above the Quality slider sits the Optimized check box The Optimized check box is always selected if you choose an optimization preset Don’t turn it off The option provides enhanced color optimization, resulting in a smaller overall file size Although this enhancement is not supported by older browsers (prior to the 4.0 versions of Netscape Navigator and Internet Explorer), they don’t react adversely to you using it

3. If you prefer a custom setting, you can set the Quality Level menu to Low, High, Medium, or Maximum (see Figure 33-2) A Maximum option equals a value of 80

Figure 33-2:The Quality Level menu

4. If you want to manually set the value, use the Quality slider (see Figure 33-3) A value of gives you the lowest possble image quality with the smallest possible file size A value of 100 gives you the high-est quality image but the larghigh-est possible file size

Figure 33-3:The Quality slider

5. To save your optimized image, click OK

6. In the Save Optimized As dialog box, type a filename and click Save

Task 33

cross-reference

(97)

Task 34 Optimizing PNG Images

Using Photoshop Elements

The Portable Network Graphics (PNG) format was created as a free and more robust alternative to GIF after Unisys, the patent owner of the GIF compres-sion method (called Lempel-Ziv-Welch or LZW), sought royalties from software developers whose programs used it PNG uses a lossless compression algorithm, just like GIF, and supports images with 8- and 24-bit color depths At an 8-bit color depth, PNG and GIF are equal in image quality, although PNG generally results in infinitesimally larger file sizes One reason not to use PNG in place of GIF is if a large proportion of your audience uses browsers prior to version 4.0 of Internet Explorer and Netscape Navigator, which don’t support it

1. Open your image in Photoshop Elements and choose File➪Save for Web from the menu to open the Save for Web dialog box

2. To optimize an image as PNG-8, choose PNG-8 from the File Format menu

3. The PNG-8 Settings options are identical to those for GIF, as you can see from Figure 34-1 To select a color reduction algorithm, choose Perceptual, Selective, Adaptive, Web, or Custom from the Color Reduction Algorithm menu

Figure 34-1:The PNG-8 optimization settings

note

(98)

tip

• Like GIF, PNG-8 supports a maximum of 256 colors; like JPEG, PNG-24 supports 16.7 million colors (Find out more about the PNG format at www.libpng.org/ pub/png/.) You can use PNG-8 in place of GIF if you like, but PNG-24 generally results in larger file sizes than JPEG does This has to with file compression: GIF and PNG compress files by capitaliz-ing on the inefficient method by which image files store their data There’s often unused space inside a file and GIF and PNG formats remove the empty space without deleting information from the file — making their compression methods “lossless” (no data is lost in the compression process)

4. To set a dithering algorithm, choose No Dither, Diffusion, Pattern, or Noise from the Dithering Algorithm menu Use the Dithering Percentage menu to specify the amount of dithering you want

5. Use the Colors menu to set the number of colors in your image

6. If you save an image as PNG-24, the Settings tools display only the File Format menu (see Figure 34-2) Simply select PNG-24

Figure 34-2:The PNG-24 settings

7. To save your optimized image, click OK

8. In the Save Optimized As dialog box, type a filename and click Save

Task 34

cross-reference

(99)

(100)

Task 35: Embedding Audio Files Task 36: Adding Background Sounds Task 37: Embedding Video

(101)

Embedding Audio Files

Browsers can’t play audio files without help from other applications Enter the

plug-in, a piece of software that runs within the browser to expand its

func-tionality Plug-ins are a Netscape creation, but when you have the Netscape browser installed, Microsoft Internet Explorer makes use of them as well As of this writing, the Apple QuickTime plug-in comes installed with Netscape Navigator 7.02, so both Netscape and Internet Explorer, if installed, make use of it when playing embedded sound files

1. In the body of your document, enter an <embed>tag

2. Define a srcattribute and set it equal to the location of the sound

file on the Web server For example:

3. Define widthand heightattributes to display a control panel in the browser window For example:

This creates a control panel 100 pixels wide by 15 pixels high, as shown in Figure 35-1

Figure 35-1:A QuickTime audio control panel

4. To prevent the sound file from playing the very moment the page loads, define an autostart attribute and set it equal to false:

5. To float the control panel amongst text, similarly to an image, define an alignattribute:

• leftfloats the control panel to the left margin and wraps text around it to the right

• rightfloats the control panel to the right margin and wraps text around it to the left

Listing 35-1 shows two embedded sound files, one aligned left and one aligned right Figure 35-2 shows how a browser treats the con-trol panels

notes

• There are a number of different audio file types, some of which are propri-etary and require specific plug-ins The wav format is Microsoft’s proprietary file type and the format is RealAudio’s proprietary format (which requires RealPlayer) Only the mid and mp3 formats are non-proprietary; you can play them in numerous media players

• The control panel’s physical appearance varies depend-ing on the plug-in, browser, and operating system

(102)

tips

• If the autostart

attribute is left undefined or set equal to true, the sound file begins playing the moment the page fin-ishes loading in the browser

• You can find several places to download sound files: www.findsounds.com www.mididb.com www.midifarm.com

<title>Embedding Audio Files</title> </head>

<body>

<p><embed src=”backbeat.mid “height=”35” width=”150” controller=”true” align=”left”>To float the control panel amongst text, similarly to an image, define an align

attribute Setting the align attribute equal to left floats the control panel to the left margin and wraps text around it to the right Setting the align attribute to right floats the control panel to the right margin, and text begins on the left margin, wrapping down the left side of the control panel </p>

<p><embed src=”backbeat.mid “height=”35” width=”150” controller=”true” align=”right”>To float the control panel amongst text, similarly to an image, define an align

attribute Setting the align attribute equal to left floats the control panel to the left margin and wraps text around it to the right Setting the align attribute to right floats the control panel to the right margin, and text begins on the left margin, wrapping down the left side of the control panel.</p>

</body> </html>

Listing 35-1: Using the align attribute of the <embed> tag

Figure 35-2:The control panel treated like an image by most browsers

Task 35

cross-reference

(103)

Adding Background Sounds

There are two ways to define sounds meant to play in the background while visitors browse your site One is a variation on Task 35 and another makes use of Microsoft’s proprietary <bgsound>tag, which only works for Internet Explorer

1. In the body of your document, enter an <embed>tag

2. Define a srcattribute and set it equal to the pathname of the sound file on the Web server

3. Define widthand heightattributes, setting them equal to This constrains the control panel to a single pixel that can be hidden any-where on the page

4. Set the autostartattribute equal to trueso that the sound begins

once the page has successfully loaded

5. Define a loopattribute, setting it equal to the number of times you

want the sound file to play To make the sound play continuously while the page is viewed, set the attribute equal to -1 Listing 36-1

shows a completed <embed>tag

<title>Background Sounds</title> </head>

<body>

</body> </html>

Listing 36-1: The <embed> tag formatted for use as a background sound

cautions

• Before adding background sounds to a document, con-sider whether the effect is truly necessary Many users find such sounds — and the fact that they can’t disable them — extremely annoying

• We recommend that if you must use sound, make it user-selectable Provide a control panel at the very least, as shown in Task 37, and preferably set the

autostartattribute to “false” so the user isn’t hit unexpectedly with a sound

(104)

tip

• Generally avoid using pro-prietary elements like the

<bgsound>tag However, if you’re creating an intranet site — a self-contained site that’s part of an internal network, not the public Web — you can make use of proprietary elements as long as you know that your audience will only be using the one browser that sup-ports it

6. To use Microsoft’s proprietary <bgsound>tag, place the tag inside the <head>section of your document because it references some-thing not specifically displayed in the browser window

7. Define a srcattribute and set it equal to the pathname of the sound file on the Web server

8. Define a loopattribute and set it equal to the number of times you want the sound file to play To have the sound play continuously while the page is viewed, set the attribute equal to -1 Listing 36-2 shows a completed <bgsound>tag

<title>Background Sounds</title> <bgsound src=”bandmarch.mid” loop=”-1”> </head>

<body>

</body> </html>

Listing 36-2: Using the <bgsound> tag to play a background sound

Task 36

cross-reference

(105)

Embedding Video

You can use the <embed>tag to embed video files in a document Just as with sound files, the physical appearance of control panels varies depending on the plug-in required to display the video file, user’s browser, and operating system

1. In the body of your document, enter an <embed> tag where you want the video file to be displayed

2. Define a srcattribute to specify the location of the source file on the Web server

3. Define widthand heightattributes to specify the displayed video’s dimensions

4. Define an autoplayattribute and set it equal to trueto make the video play as soon as the page loads Set it equal to falseto have the

user click a play button to start the video clip

5. Define a controllerattribute, setting it equal to trueto display a

control panel A setting of falsehides the control panel Listing 37-1 shows a completed <embed>tag Figure 37-1 displays the

results in a browser

<title>Embedding Video</title> </head>

<body>

<br>

</body> </html>

Listing 37-1: Using the <embed> tag

notes

• There are a number of dif-ferent video file types, all of which require different plug-ins: the mov format is Apple QuickTime, the wmv format is Windows Media Viewer, the avi format is native Windows video, and mpeg and mpg are non-proprietary formats that can typically be played by a number of plug-ins

• The control panels of differ-ent plug-ins vary greatly and affect the physical size of the clip onscreen

(106)

tip

• If users come to your site and don’t have the neces-sary plug-in, specify the Web site where they can download it (if you know it) using the pluginspace

attribute For example,

pluginspace=” http: //www.apple.com/ quicktime/”

Figure 37-1:A QuickTime clip (top) versus a Windows Media Viewer clip (bottom) 6. Define a loopattribute as follows:

• truemakes the clip play continuously

• falsemakes the clip play only once

• palindromemakes the clip play normally and then play

back-wards, looping continuously

Task 37

cross-reference

(107)

Embedding Java Applets

The scope of this book is not broad enough to teach you how to write your own Java applets Java is a complex programming language that you can use to develop entire applications You can also use it to write small applets embed-ded in Web documents There are all kinds of different applets available free for download on the Internet They include graphics, games, and navigational ele-ments, to name only a few An example of a simple animated graphic is shown in this task The two tags used to embed applets are <applet>and <object> First you need to download an applet

1. Use your favorite search engine to browse for free Java applets until you come across one you’re interested in downloading They are typ-ically packaged in “zipped” archives that you can open with applica-tions like WinZip for Windows and StuffIt for Macintosh

2. Enter an <applet>tag into the body of your document at the point

in the code where you want the applet to appear in the browser window

3. Define a codeattribute and set it equal to the location of the Java source file:

4. Define appropriate widthand heightattributes Exact dimensions

may be specified with the applet instruction you download, or you may specify your own:

5. Using <param>tags, specify parameters supplied by the

program-mer Your ability to this depends on the applet you are using Typically, parameters and definitions appear in the sample you down-load Parameters are controlled with nameand valueattributes, as shown here:

6. Conclude your parameters with a closing </applet>tag, as shown here:

note

• Applets are like little pro-grams; they can take a few seconds to download and run once the page is loaded in the browser

Task 38

cautions

• The <applet>tag is backwards-compatible with older browsers but is also deprecated in favor of the <object>tag Use whichever tag is best for your circumstances: backwards-compatibility or standards-compliance

(108)

tips

• In a compressed archive, you typically get one or more Java source files and a sample HTML document with instructions

• If your applet has no parameters to define, simply place the closing

</applet>tag right after the opening tag

7. To use the <object>tag, insert the opening tag into the body of your document at the point in the code where you want the applet to appear in the browser window

8. In place of the codeattribute, enter a codetypeattribute and set it equal to application/java Enter a classidattribute and set it equal to java: and the source filename (no spaces); include your dimensions, as shown here:

classid=”java:kubik.class” width=”222” height=”77”>

9. Include any parameters just as you would with the <applet>tag and finish with a closing </object>tag Listing 38-1 shows a completed

<title>Java Applets</title> </head>

<body>

classid=”java:kubik.class” width=”222” height=”77”> <param name=”text” value=”HELLO!”>

</body> </html>

Figure 38-1:Example of a Java applet on a Web page

(109)

(110)

(111)

Defining Hyperlinks

Hyperlinks are essential for the Web You create them with the anchor tag,

<a>, yet another tag that requires attributes The attribute that transforms

the little <a>tag into the linking powerhouse that puts the “hyper” in hypertext is href, which stand for hypertext reference The closing anchor tag, as you can

probably guess, is written </a> The opening and closing anchor tags transform the text or images they surround into a region that, when clicked, loads whatever document you specify into the browser window The hrefattribute points to the document you want to load when the link is clicked

1. In the body of an HTML document, locate the text or image tag you want to convert into a link

2. Place an opening anchor tag in front of that text or image tag and define an hrefattribute, setting it equal to the pathname of the file you want to open when the link is clicked, as shown in Listing 39-1

<a href=”bingo.html”>text-link

Listing 39-1: Examples of opening anchor tags

3. Place a closing anchor tag at the end of the text or directly after the image tag you’re turning into a link, as shown in Listing 39-2

</a>

Listing 39-2: Examples of complete anchor tags

4. To format a link so that the document it points to opens in a new browser window, define a target attribute and set it equal to

“_blank”:

<a href=”bingo.html” target=”_blank”>text link</a> note

• By default, browsers under-line text links and place a border around image links

(112)

tips

• Never omit the closing anchor tag Otherwise, the browser has no idea where the linked content ends

• To prevent an image link from displaying a border, set the image tag’s

borderattribute equal to

5. To control the color of text links, define the three following attrib-utes for the <body>tag, setting them equal to hexadecimal or prede-fined color name values:

• linkspecifies the color of links that haven’t been visited

• vlinkspecifies the color of links that have been visited

• alinkspecifies the color of links that are currently active Listing 39-3 shows a sample document Figure 39-1 displays the doc-ument in a browser

<title>Hyperlinks</title> </head>

<br />

</a>

</body> </html>

Listing 39-3: Text and image-based hyperlinks

Figure 39-1:Text and image hyperlinks rendered in the browser

Task 39

• Task 40 covers absolute and relative pathnames

(113)

Defining Pathnames

Whether you’re defining the hrefattribute of the anchor tag, the src

attribute of the image tag, or in any way referencing files within your Web site, you’re working with pathnames A pathname is simply a way to describe the

file structure of your site — how files and folders (also called directories) are laid

out on your computer, and ultimately the Web server Figure 40-1 diagrams a simple structure of files and directories, which the following steps refer to

Figure 40-1:The Yellow directory containing two files (page_1.html and page_2.html) plus two additional subdirectories (Blue and Lavender), each of which contain two files

1. To reference a document in the same directory as the current file, set the hrefattribute equal to the document’s filename For example, to

create a link in page_1.html that opens page_2.html, write the anchor tag as follows:

2. To reference a document inside a directory that’s next to the current file, set the hrefattribute equal to the directory’s name, add a for-ward slash, and follow it with the filename For example, to create a link in page_1.html that opens page_3.html, write the anchor tag as follows:

<a href=”blue/page_3.html”> text or image </a>

yellow

page_1.html page_2.html blue page_3.html page_4.html lavender page_5.html page_6.html

note

• These first four steps create

relative pathnames, which are link references relative to the location of the docu-ment the link is written in

Absolute pathnames refer-ence the fixed Web address or URL (Uniform Resource Locator) of a document, which is covered in Step

(114)

tips

• Each set of periods and a forward slash takes you up one directory higher in the file structure This means that / /filename

takes you up two direc-tories, / / / filenametakes you up three directories, and so on

• The keyboard shortcuts for copying are Ctrl+C (Windows) and Command+ C (Macintosh) Pasting is Ctrl+V (Win) and Command+V (Mac)

3. To move up one directory in the file structure, referencing a docu-ment outside the directory of the current file, precede the filename with two periods and a forward slash For example, to create a link in page_3.html that opens page_1.html, write the anchor tag as follows:

<a href=” /page_1.html”> text or image </a>

4. To reference a document inside a directory that is outside the current file’s directory, precede the filename with two periods and a forward slash, and follow it with the directory name and filename For exam-ple, to create a link in page_5.html that opens page_3.html, write the anchor tag as follows:

<a href=” /blue/page_3.html”> text or image </a>

5. Always use absolute pathnames to link to documents found on some-one else’s Web server The easiest way to gather that information is to open the Web site in a browser, navigate to the exact page you want to link to, copy the URL in your browser’s address bar (see Figure 40-2), and paste it directly into the HTML file, as shown here:

<a href=”http://www.domainname.com/directoryname/ filename.html”> text or image </a>

Figure 40-2:Copying a URL in the browser’s address bar

Task 40

cross-reference

• Pathname values are also used to define the src

(115)

Creating mailto Links

At some point, you’ve probably clicked a link to send an e-mail Doing so opens your e-mail application with a new, properly addressed message win-dow waiting for you to start typing Creating this type of link varies only slightly from what we covered in Task 40

1. In the body of an HTML document, locate the text or image tag you want to make into a link

2. Place an opening anchor tag in front of that text or image tag

3. Define an hrefattribute and set it equal to the mailto: protocol, including the e-mail address the message should go to, as shown here:

4. To predefine the contents of the e-mail’s “Subject” line, follow the e-mail address with a question mark (?), enter the word subject,

and set it equal to the text you want displayed, as shown here:

5. To predefine the body text of the message, follow the subject value with an ampersand (&), enter the word body, and set it equal to the

text you want displayed, as shown in Listing 41-1

<title>Mailto: Links</title> </head>

<body>

<a href=”mailto:robert@limehat.com?subject=Party! RSVP&body=I’ll be there”>Coming to our party?</a>

</body> </html>

Listing 41-1: E-mail link with subject and body predefined

note

• You are not required to define subjectand body

text in a mailtolink

(116)

tips

• Don’t include a space between the mailto

protocol and the e-mail address

• You can include spaces in the values you enter for

subjectand body

6. Place a closing anchor tag (</a>) at the end of the text or directly after the image tag you’re turning into a link When the link is clicked, the user’s e-mail application will open with the address, subject, and body text already filled in, as shown in Figure 41-1

Figure 41-1:The new message window with address, subject line, and body already filled in

(117)

Linking to Named Anchors

You can more than just link to documents and images If you name an anchor tag at a specific place within a document (at the start of a section, for instance) you can specify that exact location in a hyperlink This named anchor effectively becomes a subaddress within the document You name an anchor tag by assigning a value to the name attribute of the <a>tag

1. Enter an anchor tag at a specific line within a document to which you want to link

2. Define a name attribute for the anchor tag, setting it equal to a descriptive term For example:

<a name=”answer_2”><p>A: Push the green Power button on the remote If that fails, check the surge strip.</p></a>

3. To link to this named anchor from within the same document, create an <a>tag and set its hrefattribute equal to the value of the named

anchor Precede the name with a pound sign, as shown here:

4. You can achieve the same effect using the idattribute, which all tags accept For example, in this code sample an idattribute could be

applied to the <p>tag, as shown here:

<p id=”answer_2”>A: Push the green Power button on the remote If that fails, check the surge strip.</p>

The hyperlink would still be defined:

<a href=”#answer_2”> text or image </a>

(118)

tips

• You can insert the closing

</a>tag right after the opening tag, or you can wrap both tags around an entire heading, paragraph, or image Regardless of the option you choose, the line that the opening <a>tag sits on — the first line of a paragraph or the top of the image — determines where the document loads in the browser window

• Frequently Asked Questions (FAQ) pages traditionally use named anchors to link each question within the Table of Contents list to the corresponding answer below Because these doc-uments tend to run very long, designers also place a named anchor at the top of the page and end each answer with a link back to the top anchor so that readers can easily return to the question list without having to scroll all the way back up Figure 42-1 shows this technique used at the World Wide Web Consortium’s site

5. To link to the named anchor or idelement from a document outside the current document, simply append the value to the end of the reg-ular pathname For example, if the named anchor were in a docu-ment named faq.html, the correct pathname value for a link in another document to #answer_2might be written as follows:

<a href=”faq.html#answer_2”> text or image </a>

Figure 42-1 shows an example of named anchor links helping users navigate a long text document

Figure 42-1:The Contents links at www.w3.org/TR/REC-html40/struct/links.html pointing to corresponding paragraphs further down the page (links.html#h-12.2 in this case)

Task 42

cross-reference

(119)

(120)

Task 43: Defining Tables

Task 44: Working with Table Borders Task 45: Spanning Cells

Task 46: Aligning Table Elements

Task 47: Defining Dimensions for Table Elements Task 48: Working with Table Background Properties Task 49: Nesting Tables

(121)

Defining Tables

Atable is a structured element that consists of rows and columns of cells You can place any kind of content you like in these cells: text, images, and even other tables If you can define it in HTML, you can place it inside a table cell There are three sets of container tags required to build any table The <table>

and </table>tags define where the table begins and ends, the <tr>and </tr>

tags define where each row begins and ends, and the <td>and </td>tags define

the individual cells within each row There are no tags specifically defining columns; they result when multiple rows of cells are stacked on top of each other

1. Within the body section of your document, enter an opening

<table>tag

2. Move to the next line by hitting the Enter (or Return) key, indent your cursor and enter an opening <tr>tag to define the start of the first row

3. Hit Enter again to move to the next line, indent your cursor again, and enter an opening <td>tag to indicate the start of a new cell

4. Follow the opening <td>tag with the specific content you want placed in this cell

5. Complete the cell by entering a closing </td>tag

6. Repeat Steps through for each cell you want to add to the row When your row is finished, move to the next line and enter a closing

</tr>tag vertically aligned beneath the opening <tr>tag to aid

readability

7. Repeat Steps through to add subsequent rows to the table

8. After completing the desired number of rows, move to the next line and finish the table with a closing </table>tag, vertically aligned

with the opening <table>tag Listing 43-1 shows the code required to produce a table with three rows and three columns Figure 43-1 shows the results displayed in a browser

(122)

tips

• To make all text in a given cell bold and center-aligned, use <th></th>tags instead of <td></td>

tags TH stands for table header

• In this example, each cell is defined on its own line Some authors prefer to define all cells in a given row on the same line to mimic better how the table appears in the browser It’s up to you; it doesn’t matter how much white space you add in HTML to aid code readability <html> <head> <title>Tables</title> </head> <body> <table> <tr>

<tr>

<tr>

</table>

</body> </html>

Listing 43-1: Code for a borderless table with three rows and three columns

Figure 43-1:The rather minimal table displayed in a browser

Task 43

• Each row must contain the same number of cells to render properly in a browser You can merge cells, however, using the

colspanand rowspan

attributes discussed in Task 45

(123)

Working with Table Borders

In Task 43, you created a simple table that organizes content into rows and columns To make the individual cells more distinct, define borders for your table Table borders are influenced by the following four attributes: border,

cellpadding, cellspacing, and bordercolor

1. To render a visible border around the table perimeter and interior cells, add the border attribute to the <table>tag and set it equal to a numeric value, such as:

Figure 44-1 shows the simple table from Task 43 with this border attribute defined

Figure 44-1:A table with a border one pixel thick

2. To control the thickness of internal borders between cells, define a

cellspacingattribute and set it equal to a numeric value, such as:

Figure 44-2 shows the result of adding this attribute value

Figure 44-2:The same table in Figure 44-1 with cellspacing increased to 10 pixels

notes

• If you don’t define a

cellspacingattribute at all, the browser defaults to a setting of

• If you define no

cellpadding, the browser defaults to a setting of

(124)

tip

• When you specify no bor-der color, both Internet Explorer and Netscape use a light gray highlight color and a darker shadow color to produce a 3-D beveled effect Once you define the

bordercolorattribute, Internet Explorer loses the 3-D effect (see Figure 44-4) and renders the borders in a solid color Netscape takes the border color you specify and light-ens it by 20% for the high-light color and darkens it by 20% for the shadow To get Internet Explorer to mimic the Netscape border color effect, you must define

bordercolorlight

andbordercolordark

attributes in addition to the

bordercolorattribute, setting them equal to lighter and darker shades of the bordercolor

attribute

3. To control the amount of empty space between the border of a cell and the content inside it, define a cellpaddingattribute Set it equal to a numeric value, such as:

Figure 44-3 shows the results in a browser

Figure 44-3:The same table in Figure 44-2 with cellpadding increased to 10 pixels 4. To specify a border color, define a bordercolorattribute Set this

equal to a hexadecimal value or predefined color name, for example:

Figure 44-4 shows the results rendered in the browser

Figure 44-4:The same table in Figure 44-3 with a border color applied

Task 44

cross-reference

• Tables divide a page into distinct regions In HTML you can also divide the entire browser window into distinct regions, where each region displays a separate document (called

(125)

Spanning Cells

Asingle cell can span multiple columns or rows The number of columns or rows a cell spans is defined using the colspanand rowspanattributes To

demonstrate how these attributes function, we’ll build a small table and apply the attributes individually

1. In the body section of your document, enter the table code shown in Listing 45-1 Figure 45-1 shows the results in a browser

<tr>

<tr>

</table>

Listing 45-1: Simple table code

Figure 45-1:A simple nine-celled table, with three rows and three columns 2. To span a cell across a number of columns, add the colspanattribute

to the <td>tag and set it equal to the number of columns you want to

span For example, to make the number cell span across the other cells in the same row, add a colspanattribute equal to 3, as shown

here:

<td colspan=”3”> </td> caution

• If you fail to remove the cells you’re spanning across, the browser renders the expanded cell created by the span and includes the extra cells off to one side of the table The effect is not typically pleasing to the eye

(126)

tip

• Spanning rows and columns can be useful when creating a single table heading (<th> </th>) across the top of a table or down its side

3. Remove the code representing the two cells being spanned In this example, delete <td> </td>and <td> </td>from the first row, save the document, and preview it in a browser Figure 45-2 shows the result

Figure 45-2:Cell spanned across three columns

4. To span a cell across a number of rows, add the rowspanattribute to

the <td>tag and set it equal to the number of rows you want to span For example, to make the number cell span the other cells in the same column, add a rowspanattribute equal to 3, as shown here:

5. Remove the code representing the two cells being spanned In this example, delete <td> </td>in the second row and <td> </td>

in the third row, and then save your document and preview it in a browser Figure 45-3 shows the result

Figure 45-3:Cell spanned across three rows

Task 45

cross-reference

(127)

Aligning Table Elements

Just like many other elements we’ve examined, the alignattribute can be used to influence a table’s position as well as the content of individual table cells When you apply the alignattribute to the <table>tag, it affects the table the same way as it does an image: It positions the table relative to the other text inside the document When you apply the alignattribute to the <td>tag, it aligns the cell’s content Because cells also possess height — whether specifically defined by the heightattribute or forced by the cell’s content — you can verti-cally align content within cells using the valignattribute

1. To specify a table’s alignment, define an alignattribute of the <table>tag and set it equal to left, right, or center Figure 46-1 shows the possible results

Figure 46-1:Three tables aligned around text: left, right, and center (from top to bottom)

notes

• The default value for the

alignattribute is left

• The default value for the

valignattribute is

middle Vertical align-ment, as shown in Figure 46-3, is not only relative to the cell but, in the case of baseline, relative to content in adjacent cells In Figure 46-3, the base-line of the image is at the bottom of the cell so that’s where the first cell aligns its text

Task 46

caution

• Older browsers not sup-port alignand valign

attributes defined for the

(128)

cross-reference

• Tables and images respond similarly to the align

attribute To learn more about aligning images, see Task 30

2. To align the content within a cell horizontally, define an align

attribute for the <td>tag and set it equal to left, right, or

center Figure 46-2 shows the result of each value

Figure 46-2:Cells aligned to the left, center, and right

3. To align the content within a cell vertically, define a valign

attribute for the <td>tag and set it equal to top, middle, bottom, or baseline Figure 46-3 shows the result of each value

Figure 46-3:Cells vertically aligned to the top, middle, and bottom, and at the baseline 4. To set the horizontal or vertical alignment for an entire row, define

the alignor valignattributes of the <tr>tag

(129)

Defining Dimensions for Table Elements

Left to its own devices, the dimensions of the overall table or individual cell is governed by the content placed within it Like some other elements you’ve seen, the dimensional attributes widthand heightcan also be applied to the

<table>, <tr>, and <td>or <th>tags with more or less similar results

1. To specify the width of a table, add the widthattribute to the

open-ing <table>tag and set it equal to a pixel value or a percentage For example:

or:

Figure 47-1 shows examples of different table widths

Figure 47-1:Various table widths and their effects

2. To specify the width of an individual cell, add the widthattribute to the <td>tag and set it equal to a pixel value or a percentage Figure 47-2 shows examples of cell widths

notes

• If there’s more content inside a table than the dimensions you define can handle, the browser simply ignores the dimension val-ues and renders the table large enough to show all the content

• When you use percentages, the table width is set to a percentage of the parent element For example, if the table width is 80%, and it’s nested inside the cell of another table, it will be 80% of the width of the cell If the table is inside a layer (see Part IX), then it will be 80% of the width of the layer If the table is not nested inside another ele-ment, its width will be 80% of the browser window — which means it will expand and contract with the browser window’s size to maintain that percentage

Task 47

cautions

• When applying widths to cells, make sure the total values don’t exceed or con-flict with any width value you assign to the

<table>tag For exam-ple, don’t set a table width as a percentage and then add pixel width values to every cell in a row Also, don’t define cell widths whose combined values exceed or are less than the defined table width

(130)

tips

• It’s possible to combine percentage and pixel val-ues across table and cell widths For example, in a two-column table you can set the entire table to a width of 100%, yet set the first column to a width of 150 pixels Make sure the content inside the first column is also 150 pixels wide and then set the second column equal to 100% The second column will try to take over the screen while the first column holds its ground Newer browsers don’t nec-essarily require the second column value but many older browsers do, making this a good backward-compatible practice

• Older browsers not accept widthand height

attributes defined for the

<tr>tag Consequently, it is always best to apply them to the <td>tags instead

Figure 47-2:Different cell and table widths

3. To define the height of a cell, add a heightattribute to the <td>tag

and set it equal to a pixel value or percentage Figure 47-3 shows the effect of different height values

Figure 47-3:The effect of various height values

4. To set the width or height of an entire row, add widthand height

attributes to the <tr>tag, setting them equal to pixel values or percentages

Task 47

cross-reference

• The width and height attrib-utes are deprecated for

(131)

Working with Table Background Properties

All four tag pairs used in creating tables support the attributes bgcolorand background The bgcolorattribute specifies the background color and

backgroundspecifies a backgroundimage

1. To define a background color for the entire table, add the bgcolor

attribute to the opening <table>tag, setting it equal to a hexadeci-mal value or a predefined color name For example:

2. To define the background color for an individual row, apply the

bgcolorattribute to the <tr>tag and, for a single cell, apply it to the <td>or <th>tag For example:

Figure 48-1 shows the effect of applying the bgcolorattribute to

the <table>, <tr>, and <td>tags simultaneously

Figure 48-1:Red table, white row, blue cell

notes

• Current versions of Netscape and Internet Explorer fill the entire background of the table with the color you define Older versions of Netscape (prior to version 6) only fill in the cells, leaving any space gener-ated by cell spacing clear to display the document’s background color

• Current versions of Netscape and Internet Explorer tile the image across the entire table’s background, as if the table were a window looking out on the tiled image Older versions of Netscape (prior to version 6) begin tiling the image anew in each cell, so defining a back-ground image to

<table>has the same effect as applying it to each <td>tag

(132)

cross-reference

• The <body>tag also accepts the bgcolorand

backgroundattributes (see Task 9)

3. To define a background image for a table, add the background

attribute to the <table>tag and set it equal to the pathname of the image you want to use For example:

Figure 48-2 shows a background image applied to a table

Figure 48-2:Background images tile from left to right and top to bottom across the element they’re applied to

4. To define a background image for an individual row, apply the

backgroundattribute to the <tr>tag and, for a single cell, apply it to the <td>or <th>tag For example:

(133)

Nesting Tables

Nesting tables inside other tables allows you to divide a document into discrete regions In this way, you gain greater control over page layout

1. To nest a new table within an existing table cell, place your cursor inside the cell and press Enter once or twice to create space for the code you’re about to enter, as shown in Figure 49-1

Figure 49-1:An existing table cell ready for nesting

2. Within the cell, enter a comment that describes the content being placed in the nested table Figure 49-2 shows an example

Figure 49-2:A descriptive comment tag (“Begin Navigation Table”)

(134)

tips

• When you place multiple tables within a single docu-ment, and tables within tables as well, reading through the code and keeping track of which tag is governing what becomes a real challenge The solu-tion is to place comments within your code, calling out where nested tables begin and end Comments are written inside opening and closing comment tags (<! and >), which hide any content in between from the browser

• The general practice of indenting table code makes your document easier to read

• Comment tags can be used anywhere within a docu-ment They’re typically used to explain to others what the author is doing You can also use them to hide chunks of code temporarily while you’re testing a docu-ment in the browser

3. Move to the next line and enter the code defining your nested table, as shown in Figure 49-3

Figure 49-3:Code for a nested table

4. After the closing tag of the nested table, move to the next line and insert another comment tag demarking the end of the nested table, as shown in Figure 49-4

Figure 49-4:A comment indicating the end of a nested table (“End Navigation Table”)

Task 49

cross-reference

(135)

Organizing Table Data

In Task 49, you learned how to use comment tags to make nested table code eas-ier to read HTML also has some tags for organizing individual parts of a table:

<thead>, <tbody>, <tfoot>, <caption>, and <summary> These tags are generally used when the table you’re creating is meant to display tabular data

1. To indicate a region of a table containing heading data, place opening and closing <thead>tags around the code, as shown in Listing 50-1

<th align=”center”>AVE.WIND SPEED</th> </tr>

</thead>

Listing 50-1: A table row marked as a header

2. To indicate the table code that makes up the footer, wrap it in open-ing and closopen-ing <tfoot>tags, as shown in Listing 50-2

*calculations based on of report zones </td>

</tr> </tfoot>

Listing 50-2: A table footer

3. To indicate the body of the table content, place opening and closing <tbody>tags around the remaining table rows, as shown

in Listing 50-3

<tbody> <tr> <td align=”center”>1</td> <td align=”center”>23.8</td> <td align=”center”>43.2</td> <td align=”center”>30/1/03</td> (continued) notes

• The <tfoot>content must precede the <tbody>

content Even though the footer information is written first, the footer row is still rendered at the bottom of the table You supply the header and footer first so the browser can render them prior to rendering the body, in case the table is extremely big

• By default, caption text is centered above the table To align the caption below the table, add an align

attribute to the <caption>

tag and set it equal to

bottom Internet Explorer allows you to use both

alignand valign

attributes, using valign

to set the top or bottom value and alignto place the caption to the left,

right, or center

(136)

cross-reference

• The W3C prefers you to use Cascading Style Sheets to format captions (see Part 9)

</tbody>

Listing 50-3: The body section of a table

4. To describe the data within a table, include <caption>tags directly following the opening <table>tag, as shown here:

<caption><b>First Quarter Measurements</b></caption>

Figure 50-1 shows how captions appear in the browser

Figure 50-1:A table caption appearing below a table

5. To include a summary of the table data for text-to-speech browsers and Braille-based devices, define a summary attribute for the

<table>tag, as shown here:

(137)

(138)

Task 51: Defining Form Elements Task 52: Formatting Text Fields Task 53: Formatting Password Fields Task 54: Formatting Text Areas Task 55: Formatting Check Boxes Task 56: Formatting Radio Buttons Task 57: Formatting Selection Menus Task 58: Formatting Selection Lists Task 59: Formatting File Fields

Task 60: Formatting Submit and Reset Buttons Task 61: Using Graphic Images for Submit Buttons Task 62: Using Hidden Fields

(139)

Defining Form Elements

It seems that forms exist everywhere on the Web They allow people to sign up for newsletters, purchase goods, and send e-mail Any HTML document that contains a form has a section inside it containing opening and closing <form>

tags Within this section lies the regular content and its markup, as well as specific form-related elements called form controls (check boxes, radio buttons, menus, and so on)

Users fill in “the form” by entering information into text fields, making selections from menus, and clicking check boxes and radio buttons Clicking the “submit” button sends the data they dutifully entered to a Web server, which sends the col-lected form data to a processing script The most important thing to understand about Web forms is that they consist of two parts: the HTML-based interface that visitors use to enter information (that is, the Web page) and a program on the Web server that processes that collected information behind the scenes Web forms typically make use of something called the Common Gateway Interface (CGI), a standard system for using external programs to communicate with Web servers Programs (called scripts) can be written in any number of pro-gramming languages The most common is Perl The form page on the Web site packages the information that users enter and sends it to the Web server where the script resides The script then processes the information and either has the Web server send a response back to the visitor or holds and maintains the data for some future purpose

There is no single script that everyone uses to create forms The Web page form and the script on the server are unique little programs on each Web site This means that if you want to create your own forms, you need to learn how to program — but that’s a topic for another book In this task, you simply learn how to define the opening and closing <form>tags, which instruct browsers where to submit the data and how the data should be sent

1. Within the body section of the document, enter an opening <form>tag

2. Add an actionattribute and set it equal to the URL of the process-ing script, as shown in Listprocess-ing 51-1

<html> <head> <title>Forms</title> </head> <body> <form action=”/cgi-bin/guest.pl”> </body> </html>

Listing 51-1: The opening <form> tag and action attribute

notes

• The getmethod appends the form data to the URL defined in the action

attribute, while the post

method sends the data as a transaction body mes-sage Use the getattribute when you’re sending a small amount of data and no type of response is scripted to come from the Web server Use the post

attribute when you’re send-ing large amounts of data and the script is sending a response The World Wide Web Consortium has dep-recated the getmethod

• The rest of the code that makes up the form (normal content, form controls, and so on) is placed between the opening and closing

<form>tags

(140)

cross-reference

• The application on the Web server that processes user-inputted information is typ-ically referred to as a CGI script, a program written in one of a number of programming languages (Perl is the most common.) To learn more about CGI scripting and the Perl programming language, seePerl For Dummies, 4th Editionby Paul Hoffman (Wiley Publishing, Inc., 2003)

3. Follow the actionattribute with the methodattribute, setting it equal to postor get, as shown in Listing 51-2

<title>Forms</title> </head>

<body>

</body> </html>

Listing 51-2: A <form> tag with action and method attributes defined 4. To mark the end of the form, insert a closing </form>tag Listing

51-3 shows a completed form container

<title>Forms</title> </head>

<body>

<! The elements that create the physical form the user sees are placed between these opening and closing form tags >

</form>

</body> </html>

Listing 51-3: A completed form container

(141)

Formatting Text Fields

If you’ve ever filled out a Web-based form, you’ve noticed that more often than not the information you’re providing is textual — names, addresses, passwords, and comments — as well as numeric values like ZIP codes and phone and credit card numbers Form controls that accept this data are generically referred to as

text boxes This task shows you how to examine the first of these three types: the

basic text field These form controls are most commonly used for single-line responses, like a name and address, and for short numeric values

1. Enter an <input>tag

2. Define a typeattribute and set it equal to text, as shown here:

3. Define a nameattribute and set it equal to the appropriate value

specified by the processing script For example:

4. To specify how wide the text field should be, define a sizeattribute, setting it equal to a numeric value representing the width of the text field in characters For example:

<input type=”text” name=”first_name” size=”20”

5. To specify a maximum number of characters the user can enter into the text field, define a maxlengthattribute and set it equal to a

numeric value, as shown here:

notes

• The <input>tag is another empty tag, like the

<br>or the <img>tag, meaning it has no closing tag associated with it

• By defining a name

attribute for each of your form controls, you create what is called a name/ value pair.For example, if your text field is named “user,” then when a visitor enters BobbyJ, the script receives the name/value pair “user=BobbyJ.” The processing script has a variable defined, named “user” that awaits this value Without a name attribute defined, the pro-cessing script would simply receive the string BobbyJ

and not understand what the string meant

• Left undefined, text fields default to 20 pixels long In most browsers, the text field is actually one charac-ter wider than the number you specify

(142)

cross-reference

• Somewhere in your Internet travels you have likely entered a password and seen it appear onscreen as a row of asterisks or bullets This is accom-plished by another form of text field — the password field, covered in Task 53

6. If you want an initial value displayed in the text field when the docu-ment loads, define a valueattribute and set it equal to the text you want the field to contain For example:

7. To make the <input>tag compatible with XHTML and keep it rec-ognizable to non-XHTML browsers, conclude the tag by inserting a space after the last attribute value and adding a forward slash and closing bracket, as shown here:

Figure 52-1 shows some typical text fields in a browser

Figure 52-1:Typical text fields rendered in the browser

(143)

Formatting Password Fields

Password fields, logically enough, accept passwords They respond to the same

size, maxlength, and valueattributes as the text field but require the typeattribute to equal passwordso that any text entered into the password field appears onscreen as asterisks (Windows) or bullet points (Macintosh) Other than obscuring password text visually, a password field offers no sophisticated security It doesn’t encrypt or scramble the information in any way

2. Define a typeattribute and set it equal to password For example:

3. Define a nameattribute and set it equal to the appropriate value specified by the processing script, as shown here:

4. To specify the width of the password field, define a sizeattribute,

setting it equal to a numeric value representing the width of the pass-word field in characters:

5. To specify a maximum number of characters the user can enter into the password field, define a maxlengthattribute and set it equal to a numeric value:

6. To make the <input>tag compatible with XHTML and keep it rec-ognizable to non-XHTML browsers, conclude the tag by inserting a space after the last attribute value and adding a forward slash and closing bracket Listing 53-1 shows an example of a simple login screen Figure 53-1 displays the resulting document in a browser

note

• The font, size, and color of text and passwords entered by the user, as well as the look and feel of the fields themselves, are all gov-erned by the browser

Task 53

caution

(144)

• This example includes Submit and Reset buttons To learn more about them, see Task 60

• Text boxes that allow more than a single line of text are called text areas (see Task 54)

<title>Password Fields</title> </head>

<body>

User Name:<br>

<br>

Password:<br>

<! Submit and Reset Buttons >

</form> </body> </html>

Listing 53-1: Code behind a simple login screen

Figure 53-1:Simple login screen rendered in the browser

(145)

Formatting Text Areas

Atext area is a large, scrollable, multiline text window It is most commonly

used for collecting extended written comments Unlike text and password fields, the text area is not created with the <input>tag Instead, it has its own set of opening and closing <textarea>tags

1. Somewhere within the confines of your <form>tags, enter an

open-ing <textarea>tag

specified by the processing script For example:

3. To specify the width of the text area, add a colsattribute and set it equal to a numeric value representing the width of the text area in characters:

4. To specify the height of the text area, add a rowsattribute and set it equal to a numeric value representing the height of the text area in characters:

5. To control how text wraps within the text area, add a wrapattribute and set it equal to off, virtual, or physical:

6. To complete the text area, add a closing </textarea>tag:

</textarea>

7. If you want an initial value displayed in the text area when the document loads, place the text between the opening and closing

<textarea>tags, for example:

Place Your Comments Here </textarea>

Listing 54-1 shows a completed text area within the context of a small form Figure 54-1 renders the code in a browser

notes

• Without colsand rows

attributes defined, most browsers default to a text area about 20 characters wide and lines high, with visible scroll bars running along the bottom and right sides

• A value of offprevents Internet Explorer from wrapping text in the browser window Data is still submitted to the script as a single line of text Setting the wrapattribute to virtualwraps the text in both Netscape and Internet Explorer but still submits the text in a single line Setting the wrap

attribute to physicalnot only wraps the text but submits it with line-break codes included

(146)

• Browsers respect any white space between characters entered within the

<textarea>tags This is similar to the <pre>

tag (see Part 2)

• The form ends with a Submit and a Reset button To learn how to use these, see Task 60

<title>Text Areas</title> </head>

<body>

User Name:<br>

Enter Your Comments Here:<br>

<! Submit & Reset Buttons >

Listing 54-1: A text field followed by a text area

Figure 54-1:A text field rendered in a browser

(147)

Formatting Check Boxes

The check box form control acts as a switch that the user can toggle on or off (check or uncheck) You create a check box by setting the <input>tag’s type

attribute equal to checkbox Check boxes require a valueattribute, which supplies the value that gets passed to the script if the check box is clicked By defining the nameand valueattributes, you’re supplying both halves of the name/value pair; the user decides whether it’s sent to the server by how they respond to it — by checking it or not

2. Define a typeattribute and set it equal to checkbox:

specified by the processing script:

4. Define a valueattribute and set it equal to the value that will be passed to the processing script if the user clicks the check box:

5. If you want a check box to be preselected when the browser loads the page, include the checkedattribute:

6. To make the checkedattribute compatible with XHTML, render it like a traditional attribute and set it equal to checked:

7. To make the <input>tag compatible with XHTML and still keep it recognizable to non-XHTML browsers, conclude the tag by insert-ing a space after the last attribute value and addinsert-ing a forward slash and closing bracket:

note

• HTML allows you simply to define the word checked, while XHTML requires the

checked=”checked”

syntax

(148)

tip

• Multiple check boxes typically share a common

nameattribute, allowing the visitor to supply multi-ple answers to a single question

Listing 55-1 provides a simple check box example Figure 55-1 ren-ders the document in a browser

<title>Checkboxes</title> </head>

<body>

<p>What are your preferred ice cream flavors? </p>

<input name=”flavors” type=”checkbox” value=”chocolate” checked> Chocolate<br>

<input name=”flavors” type=”checkbox” value=”strawberry”> Strawberry<br>

<input name=”flavors” type=”checkbox” value=”vanilla”> Vanilla

Listing 55-1: Code that generates three check boxes

Figure 55-1:Three check boxes to select our preferred ice cream flavor: chocolate, strawberry, or vanilla

Task 55

cross-reference

(149)

Formatting Radio Buttons

Whereas check boxes supply users with multiple-choice options in a form, radio buttons supply either/or choices You create radio buttons by setting the <input>tag’s typeattribute equal to radio Radio buttons require the same attributes as check boxes (type, name, and value) but when multiple radio

buttons share identical nameattribute values, users can select only one at a time If the user has already selected one, clicking another deselects it

2. Define a typeattribute and set it equal to radio:

3. Define a nameattribute and set it equal to the appropriate value specified by the processing script:

4. Define a valueattribute and set it equal to the value that will be

passed to the processing script if the user selects the radio button:

5. If you want a radio button to be preselected when the browser loads the page, include the checkedattribute:

6. To make the checkedattribute compatible with XHTML, render it

like a traditional attribute and set it equal to checked:

7. To make the <input>tag compatible with XHTML and keep it

rec-ognizable to non-XHTML browsers, conclude the tag by inserting a space after the last attribute value and adding a forward slash and closing bracket:

note

• HTML allows you to simply define the word checked, while XHTML requires the

checked=”checked”

syntax

(150)

tip

• Use radio buttons when you want a visitor to make only one selection from a number of choices Include at least two radio buttons with identical name

attribute values

Listing 56-1 provides a simple three-button example Figure 56-1 shows the resulting page in a browser

<title>Radio Buttons</title> </head>

<body>

<p>Which is your dominant hand?</p>

<input type=”radio” name=”hand” value=”right” checked> Right <br>

<input type=”radio” name=”hand” value=”both”> Ambidextrous

Listing 56-1: A series of radio buttons

Figure 56-1:Make a selection using radio buttons to specify your dominant hand

Task 56

cross-reference

(151)

Formatting Selection Menus

Selection menus allow users to select one of several items in a pop-up list You define a selection menu with the <select>tag Each menu option is laid

out in much the same way as you would create a list, using opening and closing

<option>tags to define each menu choice

1. Insert an opening <select>tag

3. To define a menu option, move to the next line, indent, and enter the item between opening and closing <option>tags:

<option>Vorpal Sword</option> <option>Pointed Stick</option> <option>Bare hands</option>

4. To specify an initial value for an option, define a valueattribute for the <option>tag and set it equal to the value to be sent to the

pro-cessing script If this attribute is not defined, the initial value is set to the content you placed between the <option>tags:

<option value=”good”>Vorpal Sword</option> <option value=”bad”>Pointed Stick</option> <option value=”pointless”>Bare hands</option>

5. To specify one option as preselected, define a selectedattribute for

the <option>tag and set it equal to selected:

<option value=”good” selected=”selected”>Vorpal Sword</option>

<option value=”bad”>Pointed Stick</option> <option value=”pointless”>Bare hands</option> note

• HTML allows you to simply define the word

selected, while XHTML requires you to define it as

selected=”selected”

(152)

tip

• Selection menus save on screen real estate, offering many choices while occu-pying only one line If you want to conserve even more screen space, instead of devoting a portion of your document to tradi-tional HTML text that informs the user what the menu is for, make the first option an instruction, as our example shows To make a visual break between this instructional text and the rest of the menu options, make the second option a line by typing dashes between the

<option>tags, as our example also shows

6. Once you’ve defined all your menu options, complete the selection menu with a closing </select>tag Listing 57-1 provides an

exam-ple of a simexam-ple selection menu Figure 57-1 shows the resulting page in a browser

<title>Select Menus</title> </head>

<body>

<form action=”/cgi-bin/good_sense.pl” method=”post”> What would you use to stop a Jabberwocky?

<br>

<option>Pick a weapon</option>

<option> -</option> <option value=”good”>Vorpal Sword</option> <option value=”bad”>Pointed Stick</option> <option value=”pointless”>Bare hands</option> </select>

Listing 57-1: A simple selection menu

Figure 57-1:The selection menu listing your choice of weapon to stop a Jabberwocky headed your way

Task 57

cross-reference

(153)

Formatting Selection Lists

When you format a selection menu as a list, the form control becomes a box from which a visitor can make one or more selections Depending on how you format the list, the box can sprout a scroll bar that allows users to move through the list options To turn a selection menu into a menu list, simply add the sizeattribute to the <select>tag This attribute accepts a numeric value that signifies the number of list options to display If there are more options in the list than the number of lines defined, the list sprouts a scroll bar so the user can read them all

1. Insert an opening <select>tag

3. To format the menu as a multiline list, add a sizeattribute to the

opening <select>tag and set it equal to a numeric value signifying the number of list options you want to make visible:

4. To permit users to make multiple selections from the list, add a

multipleattribute and set it equal to multiple:

5. To define your list options, move to the next line, indent, and enter the items between the opening and closing <option>tags:

6. To specify an initial value for an option, define a valueattribute for the <option>tag and set it equal to the value to be sent to the

pro-cessing script If this attribute is not defined, the initial value is set to the content you placed between the <option>tags:

7. To specify one option as preselected, define a selected attribute for the <option>tag and set it equal to selected:

<select name=”pets” size=”4” multiple=”multiple”> <option value=”k9” selected=”selected”>Dogs</option> notes

• If there are more options in the list than the number of lines defined by the size

attribute, the list sprouts a scroll bar on the right side

• HTML allows you to simply define the word

multiple, while XHTML requires the

multiple=”multiple”

syntax

(154)

tip

• Let users know that multi-ple selections are possible, and tell them how to make them Windows users hold down the Control key and Mac users hold down the Command key

8. Once you’ve defined all your list options, complete the selection list with a closing </select>tag Listing 58-1 provides an example of a simple selection list Figure 58-1 displays the resulting page in a browser

<title>Selection Lists</title> </head>

<body>

<p>What kinds of pets you have?</p>

<option value=”feline”>Cats</option> <option value=”avian”>Birds</option> <option value=”equine”>Horses</option> </select>

<p>To make multiple selections, hold down your Ctrl key (Win) or your Command key (Mac)</p>

Listing 58-1: A simple multiple-choice selection list

Figure 58-1:A simple multiple-choice selection list rendered in the browser

Task 58

cross-reference

(155)

Formatting File Fields

File fields allow your site’s visitors to upload files from their hard drive to the Web server The file field appears as a text field with a Browse button to the right The file field form control uses the <input>tag Here the typeattribute is set equal to file

1. Insert an <input>tag

2. Add a typeattribute and set it equal to file:

3. Define a nameattribute, setting it equal to the appropriate value specified by the processing script

4. To specify how many characters wide the file field should be, define a

sizeattribute and set it equal to a numeric value representing the width of the text field in characters:

5. To specify a maximum number of characters the user can enter into the field, define a maxlengthattribute and set it equal to a numeric value:

6. To limit the type of files a visitor can upload, define an accept

attribute and set it equal to the MIME type of the files you want to allow:

7. To make the <input>tag compatible with XHTML and keep it rec-ognizable to non-XHTML browsers, conclude the tag by inserting a space after the last attribute value and adding a forward slash and closing bracket:

notes

• The value assigned to the

acceptattribute repre-sents a value pair that says “only accept a certain type of file within a particular family.” Our example here allows only image files in the GIF format

• Users can either enter the local pathname of the file they want to upload or click the Browse button to locate the file visually in the dia-log box

Task 59

caution

(156)

cross-reference

• MIME stands for Multi-purpose Internet Mail Extensions To see a com-plete list of MIME types, visit our Web site: www wiley.com/compbooks/ 10simplestepsorless

Listing 59-1 provides a simple file field example Figure 59-1 displays the result in a browser

<title>File Fields</title> </head>

<body>

<p>Upload Your GIF Images Here:</p>

Listing 59-1:A simple file field

Figure 59-1:Clicking the Browse button opens a dialog box from which to select a file for uploading

(157)

Formatting Submit and Reset Buttons

Site visitors click buttons either to send the completed form to the server (the Submit button) or to clear the form if they’ve made a mistake (the Reset but-ton) You don’t get many choices to style basic form buttons, other than what text you put on them They’re typically rendered with beveled edges, in neutral gray with black text on the face

1. To create a Submit button, insert an <input>tag

2. Add a typeattribute and set it equal to submit:

3. To specify the text on the button face, add a valueattribute and set

it equal to the text you want:

4. To create a Reset button, insert an <input>tag and add a type

attribute set equal to reset Use the valueattribute to specify the

text on the button face:

5. If the processing script demands it, define a nameattribute, setting it equal to the appropriate value:

Listing 60-1 shows a simple form with Submit and Reset buttons in place Figure 60-1 renders the resulting page in a browser

notes

• When users complete the form and click the Submit button, data is sent to the script referenced in the

<form>tag’s action

attribute Clicking the Reset button clears the form so they can start over

• If the valueattributes are left undefined, a Submit button’s text defaults to “Submit Query.” The Reset button defaults to “Reset.”

(158)

cross-reference

• You can use an image in place of the Submit button (see Task 61)

<title>Submit & Reset Buttons</title> </head>

<body>

<form action=”/cgi-bin/message.pl” method=”post”> E-mail Address:<br>

Message:<br>

Listing 60-1: A simple form with Submit and Reset buttons

Figure 60-1:A simple form with Submit and Reset buttons rendered by the browser

(159)

Using Graphic Images for Submit Buttons

If the browser’s neutral-gray, rectangular Submit button isn’t to your liking, you can substitute it for a graphic using a form control called an image field

2. Add a typeattribute and set it equal to image:

3. To specify the image to be used, add a srcattribute and set it equal

to the image’s pathname For example:

4. Specify the image’s dimensions with widthand heightattributes, setting them equal to numeric pixel values:

5. To specify an image border, define a borderattribute:

6. If the processing script requires it, define a nameattribute:

7. Define the altattribute and set it equal to your chosen alternate text for the image:

note

• Just as with ordinary images, always define the

altattribute for visitors with nonvisual browsers

(160)

tip

• The regular Submit button isn’t overly large to begin with, so it’s advisable to keep your button graphic relatively small

Listing 61-1 shows an example of an image field in use Figure 61-1 displays the finished work in a browser

<title>Graphic Submit Buttons</title> </head>

<body>

E-mail Address:<br>

Message:<br>

<br>

Listing 61-1: An image field substituting for the generic Submit button code

Figure 61-1:The graphical submit button rendered in the browser

Task 61

cross-reference

(161)

Using Hidden Fields

Each of the form controls you’ve seen so far sends data to a script in response to an action taken by the visitor, who types something into a field, clicks a check box or radio button, selects something from a menu or list, and so forth HTML provides a mechanism by which you can include values in your form to be sent to the script that visitors never see These values are defined using hidden fields.

2. Define a typeattribute and set it equal to hidden:

specified by the processing script:

4. Define a valueattribute and set it equal to whatever information you want the field to pass to the script when the form is submitted:

Listing 62-1 shows an example of a hidden field that sends data to a script Figure 62-1 shows how that data could be used by a script to generate a special message to the visitor

Figure 62-1:The script returns a second page that makes use of the information supplied by the hidden field

note

• In this example, the URL of the processing script (see the <form>tag’s action

attribute) is on another Web site The hidden field tells the script which Web site this data came from

(162)

tips

• If you use a single script located on one server to process forms from a num-ber of different Web sites, you could include a hidden field in each instance of the form to indicate which Web site the data came from

• Sometimes Web pages that visitors see are generated dynamically by scripts For example, visitors enter information on one page and click a Submit button marked “Continue,” which takes them to the next part of the form that’s tailored to the information they submitted on the previous page If the next form page requires any previously submitted information, you don’t want to make visitors enter it a second time This is where hidden fields come in handy: When the script generates the second page, it can include the required information inside hidden fields <html> <head> <title>Hidden Fields</title> </head> <body>

Select the Newsletters you wish to receive:<br> <br>

<input type=”checkbox” name=”newsletter” value=”oral_hygiene” /> Oral Hygiene Weekly<br>

<input type=”checkbox” name=”newsletter” value=”root_canal” /> Do-It-Yourself Root Canal in 10 Simple Steps or Less<br>

<input type=”checkbox” name=”newsletter”

value=”home_dentistry” /> Guide to Home Dentistry

Listing 62-1: A hidden field that tells the script which Web site this form is from

Task 62

cross-reference

(163)

Specifying the Focus Order of Form Controls

On a page with several form controls, pressing Tab moves the cursor from the first form control to the last By default, the page’s focus is the first form con-trol on the page You can concon-trol not only the Tab order but also the specific keys that bring the focus to a particular form control Both of these methods allow users to bypass the mouse when they enter information on the form, and they are typically included for visitors with speaking browsers

1. Define a tabindexattribute for each form control you want to affect

2. Set each tabindexattribute equal to a numeric value, in the order you want them to be focused on when people press the Tab key For example, tabindex=“1”is first, tabindex=“2”is second, and so on, as shown in Listing 63-1

3. To make a specific key bring a form control into focus, define an

accesskeyattribute for the form control and set it equal to the key

letter or number For example:

4. Include explicit notes about your access key assignments within your site (see Figure 63-1)

Figure 63-1:Instructional text that helps people navigate the form without the mouse

notes

• By default, most browsers allow users to tab through the form in the order the form controls appear in code

• The key you specify with the accesskeyattribute must be pressed in con-junction with either the Alt key (Windows) or the Control key (Mac) Older browsers not support the accesskeyattribute

(164)

tip

• To remove a form control from the tab order, set the

tabindexattribute equal to –1

<title>Focus Order</title> </head>

User Name: <br>

E-mail Address:<br>

<br>

Join the Mailing list?<br>

Yes<br>

No<br>

Select a Newsletter:<br>

<select name=”select” tabindex=”3”> <option>Chiropractic Accidents</option> <option>Medical Love Stories</option> <option>Dental Torture made Easy</option> </select>

Listing 63-1: Defining tabindex attributes in reverse order

Task 63

cross-reference

(165)

Using Field Sets

Field sets allow you to group a series of related form controls visually and structurally Doing so gives users (of visual browsers) a greater understanding of the form by wrapping related controls inside a gray or black border with an accompanying caption (rendered with the <legend>tag) Text-to-speech and

Braille browsers use the captions to inform users about the section of the form they’re in

1. Insert the opening <fieldset>tag above the first form control in

the group

2. Insert opening and closing <legend>tags immediately following the

the opening fieldset tag For example:

3. Place the text you want displayed as the fieldset’s caption between

the <legend>tags:

<legend>Personal Information</legend>

4. At the end of the group of form controls, insert a closing

</fieldset>tag

Listing 64-1 shows a completed form using a field set Figure 64-1 shows how Netscape renders the field set

notes

• Netscape 7.x and all ver-sions of Internet Explorer render the fieldset bor-ders in gray Netscape 6.x renders them in black, and Netscape 4.x doesn’t render them at all

• Netscape renders field set outlines with more white space around form controls than Internet Explorer does

(166)

cross-reference

• You can use tables to influ-ence fieldset borders To learn more about tables, see Part

<title>Field Sets</title> </head>

<body>

</tr> <tr>

<td>First Name:</td>

</tr> <tr>

<td>Address:</td>

</tr> </table> </fieldset> </form> </body> </html>

Listing 64-1: A sample form using a field set

Figure 64-1:How Netscape renders the form that uses a field set

(167)

(168)

Task 65: Defining Frameset Documents Task 66: Specifying Frame Dimensions Task 67: Specifying Border Properties

Task 68: Controlling Frame Margins and Scroll Bars Task 69: Nesting Framesets

Task 70: Targeting Frames

(169)

Defining Frameset Documents

Aframeset document is a set of instructions for dividing the browser window into separate panes Each pane is called a frame The frameset document defines the orientation of each frame, their physical properties, and the filenames of the other HTML documents displayed within them In this task, we lay out a base frameset document Subsequent tasks demonstrate how to flesh the document out

1. In your text editor, open a new document and define the opening and closing <html>tags, including a simple head section, as shown in

Listing 65-1 <html> <head> <title>Frames</title> </head> </html>

Listing 65-1: Basic tags of any Web page, without <body> tags

2. Below the closing </head>tag, insert an opening <frameset>tag,

as shown in Listing 65-2

<html> <head> <title>Frames</title> </head> <frameset> </html>

Listing 65-2: An opening <frameset> tag

3. Move to the next line, indent, and add a <frame>tag for each frame you want to define, as shown in Listing 65-3

<html> <head> <title>Frames</title> </head> <frameset> <frame> <frame> </html>

Listing 65-3: Adding empty frame tags

notes

• A frames-based layout requires multiple docu-ments to make it work For example, a three-framed layout requires a minimum of four HTML documents: the frameset document and one docu-ment for each frame that the frameset creates

• A frameset is simply a set of instructions for how the browser window should be divided, rather than a Web page with its own visible content This is because a frameset has no

<body>tags

(170)

• Frames can be defined as rows or columns Mixing the two requires nesting the framesets To learn how to define rows and columns, see Task 66 To learn about nesting framesets, see Task 69

• Defining a srcattribute, be it for a frame or an image, is no different than defining the hrefattribute for a hyperlink (see Part 5)

• This frameset document is merely skeletal There’s much more that needs to be done to it to make it truly functional For example, we haven’t even defined whether the frames will be displayed as rows or columns (see Task 66)

4. To specify which document should be displayed in a frame, define a

srcattribute for the <frame>tags and set them equal to the chosen document’s pathname, as shown in Listing 65-4

<html> <head> <title>Frames</title> </head> <frameset> <frame src=”nav.html”> <frame src=”opening_main.htm”> </html>

Listing 65-4: Defining src attributes for each <frameset> tag

5. To make the <frame>tag compatible with XHTML and keep it rec-ognizable to non-XHTML browsers, conclude the tag by inserting a space after the last attribute value and adding a forward slash and closing bracket, as shown here:

6. To close the frameset, move to the next line, return to the left mar-gin, and insert a closing </frameset>tag This initial document appears in Listing 65-5

<title>Frames</title> </head>

<frame src=”opening_main.htm” /> </frameset

</html>

Listing 65-5: Building a basic frameset document

(171)

Specifying Frame Dimensions

Aframe’s dimensions and their orientation are defined by two attributes: rows

and cols Their values don’t correspond to the number of rows or columns

you want to create Instead, these attributes accept multiple column width and row height values, separated by commas The syntax works like this:

cols=”width of the first column, width of the second column, etc.”

rows=”height of the first row, height of the second row, etc.”

1. To create a frameset of columns, add the colsattribute to the

<frameset>tag:

2. Set the colsattribute equal to the widths of each column you want

to create Separate each value with commas For example:

3. To create a frameset of rows, add the rowsattribute to the

<frameset> tag:

4. Set the rowsattribute equal to the height of each row you want to

create Separate each value with commas, as shown here:

5. For each row or column defined by the rowsor colsattribute, include a <frame />tag within the frameset

notes

• The values you define for the colsand rows attrib-utes can take any of three possible forms: numeric pixel values, percentages, or relative values

• Using an absolute pixel value ensures that a row or column is always an exact size Percentage values cre-ate frames that take up the specified percentage of the browser window

• Relative values allow you to set a frame’s dimensions relative to the other frames in the frameset Written using an asterisk, a value written as <frameset rows=”3*, 2*, 1*”>

creates three rows that are relative sixths of the browser window height: 3/6, 2/6, 1/6 (Why sixths? Because 3+2+1=6.)

Task 66

caution

• You need to be careful how you use pixel values If you create a frameset defining your colsor rows

(172)

cross-reference

• As you define a row or col-umn, instead of using a

<frame />tag, nest a whole other frameset (see Task 69)

Listing 66-1 shows the completed code for a two-column frameset Figure 66-1 shows that frameset displayed in a browser

<title>Frames</title> </head>

Listing 66-1: Code for a two-column frameset

Figure 66-1:A two-column frameset rendered in the browser

Task 66

tips

• To ensure that a frame stays at a specific pixel dimension, you need to mix absolute pixel values with relative values For exam-ple, the code shown in Step creates a first fixed column that is 150 pixels wide and leaves the rest of the browser window over to the second frame, which expands and contracts as the browser window resizes

• Although not typically done, you can define both the colsand rows attrib-utes simultaneously For example,<frameset rows=”1*,1*,1*” cols=”1*,1*,1*”>

(173)

Specifying Border Properties

However you define a frame’s border properties has a large impact on the look and feel of your layout You can leave borders to their default settings — free to be repositioned by the visitor — or you can lock them in place to enforce a specific boundary You can also modify their color, set their thickness, make them flat, or hide them completely

1. To disable borders, define a frameborderattribute for the

<frameset>tag and set it equal to no:

Figure 67-1 shows the result

Figure 67-1:Disabling the frame border in Internet Explorer

2. To modify the thickness of frame borders, add a borderattribute to the <frameset>tag and set it equal to a numeric value representing the border’s width in pixels:

Figure 67-2 shows the result

notes

• Frame borders are enabled by default A yesvalue simply hard-codes the default browser behavior When enabled, frame bor-ders appear as gray, bevel-edged bars, approximately pixels thick A novalue flattens the borders Internet Explorer displays borders roughly pixels thick (see Figure 67-1), provided no value has been defined for the border

attribute (see Step 2) Netscape flattens the bor-ders also but leaves them pixels thick

• Apply this attribute to the

<frameset>tag to govern the border’s appearance for all borders in the layout Apply it to the <frame>

tag to affect specific frames Be aware that frames sharing a common border can’t have conflict-ing framebordervalues

• A bordervalue of ren-ders borren-ders invisible in Netscape (see Figure 67-2) Internet Explorer also requires the frameborder

attribute be set equal to no

(174)

cross-reference

• Some of the early browsers didn’t support frames, which required Web designers to include noframescontent (see Task 71)

Figure 67-2:Hiding borders in Netscape

3. To prevent users from resizing the border of a specific frame by drag-ging on it, add a noresizeattribute to the <frame>tag

represent-ing the frame you want to lock For example:

4. To make the noresizeattribute compatible with XHTML, set it equal to noresize, as shown here:

5. To specify border colors, add a bordercolorto either the <frame>

tag (to modify a specific frame) or the <frameset>tag (to govern all borders in the layout) Set the attribute equal to either a hexadecimal value or predefined color name For example:

(175)

Controlling Frame Margins and Scroll Bars

The content inside a frame impacts scroll bar behavior Scroll bars appear whenever there’s more content than can fit within the defined dimensions of the frame This means that scroll bars often pop up when a browser window is resized or if the visitor’s monitor resolution is set sufficiently low The margin settings you specify can add to or subtract from the volume of content in a frame

1. Open the frameset document you want to edit

2. To specify the width of a frame’s left and right margins, add a mar-ginwidth attribute to its <frame>tag and set it equal to a numeric

value that represents the margin’s pixel width

3. To specify the height of a frame’s top and bottom margins, add a

marginheightattribute to its <frame>tag and set it equal to a numeric value that represents the margin’s pixel width Listing 68-1 shows margin width and height defined for one frame Figure 68-1 shows the result in Internet Explorer

<title>Frame Margins</title> </head>

</frameset>

</html>

Listing 68-1: Margin attributes set for one frame

caution

• If you set the scrolling

attribute to no, be sure to test your site across as many browsers and plat-forms as you can Text, borders, and the browser window all appear differ-ently in different browsers, operating systems, and monitor resolutions Therefore, your layout can vary from visitor to visitor Avoid having a visitor get to your site and not be able to see all the content in one of your frames because you’ve disabled scrolling

(176)

cross-reference

• Coding frames can take some time to get used to Many WYSIWYG editors make the process a bit easier If you’re curious about those editors, see Part 15 (Working with Dreamweaver) and Part 16 (Working with FrontPage)

Figure 68-1:Margin effects displayed in Internet Explorer

4. To control the scroll behavior of a frame, add a scrollingattribute to the <frame>tag:

5. Set the attribute equal to one of the following three values:

• yesdisplays scroll bars regardless of the amount of content in the frame

• nodisables scroll bars entirely

• autodisplays scroll bars if the frame content is sufficient to

require them (this is the default browser behavior)

(177)

Nesting Framesets

Tables allow you to span columns and rows, but the colspanand rowspan

attributes aren’t available for the <frameset>tag To achieve similar results,

you’d instead nest a frameset in place of a <frame>tag

1. Create that initial frameset, defining either columns or rows with the

colsor rowsattribute, as shown in Listing 69-1

</frameset>

Listing 69-1: Beginning a basic frameset

2. In place of one of the frame tags, insert an opening <frameset>tag,

as shown in Listing 69-2

<! Second row: to be filled by nested frameset > <frameset cols=”150, *”>

</frameset>

Listing 69-2: The parent frameset’s second row occupied by the nested frameset 3. Enter the <frame>tags for the nested frameset, as shown in

Listing 69-3

<! Second row: to be filled by a nested frameset > <frameset cols=”150, *”>

</frameset>

Listing 69-3: Nesting frames inside the frameset

note

• Typically, if your main frameset (called the parent frameset) is rows, then the frameset you nest is columns, and vice-versa

Task 69

caution

(178)

cross-reference

• Most frame-based layouts place the main navigation links in one frame and the documents they point to in another (see Task 70)

4. Close the nested frameset with a closing </frameset>tag Listing 69-4 shows the completed code, and Figure 69-1 shows the results in a browser

<title>Nesting Frames</title> </head>

<! Second row: filled by the nested frameset >

</frameset> </html>

Listing 69-4: Completed code for nested frames

Figure 69-1:Nested frames in Internet Explorer

(179)

Targeting Frames

Hyperlinks displayed in one frame can be written in such a way that the docu-ments they point to are opened within other frames in the frameset By giv-ing your frames names (via the name attribute), you can reference those frames using the <a>tag’s targetattribute, setting it equal to the name of a particular

frame

1. In the frameset document, add nameattributes to each <frame>tag and set them equal to a descriptive term For example, left_frame

or right_frame, as shown in Listing 70-1

<title>Targeting Frames</title> </head>

</frameset> </html>

Listing 70-1: Describing each <frame> tag with name attributes

2. In the document containing the hyperlinks you want to target, add the targetattribute to each <a>tag and set it equal to the frame

name you want the linked documents to be displayed in For exam-ple, target=“right_frame”, as shown in Listing 70-2

<title>Left Frame</title> </head>

<! This is left.html >

<a href=”home.html” target=”right_frame”>Home</a> <br> <a href=”about.html” target=”right_frame”>About Us</a><br> <a href=”contact.html” target=”right_frame”>Contact Us</a>

</body> </html>

Listing 70-2: Targeting each <a> tag with a target attribute

note

• With a base target defined, that target is now the default frame for all links in that document Use the

_selftarget when you need a link in that docu-ment to open inside its own frame

(180)

tip

• Besides the _blankvalue, HTML offers other prede-fined target names that produce various effects If the link is in a nested frameset:

target=”_parent”

opens the document in the next outside frameset

target=”_self”opens the document in the cur-rent frame (this is the default value)

target=”_top”displays the new document in the entire browser window, replacing the frameset altogether

3. To make all links in a document open in a specific frame without using the targetattribute, add a <base>tag to the document’s head section, as shown here:

<head>

<title>Targeting Frames</title> <base />

</head>

4. Define a targetattribute for the <base />tag and set it equal to the frame name you want the linked documents to be displayed in For example:

<head>

<title>Targeting Frames</title> <base target=”right_frame” /> </head>

5. To make a link’s document open in a new browser window, set the

targetattribute equal to “_blank”:

<a href=”contact.html” target=”_blank”>Contact Us</a>

Task 70

cross-reference

• You can use the

target=”_blank”

(181)

Providing noframes Content

Frames weren’t initially part of the HTML specification They were intro-duced in Netscape 2.0 and adopted shortly thereafter in Internet Explorer 3.0 Earlier browsers don’t support frames To provide content for these older browsers, noframes content has been the traditional method of making frames-based sites backwards-compatible

1. Open the frameset document in your text editor

2. Below the closing </frameset>tag, enter an opening <noframes>

tag, as shown in Listing 71-1

<title>No Frames</title> </head>

</frameset>

</html>

Listing 71-1: Start after the closing </frameset> tag

note

• The common practice is to simply inform the visitors that they have reached a frames-based site and redirect them to another version of your site that isn’t frames-based

(182)

tip

• If you don’t have a copy of an older browser to test your noframes content with, copy and paste the content into an ordinary document, save it, and test it that way

3. Enter any type of text you’d place in the body section of a normal HTML document, as shown in Listing 71-2

<title>No Frames</title> </head>

</frameset>

<p>Your browser doesn’t support frames.<br>

Don’t panic Simply go <a href=”index-2.html”>here </a> </p>

</html>

Listing 71-2: Adding text to explain to people what to if their browsers don’t support frames

4. Close the noframessection with a closing </noframes>tag:

<p>Your browser doesn’t support frames.<br>

Don’t panic Simply go <a href=”index-2.html”>here </a> </p>

</noframes>

Task 71

cross-reference

(183)

Working with Inline Frames

Inline frames are an invention of Microsoft When rendered, they create a float-ing, scrollable pane within the body of a regular HTML file Microsoft must have figured that since Netscape invented frames, they could them one better The only problem is that, unlike frames which are supported by virtually all browsers, no one but Internet Explorer supports inline frames Still, developers occasionally make use of them For example, when designing for an intranet (a closed group of users, typically within an office, who have access to a private Web server), where the browser being used is identical to all members, taking advan-tage of a proprietary feature isn’t such a risk

1. To insert an inline frame, insert an opening <iframe>tag within the body section of a document

2. Add a srcattribute and set it equal to the pathname of the document you want displayed within the frame:

3. Add a name attribute to allow the inline frame to be targeted and set it equal to an appropriate value:

4. To specify the inline frame’s dimensions, include widthand height

attributes and set them equal to pixel or percentage values:

5. To control the margins inside the inline frame, add marginwidth

and marginheightattributes as you would to a standard <frame>tag:

6. To float the inline frame to the left or right, similar to an image or table, add an alignattribute and set it equal to leftor right:

align=”left”>

7. Follow the opening <iframe>tag with some form of instructional

content you want rendered by browsers that don’t support this tag

notes

• An inline frame aligned to the left makes any body text on the same line wrap down the right side If it’s aligned to the right, text wraps down the left side

• Any content placed between the opening and closing <iframe>tags is rendered by non-Microsoft browsers

(184)

cross-reference

• See Part to learn about aligning images Part covers aligning tables

8. Insert a closing </iframe>tag to complete the inline frame Listing 72-1 shows a simple inline frame document Figure 72-1 shows the effect in Internet Explorer

<title>Inline Frames</title> </head>

</iframe> <p>

<font face=”Arial, Helvetica, sans-serif” size=”2”> <b>This is one of my favorite web sites It hasn’t been updated in years </b></font></p>

</body> </html>

Listing 72-1: A simple inline frame document

Figure 72-1:Showing a simple inline frame in Internet Explorer

(185)

(186)

Task 73: Writing Style Rules

Task 74: Creating an Embedded Style Sheet Task 75: Creating an External Style Sheet Task 76: Defining Style Classes

Task 77: Defining the font-family Property

Task 78: Defining the font-size Property with Keywords Task 79: Defining the font-size Property with Lengths Task 80: Working with Font Styling

Task 81: Using the Font Property Shorthand

Task 82: Working with Foreground and Background Colors Task 83: Controlling Character and Word Spacing

Task 84: Controlling Line Spacing and Vertical Alignment Task 85: Defining the text-decoration Property

Task 86: Defining the text-transform Property Task 87: Controlling Text Alignment and Indentation Task 88: Working with Background Images

(187)

Writing Style Rules

To quote its creators, “Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g., fonts, colors, spacing) to Web documents.” The purpose is to separate structure from style, leaving HTML to deal with the former while CSS takes over the latter With the birth of CSS, any HTML markup that deals purely with how things should look is deprecated (no longer approved of) Instead, CSS should be used CSS’s syntax is slightly different from HTML Angle brack-ets, equal signs, and quotation marks disappear in favor of curly braces, colons, and semicolons Where HTML uses tags and attributes, CSS rules use selectors (the element that the style defines), selectors have declarations (which contain properties), and properties are assigned values (see Figure 73-1)

Figure 73-1:Anatomy of a CSS style rule 1. Define a selector for the style rule

2. Follow the selector with an opening curly brace

3. Enter a property name, followed by a colon

4. Follow the colon with a space, supply a value for the property, and conclude the property/value pair with a semicolon

5. Move to a new line, and enter the second property/value pair Conclude each pair with a semicolon

6. When the declaration contains all the properties you want to add, end the declaration with a closing curly brace

Selector Declaration

note

• Value types vary with the property See our Web site at www.wiley com/compbooks/ 10simplestepsorless for more information

(188)

• You can see a list of CSS property names and value types on our Web site, www wiley.com/compbooks/ 10simplestepsorless

• You can embed style defini-tions in the head section of an HTML document (see Task 74), place them in their own CSS document and link to them (see Task 75), or define them inline, using the style attribute, as shown in Step

Listing 73-1 shows a style rule for the <p>tag

p { font-family: Arial, Helvetica, sans-serif; font-size: 12px;

color: #000000 }

Listing 73-1: A style rule with three defined properties

7. To assign a single declaration to a series of selectors, simply enter the selectors as a comma-separated list, as shown here:

h1, h2, h3 { font-family: Arial, Helvetica, sans-serif }

8. To set selectors so that they only affect a tag when it appears under specific circumstances, separate a number of selectors with a space For example:

h1 b { color: red }

This type of style definition (called a descendant style) tells the browser only to apply this style to bold text used with level-1 headings

9. To use CSS syntax within the flow of an HTML document, add a style attribute to the tag you want to affect and set it equal to an appropriate series of property/value pairs, each separated by semi-colons, as shown in Listing 73-2

Listing 73-2: CSS syntax applied inline to a paragraph tag

(189)

Creating an Embedded Style Sheet

By embedding a style sheet we mean placing CSS code within the HTML document itself The code is written within a style element (defined by opening and closing <style>tags) located in the head section of the document (defined by opening and closing <head>tags) Embedded style sheets affect only

the specific HTML document in which the CSS code resides

1. In the head section of an HTML document, enter an opening

<style>tag

2. Define a typeattribute for the <style>tag and set it equal to

text/css

3. Insert one or two new lines and enter an opening comment tag, so that your head section resembles Listing 74-1

<head>

<title>Embedded Styles</title>

<! </head>

Listing 74-1: The opening <style> tag

4. Insert another line or two and begin entering selectors and declara-tions, as described in Task 73

5. To close the embedded style sheet, enter a closing comment tag, followed by a closing </style>tag

Task 74

caution

(190)

tip

• To define an identical style for a series of selectors, separate each selector by a comma For example:

p, td { font-family: Verdana }

To create something called a contextual selector, enter a series of selectors in a row, separated only by spaces, then follow it with a declaration, like so:

td p { font-family: Verdana }

This creates a style for paragraphs only when they occur inside a table cell

Listing 74-2 shows a completed embedded style sheet

<head>

<title>Embedded Style Sheets</title>

p { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px;

color: #000000; }

h1 { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 22px;

color: #000000; }

> </style> </head>

Listing 74-2: An embedded style sheet

Task 74

cross-reference

(191)

Creating an External Style Sheet

External style sheets are separate documents containing nothing but style rules You attach these style sheets to HTML documents using a link reference, effectively allowing you to attach a single style sheet document to as many Web pages as you like This way you only need to change one style sheet document to update the formatting of elements across every page to which the style sheet document is attached

1. Open a new blank document in your editor and enter the styles you wish to define Listing 75-1 provides an example

body { color: #000000; background: #FFFFFF; margin-left: 100px; margin-right: 100px; margin-top: 100px }

h1 { font-family: Arial, Helvetica, sans-serif; font-size: 20px;

font-weight: bold }

p { font-family: Arial, Helvetica, sans-serif; font-size: 12px;

text-align: Justify }

Listing 75-1: A sample style sheet

2. Save the file with a css extension within the directory you’re using for your local site files (see Figure 75-1)

Figure 75-1:Saving the style sheet

3. Open the HTML documents to which you want to attach the style sheet Within the head section of each document, insert a <link>

tag with a relattribute set equal to stylesheet, and a type

attribute set equal to text/css

(192)

cross-reference

• As these code samples indicate, CSS provides many different properties that HTML doesn’t dupli-cate To learn more about margin properties, see Task 94 To learn more about font properties, see Tasks 77–81 To learn more about background proper-ties, see Tasks 82 and 88

4. Add a final attribute to the <link>tag, href, and set it equal to the appropriate pathname of the css file you saved in Step Listing 75-2 shows the complete code and Figure 75-2 shows the document rendered in a browser

<title>External Style Sheets</title> <link rel=”stylesheet” type=”text/css” href=”10_steps.css” />

</head>

<body>

<h1>Creating an External Style Sheet</h1>

<p>External style sheets are separate documents containing nothing but style rules These types of style sheets are attached to HTML documents using a link reference, effectively allowing you to attach a single style sheet document to as many web pages as you like Using this approach you only need to make change to the individual style sheet document to update the formatting of elements across every page to which the style sheet document is attached.</p>

</body> </html>

Listing 75-1: A sample HTML document containing a link reference to an external style sheet

Figure 75-2:An HTML page whose formatting is defined solely in an external style sheet

Task 75

tips

• When you develop a Web site, structure your local files as they would appear on the Web server This allows you to assign rela-tive pathnames when creating hyperlinks and other file references within your HTML code

• The relattribute stands for “relationship.” The

(193)

Defining Style Classes

When you create a style class, you specify your own unique selector name and attach a style declaration to it You can apply your classes to any tag by using the classattribute

1. Type a period followed by a unique class name in the selector posi-tion of your style rule For example:

.citation

2. Follow the class selector with a declaration by entering an opening curly brace, defining your desired properties, and completing the declaration with a closing curly brace:

.citation { font-family: “Times New Roman”, Times, serif; font-size: 12px;

font-style: italic }

3. Apply the class to your chosen HTML tag by adding a class attribute and setting it equal to the class name (without the period):

4. Limit classes to a particular tag by preceding the class selector with the tag character The following example makes sure the class can only be implemented with the <p>tag:

p.citation { font-family: Times New Roman, Times, serif; font-size: 12px;

5. Specify unique ID classes by preceding a class name selector with a pound sign and applying them to a tag using the ID attribute:

#preamble { font-family: Arial, Helvetica, sans-serif; font-size: 20px; }

<h1 ID=”preamble”>Preamble</h1>

Listing 76-1 shows an embedded style sheet that makes use of both a standard and ID class Figure 76-1 displays the results in a browser

Task 76

caution

(194)

cross-reference

• For more coverage of CSS, see our Web site at www wiley.com/compbooks/ 10simplestepsorless

<title>Style Classes</title>

.citation { font-family: “Times New Roman”, Times, serif; font-size: 12pt;

#preamble { font-family: Arial, Helvetica, sans-serif; font-size: 20pt; }

> </style>

</head>

<body>

<h1 ID=”preamble”>Preamble</h1>

<p class=”citation”>”We the People of the United States, in Order to form a more perfect Union, establish Justice, insure domestic Tranquility, provide for the common defense, promote the general Welfare, and secure the Blessings of Liberty to ourselves and our Posterity, ordain and establish this Constitution for the United States of America.” </p>

</body> </html>

Listing 76-1: Example of standard and ID classes

Figure 76-1:A standard class (the citation) and an ID class (the heading) rendered in the browser

Task 76

tip

(195)

Defining the font-family Property

The font-familyproperty in CSS functions identically as the faceattribute of the <font>tag in HMTL Use this property to specify a prioritized list of

fonts with which the browser should attempt to render an element Just as it does with the faceattribute, the browser renders text with the first font that matches

the one installed on the visitor’s computer

1. Within the declaration of your style rule, include a font-family prop-erty as shown here:

p { font-family: }

2. Follow the semicolon with the name of your first choice font For example:

p { font-family: “Times New Roman” }

3. Enter a comma and follow your first font choice with a second or third, as shown here:

p { font-family: “Times New Roman”, Times }

4. Conclude the list with the generic font family name to which the other fonts belong For example:

p { font-family: “Times New Roman”, Times, serif }

Listing 77-1 shows an embedded style sheet sample Figure 77-1 shows the resulting document in a browser

(196)

tips

• Capitalize all font names Any font name that con-tains more than one word should be placed in quotes Otherwise, browsers may ignore the spaces between words and not recognize the font name you request

• By concluding the list of fonts with the generic font family name, you ensure that even if the visitor’s computer lacks any of your initial choices, it will still use whatever default font it has that falls within that family Common generic families include serif (e.g., Times), sans-serif (e.g., Arial), and monospace (e.g., Courier)

<title>The font-family Property</title>

<! .code { font-family: Courier, monospace }

h1 { font-family: Arial, Helvetica, sans-serif }

p (font-family: “Times New Roman”, Times, serif }

> </style> </head>

<body>

<h1>Defining the <span class=”code”>font-family</span> Property</h1>

<p>The <span class=”code”>font-family</span> property in CSS is similar in function to the <span class=”code”>face</span> attribute of the <span class=”code”><font></span> tag in HMTL Use this property to specify a prioritized list of fonts with which the browser should attempt to render the element Identically to the <span class=”code”>face</span> attribute, a browser renders text with the first font that matches one installed on the visitor’s computer.</p>

</body> </html>

Listing 77-1: The font-family property in practice

Figure 77-1:Rendering the font-family property in the browser

Task 77

cross-reference

(197)

Defining the font-size Property with Keywords

As you might have guessed, the CSS font-sizeproperty fulfills the same

function as the sizeattribute of the <font>tag in HTML

1. Within the declaration of your style rule, include a font-size

property

2. Use the absolute-size keyword values xx-small, x-small, small,

medium, large, x-large, and xx-largeto define values

corre-sponding to the HTML font size scale of to 7, respectively Listing 78-1 shows seven paragraph style classes using each value Figure 78-1 shows how the browser renders the code

<title>The font-size Property</title> <style type=”text/css”>

<!

p.one { font-size: xx-small } p.two { font-size: x-small } p.three { font-size: small } p.four { font-size: medium } p.five { font-size: large } p.six { font-size: x-large } p.seven { font-size: xx-large } >

</style> </head> <body>

<p class=”one”> font-size: xx-small = size=”1” </p> <p class=”two”> font-size: x-small = size=”2” </p> <p class=”three”> font-size: small = size=”3” </p> <p class=”four”> font-size: medium = size=”4” </p> <p class=”five”> font-size: large = size=”5” </p> <p class=”six”> font-size: xx-large = size=”6” </p> <p class=”seven”> font-size: xx-large = size=”7” </p> </body>

</html>

Listing 78-1: Absolute-size keyword values

3. Use the relative-size keyword values largeror smallerto increase

or decrease the size of text relative to the font size of the parent element

(198)

• See Task 14 to learn how to use the sizeattribute of the <font>tag

• See Task 76 to create style classes

• These code listings all demonstrate the use of embedded style sheets See Task 75 to learn how to define external style sheets

Figure 78-1:Text rendered with absolute-size keyword values

Listing 78-2 shows the <div>tag (the parent element in this case) set to large and two <p>tag style classes which increase and decrease the

font size relative to that value

<!

div { font-size: large }

p.increase { font-size: larger } p.decrease { font-size: smaller } >

</style> </head> <body> <div>

<p class=”increase”> This line is larger </p> <p> This line is large </p>

<p class=”decrease”> This line is smaller </p> </div>

</body> </html>

Listing 78-2: Relative-size keyword values

(199)

Defining the font-size Property with Lengths

The CSS specification provides an extensive range of absolute and relative length values not found in HTML The inclusion of specific units of measure provides greater control over how content is displayed across different output devices (monitors, printers, and so on)

1. Add a font-sizeproperty to the declaration of your style rule

2. Set the property equal to an absolute-size length value Listing 79-1 shows a few possible values Figure 79-1 displays the results in a browser

<!

p.point { font-size: 12pt } p.pica { font-size: 1pc } p.cent { font-size: 4cm } p.mill { font-size: 4mm } p.inch { font-size: 15in } >

<p class=”point”>12 points</p> <p class=”pica”>1 picas</p>

<p class=”cent”>.4 centimeters</p> <p class=”mill”>4 millimeters</p> <p class=”inch”>.15 inches</p> </body>

</html>

Listing 79-1: Absolute-length values assigned to the font-size property 3. Use relative-size length values to indicate a length relative to some

other property For example:

• em: The relative height of the font’s uppercase letters • ex: The relative height of the font’s lowercase letters • px: The relative pixel resolution of the user’s monitor • %: A percentage of the font’s default size value

(200)

tips

• Make sure you don’t inadvertently put a space between your numeric value and the abbreviation of the unit of measure

• Write all units of measure in lowercase

Figure 79-1:Text rendered with absolute-length values assigned to the font-size property

Listing 79-2 shows possible relative values Figure 79-2 displays the results

<! p.em {font-size: 1em} p.ex {font-size: 2ex} p.px {font-size: 16px} p.percent {font-size: 100%} >

<p class=”em”>1 default uppercase letter high</p> <p class=”ex”>2 default lowercase letters high</p> <p class=”px”>16 pixels high</p>

<p class=”percent”>100 percent of the default font size </p> </body>

</html>

Listing 79-2: Relative-length values assigned to the font-size property

Figure 79-2:Text rendered with relative-length values assigned to the font-size property

Task 79

cross-reference

Định dạng
Số trang	579
Dung lượng	15,27 MB