HTML XHTML and dynamic HTML

About This Book This book provides complete coverage of HTML and XHTML, and includes the following: • Up-to-date coverage of using HTML and XHTML to create and design Web sites • Instruc

Trang 2

Their timely reviews, informed feedback, and excellent suggestions were tremendously valuable and helped us to produce an outstanding text that will meet the needs of all our New Perspectives instructors and students Our sincere thanks to all!

Lisa Macon, Valencia Community College

Don Mangione, Baker College of Muskegon

Chuck Riden, Arizona State University

Kenneth Wade, Champlain College

Sally Catlin, Indiana University—Purdue University Indianapolis

Heith Hennel, Valencia Community College

Diana Kokoska, University of Maine

Angela McFarland, B.T Washington High School, Escambia

Brian Morgan, Marshall University

James Papademas, DeVry University Chicago

Luke Papademas, DeVry University Chicago

Textbook Reviewers

Advisory Board Members

“The New Perspectives on HTML, XHTML, and DHTML text's hands-on, case-based approach is far more accessible to students than approaches taken in other books Prior versions of this text have helped hundreds of my students to learn Web publishing techniques that have enabled them to obtain high-paying industry jobs; the 4th Edition promises to do the same It is difficult, in general, to convince students that reading textbooks is important—but they love to read this one.”

—Lisa Macon, Valencia Community College

Trang 3

HTML, XHTML, and Dynamic HTML

4th Edition

Comprehensive

Trang 6

Associate Acquisitions Editor: Brandi Shailer

Associate Product Manager: Leigh Robbins

Editorial Assistant: Julia Leroux-Lindsey

Director of Marketing: Cheryl Costantini

Marketing Manager: Ryan DeGrote

Marketing Coordinator: Kristen Panciocco

Developmental Editors: Mary Kemper, Robin M Romer

Senior Content Project Manager: Jennifer Goguen McGrail

Composition: GEX Publishing Services

Text Designer: Steve Deschene

Art Director: Marissa Falco

Cover Designer: Elizabeth Paquin

Cover Art: Bill Brown

Copyeditor: Suzanne Huizenga

Proofreader: Kathy Orrino

Indexer: Alexandra Nickerson

of the United States Copyright Act, without the prior written permission of the publisher.

Some of the product names and company names used in this book have been used for identification purposes only and may be trademarks or registered trademarks

of their respective manufacturers and sellers.

Microsoft and the Office logo are either registered trademarks or trademarks of Microsoft Corporation in the United States and/or other countries Course Technology, Cengage Learning is an independent entity from the Microsoft Corporation, and not affiliated with Microsoft in any manner

Disclaimer: Any fictional data related to persons or companies or URLs used throughout this book is intended for instructional purposes only At the time this book was printed, any such data was fictional and not belonging to any real persons

or companies.

ISBN-13: 978-1-4239-2543-9 ISBN-10: 1-4239-2543-2

Course Technology

20 Channel Center Street Boston, Massachusetts 02210 USA

Cengage Learning is a leading provider of customized learning solutions with office locations around the globe, including Singapore, the United Kingdom, Australia, Mexico, Brazil, and Japan Locate your local office at:

international.cengage.com/region

Cengage Learning products are represented in Canada by Nelson Education, Ltd.

To learn more about Course Technology, visit www.cengage.com/coursetechnology

To learn more about Cengage Learning, visit www.cengage.com

Purchase any of our products at your local college store or at our preferred online

store www.ichapters.com

Printed in the United States of America

1 2 3 4 5 6 7 8 9 13 12 11 10 09

For product information and technology assistance, contact us at

Cengage Learning Customer & Sales Support, 1-800-354-9706

For permission to use material from this text or product, submit all

requests online at cengage.com/permissions

Further permissions questions can be emailed to

permissionrequest@cengage.com

Trang 7

The New Perspectives Series’ critical-thinking, problem-solving approach is the ideal way

to prepare students to transcend point-and-click skills and take advantage of all that the World Wide Web has to offer.

Our goal in developing the New Perspectives Series was to create books that give students the software concepts and practical skills they need to succeed beyond the classroom With this new edition, we’ve updated our proven case-based pedagogy with more practical content to make learning skills more meaningful to students.

With the New Perspectives Series, students understand why they are learning what they

are learning, and are fully prepared to apply their skills to real-life situations.

About This Book

This book provides complete coverage of HTML and XHTML, and includes the following:

• Up-to-date coverage of using HTML and XHTML to create and design Web sites

• Instruction on using CSS to create styles that enhance Web page design and layout,including table and print styles

• Expanded and in-depth coverage of embedding multimedia content; using JavaScript

to create Web sites with dynamic content and styles; creating Web forms; and usingJavaScript to provide client-side form validation

• Reinforcement of code compliance with strict applications of HTML and XHTML andcompliance with Section 508 accessibility guidelines

• Web demos, which give students an interactive approach to learning HTML, XHTML,CSS, and JavaScript

• An Online Companion, which provides supplemental information related to thecontent of each tutorial as well as access to the student data files

• Updated business case scenarios throughout, which provide a rich and realistic context for students to apply the concepts and skills presented

System Requirements

This book assumes that students have an Internet connection, a text editor, and a current Webbrowser that supports HTML 4.0 and XHTML 1.1 standards The following is a list of the mostrecent versions of the major browsers at the time this text was published: Windows—Firefox 2.0,Internet Explorer 7.0, Opera 9.25, and Safari 3.0; Macintosh—Safari 3.0 All Web browsers inter-pret HTML and CSS code in slightly different ways It is highly recommend that students haveseveral different browsers installed on their systems, for comparison purposes Students mightalso want to run older versions of these browsers to highlight compatibility issues, but the code inthis book is designed to support those browser versions The screenshots in this book were pro-duced using Internet Explorer 7.0 running on Windows Vista, unless otherwise noted If studentsare using a different browser or operating system, their screens will vary slightly from thoseshown in the book; this does not present any problems for students in completing the tutorials

Preface

"This text is filled with

excel-lent explanations and

activi-ties My students vary in

their abilities, and this text

covers exactly what they

need in a logical,

incremen-tal fashion It's a great

refer-ence book that students will

find useful for years."

—Kenneth Wade

Champlain College

Trang 8

The New Perspectives Approach

InSight Boxes

New for this edition! InSight boxes offer expert advice and best practices to help studentsbetter understand how to work with HTML, XHTML, and Dynamic HTML With the informa-tion provided in the InSight boxes, students achieve a deeper understanding of the conceptsbehind the features and skills presented

Margin Tips

New for this edition! Margin Tips provide helpful hints and shortcuts for more efficient use ofHTML, XHTML, and Dynamic HTML The Tips appear in the margin at key points throughouteach tutorial, giving students extra information when and where they need it

Reality Checks

New for this edition! Comprehensive, open-ended Reality Check exercises give students theopportunity to practice skills by completing practical, real-world tasks, such as creating a personalWeb site and creating and posting an online resume

In New Perspectives, retention is a key component to learning At the end of each session, aseries of Quick Check questions helps students test their understanding of the concepts beforemoving on Each tutorial also contains an end-of-tutorial summary and a list of key terms forfurther reinforcement

Assessment

Engaging and challenging Review Assignments and Case Problems have always been a hallmarkfeature of the New Perspectives Series Colorful icons and brief descriptions accompany theexercises, making it easy to understand, at a glance, both the goal and level of challenge aparticular assignment holds

Reference

While contextual learning is excellent for retention, there are times when students will want ahigh-level understanding of how to accomplish a task Within each tutorial, Reference Windowsappear before a set of steps to provide a succinct summary and preview of how to perform atask In addition, each book includes a combination Glossary/Index to promote easy reference

"The New Perspectives Series

approach, which combines

definition and real-world

application of content,

makes it an easy choice for

me when selecting

text-books I am able to teach

concepts that students can

immediately apply."

—Brian Morgan

Marshall University

Trang 9

Our Complete System of Instruction

Coverage To Meet Your Needs

Whether you’re looking for just a small amount of coverage or enough to fill a semester-longclass, we can provide you with a textbook that meets your needs

• Brief books typically cover the essential skills in just 2 to 4 tutorials

• Introductory books build and expand on those skills and contain an average of 5 to

8 tutorials

• Comprehensive books are great for a full-semester class, and contain 9 to 12+ tutorials

So if the book you’re holding does not provide the right amount of coverage for you, there’sprobably another offering available Visit our Web site or contact your Course Technologysales representative to find out what else we offer

• Student Data Files needed to complete the tutorials and end-of-tutorial exercises

CourseCasts – Learning on the Go Always available…always relevant

Want to keep up with the latest technology trends relevant to you? Visit our site to find alibrary of podcasts, CourseCasts, featuring a “CourseCast of the Week,” and download them

to your mp3 player at http://coursecasts.course.com

Ken Baldauf, host of CourseCasts, is a faculty member of the Florida State University ComputerScience Department where he is responsible for teaching technology classes to thousands ofFSU students each year Ken is an expert in the latest technology trends; he gathers and sortsthrough the most pertinent news and information for CourseCasts so your students can spendtheir time enjoying technology, rather than trying to figure it out Open or close your lecturewith a discussion based on the latest CourseCast

Visit us at http://coursecasts.course.com to learn on the go!

Instructor Resources

We offer more than just a book We have all the tools you need to enhance your lectures, checkstudents’ work, and generate exams in a new, easier-to-use and completely revised package Thisbook’s Instructor’s Manual, ExamView testbank, PowerPoint presentations, data files, solutionfiles, figure files, and a sample syllabus are all available on a single CD-ROM or for downloading

at http://www.cengage.com/coursetechnology

Brief

Introductory

Comprehensive

Trang 10

Skills Assessment and Training

SAM 2007 helps bridge the gap between the classroom and the real world by allowing dents to train and test on important computer skills in an active, hands-on environment.SAM 2007’s easy-to-use system includes powerful interactive exams, training or projects oncritical applications such as Word, Excel, Access, PowerPoint, Outlook, Windows, theInternet, and much more SAM simulates the application environment, allowing students todemonstrate their knowledge and think through the skills by performing real-world tasks.Powerful administrative options allow instructors to schedule exams and assignments, securetests, and run reports with almost limitless flexibility

stu-Online Content

Blackboard is the leading distance learning solution provider and class-management platformtoday Course Technology has partnered with Blackboard to bring you premium online content.Content for use with New Perspectives on HTML, XHTML, and Dynamic HTML, 4th Edition,Comprehensive is available in a Blackboard Course Cartridge and may include topic reviews,case projects, review questions, test banks, practice tests, custom syllabi, and more CourseTechnology also has solutions for several other learning management systems Please visithttp://www.cengage.com/coursetechnology today to see what’s available for this title

Acknowledgments

I would like to thank the people who worked so hard to make this book possible Specialthanks to my developmental editors, Mary Kemper and Robin Romer, for their hard work andvaluable insights, and to my Product Manager, Kathy Finnegan, who has worked tirelessly inoverseeing this project and made my task so much easier with her enthusiasm and goodhumor Other people at Course Technology who deserve credit are Marie Lee, ExecutiveEditor; Brandi Shailer, Associate Acquisitions Editor; Leigh Robbins, Associate ProductManager; Julia Leroux-Lindsey, Editorial Assistant; Jennifer Goguen McGrail, Senior ContentProject Manager; Christian Kunciw, Manuscript Quality Assurance (MQA) Supervisor; andJohn Freitas, Serge Palladino, Danielle Shaw, Teresa Storch, and Susan Whalen, MQA testers Feedback is an important part of writing any book, and thanks go to the following reviewersfor their helpful ideas and comments: Sally Catlin, Indiana University—Purdue UniversityIndianapolis; Heith Hennel, Valencia Community College; Diana Kokoska, University ofMaine; Angela McFarland, B.T Washington High School, Escambia; Brian Morgan, MarshallUniversity; James Papademas, DeVry University Chicago; and Luke Papademas, DeVryUniversity Chicago My thanks as well to the members of the New Perspectives HTMLAdvisory Board for their insights and suggestions for this new edition: Lisa Macon, ValenciaCommunity College; Don Mangione, Baker College of Muskegon; Chuck Riden, ArizonaState University; and Kenneth Wade, Champlain College

Writing a book is like giving birth and I have the stretch marks to prove it, so I want to thank

my wife Joan for her love, encouragement, and patience This book is dedicated to my sixchildren: Catherine, Stephen, Michael, Peter, Thomas, and John

– Patrick Carey

Trang 11

HTML and XHTML HTML and XHTML—Level I Tutorials

Tutorial 1 Developing a Web Page

Creating a Product Page for a Startup Company HTML 1

Tutorial 2 Developing a Web Site

Creating a Web Site for Digital Photography Enthusiasts HTML 61

HTML and XHTML—Level II Tutorials

Tutorial 3 Working with Cascading Style Sheets

Designing a Web Site HTML 121

Tutorial 4 Creating Special Effects with CSS

Adding Advanced Styles to a Web Site HTML 199

Tutorial 5 Working with Web Tables

Creating a Radio Program Schedule HTML 271

HTML and XHTML—Level III Tutorials

Tutorial 6 Working with Web Forms

Creating a Donation Form HTML 345

Tutorial 7 Working with Multimedia

Enhancing a Web Site with Sound, Video, and Applets HTML 409

Tutorial 8 Designing a Web Site with Frames

Using Frames to Organize a Web Site HTML 479

Tutorial 9 Working with XHTML

Creating a Well-Formed, Valid Document HTML 525

Tutorial 10 Programming with JavaScript

Hiding E-mail Addresses on a Library Web Site HTML 563

Additional Cases ADD 1

HTML, XHTML, and DHTML—Level IV Tutorials

Tutorial 11 Working with Operators and Expressions

Creating a New Year’s Day Countdown Clock HTML 617

Tutorial 12 Working with Arrays, Loops, and Conditional Statements

Creating a Monthly Calendar HTML 669

Tutorial 13 Working with Objects and Styles

Creating a Pull-Down Menu HTML 729

Tutorial 14 Working with Forms and Regular Expressions

Validating a Web Form with JavaScript HTML 781

Tutorial 15 Working with the Event Model

Creating a Drag-and-Drop Jigsaw Puzzle HTML 861

Tutorial 16 Working with Dynamic Content and Styles

HTML, XHTML,

and DHTML

Trang 12

Appendix C Placing a Document on the World Wide Web HTML C1 Appendix D Making the Web More Accessible HTML D1 Appendix E HTML and XHTML Elements and Attributes HTML E1 Appendix F Cascading Style Sheets HTML F1 Appendix G JavaScript Objects, Properties, Methods,

and Event Holders HTML G1

Appendix H JavaScript Operators, Keywords,

and Syntactical Elements HTML H1

Appendix I Working with Cookies HTML I1 Appendix J Exploring Filters and Transitions HTML J1 Appendix K Exploring AJAX HTML K1

Trang 13

Table of Contents

Preface v

HTML and XHTML—Level I Tutorials

Tutorial 1 Developing a Web Page

Creating a Product Page for a Startup

Company HTML 1

Session 1.1 HTML 2

Exploring the History of the World Wide Web HTML 2

Networks HTML 2

Locating Information on a Network HTML 3

Web Pages and Web Servers HTML 3

Introducing HTML HTML 4

The History of HTML HTML 5

Tools for Creating HTML Documents HTML 7

Creating an HTML Document HTML 8

Marking Elements with Tags HTML 9

The Structure of an HTML Document HTML 10

Defining the Page Title HTML 12

Adding Comments HTML 13

Displaying an HTML File HTML 14

Session 1.1 Quick Check HTML 15

Working with Block-Level Elements HTML 16

Working with Headings HTML 16

Marking Paragraph Elements HTML 18

White Space and HTML HTML 19

Marking a Block Quote HTML 20

Marking a List HTML 22 Ordered Lists HTML 22 Unordered Lists HTML 23 Nesting Lists HTML 24 Definition Lists HTML 25 Exploring Other Block-Level Elements HTML 27 Working with Inline Elements HTML 29 Character Formatting Elements HTML 29 Using the Generic Elements: div and span HTML 32 Session 1.2 Quick Check HTML 33

Using Element Attributes HTML 34 The Style Attribute HTML 34 Presentational Attributes HTML 37 Working with Empty Elements HTML 37 Marking a Horizontal Rule HTML 39 Inserting an Inline Image HTML 41 Working with Character Sets and Special

Characters HTML 42 Character Sets HTML 42 Numeric Character References HTML 43 Character Entity References HTML 43 Special Characters HTML 45 Session 1.3 Quick Check HTML 48 Tutorial Summary HTML 49 Key Terms HTML 49 Review Assignments HTML 50

Trang 14

Case Problems HTML 52

Quick Check Answers HTML 58

Tutorial 2 Developing a Web Site

Creating a Web Site for Digital

Creating a Hypertext Link HTML 67

Specifying a Folder Path HTML 69

Absolute Paths HTML 71

Relative Paths HTML 71

Changing the Base HTML 72

Linking to Locations within Documents HTML 74

Using the id Attribute HTML 74

Linking to an id HTML 76

Creating Links between Documents HTML 78

Working with Linked Images and Image Maps HTML 81

Introducing Image Maps HTML 81

Client-Side Image Maps HTML 82

Defining Hotspots HTML 82

Applying an Image Map HTML 86

Server-Side Image Maps HTML 88

Linking to Resources on the Internet HTML 89 Introducing URLs HTML 89 Linking to a Web Site HTML 90 Linking to FTP Servers HTML 92 Linking to a Local File HTML 93 Linking to an E-Mail Address HTML 94 Working with Hypertext Attributes HTML 98 Opening a Secondary Window or Tab HTML 99 Creating a Tooltip HTML 100 Creating a Semantic Link HTML 101 Using the Link Element HTML 102 Working with Metadata HTML 103 Using the Meta Element HTML 103 Applying Metadata to the Communication

Stream HTML 105 Session 2.3 Quick Check HTML 106 Tutorial Summary HTML 107 Key Terms HTML 107 Review Assignments HTML 108 Case Problems HTML 110 Quick Check Answers HTML 117 Reality Check HTML 119

HTML and XHTML—Level II Tutorials Tutorial 3 Working with Cascading Style Sheets

Designing a Web Site HTML 121

Introducing CSS HTML 122 The History of CSS HTML 124 Applying a Style Sheet HTML 126

Trang 15

Using Inline Styles HTML 126

Using an Embedded Style Sheet HTML 126

Using an External Style Sheet HTML 127

Adding Style Comments HTML 128

Linking to an External Style Sheet HTML 129

Setting up Alternate Style Sheets HTML 131

Understanding Cascading Order HTML 132

Style Precedence HTML 132

Style Inheritance HTML 134

Applying a Style to a Specific ID HTML 134

Working with Color in HTML and CSS HTML 135

Color Values HTML 135

Using Color Names HTML 136

Defining Text and Background Colors HTML 138

Working with Fonts and Text Styles HTML 140

Choosing a Font HTML 140

Setting the Font Size HTML 143

Controlling Spacing and Indentation HTML 146

Applying Font Features HTML 149

Aligning Text Vertically HTML 152

Combining All Text Formatting in a

Single Style HTML 152

Working with Images HTML 153

Working with GIF Images HTML 154

Floating an Element HTML 162 Working with the Box Model HTML 165 Margin Styles HTML 166 Padding Styles HTML 168 Border Styles HTML 168 Width and Height Styles HTML 171 Controlling Page Layout with div Containers HTML 174 Setting the Display Style HTML 180 Session 3.3 Quick Check HTML 184 Tutorial Summary HTML 185 Key Terms HTML 185 Review Assignments HTML 186 Case Problems HTML 188 Quick Check Answers HTML 197

Tutorial 4 Creating Special Effects with CSS

Adding Advanced Styles to a Web Site HTML 199

Working with Selector Patterns HTML 200 Contextual Selectors HTML 201 Attribute Selectors HTML 203 Applying a Selector Pattern HTML 205 Applying Styles to Lists HTML 207 Choosing a List Style Type HTML 207 Defining the List Position and Layout HTML 211

Trang 16

Working with Classes HTML 213

Using Pseudo-Classes and Pseudo-Elements HTML 215

Creating a Link Rollover HTML 216

Creating a Drop Cap HTML 218

Generating Text with Pseudo-Elements HTML 221

Positioning Objects with CSS HTML 222

The Position Style HTML 226

Absolute Positioning HTML 227

Relative Positioning HTML 230

Fixed and Inherited Positioning HTML 231

Working with Overflow and Clipping HTML 234

Using Print Styles HTML 248

Page Pseudo-Classes and Named Pages HTML 248

Setting the Page Size HTML 249

Working with Page Breaks HTML 250

Preventing a Page Break HTML 251

Working with Widows and Orphans HTML 251

Session 4.3 Quick Check HTML 255 Tutorial Summary HTML 256 Key Terms HTML 256 Review Assignments HTML 257 Case Problems HTML 260 Quick Check Answers HTML 269

Tutorial 5 Working with Web Tables

Creating a Radio Program Schedule HTML 271

Introducing Web Tables HTML 272 Marking Tables and Table Rows HTML 273 Marking Table Headings and Table Data HTML 274 Adding a Table Border HTML 277 Spanning Rows and Columns HTML 279 Creating a Table Caption HTML 284 Marking Row Groups HTML 286 Marking Column Groups HTML 288 Adding a Table Summary HTML 290 Session 5.1 Quick Check HTML 292

Formatting Tables with HTML Attributes HTML 292 Setting Cell Spacing with HTML HTML 292 Setting Cell Padding with HTML HTML 293 Setting Table Widths and Heights in HTML HTML 294 Setting Row Heights with HTML HTML 295 Formatting Table Borders with HTML HTML 296 Aligning Cell Contents with HTML HTML 297 Vertical Alignment in HTML HTML 298

Trang 17

Formatting Tables with CSS HTML 299

Table Border Styles HTML 300

Applying Styles to Rows and Columns HTML 304

Using the Width and Height Styles HTML 306

Caption Styles HTML 310

Applying Table Styles to Other Page Elements HTML 311

Using Tables for Page Layout HTML 313

Introducing the Jigsaw Layout HTML 314

Defining the Structure of a Jigsaw Table HTML 315

Adding the Rounded Border HTML 320

Adding the Box Content HTML 322

Exploring the Controversy over Table Layouts HTML 324

Creating a Rounded Box Using div Containers HTML 326

Nesting div Containers HTML 326

HTML and XHTML—Level III Tutorials

Tutorial 6 Working with Web Forms

Creating a Donation Form HTML 345

Introducing Web Forms HTML 346

Parts of a Web Form HTML 346

Forms and Server-Based Programs HTML 347

Creating a Web Form HTML 348 Creating a Field Set HTML 351 Creating Input Boxes HTML 353 Adding Field Labels HTML 355 Working with Form Styles and HTML Attributes HTML 357 Setting the Width of an Input Box HTML 361 Setting the Maximum Width of an Input Box HTML 362 Setting a Default Value for a Field HTML 363 Session 6.1 Quick Check HTML 365

Creating Option Buttons HTML 366 Creating a Selection List HTML 370 Grouping Selection Options HTML 371 Setting the Selection List Size HTML 372 Allowing for Multiple Selections HTML 377 Working with Check Boxes HTML 378 Working with Text Area Controls HTML 380 Session 6.2 Quick Check HTML 384

Working with Form Buttons HTML 385 Creating a Command Button HTML 385 Creating Submit and Reset Buttons HTML 385 Designing a Custom Button HTML 388 Creating File Buttons HTML 388 Creating Image Field Buttons HTML 389 Working with Hidden Fields HTML 390 Working with Form Attributes HTML 391 Using the mailto Action HTML 393 Session 6.3 Quick Check HTML 394 Tutorial Summary HTML 394

Trang 18

Key Terms HTML 394

Review Assignments HTML 395

Tutorial 7 Working with Multimedia

Enhancing a Web Site with Sound, Video,

and Applets HTML 409

Introducing Multimedia HTML 410

Multimedia and Bandwidth HTML 411

External and Embedded Media HTML 412

Exploring Digital Audio HTML 413

Working with Embedded Objects HTML 417

Object Data Sources and MIME Types HTML 417

Setting the Object Width and Height HTML 419

Working with Parameters HTML 421

Working with ActiveX Components HTML 424

The classid Attribute HTML 425

The codebase Attribute HTML 425

Internet Explorer Conditional Comments HTML 427

Creating Background Sound HTML 429

Exploring Digital Video HTML 431

Data Rates and Video Quality HTML 431

Video File Formats HTML 432

Media Players HTML 434

Working with Flash HTML 434

Embedding a Flash Player HTML 435

Flash Parameters HTML 438

Exploring QuickTime Video HTML 439 Exploring Windows Media Player HTML 443 Introducing the embed Element HTML 446 Nesting Embedded Objects HTML 448 Session 7.2 Quick Check HTML 453

Introducing Java HTML 454 Working with Java Applets HTML 455 Embedding a Java Applet HTML 456 Inserting Java Parameters HTML 457 Exploring the Applet Element HTML 463 Embedding Other Objects HTML 464 Inserting Inline Images HTML 464 Embedding an HTML file HTML 464 Session 7.3 Quick Check HTML 466 Tutorial Summary HTML 466 Key Terms HTML 466 Review Assignments HTML 467 Case Problems HTML 469 Quick Check Answers HTML 476

Tutorial 8 Designing a Web Site with Frames

Using Frames to Organize a Web Site HTML 479

Introducing Frames HTML 480 Planning Your Frames HTML 482 Creating a Frameset HTML 483 Specifying Frame Size and Orientation HTML 484 Creating a Frame HTML 487 Nesting Framesets HTML 488

Trang 19

Formatting a Frame HTML 490

Hiding and Displaying Scroll Bars HTML 490

Setting Frame Margins HTML 491

Controlling Frame Resizing HTML 493

Working with Frames and Links HTML 494

Using Reserved Target Names HTML 498

Using the noframes Element HTML 502

Working with Frame Borders HTML 506

Setting the Frame Border Color HTML 506

Setting the Frame Border Width HTML 507

Creating Inline Frames HTML 509

Tutorial Summary HTML 514

Key Terms HTML 514

Tutorial 9 Working with XHTML

Creating a Well-Formed, Valid

Testing under XHTML Transitional HTML 542 Testing under XHTML Strict HTML 547 Using Style Sheets and XHTML HTML 552 Session 9.2 Quick Check HTML 554 Tutorial Summary HTML 554 Key Terms HTML 554 Review Assignments HTML 555 Case Problems HTML 556 Quick Check Answers HTML 561

Tutorial 10 Programming with JavaScript

Hiding E-Mail Addresses on a Library Web Site HTML 563

Introducing JavaScript HTML 564 Server-Side and Client-Side Programming HTML 566 The Development of JavaScript HTML 568 Working with the Script Element HTML 569 Creating a Script Element .HTML 569 Placing the Script Element .HTML 570 Writing a JavaScript Statement .HTML 571

Trang 20

Writing Output to a Web Document HTML 571

The document.write() Method .HTML 573

Understanding JavaScript Syntax HTML 575

Working with Variables HTML 578

Declaring a Variable .HTML 578

Assigning a Value to a Variable .HTML 578

Working with Data Types .HTML 580

Creating a JavaScript Function HTML 583

Calling a Function HTML 584

Creating a Function to Return a Value HTML 588

Accessing an External JavaScript File HTML 590

Commenting JavaScript Code HTML 594

Inserting Single-Line and Multiline

Comments .HTML 594

Using Comments to Hide JavaScript Code HTML 596

Debugging Your JavaScript Programs HTML 597

Debugging Tools and Techniques .HTML 599

Creating an Online Newsletter ADD 15

HTML, XHTML, and DHTML—

Level IV Tutorials Tutorial 11 Working with Operators and Expressions

Creating a New Year’s Day Countdown Clock HTML 617

Introducing onevent Processing HTML 618 Understanding Events and Event Handlers HTML 620 Working with Date Objects HTML 623 Retrieving the Date, Month, and Hour Values HTML 624 Retrieving the Hour, Minute, and Second

Values HTML 625 Setting Date and Time Values HTML 626 Creating a Date and Time Function HTML 627 Session 11.1 Quick Check HTML 629

Working with Operators and Operands HTML 630 Using Arithmetic and Unary Operators HTML 630 Using Assignment Operators HTML 632 Calculating the Days Left in the Year HTML 633 Working with the Math Object and Math

Methods HTML 636 Using Math Methods HTML 637 Using Math Constants HTML 638 Calculating the Hours, Minutes, and Seconds

Left in the Year HTML 640

Trang 21

Controlling How JavaScript Works with

Numeric Values HTML 643

Handling Illegal Operations HTML 643

Specifying the Number Format HTML 644

Converting Between Numbers and

Text Strings HTML 644

Working with Conditional, Comparison, and

Logical Operators HTML 647

Using a Conditional Operator HTML 647

Using Comparison Operators HTML 647

Using Logical Operators HTML 648

Running Timed Commands HTML 651

Working with Time-Delayed Commands HTML 652

Running Commands at Specified Intervals HTML 652

Tutorial 12 Working with Arrays, Loops, and

Conditional Statements

Creating a Monthly Calendar HTML 669

Introducing the Monthly Calendar HTML 670

Reviewing the Calendar Style Sheet HTML 672

Adding the calendar() Function HTML 672

Working with Arrays HTML 673

Creating and Populating an Array HTML 674

Working with Array Length HTML 678

Reversing an Array HTML 679

Sorting an Array HTML 680 Extracting and Inserting Array Items HTML 681 Session 12.1 Quick Check HTML 684

Working with Program Loops HTML 684 Exploring the For Loop HTML 685 Using For Loops and Arrays HTML 688 Exploring the While Loop HTML 689 Exploring the Do/While Loop HTML 690 Working with Conditional Statements HTML 692 Exploring the If Statement HTML 693 Nesting If Statements HTML 694 Exploring the If Else Statement HTML 695 Using Multiple Else If Statements HTML 696 Exploring the Switch Statement HTML 697 Session 12.2 Quick Check HTML 698

Creating the calendar() Function HTML 699 Setting the First Day of the Month HTML 700 Placing the First Day of the Month HTML 701 Writing the Calendar Days HTML 702 Highlighting the Current Date HTML 705 Setting the Calendar Date HTML 707 Managing Program Loops and Conditional

Statements HTML 709 Exploring the break Command HTML 709 Exploring the continue Command HTML 709 Exploring Statement Labels HTML 710 Session 12.3 Quick Check HTML 712

Trang 22

Tutorial 13 Working with Objects and Styles

Creating a Pull-Down Menu HTML 729

Introducing Pull-Down Menus HTML 730

Introducing Objects, Properties, Methods,

and Events HTML 732

Exploring the Document Object Model HTML 733

Development of a Common DOM HTML 733

The Document Tree HTML 735

Referencing Objects HTML 735

Object Names HTML 735

Working with Object Collections HTML 736

Referencing Objects by Name and ID HTML 738

Working with Object Properties HTML 740

Object Properties and HTML Attributes HTML 740

Object Properties and CSS Styles HTML 741

Creating an Array of Menus HTML 742

Exploring Object Methods HTML 744

Working with Event Handlers HTML 745

Programming a Pull-Down Menu HTML 747

Using the this Keyword HTML 749

Adding Handlers for Mouse Events HTML 753

Animating a Pull-Down Menu HTML 756 Creating Other Types of Menus HTML 760 Creating Pop-Up Menus HTML 760 Creating Sliding Menus HTML 760 Creating Tabbed Menus HTML 762 Exploring Custom Objects HTML 763 The new Operator HTML 763 Defining Customized Properties HTML 764 Running Object Constructors HTML 764 Creating Customized Methods HTML 765 Session 13.3 Quick Check HTML 766 Tutorial Summary HTML 767 Review Assignments HTML 768 Case Problems HTML 770 Quick Check Answers HTML 778

Tutorial 14 Working with Forms and Regular Expressions

Validating a Web Form with JavaScript HTML 781

Working with Forms and Fields HTML 782 Referencing a Web Form HTML 784 Referencing a Form Element HTML 785 Working with Input Fields HTML 786 Setting the Field Value HTML 786 Navigating Between Fields HTML 787 Working with Selection Lists HTML 789

Trang 23

Working with Option Buttons and Check Boxes HTML 793

Using Option Buttons HTML 793

Working with Check Boxes HTML 796

Creating Calculated Fields HTML 796

Working with Text Strings HTML 806

Using the String Object HTML 807

Calculating the Length of a Text String HTML 808

Working with String Object Methods HTML 810

Formatting Text Strings HTML 816

Introducing Regular Expressions HTML 818

Creating a Regular Expression HTML 818

Matching a Substring HTML 819

Setting Regular Expression Flags HTML 820

Defining Character Positions HTML 821

Defining Character Types and Character

Classes HTML 823

Specifying Repeating Characters HTML 826

Using Escape Sequences HTML 828

Specifying Alternate Patterns and Grouping HTML 829

Working with the Regular Expression Object HTML 831

Exploring Regular Expression Methods HTML 831

Validating a Zip Code Using Regular

Expressions HTML 834

Validating Financial Data HTML 835 Removing Blank Spaces from Credit Card

Numbers HTML 836 Validating Credit Card Number Patterns HTML 837 Testing with the Luhn Formula HTML 839 Passing Data Between Forms HTML 842 Appending Form Data HTML 842 Extracting a Substring from a URL HTML 842 Extracting Form Data from a Substring HTML 843 Session 14.3 Quick Check HTML 844 Tutorial Summary HTML 845 Review Assignments HTML 846 Case Problems HTML 849 Quick Check Answers HTML 858

Tutorial 15 Working with the Event Model

Creating a Drag-and-Drop Jigsaw Puzzle HTML 861

Setting up the Jigsaw Puzzle HTML 862 Introducing the Event Model HTML 868 TheW3C and IE Event Models HTML 870 Event Bubbling and Event Capturing HTML 870 Attaching and Listening for Events HTML 872 Removing Events HTML 874 Session 15.1 Quick Check HTML 877

Introducing the Event Object HTML 877 Working with IE Event Object HTML 878 Working with the W3C Event Object HTML 878 Reconciling the Two Event Objects HTML 879 Locating the Source of an Event HTML 880

Trang 24

Working with Mouse Events HTML 883

Determining the Mouse Position HTML 883

Creating a Function for Mouse Movement HTML 886

Dropping the Puzzle Piece HTML 888

Refining the Jigsaw Puzzle HTML 889

Keeping Dragged Items on Top HTML 889

Preventing Hidden Pieces HTML 890

Snapping a Piece to the Puzzle Grid HTML 892

Formatting a Drag-and-Drop Action HTML 895

Setting the Cursor Style HTML 895

Highlighting the Grid Square HTML 897

Working with Keyboard Events HTML 901

Reviewing Keyboard Events HTML 902

Keyboard Event Properties HTML 903

Toggling Between Modes in the

Jigsaw Puzzle HTML 906

Selecting a Piece with the Keyboard HTML 908

Moving a Piece with the Keyboard HTML 910

Understanding the keypress Event and

Character Codes HTML 912

Controlling and Canceling Events HTML 914

Controlling Event Propagation HTML 914

Tutorial 16 Working with Dynamic Content and Styles

Creating a Dynamic Table of Contents HTML 935

Introducing Dynamic Content HTML 936 Examining the Table of Contents HTML 936 Inserting HTML Content into an Element HTML 938 Exploring innerText and textContent HTML 939 Working with Nodes HTML 940 Using a Node Tree HTML 941 Determining Node Types, Names,

and Values HTML 942 Nodes from the Sample Node Tree HTML 944 Creating and Attaching Nodes HTML 944 Creating a List of Heading Elements HTML 948 Looping Through a Child Node Collection HTML 948 Matching the Heading Elements HTML 950 Creating the List Item Elements HTML 952 Session 16.1 Quick Check HTML 953

Creating a Nested List HTML 954 Working with Attributes HTML 961 Creating Attribute Nodes HTML 962 Setting the Section Heading IDs HTML 964 Inserting Links HTML 965 Session 16.2 Quick Check HTML 968

Trang 25

Expanding and Collapsing a Document HTML 969

Creating a Plus/Minus Box HTML 969

Adding an Event Handler to the Plus/Minus

Boxes HTML 972

Hiding and Displaying the Nested Lists HTML 973

Expanding and Collapsing the Source

Document HTML 975

Testing the Dynamic Table of Contents HTML 980

Switching Between Style Sheets HTML 982

Working with the Link Element HTML 986

Initializing the Style Sheets HTML 990

Switching Between Style Sheets HTML 991

Working with the Style Sheets Object

Appendix B HTML Character Entities HTML B1

Appendix C Placing a Document on the

World Wide Web HTML C1

Appendix D Making the Web More

Accessible HTML D1

Working with Section 508 Guidelines HTML D2 Graphics and Images HTML D2 Multimedia HTML D4 Color HTML D4 Style Sheets HTML D6 Image Maps HTML D6 Tables HTML D7 Frame Sites HTML D10 Animation and Scrolling Text HTML D10 Scripts, Applets and Plug-ins HTML D10 Web Forms HTML D11 Links HTML D12 Timed Responses HTML D12 Providing a Text-Only Equivalent HTML D13 Understanding the Web Accessibility Initiative HTML D13 Checking Your Web Site for Accessibility HTML D17

Appendix E HTML and XHTML Elements and Attributes HTML E1

General Attributes HTML E2 Core Attributes HTML E2 Language Attributes HTML E2 Form Attributes HTML E2 Internet Explorer Attributes HTML E3 Event Attributes HTML E3 Core Events HTML E3 Document Events HTML E4 Form Events HTML E4

Trang 26

Internet Explorer Data Events HTML E4

Internet Explorer Events HTML E5

HTML and XHTML Elements and Attributes HTML E6

Appendix F Cascading Style Sheets HTML F1

Attributes and Values HTML F6

Appendix G JavaScript Objects,

Properties, Methods, and Event Holders HTML G1

Appendix H JavaScript Operators,

Keywords, and Syntactical Elements HTML H1

Appendix I Working with Cookies HTML I1

Introducing Cookies HTML I1

Cookies, the Web Server, and CGI Scripts HTML I1

Working with the Cookie Property HTML I2

Appendix K Exploring AJAX HTML K1

Synchronous Communication HTML K2 Asynchronous Communication HTML K3 Exploring the XMLHttpRequest Object HTML K5 XMLHttpRequest Methods HTML K6 XMLHttpRequest Properties HTML K7 Exploring the Disadvantages of AJAX HTML K9 Appendix Summary HTML K10

Glossary/Index REF 1

Trang 27

ele-ments and markup tags

• Create the basic

• Understand the div

and span elements

Session 1.3

• Add attributes to

HTML elements

• Format page content

using the style attribute

• Mark empty elements

with one-sided tags

• Add an inline image to

a Web page

• Work with character

sets and codes

Starting Data Files

logo.jpg cengage.jpg logo.jpg euler.jpg

demo.gif eulertxt.htmdemo2.gif

demo_characters.htmdemo_html.htm

macbeth.jpg dessertweb.jpg logo.jpgmacbethtxt.htm torte.jpg smith.jpg

tortetxt.htm smith.txt

Developing a Web Page

Creating a Product Page for a Startup Company

Dave Vinet is a machinist in Auburn, Maine In his spare time, Dave builds andjuggles devil sticks—juggling props used in circuses and by street performers Inrecent years, he has made customized sticks for his friends and colleagues

Encouraged by their enthusiasm for his work, Dave has decided to start a ness called Dave’s Devil Sticks So far his customers have come through word ofmouth; now Dave wants to advertise his business on the Web To do that, Daveneeds to create a Web page that describes his company and its products Hehas the text describing his company in a flyer that he hands out at jugglingconventions He has also contacted a graphic artist to design a logo He wants

busi-to use this material in his Web page

He has come to you for help in designing a Web page and writing the code Hewants the Web page to contain the same information and graphics contained in hisflyer To create Dave’s Web page, you’ll have to learn how to work with HTML, themarkup language used to create documents on the World Wide Web

Objectives

Trang 28

Session 1.1

Exploring the History of the World Wide Web

Before you start creating a Web page for Dave, it’s helpful to first look at the history ofthe Web and how HTML was developed You’ll start by reviewing networks

Networks

A network is a structure that links several points called nodes allowing for the sharing of

information and services For computer networks, each node is a device such as a computer

or a printer or a scanner, capable of sending and receiving data electronically over the

network A computer node is also called a host to distinguish it from other node devices.

As the network operates, nodes are either providing data to other nodes on the

net-work or requesting data A node that provides information or a service is called a server For example, a print server is a network node that provides printing services to the network; a file server is a node that provides storage space for saving and retrieving files.

A computer or other device that requests services from a server is called a client

Net-works can follow several different designs One of the most commonly used designs is

the client-server network in which several clients access information provided by one or

more servers You might be using such a network to access your data files for this tutorial.Networks can also be classified based on the range they cover A network confined to

a small geographic area, such as within a building or department, is referred to as a local

area network or LAN A network that covers a wider area, such as several buildings or

cities, is called a wide area network or WAN Wide area networks typically consist of

two or more local area networks connected together

The largest WAN is the Internet The origins of the Internet can be traced backed to a

WAN called the ARPANET, which started with two network nodes located at UCLA and Stanford connected by a single phone line Today, the Internet has grown to an uncountable

number of nodes involving computers, cell phones, PDAs, MP3 players, gaming systems,and television stations The physical structure of the Internet uses fiber-optic cables, satellites,phone lines, wireless access points, and other telecommunications media, enabling a world-wide community to communicate and share information See Figure 1-1 It is within thisexpansive network that Dave wants to advertise his devil sticks business

Structure of the Internet Figure 1-1

phone line connection

fiber-optic cable connection satellite connection

phone line connection

fiber-optic cable connectionsatellite connection

Trang 29

Locating Information on a Network

One of the biggest obstacles to effectively using a network is not mechanical—it’s the

human element Users must be able to easily navigate the network and locate the

infor-mation and services they need Most of the early Internet tools required users to master a

bewildering array of terms, acronyms, and commands Because network users had to be

well versed in computers and network technology, Internet use was limited to universities

and departments of the government To make the Internet accessible to the general

pub-lic, it needed a simpler interface This interface proved to be the World Wide Web

The foundations for the World Wide Web, or the Web for short, were laid in 1989 by

Timothy Berners-Lee and other researchers at the CERN nuclear research facility near

Geneva, Switzerland They needed an information system that would make it easy for

their researchers to locate and share data with minimal training and support To meet this

need, they developed a system of hypertext documents that enabled users to easily

navi-gate from one topic to another Hypertext is a method of organization in which

informa-tion is not presented linearly, but in whatever order is requested by the user For example,

if you read the operating manual for your car starting with page 1 and proceeding to the

end, you are processing the information linearly and in the order determined by the

manual’s author A hypertext approach would place the same information in a series of

smaller documents, with each document dedicated to a single topic, allowing you—and

not the author—to choose the order and selection of topics you’ll view

The key to hypertext is the use of links, which are the elements in a hypertext

docu-ment that allow you to jump from one topic or docudocu-ment to another, usually by clicking

a mouse button Hypertext is ideally suited to use with networks because the end user

does not need to know where a particular document, information source, or service is

located—he or she only needs to know how to activate the link In the case of an

expan-sive network like the Internet, documents can be located anywhere in the world; but that

is largely unseen by the user because of the hypertext structure The fact that the Internet

and the World Wide Web are synonymous in many users’ minds is a testament to the

success of the hypertext approach

The original Web supported only textual documents, but the use of hypertext links has

expanded through the years to encompass information in any form, including video,

sound, interactive programs, conferencing, and online gaming While the Web has

greatly expanded to include these services, the basic foundation is still the same: a

col-lection of interconnected documents linked through the use of hypertext

Web Pages and Web Servers

Each document on the World Wide Web is referred to as a Web page Web pages are

stored on Web servers, which are computers that make Web pages available to any

device connected to the Internet To view a Web page, the end user’s device needs a

soft-ware program called a Web browser, which retrieves the page from the Web server and

renders it on the user’s computer or other device See Figure 1-2

Trang 30

Using a browser to view a Web document from a Web server Figure 1-2

The World Wide Web

a client in Sydneyretrieves the documentusing a Web browser

a server in San Franciscostores the Web document

The earliest browsers, known as text-based browsers, were limited to displaying only

text Today’s browsers are capable of displaying text, images, video, sound, andanimations In the early days of the Internet, Web browsing was limited to computers.Now browsers are installed on cell phones, PDAs (personal digital assistants), MP3 play-ers, and gaming systems How does a Web page work with so many combinations ofbrowsers and clients and devices? To understand, you need to look at how Web pagesare created

There are several things that HTML is not While Web pages often contain interactiveprograms, HTML is not a programming language In addition, while HTML can describethe content of a document, it is not a formatting language because it does not necessarilydescribe how content should be rendered This is a necessary facet of HTML: the Webpage author has no control over what device is used to view the Web page, so thebrowser—not the HTML—determines how the Web page will look The end user might

be using a large-screen television monitor, a cell phone, or even a device that rendersWeb pages in Braille or in aural speech

If you want to format your document, the preferred method is to use styles Styles are

formatting rules written in a separate language from HTML telling the browser how torender each element for particular devices A Web page author can write a style that dis-plays page headings one way for computer monitors and another way for printed output.You’ll explore some basic styles as you create your first Web pages

Trang 31

The History of HTML

HTML evolved as the Web itself evolved Thus in order to fully appreciate the nuances of

HTML, it’s a good idea to review the language’s history The first popular markup

lan-guage was the Standard Generalized Markup Lanlan-guage (SGML) Introduced in the 1980s,

SGML is device- and system-independent, meaning that it can be applied to almost any

type of document stored in almost any format While powerful, SGML is also quite

complex; and for this reason SGML is limited to those organizations that can afford the

cost and overhead of maintaining complex SGML environments However, SGML can

also be used to create other markup languages that are tailored to specific tasks and are

simpler to use and maintain HTML is one of the languages created with SGML

In the early years after HTML was created, no single organization was responsible for

the language Web developers were free to define and modify HTML in whatever ways

they thought best Eventually, competing browsers, seeking to dominate the market,

added new features called extensions to the language The two major browsers during

the 1990s, Netscape Navigator and Microsoft Internet Explorer, added the most

exten-sions to HTML Netscape provided an extension to add background sounds to

docu-ments, while Internet Explorer added an extension to provide marquee-style text that

would scroll automatically across the page These extensions and others provided Web

page authors with more options, but at the expense of complicating Web page

development A Web page that took advantage of extensions might work in one browser

but not in another

Thus Web page authors faced the challenge of determining which browser or browser

version supported a particular extension, and they had to create a workaround for

brows-ers that did not By adding this layer of complexity to Web design, extensions, while

often useful, diminished the promise of simplicity that made HTML so attractive in the

first place

Ultimately, a group of Web developers, programmers, and authors called the World

Wide Web Consortium, or the W3C, created a set of standards or specifications that all

browser manufacturers were to follow The W3C has no enforcement power; but because

a uniform language is in everyone’s best interest, the W3C’s recommendations are usually

followed, though not always right away The W3C also provides online tutorials,

docu-mentation, and quizzes that you can use to test your knowledge of HTML and other

languages For more information on the W3C and the services it offers, see its Web site at

www.w3c.org.

Figure 1-3 summarizes the various versions of HTML that the W3C has released over

the past decade While you may not grasp all of the details of these versions yet, it’s

important to understand that HTML doesn’t come in only one version

Trang 32

History of HTML and XHTML Figure 1-3

Version Date of

Release

Description

HTML 1.0 1989 The first public version of HTML which included browser support for inline

images and text controls

HTML 2.0 1995 The first version supported by all graphical browsers It introduced interactive

form elements such as option buttons and text boxes A document written tothe HTML 2.0 specification is compatible with almost all browsers on the WorldWide Web

HTML 3.0 1996 A proposed replacement for HTML 2.0 that was never widely adopted.HTML 3.2 1997 This version included additional support for creating and formatting tables and

expanded the options for interactive form elements It also supported limitedprogramming using scripts

HTML 4.01 1999 This version added support for style sheets to give Web designers greater

con-trol over page layout It added new features to tables and forms and providedsupport for international features This version also expanded HTML’s scriptingcapability and added increased support for multimedia elements

HTML 5.0 not yet

released

This version supports elements that reflect current Web usage, including ments for Web site navigation and indexing for use with search engines Thisversion also removes support for purely presentational elements because thoseeffects can be better handled with styles

ele-XHTML 1.0 2001 This version is a reformulation of HTML 4.01 in XML and combines the strength

of HTML 4.0 with the power of XML XHTML brings the rigor of XML to Webpages and provides standards for more robust Web content on a wide range ofbrowser platforms

XHTML 1.1 2002 A minor update to XHTML 1.0 that allows for modularity and simplifies writing

extensions to the language

XHTML 2.0 not yet

released

The latest version, designed to remove most of the presentational features left

in HTML XHTML 2.0 is not backward compatible with XHTML 1.1

tures of HTML are often deprecated, or phased out, by the W3C While deprecated

fea-tures might not be supported in current or future browsers, that doesn’t mean that youwon’t encounter them—indeed, if you are supporting older browsers that recognize onlyearly versions of HTML, you might need to use them Because it’s hard to predict howquickly deprecated features will disappear from common usage, it’s crucial to be familiarwith them

Current Web developers are increasingly using XML (Extensible Markup Language), a

language for creating markup languages, like SGML, but without SGML’s complexity andoverhead Using XML, developers can create documents that obey specific rules for theircontent and structure This is in contrast with a language like HTML, which supported awide variety of rules but did not include a mechanism for enforcing those rules

Indeed, one of the markup languages created with XML is XHTML (Extensible

Hypertext Markup Language), a stricter version of HTML XHTML is designed to confront

some of the problems associated with the various competing versions of HTML and tobetter integrate HTML with other markup languages like XML The current version ofXHTML is XHTML 1.1, which is mostly (but still not completely) supported by all

Tip

You can learn more about

deprecated features by

examining the

documenta-tion available at the W3C

Web site and by viewing

the source code of various

pages on the Web.

Trang 33

browsers Because XHTML is an XML version of HTML, most of what you learn about

HTML can be applied to XHTML

Another version of XHTML, XHTML 2.0, is still in the draft stage and has proved to be

controversial because it is not backward-compatible with earlier versions of HTML and

XHTML In response to this controversy, another working draft of HTML called HTML 5.0

is being developed It provides greater support for emerging online technology while still

providing support for older browsers HTML 5 is also being developed under the XML

specifications as XHTML 5.0 At the time of this writing, none of these versions has

moved beyond the development stage nor has been adopted by the major browsers This

book discusses the syntax of HTML 4.01 and XHTML 1.1, but also brings in deprecated

features and browser-supported extensions where appropriate

Writing HTML Code | InSight

Part of writing good HTML code is being aware of the requirements of various browsers and

devices as well as understanding the different versions of the language Here are a few

guidelines for writing good HTML code:

• Become well versed in the history of HTML and the various versions of HTML and XHTML

Unlike other languages, HTML’s history does impact how you write your code

• Know your market Do you have to support older browsers, or have your clients

standard-ized on one particular browser or browser version? Will your Web pages be viewed on a

single device like a computer, or do you have to support a variety of devices?

• Test your code on several different browsers and browser versions Don’t assume that if

your page works in one browser it will work on other browsers or even on earlier versions

of the same browser Also check on the speed of the connection A large file that

per-forms well under a high-speed connection might be unusable under a dial-up connection

• Read the documentation on the different versions of HTML and XHTML at the W3C Web

site and review the latest developments in new versions of the languages

In general, any HTML code that you write should be compatible with the current versions of

the following browsers: Internet Explorer (Windows), Firefox (Windows and Macintosh),

Netscape Navigator (Windows), Opera (Windows), and Safari (Macintosh)

Tools for Creating HTML Documents

Because HTML documents are simple text files, you can create them with nothing more

than a basic text editor such as Windows Notepad Specialized HTML authoring

pro-grams, known as HTML converters and HTML editors, are also available to perform some

of the rote work of document creation An HTML converter is a program that translates

text written in another language into HTML code You can create the source document

with a word processor such as Microsoft Word, and then use the converter to save the

document as an HTML file Converters free you from the laborious task of typing HTML

code; and because the conversion is automated, you usually do not have to worry about

introducing coding errors into your document However, converters tend to create large

and complicated HTML files resulting in “bloated” code, which is more difficult to edit if

you need to make changes So while a converter can speed up Web page development,

you will probably still have to invest time in cleaning up the code

An HTML editor is a program that helps you create an HTML file by inserting HTML

codes for you as you work HTML editors can save you a lot of time and can help you work

more efficiently Their advantages and limitations are similar to those of HTML converters

Like converters, HTML editors allow you to set up a Web page quickly, but you will still have

to work directly with the underlying HTML code to create a finished product

Trang 34

Creating an HTML Document

Now that you’ve had a chance to explore some of the history of the Web and HTML’srole in its development, you are ready to work on the Web page for Dave’s Devil Sticks.It’s always a good idea to plan your Web page before you start coding it You can do this

by drawing a sketch or by creating a sample document using a word processor The paratory work can weed out errors or point to potential problems In this case, Dave hasalready drawn up a flyer he’s passed out at juggling and circus conventions The handoutprovides information about Dave’s company and his products Figure 1-4 shows Dave’scurrent flyer

pre-Elements of the Dave’s Devil Sticks flyer Figure 1-4

Trang 35

When you sketch a sample document, it is a good idea to identify the document’s

vari-ous elements An element is a distinct object in the document, like a paragraph, a

head-ing, or the page’s title Even the whole document is considered an element Dave’s flyer

includes several elements: an image displays his company’s logo, several headings break

his flyer into sections, the text in his flyer is laid out in paragraphs, a bulleted list

describes his products, and the address of his company is at the bottom of the flyer Note

that some elements are marked by their appearance in the text For example, the name of

his company is displayed in boldface text at the top of the flyer to set it off from other

text in the opening paragraph Italics are also used in several locations on the page As

you recreate this flyer as a Web page, you should periodically refer to Figure 1-4

Marking Elements with Tags

The core building block of HTML is the tag, which marks the presence of an element If

the element contains content such as text or another element, it is marked using a

two-sided tag in which an opening tag indicates the beginning of the content and a closing

tag indicates the content’s end The syntax of a two-sided tag is:

<element>content</element>

where element is the name of the element and content is any content contained within

the element For example, the following code is used to mark a paragraph element within

a document:

Welcome to Dave's Devil Sticks.

In this example, the tag marks the beginning of the paragraph, the text “Welcome to

Dave’s Devil Sticks.” constitutes the content of the paragraph element and the tag

marks the end of the paragraph

Note that an “element” is an object in the Web document, and a “tag” is the part of the

HTML code that marks the element So you would mark a paragraph element in a document

by enclosing the paragraph content within opening and closing paragraph tags

Elements can also contain other elements For example, the paragraph tags in the

fol-lowing code

Welcome to Dave's Devil Sticks.

enclose both the text of the paragraph as well as another set of tags that are

used to mark content that should be treated by the browser as boldface text Note that

the tags have to be completely enclosed or nested within the tags It’s improper

syntax to have tags overlap as in the following code sample:

Welcome to Dave's Devil Sticks.

In this example, the closing tag is placed after the closing tag, which is

improper because the boldface text marked with these tags must be completely enclosed

within the paragraph.

Trang 36

The Structure of an HTML Document

All documents written in a markup language need to have a root element that contains

all of the elements used in the document For HTML documents, the root element ismarked using the <html> tag as follows

<html>

document content

</html>

where document content is the content of the entire document, including all other

elements The presence of the opening <html> tag in the first line of the file tells anydevice reading the document that this file is written in HTML The closing </html> tagsignals the end of the document and should not be followed by any other content ormarkup tags

Web pages are divided into two main sections: a head and a body The head element

contains information about the document—for example, the document’s title or a list of words that would aid a search engine on the Web identifying this document for other users

key-The body element contains all of the content that will appear on the Web page Taken

together, the syntax of the entire HTML file including the head and body elements is

where head content and body content are the content you want to place within the

document’s head and body Note that the body element is always placed after the headelement and that no other elements can be placed between the html, head, and bodyelements

Reference Window | Creating the Basic Structure of an HTML Document

• Enter the following HTML tags

wherehead content and body content are the content you want to place within the

document’s head and body

• To specify the page title, enter the following tag within the head section

<title>content</title>

wherecontent is the text of the Web page title.

Tip

Enter your tags using all

lowercase letters For

example, use <html>

rather than <HTML> While

many browsers accept

uppercase tag names,

XHTML code requires tag

names to be lowercase.

Trang 37

Now that you’ve learned about the basic structure of an HTML file, you can start

writ-ing the HTML code for Dave’s Web page

To create the basic structure of an HTML document:

1 Start your text editor, opening it to a blank document.

or technical support person for help

2 Type the following lines of code in your document Press the Enter key after each line.

Press theEnter key twice for a blank line between lines of code See Figure 1-5.

Basic structure of an HTML document Figure 1-5

html tag indicates that the markup language is HTML the head section

contains information about the document

the closing html tag signals the end of the document

the body section contains the content displayed by the Web browser

3 Save the file as dave.htm in the tutorial.01\tutorial folder included with your

Data Files

file, make sure you don’t save the file with the extension txt, which is the default

file extension for Notepad Instead, make sure you save the file with the file

exten-sion htm or html Using the incorrect file extenexten-sion might make the file

unread-able to Web browsers, which require file extensions of htm or html

Tip

To make it easier to link to your Web pages, follow the Internet convention in which HTML filenames and folder names use only lowercase letters with no spaces.

Trang 38

InSight | Converting an HTML Document into XHTML

There is considerable overlap between HTML and XHTML You can quickly change an HTMLdocument into an XHTML document just by altering the first three lines of code To convert

an HTML file into an XHTML file, replace the opening <html> tag with the following threelines of code:

<?xml version="1.0" encoding="UTF-8" standalone="no" ?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml11-strict.dtd">

Each line has an important role in converting the HTML document into XHTML XHTMLdocuments are written in XML, so the first line notifies the browser that the document is anXML file The version number—1.0—tells the browser that the file is written in XML 1.0.XHTML files differ from HTML files in that XHTML files have to be tested against a set ofrules that define exactly which markup tags are allowed and how they can be used To refer-ence the set of rules, you have to include a DOCTYPE declaration in the second line of thefile, indicating the collection of rules to be used XHTML documents can be tested againstseveral different rules The code sample above assumes a strict interpretation of the rules isbeing enforced

The third line of the file contains the opening <html> tag In XHTML, the <html> tag mustinclude what is known as a namespace declaration indicating that any markup tags in thedocument should, by default, be considered part of the XHTML language This is necessarybecause XML documents can contain a mixture of several different markup languages andthere must be a way of defining the default language of the document

With these three lines in place, browsers recognize the file as an XHTML rather than anHTML document After these three lines, there is little difference between the code in anHTML file and in an XHTML file

Defining the Page Title

One of the elements you can add to the document head is the document title The syntax

of the document title is

<title>document title</title>

where document title is the text of the document title The document title is not displayed

within the page, but is usually displayed in the browser’s title bar The document title isalso used by search engines like Google or Yahoo! to report on the contents of the file

To add a title to a Web page:

1 Click at the end of the <head> tag, and then press the Enter key to insert a new

line in your text editor

2 Press the Spacebar three times to indent the new line of code, and then type

<title>Dave’s Devil Sticks</title> as shown in Figure 1-6.

Tip

Indent your markup tags

and insert extra blank

spaces as shown in this

book to make your code

easier to read It does not

affect how the page is

ren-dered by the browser.

Trang 39

Defining the page title Figure 1-6

Web page title

Adding Comments

As you create a Web page, you might want to add notes or comments about your code

These comments might include the name of the document’s author and the date the

document was created Such notes are not intended to be displayed by the browser, but

are instead used to help explain your code to yourself and others To add notes or

com-ments, insert a comment tag with the syntax

<! comment >

where comment is the text of the comment or note For example, the following code

inserts a comment describing the page you’ll create for Dave’s business:

<! Page created for Dave Vinet's devil stick business >

A comment can also be spread out over several lines as follows:

<! Dave's Devil Sticks

A Web page created for Dave Vinet >

Because they are ignored by the browser, comments can be added anywhere within the

HTML document

Adding an HTML Comment | Reference Window

• To insert an HTML comment anywhere within your document, enter

<! comment >

wherecomment is the text of the HTML comment.

You’ll add a comment to the head of Dave’s file indicating its purpose, author, and

date created

To add a comment to Dave’s file:

1 Click at the end of the <head> tag, and then press the Enter key to insert a new

line directly above the title element you’ve just entered

2 Type the following lines of code, as shown in Figure 1-7

<! Dave's Devil Sticks

Author: your name

Date: the date

>

whereyour name is your name and the date is the current date.

Trang 40

Adding a comment tag Figure 1-7

multiline comment

Displaying an HTML File

As you continue modifying the HTML code, you should occasionally view the page withyour Web browser to verify that you have not introduced any errors You might evenwant to view the results using different browsers to check for compatibility In this bookWeb pages are displayed using the Windows Internet Explorer 7.0 browser Be aware that

if you are using a different browser or a different operating system, you might see slightdifferences in the layout and appearance of the page

To view Dave’s Web page:

1 Save your changes to the dave.htm file.

2 Start your Web browser You do not need to be connected to the Internet to view

local files stored on your computer

might get a warning message Click the OK button to ignore the message andcontinue

3 After your browser loads its home page, open the dave.htm file from the

tutorial.01\tutorial folder

Open or Open File command under the browser’s File menu If you are still havingproblems accessing the dave.htm file, talk to your instructor or technical resourceperson

Your browser displays the Web page shown in Figure 1-8 Note that the page titleappears in the browser’s title bar; and if your browser supports tabs, it also appears inthe tab title The page itself is empty because you have not yet added any content tothe body element

Định dạng
Số trang	1.203
Dung lượng	31,66 MB