 |
1000 Morris Ave. |
| Beginner's guide to HTML |
One of the first steps to creating a good HTML document is finding a good HTML editor. Although this is not necessary, and the editing can be accomplished on any simple word processor, a good editor makes it much easier. I use HTML HyperEdit by Steve Hancock
Here are some others (all programs are MS Windows):
The home page for HyperEdit. Contains download of program, docs, and other information.
This FTP site contains the ZIP file of HTML Assistant, plus some docs.
The home page for HTML Writer, with download of program, and more. This editor is designed to be used with Cello or Mosaic browsers.
The biggest and most sophisticated editor. It is a professional editor, and uses 8 meg of RAM. The home page for SoftQuad contains more information.
| Next, you need to learn or find a listing of the HTML markup tags. Here's a list of the simple ones I know for HTML v3.0. | |
| Three periods '...'
between two tags represent the text between the tags. Brackets [ ] mean optional. |
|
| General
Tags <TITLE>text for title</TITLE> Title (length < 64 characters) <Hn>text for heading</H> Heading(n=1 to 6, 1 is biggest) <P>text...</P> New paragraph On a paragraph, it is acceptable only to put <P> at the end of the paragraph only. These tags are needed in at least that form to separate paragraphs. |
|
| <HR>
Horizontal rule- a line |
|
| Images <IMG SRC="image name" [ALT="image description"] [ALIGN="top, middle, or bottom"]> |
|
Lists <OL>Ordered list, numbered consecuitively . <LI> .Each item in a list (used for all lists) /OL> .Ends the list . <UL> Unordered list, marked with dots |
|
| <LI> </UL> <DIR> Directory list <LI> </DIR> List of short items <MENU> <LI> </MENU> <DL [COMPACT]> <LI> </DL> |
|
| <CITE> | </CITE> | citation............................................... |
| <EM> | </EM> | emphasis |
| <KBD> | </KBD> | Keyboard Shortcut |
| <SAMP> | </SAMP> | *literal characters |
| <STRIKE> | </STRIKE> | |
| <STRONG> | </STRONG> | strong emphasis |
| <VAR> | </VAR> | variable name |
| <B> | </B> | bold |
| <I> | </I> | italic |
| <U> | </U> | underlined |
| <BLINK> | </BLINK> |
Some characters are reserved by HTML and must use a code to represent that character. Here is a list of the most common:
| < < | less than symbol |
| > > | greater than symbol |
| & & | ampers |
The newest form of HTML is HTML 3.0. Also, Netscape has implemented its own extensions. This section will deal with the extensions of BACKGROUNDS, COLORED TEXT, and TABLES.
The BACKGROUND command, given in a command called the BODY command, determines the color of the background, or determines a picture to be displayed on the background.
The BODY command is in the top of the page, immediately after the TITLE.
Here is an example of a white background:
<BODY background="#ffffff">
Notice the #ffffff denoting the color white. This is the hexadecimal representation of the color white. I do not yet have a place where iI have found these codes listed. If I find one, you will be the first to know, with a link placed here. Also, if anyone knows of a site where this information is avaliable, E-Mail me with the address.
Here is an example of a background using the GIF file named ROCKS.GIF:
<BODY background="rocks.gif">
Place in quotes the URL of the picture you want there if it is not in the same directory as the page itself.
Other BODY commands are the TEXT, LINK, VLINK, and ALINK commands. Here, the default color of the text and links can be changed.
These commands are placed in the same place as the BACKGROUND command. TEXT = The color of the normal text on the page. LINK = The color of unfollowed links on the page. VLINK = The color of followed links on the page. ALINK = The color of links that are highlightd (i.e. links that are clicked on and held down). Here is an example of white text with green links:
<body text="#ffffff" link="#ffffoo" >
These commands, along with the VLINK and ALINK also use the hexadecimal color system.
Tables are one of the newest and best features of HTML writing. It enables writers to make colomns of information separated by table definition. Unfortunately, it is also one of the most complicated commands.
First, the general looks of the table must be defined. This is dome with the TABLE command.
Next, the first row of the table must be defined. Use the TR command for this. When you are done writing one row, shut off the TR like any other command by using the /.
Finally, define the individual fields in the table with the TD command.
Here is an example of a table:
<TABLE BORDER=1 VALIGN=CENTER
CELLPADDING=2>
<TR>
<TD>APPLES:
<TD>25
</TR>
<TR>
<TD>ORANGES:
<TD>46
</TR>
</TABLE>
And here is what the table would look like:
| APPLES: | 25 |
| ORANGES: | 46 |
This example is a table that will have borders one unit wide, with cell padding of two units. These units are hard hard to describe, and I suggest that you experiment with different values to achieve the desired look.
Links are connections to specific spots in the same document, other documents on the Web, FTP sites, Gopher sites, and almost anything else on the Internet. These are by far the most complicated of HTML tags. It just takes practice, and trial and error to get the hang of them.
Anchors are links to a specific spot in a document. Many editors will make them for you, but it is good to know how to do them as well.
First, find the spot in you document you want you anchor to go to.
Then name the anchor: <A NAME="name of anchor">linked text on the screen
</A>
Then find the spot you want the link to the anchor.
Place the anchor link: <A HREF="#name of anchor">linked text on the screen</A>
Example: This anchor will take you to the Links section.
Links to other sites are the backbone of the World Wide Web. Through these links, users can move from page to page, or site to site without typing in lenghty addresses. Possible types of links are : HTTP (Web sites), FTP (File Transfer Protocol), Gopher , Newsgroups, and specific files on the local system.
<A HREF="http://host address/path name">linked text on the screen</A>
for a general FTP directory
<A HREF="ftp://host address/path name/">linked text on the screen</A>
or for a specific file in an FTP directory
<A HREF="ftp://host address/path name/file name">linked text on the screen</A>
<A HREF="gopher://host address">linked text on the screen</A>
for a whole newsgroup
<A HREF="news://newsgroup">linked text on the screen</A>
or for an individual article
<A HREF="news://article-id number">linked text on the screen</A>
for a file on another host
<A HREF="file://host address/path name/file name">linked text on the screen</A>
or for a local file
<A HREF="file:/path name/file name">linked text on the screen</A>
Another good way to learn HTML is
to copy off of others. Using your browser, go to a page
that has many of the effects that you want on your page.
Save off this file as a *.htm file and view it with your HTML
editor. This way you will be able to learn what tags they
used, and use them for your own page.
Now create your site, debug it, and make it look how you want. To debug it, you can go to your 'open file command' (on Netscape. This may differ on other browsers such as Mosaic) and open your html documents (filename.htm). You will be able to view them with your browser and make sure that they look how you want them to look.
When creating an HTML document, there are some basic rules to follow to make 'surfing the net' easier for the users of your page.
For a more complete style guide, there is one by Tim Berners Lee on CERN.
Now when you have finished your document, contact the administrator of your system to see what needs to be done to make the document avaliable to the public. Many systems set up folders for individual users to use and place their documents.
Now that you have your site on the Web, how do you let people know that you are there?? The best way is to advertise your site on lists and searchers such as Yahoo, EiNet, Lycos, and more. The quickest and easiest way to reach all of these is by using a free service called Submit-It. This service will allow you to register your page with up to 12 different lists and searchers. This will give your page world-wide exposure and greatly increase your chances of having the people you wish to reach see your page.
There may be many things that I have left out of this guide in order to make it simple to understand for beginning users. I advise that once you have mastered the basics of writing HTML, seek out a more detailed guide. There are many on the net, and I will place a link to one of them after this section. Also, if you wish to learn more, there are scores of books (Yes, paper books. Not Cyberbooks) avaliable in libraries and bookstores. They can be of great help, also.
The World Wide Web Project page at CERN Many of the links mentioned on this page can also be reached through The Project at CERN, as well as many others such as backgroung, future developments, HTML and Web software, and much, much more.
A good book for the advanced HTML writer is Spinning the Web by Andrew Ford. Although this book is expensive ($30.00 at Barnes and Noble bookstores) and contains alot of information about running a Web server, it tells about the technical language behind HTML, SGML, URLs, Fill-out forms, Image maps, and more.
|
1000 Morris Ave. |