resign from your job?add graphics to a web page?buy a camera?buy a cell phone?buy a DVD player?

SOYOUWANNA DESIGN YOUR OWN WEB PAGE?

So you've heard about this World Wide Web thing, and you wanna get your own grinning mug stuck up on a billboard along the Information Superhighway. Or maybe you've amassed so many photographs of your beloved calico cat, Bixby, that your scrapbook is bursting at the seams. At any rate, you believe it's time to take advantage of the web's massive space and convenience, as well as its ability to transform the trivial by etching it into the ether for eternity.

Well, all right, but just remember, no one wants to stumble onto your self-absorbed crap while looking for material that is genuinely useful, entertaining, or, ahem, stimulating. With that caveat, we proceed.

First of all, go visit your favorite page and see what you like on it. What's that? You're here already? You're so sweet. (We're blushing.) Now look at what the designer of the page has done to impress you. Complex arrangements of graphics? Sophisticated use of logos? Animation? Interactive JavaScripts? Are you going to learn today to do all these things for yourself, in the comfort of your own home?

Altogether now: No. Instead, we are going to show you how to construct a simple personal page, which will demonstrate the essential features of web-authoring, while saving the use of bells and whistles for a later installment. Your multimillion-dollar e-commerce portal and IPO will have to wait for another time (and another SYW). Patience, grasshopper.

1. LEARN ABOUT SOME OF THE METHODS FOR CREATING YOUR OWN HTML DOCUMENT

There are several ways to create HTML documents. First of all, you can type in HTML code instructions and content yourself, using a text-editing program. Simple text editors are included with Microsoft Windows 95 and 98 (WordPad and Notepad), and on the Macintosh (SimpleText). These are basically stripped-down word processors that your computer already has. You could also use an HTML editor like Microsoft FrontPage 2000. These applications let a user simply point and click his or her way to a completed web page, without ever having to look at a confusing line of HTML code. Finally, several word-processing and desktop publishing applications (e.g., Microsoft Word 97 and 2000, Adobe PageMaker 6.0) allow you to easily convert your word-processed documents into HTML code by saving them in HTML format.

We'll be using the first method, 'raw' HTML code, because there is something bold and daring about manipulating the primordial elements of the World Wide Web, shaping and molding it to our will. We will also be coding our HTML by hand because: 1) it will help you to better understand how web pages work, 2) you will then know how to edit pages, no matter how they were created, and 3) some browsers may not recognize all of the features that an application such as Microsoft FrontPage might add to a web page. (We know it's hard to believe that Microsoft would ever make one of its products less than perfectly compatible with somebody else's, but hey, it could happen.) Think of it like learning to drive on a stick shift -- learning the tough way first gives you the skills to drive any car in the future.

2. OBTAIN WEB SPACE

In order to make your web page available to the world, you'll need to upload it to a web server. Your school or business may offer you web space at a low price or for free. If not, you will have to use a commercial provider. Your Internet service provider (ISP) may already offer adequate web space for you. AOL, for instance, gives you free web space. Finally, several commercial sites offer free space (and web-building tools) for users in exchange for allowing advertising on their pages. This can be an affordable option for web publishers who aren't afraid of a few banner ads. These sites include www.geocities.yahoo.com and www.ehow.com. Go to these sites, follow their instructions, and they'll give you some web space for free.

Fortunately, you don't need to have server space in order to create an HTML document on your own computer, or even to email it to your friends, enemies, and everybody who's ever been foolish enough to give you his email address. Both Navigator and Internet Explorer will let you open an HTML document directly from your hard drive. We'll talk about this later, when you check out our sample page.

3. CONSIDER THE PURPOSE AND AUDIENCE FOR YOUR WEB PAGE

If you have a business you want to promote online, you'll want visitors to know who you are, what you do, and how they can get in touch with you. If you are a fan or a hobbyist, your page could showcase your interests, offering information for fellow enthusiasts, pictures, and maybe a set of links that will lead to related sites. Alternatively, there's nothing wrong with creating a page just to showcase yourself. Be advised, however, that your personal page will be unlikely to attract a whole lot of visitors. It may at least give you the satisfaction of being an international (if unknown) cultural figure.

What images should you include on your page and what will they contribute? Remember that large images can sometimes take a long time to download when a reader tries to read a web page. This concern becomes even greater when dealing with multimedia, such as video and audio clips, which require much larger files.

How much information should you include on the page? If your page is short, readers generally will not have a problem with scrolling down to read the content of your page. Ideally, though, a visitor should be able to get most of the useful information about a page from the section that appears in the browser upon arrival. If there is a lot of information on a page, you might consider two options: 1) break up this information into separate web pages and provide links to these pages from your home page or 2) create a table of contents at the top of your page that provides links to information later on the page.

4. PREPARE A SAMPLE HTML DOCUMENT

Getting started

You'll first want to create a folder or directory to store your HTML document in, along with any images or other stuff you decide to include with the document. We recommend you create this folder on your desktop for now. You can always tuck it away somewhere else later. Next you'll want to open up a text editor or word processor. If you're a PC user, you'll be using WordPad or Notepad, both found in the Accessories directory of Windows 95 or 98. If you're on a Macintosh, use SimpleText, in the Mac's Accessories directory.

Once you've got your editor open, a new document should be staring at you blankly. We'll save this file now, just so we know where it is. Under File, choose Save As. Name the file with your last name, or something you're less likely to forget, up to eight letters long. Put ".htm" at the end of the file, to show that this is an HTML document. Do not put any spaces in the name -- only letters or numbers. Then go ahead and click Save. Make sure that all HTML files and graphics files that you use for this page are saved in the folder you've made.

Designing a simple HTML document

As we go along, we're going to be making up our own character, Shari Saunders, and designing a home page that fits her needs and (twisted) desires. At the same time, we'd like you to follow our lead, but instead of incorporating the details of Shari's life into your page, it might be nice for you to come up with some material of your own. If you're creatively impaired, however, feel free to plunder Shari's hard-won experiences.

Let's do a quick review of the basics (for a more complete discussion of HTML tags and their functions see "SoYouWanna learn the basics of HTML?"):

Start with the <HTML> tag to let the browser know what kind of file your document is.
On the next line, enter the <HEAD> tag to create a header for your code.
Include a title in the header: for example, <TITLE>Shari Saunders' Awesome (Yet Modest) Home Page!</TITLE>.
Close your header (it's not polite to leave it open in public): </HEAD>.
Following the header, within the <BODY> tag, you'll be able to change the colors of the background and text of your documents. We'll leave these on the defaults for now and come back to this later.
After you've introduced the body of your document with the <BODY> tag, fill in your text, images, and other content (inoffensive or otherwise), and close it out with </BODY>
Close the document with the </HTML> tag.

Here's what the code of this simple HTML document should look like:

<HTML>

<HEAD>
<TITLE>Shari Saunders' Awesome (Yet Modest) Home Page!</TITLE>
</HEAD>

<BODY>Text, images, and other content.</BODY>

</HTML>

Note that only the text and images would appear in the main window of a browser. Also, you'll notice how we've carefully formatted the lines of code by placing each instruction on a new line and by indenting the lines. This is only for human readers; the browser couldn't care less if we ran all the instructions in a row on a single line, without spaces, so long as we get the syntax right.

Now that we've covered the basic structure of an HTML document, it might be nice to add some content, don't you think? We'll start from the top. Write a heading for your entire page, to serve as a title.

The tag <H1>Shari Saunders: My Home Page</H1> will create a heading of Size 1, which will appear in a browser as:

Shari Saunders: My Home Page

You'll now be creating a short message to introduce yourself to visitors to the page. Just begin a new paragraph with the <P> tag, and type a few words of welcome:

<P>This is a professional page of great distinction. Thanks for visiting.

Now let's create a subheading for the first subsection of your page. The tag <H2>Professional Activities</H2> will create a Heading of Size 2:

Professional Activities

Next you'll create a list or two of your professional activities, educational institutions, interests, hobbies, etc. Let's see what we've got so far (note that we've added some additional formatting, including some lists, using only tags discussed here and in "SoYouWanna learn the basics of HTML?"):

<HTML>

<HEAD>
<TITLE>Shari Saunders' Awesome (Yet Modest) Home Page!</TITLE>
</HEAD>
<BODY>
<P><CENTER><H1>Shari Saunders: My Home Page</H1></CENTER>

<P>This is a professional page of great distinction. Thanks for visiting.
<HR>

<P><H2>Professional Activities</H2>
<P><OL>
<LI>Worked for CIA as undercover liaison:
<UL>
<LI>Spread disinformation re: U.S. activities
<LI> Performed online surveillance of public figures
</UL>
<LI>Worked at ice cream stand at Franklin County Fair
</OL>
</BODY>

</HTML>

See the parts that say ? As it explains above, those are just our little notes to you, the reader of the code. They won't actually appear on the web page, just in the code itself. But you knew that.

5. FINAL FORMATTING: ADD AN IMAGE OR TWO AND SOME LINKS

Saving and incorporating an image from the web

Now you're going to add an image to your fledgling HTML effort. To incorporate an image from the web into your own document, you must first save it to your own directory. To try this out (just in case you don't believe us), we must first come up with an image for you to use in your page. Ah, how about the happy computer at the top of this page? Stop complaining, you can find one that you like better later.

First you'll use your mouse to place the cursor over the image of the happy hacker at the top of the page. Click on this image and hold down the button (click on the right mouse button if you're using a PC). A menu of commands should drop down before you. Select "Save this Image as . . ." You'll want to make sure that your image file's title is something you can remember. Let's call this image "happycomputer.gif." After changing the "Save As" line, if necessary, save the image to the directory we've created, the one containing your HTML document.

Since the image file called "happycomputer.gif" is now stored in the same directory as your HTML document, you'll point the browser to this file (your image source) by adding this line to your document:

<img SRC = "happycomputer.gif">

When the page loads in a browser, the image will appear on the page at the spot where you've requested it. Remember: whenever you use text or images that you've found on the web, you must always follow the guidelines for use posted by the web site's creator. If there are no guidelines posted, you must contact the creator and ask for permission to use the material.

Adding a Few Links

Anchors are special destination points within a document, allowing you to add links to different parts of the document, such as separate sections, a table of contents, or the top of the page. We'll now add an anchor at the top of the page, along with a link at the bottom to bring us back up to the top of the page:

<A NAME= "top_of_page"></A> [Creates and names an anchor; we're putting this one at the top of the page]

. . .

<A HREF="#top_of_page">To Top of Page</A> [Creates a link that, when clicked, will jump the user back up to our anchor, at the top of the page]

In addition, we'll add a link to the email address of the page's author (that'll be you, when you stop screwing around and finish your page):

<A HREF="mailto:[email protected]">Shari Saunders</A>

When a visitor clicks on this link, her browser will activate her default email application, and open a new, blank message. The message will already be addressed to you, and the user will only have to fill in her message and hit the "send" icon or command.

You may also want to add a list of your favorite links, if your page is intended to reflect your hobbies or interests. We'll add just one of our favorite links (check it out--we couldn't make this stuff up if we tried):

<A HREF="http://www.cia.gov/cia/ciakids/index.html">Visit the CIA Homepage for Kids!</A>

Final Formatting: Sample Page

With a little bit of final formatting, here's a sample page we've constructed to illustrate the HTML tags we've been working with in this SYW and in "SoYouWanna learn the basics of HTML?"):

<HTML>

<HEAD>
<TITLE>Shari Saunders' Awesome (Yet Modest) Web Page!</TITLE>
</HEAD>
<BODY BGCOLOR="FFFFFF"
LINK="#0000FF"
ALINK="#FF0000"
VLINK="#800080">

<A NAME= "top_of_page"> </A>

<P><CENTER><H1>Shari Saunders: My Home Page</H1></CENTER>
<P>This is a professional page of great distinction. Thanks for visiting.
<P><CENTER><img SRC="happycomputer.gif"></CENTER>

<HR>
<P><H2>Professional Activities</H2>
<P><OL>
<LI>Worked for CIA as undercover liaison:
<UL>
<LI>Spread disinformation re: U.S. activities
<LI> Performed online surveillance of public figures
</UL>
<LI>Worked at ice cream stand at Franklin County Fair
</OL>
<HR>
<P><H2>Contact Information:</H2>
<A HREF="mailto:[email protected]">Shari Saunders</A>

<P><H2>Links You May Like:</H2>
<P> <A HREF="http://www.cia.gov/cia/ciakids/index.html">Visit the CIA Homepage for Kids!</A>
<P> <A HREF="designpageFULL.html#para7.1">Back to our previously scheduled SYW</A>
<P><A HREF="#top_of_page">To Top of Page</A>

</BODY>

</HTML>

6. PREVIEW YOUR DOCUMENT IN A BROWSER

You'll now want to see how your document looks in a web browser, and to check if your code has any errors that keep the page from loading properly. First SAVE your document in the directory we've created. If it ain't saved, it'll be tough to read. Once your document is saved, you'll open up your browser. Your browser is probably set to go out on the web as soon as it's opened; you'll want it to start on a blank page instead. To accomplish this, you'll have to figure out which of these four groups you belong to:

To set this up on newer versions of Navigator
Open the Options menu and scroll down to General Preferences. Click on the Appearance tab, and in the list of Start Up options, select "Start with Blank Page."
To set this up on older versions of Navigator
Open the Options menu and select Preferences; then scroll down to the Style tab and set the browser for "Start with Blank Page."
To set this up on newer versions of Internet Explorer
Open the Tools menu, and then scroll down to click on Internet Options. . . Under the tab marked General, in the "Home page" box, click on the button marked "Use Blank."
To set this up on older versions of Internet Explorer
It appears that you have to just hit Cancel when the browser attempts to go online to get a blank page in your browser window.

Under File, choose Open (Navigator) or Open File (Internet Explorer). Select the HTML document from your directory (which should still be on your desktop) and click OK. Your document should now be displayed as a web page in your browser window (even though it's not really out on the World Wide Web).

If your page doesn't look the way you hoped it would, you'll want go back to the text editor to recheck your code for errors or spots you could improve.

7. UPLOAD YOUR DOCUMENT INTO CYBERSPACE

Since the uploading process will vary depending on what application you use and on the requirements of your service provider, we will cover this process only briefly and generally. The standard method for uploading files is called FTP, or "file transfer protocol." This means what it sounds like, a method for transferring files from your computer out to another server (or vice versa). We'll use WS_FTP as an example, as this is the standard application for uploading files from a Windows system. If you don't have a copy of WS_FTP, you can download it for free from many shareware sites, including www.shareware.com. Uploading from a Mac involves a different application program but is a very similar process. Be forewarned, this whole uploading process can be tricky, so print this step out for quick reference.

You'll first want to make sure that all your documents for uploading are in a common folder or directory. You will have to check up on your service provider's policies as to where and how to upload your files to their server, and whether you must save the files with a particular label or format. Check your documentation, and their web site. If you can't find the information, or it's unclear, call them up and ask them nicely to explain it to you.

You must first login to your service, as you normally do to get online. Then run WS_FTP. This should open a window called Session Profile. If it does not, click on the Connect button to bring up the correct window. Click New for a new session, and then fill in the Profile Name. Call it something that makes sense, like "Web Page Upload." For the Host Name, you'll want to enter the name of your service provider's server (they will have to provide you with this information). Your User ID will be the first part of your email address, before the "@" symbol.You shouldn't need to include your password, since you entered it when you first logged in. In the bottom line, Local PC, you'll enter the path name to the directory containing your document and other material. Since we've saved our directory on the desktop, the correct path in Windows will be:

C:\WINDOWS\Desktop\DirectoryName

When you've finished filling in these lines, click Save -- you'll need to use this connection again later. Then click OK to begin uploading files from the directory.

You should now be looking at a window has at the top the name of the application, WS_FTP, followed by the name of the server you're uploading to.

On the left side of the window, under the phrase Local System, you should be looking at a line containing the name of the directory on your computer, and beneath this line a listing of the files in that directory.

On the right side of the window, under the phrase Remote System, there should be a line containing the name of the directory that represents your space on the server; the name of this directory will probably end in your User Name, for easy identification. Beneath this line will be an empty space, where we're about to stuff some files.

Click on the files you want to transfer, on the left side of the window. If you hold down the mouse button you can select several files at once. Once they're selected, click on the arrow button at the center of the window, the one pointing to the right, since this is the direction we're transferring the files to. A panel will open before each file is sent, asking you if you want to change the file name. If not, just click on OK for each file and it will be on its way.

Once you're finished, you should be able use your browser to visit your web page on the Net, just like any other page. Remember: if you want to make any changes or corrections to your page at this point, you'll have to alter the file on your computer, and then upload the revised file to overwrite the one on the server.

Click here for one last glance at our sample page in all of its glory.

Congratulations, you've just gone public.

1 2 3 4 5 6 7 printer-friendly