Chapter 3
It's a Wonderful World Wide Web
CONTENTS
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.")
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."
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.
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."
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.
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.
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!
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.
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.
|