Chapter 30 HTML Examples

Back to Basics: Basic HTML 2.0 Pages
BigCorp's Client-Side Site

Well, it's time to see if we can't apply just about everything you've learned to the world of the Web. This is also a wonderful opportunity to find a page that works well for the type of site you're trying to build. If you find a close match, you can get a headstart on your own site by copying the example from the included CD and altering it to fit your needs.

Note

This is one chapter where the included CD can really help you out. If I've created a page that you think will work well for your site, just grab the HTML off the CD, change it to suit your needs, and toss it up on the World Wide Web. Hopefully, I've already done most of the work for you!

Back to Basics: Basic HTML 2.0 Pages

The beauty of designing HTML 2.0-compliant sites is that you never really have to worry about whether or not your users are happy, satisfied, and fully informed. Everyone, regardless of his or her browser, can see just about your entire site (except for text-based users who can't see your graphics). The downside is you don't get to do too much cool stuff.

For the typical personal Web site, though, HTML 2.0 is a great place to start designing. One of the most important rules to remember in HTML design is that your information is more important than the presentation. If using nothing but HTML 2.0-like basic text, lists, graphics, and even server-side maps-helps you update your pages quicker and keep things interesting, then you're doing better than the advanced Java programmer with nothing to say.

Let's see some examples of a "personal" Web site, perhaps useful for a home-based business or even just for fun. My examples are for a fictitious graphic designer named John Jones, who uses his site as both a business and a personal site. We'll create four basic pages-an index page, a personal biography, a business information page, and a resume page. These days, sometimes you tell people your life story with little more than an URL.

Example: The Personal Index Page

Since we're not talking about any major leaps of thought in HTML, I'll concentrate more on design issues with these personal pages. The keys to your index page will be an attractive presentation, while making it clear that things are dynamic on the page-you'll highlight your changes early. To create the index page, enter Listing 30.1 in your text editor.

Listing 30.1 index.html The Personal Index Page

<HTML> <HEAD> <TITLE>John Jones on the Web</TITLE> </HEAD> <BODY> <IMG SRC="johnlogo.gif" ALT="John Logo"> <H5> <A HREF="index.html">Index</A> | <A HREF="about.html">About John</A> | <A HREF="contract.html">Business Info</A> | <A HREF="resume.html">Resume</A> | <A HREF="feedback.html">Web Feedback</A> </H5> <HR> <H2>Welcome to My Home on the Web!</H2> <P>I'm <A HREF="about.html">John Jones</A>, and you've reached my home on the Web. If you were looking to find me here, thanks for the thought. If you're here by accident, well, maybe there's something interesting. Stay a while.</P> <HR> <IMG SRC="news.gif"><BR> <H3>What's News?</H3> <P>I've finally gotten around to updating my <A HREF="macnet.html">Apple QuickTime VR on the Net</A> pages. Those of you getting used to following the news here will hopefully find everything you need.</P> <P><A HREF="apple_pr1.html">Mac's Make it Big with VRML</A> Click for a copy of Apple's PR on new QuickDraw 3D technology in the Web. To learn more, check out <A HREF="http://www.apple.com/">Apple's Web site</A>.</P> <P><A HREF="ab_pics.html">Family Vacation Photos</A>! Just got back from vacation in the Bahamas, and if you've never been you should check out these photos. You can't beat the parasailing!</P> <HR> <IMG SRC="thesite.gif"><BR> <H3>Stuff that John does that you may or may not find interesting...</H3> <UL> <LI> Magazine writer for <A HREF="http://www.netmag.com/">Net Mag</A> the online Web graphics resource. <LI>Freelance <A HREF="contract.html">Macintosh consultant</A> that you can hire for <B>your own Web development</B> needs! <DD>Just somebody's <A HREF="about.html">dad</A>. </DL> <HR> <H3>Your Feedback on this Web Site...</H3> <P><A HREF="feedback.html">Feedback</A> Lots of folks have written in to tell me what they like about this site. The feedback has been incredible, and I couldn't be happier. Keep it coming! If you've got something to say, please <A HREF="mailto:jjones@net.com">send mail</A></P> <HR> <H6>Copyright John Jones 1996. All Rights Reserved. Do not duplicate without permission.</H6> <H6>These pages are HTML 2.0 friendly!</H6> </BODY> </HTML>

Boring? I hope not. Let's call it "clean." This is a page that uses a couple of different ways to get around on the site, including a text menu at the top of the page and links throughout to relevant material. It also features site news right up front and some invitations to wander the site. Tasteful graphics and logical formatting let users get a feel for the site quickly, so they know they're not missing anything (see fig. 30.1).

Figure 30.1 : An inviting clean index page for a personal site.

Example: The Personal Biography

The next step is to create a biography page for John, complete with some interesting text and classy use of photos. Personal bios should probably be the most laid back part of the site; but it's important to remember that John is also using this as a business site-so it should probably be rather tasteful, too. Enter Listing 30.2 in
your text editor.

Listing 30.2 about.html The Personal Bio Page

<HTML> <HEAD> <TITLE>About John</TITLE> </HEAD> <BODY> <IMG SRC="aboutlogo.gif" ALT="About John Logo"> <H5> <A HREF="index.html">Index</A> | <A HREF="about.html">About John</A> | <A HREF="contract.html">Business Info</A> | <A HREF="resume.html">Resume</A> | <A HREF="feedback.html">Web Feedback</A> </H5> <H3>A Little About Me...</H3> <P>What is there to say about myself? I'm a graphic designer, a World Wide Web addict and a <A HREF="ab_pics.html"> post-vacation dad</A> and husband. I'm an incredible nut about Macintosh computers... professionally. I play a lot of golf, a little tennis, and I do some <A HREF="http://www.aescon.com/ski/">skiing</A>. </P> <P>I'm a graduate of <A HREF="http://www.unt.edu/">the University of North Texas</A>. My degree is in Fine Arts, with a minor in computer science. Since that time I've worked in a number of positions as an artist, designer and senior designer. I currently work in advertising as a Creative Manager.</P> <P>I'm a nut about flying private airplanes, and recently completed the requirement for my private license. Want to see <A HREF="ab_solo.html">pictures</A> of me soloing? Now it looks like it's a crap-shoot to see if the kids get through college before or after I buy myself a plane!</P> <HR> <img src="business.gif" ALT="Business"> <H2>John's Contract Web Services</H2> <H3><I>How Great Can It Look?</I></H3> <P>I make every effort to make myself available at reasonable rates to local businesses who have a serious need for a strong graphics designer. With a background in advertising, public relations and editorial layout, I'm the all-around solution for any business that needs something that looks just right! </P> <P>My <A HREF="contract.html">sales pitch</A>, <A HREF="resume.html">resume</A> and <A HREF="contract.html#rates">freelance rate card</A> are available here for your appraisal. If you'd like to get a hold of me to discuss a project, you can do that by <A HREF="mailto:jjones@net.com">sending me email</A> or call me during business hours at 214/555.4369.</P> <HR> <H6>Copyright John Jones 1996. All Rights Reserved. Do not duplicate without permission.</H6> <H6>These pages are HTML 2.0 friendly!</H6> </BODY> </HTML>

If there's anything this page shows, it's the importance of content over design. The point of this page is just to be friendly and talkative, while using HTML throughout to make the page presentable and approachable. Are people really interested in John's family photos? They probably are, and it's not so bad for business contacts to get to know you as a person. Take the space you need, but break up text with lines and small graphics (see fig. 30.2).

Figure 30.2 : The About John page.

Also notice the consistency from page to page, like the text menu and logo at the top of the page. I'd suggest this same level of consistency for your pages, as well. It makes them more memorable and reminds people that all this great information is part of your site. You don't have to be dull on your pages, but I do suggest that you have a guiding design.

Example: Simple Business Pages

Perhaps this next page could be a little more graphically appealing, but I'm not a graphic artist-John is. What it does is communicate business information without being too overwhelmingly commercial. Are you going to generate a lot of leads on the Web? Not without investing a lot of time in your site and making an effort to distribute your URL. But, it's also a ready-made brochure for folks who are interested. Perhaps it'd be a good idea for John to put some designs online to serve as a Net-based portfolio-especially if he plans to work for people around the country (or world) via the Internet. Enter Listing 30.3 in your text editor to create the page.

Listing 30.3 contract.html Communicating Business Information on a Personal Site

<HTML> <HEAD> <TITLE>Freelance Info and Rates</TITLE> </HEAD> <BODY> <IMG SRC="contractlogo.gif" ALT="Freelance Logo"> <H5> <A HREF="index.html">Index</A> | <A HREF="about.html">About John</A> | <A HREF="contract.html">Business Info</A> | <A HREF="resume.html">Resume</A> | <A HREF="feedback.html">Web Feedback</A> </H5> <HR> <H2>Shouldn't Your Business Literature Show Your Strengths?</H2> <P>No matter what you may hear, there's only one way to be a great salesperson. <B>Believe in your product!</B> If you believe in your product, then people will believe in you and your company. In order to make sure they understand the depths of your faith, though, you need to catch their eye!</P> <UL> <LI>Brochures and Sales Literature <LI>Catalog Layout <LI>Advertising/Promotional Layout <LI>HTML and Web Site Development <LI>Corporate Presentations <LI>Public Relations Material </UL> <HR> <A NAME="Rates"> <H2>Freelance/Contract Rates</H2> <P>I'm willing to work both as a contractor and per piece. As is generally the case, any project is negotiable. Please contact me with full details of the project. My office number is 214/555.4369. Or, feel free to send me <A HREF="mailto:jjones@net.com">email</A>. </P> <P>The following are my base rates for contract and per piece work: <PRE> Brochures and Sales Literature $100-300 per page Catalog Layout $65 an hour Advertising/Promotional Layout $100-300 per advertisement HTML & Web Site Development $65 an hour, $100-200 per page Corporate Presentations $100 an hour Public Relations Material $65 an hour </PRE> <H6>Copyright John Jones 1996. All Rights Reserved. Do not duplicate without permission.</H6> <H6>These pages are HTML 2.0 friendly!</H6> </BODY> </HTML>

Aside from the continued consistency, we've got two notable uses of HTML here. First, the use of a NAME anchor isn't even taken advantage of in the HTML on this page. But back in the personal biography, we did link to this part so that folks can get right to the rates if they want. Also, notice that the <PRE> tag works as a low-end HTML substitute for the table tags that you can't use (since you're doing this with only HTML 2.0 tags) (see fig. 30.3).

Figure 30.3 : John's freelance info page.

Example: John's Resume

Our next step is to add John's resume. I guess, by rule, a resume is a little dry, but perhaps that also adds to the professionalism. Again, a graphic designer should be a little more original with his/her resume than this-but it's a nice template for the rest of us (see Listing 30.4).

Listing 30.4 resume.html A Sample Resume in HTML

<HTML> <HEAD> <TITLE>John's Resume Page</TITLE> </HEAD> </BODY> <IMG SRC="resumelogo.gif" ALT="Resume Logo"> <H5> <A HREF="index.html">Index</A> | <A HREF="about.html">About John</A> | <A HREF="contract.html">Business Info</A> | <A HREF="resume.html">Resume</A> | <A HREF="feedback.html">Web Feedback</A> </H5> <HR> <H2>John's Resume</H2> <H3>EDUCATION</H3> <B>University of North Texas </B> <I>Sept. 1984-May 1989</I> Denton, Texas BA in Fine Arts, Minor in Computer Science. <I>Cum Laude Honors, Dean's List, National Merit Scholar.</I> <H3>SUMMARY OF QUALIFICATIONS</h3> <UL> <LI>Proven designer and layout artist strong background in computing. <LI>Experience with creation and implementation of Hypertext Markup Language (HTML) <LI>Very familiar with Internet and online issues. <LI>Constantly in touch with the computer industry through trade publications, on-line interaction and dealings with computer publishers and industry contacts. <LI>Solid team player and leader with experience and formal education in business management. </UL> <H3>WORK EXPERIENCE</h3> <P><B>BigCorp Advertising</B> (Dec. 1994-Present)<BR> Dallas, TX<BR> <I>Advertising Creating Manager</I><BR> Manage staff of twenty-five designers, writers and support personnel in the creation of all in-house advertising. Oversee the production of all print and direct mail advertising, and responsible for managing input from out-sourced advertising specialists. </P> <P><B>BigCorp Advertising</B> (Oct. 1989 - Dec.1992)<BR> Dallas, TX<BR> <I>Designer</I><BR> Responsible for creating print advertising on Macintosh computers for a variety of products and mediums. Contributed to multimedia projects, TV design and in-store retail signage. </P> <P><B>Jones Designs</B> (Sep. 1988 - Present)<BR> Dallas, TX<BR> <I>Freelance Artist/Designer</I> Accounts have included BigSoftDrink Co., FashionableClothes Inc, and MajorProductionCompany Entertainment. </P> <H6>Copyright John Jones 1996. All Rights Reserved. Do not duplicate without permission.</H6> <H6>These pages are HTML 2.0 friendly!</H6> </BODY> </HTML>

Again, there's good continuity and clean design (see fig. 30.4). Can't ask for much more than that.

Figure 30.4 : John's resume.

I think you can see where I'm going with this. The strongest point is this: you can do a lot with an HTML 2.0 site, and working just in 2.0 makes sure your documents are available to the widest audience possible. Keep your site newsworthy, interesting, consistent, and personal, and you'll succeed with your small site.

BigCorp's Client-Side Site

In this section, you'll start by walking through the creation of a large Web site-you guessed it, BigCorp's-in an effort to apply most of the tags, extensions, programming, and theory you've learned throughout this book. I'll try to point out the major issues in each page as we go along.

The point of this site will be to do just about everything you can without consulting the Web server. A growing number of HTML users are able to create sites without back-end programming with the help of JavaScript, client-side images, and similar technologies. Client-side has been the theme throughout this book. Hopefully, these examples will help make that a strong reality for you.

Note

As opposed to the first section of this chapter, the client-side site pushes the envelope of HTML. You'll need the latest version of Netscape Navigator (or a compatible browser) to view these pages-and so will your users.

Example: The Front Door

We've talked about front door pages before: pages designed to introduce users to your Web site, warn them of potentially offensive material, and/or allow them to choose the pages that are best suited to their browser type. In this simple example, you'll create an attractive front door that uses client-pull to draw in Netscape/Internet Explorer users, while giving others a chance to click for the HTML 2.0 compatible version of our site (see Listing 30.5).

Note

For purposes of putting this file on the CD-ROM, I've named it bg_index.html. Since it's the first page of this particular site, though, you may want to save it as index.html in a different directory from the personal site files you created earlier in this chapter. I recommend that you begin your sites with a document named index.html whenever possible.

Listing 30.5 bg_index.html A Business' Front Door Page

<HTML> <HEAD> <TITLE>BigCorp - What Type of Browser Are You Using?</TITLE> <META HTTP-EQUIV="REFRESH" CONTENT = "15; URL=http://www.fakecorp.com/graf_idx.html"> <IMG SRC="logo.gif"> <H2>Welcome to BigCorp's Web Site!</H2> <P>To better serve all different browsers, we've created this site with both a <A HREF="http://www.fakecorp.com/graf_idx.html">high graphics</A> choice and a <A HREF="http://www.fakecorp.com/H2_idx.html">HTML 2.0</A> choice. Please choose the appropriate site for you. After 15 seconds, the high graphics site (especially appropriate for Netscape and Internet Explorer users) will load automatically if your browser will support it.</P> <H3>Enjoy Your Stay!</H3> </DIV> </BODY> </HTML>

This page gives users the choice of either clicking to move directly to their desired site or waiting for the high graphics site to load using client-pull. Also, users with browsers that don't support client-pull will be forced to click one of the choices, since they won't automatically move on. Figure 30.5 shows how this page appears in a browser.

Figure 30.5 : Your client-pull front door in Netscape Navigator.

Example: The Graphical Index

The next page will be the "high graphics" index for this site. You'll use client-side image map technology to link users to the various parts of BigCorp's Web presence. In addition, you'll add an Internet Explorer background sound and a background image (see Listing 30.6).

Listing 30.6 graf_idx.html The Graphical Index for the Business Site

<HTML> <HEAD> <TITLE>BigCorp's Index</TITLE> </HEAD> <BODY BACKGROUND="paper.gif"> <BGSOUND="welcome.wav"> <DIV ALIGN="CENTER"> <H2>Welcome to BigCorp!</H2> <H5><A HREF="index.html">Index</A> | <A HREF="products.html">Products</A> | <A HREF="service.html">Customer Service</A> | <A HREF="support.html">Tech Support</A> | <A HREF="about.html"> About BigCorp</A></H5> <A HREF="help.html"><IMG SRC="main_map.gif" ALT="BigCorp's Map Graphic" USEMAP="#mainmap"></A> </DIV> <IMG SRC="news.gif"> <BLOCKQUOTE> <P><A HREF="story1.html">BigCorp releases new Pentium Pro Systems.</A> <B>August 2</B> As the summer boils down to a footrace between popular computer manufacturers, BigCorp makes the leap to Pentium Pro and multi-processing Pentium Pro systems for the high-end server and graphics markets. With clock speeds of up to 300 Mhz, the BigCorp systems should lead the pack for weeks, at least.</P> <P><A HREF="story2.html">Better paper towels, less messy residue.</A> <B> August 3</B> BigCorp, the largest global manufacturer of household paper products, has announced the next step in paper towels at WipeCon '97. The new design, based on patented advances in textiles (researched on BigCorp's orbiting SolarLab deep-space project) should but cloth towels to bed once and for all. "We're looking to take paper towels into the shower stall by year's end," said Wilhem Spotz, VP of Clensing Technology.</P> </BLOCKQUOTE> <H5>Please send concerns about this server to <A HREF="mailto:admin.fakecorp.com"> the WebMaster</A>. For more information on BigCorp and BigCorp products, call or write:</H5> <ADDRESS> BigCorp Customer Service<BR> 0001 Real Tall Building<BR> Metropolis, USA 00001<BR> 888-BIG-CORP<BR> </ADDRESS> <H6>Pages and Content Copyright 1996 BigCorp Multimedia. All rights reserved. Do not duplicate without permission.</H6> <MAP NAME="mainmap"> <AREA SHAPE="rect" COORDS="18,12,140,33" HREF="index.html" ALT="Back to Index"> <AREA SHAPE="rect" COORDS="17,44,245,65" HREF="products.html" ALT="To Products"> <AREA SHAPE="rect" COORDS="97,87,327,147" HREF="about.html" ALT="About BigCorp"> <AREA SHAPE="rect" COORDS="183,159,403,180" HREF="service.html" ALT="To Customer Service"> <AREA SHAPE="rect" COORDS="265,192,403,213" HREF="support.html" ALT="To Tech Support"> <AREA SHAPE="rect" COORDS="0,0,424,223" HREF="help.html" ALT="Help with Map"> </MAP> </BODY> </HTML>

On this index page, I'm using a client-side image map to allow users to move around on the site, as well as offering some typical home page elements like news, addresses, and mailto: links for more information. Using WebMap to determine the client-maps coordinates gave the results in figure 30.6.

Figure 30.6 : The map definition file.

From there, it was as simple as plugging in the coordinates for each shape of the client-map. I turned the client-map background transparent, wrapped it in a regular clickable-image anchor (to allow non-client-side browser to access a help page), and saved. It's ready to go up on my Web site (see fig. 30.7).

Figure 30.7 : The finished index page.

Example: BigCorp's About Page

One of the methods for HTML layout that's gaining a lot of popularity on the Web is using HTML table tags (without borders) to give the user more control over the page. For BigCorp's About page, let's use HTML tables to layout some of the historical information we're going to provide our users (see Listing 30.7).

Note

Again, I've changed the name of this file for saving on the CD-ROM. Changing its name to about.html will allow it to work correctly with the rest of the pages in this site.

Listing 30.7 bc_about.html Using Tables for Page Layout

<HTML> <HEAD> <TITLE>About BigCorp</TITLE> </HEAD> <BODY BGCOLOR="FFFFFF"> <TABLE BORDER=0 WIDTH="500" CELLPADDING="10" CELLSPACING="5"> <TR> <TH COLSPAN="3" ALIGN="CENTER"><IMG SRC="ab_logo.gif"></TH> </TR> <TR> <TD WIDTH="40"> <A HREF="corphist.html">Corporate History Page</A> </TD> <TD> <IMG SRC="mrbig.gif"> </TD> <TD> BigCorp started many years ago with a unique vision of the future. Mr. BigBucks, founder, explained some of those ideas in this story. </TD> </TR> <TR HEIGHT="75"><TD COLSPAN="3" ALIGN="CENTER"><HR></TD></TR> <TR> <TD COLSPAN="2"> <A HREF="manfact.html">BigCorp Textile Manufacturing</A> </TD> <TD> Get the inside scoop on our textiles division, plus contacts, phone numbers and executive biographies. </TD> </TR> <TR HEIGHT="75"><TD COLSPAN="3" ALIGN="CENTER"><HR></TD></TR> <TR> <TD COLSPAN="2"> <A HREF="compute.html">BigCorp Computer Manufacturing</A> </TD> <TD> Here's information on the latest plant information and press releases from BigCorp Computer, including information about retail outlets, service centers, phone numbers and PR contacts. </TD> </TR> </TABLE> </BODY> </HTML>

In this way, creative use of tables (especially without borders) can give you amazing control over the layout of your page. The more specific you want to be about where something appears, the more specific you can be with attributes like WIDTH and HEIGHT for rows and columns. Tables are basically a way you can "compartmentalize" each page-giving you rather exacting control over how and where things appear (see fig. 30.8).

Figure 30.8 : Using a page-sized table for enhanced layout.

Example: Using Frames

Your next step will be creating a frames interface for the product pages. What we're interested in doing here is creating three basic frames: a logo frame at the top, an icon interface for different products along the left, and a main viewer window to the right. This will allow users to quickly access all of BigCorp's products using a familiar interface.

This sort of interface assumes you have a lot of different pages to get to from this one viewer. I'll create an example of each, but it'll be up to you to fill in with the many pages of information you might want to offer on your company's products or your personal interests.

First, let's create the banner document for the frame interface's top row logo (see Listing 30.8).

Listing 30.8 prodlogo.html Logo and Menu for the Top Frame

<HTML> <HEAD> <TITLE>Product Logo</TITLE> </HEAD> <BODY BGCOLOR="#FFFFFF"> <DIV ALIGN="CENTER"> <IMG SRC="prodlogo.gif"> <H5><A HREF="index.html">Index</A> | <A HREF="products.html">Products</A> | <A HREF="service.html">Customer Service</A> | <A HREF="support.html">Tech Support</A> | <A HREF="about.html"> About BigCorp</A></H5> </DIV> </BODY> </HTML>

Use Listing 30.9 for the next step of creating the icon interface for the left side of your frame document.

Listing 30.9 prodicon.html Icon List for Accessing Pages in main_viewer

<HTML> <HEAD> <TITLE>Icon List</TITLE> </HEAD> <BODY BGCOLOR="#FFFFFF"> <P> <A HREF="prod_idx.html" TARGET="main_viewer"><IMG SRC="bag.gif" ALT="To Index" BORDER="0"></A><BR> Index<BR> </P> <P> <A HREF="books.html" TARGET="main_viewer"><IMG SRC="books.gif" ALT="Books" BORDER="0"></A><BR> Books<BR> </P> <P> <A HREF="pe.html" TARGET="main_viewer"><IMG SRC="camera.gif" ALT="Personal Electronics" BORDER="0"></A><BR> Personal<BR> Electronics<BR> </P> <P> <A HREF="hunting.html" TARGET="main_viewer"><IMG SRC="gun.gif" ALT="Hunting Goods" BORDER="0"></A><BR> Hunting<BR> Goods<BR> </P> <P> <A HREF="sporting.html" TARGET="main_viewer"><IMG SRC="sunglass.gif" ALT="Sporting Goods" BORDER="0"></A><BR> Sporting<BR> Goods<BR> </P> <P> <A HREF="computer.html" TARGET="main_viewer"><IMG SRC="computer.gif" ALT="Computers" BORDER="0"></A><BR> Computers<BR> </P> </BODY> </HTML>

Notice the use of the TARGET attribute for the anchor, so that clicking these icons forces a new page to appear in the main viewer window of your frames interface. Also notice that I've used the Netscape-specific BORDER attribute for IMGs. At least in Netscape (and compatible browsers), this keeps those boxy clickable-image borders from appearing. Luckily, since only Netscape-compatible viewers can see this frames interface in the first place (and we also used a front door for HTML 2.0 users), you're free to experiment a bit here.

Now, let's use Listing 30.10 for the product index page, which will serve as the default page for the main viewer frame.

Listing 30.10 prod_idx.html Default Index Page for main_viewer

<HTML> <HEAD> <TITLE>Product Index</TITLE> </HEAD> <BODY BGCOLOR="#FFFFFF"> <H3>BigCorp's Product Index</H3> <P>Use the icons on the left to choose different product categories, or select them from the following list:</P> <UL> <LI><A HREF="books.html" TARGET="main_viewer">Books</A> <LI><A HREF="pe.html" TARGET="main_viewer">Personal Electronics</A> <LI><A HREF="hunting.html" TARGET="main_viewer">Hunting Goods</A> <LI><A HREF="sporting.html" TARGET="main_viewer">Sporting Goods</A> <LI><A HREF="computer.html" TARGET="main_viewer">Computers</A> </UL> </BODY> </HTML>

Pretty straightforward, huh? This page will be loaded automatically with the frame interface (product.html). It's also linked to the graphic bag.gif in the file prodicon.html so that the user can get back to the index page whenever he or she wants.

Now, you need to create a page that will actually be loaded for this example. Fortunately, you have already done this-quite some time ago. Listing 30.11 is most of an example from using tables with graphics in Chapter 15, "Adding Tables to Your Documents."

Listing 30.11 computer.html A Sample Data Page for main_viewer

<HTML> <HEAD> <TITLE>Computer Products</TITLE> </HEAD> </HTML> <BODY BGCOLOR="#FFFFFF"> <H2> BigCorp's Computer Systems </H2> <P>We use only the highest quality components and software for all of our Wintel computer systems. Plus, if you don't see a configuration you like, call (or email) and let us know. We'll custom build to please!</P> <DIV ALIGN="CENTER"> <TABLE ALIGN="CENTER" BORDER="1" FRAME=VOID RULES="NONE" CELLSPACING="3" CELLPADDING="3"> <CAPTION>BigCorp's Computer Systems and Specifications</CAPTION> <TR ALIGN="CENTER"><TH>System 486<TH>System 586<TH>System 686 <TR ALIGN=""CENTER"><TD>486DX2-66 CPU<TD>120 MHZ AMD586<TD>200 Mhz Pentium Pro <TR><TD>8 MB RAM<TD>16 MB RAM<TD>16 MB RAM <TR><TD>500 MB HD<TD>1 GB HD<TD>1.4 GB HD <TR><TD>14.4 Modem<TD>28.8 Modem<TD>28.8 Modem <TR><TD>desktop case<TD>minitower case<TD>tower case <TR><TD>DOS/Win 3.1<TD>Windows 95<TD>Windows NT 4.0 </TABLE> </DIV> <H2>Product Specifications</H2> <P>The following table will tell you a little more about our computer systems. Clicking on the picture of each will tell you even more, offering a full-size photo of the system and some suggestions on peripherals.</P> <HR> <TABLE BORDER CELLSPACING="2" CELLPADDING="2"> <CAPTION>Our System Configurations</CAPTION> <TR ALIGN="CENTER"><TH>Photo</TH><TH>Name</TH><TH>RAM</TH><TH>Hard Drive</TH><TH>Video</TH><TH>Expansion</TH><TH>Case</TH> <TR ALIGN="CENTER"><TD><IMG SRC="6001.gif"></TD><TD>System 6001-60 </TD><TD>8MB</TD><TD>500 MB</TD><TD>1 MB PCI</TD><TD>4 PCI Slots</TD> <TD ROWSPAN="2"> Desktop</TD> <TR ALIGN="CENTER"><TD><IMG SRC="7001.gif"></TD><TD>System 7001-75 </TD><TD>16 MB</TD><TD>1.0 GB</TD><TD>1 MB PCI</TD><TD>5 PCI Slots</TD> <TR ALIGN="CENTER"><TD><IMG SRC="8001.gif"></TD><TD>System 8001-120 </TD><TD>20MB</TD><TD>1.6 GB</TD><TD>2 MB PCI</TD><TD>5 PCI Slots</TD> <TD>Tower</TD> </TABLE> </BODY> </HTML>

In this example, the page computer.html is linked to the icon computer.gif in the prodicon.html file. When the icon is clicked in the left side of the frames interface, the above page will load in the main viewer.

Finally, you have enough components to demonstrate the product frame interface. Here it is in Listing 30.12.

Listing 30.12 products.html Main Frames Interface Page

<HTML> <HEAD> <TITLE>BigCorp's Product Viewer</TITLE> </HEAD> <FRAMESET ROWS="100,*"> <FRAME SRC="prodlogo.html" MARGINHEIGHT="10"> <FRAMESET COLS="20%,80%"> <FRAME SRC="prodicon.html" MARGINHEIGHT="25" MARGINWIDTH="10"> <FRAME SRC="prod_idx.html" NAME="main_viewer" MARGINHEIGHT="25" MARGINWIDTH="10"> </FRAMESET> </FRAMESET> </BODY> </HTML>

Murphy's law seems to dictate that this would be the easiest page to create. We've simply used two <FRAMESET> definitions, with the columns definition nested within the rows definition to create a three panel interface. And, with all of this done, it looks something like figure 30.9.

Figure 30.9 : The product pages frame interface.

Example: JavaScript and Forms

Continuing with the client-oriented Web site, let's create a customer service form that's good for customers to send in data. Instead of using a CGI script to handle the data, though, you'll do the whole thing in JavaScript. After users have entered their preferences and values, you'll output them to the page for their perusal. If they like it, they can send it to you by mail. Sound good (see Listing 30.13)?

Listing 30.13 service.html Main Service Page, Using JavaScript for Sending Data

<HTML> <HEAD> <TITLE>BigCorp Customer Service</TITLE> <SCRIPT>  </SCRIPT> </HEAD> <BODY> <DIV ALIGN="CENTER"> <IMG SRC="servlogo.html"> </DIV> <P>In order that we might better serve you we ask that you simply fill out this form. When you've submitted the form, the results will appear in the text area at the bottom of the screen. If everything looks alright, send it away.</P> <FORM NAME="form1"> <PRE> Your Name: <INPUT TYPE="Text" NAME="name" SIZE="40"> Your Address: <INPUT TYPE="Text" NAME="address" SIZE="60"> Your City: <INPUT TYPE="Text" NAME="city" SIZE="20"> State:<INPUT TYPE="Text" NAME="state" SIZE="2"> Zip:<INPUT TYPE="Text" NAME="zip" SIZE="5"> <HR> <H4>What products would you like more information about? (Check all that apply)</H4> <INPUT TYPE="Checkbox" NAME="desktop"> Desktop computers <INPUT TYPE="Checkbox" NAME="notebook"> Notebook computers <INPUT TYPE="Checkbox" NAME="peripherals"> Peripherals <INPUT TYPE="Checkbox" NAME="software"> Software <HR> Please Choose Your Computer's OS:<BR> <INPUT TYPE="Radio" NAME="os" VALUE="mac" CHECKED> Macintosh <INPUT TYPE="Radio" NAME="os" NALUE="unix"> Unix <INPUT TYPE="Radio" NAME="os" VALUE="win"> DOS/Windows/Win95<BR> <HR> <INPUT TYPE="Reset" VALUE="Clear Form"> <INPUT TYPE="Button" VALUE="Submit" onClick="processForm (document)"> </PRE> </FORM> <HR> <FORM NAME="form2" METHOD="POST" ACTION="mailto:stauffer@rmii.com" ENCTYPE="text/ascii"> <H4>Here's what your information will look like. If you'd like to include a comment, please type it below the other information. Then click below to mail it to us:</H4> <TEXTAREA NAME="results" COLS="60" ROWS="10" WRAP="soft"></TEXTAREA> <INPUT TYPE="Submit" Value="Mail It Off"> </FORM> </BODY> </HTML>

Basically what this script does is take the information from the first form, translate it into some simple text values, assign those values to the textarea in the second form, and then allow the user to edit the data (see fig. 30.10). The script uses the result from the radio buttons in the first form to determine which newline character to use for the textarea, depending on the user's OS choice. Different OSes require different newline characters to format text correctly in a textarea. This script solves that problem.

Figure 30.10 : Client-side form submissions.

Then, when users click the second Submit button (the "send it in" button), the data is sent via e-mail to the address of your choice. In that way, you've avoided using the Web server and CGI-BIN scripts for any of your form processing.

While this scenario seems like nothing more than beauty and cleverness itself, there is one caveat-what to do with the e-mail when it gets to your e-mail box.

The first problem is the fact that the e-mail message is still encoded in that lovely POST format that forms use to send messages to scripts. Figure 30.11 shows an example of a typical received message.

Figure 30.11 : The results of mailto : from POSTing.

It's not very pretty. The second problem is an extension of the first-you're either going to have to process all of these e-mails by hand or you'll need to write a program on your computer that interacts with your e-mail program in some way. Either way is probably fine for the small-business or home Web designer-at least, you get the form data from users without requiring access to the server.

If you're creating for a large corporate installation, though, your best bet is still to use CGI-BIN scripts. If you don't know C, Perl, or AppleScript (on Mac servers), then have a quick chat with your IS folks.

Example: FTP and HTML

Perhaps it's not the most glamorous of possibilities with HTML, but many sites will find a need to include a repository of files on their pages in order to better serve customers. In this example, you'll create the support page for your site, using definition lists to add your FTP-able files (see Listing 30.14).

Listing 30.14 support.html Adding FTP to HTML Documents

<HTML> <HEAD> <TITLE>Product Support</TITLE> </HEAD> <BODY> <DIV ALIGN="CENTER"> <IMG SRC="suplogo.gif"> </DIV> <H2>Support Files and Resources</H2> <P>The following files are available for download from BigCorp. Included are fixes, patches and upgrades for various BigCorp software products. Any comments about this list can be sent to our <A HREF="mailto:supportweb@fakecorp.com"> Support WebMaster</A>. Questions about computer product support can be sent to <A HREF="mailto:questions@fakecorp.com">Support Questions</A>. A technician will mail you back within a few hours (weekdays).</P> <H3>Available for Download</H3> <DL> <DT> <IMG SRC="file.gif"> <A HREF="ftp://www.fakecorp.com/pub/12upd496.zip"> Updated for BigCorp Write 1.2</A> <DD> This update adds support for additional file formats from Microsoft and Word Perfect. Also fixes version 1.2 crashes when used with serial printers, supports OLE 2.0 objects and offers new embedded spreadsheet tools. Updates version 1.2 to version 1.2.4. Please read the enclosed ReadMe file. Type: PkZip archive. <DT> <IMG SRC="file.gif"> <A HREF="ftp://www.fakecorp.com/pub/HTMLad09.zip">HTML Addition for BigCorp Write</A> <DD> Now available for free (just the cost of the download) is new HTML functionality for BigCorp Write. Add standard HTML 2.0 tags to your documents just as if you were word processing! This beta version (0.9) has been fairly stable through our internal testing, but we can't guarantee it won't completely destroy your hard drive. Read the enclosed disclaimer (DISCLAIM.TXT)! Requires BigCorp Write version 1.2 or higher. For Windows. <DT> <IMG SRC="file.gif"> <A HREF="ftp://www.fakecorp.com/pub/HTMLAddition.sit">HTML Addition for BigCorp Write for Macintosh</A> <DD> Same functionality as above, but for BigCorp Write 1.4 and above for Macintosh. Upgrade is PowerPC accelerated. <DT> <IMG SRC="folder.gif"> <A HREF="support2.html">Additional Files</A> <DD> Printer drivers, templates, sample document and additional tools for file compression; older fixes, patches and upgrades. </DL> </BODY> </HTML>

It's pretty straightforward. You can use an FTP-style URL to access files for downloading across the Internet to your users (see fig. 30.12). But, you don't necessarily have to follow the FTP style for folders-especially if you want to offer files with your own descriptions and icons. Notice for the folder at the bottom of the page that you're actually accessing another HTML page where, presumably, you've created another list of files for downloading.

Figure 30.12 : The sample support page offers files for download.

Example: The Help Page

Here's a fun one. You may recall that you set up your client-side image map on index.html to point directly to the document help.html, which is supposed to tell your users that they've clicked a client-side map incorrectly (or, perhaps, that they don't have a map-capable browser). But what if you want to offer a number of different Help topics from this one page?

Using forms, frames, and JavaScript, let's create a page that allows the users to select the type of help they'd like to receive. Our default page will discuss the client-side map, so that users who just "appear" at help get the information they need. Otherwise, if they decide to look up help on their own, they can simply use the Select menu in the top frame to choose the help document they'll read-which will then appear in the bottom window.

This can have many applications outside of help files-using scripts to manipulate pages gives you a great way to serve nearly any type of document from within a frames interface. Product spec sheets, public relations material, software documentation, or just about anything else you can come up with.

The first file you'll create is the JavaScript/form interface for the top half of your frames interface (see Listing 30.15).

Listing 30.15 helpform.html Scripting for a Forms Interface

<HTML> <HEAD> <TITLE>Help Form</TITLE> <SCRIPT>  </SCRIPT> </HEAD> <BODY> <DIV ALIGN="CENTER"> <IMG SRC="helplogo.gif"><BR> <FORM> Choose the Help Topic You Want to View: <SELECT NAME="helppage"> <OPTION SELECTED VALUE="maphelp.html"> Client-side Map <OPTION VALUE="usehelp.html"> Using Our Site <OPTION VALUE="phonhelp.html"> Contacting BigCorp <OPTION VALUE="dl_help.html"> Downloading From Our Site <OPTION VALUE="buy_help.html"> Ordering Products </SELECT><BR> <INPUT TYPE="button" Value="Get Help" onClick="changePage(this.form)"> </FORM> </DIV> </BODY> </HTML>

The key to working with frames and JavaScript is the JavaScript object hierarchy parent.main_viewer. This is telling the script to look in "the frame called main_viewer" of the "parent" document, which, once you're done, will be the frames interface document (help.html). All you have to do is assign a value to the frame's location.href object variable, and the page is loaded.

Another concept you need to understand here is the "array" in JavaScript. Why? Because it's how JavaScript stores the values for a SELECT form element.

Every time you create a new SELECT OPTION statement, that value is stored in a new variable. But notice that there's nothing to name the variable, since it would simply overwrite the last value that was assigned to helppage.value. (That's how you'd do it with some other form elements.)

So your browser creates an "array" of helppage values. The first one gets called helppage[0] (the one with the value "maphelp.html"). The next one gets called helppage[1] and so on. The number is the "index" of the OPTION array-it's how you access each individual option.

Another variable is also created, called helppage.selectedIndex. It holds a number that tells you which index has been chosen. So, in the previous script, I assign the value in selectedIndex to a variable called choice, and then I use choice to access the value of the OPTION that was chosen by your user. Then the value (in this case, the URL of a help page) gets passed to the frame's location.href variable, which causes a new page to be loaded. Cool, huh?

Next, you need to create some filler pages. You'll create a "default" page that talks about the client map, and create one other example to test your frames interface. Use Listing 30.16 for the client map help page.

Listing 30.16 maphelp.html The Default Help Document

<HTML> <HEAD> <TITLE>Client-Map Help</TITLE> </HEAD> <BODY> <DIV ALIGN="CENTER"> <IMG SRC="helplogo.gif"> <H2>BigCorp Web Site Help</H2> </DIV> <P>Please choose the topic you'd like help with from the menu at the top of this pages. If you've arrived here by clicking on the graphic on our index page, read on.</P> <H3>Help with BigCorp Graphical Maps</H3> <P>BigCorp offers a number of different "graphical maps" for navigating its site on the World Wide Web. These maps use "client-side" technology, which means that your Web browser program (the "client") needs to be able to process the information in the different parts of the graphic, thus allowing you to go directly to different parts of our Web site.</P> <P>Since you've arrived here, it seems your browser doesn't support client-side maps. There are a couple of options. First, we'd definitely recommend visiting <A HREF="http://www.microsoft.com/">Microsoft Corp. </A> or <A HREF="http://www.netscape.com/"> Netscape Corp.</A> and downloading the latest versions of their advanced Web browsers. If this isn't feasible, or if you're stuck using a text-based system, we recommend you visit our <A HREF="http://www.fakecorp.com/H2_idx.html">HTML 2.0 compliant pages</A>.</P> <P>If you want to continue to use this enhanced pages, our final recommendation is to use the text links provided on most pages, like those below (which are functional...use them to leave this page.)</P> <DIV ALIGN="CENTER"> <H5><A HREF="index.html">Index</A> | <A HREF="products.html">Products</A> | <A HREF="service.html">Customer Service</A> | <A HREF="support.html">Tech Support</A> | <A HREF="about.html"> About BigCorp</A></H5> </DIV> </BODY> </HTML>

Here's another example of a help page that you can use to test the frames interface. Let's create a page that "helps" users by telling them how to order products from BigCorp (see Listing 30.17).

Listing 30.17 buy_help.html Another Sample Help Document

<HTML> <HEAD> <TITLE>Ordering BigCorp Products</TITLE> </HEAD> <BODY> <DIV ALIGN="CENTER"> <H2>How to Order from BigCorp</H2> </DIV> <P>Find something on our Web site you'd like to order? Well, there are a couple of ways to go about it. Most of the products discussed online are also available through retail outlets. Or, you can order directly from us, and we'll send nearly everything out by the next business day.</P> <UL> <LI>To find a retail outlet for BigCorp Products, call 1-800-BIG-CORP and hit "6" at the main menu. <LI>To order directly from BigCorp, called 1-800-BIG-CORP for electronics, books and computer goods. Sporting and hunting equipment can be ordered by calling 1-800-BIG-FISH. <LI>To order by mail, send a check or money order, including appropriate handling charges and state sales taxes to: Order Fulfillment, P.O. Box 001, Clearing City, MO 90009. <LI>For a catalog of our products, send a letter with your name, address and daytime phone number to: Catalog, P.O. Box 101, Clearing City, MO 90009. <LI>To order a catalog via the Internet, please send your name, address and a daytime phone via an email message to <A HREF="mailto:catalogs@fakecorp.com">catalogs@fakecorp.com</A>. <LI>For Corporate Sales information, call 1-800-BIG-SALE for information on creating a corporate account and requesting a personal sales representative for your company. </UL> </BODY> </HTML>

Finally, you need to create the frame interface page. This one should be fairly simple (see Listing 30.18).

Listing 30.18 help.html The Help Frames Interface

<HTML> <HEAD> <TITLE>BigCorp's Web Help</TITLE> </HEAD> <FRAMESET ROWS="150, *"> <FRAME SRC="helpform.html" MARGINHEIGHT="10"> <FRAME SRC="maphelp.html" NAME="main_viewer" MARGINHEIGHT="5"> </FRAMESET> </HTML>

Gotta love those frame documents.

With all of this said and done, you're ready to test your new interface. When you load help.html, you should see the logo and SELECT menu in the top frame and maphelp.html (the default help page) in the main_viewer frame. Selecting a new help page from the menu and clicking Get Help should change the document in the lower frame (see fig. 30.13).

Figure 30.13 : The sample support page offers files for download.

Chapter 30

HTML Examples

CONTENTS