Okay, now that you've got a sense of what the World Wide Web is all about, it's time for me to narrow the focus a little. Specifically, you need to get a handle on this HTML hoo-ha that seems to be such an integral part of Web page construction. What is HTML? Why bother with it? What can you do with it? Why does it sound so darned scary? Will it turn your brain to mush? This chapter will answer all these questions and more as we examine HTML in general terms and look at some examples of what HTML has wrought on the World Wide Web.
I have some good news, and I have some bad news. The bad news is that, as I mentioned in the last chapter, HTML stands for-brace yourself-HyperText Markup Language. (I'll pause for a sec to let you get the inevitable shudders out of the way.)
The goods news, however, is that HTML doesn't stand for Hard To Master Lingo. HTML is, in fact, really a sheep in wolf's clothing: it looks nasty, but it's really not that bad (and, no-it won't turn even a small part of your brain to mush). Basic HTML-which is what 90 percent of all Web pages use-isn't much tougher than reciting the alphabet. It's way easier than programming your VCR (which is, I'm sure, good news for those of you who sport that scarlet letter of modern technology: the flashing 12:00 on your VCR's clock). Heck, you don't even have to memorize anything. The handy reference card at the front of this book (which you can tear out and keep at your side or tape to your cat's forehead) tells you absolutely everything you need to know about HTML.
That's all well and good, I hear you say, but HyperText Markup Language isn't exactly a phrase that trips lightly off the tongue; it really does sound intimidating. Well, you're right, it does. So, in the spirit of self-help books everywhere, you need to face your fears and look HTML squarely in the eye. Specifically, let's examine what each element of HyperText Markup Language means in plain English:
HyperText I told you in Chapter 2that a hypertext link is a special word or phrase in a Web page that "points" to another Web page. When you click on one of these links, your browser transports you immediately to the other Web page, no questions asked. Because these hypertext links are really the distinguishing feature of the World Wide Web, Web pages are often known as hypertext documents. So HTML has the word "HyperText" in it because you use it to create these hypertext documents. (It would be just as accurate to call it WPML-Web Page Markup Language.)
Markup My dictionary defines "markup" as (among other things) "detailed stylistic instructions written on a manuscript that is to be typeset." For our purposes, I can rephrase this definition as follows: "detailed stylistic instructions typed into a text document that is to be published on the World Wide Web." That's HTML in a nutshell. It has a few simple codes for detailing things like making text bold or italic, creating bulleted lists, inserting graphics, and, of course, defining hypertext links. You just type these codes into the appropriate places in an ordinary text document and the World Wide Web automatically displays your page the way you want. In fact, the Web browser software handles all the hard stuff.
Language This may be the most misleading word of them all. Many people interpret this to mean that HTML is a programming language, and they wash their hands of the whole thing right off the bat. "You mean I gotta learn programming to get my two cents worth on the Web?" Not a chance, Vance. HTML has nothing, I repeat nothing, whatsoever to do with computer programming. Rather, HTML is a "language" in the sense that it has a small collection of two- and three-letter combinations and words that you use to specify styles such as bold and italic.
All right, so HTML isn't a Hideous, Terrible, Mega-Leviathan, but rather a Harmless, Tame, and Meek Lapdog. What can you do with such a creature? Well, lots of things, actually. After all, people aren't flocking to the World Wide Web because it's good for their health. Just the opposite, in fact. They're surfing 'til they drop because the Web presents them with an attractive and easily navigated source of info and entertainment (or infotainment, as the wags like to call it). It's HTML that adds the attractiveness and ease of navigation. To see what I mean, the next few sections take you through examples of the basic HTML elements.
A high JPM (Jolts Per Minute) count is what turns the crank of your average Web-surfing dude and dudette. Nothing generates fewer jolts (and is harder on the eyes, to boot) than plain, unadorned, text. To liven things up, use different sizes and styles for your Web page text. Happily, HTML is no slouch when it comes to dressing up text for the prom:
You get six different font sizes that you can use for titles, headings, and such.
You can display your Web prose as bold.
You can emphasize things with italics.
You can make text look like it was produced by a typewriter.
You can (as long as you view the page with the Netscape browser) use different font sizes for characters.
The following figure shows examples of each kind of style. (I'll be showing you how to use HTML to format Web page text in Chapter 5 "From Buck-Naked to Beautiful: Dressing Up Your Page." For the extra formatting options available with the Netscape browser, see Chapter 10, "Fooling Around with the Netscape Extensions.")
Some examples of HTML text styles.
If you're presenting information on your Web page, it'll help if you can display your data in a way that makes sense and is easy to read. In some cases, this means arranging the data in lists, such as the bulleted list shown in the figure above, or in a numbered list. I'll fill you in on how to use HTML to create these kinds of lists and more in Chapter 6 "A Fistful of List Grist for Your Web Page Mill."
Web sessions aren't true surfin' safaris unless you go take a flying leap or two. I'm speaking, of course, of selecting hypertext links that take you to the far-flung corners of the Web world.
You can give the readers of your Web pages the same kicks by using HTML to create links anywhere you like in a page. You can set up three kinds of links:
To another of your Web pages.
To a different location in the same Web page. This is useful for humongous pages; you could, for example, put a "table of contents" at the top of the page that consists of links to various sections in the document.
To any page, anywhere on the Web.
There are plenty of sites around the World Wide Web that exist only to provide a Web "mouse potato" (like a couch potato, only with a computer) with huge lists of links to pages that are informative, entertaining, or simply "cool." For example, the next screen shows a page from the Yahoo Web site, which boasts tens of thousands of links arranged in dozens of categories (Yahoo is a good place to go if you're looking for Web sites on a particular subject). In this particular case, the page shows a few links to some "useless" Web pages. (Beard research!? Cabbage!?) You'll find out how to use HTML to sprinkle links all over your Web pages in Chapter 7 "Making the Jump to Hyperspace: Adding Links."
A page from Yahoo showing a few links to some, uh, unusual sites.
Fancy text effects, lists, and lotsa links go a long way toward making a Web page a hit. But for a real crowd-pleasing page, you'll want to throw in an image or two. It could be a picture of yourself, a drawing the kids made, some clip art, or any of the images that are on this book's disk. As long as you have the image in a graphics file, you can use HTML to position the image appropriately on your page. I'll give you the details (as well as info on the types of graphics files you can use) in Chapter 8, "A Picture Is Worth a Thousand Clicks: Working with Images." (Another of Netscape's innovations is the background image-a picture, pattern, or color that takes the place of the drab gray background you normally see on most Web pages. I'll talk about this in Chapter 10, "Fooling Around with the Netscape Extensions.")
The next figure shows an example page with an image.
In this case, it's Netscape Communications' famous Fish Cam. Fish
Cam? Yeah. Once every minute, a camera takes a picture of a fish
tank and then loads the new picture onto the Web page. Silly?
Yes. Cool? Definitely.
Netscape's notorious Fish Cam. The Information Super Waterway?
| Lights, Camera, Surf! |
If you like the Fish Cam, there's no shortage of camera-ready Web pages that'll give you up-to-minute views of anything from ants to piranhas. Here are a few of my fave raves: Steve's Ant Farm-http://sec.dgsys/AntFarm.html |
If your Web page needs to show data formatted in rows and columns, you could try using tabs and spaces to line things up all nice and neat. However, you'll groan in disappointment when you view the page in a browser. Why? Because HTML reduces multiple spaces to a single space, and it ignores tabs completely! This sounds like perverse behavior, but it's just the way HTML was set up.
You're not out of luck, though. You can use HTML to create tables to slot your data into slick-looking rows and columns. The next picture shows an example of a table. (Note that, as I write this, only a few browsers know how to display tables. Netscape does, of course, as do the latest versions of NCSA Mosaic and Internet Explorer.) I'll tell you how to use HTML to construct tables in Chapter 11, "Table Talk: Adding Tables to Your Page."
Tables: A blessing for neat freaks everywhere.
Now that you've got some idea of what HTML can do, wouldn't you like to see the rabbits various Web magicians have pulled from their HTML hats? To that end, the next few sections present some real-world examples of Web pages that show you what you can do with a little HTML know-how. Of course, these examples represent only the smallest subset of the Web world. There are, literally, tens, if not hundreds, of thousands of Web pages out there, and each one is like a digital fingerprint-a unique expression of its creator's individuality.
The simplest, and probably the most common, type of Web page is the personal home page. This is a page that an individual sets up to tell the Web world a little bit about himself. They're the Web equivalent of those "Hi! My Name is…" stickers that people wear at parties and receptions. They range from warm and fuzzy ("Welcome, friend, to my home page!"), to downright vainglorious ("Let me tell you everything there is to know about me"), to frighteningly personal ("Dear diary…"). The following figure shows the personal home page for yours truly.
The author's humble HTML home.
Sometimes the hardest thing about putting together a Web page is thinking of something to say. (Although there are plenty of garrulous guys and gals out there for whom this is definitely not a problem!) So what's a body to do about a bad case or Web writer's block? Well, lots of people go with what they know: they talk about their hobbies and interests. Hey, it makes sense. You're more likely to sound enthusiastic and excited about a topic you're keen on, so you're more likely to hold your reader's interest. There are lots of things you can do to fill up your page: introduce the hobby to novices; talk about how you got started; show some samples of your work (depending on the hobby, of course); and include links to related Web pages. The sky's the limit.
As you might imagine, there's no shortage of hobby-related pages on the World Wide Web. You'll find info on everything from amateur radio to millefiori to woodworking. Millefiori!? No, I haven't the faintest idea what it is, either, but the next picture shows a page from someone who does.
Obscurity is no barrier for Web spinners: a millefiori (?) how-to page.
The Web's marriage of text and graphics meant it was only a matter of time before someone decided to "publish" a Web-based magazine. Now it seems that new electronic magazines (they're also often called e-mags, or e-zines) hit the Web's newsstands every few days. The quality, as you might expect, runs the gamut from professional to pathetic, from slick to sick. But the good ones are very good, with well-written articles, handsome graphics, and some unique approaches to the whole magazine thing. There are, literally, hundreds of e-zines out there, so there's no shortage of reading material. John Labovitz maintains a list of e-zines at the following address:
http://www.meer.net/!johnl/e-zine-list/index.html
The next screen shows the home page for one of the better e-zines: Urban Desires.
The Urban Desires electronic magazine.
One of the biggest engines driving the growth of the World Wide Web is the influx of corporations scrambling to get a "presence" in cyberspace. Companies from mom-and-pop shops to Fortune 500 behemoths are setting up on the Web in anticipation of, well, something. Nobody's quite sure why they need a Web site, but they're happy to put one up, just in case something BIG happens one of these days. Hey, who can blame them? With all the Internet hype floating around these days, no self-respecting CEO is going to be caught with his or her pants down. And, as proof that every corporate entity on the face of the earth has a Web site, I offer you the following figure: the home page of the Polyurethane Foam Association!
At last, the PFA has its own Web site!
If Big Business is rushing to get on the Web, you better believe Big Brother isn't going to be left behind, either. Yes, governments-local, state, and federal-are putting up Web pages to beat the band. Granted, many of these sites are quite useful. You can use them to contact representatives, read government reports and studies, do research, and more. Some of the pages are even-gasp!-creative. For example, check out the handsome graphics you get when you surf to the home page of the White House (see the next figure).
As I write this, various Web engineers, programmers, and other geeks are busy putting the finishing touches on a new version of HTML: HTML 3.0. There's no need to panic, however. The advent of HTML 3.0 does not mean all the HTML I'll be teaching you in this book isn't worth the paper it's printed on. No, thankfully, HTML 3.0 is an extension of the existing tags, not a replacement of them. I'll be telling you about some of the new features in HTML 3.0 as you work through the next section.
The White House World Wide Web page.
This chapter gave you a quick overview of HTML. I showed you what it is and why it isn't as scary as it sounds, and you saw quite a few examples of what HTML can do.
So much for the preliminaries. In the next chapter you'll get started with the nuts and bolts of HTML so you can start building your first Web page.