Setting Up a Web Page

(I'm actually going to put in a preface to Step 1, which is to go read what C.J. Silverio has to say about good web design. Then come back here and I'll hold your hand through the first steps.)

STEP 1 - Finding a site

So you want to set up a web page. The first step is one I can't really help you with -- finding a site. One option is paying for one (there are local providers in most towns that will give you web site, unlimited e-mail, etc. for $20/month. If you can't afford that (or don't want to pay it), hunt around for a free site. Here's Yahoo's free site index. Beware of sites that claim to be free, then charge you per hit.

Lots of people seem willing to host writers/artists for nominal fees, especially if you happen to do erotica and will therefore bring lots of attention to their site. Of course, you may overload their site too, so be sure to warn any potential hosts of that problem.

STEP 2 - Writing your pages. (This is easy. Trust me.)

Okay, you don't need a program of any kind. Instructions are freely available on the web. Look for A Beginner's Guide to HTML for a more detailed (and probably more correct) version of this info. The easiest way to figure out how to do stuff is look at pages with features you like (view source should be an option in your browser) and you'll see exactly what they typed to get the features you want.

The basics: You start with a site, and a home page. Create a file called home.html, usually in a directory called html. There's often an index file as well, called index.html. According to my friend Brian, "depending on what kind of web server your host has, either or both (or possibly neither) of home.html and index.html have the following effect: If the URL for that page is, say, http://www.site.com/~joe/index.html (or home.html), then http://www.site.com/~joe will work just as well. In other words, it's a stand-in for the entire directory. You can see how the names match the functions of these files." If you didn't follow that, don't worry. Just ask your host which you should use.

Basic Home Page

Let's create an imaginary person, and work with their page. Sandra wants to make a home page to display her hiking trips and photos.

A basic home.html file looks like this:

<HTML>
<HEAD>
<TITLE>Sandra's Web Page</TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>

That's it for the basics. All web pages should have each of those lines, or you'll have trouble. Everything in <> is an instruction to the browser. <HTML> tells it it's an html or web document. Each file is divided into a head and a body. The only thing in the header should be your title (which is what places like Yahoo and Alta Vista call up as the name of your page). Everything else goes in the body. A / in front of a command tells the program you're done with that command -- stop doing whatever you were doing. (For example, if you type <CENTER> text in your body, it'll keep centering everything until you type </CENTER>.)

Headers

First simple thing to put in the body: Headers for your page.

<HTML>
<HEAD>
<TITLE>Sandra's Web Page</TITLE>
</HEAD>
<BODY>
<H1>Welcome To Sandra's Page!</H1>
<H3>A collection of hiking trips...</H3>
</BODY>
</HTML>

You want a header, because in most programs the title doesn't show up, at least not obviously.

Headers range from H1 to H6, in decreasing order of size. There are several samples on my home page, but play with them yourself and see which styles suit you. A Beginner's Guide warns not to skip levels, because theoretically, the header tags are structural tags, not formatting tags. But since we have so few formatting options, I'd go ahead and use them.

Text

Second simple thing: text.

<HTML>
<HEAD>
<TITLE>Sandra's Web Page</TITLE>
</HEAD>
<BODY>
<H1>Welcome to Sandra's Page</H1>
<H3>A collection of hiking trips...</H3>

I've collected a whole
lot of good stuff that I
think you might like.<P>

Write to me if you do, at:<P>

Sandra<BR>
100 Hope Street<BR>
Happy, PA 19000<P>

</BODY>
</HTML>

Text in HTML has to be told where to end. Line breaks mean nothing to the program -- you have to give it either a <P> paragraph command or a <BR> break command. The text above would show up like this:

I've collected a whole lot of good stuff that I think you might like.

Write to me if you do, at:

Sandra
100 Hope Street
Happy, PA 19000

(Note that anything in < > doesn't show up on the final page)

Links

Third simple thing (and the last we'll do today): links

<HTML>
<HEAD>
<TITLE>Sandra's Web Page</TITLE>
</HEAD>
<BODY>
<H1>Welcome to Sandra's Page</H1>
<H3>A collection of hiking trips...</H3>

I've collected a whole
lot of good stuff that I
think you might like.<P>

Write to me if you do, at:<P>

Sandra<BR>
100 Hope Street<BR>
Happy, PA 19000<P>

Or just send me <A HREF="mailto:sandra@aol.com">e-mail</A> by clicking here.<P>

</BODY>
</HTML>

Note that, strictly speaking, you don't need the final <P>, 'cause there's nothing following it, but it's neater. A matter of style.

Okay, so the links are a little confusing. Basically, the format for any link is <A HREF="linkname">word they click on</A>. Linkname is simply the name of the file if it's a file in your html directory, or mailto:your address if you want them to send you e-mail (this only works with some programs, btw), or an entire html address if you want them to go to someone else's page. Life will be much easier for you if you keep all the files you want people to be able to see in your main html directory -- that way you can just use the filename. You can create subdirectories inside that directory if you start accumulating a lot of files, but that gets a bit complicated too. But the basics are fairly straightforward. For example:

<A HREF="ch1.html">Chapter 1 of my brilliant novel</A>

<A HREF="mailto:mohanraj@mills.edu">Send mail to my friend Norma Angelica</A>

<A HREF="http://www.wenet.net/normav/">Here's her home page.</A>

Anything between the <A HREF="something"> and the </A> will be underlined or in link color, depending on what browser you use. It can be as short or long as you like, but short links are neater. Remember to always put the actual link in quotes -- a missing quote will mess up some browsers, but not all.

Note also that keeping as much as possible stored on your own page rather than as links to other people's pages will speed up your viewers' browsing time, which keeps them happy, and keeps them from giving up on your site. Always ask permission before copying material, of course. Most people are very generous about it.

That's it for chapter one. In chapter two, we'll cover pictures, pictures which link to bigger pictures and/or other pages, lists, and preformatted text (for those long stories that you don't want to bother going through and putting in all the <P>'s and <BR>'s. Click here to continue.


P.S. Feel free to write me with comments on this page or suggestions for improving it.

Back