html and web design

Each Tip presents step-by-stepinstructions you can easily perform, as well as solutions you can cut-and-paste into your Web pages.Within the books chapters, you will learn: • The HTML fu

Design Tips & Techniques

Kris Jamsa Konrad King Andy Anderson

All trademarks are trademarks of their respective owners Rather than put a trademark symbol after every rence of a trademarked name, we use names in an editorial fashion only, and to the benefit of the trademarkowner, with no intention of infringement of the trademark Where such designations appear in this book, theyhave been printed with initial caps

occur-McGraw-Hill eBooks are available at special quantity discounts to use as premiums and sales promotions, or foruse in corporate training programs For more information, please contact George Hoare, Special Sales, atgeorge_hoare@mcgraw-hill.com or (212) 904-4069

THE WORK IS PROVIDED “AS IS” McGRAW-HILL AND ITS LICENSORS MAKE NO GUARANTEES

OR WARRANTIES AS TO THE ACCURACY, ADEQUACY OR COMPLETENESS OF OR RESULTS TO BEOBTAINED FROM USING THE WORK, INCLUDING ANY INFORMATION THAT CAN BE ACCESSEDTHROUGH THE WORK VIA HYPERLINK OR OTHERWISE, AND EXPRESSLY DISCLAIM ANY WAR-RANTY, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO IMPLIED WARRANTIES OFMERCHANTABILITY OR FITNESS FOR A PARTICULAR PURPOSE McGraw-Hill and its licensors do notwarrant or guarantee that the functions contained in the work will meet your requirements or that its operationwill be uninterrupted or error free Neither McGraw-Hill nor its licensors shall be liable to you or anyone else for

“process.” Your knowing smiles and not so gentle (but needed)

“Just Do It!” inspired me to see the project through from concept

to completion.–Konrad

To Stephanie,Although you have grown up to become a very special woman,

you will always be our little girl

–Dad

DataFlex, and various SQL database platforms Having worked in the computer field since 1984,Konrad is able to draw from a vast pool of knowledge about what works in the “real world” andwhat does not.

Andy Anderson is a graphics artist and designer and has worked with Photoshop, Illustrator,

and most graphics arts programs for the Web since their release An author and university professor,Andy is also a sought-after lecturer in the U.S., Canada, and Europe The remainder of his time isspent developing curriculum and resource materials for various corporations and seminar companies.His clients include designers and trainers from the U.S government, Boeing, Disneyland, and otherFortune 500 companies

Kris Jamsa is the author of more than 90 computer books, with cumulative sales of several

million copies Kris holds a bachelor of science degree in computer science from the United StatesAir Force Academy, a masters degree in computer science from the University of Nevada, Las Vegas,

a Ph.D in computer science with an emphasis in operating systems from Arizona State University,and a masters of business administration from San Diego State University In 1992, he and his wife,Debbie, founded Jamsa Press, a computer- book publishing company After expanding the company’spresence to 70 countries and 28 languages, they sold Jamsa Press to a larger publishing house Today,Kris is the founder of Jamsa Media Group, which produces high-quality computer books He is alsovery active in analyzing emerging technologies Kris lives on a ranch in Houston, Texas, with his wifeDebbie, their three dogs, and six horses When he is not in front of his PC, Kris is normally ridingand jumping his horse Robin Hood

Contents at a Glance

Chapter 1 HTML Basics xxii

Chapter 2 HTML Tables 62

Chapter 3 HTML Forms 112

Chapter 4 Cascading Style Sheets (CSS) 158

Chapter 5 XHTML and Emerging Trends 220

Chapter 6 Graphics 264

Chapter 7 Animation, Sound, and Video 316

Chapter 8 JavaScript 358

Chapter 9 Java Applets and ActiveX Objects 418

Chapter 10 PHP4 464

Chapter 11 Active Server Pages (ASP) 524

Chapter 12 Security and Performance 586

Index 637

Acknowledgments, xv

Introduction, xv

Chapter 1 HTML Basics xxii

Downloading and Installing the Personal Web Server 16

Managing the Personal Web Server and Publishing Your Web Pages 18

Describing Web Page Contents with a Title 21

Identifying Web Documents Using the Document Type Definition 23

Inserting Comments into a Web Document 24

Specifying the Typeface for Web Page Text 26

Controlling the Flow of Text with Paragraph and Line Break Tags 27

Changing the Size of Text Using Heading Level Tags and the Font Tagsize Attribute 32

Changing the Color of Text in an HTML Document 33

Adding Graphics to a Web Page Using a Basic <img> Tag 35

Changing the Alignment of Text and Graphics 37

Adding a Hypertext Link to a Web Page 40

Enhancing Individual Letters and Words Using Character Formatting Tags 41

Using Symbols and Special Characters in an HTML Document 42

Using Horizontal Rules to Organize Web Content 44

Using Blockquote Tags to Control Left and Right Text Margins 47

Creating Ordered and Unordered Lists 48

Creating Nested Lists 51

Creating Definition Listings 52

Using Preformatted Text Tags to Control the Display of Web Content 54

Displaying a Navigation Menu Within a Web Page Frame 56

Displaying Multiple Web Pages Onscreen at the Same Time 57

Working with Background Images and Colors 78

Determining a Color Attribute’s Value 81

Working with Cell Padding and Cell Spacing 83

Setting Table Dimensions Using Relative or Absolute Values 84

Setting Cell Dimensions Using Relative or Absolute Values 85

Aligning Cell Content Horizontally and Vertically 86

Aligning a Table on a Web Page 89

Controlling the Width and Height of a Cell by Inserting a Transparent GIF 89

Wrapping Text Around an Image 91

Displaying a Gallery of Thumbnails Within a Table 93

Creating Bullets and Lists with Tables and Graphics 96

Creating a Navigation Sidebar Using a Table 97

Adding Images and Links to Table Cells 98

Nesting Tables to Control Borders on a Web Page 99

Approximating an Image Map by Placing Pieces of an Image Within a Table 100

Slicing a Graphic Image into Table Cells to Create a Quick-Loading Web Graphic 102

Reducing the Amount of Time a Web Browser Spends Drawing a Table 103

Simulating Web Page Frames Using a Table 104

Focusing the Viewer’s Attention with Cell Background Colors 107

Aligning Web Page Content Visually with Visible Table Borders 108

Controlling Gutter Size and Margin Width of Text on a Web Page 110

Chapter 3 HTML Forms 112

Creating a Single-Line Input Field on a Form 119

Creating a Multiline Input Field on a Form 120

Validating Text Element Data Prior to Submitting Form Results 122

Placing Check Boxes on a Form 124

Placing Radio Buttons on a Form 126

Validating Radio Button Group Selections Prior to Submitting Form Results 128

Placing a Drop-Down List (Selection Menu) on a Form 129

Passing Values to the Web Server Through Hidden Fields 151

Hiding Visitor Input from View Within a Password Element 152

Adding a Generic Button Object to a Form 153

Enabling and Disabling Form Elements on-the-Fly 154

Chapter 4 Cascading Style Sheets (CSS) 158

Applying Multiple CSS Rules to a Single Selector 170

Selecting a Typeface with thefont-family Property 172

Specifying the Size of Text with thefont-size Property 174

Creating Overlapping Text 177

Aligning Web Page Text 179

Controlling Margins and Line Height 181

Displaying Text Within Columns 183

Working with Borders 186

Indenting Paragraphs and Controlling Letter, Word, and Line Spacing 188

Offsetting Text with Initial Caps 189

Customizing the Appearance of Hyperlinks 191

Creating a Drop-Shadow Effect 192

Applying a Border Graphic 194

Positioning Background Images and Watermarks 196

Floating Images and Text 199

Customizing the Appearance of Lists 201

Creating Text and Image Effects with Filters 203

Aligning Labels with Form Elements and Adding Color to Forms 206

Displaying a Gallery of Thumbnails with Captions 209

Controlling the Cursor 212

Layering Web Page Elements 214

Sending Your Style Sheet Through a Validator 216

Chapter 5 XHTML and Emerging Trends 220

Converting HTML to XHTML Using HTML Tidy 233

Embedding Fonts Within an XHTML Web Page with CSS Rules 249

Inserting an XHTML Page Within Another with an Inline Frame 251

Updating Multiple XHTML Page Inline Frames at Once 255

Changing XHTML Page Appearance Based on Media Type 257

Controlling the Way the Web Browser Prints an XHTML Web Page 261

Chapter 6 Graphics 264

Working with Cross-Platform Issues When Creating Graphics Images for the Web 274

Specifying Image Dimensions Within an Image Tag 277

Working with thealt Attribute and Text-Only Viewers 278

Creating a Tool Tip by Inserting atitle Attribute in an Image Tag 281

Compressing Photographs into a JPEG File 283

Saving Clip Art and Text to a GIF-Formatted File 286

Making Images Appear to Load Faster 288

Working with the PNG-8 and PNG-24 File Formats 290

Converting Graphics into Web Images with Image-Editing Programs 291

Creating Web-Friendly Graphics Images on Your Scanner 292

Creating Colorful Horizontal Rules 294

Retrieving a Fast-Loading “Teaser” Image with thelowsrc Attribute 296

Ensuring Accurate Color Presentation with the Web-Safe Color Palette 298

Creating Graphical Hyperlink Anchors 300

Creating Tiled Backgrounds from Graphics Images 301

Creating Transparency in a GIF Image 304

Retrieving Full-Size Images after Clicking on Thumbnails 307

Preloading and Caching Images Behind the Scenes 309

Expanding the Web-Safe Color Palette with Dithering Techniques 311

Smoothing the Edges of Text Converted into a Graphic Through Anti-Aliasing 313

Chapter 7 Animation, Sound, and Video 316

Creating a GIF Animation from Scratch 334

Controlling GIF Animation Through Internal Settings 336

Creating a Banner Ad Using GIF Animation 338

Creating Smooth Transitions Between GIF Animation Frames Using Tweening 341

Incorporating a Completed Flash Splash Screen into a Web Site 342

Creating a Flash Movie from Scratch 345

Building Text-Based Animations Using FlaX 348

Broadcasting Streaming Audio and Video 348

Creating Your Own Streaming Media 351

Creating a Page that Features a Web Cam 352

Integrating Video and Audio into a Web Site Using SMIL (Smile) 354

Chapter 8 JavaScript 358

Handling Older Browsers that Do Not Support Scripts 370

Storing Multiple Values in One Variable by Using JavaScript Arrays 371

x H T M L & W e b D e s i g n T i p s & T e c h n i q u e s

Responding to JavaScript Events 378

Executing JavaScript Statements Within the Body of a Web Page 380

Calling a User-Defined JavaScript Function 382

Calling JavaScript Functions Within an Event Handler 384

Looking Closer at JavaScript Event Handlers 385

Creating an Interactive Navigation Bar with a Mouseover Effect 388

Taking Advantage of the Scripting Object Model Arrays 390

Referring to Web Page Objects by Name Instead of Position Number 392

Leveraging the Contents of the Document Object 393

Taking Advantage of the JavaScript Images Array 396

Exploiting the JavaScript Links Array 398

Changing Web Page Colors Using JavaScript 401

Storing a Cookie on the Visitor’s Hard Drive 402

Formatting Cookie Data Using JavaScript 404

Retrieving a Cookie Value from the Cookie File 406

Removing a Cookie from the Cookie File 407

Saving Time and Programming by Using Prewritten (External) Scripts 409

Creating an Animation Using theonLoad Event 410

Displaying Self-Changing Banners Using JavaScript 411

Pointing Hyperlinks to New Files On-the-Fly 413

Pre-caching Pictures to Reduce Image Display Time 415

Creating a Scrolling Marquee Using JavaScript 416

Chapter 9 Java Applets and ActiveX Objects 418

Using an Applet to Create a Pop-Up Navigation Menu 437

Using an Applet to Animate a Text String 440

Using an Applet to Display and Print a Calendar for Any Year 442

Using an Applet to Display a Passage at Random from a Text File 443

Using an Applet to Create a Navigation Menu that Runs in Its Own Window 444

Using an Applet to Scroll the Contents of a File Vertically Within a Rectangular Box Onscreen 448

Using an Applet to Animate an Image Along a Sine Wave 450

Editing Java Source Code to Build a Custom Applet 452

Creating a MySQL Database and Tables 502

Displaying SQL Query Results in an HTML Table on a Web Page 504

Using PHP to Generate a Random Password 507

Using PHP and MySQL to Set Up Username/Password Access to a Web Site 509

Preventing Visitors from Changing Variable Values with URL Arguments 511

Using PHP and MySQL to Track Where Visitors Go on Your Web Site 512

Determining the Visitor’s IP Address for Web Page Requests Sent Through a Proxy Server 514

Preventing One Visitor from Assuming Another Visitor’s PHP Session Identity 516

Using PHP Functions to Create Web Page Templates 517

Using PHP to Add File Upload Functionality to a Web Page 520

Chapter 11 Active Server Pages (ASP) 524

Controlling the Flow of Content from Web Server to Web Browser Through the HTML Output Stream 539

Preventing the Web Browser from Displaying Stale Active Server Pages 543

Redirecting the Web Browser to Another Web Page 545

Maintaining Variable Values Between HTTP Requests with the Cookies Collection 547

Retrieving Form Results from the ASP Form Collection 550

Retrieving Form Results from the ASP QueryString Collection 553

Retrieving Information from the Server Variables Collection 556

Connecting to a MySQL DBMS Through the MyODBC Driver 559

Setting Up Username/Password Access to a Web Site 562

Starting a Session and Working with Session Variables 565

Executing SQL Queries and Displaying Query Results Sets Within an HTML Table 568

Displaying Banner Ads with the Microsoft Banner Ad Rotator 573

Tracking Microsoft Banner Ad Rotator Impressions and Click-Throughs 576

Handling “Status: 404 Not Found” Errors 580

Chapter 12 Security and Performance 586

Downloading and Installing a Public Key, Digital Signature, and Server ID 600

Creating a Secure Web Page Under IIS 601

Installing a Software-Based Firewall 603

Fine-Tuning a Firewall’s Port Assignments 605

Index 637

a direct result of their hard work and dedication.

We’d also like to thank this book’s technical editors Charles Hornberger and Wendy Willard fortheir candor and selfless content contributions Their insights greatly improved the book’s quality.And, we’d like to thank Jim Schachterle for his support throughout this project and our project editor,Janet Walden, for pulling together all the pieces

Introduction

Analysts now estimate that across the Internet, over 100 million domain names are in use

(for Internet statistics, visit http://www.nua.com/surveys) With fast DSL and cable-modem

connections available to the masses, and with companies offering low-cost Web hosting, tens ofmillions of users are now creating personal Web sites Further, with the estimates of online usersnow exceeding 500 million (and with that number growing at a rate of 7 percent per month!), Webdevelopers must find ways to exploit new technologies to attract and capture the attention of users asthey “surf” the Web

Throughout this book’s chapters, you will learn ways to put Web technologies immediately touse on your Web pages Each chapter presents ways you can quickly integrate a technology, such asdynamic content, security, database access, as well as client-side and server-side processing You willfirst learn a technology’s fundamentals and the best ways to exploit the technology within your Webpages Then, you can take advantage of ready-to-use solutions you can simply cut-and-paste into yourWeb pages Finally, you will examine behind-the-scenes settings and techniques you can use to unlockyour Web site’s full potential

If a fast, state-of-the-art, eye-catching Web site is your goal, this book will help you achieve it

Web site performance, developers must at some point roll up their sleeves and dig into HTML tags,attributes, Cascading Style Sheet rules, JavaScript, Active Server Pages, PHP, and more.

Despite the vast number of sites that make up the World Wide Web, you would be hard pressed tofind a Web developer who would not be happier if his or her site were faster, more secure, or easier

to manage Further, the users who visit sites not only want entertaining and current content, but alsowant that content to download quickly Most users assume that the sites that present themselves assecure truly are secure Regardless of the content you place on a Web site, users expect quality, speed,and security

This book examines hundreds of ways Web developers can improve their site’s performance,security, content, and ease of management You do not have to be an experienced programmer ornetwork administrator to perform the operations this book presents Each Tip presents step-by-stepinstructions you can easily perform, as well as solutions you can cut-and-paste into your Web pages.Within the books chapters, you will learn:

• The HTML fundamentals you must know to create your first Web site, and the steps you mustperform to host that site on the Web

• Ways you can use HTML-based tables to organize information you present on a Web page, andhow to use tables to arrange text and graphics

• How you can use Cascading Style Sheets to gain full control of text formatting within a Web pageand to simplify future updates

• How XHTML differs from HTML, new XHTML capabilities you can exploit within yourpages, as well as ways you can migrate your HTML pages to XHTML

• Techniques you can use to better exploit graphics within your Web pages while reducing thetime users must wait for images to download

• How to create dynamic Web page content using PHP and Active Server Pages

• Behind-the-scenes operations you can perform to use HTTP and CGI settings to automatesolutions that exploit your user’s browser type, connection speed, and more

• Ways you can secure your system from hackers and identify potential security holes in yoursystem that malicious users can exploit

• How you can integrate e-commerce solutions and credit card processing into your Web site

• And much more!

browsers, servers, or is readily available for download from the Web If you have not programmed

in these languages before, do not worry Each chapter’s introduction will provide the foundationyou will need to exploit the language

What This Book Covers

This book contains 12 chapters Each chapter examines a specific Web technology, programminglanguage, or design technique Within each chapter, you will find a thorough discussion of a technology

or language followed by Tips you can quickly perform to enhance your Web pages and the overalldesign and performance of your Web site

Chapter 1: HTML Basics To start, this chapter lays the foundation that designers new to Web

development need to exploit the techniques they will learn throughout the remainder of the book.Designers will learn how to create HTML pages, how to display pages from files that reside on theirown PC, and then how to use a Web server to make their pages available to visitors across the Web

large amounts of data for display onscreen Many Web designers also use tables to gain better controlover the alignment of text and graphics that appear on a page A designer might, for example, use tables

to flow text around an image In addition, a Web page may present a table of thumbnail images fromwhich users can select the pictures that they want to download as a larger graphic

may ask the visitor to provide a wide range of information, such as a shipping address, personal data,

or credit card numbers for purchases In addition, forms let visitors search for specific products, services,

or content available at the site, or perhaps elsewhere on the Web Developers create forms usingHTML tags After the user submits his or her information, the Web server runs a special program

(which developers call a script) that processes and likely stores the data In this chapter, you will

learn how to create forms using HTML, how to validate the information a user enters using JavaScript,and then how to process the data the user submits

tags to format text, graphics, and links Using only HTML tags, such <b> for bolding, <i> for italics,

Consortium’s recommendations When followed carefully, the “rules” within the XHTML standardprevent you from creating Web pages with improper syntax, missing or proprietary tags, and invalidattributes By avoiding such bad code, you ensure your Web pages will look great and will work withall standard Web browsers Moreover, by guaranteeing the correctness of your Web page description(by making it compliant with the XHTML standard), you allow browser manufacturers to omit codedesigned to “guess” the intentions of malformed HTML Browsers designed to run on non-PC devices(such as cell phones, palm organizers, onboard computers within cars, and so on) must be small, becausethese devices have limited memory capacities This chapter shows you how to run an application(HTML Tidy) which checks your Web page HTML, corrects any errors, and converts your HTML

to XHTML You will also learn how to use online validation programs that check new Web pagesyou create to ensure they comply with the XHTML standard Then you will find Tips that show youhow to extend the capabilities of the markup language by adding new tags and attributes, as well asTips that let you detect the user’s browser type so your pages display quickly and correctly in browsersrunning on non-PC devices

sites that offer great visuals lose impatient visitors who are not willing to sit through long downloadtimes In this chapter you will learn techniques, such as caching and preloading, you can use, as well

as settings you can fine-tune to reduce image download times You will also learn about the variousgraphics file formats and when you should use each Further, the chapter discusses color palettes andways you can ensure your content is “Web friendly.” Finally, graphics professionals will learn ways

to simplify the migration of images to the Web

becoming readily available, many Web sites use animations, background music, and video to captureusers’ attention In this chapter, you will learn how to integrate a range of animations, from simpleanimated graphics to high-end Flash animations Further, you will learn how to play backgroundmusic as users view your pages and how to deliver streaming video content on demand Finally,you will learn how to broadcast audio (just as a Web-based radio station) from your Web site

tasks within a Web page Web developers place JavaScript statements within the HTML tags that

run under Windows, Linux, and on a Mac Java applets provide programmers a way to automate taskswithout introducing the risk of computer viruses to users who download the applets Across the Web,there are countless “generic” Java applets you may want to leverage within your own pages In thischapter, you will learn how to integrate Java applets into your HTML content Further, the chapterexamines how to provide support for ActiveX objects for Windows-based sites Unlike Java applets,which do not provide security risks to the users that download them, ActiveX objects do not restrictthe operations the code can perform Therefore, it is important that you only integrate ActiveXobjects you received from reputable developer sites that contain certificates of authentication.Chapter 9 details the precautions you should take.

Web page content on-the-fly Using PHP, for example, you can customize your Web page contentbased on the information a user provides within a form, or perhaps based on information you gleanfrom a cookie your site previously stored on the user’s disk Across the Web, over 1,000,000 sites usePHP to create dynamic Web pages Before you can take advantage of PHP, you must download andinstall a PHP processor on your system This chapter will walk you through the installation process.Then, you will learn how to create simple PHP-based applications As discussed, PHP is a programminglanguage and the chapter’s introduction will lay the foundation you need to create, test, and debugPHP programs Then, the Tips section will present several PHP-based solutions you can put to immediateuse within your Web pages

developers to create on-the-fly content To create an Active Server Page (a dynamic Web page), youcan use a myriad of programming languages that include VBScript, JScript (the Microsoft version ofJavaScript), PerlScript, Python, Rexx, and more This chapter lays the foundation from which youcan develop your own Active Server Page solutions In addition, the chapter’s Tips provide solutions

to a range of common Web page needs, such as creating and processing cookies, processing forms,interacting with databases, using usernames and passwords to control site access, displaying andtracking banner ads, and more

Chapter 12: Security and Performance This year, hackers and computer viruses will cost users andbusinesses over 12 billion dollars! In this chapter, you will learn steps you should take immediately

to protect your site If you are not currently using a firewall to protect your site (or simply your PC),

How to Read This BookAlthough this book’s chapters build on the information presented in preceding chapters, westructured the book so that you can turn to any Tip and find the information you need.

To help you quickly locate the information you need, at the start of each chapter, we have included

a list of the specific Tips that chapter presents If you need more information on a topic, each chapterprovides introductory text that will give you a solid foundation

As you scan through the book’s pages, watch for the Use It icon, which highlightsspecific steps within each Tip that you can perform immediately to accomplish a task.Using This Book’s Companion Web Site

Throughout this book’s chapters, we will present numerous HTML files, Active Server Pages,JavaScript code, PHP solutions, and much more In many cases, you can simply cut-and-paste thesolutions we present into your own Web pages All of this book’s files are readily available fromthe McGraw-Hill/Osborne Web site at http://www.osborne.com

x x H T M L & W e b D e s i g n T i p s & T e c h n i q u e s

TIPS IN THIS CHAPTER

Managing the Personal Web Server and Publishing Your Web Pages 18

Controlling the Flow of Text with Paragraph and Line Break Tags 27

Changing the Size of Text Using Heading Level Tags and the Font Tagsize Attribute 32

Enhancing Individual Letters and Words Using Character Formatting Tags 41

Hypertext Markup Language, or as it is more commonly known, HTML, is the computerlanguage at the heart of the World Wide Web When you create a Web site, you use HTML

to put the text, pictures, animations, and perhaps video and sound onto the individual Web pages thatmake up the site In addition, HTML lets you insert hypertext links and interactive buttons that connectyour Web pages to other pages on your Web site and on other Web sites around the world Web design

is a creative process, and HTML is simply one of the tools (the page description language) you use toproduce Web pages

HTML is a text markup and not a programming language In theory, a Web page you create usingHTML should be viewable by anyone with a computer, any Web browser, and access to the Internet

In reality, the ability to view all the content on a Web page depends on the capabilities of your Web

browser Web browsers are programs that interpret the HTML in Web page documents and display

text, pictures, and animations on the visitor’s computer screen Either alone or with the help of otherinstalled programs, browsers also play back any video and sound files you use HTML to insert on

a Web page The latest versions of the two most popular Web browsers, Microsoft’s Internet Explorerand Netscape’s Netscape Navigator, can display just about anything you can use HTML to put onto aWeb page

For visitors to access Web pages on your Web site, they must first connect to the Internet and start

a Web browser After the Web server sends a Web page to the visitor’s computer, the Web browserinterprets the HTML in the Web page file and displays the file’s contents as text and graphics images

in the browser’s application window

Web servers and Web browsers use the HyperText Transport Protocol (HTTP) to communicate.Among other things, the HTTP protocol specifies both the way in which Web browsers and serverssend messages and the structure of the messages themselves A thorough discussion of the various

1 Each time you enter a Web address (such as http://www.NVBizNet.com) into your browser’sAddress field and pressENTER, the Web browser sends an HTTP request for a file over theInternet to the Web server.

2 After it receives the HTTP request for a file, the Web server retrieves the requested file andsends the Web page to the Web browser

3 The Web browser analyzes the Web page file to determine if there are any inserted files (such

as graphics, animations, sounds, and so on) that the browser needs from the Web server

4 The Web browser sends multiple HTTP requests (one for each file the browser needs) to theWeb server

5 As the Web server receives the HTTP requests for files, the server finds each file and sendsthe files (one file per HTTP request) to the Web browser

6 The Web browser takes the original Web page files, follows the instructions given by theHTML tags in the file to combine the Web page and the inserted file contents into a Web

the page will be able to see everything that HTML lets you put on the page.

When you design a Web page, keep in mind that not all your site visitors will be using the latestversion of Internet Explorer or Netscape Navigator Stick with the basic HTML you will learn in thischapter for the majority of the content you place on your Web pages Then, use some of HTML’s moreadvanced features to add pizzazz and keep site visitors coming back for another look By combiningbasic and advanced HTML capabilities on the same page, you make it possible for everyone to accessthe important information you want to publish and for those with the latest browsers to have a trulymemorable experience

A Web page consists of a series of HTML instructions that you can enter into a file using any texteditor As mentioned previously, Web browsers such as Netscape Navigator and Internet Explorer followthe instructions in the text document you create to display the Web page content onscreen (Web page

content is the text, graphics, and other things [such as video and sound] that you use HTML to place

on a Web page.)

If you think creating a Web page document is easy, you are right In fact, Web site creation beganwith the simplest of intentions The original HTML standard described an uncomplicated, easy-to-learnlanguage that let you create text-only documents, which were viewable by anyone who had access tothe Internet Although the HTML standards committee, the World Wide Web Consortium (or W3C),

has added many new instructions (called tags and attributes) to the HTML language, you can still

create even the most feature-rich Web page by typing simple HTML commands into a documentyou create with a text editor (such as Windows Notepad) You can visit the W3C’s Web site athttp://www.w3.org/ for a complete description of various Internet technologies including HTTP,HTML, Extensible Hypertext Markup Language (XHTML), Extensible Markup Language (XML),Cascading Style Sheets (CSS), and so on

Now that you know what a Web page is and (in general terms) how to create one, let’s

take a quick look at some Web page HTML If you do not have a permanent (that is, always-on)connection to the Internet, establish a dial-up connection through your ISP Next, start your Webbrowser and display your favorite Web page by entering the URL (Uniform Resource Locator;that is, the Web page address) into your Web browser’s Address field For example, you mighttype http://www.Osborne.com in the browser’s Address field Then, pressENTER

The Web browser, in turn, will send an HTTP request to the Web server for the Web page whoseaddress you entered After the Web server responds by sending the Web page to your browser, thebrowser will display the page onscreen and request any embedded objects (such as graphics images)inserted on the page After your browser has retrieved and displayed all the page content, select

both a start and an end tag Those that do are called container tags, because the instruction in the start

tag applies to everything the Web page contains between the start tag and the end tag

Each HTML command (that is, each HTML tag) starts with a less-than sign (<) followed by thetag’s name and any attributes, and ends with a greater-than sign (>) To create an end tag for a starttag, you insert a forward slash (/) in front of the tag’s name Thus, a start tag has the form <tagname[attributes]> and an end tag has the form </tagname> The tag’s name tells the Web browser the tag’spurpose; the attributes (if any) that follow the tagname give the Web browser additional informationthe browser needs to carry out the tag’s instructions

For example, the following code illustrates how the start and end paragraph tags (<p> </p>) enclose,

or contain, a section of text In this example, the <p> tag instructs the Web browser to display the text

up to the </p> tag using the default formatting rules:

<p> This is an example of paragraph text </p>

If you want the browser to display the paragraph text using a specific font and color, you would addattributes that specified such things as the color, typeface, size, and so on to a <font> tag that followsthe <p> tag and precedes the text whose look you want to specify (You will learn about attributesafter you read more about tags in the next two sections.)

HTML Section Tags

To organize the various parts of the HTML that describes a Web page, you use a set of section tags.

The types of HTML tags in each section of the Web page definition have a specific purpose:

• <html> </html> These occur at the start and end of an HTML document As such, start andend HTML tags enclose all the other HTML tags you use to describe the Web page

• <head> </head> Start and end header tags immediately follow the start HTML tags (<html>)and denote the Web page header You can use tags in the Web page header to include suchinformation as the name of the author and the date the author created the page In addition,you insert tags with information that describes your page so that Web search engines can addreferences to your page to their search indexes Of the HTML tags and information you place

in the header section, the visitor’s browser displays only the Web page title You insert the Webpage title in the header section between start and end title tags (<title></title>), as shown in the

Text content and body tags inserted here

</body>

</html>

Note that you can write HTML tags as all uppercase, all lowercase, or a combination of the two,because Web browsers are currently case-insensitive However, standards such as the XHTML andXML specification require that you use lowercase tags—even if Web browsers continue to supportboth lower and uppercase tags for a time As such, write all your HTML tags and attributes in lowercase.That way, as Web browsers force Web designers to comply with newer standards, the Web browserswill still render correctly the Web pages you create now

HTML Empty Tags

In addition to container tags (refer to “HTML Container Tags” earlier in this chapter), HTML uses a

second type of tag called an empty tag Whereas container tags enclose page content, such as a line of

text within a start and end tag, empty tags do not require an end tag Think of an empty tag as a singlecommand or statement such as “go here” or “do this.” For example, the following HTML code usesthe line break tag (<br>) to instruct the Web browser to drop down to the next line before displayingthe next item on the page (in this example, a second line of text):

<p> This text is displayed on line one <br>

This text is displayed on line two </p>

</body>

</html>

Creating a Web Page

HTML text documents are actually quite simple to create To create an HTML document, you open atext-editing program and then type in the HTML code After you have entered the HTML statements,

Now, save your work to a Web page file (that is, a file with an htm or html extension) on yourhard drive Because you will likely download from the Osborne Web site or enter into your texteditor and save many of the Web pages you encounter throughout this book, create a folder (such asC:\HTMLExamples) in which to store the Web pages Then, save the code you entered for this example

as TestPage.htm in the folder you create

To take your first Web page for a test drive, start your Web browser, and type File:// followed

by the drive letter and pathname of your Web page into the browser’s Address field For example,

if you saved the Web page in this example as TestPage.htm in the C:\HTMLExamples folder, type

Web browser, in turn, will display the Web page shown in Figure 1-2 That is all there is to it! You arenow officially a Web page author

Controlling the Format of Text

In standard word processing, a paragraph defines a group of sentences Typically, a blank line or anindented first word identifies the start of a new paragraph For example, each paragraph in this book

following the </p> tag.

In this following code, the start and end paragraph tags (<p></p>) mark the beginning and end ofeach paragraph, as shown in Figure 1-3

<p>The text between the two paragraph tags defines a single

paragraph Paragraphs contain one or more sentences</p>

<p>The next paragraph starts here with a blank line inserted

between the two paragraphs</p>

</body>

</html>

HTML also has several text formatting tags you can use to change the appearance of text, usuallyfor emphasis To apply a formatting style, place the format’s start tag at the beginning of the text youwant to style The following list describes three of the most common formatting tags.

• <b></b> Text placed between the Bold tags is displayed in bold font.

• <i></i> Text placed between the Italic tags is displayed in italic font.

• <u></u> Text placed between the Underline tags is displayed with an underline

The following HTML code displays text in the bold, italic, and underlined style, as shown inFigure 1-4

<b>This text displays bold</b><br>

<i>This text displays in italic</i><br>

<u>This text displays underlined</u><br>

and face attributes that follow the tag’s name in the following code tell the browser the color (red)

and typeface (Helvetica) that the browser is to use in order to change the appearance of the text thatfollows the tag:

<p> <font color="red" face="helvetica">

This text is red, Helvetica text </font> </p>

Attributes, which you always insert after the tag’s name in either start tags or empty tags, consist

of three components: the attribute’s name, followed by the equal sign (=), followed by the attribute’svalue enclosed in quotes—either double (“”) or single (‘’)

NOTE

By the way, the Web browser ignores any spaces you place on either side of the equal sign (=) between an attribute and the attribute’s quoted value As such, you will see some Web documents with no spaces (as shown by the HTML statement in the preceding example) and some documents with spaces on either one or both sides of the equal (=) sign When writing your HTML tags, select whichever looks best to you; just be consistent.

The Web browser will continue to apply the attribute(s) you specify within a start tag until the browserreads the associated end tag In this example, the Web browser will continue to make text look as specified

by the color and font attributes in the <font> tag until the browser encounters the </font> tag in the Web

page HTML Figure 1-5 illustrates the components of an HTML tag with two attributes

(<font> </font>), you control how text looks when displayed by the visitor’s Web browser Note that

the font tag is deprecated, which means that future versions of the Web browsers that conform to the

latest HTML standard may no longer support, and therefore ignore, the <font> tag and its attributes.Although you can use attributes within the <font> tag to affect the appearance of text, you can achievethe same effects (and more) by creating CSS rules as you will learn to do in Chapter 4

The following attributes you can place within the start font tag instruct the Web browser how todisplay the text in the Web document:

• <font color=“color”> The color attribute defines the color of the text Color values can be

names (such as “red”, “green”, “yellow”, “blue”, and so on) or hexadecimal triplets (such as

#FF0000, #008000, #FFFF00, #0000FF, and so on) that represent the amount of red, green,and blue the Web browser is to mix to produce the color of text you want

• <font size=“##”> The size attribute defines the size of the text (relative to a base font size)

using values from –7 to 7 The lower the value, the smaller the size of the font

• <font face=“font name”> The face attribute defines the name of the font’s typeface (Times

New Roman, Helvetica, and Arial are a few examples of typefaces found on most computer

systems) If the font defined in the face attribute is not available on the visitor’s computer, the Web browser ignores the face attribute and substitutes the browser’s default typeface.

The Web browser controls the default values for color, size, and typeface To return text to thebrowser’s default values, place a </font> tag at the end of the text whose appearance you changedwith attributes in a <font> tag The following code instructs the Web browser to display the text inred using the Helvetica typeface, and then returns to displaying text (following the </font> tag) usingthe browser’s default text characteristics:

<html>

<head>

<title>Font Color Example </title>

</head>

enclose the elements you want to affect with start and end division tags (<div></div>) Say, forexample, that you want to center two lines of text and a graphic image between the left and right

margins on the Web page Rather than add the align attribute to each of the three HTML tags, place

a <div> tag before the first element and a </div> tag after the end of the last element, as shown in thefollowing code:

to tell the Web browser to display what you want onscreen Although this chapter discusses the ins andouts of basic HTML code, it is a good idea to familiarize yourself with the programs available for creatingtext documents in which you write and store your Web page HTML

A Web page is nothing more than a text document that contains all of the text content and HTML(tags and attributes) the Web browser needs to display the information you want onscreen As such,you do not need a specialized program to generate a Web page You need only a general knowledge

of HTML and a program that lets you save a text-only file Three types of programs let you createHTML documents: text editors, word processors, and HTML layout programs (such as Dreamweaver

sheet of paper and save what you type to a file The major disadvantage of using a text editor to create

a Web page is that text editors provide little help in writing tags that conform to HTML syntax rules.You type the HTML; the text editor records the text However, the text editor will not alert you tomisspelled words or HTML syntax errors The advantage in using a text editor to create a Web page

is that text editors force you to learn the HTML more quickly, because they provide no crutch onwhich you can lean Figure 1-6 shows an HTML document written using Microsoft Notepad.After you type your HTML into Notepad, select File | Save and enter a filename to save yourWeb page to disk Be sure to give your filename an htm or html (and not the default txt) extension.Word Processors

The two most popular word processors on the market are Microsoft Word and Corel WordPerfect.Word processors give you an advantage over simple text editors in that you can call the word processor

to spell check what you type However, unless you use a spell check module designed to check

“<img>“ is spelled correctly, the word processor will accept subsequent occurrences of it in thedocument as spelled correctly A word of caution, make sure that the HTML tag you type is syntacticallycorrect before you click the spell check program’s learn button.

Thus, a word processor has two advantages First, you can tell the word processor to check thespelling of words and tags you enter into your Web page HTML; and second, you still have to learnHTML quickly because must you still type the HTML you want the browser to execute into the document

When you save the file, be sure to use the word processor’s “save as” function to save the document as a text-only file Word processors do something that text editors do not; they insert special

codes into a document These embedded codes can affect how the Web browser interprets the documentand worst case, can prevent the Web browser from displaying your Web page at all, or even cause thebrowser to crash Because HTML documents do not require embedded text formatting codes, tellthe word processor to save your HTML file using the text-only option

Web Layout Applications

Web layout applications let you create Web pages in much the same way as page layout applicationssuch as PageMaker and QuarkXPress let you lay out and print a paper document Although dozens ofWeb layout applications are on the market, the three most popular programs for creating Web pagesare Adobe’s GoLive, Macromedia’s Dreamweaver, and Microsoft’s FrontPage

When you use a Web layout program such as GoLive, you open a new document, and begintyping text and dragging graphics onto the blank layout window As you add text and graphics tothe Web page, the program generates the HTML code for you The advantage of using a Web layoutprogram is that you see how the page will look in a Web browser as you create the page Figure 1-7shows a Web page under construction in GoLive

The disadvantage in using Web layout programs is that they do the entire HTML coding for you.Although that may seem like a good thing, you never get a chance to learn any HTML, and therefore youmay never advance beyond what the layout program is capable of doing Suppose, for example, you want

to add a specific feature to your Web page and the layout program does not have a button to make ithappen That means you are stuck because you do not know how to code the feature yourself In addition,Web layout programs are not perfect Sometimes they generate additional HTML code that is notnecessary to your Web page If you do not know HTML, you cannot make a decision as to what

Working with Relative vs Absolute Pathnames for Files

When you create a new Web site, you will have to move the Web content (that is, the HTML documents,graphics, animation, sound, and other support files) from your development computer to the Web server

If your Web pages contain links to pages stored in the same or related folders (such as a subfolder orparent folder), you can save yourself considerable time and work by using relative pathnames whenreferencing files in the Web page HTML tags

When a site visitor clicks on a hypertext link, the Web browser uses the pathname given by the

hyperlink’s href attribute to locate the file the browser is to retrieve When specifying the location of

a file, you can use either an absolute or a relative pathname Suppose, for example, that you have a

graphics file named clock.jpg located in the folder named Folder_B, and that Folder_B, in turn, islocated within a folder named Folder_A, as illustrated in Figure 1-8

A relative path consists of the folder names the browser needs to navigate to get to the file starting

A relative pathname instructs the Web browser to start looking for the file within the folder thatcontains the current HTML document Say for example that the HTML document that contains theimage in the <img> tag in the preceding example is located in a folder named idx_folder The relative

pathname in the src attribute then implies the folder named Folder_A is located within the idx_folder.

Absolute paths, on the other hand, locate a file by starting at the top level of the folder hierarchyand moving downward through all the intervening folders to reach the file—without regard to thelocation of the current Web document Absolute paths always begin with a slash (/) to differentiatethem from relative paths

Suppose, for example, that clock.jpg is located on the D drive in the folder named Folder_B, which

is located within the folder named Folder_A To specify an absolute pathname, you must tell the browserwhere to look for the file starting with the drive on which the folder with the file is located The followingcode shows the absolute pathname for clock.jpg in the current example:

<img src="/D:Folder_A/Folder_B/clock.jpg">

Downloading and Installing the Personal Web Server

As you learned earlier in this chapter, you can display within your Web browser the Web pages youcreate and save to a local or network drive—without first connecting to the Internet or a Web server

Simply enter the pathname of the html (Web page) file as File://<.html file pathname> into the Web

browser’s Address field Thus, if you save a Web page name TestPage.htm in the MyWebs folder atthe root (that is, top) folder on your C drive, you can display the page in your Web browser by entering

File://C:/MyWebs/TestPage.htm.

To make your Web pages available to others across the Internet, you must have a Web server.Further, as you will learn in Chapters 10, 11, and 12, a Web server is also required if you want toexecute server-side scripts (programs that the server runs on the behalf of your Web page) If you areusing one of the Windows operating systems (Windows 95, 98, Me, NT, or XP) you can install thePersonal Web Server (PWS) on your personal PC or network workstation free of charge After youinstall the PWS and establish an Internet connection, other users on the Web can view the Web pagesyou publish on your system In addition, you can use the PWS to test Web pages that submit formresults and pages with server-side scripts, such as those embedded in PHP and Active Server Pages(which you will learn about in Chapters 10 and 11, respectively)

If you have a Windows 98 CD, insert the CD in your CD-ROM drive and skip thedownload-procedure discussion that follows; you will find the PWS in the \Add-Ons\PWS\ folder on the Windows 98 CD Otherwise, you must install the PWS from the Windows NT 4Option Pack, which you can download from the Microsoft’s Web site on the Internet by performingthe following steps:

1 If you do not have a permanent (that is, always-on) connection to the Internet, use your modem

to establish a dial-up connection through your ISP

2 Start your Web browser, and type the following URL into the browser’s Address field:

3 Within the Windows NT Option Pack Web page, click the Option 1 hyperlink Your browser,

in turn, will display the Download Step 2 Web page, which lets you select the operating system

7 Within the Save As dialog box, use the drop-down list button to the right of the Save In field

to select the folder in which you want to save the download.exe program file For example,you might use the drop-down list button to navigate to the C:\My Download Files folder.Then, click Save

8 Within Windows, use the Explorer to navigate to the folder in which you saved download.exe.Run the application Download.exe, in turn, will display the Windows NT 4.0 Option Packlicense agreement

9 Read the terms of the agreement Then, click Yes to continue with the installation The downloadprogram, in turn, will display a Download Options dialog box

10 Within the Download Options dialog box, click the Download Only radio button and then clickNext button The download program, in turn, will display the Language and CPU/OperatingSystem Options screen

11 Within the Language and CPU/Operating System screen, select the Language and CPU/Operating System, and then click Next The download program, in turn, will display theInstallation Options screen

12 Within the Installation Options screen, click the Full Installation radio button and then clickNext The download program, in turn, will display the Save In Folder screen

13 Within the Save In Folder screen, enter the folder in which you want the download program

to store the NT 4 Option pack’s files (For example, you might enter C:\PWSSetupFiles intothe Save In Folder field.) Then, click Next The download program, in turn, will display theDownload Location dialog box with a list of sites from which you can download the NT 4Option Pack

14 Within the Download Location dialog box, select the download site nearest your geographicallocation (if more than one site is on the list) Then, click Next The download program willpresent you with the download site’s Security Certificate Click Yes to accept the certificateand complete the NT 4 Option Pack download

After you complete Step 14, the download program will retrieve the NT 4 Option Pack from thelocation you selected and store the NT 4 Option Pack files within the folder you entered in Step 13.Before you can start the PWS, you must install the application on your computer Whether you