How to Create a Web Page

it's like word processing in public
  -Justin Hall

 

And it's as easy as pie. Just look at this: 

<html><head><title>Hello World!</title></head>
<body>


<p>Hello World!


<p>Huh, <em>that's</em> not so tough. Now let's check out
<a href="http://www.yahoo.com/">Yahoo</a>.


</body>
</html>

This is the HTML code for a complete working web page. This is what the above page would look like in a browser:

Hello World!

Huh, that's not so tough. Now let's check out Yahoo.

(Here it is for real.)

If this was copied onto a web server, then the whole world could see it. You don't need any fancy programs to create HTML code, you can use a standard "bare bones" text editor, like NotePad.

What's Going On

What you are seeing is an example of a markup language. The specific markup language is HTML, which is short for HyperText Markup Language.

The various elements of the documents are defined by tags. In HTML the tags are delimited with the angle bracket characters (<>).

Now, if you stare at the above example for a bit, you can probably see what is going on. The only really difficult part is the tags that are surrounding "Yahoo." I put them in this example, because they are the all-important link tags. Look at it for a second. http://www.yahoo.com is where the URL goes, and Yahoo is the text that you see that is underlined.

If you copy-and-paste this code example into NotePad, substitute your own text in the obvious places, and then use a FTP program to copy it to a real web server, it will be on the web!

Simple huh?

Trying it Yourself

The next step is to create a new directory (folder) somewhere on your hard disk to put the HTML files that you will be experimenting with. Go do that now.....

Now, scroll back a little and select the example code up there, click on Edit/Copy, start up Notepad, File/New to create a new, blank document, and then Edit/Paste to paste the code into NotePad.

Got it? It should end up looking just like it does on the screen, above. OK, now File/Save As it, giving it some original name like test.htm (When you do the File/Save As, make a note of what directory (folder) that it is being saved in. Maybe save it in the new directory that you just created.)

Now use your browser's File/New Web Browser to start up a new instance of the browser. Then File/Open the test.htm file that you just saved.

Do you see the "Hello World?" If you do, then good, you just created your first web page. If not, keep fiddling until you get it working. It has to work.

Now, go back to the document in NotePad. Change some of the text and then save it again. Switch back to the browser and click on the Reload button. The browser's display should now be updated to reflect your changes.

Good. You now have an authoring system.

HTML References

When you get the drift of how it works, you will want to get a good reference guide to the HTML language so that you can start learning some more of the fancy stuff.

The Beginner's Guide to HTML is available on-line and doesn't require any downloading.

Don't be too intimidated by all the "stuff" that is in that guide. It will only wear you down and that's what they are trying to do. The best way to learn is to start out with something basic that works and experiment with it for a while. Poke it and prod it some. Try changing a tag and seeing what happens. When you get comfortable, start adding to it. Then is the time to really dig into that guide, not now. Now is poke and prod time.

Try to be goal oriented. Hmm, I wonder how to make something be bold? Gee, how do I change the background color? Stuff like that. Then go back into that guide and figure out how just get the things that you want. Don't feel that you have to learn everything that there is in the guide, just because it in there. You don't buy everything that is in the grocery store when you go shopping, do you?

Another way to learn is to just start looking at the HTML code from existing real-world sites (by using your browser's View/Source command), and studying that already-is-working HTML code. You can usually get a lot of milage out of copying-and-pasting parts out of other pages into the one that you are working on. I know that I have (and still do.)

After you start doing a lot of HTML editing, it is real handy to have your HTML docs right there on your own computer. For this, I reccomend the HTML Reference Library, (Windows only) which is implemented as a regular Windows Help file, and is free for the downloading. This is what I use. Full installation instructions are located on the HTML Library site.

Recap

FTPing Your Files Onto the Web

After you get the hang of creating your HTML pages on your own computer, you then need to actually put them on the web. This means copying them onto a server that is actually connected to the Internet. (We will ignore, for the time being, the idea of running your own server.) What this involves is making an arrangement with somebody that offers web hosting.

Because web hosting is often bundled as part of the basic ISP service, you may already have this. Check with your ISP. or look up any "member services" information that is on your ISP's own home page. This is often the place to look to find out how to use your web space. It might be a procedure that you can do by yourself, without having to actually call your ISP.

Once you have made these arrangements, you will still have to copy the files that comprise your web page from your computer onto the web server's space that is allocated to you. This is done by using a program that implements the File Transfer Protocol (FTP) and is usually very easy.

One good program is Ipswitch WS_FTP. This program is available in two versions: "Pro" and "Limited Edition." The Limited Edition one is free, for personal use. Business users must purchase the Pro version, which also has a few more features.

You can download either version from the Ipswitch Download Page.

Operation

Using either version of WS_FTP is rather straightforward. You first have to go through several dialog boxes giving the pertinent information about your web server: host name, type, your user ID, password, etc.

Make sure that Options/Sessions "Force Lowercase Remote Names" is checked. AND make sure that all filename references in your HTML are also lowercase. Case doesn't matter in DOS or Windows, but it does on the web. Also, resist the temptation to use spaces in your file names. Even if your own computer allows this, it isn't a good idea on the Internet.

Also make sure to enter the directory on your own computer where your web pages are, so that WS_FTP will know enough to open it after you connect.

And, it is a good idea to set the "Time Offset" to correspond to your time zone. EST time is -5.

Once you set all the parameters, you connect. Assuming that it connected, you should see two directories (folders) displayed. One is the directory on your own (local) computer. The other is the directory on your web server. You can merely "drag and drop" the files between the two directories. Easy.

Hint: The newer versions of WS_FTP allow you to change the directory sort order. It defaults to sorting by file name. What I find to be very handy is to change it to sort by date, in inverse order. If you do that, then, every time you connect, the files that have been modified most recently, will float to the top of the directory list. (So that you know which ones need copying to the web server.)

Next subjects

Until I get around to filling out "Next Subjects," see if you can figure out some of this stuff from my old collection of HTML Resources. A lot of this stuff is free and is available right from the web.

Use your browser's back button to return to the Table of Contents. Forward if you go too far back.

Images For Your Site