|
Chapter 1
Chpater 1
Welcome to HTML
Before you begin creating your own Web pages with
HTML, you need some backgroundknowledge about what Web pages are, how they work, and what
you can expect to achievewith them. This chapter provides a quick summary of those basics
and some practicaltips to make the most of your time as a Web page author and publisher.
To Do: Thisguide assumes that you have spent some time exploring Web pages on the Internet.
Ifyou haven't, please take at least a couple of hours to do so now. Trying to produceyour
own Web pages without having "surfed" the World Wide Web would belike trying to
become a famous author without ever having seen a piece of paper!
Here's a review of what you need to do before you're
ready to use the rest ofthis guide:
- 1. Get a computer. I used a Windows 95
computer to create the figures in this guide, but you can use any Windows, Macintosh, or
UNIX machine to create your Web pages. (You can look at Web pages with a TV nowadays, but
you can't make them with one... yet!)
2. Get a connection to the Internet. You should be able to get one through either a
modem or the local network of your school or business. An old UNIX "shell"
account won't do the trick; it has to be a modern PPP (Point-to-Point Protocol)
connection, which most Internet service providers (ISP) now offer for about $20 per month.
Your access speed should be at least 14.4 Kbps, though faster is better. The ISP, school,
or business that provides your connection can help you with the details of setting it up
properly.
3. Get a copy of Netscape Navigator and/or Microsoft Internet Explorer (version 5.0 or
higher). Together, these two Web browser programs are used by over 90 percent of the
people who look at Web pages, so it's a good idea to get them both. You can buy them in
software stores, or get them free through the Internet at http://home.netscape.com and http://www.microsoft.com.
4. Explore! Use Netscape Navigator or Microsoft Internet Explorer to look for pages
that are similar in content or appearance to those you'd like to create. Make notes about
what frustrates you about some pages, what attracts you and keeps you reading, and what
makes you come back to some pages over and over again.
Just A Minute: If you plan to put your HTML
pages on the Internet (as opposed to publishing them on CD-ROM or a local intranet),
you'll need to transfer them to a computer that is connected to the Internet 24 hours a
day. The same company or school that provides you with Internet access may also let you
put Web pages on its computer; if not, you may need to pay another company to
"host" your pages. You can start learning HTML with this guide right away and
wait to find an Internet host for your pages when they're done. However, if you want to
have a place on the Internet ready for your very first page as soon it is finished, you
may want to read Chapter 4, "Publishing Your HTML Pages," before you continue.
What Is a Web
Page?
Once upon a time, back when there weren't any
footprints on the moon, some far-sightedfolks decided to see whether they could connect
several major computer networks together.I'll spare you the names and stories (there are
plenty of both), but the eventualresult was the "mother of all networks," which
we call the Internet.
Until 1990, accessing information through the
Internet was a rather technicalaffair. It was so hard, in fact, that even Ph.D.-holding
physicists were often frustratedwhen trying to swap data. One such physicist, the now
famous Tim Berners-Lee, cookedup a way to easily cross-reference text on the Internet
through "hypertext"links. This wasn't a new idea, but his simple Hypertext
Markup Language (HTML) managedto thrive while more ambitious hypertext projects
floundered.
New Term:
Hypertext means text stored in electronic form with cross-reference links between pages.
By 1993, almost 100 computers throughout the world
were equipped to serve up HTMLpages. Those interlinked pages were dubbed the World Wide
Web (WWW), and severalWeb browser programs had been written to allow people to view Web
pages. Becauseof the popularity of "the Web," a few programmers soon wrote Web
browsersthat could view graphics images along with the text on a Web page. One of these
programmerswas Marc Andreessen; he went on to become rich and famous selling the world's
mostpopular Web browser, Netscape Navigator.
Today, HTML pages are the standard interface to the
Internet. They may includeanimated graphics, sound and video, complete interactive
programs, and good old-fashionedtext. Millions of Web pages are retrieved each day from
thousands of Web server computersaround the world.
The Web is on the verge of becoming a mass-market
medium, as high-speed Internetconnections through TV cables, modernized phone lines, and
direct satellite feedsbecome commonplace. You can already browse the Web using a $300 box
attached to yourtelevision instead of using your computer, and the cost of such devices is
likelyto fall sharply over the next few years.
Yet the Internet is no longer the only place you'll
find HTML. Most private corporatenetworks now use HTML to provide business information to
employees and clients. HTMLis now the interface of choice for publishing presentations on
CD-ROM and the newhigh-capacity digital versatile disk (DVD) format. Microsoft is even
integratingHTML directly into the Windows operating system, allowing every storage folder
inyour computer to be associated with an HTML page and hypertext links to other foldersand
pages.
In short, HTML is everywhere. Fortunately, you're in
the right place to find outhow HTML Web pages work and how to create them.
How Web Pages Work
When you are viewing Web pages, they look a lot like
paper pages. At first glance,the process of displaying a Web page is simple: You tell your
computer which pageyou want to see, and the page appears on your screen. If the page is
stored on adisk inside your computer, it appears almost instantly. If it is located on
someother computer, you might have to wait for it to be retrieved.
Of course, Web pages can do some very convenient
things that paper pages can't.For example, you can't point to the words "continued on
page 57" in a papermagazine and expect page 57 to automatically appear before your
eyes. Nor can youtap your finger on the bottom of a paper order form and expect it to
reach the company'sorder fulfillment department five seconds later. You're not likely to
see animatedpictures or hear voices talk to you from most paper pages either (newfangled
greetingcards aside). All these things are commonplace on Web pages.
But there are some deeper differences between Web
pages and paper pages that you'llneed to be aware of as a Web page author. For one thing,
what appears as a single"page" on your screen may actually be an assembly of
elements located inmany different computer files. In fact, it's possible (though uncommon)
to createa page that combines text from a computer in Australia with pictures from a
computerin Russia and sounds from a computer in Canada.
Figure 1.1 shows a typical page as seen by Netscape
Navigator, the world's mostpopular software for viewing Web pages. A Web browser such as
Netscape Navigatordoes much more than just retrieve a file and put it on the screen; it
actually assemblesthe component parts of a page and arranges those parts according to
commands hiddenin the text by the author. Those commands are written in HTML.
New Term: A Web
browser is a computer program that interprets HTML commands to collect, arrange, and
display the parts of a Web page.
Figure 1.2 shows the text, including the HTML
commands I typed to create the pagein Figure 1.1. This text file can be read and edited
with any word processor or texteditor. It looks a bit strange with all those odd symbols
and code words, but thetext file itself doesn't include any embedded images, boldface
text, or other specialformatting.
Figure1.1. A Web browser assembles
separatetext and image files to display them as an integrated page.
All the images and formatting you see in Figure 1.1
are added by Netscape Navigator.It reads the coded HTML commands in the text, which tell
it to look for separateimage files and display them along with the text itself. Other
commands tell it whichtext to display in boldface and how to break up the lines of text on
the page.
Figure1.2. This is the text I typed to
createthe page in Figure 1.1. The words between < and > are
HTMLtags.
Time Saver: To see the HTML commands for any
page on the Web, select View | Document Source in Netscape Navigator or View | Source in
Microsoft Internet Explorer. This is a great way to get an intuitive idea how HTML works
and learn by other's examples.
You'll learn how to understand and write HTML
commands soon. The important pointto note right now is that creating a Web page is just a
matter of typing some text.You can type and save that text with any word processor or text
editor you have onhand. You then open the text file with Netscape Navigator or Microsoft
Internet Explorerto see it as a Web page.
When you want graphics, sound, animations, video, or
interactive programming toappear on a Web page, you don't insert them into the text file
directly, as you wouldif you were creating a document in most paper-oriented page layout
programs. Instead,you type HTML text commands telling the Web browser where to find the
media files.The media files themselves remain separate, even though the Web browser will
makethem look as if they're part of the same document when it displays the page.
For example, the HTML document in Figure 1.2 refers
to three separate graphicsimages. Figure 1.3 shows these three image files being edited in
the popular graphicsprogram Paint Shop Pro.
Figure1.3. Though text and graphics appear
integratedin Figure 1.1, the graphics files are actually stored, and can be edited,
separately.
You could use any graphics program you like to
modify or replace these imagesat any time. Changing the graphics might make a big
difference in how the page looks,even if you don't make any changes to the HTML text file.
You can also use the sameimage on any number of pages while storing only one copy of the
graphics file.
You'll learn much more about incorporating graphics
files into Web pages in PartIII, "Web Page Graphics."
The Many Faces ofHTML
A single Web page can take on many different
appearances, depending on who viewsit and what they view it with. Figure 1.4 is the same
Web page pictured earlier inFigure 1.1, as seen with the text-based Lynx Web browser. Lynx
users can only seethe images if they click on the [IMAGE] links at the top of the page.
Figure1.4. The page from Figure 1.1 looks
verydifferent in the DOS Lynx browser.
People who are using different versions of the same
Web browser may also see significantdifferences in a page. Version 1.2 of Netscape
Navigator was used to display thepage in Figure 1.5. Notice that the title graphic
placement is different than displayed by Netscape Navigator version 3.0 in Figure 1.1.
Even users of the same version of the same Web
browser can alter how a page appearsby choosing different display options. Both Netscape
Navigator and Microsoft InternetExplorer allow users to override the background and fonts
specified by the Web pageauthor with those of their own choice. Screen resolution, window
size, and optionaltoolbars can also change how much of a page someone sees when it first
appears.
Figure1.5. Netscape Navigator version 1.2
maydisplay some pages differently than other versions of the same browser.
You can't even assume that people will be viewing
your Web pages on a computerscreen. The page in Figures 1.1, 1.4, and 1.5 might also be
read on a low-resolutiontelevision screen (see Figure 1.6) or a high-resolution paper
printout (see Figure1.7).
Figure1.6. Televisionscreens
may blur images, and TV Web browsers usually use a larger font to make textreadable from a
distance.
Figure1.7.
Web browsers usually change the backgroundto white when sending pages to a
printer.
As you learn to make your own Web pages, remember
how many different forms theymay take when people view them. Some Web page authors fall
into the trap of tryingto make pages appear "perfect" on their computer and are
sorely disappointedthe first time they discover that it looks different on someone else's
screen.
In Part IV, "Web Page Design," you'll find
many tips and tricks forensuring that your pages look great in the widest variety of
situations.
Creating HTML witha Text Editor
There are two basic approaches to making an HTML
page: you can type out the textand HTML commands yourself with a text editor, or you can
use graphical softwarethat generates the HTML commands for you.
Chapter 23, "Web Site Authoring Tools,"
introduces some of the HTMLediting tools that are available and discusses when to use each
type of tool. Fornow, however, I strongly recommend that you do not use a graphical,
"what-you-see-is-what-you-get"Web page editor, such as Microsoft FrontPage or
Netscape Navigator Gold (which isa different program than Netscape Navigator).
You will be able to follow along with this guide and
learn HTML much more easilyif you work with an editor that shows the actual HTML text. Any
word processor ortext editor you already have--even the Windows Notepad or Macintosh
SimpleText editor--willdo nicely.
Summary
This chapter introduced the basics of what Web pages
are and how they work. Youlearned that coded HTML commands are included in the text of a
Web page, but imagesand other media are stored in separate files. You also saw that a
single Web pagecan look very different, depending on what software and hardware are used
to displayit. Finally, you learned why typing HTML text yourself is often better than
usinga graphical editor to create HTML commands for you.
Q&A
- Q I'm still not quite sure what the difference
between a "Web page" and an "HTML page" is.
A If you want to get technical, I suppose a "Web page" would have to be from
the Internet instead of a disk on your own computer. But in practice, the terms "Web
page" and "HTML page" are used interchangeably.
Q I've looked at the HTML "source" of some Web pages on the Internet, and it
looks frighteningly difficult to learn. Do I have to think like a computer programmer to
learn this stuff?
A Though complex HTML pages can indeed look daunting, learning HTML is several orders
of magnitude easier than other computer languages like BASIC, C, or Java. You don't need
any experience or skill as a computer programmer to be a very successful HTML author.
Q Do you need to be connected to the Internet constantly while you create HTML pages?
A No. In fact, you don't need any Internet connection at all if you only want to
produce Web pages for publication on a CD-ROM, Zip or floppy disk, or local network.
Quiz Questions
- 1. Define the terms Internet, Web page, and
World Wide Web.
2. How many files would you need to store on your computer to make a Web page with
some text and two images on it?
3. Can you create Web pages with Microsoft Word or WordPerfect?
Answers
- 1. The Internet is the "network of
networks" that connects millions of computers around the globe.
A Web page is a text document that uses commands in a special language called HTML to add
formatting, graphics and other media, and links to other pages.
The World Wide Web is a collective name for all the Web pages on the Internet.
2. At least three files: one for the text (which includes the HTML commands) and one
for each graphics image. In some cases, you might need more files to add a background
pattern, sound, or interactive features to the page.
3. Yes, or with any other word processor on any computer (as long as the word
processor will save "plain text" or "ASCII" files). Note that many
word processors also now allow you to save text in HTML format, and they will write some
of the HTML for you. Chapter 23 will discuss the merits of that feature, but you should
avoid using it while you're learning HTML with this guide. Just save as plain text instead.
|