by Mike Morgan
A personal Web site differs from a corporate or intranet site in that it is smaller and typically built on a tight budget. A business can afford to hire a professional HTML writer. A person writing his own page is often learning HTML as he goes. His site is not likely to use JavaScript, CGI, or other advanced features.
While the code may be less sophisticated than a professionally developed site, there's no reason the personal Web site cannot be developed with professionalism. Start by deciding why you even want a Web site, and what you hope it will accomplish. Then outline a site that will meet those objectives.
This section describes the steps in designing a Web site:
Once you've accomplished these three steps, you're ready to write HTML. The remainder of the chapter shows how to write HTML by using a variety of commercial and shareware tools.
Even a cursory look at the World Wide Web reveals that many sites are operated by businesses who are providing information about their products, either for marketing or technical support purposes. Many people are surprised at the concept of a "personal Web site." While too many personal sites are poorly focused and not useful, there are at least three good reasons to place a personal site on the Web:
For an example of the first type of personal site, see www.dse.com/Company/mike.html, shown in Figure 43.1. This page, part of the personal Web site of the author of this chapter, is part of a site operated by DSE, Inc.
Mark R. Brown, who wrote this chapter in an earlier edition of this book, operates www2.giant.net/people/mbrown/, a site on his favorite topic, airships. Figure 43.2 shows the home page of Mark's personal site.
Gerald Oskoboiny, who developed one of the most popular HTML validation sites on the Web, introduces himself at ugweb.cs.ualberta.ca/~gerald/. Click on his name on any page of his validation site (ugweb.cs.ualberta.ca/~gerald/validate/) and you'll go to his personal page, shown in Figure 43.3. Here you'll find his resume, a list of his Web projects, and a list of future projects he'd like to undertake. You'll also find links to other pages of the Web that represent Oskoboiny's interests. As the developer of one of the most popular validators, Oskoboiny is one of the more influential members of the HTML development community; this page helps you get to know him as a person.
FIG. 43.1
This page showcases the author of this chapter, in his role as a company employee.
FIG. 43.2
There's enough interesting information on this site to hold an airship fan's attention.
FIG. 43.3
If you've used Gerald Oskoboiny's excellent validator, you've probably been curious
about Gerald himself.
Once you've decided why you want a personal Web site, you need to think about the information you want to convey. If your site is a simple description of yourself and your background or experience, you may be satisfied with a single page. If your intent is to promote an idea, you'll need a bit more content. Some people will want more than one personal site--one to describe themselves personally, and one for each major interest area or topic they want to put on the Web.
TIP: Each of us has many different interests. Don't fall into the trap of putting more than one topic into your personal site. Focus each site on one topic, and use each page to develop a single part of that topic. The search engines will do a better job indexing your pages, and your readers will find it easier to retrieve the information they want.
The example in this chapter is drawn from one of Chris Kepilino's personal pages. Chris has many interests. He's a NASCAR fan (and a fan of Ricky Rudd, in particular). He's the Webmaster for his company's site (www.dse.com). He's also a leader of his church's outreach ministry to boys--a program known as Royal Rangers. The example site for this chapter is Chris's Royal Ranger site (www.dse.com/Chris/Rangers/home.html). This chapter uses this site to showcase several development tools and methodologies. The finished site is a good example of how you might develop a page related to a personal project or interest.
Royal Rangers is a world-wide program. The boys in Chris's church participate in local events, sectional events (which cover southeast Virginia), and district events (which draw boys from Virginia and the neighboring states). Chris's primary objective for his site is to provide information about upcoming events to the boys and their parents in his local outpost. His secondary objective is provide on-line information about sectional and district events for use by leaders in other churches.
Figure 43.4 shows the outline of Chris's Royal Rangers site.
FIG. 43.4
Use an outlining tool such as SmartDraw to prepare an outline of your proposed site.
ON THE WEB: ftp://ftp.simtel.net/pub/simtelnet/win95/graphics/sd95-311.zip The graphic in Figure 43.4 was built by SmartDraw, a flowcharting tool for Windows 95 and Windows NT. Similar tools are available for all major platforms. Check www.shareware.com for specifics. (For example, Macintosh users may want to look at Public Works, available from ftp://ftp.amug.org/pub/amug/bbs-in-a-box/files/publish/o-p/publicworks-0.9.9.sit.hqx.)
NOTE: One of the features of SmartDraw that makes it attractive for building outlines of Web sites is that it supports a range of graphical templates. If you're building a large site, you can use smaller graphics. You may also choose to use graphics to represent the type of page. For example, you might give pages of links one shape, and downloadable files a different shape. That way you (or a client) could tell something about the design of your site without having to read the outline in detail.
Choosing a Focused Topic Surprisingly enough, the first step in setting up a personal Web site is often the most difficult--choosing a topic for each page. It's important that each page have a single topic. This approach will help you bring visitors to your Web site. Suppose you're interested in auto racing. If your site is indexed by the search engines under keywords like "NASCAR" and "auto racing," you'll draw visitors with those interests. If the same page also addresses, say, Royal Rangers, the effect in the search engines is to dilute the auto racing keywords. Your page will appear to be less relevant to auto racing, so you'll draw fewer visitors. Many of the visitors who do find their way to that page may not be willing to scroll past information on Royal Rangers just to get to your auto racing content. The World Wide Web is a unique medium in that just about anyone can put up a site and sit back and see who visits. The problem is, that's just what happens. Most Web sites--especially personal Web sites--aren't well thought out. Many people put up a site that includes everything they're interested in: their family, hobbies, line of work, and so on. Let's face it, the odds are against you that anybody surfing into your site will be interested in all of the things that interest you.
The first thing you need to do is pick a topic. If you want to cover more than one topic, set up two or more Web sites. You can even make a tasteful "Table of Contents" page that directs people to your various topics. Keep the topics separated, or you'll lose your audience by making a bad first impression.
TIP: On the Web, all you have is a first impression. With millions of sites on the Web, nobody's going to stick around your site long if you don't impress them. They'll surf off to a more appealing site.
Once you have your topic, it's important to narrow it down even more. Run your topic past the major search engines to see who else has done a site on the subject, as shown in Figure 43.5. If your interest is rock climbing, you might want to concentrate on a particular geographical area, or a specific technique. Yahoo lists 323 sites on rock climbing, and you've got to attract a specific group if you're going to make a name for yourself. If you're going to focus on Yosemite, you're competing with nine other sites. You may stand a better chance of becoming a Web legend (at least among local climbers) if you concentrate on the mountain in your own back yard. There are only two sites on climbing in Virginia, and one of those is a climbing gym 100 miles from the nearest mountain.
The topic chosen for the site shown in this chapter is narrow enough to virtually guarantee uniqueness: the activities of a single Royal Ranger outpost. This site is of immediate interest to around 100 people. Much of the material, however, describes activities at the section and district level, so Chris can reasonably expect visits from Rangers and their leaders throughout the mid-Atlantic region. Furthermore, many leaders visit other outpost's sites to get ideas for activities, so the site may be of benefit to anyone associated with Royal Rangers.
NOTE: If you're building a personal Web site for your own enjoyment more than as a resource for other users, you don't need to think as much about keeping your pages focused. Just have fun and experiment.
FIG. 43.5
When choosing a topic for your Web site, check out search engines like Yahoo! (www.yahoo. com) to see who else has addressed
your topic, and find out what they've already done.
After selecting a focused topic, with a subtopic for each page, the next step is to choose the types of content you'll provide on your site. Depending upon your subject matter, you may want to include video clips, audio files, graphics, lists of hyperlinks, text files, or database information.
TIP: It's best to go with what you have access to that's unique. If a particular graphic or video clip is already available on the Web, don't copy it--link to it. Aside from copyright restrictions, hyperlinking helps you avoid reinventing the wheel. Just be sure to check your site regularly to keep the links up-to-date.
In the case of the Royal Ranger site, Chris has an extensive library of photographs he's taken at Ranger events over the years. He also has some interesting text articles he can include or link to.
TIP: Make sure all of the material you put on-line is in the public domain, or get permission from the copyright holder to use it. Though there's a lot of "borrowing" on the Web, there's no need to violate copyright laws when you're putting up your Web site. Make sure you have permission before you make the copy.
ON THE WEB:
http://www.hwg.org/resources/business/copyright.html Learn more about copyright issues and the Web from the HTML Writers Guild. This unique resource is free. You'll get even more info if you join the guild. The only "cost" is the on-line e-mail list you're asked to subscribe to.
While you don't need to be a professional HTML writer to put up a personal page, you will benefit from a few professional pointers. Consider joining the HTML Writers Guild (www.hwg.org)--there's no charge. At least review their Web site and search the archives of their mailing lists to find any messages that might be useful.
Choosing an HTML Level One of your first decisions should be which level of HTML to use. As a general rule, use the latest released version. Check www.w3.org/MarkUp/ to see whether a particular level (for example, 3.2, 4.0) is officially released, or still in draft. If the level is released, then all of the major browsers (for example, Microsoft Internet Explorer and Netscape Communicator) typically support the tags. Visit www.hwg.org/resources/html/demos.html to see more browser testers and lists of which features are supported by which browsers. BrowserCaps (www.pragmaticainc.com/bc/) is a particularly useful site in this regard.
Be sure that each page gets the <!DOCTYPE> line at the top that reflects the level of HTML you've chosen. If your HTML editor doesn't add it, you should add that line by hand.
NOTE: When you validate HTML, you validate against a specific level of the language. The specifications for each level are provided in computer-readable form in a file called a Document Type Definition, or DTD. Use the <!DOCTYPE> line to tell validators where to find the DTD you want to use when your code is tested. For example, if you're using HTML 4.0, you might write
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
You can find a comprehensive list of DTDs at http://ugweb.cs.ualberta.ca/~gerald/validate/lib/catalog.
ON THE WEB: http://www.pineapplesoft.com/reports/sgml/index.html--DTDs are part of a larger language, the Standard Generalized Markup Language, or SGML. SGML is the language in which other Internet-related languages, including HTML, are defined. Learn more about SGML from Benôit Marchal's site, "SGML in Plain English."
Thinking About Bandwidth You should plan to include some graphics on your page, if only to make it more interesting. Too many graphics can slow the download of your page, especially if your visitors have a dial-up connection. Here are some rules of thumb that will improve the performance of your graphics:
Whether you choose to write your HTML by hand (in a text editor), or with a tool such as Hot Metal Pro (www.softquad.com), Microsoft FrontPage (www.microsoft.com/frontpage/), or Netscape Composer (a component of Netscape Communicator, described at home.netscape.com/comprod/products/communicator/composer.html) you should be sure to submit your finished pages to a validator. Validators look for the <!DOCTYPE> line at the top of each page--be sure you or your tool have supplied it.
Once you've verified that your HTML is valid, use other tools such as Weblint and Doctor HTML to ensure that your HTML is good. The example shown in this chapter is tested against all three of these tools.
After your site is published and has passed all of the HTML tests, it's time to tell the world about your site. Begin by listing your site with the major search engines. Then find similar sites and ask them to list your site on their list of links. (You will, of course, return the favor.) Finally, don't hesitate to use non-electronic means to promote your URL. If your personal site addresses a topic of widespread interest, then newsletters, word of mouth, and fan or enthusiasts clubs are appropriate ways to spread the word about your personal site.
If you're using Microsoft Windows 95 or Windows NT 4.0 Workstation (with Service Pack 3 or higher) as your desktop machine, you can put together a simple personal Web page and publish it with Microsoft's peer Web service. Figure 43.6 shows the Personal Web Manager, the component of the Personal Web Server that allows you to actually set up your personal page.
To set up a personal page, start by clicking the About Me icon in the left frame. Figure 43.7 shows the About Me form. We can approximate the first of the Royal Rangers page we want by selecting My Organization in the "This Site is for" menu.
FIG. 43.6
If you're using one of the newer Microsoft operating systems, you may be able to
run the Personal Web Server on your desktop.
FIG. 43.7
Choose an appropriate "This Site is for" item to customize the personal
page.
Once you've filled out the form, click the Web Site icon in the left frame. The first time you choose this icon you'll start a wizard that prompts you for a page type, style, background, title and a list of favorite hyperlinks. You may also select whether you want to have a guest book and private message area on the page.
When you're done configuring your page, click on the Main icon and follow the link to your finished page. Figure 43.8 shows the page generated by the Personal Web Manager, as viewed in Microsoft Internet Explorer.
We get our first indication that the HTML of this page is not what it should be by viewing the page in Netscape Communicator. Figure 43.9 shows the Personal Web Manager's generated HTML in Netscape's browser. Note that the entire left column, with the date, time, and list of favorite links, is missing. Either there's a serious problem with Navigator 4.0 (the browser in Communicator) or there's a problem with this HTML.
FIG. 43.8
By default, the Personal Web Manager uses Internet Explorer to show you your page.
FIG. 43.9
The code generated by the Personal Web Manager does not work correctly in Netscape's
browser.
The Personal Web Manager does not write HTML--it writes an Active Server Page, or ASP. Microsoft's server uses the ASP to generate HTML at runtime. To check the quality of the HTML, publish the generated page to a server that is accessible from the Internet, and run Gerald Oskoboiny's Kinder, Gentler Validator (KGV), located at http://ugweb. cs.ualberta.ca/~gerald/validate/. You'll need to add an HTML 4.0 <!DOCTYPE> line to the top of the file:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 //EN">
The validator uses that line to know which level of HTML to use when checking the code. With the <!DOCTYPE> in place, the finished code is shown in Listing 43.1.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 //EN">
<html>
<head>
<title>Royal Ranger Outpost 142</title><LINK REL=StyleSheet HREF='modern.css' TYPE='text/css' MEDIA=screen>
</head>
<body
Background="/bg10.gif"
topmargin="5" leftmargin="5">
<TABLE border="0" cellpadding=8 width="100%">
<tr>
<td valign=top
rowspan=2
nowrap>
<h2>Welcome!</h2>
<p>Today is August 4, 1997.<p>
The local time is 7:55:16 PM.<br>
<p>
<TABLE border=0><TR><TD><h4>While you are here...</h4></TD></TR>
<TR><TD>Send me email:<BR>
<a href="mailto:kepilino@mail.dse.com">kepilino@mail.dse.com</a></TD></TR>
</TABLE><TABLE border='0'>
<TR><TD>
<IMG SRC="4favlink.gif" width="50" height="50" align="left">
</TD>
</TR>
<TR><TD><ul>
<li><A HREF='http://www.royalrangers.org/'>Royal Rangers</A><BR><li><A HREF='http://www.rangernet.org'>RangerNet</A><BR>
</ul></TD></TR>
</TABLE>
<a href="http://www.microsoft.com/ie/default.asp"><img src="/ie.gif" border=0 height=31 width=88></a>
</TD>
<TD width="18" VALIGN="top"> <!-- SPACER CELL --></TD>
<TABLE border="0" cellpadding=8 width="100%">
<TR>
<TD align=center valign=top >
<H1>Royal Rangers Outpost 142</H1>
</TD>
</TR>
<TR>
<TD VAlign="top"> <!-- PAGE TYPE CONTENTS --><!-- IF NO Pagetype picture, then colspan=1 -->
<h2>Royal Ranger Outpost 142</h2><BR>
4925 Providence Road Virginia Beach, VA 23464 <br>
757-495-1004<br>
<h2>
<HR>
</H2><br>
<H3>Outpost 142 is an outreach ministry of Calvary Assembly of God in Virginia Beach, Virginia. Our mission is to "Reach, Teach, and Keep boys for Christ."</h3>
</TD>
</TR>
<!-- ADDITIONAL PERSONAL CONTENTS -->
</TABLE>
<!-- END ADDITIONAL PERSONAL CONTENTS -->
</TD>
</tr>
</table>
</body>
</html>
The HTML validator shows that the Personal Web Manager's code has several serious defects:
As a user of Personal Web Manager, there is nothing you can do to prevent these defects--they represent a problem with Microsoft's product. If you want to correct them, you need to use a text editor to make the corrections one at a time.
Weblint, which takes a pickier view of the code, has found an additional 18 defects.
If you want a quick page that looks OK in Internet Explorer, Personal Web Manger produces such a page. Unfortunately the quality of the code is quite poor--Chris opts not to use this page in his finished Royal Rangers site.
If you've chosen Netscape Naviagator 4.0 as your Web browser, you already have Netscape Composer. Both are components of Netscape Communicator. Launch Netscape Communicator and choose Page Composer from the Communicator menu.
You can build a page from scratch in Composer, or you can use a template. Templates are available online. Once you've started Composer, choose File, New, Page From Template. Then click on the Netscape Templates button in the resulting dialog. Figure 43.10 shows a portion of the list of available templates.
FIG. 43.10
To build a personal page quickly, start with one of Netscape's on-line templates.
Both the Travel Club page and the Windsurfing Club page are reasonable approximations to the home page of Chris's Royal Rangers home page. Once you've chosen a page template, choose File, Edit Page, and then choose File, Save to have the browser save a copy of the page on your hard drive.
You can also build a new page by using the Netscape Page Wizard. Once you've started Composer, choose File, New, Page From Wizard. Your browser will connect to Netscape's site and put up a three-frame page. Click the Start button--you may have to scroll down to see it--in the upper-right pane.
Follow the instructions in the upper-left pane, and enter the information requested in the bottom pane. The upper-right pane shows a preview of the page. Figure 43.11 shows a the page part-way through the building process.
FIG. 43.11
Click on the links in the upper-left pane, and fill in the information at the
bottom of the page.
When you're done, click the Build button in the upper-left frame. Netscape's CGI script generates the page and returns it in a full browser window. Be sure so choose File, Edit Page, and then choose File, Save to have the browser save a copy of the page on your hard drive.
Whether you started your page from a template or from the Page Wizard, you can now use Composer to put the finishing touches on your page. Composer is a WYSIWYG (What You See Is What You Get) editor. Make changes using the tools on the toolbar, and Composer will write the HTML to get the desired effect.
Listing 43.2 shows the code produced by the Page Wizard. Figure 43.12 shows the corresponding page.
<HTML> <HEAD> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1"> <META NAME="GENERATOR" CONTENT="Mozilla/4.01 (WinNT; I) [Netscape]"> <TITLE>Royal Rangers Output 142</TITLE> </HEAD> <BODY TEXT="#CCCCCC" BGCOLOR="#333333" LINK="#FF6666" VLINK="#CCCC66" ALINK="#CCCC66"> <CENTER> <H1> Royal Rangers Output 142</H1></CENTER> <CENTER><IMG SRC="rule12.gif" ></CENTER> <P>Outpost 142 is an outreach ministry of Calvary Assembly of God in Virginia Beach, Virginia. Our mission is to "Reach, Teach, and Keep boys for Christ." <P> <CENTER><IMG SRC="rule12.gif" ></CENTER> <CENTER> <H3> Hot Links</H3></CENTER> <DL> <DD> <IMG SRC="bullet4.gif" > <A HREF="http://www.royalrangers.org">Official Royal Rangers page</A></DD> <DL><IMG SRC="bullet4.gif" > <A HREF="http://www.rangernet.org/">RangerNet</A></DL> </DL> <CENTER><IMG SRC="rule12.gif" ></CENTER> <P>Royal Rangers meet on Wednesday evenings from 7 PM to 8:30 PM. Calvary Assembly of God is located at 4925 Providence Road, in the Kempsville section of Virginia Beach. Call us at 757 495 1004 for more information. <P> <CENTER>If you have comments or suggestions, email me at <I><A HREF="mailto:kepilino@mail.dse.com">kepilino@mail.dse.com</A></I></CENTER> <CENTER></CENTER> <CENTER><A HREF="http://home.netscape.com/comprod/mirror/index.html"><IMG SRC="netnow3.gif" BORDER=1 ></A></CENTER> <CENTER></CENTER> <CENTER><B>This page created with Netscape Navigator Gold</B></CENTER> </BODY> </HTML>
FIG. 43.12
This page is produced from the HTML in Listing 43.2
Clearly this code could stand to be cleaned up a bit--the formatting leaves something to be desired. Of more immediate concern is the lack of a <!DOCTYPE> tag. Let's add an HTML 4.0 <!DOCTYPE> tag, publish the page, and check out the quality of the HTML.
Adding a <!DOCTYPE> Tag <!DOCTYPE> is, of course, essentially a comment. To add a comment in Composer write it as an HTML tag. Choose Insert, HTML Tag. Enter the HTML 4.0 <!DOCTYPE> tag in the resulting dialog box, as shown in Figure 43.13.
Publishing From Composer The easiest way to check the quality of the HTML in a document is to place the document on the Web, where KGV, Weblint, and Doctor HTML can all reach the file. From the Composer menu, choose File, Publish. Fill in the resulting dialog. If you use a Netscape server you can publish directly to the HTTP server, otherwise you'll need to use FTP. Figure 43.14 shows the finished dialog for the first page of Chris's site. When you choose one-button publishing via FTP, Composer logs into the specified FTP server, changes to the specified directory, and copies the specified files to that directory using binary transfer. (If you select an HTTP URL, it does the same thing via the HTTP PUT command. Note that not all HTTP servers can accept files in this way.)
Checking the HTML Once the page is on the Web, you can easily check the HTML. Go to Gerald Oskoboiny's Kinder, Gentler Validator (KGV) at http://ugweb.cs.ualberta.ca/~gerald/validate/ and fill in the URL of the page to check.
TIP: While you're setting up KGV, check "Include Weblint results" and "run Weblint in `pedantic' mode." Pedantic mode makes Weblint especially picky--just what you want in a code-checking program.
FIG. 43.13
If you don't use a <!DOCTYPE> tag, validators and other tools assume
your page is intended to be HTML 2.0-compliant.
FIG. 43.14
Netscape Composer offers one-button publishing via HTTP's PUT method, or by FTP.
When you're ready, click "Submit this URL for validation." KGV will process the page and return the results of its analysis.
For Chris's page, built with Page Wizard, the validator reports several problems with the <DL> that is used to display the bullets. Close examination reveals that the Page Wizard has written code that follows the following outline:
<DL> <DD></DD> <DL></DL> </DL>
Clearly the third line of this construct should be
<DD></DD>
Once we make this change, this code flies through the validator. You can stop and add the code sample Gerald provides, so that a "Valid HTML 4.0" icon appears on the page.
TIP: Add the URL of the page to the HREF attribute in the Valid HTML 4.0 icon's anchor tag. That way, clicking on the icon will rerun the validator--a convenience to you and your visitors. For Chris's home page, the finished code reads:
<A HREF="http://ugweb.cs.ualberta.ca/~gerald/validate/?
url=http://www.dse.com/Chris/Rangers/home.html"><IMG SRC=
"http://ugweb.cs.ualberta.ca/~gerald/validate/valid_html4.0.gif"
ALT="HTML 4.0 Checked!"></A>
Note, too, that the Valid HTML icon doesn't show up well against a black background. You may want to consider using a light background in the finished version, in order to solve this problem.
Now that you know your code is valid HTML 4.0, let's see if it's any good. Scroll down the KGV Validation Results page to the "Weblint Results" section. This section lists more than 40 recommendations that will improve the quality of the code. If you disregard the "... is extended markup" comments--Weblint is stuck in HTML 2.0 thinking--you still have eight solid recommendations:
Adding a <LINK REF=MADE HREF="mailto..."> line in the file's HEAD allows some users of certain browsers (notably Lynx) to easily send e-mail back to the page's author.
You should remove the whitespace in the headers; some browsers will display a garbage character in place of the whitespace.
Once Chris has made these changes, his resulting code passes both the KGV validator and Weblint (in pedantic mode). This code is shown in Listing 43.3.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 //EN"> <HTML> <HEAD> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1"> <META NAME="GENERATOR" CONTENT="Mozilla/4.01 (WinNT; I) [Netscape]"> <TITLE>Royal Rangers Output 142</TITLE> <LINK REV=MADE HREF="mailto:kepilino@mail.dse.com"> </HEAD> <BODY TEXT="#CCCCCC" BGCOLOR="#333333" LINK="#FF6666" VLINK="#CCCC66" ALINK="#CC CC66"> <CENTER> <H1>Royal Rangers Output 142</H1></CENTER> <CENTER><IMG SRC="rule12.gif" ALT="" HEIGHT=22 WIDTH=468></CENTER> <P>Outpost 142 is an outreach ministry of Calvary Assembly of God in Virginia Beach, Virginia. Our mission is to "Reach, Teach, and Keep boys for Christ." <P> <CENTER><IMG SRC="rule12.gif" HEIGHT=22 WIDTH=468 ALT=""></CENTER> <CENTER> <H2>Hot Links</H2></CENTER> <DL> <DD> <IMG SRC="bullet4.gif" ALT="-" HEIGHT=9 WIDTH=9> <A HREF="http://www.royalrangers.org">Official Royal Rangers page</A></DD> <DD> <IMG SRC="bullet4.gif" ALT="-" HEIGHT=9 WIDTH=9> <A HREF="http://www.rangernet.org/">RangerNet</A></DD> </DL> <CENTER><IMG SRC="rule12.gif" HEIGHT=22 WIDTH=468 ALT=""></CENTER> <P>Royal Rangers meet on Wednesday evenings from 7 PM to 8:30 PM. Calvary Assembly of God is located at 4925 Providence Road, in the Kempsville section of Virginia Beach. Call us at 757 495 1004 for more information. <P> <CENTER>If you have comments or suggestions, email me at <EM><A HREF="mailto:kep ilino@mail.dse.com">kepilino@mail.dse.com</A></EM></CENTER> <CENTER><A HREF="http://home.netscape.com/comprod/mirror/index.html"><IMG SRC="n etnow3.gif" ALT="Download Netscape Communicator" BORDER=1 HEIGHT=31 WIDTH=88></A ></CENTER> <CENTER><STRONG>This page created with Netscape Navigator Gold</STRONG></CENTER> <P><A HREF="http://ugweb.cs.ualberta.ca/~gerald/validate/?url=http://www.dse.com /Chris/Rangers/home.html"><IMG SRC="valid_html4_0.gif" ALT="HTML 4.0 Checked!" HEIGHT=32 WIDTH=48></A> </BODY> </HTML>
Imagiware, makers of Doctor HTML (www2.imagiware.com/RxHTML/), offer two versions of their on-line HTML checker. The first is free; the second is a for-fee service. Figure 43.15 shows the results of running Doctor HTML on the code in Listing 43.3. While no new problems were discovered, Doctor HTML adds some interesting new information:
FIG. 43.15
If your page passes Weblint, Doctor HTML is not likely to find too many more problems.
CAUTION: You should always check the Hyperlinks Analysis section. If Doctor HTML claims that a link is valid, but the size is unusually small, the remote server may have returned a "This page has moved" message. Check those links yourself.
If you want to be sure you're writing good HTML, there's no substitute for learning HTML and writing the code yourself.
An HTML editor can help, since tags can be dropped into place, rather than being typed by hand. HotMetal Pro (http://www.softquad.com/) is one of the better HTML editors. Figure 43.16 shows the personal page template from HotMetal Pro. FIG. 43.16 HotMetal Pro's default personal page is a good starting point for Chris's Royal Ranger page. Listing 43.4 shows the code for Figure 43.15.
<!DOCTYPE HTML PUBLIC "-//SQ//DTD HTML 2.0 + all extensions//EN" "hmpro3.dtd">
<HTML>
<HEAD>
<TITLE>{Your Name Here}'s Home Page [animation] [Theme 1]</TITLE></HEAD>
<BODY BACKGROUND="grassbkg.gif" BGCOLOR="D0D0D0" TEXT="FFFFFF">
<CENTER>
<H2><!--You may substitute any image for this one.--><IMG
SRC="IMAGE/home.gif" ALT="Home on the Web" ALIGN="BOTTOM"><BR>{Your Name
Here}'s Homepage<BR><!--You may change this bar to any of the sample bars in
the bar directory.--><IMG
ALIGN="BOTTOM" SRC="IMAGE/grassani.gif" ALT="/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/" WIDTH="100%" HEIGHT="63"></H2></CENTER>
<CENTER>
<P><A HREF="My Resume [Theme 1]"><IMG
ALIGN="BOTTOM" SRC="IMAGE/rsme_btn.gif" ALT="Resume"><!--CHOOSE EDIT URL FROM
THE LINKS MENU TO SET THIS LINK TO YOUR RESUME--></A><A
HREF="My Hobbies [Theme 1]"><IMG
ALIGN="BOTTOM" SRC="IMAGE/hoby_btn.gif" ALT="Hobbies"><!--CHOOSE EDIT URL FROM
THE LINKS MENU TO SET THIS LINK TO YOUR HOBBIES PAGE--></A><A
HREF="My Biography [Theme 1]"><IMG
ALIGN="BOTTOM" SRC="IMAGE/bio_btn.gif" ALT="Biography"><!--CHOOSE EDIT URL FROM
THE LINKS MENU TO SET THIS LINK TO YOUR BIOGRAPHY--></A><A
HREF="My Favorite Web Sites [Theme 1]"><IMG
ALIGN="BOTTOM" SRC="IMAGE/web_btn.gif" ALT="Web Sites"><!--CHOOSE EDIT URL FROM
THE LINKS MENU TO SET THIS LINK TO YOUR WEB SITES PAGE--></A><A
HREF="mailto:YOUR_USERID@YOUR_SERVER"><IMG
SRC="IMAGE/mail_btn.gif" ALT="Email Me" ALIGN="BOTTOM"><!--CHOOSE EDIT URL FROM
THE LINKS MENU TO SET THIS LINK TO YOUR EMAIL ADDRESS: see the HOW TO on MAILTO
for more information--></A></P></CENTER>
<P>{INTRODUCE YOUR PAGE -- For example: "Welcome to my own little plot of
cyberland on the net. I'm glad you dropped by. Please feel free to wander
around."}</P>
<P>If you have any questions, or would just like to drop me a line, please send
email to:
<A HREF="mailto:YOUR_USERID@YOUR_SERVER">{INSERT YOUR EMAIL ADDRESS HERE}<!--CHOOSE
EDIT URL FROM THE LINKS MENU TO SET THIS LINK TO YOUR EMAIL ADDRESS: see the HOW
TO on MAILTO for more information--></A>.</P>
<CENTER>This page was created, of course, using
<IMG SRC="IMAGE/html.gif" ALIGN="ABSMIDDLE"></CENTER></BODY></HTML>
Unlike most HTML editors, HotMetal Pro includes a built-in validator. Choose Special, Validate Document to run this tool. Not surprisingly, the personal page template validates with the internal validator.
Copy the template to the Web and run KGV (with Weblint in pedantic mode). You'll need to change the <!DOCTYPE>--the one supplied specifies SoftQuad's own variant of HTML. The default template shows only one error: on line 38, the ALIGN attribute is set to ABSMIDDLE. Legal values for this attribute are MIDDLE, BOTTOM, LEFT, and RIGHT.
Once you've made that one change, hotmetal1.htm passes the KGV. Weblint has 11 recommendations (not counting the usual warnings about extended markup). Eight of these recommendations have to do with setting ALT, WIDTH, and HEIGHT in IMG tags.
All in all, you can generate a personal page with acceptable HTML by using Netscape Composer; you can generate quite good HTML with HotMetal Pro and similar editors.
ON THE WEB: http://www.dse.com/Chris/Rangers/home.html Visit the finished results of Chris's development online, at the Output 142 site.
© Copyright, Macmillan Computer Publishing. All rights reserved.