This document has been modified to have hyperlinks to the various URL's listed as well as examples of what the HTML commands do within a document.

1. Writing HTML documents

   The best way to start learning HTML is by looking at the source code documentation of a document on Netscape. How? In Netscape, go to the VIEW pull-down menu, and click on "Source". This will show you how the document looks in HTML. Then, basically, you can just do what they do to achieve a desired effect.

   Using HTML Assistant is very easy. You should be able to become quite proficient in a short time.

2. HTML Editors

   There are a number of HTML editors that you can download. For a listing, check one of the web search engines.

   HTML Assistant, version 1.4 is a useful free program. It should be available in the campus computer labs.
   (Or bring me a blank diskette and I can give you a copy.)

   If you have your own computer at home, using WordPerfect 6.1, you may also wish to investigate WordPerfect Internet Publisher (WPIP), which can be downloaded from the COREL site (again, check the search engine for an address).

   WPIP works with WordPerfect 6.1 as a template. Basically, all you have to do is type a document in WordPerfect, press the HTML button, and it will be converted to HTML and shown to you in Netscape. Drawbacks: It uses the old version of Netscape (but you can adjust this). It also does not allow for some of the fancier bells and whistles of HTML-3 (colored text and backgrounds, patterned backgrounds, etc.). However, it simplifies the task of getting your lecture notes on line to use WPIP with WordPerfect. You can always open the .htm document it creates using another web editor (such as HTML Assistant), and adding those touches that you wish to add (and changing anything that does not look the way you want it to). At any rate, I recommend WPIP, but it is not a substitute for learning HTML unless you don't mind being limited or constricted. It would work fine for beginners who do not want to add the fancier touches. Hopefully an updated version will be available soon.

3. The basics of HTML

   You will benefit greatly from keeping a brief listing of the major HTML commands at your side as you write your documents. (One is included in these workshop notes.) You should also print out some HTML guides that are available on line. A good one is "A Beginners Guide to HTML", available from:
   http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html

   Extensions to HTML can be learned from:
   http://www.netscape.com/assist/net_sites/html_extensions.html

   There are likely to be new versions appearing all the time. You may also buy a book if you wish, but at $30 - $40 each, it is easier to print out a useful version from the Web.

   HTML commands consist of codes which are placed in < >, and can be upper or lower case or both. Extra spaces are generally ignored (except in http addresses, anchors and links, which specify locations).

   1. Codes for text appearance etc.
      The basic way these work is that you have a code at the beginning of a line that turns on a feature, such as <b> for bold, and then at the end of the part you want bold, you turn it off by adding a / like this </b>. Think of it as saying "end bold" when you add the slash, which means "end". This format works for various heading (or font) sizes as well.

      <Title>Your title</Title> - every document needs one

      <B>Bold</B>

      <I>Italics</I>

      <U>Underline</U>

      <H1> The largest header or font size for major headings </H1>

      <H2> For subheadings </H2>

      on down to

      <H6> Small text </H6>

      <PRE>preformatted text</PRE>

      <CENTER>Centered text</CENTER>

      <BLINK>Blinking text</BLINK>

   2. Codes for outlines and lists

      HTML works extremely well for items in lists, or in outline format.
      There are three main types of lists:

      1. Ordered (or numbered) lists. You can also specify TYPE=A or a for lettered lists. Roman Numerals are TYPE = I or i.
         <OL> at beginning of list
         <LI> Each item in the list starts with this code
         <LI> Another item
         </OL> at end of list

         Example of Ordered Lists

      2. Unordered (or bulleted) lists
         <UL>at beginning of list
         <LI>Each item in the list starts with this code
         <LI>Another item
         </UL> at end of list

         Example of Bulleted Lists

      3. Descriptive lists (hanging indents) - useful with glossaries
         <DL>at the beginning of the list
         <DT>Not indented. Used with a word or term to be defined.
         <DD>Indented. Used for the definition of the word or term above.
         </DL>at the end of the list

         Example of Descriptive Lists

   3. Single symbol terms
      <P> Paragraph break. Skips a line.
      <BR> Line Break. Go to next line without skipping a line.
      <HR> Hard Rule. Draws a thin line across the page.
      The thickness of the line can be adjusted using
      <HR SIZE=number>
      The length of the line can be adjusted using
      <HR WIDTH= number of pixels or percent>

      Example of Hard rule size and width

   4. Inserting graphics

      To draw a colored line, add a colored ball, arrow, icon, photos, artwork, etc., use this command:

      <IMG SRC = "logo.gif">

      where "logo.gif" is the address of an image in .gif format.
      You can also have .jpg images.
      You will need to have a .gif file in the same directory as the current document, or specify its address if it is elsewhere.
      I recommend having a separate subdirectory for images, but you can put them where you need them.

      Where do you get graphics?

      Don't take copyrighted images.
      You may specify an http address for images, which will download directly from another site.
      Gif files may be downloaded from virtually any source on the Web for educational purposes, but know what the fair use policy is.
      Graphic images may be edited using L-view (a free software program I can give you or you can download), which I learned to use by trial and error very easily. I have not seen any documentation for it.

      To draw colored lines or rainbow lines, you will need to find a source on the Web.
      These are graphic images (gif files).
      Clip art, colored balls, arrows, and other things are available, free for the downloading.
      There are many such sources, that I have located through Yahoo (http://www.yahoo.com), under computers, multimedia.
      Here is one:

      http://www.itec.sfsu.edu/multimedia/multimedia.html

      Animated gifs may be obtained from the following sites:

      http://www.intergalactinet.com/html/animatedgifs.shtml
      http://web2.airmail.net/nicktg/moving/index.html
      http://www.iea.com/~lmartin/gramps_favorite.html

      Graphics may be obtained from a number of sources. The easiest way to get an image is to download it. I recommend downloading images onto a disk in A-drive so you don't clutter and fill your hard disk. Use the right mouse button for saving .

      You can get into L-view and pull up your graphics image to view or alter before putting it into your document. You may resize it or crop it or change the colors. Once it looks like you want, save it to another file name. (This allows you to keep the original, if you want to make further use of it). Note what you have called it. It must end in .gif

      When you are ready to call an image into an HTML document, use the IMG SRC image source command, shown above.

   5. Hypertext links

      <A HREF="the URL address">Words to appear in blue</A>

      The URL is in quotation marks.
      <A HREF= > tells the hypertext to go to this address
      </A> Tells where the hypertext is to end.
      It may be in either upper or lower case, or both.

      Here is an example.

      <A HREF="http://www.america.net/">Connect Atlanta</A>

      In this case, the words Connect Atlanta will appear as blue hypertext. When you click there, it will take you to the address given for that site.

      <A HREF = "http://url_address.htm">blue words </A> with .htm for documents created in Windows DOS text
      <A HREF = "http://url_address.html">blue words </A> with .html for documents created on UNIX machine

      
      This is great if you want a clickable table of contents at the beginning of your file, sending you directly to the proper chapter. This also helps you "return to top of file", or "return to table of contents", if needed for longer files.

      At place you want to go to, put:

      <A NAME = "keyword">

      At the place you want to link from, such as the bottom of a chapter (to go back to a Table of Contents), put:

      <A HREF = "#keyword">blue hypertext words, return to whatever </A>

      The # pound sign tells it that it is a place in the SAME DOCUMENT.

   6. Colors and Backgrounds

      To get a patterned or colored background, or different colored text, put this at the beginning after the title:

      <BODY BACKGROUND = "filename of background .gif or .jpg"
      BGCOLOR = "#six digit code"
      TEXT = "#six digit code" >

      You will have to see:
      http://www.phoenix.net/~jacobson/rgb.html
      or http://www.infi.net/wwwimages/colorindex.html
      for a listing of the various color codes. Backgrounds can be downloaded from a number of sites, or find a page which has one you like, look up its address .gif or .jpg (using document source), and download/save it using L-view.

4. General comments on style

   Use the largest possible fonts at the top of your file. Use large fonts for major headings, and smaller ones for subheadings.

   Have a clear heading area to your document. This is like a title page. Include document title prominently on the page. Include a graphic image if possible.

   At the end of your "Title page" area, which should not be more than several screen inches long, try to put a nice colored line to separate title from text.

   Try to keep all of the most important things that go together on a single screen - such as a table of contents. Adjust font size as necessary.

   Use outline format as much as possible to emphasize organization and flow.

   Don't include too many graphics, or overly large graphics, because these take a long time to load.

   Just before the end of your document, have a link back to your home page or the college home page, or some other major document you created. (Or several of the above.)

   At the end of your document, always put your name and address in italics. If it is a Georgia Perimeter College-related document, such as for your courses, always include the college name somewhere.

   Please put a line at the end in italics saying "Document last modified on such and such date".

5. The basics of HTML Assistant

   HTML Assistant works like most Windows programs with pull-down menus and toolbars. Most of it is self-explanatory. There is also a Help file if you need it.

   Pull Down Menu Bar
   

   File - Start a New document or Open an existing file
   Options
   URL
   Help
   
   Tool Bar
   Hidden toolbar (click on the T at the right of the tool bar)
   Editing window
   
   Here is where you save your document. Note Save button.
   
   Once you open the editing window, the Pull Down Menu Bar changes.
   
   File - can have multiple files open at the same time
   Edit - move, copy, etc.
   Options
   HTML - more HTML commands
   Command
   URL
   Window - tile, cascade
   Help
   

   Most of these are self explanatory.

6. Testing your document in Netscape

   You will want to see how it looks.
   ALT-TAB from HTML ASST, to Netscape, and call up the document.
   It is easiest to go to the FILE menu and click on OPEN FILE.
   Browse for the address of your html file on the a-drive.
   Alternatively, you can type in a URL for your file.
   Your URL address for the file is

   file:///a:/filename.htm

   If you need to make adjustments, ALT-TAB between Netscape and HTML ASST.
   Be sure to SAVE your HTML document each time.
   When going BACK to Netscape after making changes, simply click on the RELOAD button.

7. Putting documents on-line

   DeKalb College has allocated a place on the College home page for student home pages. Check the Official DeKalb College Home Page for instructions under DeKalb Web Sites.

   http://www.gpc.edu/

   You will have to get into your e-mail account to do this.

8. Converting wordprocessor files to .htm files
   1. When you are in WordPerfect 6.0 or 6.1 for Windows, with your document open, go to the File Menu, and pull down. Click on "Save As".
      1. Name your document.
         Give it the suffix .htm
         This is a must.

      2. The bottom white bar is called "Format", and probably says WordPerfect 6.0 or 6.1.
         Click on the change button and use the scroll bar.
         Go up until you find "ASCII DOS Text".
         Click on this.
         Now go back to the rest of the "Save As" screen, and go to the "Drive" box.
         Click on A-drive where your disk is.

      3. Now go to the "Directories" box (slightly to the right of center.) Find your Netscape directory (and subdirectory, if any), and click on it. This is where your document will go.

      4. Now click on OK to save your document in DOS Text to your Netscape directory.

   2. Get out of your wordprocessor.

   3. Get into HTML Assistant (Hypertext Editor).
      1. Go to the File pull down menu.
         Go to Open.
         Be sure it is set on A-drive in the Drive box.

      2. Look at the directories and find your Netscape directory (and any subdirectories).

      3. Click on the directory (or subdirectory) to get the list of file names there.
         Look for the file you just saved.

      4. Click to open that file.
         Take a look at it to be sure you saved it properly.
         If you can read it, fine.
         If you can't, it means it was not saved in the proper format.
         Go back to WordPerfect and try again.

   4. Assuming you have made it this far, you are about to create your first HTML document for Netscape.
      1. Give your file a title. To do this, on the first line of your document, type

         <title>Your Document Title</title>

         What this does is turn on "title" and then turn it off.

      2. To make your document readable by Netscape, as is, without any further HTML commands added inside the document, do this:
         On the next line, at the beginning of the document, type
         <pre>
         on a line all by itself.
         This indicates that "preformatted text" is to follow.

      3. At the end of your document, turn off the "preformatted text" with this command

         </pre>

      4. That's all there is to it. Save it.

   5. Test it - see preceding section.

   6. Once the document is like you want it, your next step would be actually loading your HTML document onto your account so that it can be accessed by anyone with a computer on the DeKalb system. You will have to use certain permissions codes in your shell account to make sure that the public can access your pages.

For this class, you will need to turn in a disk with your working html document, as well as have a working web page accessible from the DeKalb student web site.

GOOD LUCK.

Remember, it's easy, and well worth the effort.

Return to Georgia Geoscience On-line.

Return to The World of Geology.

Page created by Pamela J. W. Gore

Modified by John R. Anderson