An Introduction to Creating Web Pages
as published in "MacSource Magazine"
© 1997 by Dave Taylor: All Rights Reserve
Unless you've been living under a rock, or just coming back from an eighteen
month jaunt in Tibet, you've been unable to avoid the hype and excitement
surrounding the World-Wide Web. But if what is the Web? In this article
we'll give you an overview of the Web and the underlying hypermedia structure,
a fast introduction to how the Web is a client/server environment, and then
delve into the markup language of Web pages, Hyper Text Markup Language,
or HTML. We'll then answer the question of why you'd want a home page, talk
about how you might produce one quickly and easily, and, since no Web article
is complete without a set of cool places to explore on-line, we'll give
you lots of places to explore too!
What are the Web, hypertext and hypermedia?
To understand the Web, we'll need to step back a bit further and think about
what text and printed information is all about. At the most fundamental,
writing is a linear progression of ideas, dialog and information, starting
at point A and ending at point B. Information is conveyed by much more than
just the words themselves, however; the layout, typefaces, colors and accompanying
graphics all add to comprehension. Consider this very article. Words are
emboldened to catch your attention as you skim along, italics are
used to emphasize words as you read them, section heads are presented
in bold and set off from the rest of the text, and the very typeface makes
reading and comprehension fun, easy and simultaneously offers an attractive
appearance.
Articles can do a lot more than just convey information through appearance
and word choice, however. Consider the use of footnotes, citations, and
a bibliography in prose. Imagine a slightly more advanced universe where
when you see a footnote that points to another article or book, you could
just 'touch' the citation and *poof* you'd be instantly transported to the
relevant page of the book in question. And then that book has a reference
in parenthesis to a magazine article, which you touch and, again, *poof*,
you're suddenly reading that article.
What we're talking about is something called hypertext: the idea that prose
isn't a static standalone sheet of information, but rather a point in data
space, a convergence of concepts and ideas within a massive web of knowledge
and information. Any word, phrase or sentence can point to another spot
in the documentation or another document or information source entirely.
This isn't as far-fetched as it sounds: think about the purpose of an index
in a reference book, or the 'see also' section in a dictionary. If you've
spent time in academia, you're also probably familiar with another type
of static hypertext: [Dunlap65, p30] might be a citation you've seen, but
what if, again, you could just click on that citation and instantly be reading
the cited article, finding out whether it really supports the discussion
or is misquoted or misinterpreted.
It's a compelling concept, and once you start thinking about hypertext,
you start to realize that just about anything you currently view or read
can have layers of depth and information added, available on demand, but
unobtrusively hiding in the background.
Expand this a bit further and you'll realize that there's no reason hypertext
can't instead apply to any sort of medium. How about a catalog of albums
where you touch an album cover and hear a sample of the album? A movie review
where you can click on a particular discussion and see the portion of the
movie in question? Or the games listed in this catalog where you click on
the photo and see a screen shot - or animated demo - before you made your
purchase decision?
Add it all up and you've got something way cool, you've got hypermedia,
and hypermedia is what the World Wide Web is all about. It's a massive,
globally distributed collection of text, audio, graphics, sketches, animation,
and video, all intertwined and assembled in a remarkable variety of ways,
by different people and organizations throughout the world.
If you've seen a Web page, you know what I'm talking about. Anything that's
in blue - in the case of text - or anything outlined in blue - for other
media - are links. You can have pages of information with just one or two
links, or you can find pages on-line where they exist purely as a hyperlink
catalog or index, offering a fast way to find what you seek amongst the
millions of pages of information available on-line.
The Internet as Client/Server Computing
To actually work with the World Wide Web, you need two things: you need
a 'reader' program, something that can travel the network and retrieve whatever
information or media you request, and you need a connection to the network
itself. In Internet parlance, the reader is a "web browser" and
the network connection is your "live wire" or, often, "dialup".
The responsibility of your browser is straightforward: it needs to be able
to connect to information servers throughout the Internet (which is a network
of thousands of networks, all interconnected) and, once information is sent
to you, the browser must be able to read and format the document based on
embedded formatting instructions, so you can read and enjoy it on your own
computer.
It's kind of like a restaurant, really; you're the customer or 'client',
and the waitress is your 'server', you ask her for whatever you want and
she comes back either with what you requested or tells you that it's not
available. That's the heart of the client/server model, as it's called.
The software you run on your Mac, like Netscape Navigator, is the client,
a relatively simple program with rudimentary network capabilities, and the
individual system out on the Internet that you request and receive information
from is the server, usually a powerful and sophisticated computer system.
If you imagine that this means there are thousands of Web servers, delivering
the millions of pages available on the Web, you're exactly right. Your little
Mac Web browser can connect with thousands of servers, albeit one-at-a-time!
What's even nicer, from a user perspective, is that not only can your waitress
get food from the kitchen, but she can grab the newspaper for you, toss
another quarter in your meter or renew your library books! In 'net terms,
what we mean by this is that not only can Web browsers show you Web pages,
but they can also interact with remote file systems (using FTP), gopher
servers, indexed text databases (WAIS), and, in certain cases, even show
your email or any unread news in your favorite Usenet newsgroups.
What is a URL?
The addressing scheme of all Web pages and resources on the Internet, the
phone number of all these different information phones, if you will, is
called a URL. This either stands for Universal Resource Locator, or Uniform
Resource Locator, depending on who you believe!
Either way, they always look like:
service:// location / other-stuff
Since Web browsers can display more than just Web documents, there are a
variety of different services that can be specified. Web pages are always
referenced as "http:" (http is the hypertext transport protocol,
but you probably didn't want to know that!). Gopher sites are "gopher:",
FTP sites are "ftp:", WAIS databases are "wais:", and
you can even specify email addresses with "mailto:" or Usenet
groups with "news:".
The next field is the name of the computer, the identification of what server
to ask for the information you seek. Finally, if needed, specific information
on a remote server can be specified by file and folder names added after
the computer hostname.
Let's look at an example. First off, my home page on the Web is "http://www.intuitive.com/taylor".
"http:" tells you it's a Web page. "www.intuitive.com"
identifies the specific server on the Internet (and the .com suffix tells
you it's a commercial site), and "taylor" identifies the specific
information sought from the server. If you omit "taylor" from
the URL, it'll connect to the server correctly, but deliver different information
to you.
What is HTML?
The markup language within which Web documents are written, the set of formatting
instructions so your Web browser shows you something cool, is the hypertext
markup language, or HTML. The good news is that HTML is surprisingly straightforward
and simple. All you need to remember is that within the 'raw' Web document
all formatting instructions must be enclosed within angle brackets. The
simplest formatting instruction is a paragraph break, and you can have that
anywhere in your Web document by using <P>. Formatting that affects
a range of information is ended with the same tag, but a '/' is added: for
example, text is italicized by surrounding it with <I>italicize
this</I>.
More sophisticated formatting tags have more than just a single letter or
word in the angle brackets. Some tags have name=value pairs within too,
and others have single-word modifiers. An example of the former is the HTML
tag for designating a word in a larger typeface: <FONT SIZE=+1>big
word</FONT>.
What's important to realize is that the Web document itself, written in
HTML, is just a bunch of dull text without any fancy formatting itself.
If you view the source to a Web page, there's no bold, no italics, not even
any pictures. Just a stream of text with various formatting tags added.
That's the good news. The bad news is that there are dozens of different
Web browsers, and the exactly set of HTML tags they understand varies dramatically.
Even different versions of the same program, or the same program on different
platforms, can exhibit different behaviors. The leader of the pack is Netscape
Navigator, but for the Mac there's also MacWeb, Mosaic, and a raft of custom
browsers for specific services, including America Online, eWorld, CompuServe,
and even Internet-based services like Netcom with its brand-new NetCruiser
front-end.
One challenge for HTML designers, then, is to ensure that the set of tags
you use to develop your own material works, formats correctly, and looks
attractive on the widest variety of browsers. Alternatively, tell people
what browser you expect them to use (that's what all the 'enhanced for Netscape'
banners mean on home pages) and don't worry about the rest of the crowd.
So Why Have A Home Page?
While lots of companies and organizations find it compelling to publish
information and product data (and sometimes even accept orders) on the Web,
probably the most fun is for people to have a home page, to create their
own unique and personal space on the network. There's lots of reasons why
this can be cool, but the best reason is to share your interests, point
others to some of your favorite Web sites and places on the Internet, and
maybe make a new friend or two.
For me, I view my home page as a combination resume and personal photo album.
Indeed, you can see pictures of my girlfriend, my parents, and even some
great pictures of my dogs, all on-line, all on my home page.
What Can I Do On My Page?
There are dozens upon dozens of different HTML tags that you can include
in your own home page or Web documents, but a relatively small number can
get you rolling pretty quickly. The most fundamental are <P> for paragraph
breaks, <h1>head</h1> to specify head as a level-one
header (h2 for level two, h3 for level three, and so on, down to header
level six, the smallest header), <center>info</center> to center
text and graphics, and <hr> for a horizontal line splitting your information
into panes.
There are a variety of list formatting options too, and they're a wee bit
more complex. A bullet, or unordered, list is wrapped with <ul> and
</ul>, and each list item is specified with the <li> tag. Want
them numbered instead? Use <ol> and </ol>: the <li> tag
remains.
Graphics are a must-have too, and Web browsers can display two different
format graphics: GIF and JPEG. GIF graphics are typically smaller and load
quickly, but offer less colors (256 maximum). JPEG is better for photographic-quality
work, with the possibility of millions of colors. Anything you add to your
page, however, must be downloaded before it can be displayed on the users
machine, so a 75K picture might well take over a minute to be sent, a long,
boring minute when users sit and twiddle their thumbs waiting.
Once you have the graphics you want on the Web server, you include them
in your document with <IMG SRC=graphic-file-name>. The IMG tag can
be complex too, with ALIGNment options, the possibility of having regions
within a graphic activate different links (called an image map), and you
can even specify the width of the graphic link border if the graphic is
actually a hypermedia reference.
Speaking of which, hypermedia references are all specified with the anchor
tag: <a href=URL>your name for the link</a>. For example, if
I wanted to point you to Apple's Web site on my home page, I could use the
snippet <a href=http://www.apple.com>Apple</a> and the word
'Apple' would appear in blue on my page,
and if you clicked on it, you'd jump to Apple Computer directly.
You won't be surprised to find that there's much more you can do within
Web pages, including templates for user input (known as forms), custom pages
generated based on external events (like a stock ticker or weather map),
and indeed, there's an entire programming environment called the Common
Gateway Interface that allows you to extend the functionality of a Web server
to specific tasks and capabilities. You can spend many months learning how
to do all the fancy things!
Learn by Looking
The fundamentals of creating a Web page, as you can tell, isn't too hard.
What's tricky and can take a long time to master is creating good
Web pages, producing an interesting and compelling design that balances
the graphical elements with speed, that makes people want to return a second
time. The best way to learn how to accomplish this is to wander the Web
and see how other people do things.
When you find a page you like, or a formatting trick you're curious about,
almost all browsers offer a "view source" capability that will
let you actually see the underlying HTML formatting instructions for the
page you're view. It can be a fabulous source of insight into more obscure
or unusual uses of HTML tags, and good designers are constantly looking
at the internals of the better sites.
Creating your HTML documents
In terms of the actual creation of the Web pages, there are really three
routes you can take. You can do it "the hard way" by opening up
your favorite text editor or word processor and typing in all the HTML tags
directly, eyeballing things and hoping you've got it right. The middle ground
is to use a translation filter: create your document in Quark Xpress and
use their Xpress to HTML filter to produces Web pages. There are lots of
these filters - that offer varying quality results - allowing you to go
from Word, RTF, Frame, and other popular layout formats directly to HTML.
The best of the solutions is to use an actual Web page editor, and the solutions
in this category range from some terrific shareware to a growing number
of commercial products that have HTML and Web smarts added, to a few programs
that actually are designed from the ground up just to work on Web pages.
Shareware programs I've seen and liked include Web Weaver and HTML Editor,
both available on-line. Commercial products include ClarisWorks, WordPerfect,
and Microsoft Word with the free add-on Internet Assistant package. In the
WYSIWYG arena, the three best-known programs are Navisoft, PageMill and
HotMetal. Each offers its own unique spin on the problem, and your best
bet will be to download demo versions of them and try them before you make
any sort of purchase decision. (this web document was converted from
MS Word to HTML via dropping it into PageMill and about ten minutes of fine-tuning).
Checking your work
As you develop your Web page, you can work in a tight loop of 'edit', 'preview'
and ensure that no errors are being introduced as you progress. Within your
favorite browser, simply open the document using the Open Local option under
the File menu. Then use the standard Mac file selection dialog box to pick
the page you're developing and now you should be able to have the document
source in an editor within one window (using, say, SimpleText), and the
page itself previewed in another. Any time you make a set of changes, File/Save
them, then use the 'refresh' option in the Web browser to update what you're
seeing.
Some Common Mistakes
There are lots of great pages on the Web, but there are lots of broken ones
too, unfortunately, and even more pages that seem to violate the most simple
and straightforward interface guidelines and ideas. Here's a quick heads-up
on some of what I consider common mistakes with Web pages:
- Stale Information - Web pages aren't like billboards, honestly. If
you create a page, try to swoop in at least monthly and make some sort of
change to it. You might also consider adding some sort of 'last modified'
date on the page too, so visitors will know that its up to date.
- Smart Quotes - in a word processor, the quotes that automatically
switch to curl around the quoted item looks great, but in an HTML document,
all the quotes - particularly those within the HTML tags themselves - must
be boring straight quotes. This is a classic reason why your graphics might
not load on your page; your IMG tag has the filename quoted, but they're
smart quotes and the remote browser just doesn't know what that means.
- Links that die - the Web is a very volatile environment, and the set
of sites that you point to today might be gone next week. There's little
as frustrating as clicking and finding that the list of cool spots is really
a list of dead spots. Check your links at least monthly.
- Too much graphics - information costs time and just because your graphics
heavy page looks great when you preview it in local mode, doesn't mean that
it's going to be fun and interesting for someone who has to wait a few minutes
to receive it. Use some thought to balance your graphic and textual information
to make things fast and visually appealing.
Announcing Your Site
Once you have your site up and alive, you'll want to let your friends and
colleagues know about it. In addition, though, you might like to announce
it to the world at large. There are lots of ways to do this, including adding
it to your business card, including it in your "signature" file
for email and netnews, and registering it at any of the wide variety of
Web sites that purport to index the rest of the Web. Those I recommend you
inform include Yahoo (http://www.yahoo.com/),
WebCrawler (http://www.webcrawler.com/),
and, if you're bringing a shop or business on-line for sales, the Internet
Mall (http://www.internet-mall.com/).
Internet URLs for more reading
There is a flood of information available on-line that can help you learn
more about HTML and Web page programming and publicity. Here's a few starting
points:
A Beginners Guide to HTML
http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html
Creating HTML - A Simple Guide
http://www.netusa1.net/~jbornema/html.html
HTML, The Complete Guide
http://www.chem.emory.edu/html/html.html
HTML 3.0 - a Guide for Web Designers
http://www.sirius.com/~paulus/html30.html
Guidelines for Web Page Design
http://www.intuitive.com/web-design.html
... back to Intuitive Systems ...