Virginia's HTML — Your First Page

©2005, Martin Rinehart html-intro-01.html

Start with a Good Text Editor

Windows

You can get started using Notepad (but a word processor like MS Word won't work). Google for "free text editor" and see what's available. My choice was NoteTab Light. Go ahead and install a good text editor now.

Macintosh

What do you do on a Mac, Ginny? If you've got nothing, I can vouch for JEdit as a good, multi-OS editor.

Linux

On KDE I use KWrite. It's nicely HTML-savvy. Don't know what to use on Gnome.

Create a Web Page

There's a small amount of overhead that you have to know about. Today we'll handle the overhead and create some minimal (alright, utterly boring) content. Patience! Tomorrow we'll add some life to the page.

Copy the following into a new page in your editor. (If you aren't named "Virginia" substitute your own name.)

<!virginia.html - a page about me>

<HTML>

<BODY>

This is Virginia's first web page.

</BODY>

</HTML>

<!end of virginia.html>

The first and last lines are comments — <! notes to yourself go here>. Start with a comment that contains the name of the file and a few words explaining what the page is about. End with a line that identifies itself as the end of the file. A month or a year after you create the page you'll be glad to have these comments.

Note that the file name uses all lowercase letters. You can use mixed case names, but that will eventually cause a disaster. You'll do some work on a Windows PC and then upload your files to a Linux or UNIX server. Then you'll find that the graphics which looked so good are gone and the links are all broken. That's because MyGraphic.GIF and MyGraphic.gif are synonyms on Windows, but they are separate files on Linux and UNIX. Stick to all lowercase file names and this will never be a problem.

The next lines show the basic structure tags.

<HTML> — the html goes inside an <HTML> </HTML> pair.
<HEAD> — header stuff goes here.
<BODY> — the body of the page, of course.

Right now you could omit the <HEAD> and </HEAD> tags, but they'll become critical when you ask Google to index your site so I'd include them as a reminder.

Open Your Page in a Browser

Create a directory for your website. For www.VirginiaRinehart.com you'd create a root with a name like vr-website-root. Create your own directory to suit yourself and then save the virginia.html into that directory.

Now fire up your favorite browser (Konqueror! or, if you're stuck in Windows, Firefox or Opera) and use the File/Open dialog to open /vr-website-root/virginia.html. You should see this:

This is Virginia's first web page.

Got it? Good!

This is the basic HTML-writing technique. Do your work in your text editor, save and view your local file with your browser. Then back and forth between editing with your editor and viewing with your browser.

Put It On the Web

We're using IVCHosting—they use Linux servers which keeps the cost down and the reliability up and they register your domain name for free. The Linux servers caused me a world of trouble until I converted my sites to all lowercase file names. Uploading from Windows to Linux worked, but I'm much happier now that I do my development in Linux. A modern Mac, based on another Unix alternate, should work just like Linux.

In your browser, go to www.VirginiaRinehart.com/admin and sign in. Go to the File Manager and click the "Upload Files" button. "Browse" to /vr-website-root/virginia.html and click the file. Type "index.html" in the "Filename to Save As" box and click "Upload Files". (When you point your browser to "www.WhereEver.com" it actually goes to "www.WhereEver.com/index.html" which is why you save as "index.html".) The default page they provide is also "index.html". Their instructions tell you to delete it, but uploading another file and naming it "index.html" will automatically overwrite the old one. (No warning! Think before you upload.)

Now point your browser to www.VirginiaRinehart.com and you will see your very dull page.

Congratulations! You're on the web. (You're not registered with any search engines, so Google won't find you. That's probably good with such a dull page.)

Summary

Ignore the fact that your page is totally unexciting. Concentrate on the fact that you've mastered the basics:

Start a file in your text editor.
Begin and end the file with comments.
Add <HTML> tags.
Add <HEAD> and <BODY> tags inside the <HTML> tags.
Add your content between the <BODY> tags.
Open the page with your browser.
Upload and open the page in cyberspace.

Tomorrow I'll show you some more tags that will add some life to this page.