HyperText Mark-up Language, or HTML, is the system of commands that allows you to write pages for use on the WWW. We'll go through a basic template of how to get your documents up and running. Then, if you want to know further commands and fancier features such as tables and image maps, you can take a look at some of the books mentioned below.
Now, there are many programs out there that allow you to program in HTML without ever having to actually see the code (this is kind of cheating...). Now, many word processing programs such as Nisus Writer will allow you to automatically convert word processing documents into HTML documents. Also, there are programs like Adobe Pagemill that provide automatic commands at the touch of a button.
However, you don't have to spend money on these programs if you don't want to...the actual code is pretty simple, and all you really need is a program that will allow you to save text files (anything from a word processing program down to SimpleText or TeachText which is from free).
To start, you need to give the document a header, something tells the web server that it's reading an HTML document. So, you type at the very top.
Don't worry about case sensitivity for the commands (you do need to worry about it for naming files). It will make things a lot easier for you if you keep all of your commands in the same case, either all caps or all lower case.
Next, fill in the title, that is the series of words that appear
at the very top of the page. You need to give it a title command.
Here is what you'd come up with so far:
You have to give it the </TITLE> so that it knows when the
title is completed. Now you want to start the body of your document.
Use <BODY> to denote the main part of your text. Now you can
start typing whatever you like. There are multiple parts to the
<BODY> statement. Here is where you can specify background
color, text color, link and visited link colors.
If you want to read more about the basics of color on the web, check out this article by Peter Swendsen: Color on the Web
So, after you know how to set titles, specify colors and type the main body of text, this is how the entire first part of your HTML page should look:
When you are done with all your typing, close the whole document with </BODY> </HTML> commands to end the Body portion and to
finish the HTML document. You can now use text in your document, but
what about some of the finer points of print, you know, italic, bold,
etc.? Well, if you want to put something into italics, use EM for
italics and B for bold. You need to make sure to provide starting and
ending points. Here's a demo:
This will appear as
You can substitute <EM> for italics, and even use both commands
for bold italics. Here are some examples:
-OR-
Name: Hildy V. Bingen
Commands like <CENTER> are also useful for text. Just remember to always give it an end </CENTER> otherwise your entire page will be centered.
What about pictures? You want to use the command <IMG SRC="filename">. Put the exact name of the file between the quotation marks. IMG SRC stands for Image Source. If the picture is not in the same file folder as the HTML document that calls it up, you will need to provide a longer pathway, such as <IMG SRC="picts/filename">. Save your files in GIF or JPEG format (you can read more about digital imaging formats in the Hardware/Software section.
One final lesson...how do you make links? We'll start with
something easy: link to another web site. First, you need to put in
an anchor point, something that when you click on it, you'll be
calling up another site. That would go something like this:
I want to make the text "WOW'EM" a link to the WOW'EM site. So, let's
concentrate just on that text. Add a <A; HREF="site address"> command. Make sure you put the site address is quotation marks, just
like you did with the pictures above. Now you just have to give it an
endpoint after the text finishes. Here's an example command:
One final tutorial...if you want to make a picture a link, simply
start with the IMG SRC command and surround it by the A HREF command.
Here you go:
This one would let you click on the file "myface" to get you to your
homepage. Substitute anything in and it would work fine. You can also
add text in there to further complicate the issue.
So much for the web tutorial. There are a lot more commands, but these will certainly get you started. You can use a commercial program like Clarisworks or Adobe Pagemill and never really have to do any typing. However, one warning, you should still learn the commands because at some point in time you will ask the program to do something it is not equipped to do and you'll have to type it in manually. Get a book or use a thorough on-line program such as those listed in the links below. Good luck!
The final step after you have made your page is to upload to your server (if the server is a different computer than the one on which you designed the original page. In order to do that, use an FTP program. FTP, or file transfer protocol, is a system for downloading and uploading documents from one computer to another. Here is a step-by-step document of how to complete the process:
There are several packages that may be used for ftp. If you have a commercial on-line web service such as AOL or Compuserve, they provide you with their version. If you are on an academic site, you can probably use any one of a myriad of programs. One of the most popular ftp programs is called Fetch. Most of the programs function in the same manner, so directions are pretty universal.
When the program boots, look for an Open Connection dialog box and then type in the ftp site. Some sites start with ftp.xyz.edu, while others don't use the ftp prefix. Also, you will be asked for your log-in name and a password. If you already have a directory created (you may have to ask your system administrator to do this), then log-on. If you are merely trying to download files from a site, you can often log-on as guest, and use your email address as your password.
After you have logged-on, open your web directory (file folder); if you don't have a directory called 'web,' create one. Use Put File to transfer files from your hard drive to this web directory.
If the file is text, send it over using the Text format (some programs automatically guess the file format--don't get too used to this option--the program often guesses incorrectly). Don't forget to name the file xyz.html. Also, remember, if you are using a Unix environment, everything you type will be case sensitive, so if you type .HTML, you have to call it up in your original document as .HTML. If you make a mistake with the name, and you want to change it after you have already uploaded it, look for an option to Change File Name. Rename your file and you're on your way again.
If you are uploading a picture, you want to send it over as Raw Data, rather than text.
Remember, if you send over a file that has the same name as one that already exists, you will be replacing the data automatically. Most programs do NOT give you a dialog box asking if you want to replace the existing file, instead, it replaces automatically. So, you should always keep back-ups on your hard drive or on a floppy.
Now you know how to write basic web pages and how to get them running on your server. If you have further questions and want to consult with other on-line articles or print materials. Do a Google search or Ask Jeeves for more information.
Back to TeleTalk
Copyright September 1996,
updated February 2004.
Kristine H. Burns,
Florida International University
Questions? Contact me.
Return to WOW/EM
Go to the Menu