Chapter 3
It's a Wonderful World Wide Web
CONTENTS
-
Okay, So Just What Is HTML?
-
What Can You Do with HTML?
-
You Can Format Text
-
You Can Create Lists of Things
-
You Can Set Up Links to Other Pages
-
You Can Insert Images
-
You Can Format Information in Tables
-
Pages from All Walks of Web Life
-
The Personal Touch: Personal Home Pages
-
Hobbyists Do It with HTML
-
Not for Bathroom Reading: Electronic Magazines
-
Corporate Culture Hits the Web
-
Your Tax Dollars at Work: Government Web Pages
-
The Changing Face of HTML: HTML 3.0
-
The Least You Need to Know
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.
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.
|