One of my goals in this book is to show all you Webophobes out there that putting together HTML pages that are both useful and stylish is a lot easier than you may think. As proof, this chapter covers all the basic information you need to produce an honest-to-goodness Web page, suitable for mass consumption by hordes of Internet surfers. (Not to worry, though: I explain everything in this chapter in more detail elsewhere in the book. I'll point out the relevant chapters as we go along.) So, without further ado, I hereby present my Ten Step Program to a Perfect Web Page:
If you've seen some World Wide Web pages in your Internet travels, you might think you need some high-end word processor or megabuck page layout software to achieve all those fancy-schmancy effects. No way, José. In fact, any program that enables you to peck out pure text is good enough for creating Web pages that rival anything produced by humungoid corporations or artists with unpronounceable names. That's right: Even the humblest text editor (such as the Notepad accessory that comes with Windows) is all you need to get started in the Web page publishing game.
So, the first order of business in creating a Web
page is to fire up your favorite text editor or word processor
(such as Word for Windows) and launch a new document. (In most
cases, the program will start up a new document for you automatically.)
Okay, you're ready for action!
| Don't Forget to Save! |
As with any computer-related endeavor, you should save your Web work regularly. Browsers always look for files that have names that end with either .HTM or .HTML, so be sure to use one of these extensions (for example, HOMEPAGE.HTM). If you're using a word processor, though, make sure you save the document as a simple text file. HTML pages that were saved in the word processor's native format will give any Web browser a bad case of indigestion. |
Web pages are relatively simple affairs. You just type in your text and then you insert markers-called tags-that spell out how you want things to look. For example, if you want a word on your page to appear in bold text, you surround that word with the appropriate tags for boldfacing text.
In general, tags use the following format:
<TAG>The text to be affected</TAG>
The TAG part is a code (usually one or two letters) that specifies the type of effect you want. For example, the tag for boldfacing text is <B>. So if you wanted the phrase ACME Coyote Supplies to appear in bold, you'd type the following into your document:
<B>ACME Coyote Supplies</B>
The first <B> says: "Yo! Start showing the text in bold." This continues until the </B> appears. The slash (/) defines this as an end tag, which says: "Okay, enough with the boldfacing already!" As you'll see, there are tags for lots of other effects, including italics, paragraphs, headings, page titles, lists, and lots more.
HTML (which stands for HyperText Markup Language) is just the sum total of all these tags. You'll find out more about HTML in Chapter 3 "A Brief HTML Web Page Primer," and I'll serve up some more tag trivia in Chapter 4 "Laying the Foundation: The Basic Structure of a Web Page."
Your HTML files will always lead off with the <HTML> tag, which you type at the top of the file. This tag doesn't do a whole heckuva lot except tell any Web browser that tries to read the file that it's dealing with a file that contains HTML doodads. Similarly, the last line in your document will always be the </HTML> tag, which you can think of as the HTML equivalent for "The End."
So each of your Web pages will start off looking like this:
<HTML> </HTML>
The next tags serve to divide the document into two sections: the head and the body. The head section is like an introduction to the page. To define the head, you add a <HEAD> tag and a </HEAD> tag immediately below the <HTML> tag you typed in earlier. So your Web page should now look like this:
<HTML> <HEAD> </HEAD> </HTML>
The body section is where you enter the text and other fun stuff that will actually appear on the Web page. To define the body, you place a <BODY> tag and a </BODY> tag after the head section (below the </HEAD> tag), as follows:
<HTML> <HEAD> </HEAD> <BODY> </BODY> </HTML>
Yawn. So far, so boring. Unfortunately, these early
stages of Web page creation are only marginally more exciting
than watching paint peel. It's a necessary evil, however, and
it's one I'll discuss in more depth (I'll bet you can't wait for
that) in Chapter 4 "Laying the Foundation: The Basic
Structure of a Web Page."
| Down with Drudgery! |
To ease the tedium of these early stages of Web page creation, you'll find some help on the disk that comes with this book. I've included a file named SKELETON.HTM that contains all the tags that make up the bare bones (sorry about that) of a Web page. |
The page's title is just about what you probably think it is: the overall name of the page (not to be confused with the name of the file you're creating). If someone views the page in a graphical browser (such as Netscape or Mosaic), the title appears in the title bar of the browser's window (I'll show you an example in a sec).
To define a title, you surround the text with the <TITLE> and </TITLE> tags. For example, if you want the title of your page to be My Home Sweet Home Page, you'd enter it as follows:
<TITLE>My Home Sweet Home Page</TITLE>
Note that you always place the title inside the head section, so your basic HTML document now looks like so:
<HTML> <HEAD> <TITLE>My Home Sweet Home Page</TITLE> </HEAD> <BODY> </BODY> </HTML>
The following figure shows this document loaded into the Windows 95 version of the Netscape Navigator browser program. Notice how the title appears in the window's title bar.
Most Windows Web browsers display the page title in, of all places, the window's title bar.
For a few more tidbits about working with Web page titles, head for Chapter 4 "Laying the Foundation: The Basic Structure of a Web Page."
With your page title firmly in place, you can now think about the text you want to appear in the body of the page. For the most part, you can simply type the text between the <BODY> and </BODY> tags, like so:
<HTML> <HEAD> <TITLE>My Home Sweet Home Page</TITLE> </HEAD> <BODY>
This text appears in the body of the Web page:
</BODY> </HTML>
When you want to start a new paragraph, you have to use the <P> tag. For example, consider the following text:
<HTML> <HEAD> <TITLE>My Home Sweet Home Page</TITLE> </HEAD> <BODY> This text appears in the body of the Web page. This is the second line (sort of). <P> This is the third line. </BODY> </HTML>
The following figure shows how this looks in the browser. As you can see, the first two lines appear beside each other, despite the fact that they're on separate lines in the original text. However, the third line sits nicely in its own paragraph thanks to the <P> tag that precedes it. I'll talk more about paragraphs and other ways to break up text in Chapter 4, "Laying the Foundation: The Basic Structure of a Web Page."
You need to use the <P> tag to create paragraph breaks in HTML.
Well, you're getting there. So far you've been able to use HTML to convince a Web browser to display a page title and break up plain text into paragraphs. That's a good start, but you won't exactly have Web surfers clamoring to read your page. What you need now is to jazz up the page with some text formatting and a few impressive headings.
HTML has a cartload of tags that will fancify your text. You saw earlier how a word or phrase surrounded by the <B> and </B> tags will appear bold in a browser. You can also display text in italics by bracketing it with the <I> and </I> tags, and you can make your words appear as though you produced them with a typewriter by surrounding them with the <TT> and </TT> tags.
Like chapters in a book, many Web pages divide their contents into several sections. To help separate these sections and so make life easier for the reader, you can use headings. Ideally, these headings act as mini-titles that convey some idea of what each section is all about. To make these titles stand out, HTML has a series of heading tags that display text in a larger, bold font. These are six heading tags in all, ranging from <H1> -which uses the largest font- down to <H6> -which uses the smallest font.
To illustrate these text formatting and heading tags, the next figure shows how Netscape displays the following text:
<HTML> <HEAD> <TITLE>A Text Formatting and Headings Extravaganza</TITLE> </HEAD> <BODY> Here's some <B>bold text</B>. You can also do the <I>italic text</I> thing. And, what the heck, <TT>typewriter-like text</TT> is also available. <H1>An H1 Heading</H1> <H2>An H2 Heading</H2> <H3>An H3 Heading</H3> <H4>An H4 Heading</H4> <H5>An H5 Heading</H5> <H6>An H6 Heading</H6> </BODY> </HTML>
Examples of text formatting and heading tags.
To learn more about these tags and a few others to boot, pay a visit to Chapter 5 "From Buck-Naked to Beautiful: Dressing Up Your Page." If you're using the Netscape browser, you have access to a few more text tricks; Chapter 10, "Fooling Around with the Netscape Extensions," fills you in on the details. Finally, if you need to include lists of things in your page, there are HTML tags to handle your every need; Chapter 6 "A Fistful of List Grist for Your Web Page Mill," gives you the complete list lowdown.
If you're a dedicated Web wanderer, then you know the coolest thing about Web pages are the links to other pages. A quick click on a particular link and you're off on a journey to a whole new world.
To give the people reading your Web pages the same kind of thrill, there are HTML tags that you can use to designate a block of text to be a link. Specifically, you use the <A> and </A> tags (the "A" stands for, strangely, "Anchor") to create a link. The <A> tag is a bit more complicated than your garden-variety tag, so let's take a close look at it. Here's the general format to use:
<A HREF="Address">Link text</A>
Here, the Address part is the Web address of the page to which you want to link. Web addresses are ugly-looking things, but there's just no avoiding them. For example, here's the Web address of my home page:
http://www.hookup.net/~paulmcf/logophilia.html http://www.logophilia.com/Home/homepage.html
The Link text part is the word or phrase that your readers will click on to jump to whatever page you specified in the Address part. Here's an example that includes a link you could use to connect to my home page (how flattering!):
<HTML> <HEAD> <TITLE>Linking to Another Page</TITLE> </HEAD> <BODY> This example includes a link to <A HREF="http://www.logophilia.com/Home/homepage.html"> some geek author's home page</A>. </BODY> </HTML>
The next figure shows how the link looks to a Web surfer. To broaden your link education, leap to Chapter 7 "The Jump to Hyperspace: Adding Links."
The <A> tag lets you include in your Web page links to other Web goodies.
You can really spruce up a dry Web page by adding pictures. Whether it's a corporate logo, one of the kids' drawings, or a picture of yourself, images are a great way to break up the monotony of plain text.
There are a number of issues involved in using images in your Web page (such as what type of format to use, how do you get images on your computer, and so on), but don't worry about them now. (For the nitty-gritty on images, see Chapter 8 "A Picture Is Worth a Thousand Clicks: Working with Images.") For now, I'll just show you how to use the <IMG> tag that tells a Web browser to display a specific image. Here's the general format:
<IMG SRC="image">
Here, image is the name of the graphics file you want to display. For example, if the file is named myface.gif, then you use the following tag to display it:
<IMG SRC="myface.gif">
Before you foist your completed page on your fellow Web denizens, you should use a Web browser to make sure everything looks okay. "Wait a minute! How can I use a Web browser to check out a page if the page isn't on the Web yet!" No problem. Lots of browsers have a feature that lets you load a page right from your computer's hard disk. In Netscape, for example, you pull down the File menu, select the Open File command, and then choose the file from the Open dialog box that appears. In Microsoft's Internet Explorer, you select the File menu's Open command, select the Open File button in the Open Internet Address dialog box that appears, and then pick out the file you need. I'll talk more about this, as well as give the appropriate instructions for some other browsers, in Chapter 9 "Publishing Your Page on the Web."
When you're satisfied that your page is suitable for human consumption, you're ready to publish it on the Web for all to see. To get your page online, you need to set up a location on a Web server (A server is a computer that makes documents available to other people on the Internet.) You usually have two choices (see Chapter 9 for details):
After you establish a Web account, you just send your page to the appropriate location (the provider will tell you where). You'll normally do this using an Internet service called FTP (File Transfer Protocol). I'll describe how this works in Chapter 9.