By David W. Methvin, Senior Technical Editor
Click Here to see a
123KB bitmap image of artwork
which goes with this article, entitled:
Three Different Browsers
Pick up any newspaper or magazine, or tune in to any television show, and most of the content you see was created by a handful of people. In those media, there are far more content consumers than content creators.
Log onto the Web and the equation changes. Everyone can be both consumer and creator. You don't need to invest a lot of money to become a Web author. If you can offer information or services, that's reason enough to set up a Web site. An Internet service provider (ISP) can give you an account and disk space on its server for a low monthly fee. If your company already has an Internet Web site or an intranet (for internal company use), contact your Webmaster to see if you can post your files there.
Once you've found a home for your page, all you have to do is create the Web page files that people will view when they come to your site. Web pages are written in HTML (hypertext markup language). Exotic as they may sound, HTML files are simply standard text files. You put commands in the files that tell a browser how to display the information. HTML commands are enclosed in less-than and greater-than signs and usually work in pairs. For example, if you want text to be shown in boldface, you would put the actual text <B>your bold words go here</B> into the HTML file. The first tag, <B>, turns boldface on for any characters that follow, and the </B> tag, with a slash before the B, turns boldface off. That's typically how all HTML tags work.
All HTML documents have some things in common. For example, each has a HEAD section that contains the title of the document and optional items such as keywords. The document content is in the BODY section. You can view source code for any Web page right from your browser. Choose View/Source from the menu on Internet Explorer or Netscape Navigator to see the HTML that created it. From there, you can save the HTML to a file on your hard disk and just clip out the pieces you need. That's a quick and easy way to code your own text.
Speaking of clipping out what you need, a Web-based version of this article is available at our Web site at http://www.winmag.com/web. There you'll find more examples of the HTML issues discussed here, plus samples of advanced features such as tables and browser-specific tags. Feel free to clip out and use any interesting pieces of HTML code that you find there.
Notepad is probably the most commonly used Windows HTML editor. It's free with every copy of Windows, but it doesn't offer too many creature comforts. Type the HTML tags into the file along with your text, save it, and load the file with a browser to see whether it looks okay. There are better tools, but none has reached the point of being a what-you-see-is-what-you-get editor. That's because HTML is not a page layout language. You can't control where paragraphs will break, the exact size of text on the screen or many other aspects of layout that you'd be the master of in a print medium.
In fact, it's not really possible to write a true WYSIWYG editor for HTML, because what each person sees depends on the browser being used. Often the browser software calls the shots for layout and presentation. The exact look will depend on factors like:
When you write HTML with Notepad, your file looks nothing like the output from any browser. That's because the browser takes the HTML file you've created and "processes" it to get the actual layout. For example, the browser will take all white space (spaces, tabs, blank lines) and squish it down to a single space. That means it's not good enough to put a blank line in the file to separate two paragraphs. You have to tell the browser that "a new paragraph begins here" by using the <P> tag in front of the paragraph and a </P> at the paragraph's end.
Click Here to see a
49.5KB bitmap image of artwork
which goes with this article, entitled:
The WinMag Site Map
Before you start writing HTML documents, you need to name them so people can find them on the Web. The Internet uses a universal resource locator (URL) to refer to resources (primarily files). A typical URL is http://www.winmag.com/common/feedback.htm.
Don't let the highfalutin name fool you. A URL is basically just a filename that specifies the server, directory, filename and extension.
The basic form of a URL is protocol: //domain/directory/name.extanchor. Protocol tells the Web browser software what protocol to use when accessing this resource. The most common by far is HTTP (hypertext transfer protocol). You'll also see ftp (file-transfer protocol) used for large file transfers. The domain specifies the name of the server that has the resource. Directory, name and ext are used in exactly the same way as when accessing a file on disk. When the filename is followed by the pound sign, the name after that is the name of an anchor point inside the document. These will be discussed on the next page.
Not all URL components are needed for every reference. If you don't specify the protocol and domain, the browser assumes you want to use the same protocol and domain as the HTML file it currently has loaded. Without an anchor, the browser will put you at the top of the file. If you don't specify a filename, the Web server-not the browser-usually chooses a default filename such as default.htm or index.html.
The Web's linking capability is its most essential feature, allowing you to refer to graphics and other HTML documents within your own page. Here's the HTML code for a simple link:
Please visit <A HREF="http://www.winmag.com">Windows Magazine</A>.
In most browsers, this would be displayed something like the following:
Hyperlink text is usually underlined and shown in a color that differs from the surrounding text. Typical Web convention says that you should make links out of only a short phrase or a single word. Although you can make a whole sentence, paragraph or document into a single link, the large passages of highlighted text may distract readers. Keep it small.
The HREF field tells the browser where it should go if you click on the text. In the example above, the browser would make a request to the domain www.winmag.com. Since a specific filename wasn't requested, our Web server will send our default page. The browser will then display that page.
Sometimes it's convenient to jump to a point within an HTML document rather than to the top. You can name multiple points in a document, called anchors, that can be referenced later. To do this, place the tag <A NAME="anchorname"> at the point where you want to end up. Then use the anchor name in a URL reference at the jumping-off point, like <A HREF="http://www.winmag. com/sample.htmA1". In this example, A1 is the name of the anchor in the file sample.htm.
Attaching a graphic to a link is easy. One way is to place a reference to the graphic inside a link definition, between the <A HREF= ... > and </A> parts. That would look something like this:
A border surrounding a graphic indicates that it's a link. You can eliminate the border by using the BORDER=0 option of the IMG tag. If you turn the border off for linked graphics, make sure it's still obvious the graphic is a link by putting a text label in the graphic or by shaping it like a button. For a clearer look at how graphics work, see our Web site at http://www.winmag.com/web.
The two types of graphics formats used in a Web page and supported by most browsers are GIF and JPG (pronounced "jiff" and "jaypeg"). Both are compressed formats, so they take less disk space and are faster to send than formats like BMP or PCX. The GIF format supports transparent background colors, so you can silhouette an object, for example. One of the colors in the image is designated a transparent color, and any part of the image in that color will actually show the background color. Create these with Photoshop using the GIF89A export filter or shareware programs like Paint Shop Pro.
Writing a single HTML file that looks good can be a challenge. Writing multiple HTML files on related topics-and linking them together coherently-can be even tougher. You've got to get organized!
HTML doesn't impose any kind of rules about the way you link documents, but you should. Imagine if you took a book, removed the table of contents and chapter numbers, pulled the pages into a half-dozen chunks, and then handed the result to someone who wanted to read it. How would they know the order in which to read the pages? That's the dilemma of Web surfers who fall upon randomly connected pages.
When you have a lot of data to present, start off with a table of contents that outlines the major topics in the order you think people should read them; a bulleted or numbered list is a good way to present your topics.
The links can either take the reader to another point in the same file (via anchors) or to another file. Once you've created a contents page, be sure to provide a link back to it from any page in your presentation. That lets people easily get back to the top-level view and see the topics they've yet to cover.
Make sure the links you make to other pages-and especially other Web sites-are relevant to the topic. It's annoying to be tempted into clicking on a linked document, only to find that the link isn't relevant.
Even at a "fast" 28.8Kb-per-second modem speed, you can only receive about 3,000 bytes of data in one second. During the evening rush when Internet traffic is at its highest, you'll be lucky to get half that from a busy site. That means if you use just one 20KB bitmap on your page it will take at least 7 seconds to send! Here are tips for putting some speed into your HTML.
Keep the HTML file small. The first thing the browser retrieves is the HTML file itself. A browser can get and display a small HTML file quickly, and that means your Web-surfing users will be reading something within seconds.
Keep the graphics small. Large bitmaps take a long time to load and take up a lot of screen space. Put a large graphic at the top of the page, and Web surfers are treated to the sight of it loading in agonizingly slow motion-if they bother to wait. Keep total graphics under 30KB per page; individual graphics should be smaller than that.
Use the same graphic multiple times. As soon as the browser retrieves a graphic once, it's cached on the local hard disk for quick reuse. That means multiple references to the same graphic are basically free.
As a Web author, you'll need to be able to write clearly, using good grammar and proper spelling. You should get someone else to proofread what you've written to see if it makes sense.
Classical wordsmithing isn't sufficient for the Web, though. You'll also need to test your pages for "bugs." Try your HTML on at least two browsers to make sure you haven't used any unwanted browser-specific features. (If possible, one of those browsers should be a version of Netscape, which is used by more than half of all Web surfers.) Click on every link to make sure it goes where you want. Have someone else navigate your site to see if everything seems logical.
Also remember that proofing HTML isn't a one-time job. The links you created may break in the future as the sites you've linked change or remove their pages. Check them regularly.
There's a lot more to HTML. Check out features like tables, forms, mailto links and image maps. If you have a database that you want to make available to Web users, consider using CGI (common gateway interface) scripts and forms to let them query the database. Keep an eye on the cutting edge of Web technology, such as Java and ActiveX. At the rate Web technology is moving, these may become necessities for the well-dressed site by year's end.