Around Town

So you want a web page, but you don't know how to go about it. Chances are you have everything you need to get started right there on your computer right now. You have Road Runner, you have notepad. The one thing you might not have is a file transfer protocol (FTP) program, but with Road Runner you can get one of those pretty easily, too.

There are a couple of steps to getting a rudimentary website going. One: you have to have a place to put it. That place has to be a computer connected to the Internet somehow. Road Runner subscribers can click here to go to the home-admin.rr.com server with their master accounts and set up an account for a web page. Read the acceptable use policy, fill out the forms and presto, you have a space to put up your web page. Basically your web space consists of ten megabytes in a directory on a server called home.maine.rr.com. You add a forward slash/ and a name that you chose when you created your website. Ten megabytes is huge. For most people it's far more than they will ever need.

You can use a WYSIWYG (What You See Is What You Get) HTML editor to create your web pages. Netscape and Microsoft both make one, and include it in some versions of their browsers. We use Microsoft Front Page to do a lot of the work on Around Town. But to really know what's going on with your pages, you need to have at least a basic understanding of the code. Often the WYSIWYG editor just won't do exactly what you want, and you have to jump in and edit at the code level.

Most web pages are simple text files. Some use different technology for different purposes, but your basic everyday web page is a text file and a bunch of graphic files. The text file tells your browser how to put the page together so other people see it the way you want them to. The language the layout instructions are written in is called Hypertext Mark-up Language (or HTML). To see the HTML for this web page (or any web page) go to the menu bar on top of your browser and choose VIEW, Then go to SOURCE ("Page Source" in Netscape). The gibberish you see is the SOURCE CODE for the web page you're looking at. This page is written both in HTML and ACTIVE SERVER PAGES(ASP). That's why the page ends in .asp. ASP is a complication you probably won't deal with in creating your home page.

Your HTML files consist of text to be displayed on the page, and instructions how to display it. The instructions are called TAGS. HTML tags are enclosed in <These things>. For example <P> tells your browser to put a paragraph break in the text. To close a tag you repeat the tag, but you add a forward slash "/" to it. The "/" means "not." Lets look at an extremely basic HTML file.

Let's break this piece of code apart so we can see what's happening. We start with the <HTML> tag. Some browsers, particularly older ones, need to know that HTML is coming. Then we use <HEAD> There's a lot of stuff that can go into the <HEAD> area, most of it fairly advanced and thus worthy of ignoring for our purposes here. One thing that does go into the <HEAD> area is <TITLE>. That's going to display the name that appears in the menubar at the top of your browser while the page is open. It's important to close the tag </TITLE> otherwise your browser is going to think the entire file is title and the rest of it won't work. Then we close the head </HEAD>. Now comes the meat of the page. <BODY> is all the stuff that appears in the browser window. You can put any text you want in the body and close that out with </BODY>. End the file with </HTML>. Make sure you've saved the file and check it in your browser. Your browser is only going to display the SAVED version of the file. If you saved and the old version is still in your browser, try the refresh button.

Now you try. Copy the text above from <HTML> to </HTML> into a text editor like Notepad on the PC or SimpleText on a Mac. Save it to your computer with a name that ends in .htm. This could get tricky if you can't see file extensions on your PC, but it should still work. Now go to your browser and go FILE ->OPEN and find the file. It should look pretty much like it did from the above link. If not, something's messed up and you're going to have to play with it until it works. Don't fret though, I've found that you never learn as much about computers as you do when something doesn't work.

Why are all the tags in caps? Just because it makes it easier for me to see what are tags and what is content. It doesn't matter if the tags are upper and lower case. However it does matter if file names referenced within tags are in upper or lower case.

Now that's working, lets try something fancy. We're going to make a link. The link tag is <A>. For some reason that stands for Anchor. A typical link tag looks like this: <A HREF="http://www.yahoo.com">Yahoo</A>.. HREF stands for Hypertext REFerence and the web address of the links target goes in between quotes in the link. MAKE SURE you end the link with </a>. Otherwise your link will include all subsequent text. So here's the source code for our next example.

    <HTML>
    <HEAD>
    <TITLE>Road Runner HTML Tutorial</TITLE>
    </HEAD>
    <BODY>
    <A HREF="http://www.yahoo.com">Yahoo</A> is my link
    </BODY>
    </HTML>

The last thing I'm going to cover here is images. There are a couple of ways to get images for your web pages. One way is to make them, using any of a number of image creation software packages. That's a topic for a couple of books by itself, but one good, inexpensive program for image manipulation is Paint Shop Pro (click to download trial version). Another is to "borrow" them from other web pages. On most PCs you can copy an image from a web page by right clicking on the image and choosing "Save Image As." That puts it on your hard drive where your browser can find it. Macs are slightly different (as always) but you should still be able to save an image from a web page. Here's one we can play with:

Save this image to your hard drive and we'll use it in our code. <IMG SRC="smallflag.jpg"> That stands for IMaGe SouRCe and smallflag.jpg is the name of the file. There's no need to close out this tag. Now we can add the image and a link to our page. The Code is going to look like this.

    <HTML>
    <HEAD>
    <TITLE>Road Runner HTML Tutorial</TITLE>
    </HEAD>
    <BODY>
    <IMG SRC="smallflag.jpg">
    <P>
    <A HREF="http://www.yahoo.com">Yahoo</A> is my link
    </BODY>
    </HTML>

One note. The picture MUST be in the same directory as the HTML file, otherwise the <IMG> tag is not going to work. There is a way to put the picture elsewhere but then you're going to have to use different information in your IMG tag and we're trying to keep this very simple right now. You also could link the picture by putting the <IMG> tag within the <A> tags. Play with these tags and see what you can come up with. One of the very best ways to learn more about HTML is to look at the source from other pages. Here are some other tags you might play with:

     <FONT FACE= "Arial" Color="blue">
   <HR>
     <CENTER>
     <I>
     <STRONG>
     <H1>
     <H6>
   <HR>
     <CENTER>
     <I>
     <STRONG>
     <H1>
     <H6> and all the numbers in between
   <MARQUEE> This only works in Internet Explorer
     <BODY BGCOLOR="green">

Now you've got a page to put on the web, let's learn how to get it there. You already have the web space at http://home.maine.rr.com/(whatever). The trick is to get the files you've been working with to your web space. To do this we use FTP. That stands for File Transfer Protocol. The easy way to do that is to use a program called an FTP client. There are a whole bunch of them available as freeware or shareware. One relatively easy one to use is FTP Explorer (click to download), which you can download here. FTP Explorer only works for Windows based computers, but according to May statistics, less than five percent of our readers are on Macs. If you are using a Mac, a good FTP program is Fetch.

The first thing to do with FTP Explorer is to establish a connection to your web server. When you open the program it will ask you for the information you need to establish this connection. The screen will look something like this:

Fill in the fields like this with your appropriate information. Click "Save" then Connect. You should be looking at something like this.

This program works pretty much like the venerable old Windows Explorer. To get your files to the server you need to upload them. Just like it sounds, upload is exactly the opposite of download. You transfer your files, via the Internet, to the server. Just go to FILE->UPLOAD and select the files to send. Make sure your html files end in .htm or .html and all the image files included are in the right directory. If you name your main page index.htm, the home server will know that's the one to go to first. Otherwise, the address is going to be http://home.maine.rr.com/(your directory). Now verify that everything is working. Congratulations! You've created your first web page!