This is a brief HTML demo page to get you started writing your own home pages. It includes features implemented in Netscape enhanced 2.0 HTML.

To see the HTML codes that generated this page, in Netscape you should choose View/Document Source from the menu bar. The Demo document will be saved to your local disk (Learning Resources Center users see note below) and a viewer application (Simple text or a word processor) opened. You can specify the viewer application in Netscape (Options/General Preferences/Applications option; Screen settings see figure). Here, Word 5.1 is selected. Use the Browse... button in this dialog to pick what application you want. Leave the Use Netscape option button unchecked.

Once you have the codes showing, the easiest way to study them is to have both windows (Word and Netscape) open at the same time so you can see the raw codes and the formatted results. When you are ready to start your own page, feel free to copy and paste any of the codes that you want from the Demo document. To link local documents (see below) it is easiest if they are in the same folder as the main HTML page.

Table of Contents:








Text Formating:

Regular text shows up in the default font and size selected by the browser (Netscape or others) so you don't have to do anything to it to make it readable. Here are some examples of other text formats you can use on a WWW page:

 

Header - size 2


Header - size 3...


all the way to Header - size 6


You can also have bold, italics, and blinking.

Text can be proportional and also fixed width.

Text can be centered.


And you can use a combination of these attributes.


 

Lists have their own flexibility:


  1. Or they can be numbered.
  2. Or they can be numbered
    1. Or they can be lettered
    2. Or they can be lettered
  3. Or they can be numbered


Horizontal Lines:


Lines help to set apart topics and can have different thicknesses as well as
darkness.

Linking Documents:

The powerful thing about HTML is how it lets you link one part of your page to other parts of the same page and to other local (on your computer) and external pages (those with other addresses).

  1. Here is an example of an internal link. This same technique was used to do the Table of Contents for this Demo document
  2. Here is an example of a link to an outside address, in this case "www.bio.GeorgiaSouthern.edu".
  3. Here is an example of linking to a specific page at an address on our home page. The address is www.bio.georgiasouthern.edu/amain/careers.html
  4. Here is an example of a link to a specific place in an external file. The placeholder in the faculty list file is labeled "#RTFToC5".
  5. Here is a link to a local graphic that is a GIF format file..
  6. Now load this JPEG file to see the difference in how they load to the screen.

     

Little-gif.GIF You can also insert graphics right in the document and align them on either side or center. Here is a small GIF aligned on the right.

 



Here is the graphic again but it is also "clickable" now so that another graphic loads when the small one is selected.

Little-gif.GIF

 

Here is where you jump when the internal link (#1 above) is clicked. Use the Back button in Netscape (or scroll the screen up) to go back up to where you were... or you could click here.



Tables:

Tables are another advanced topic... A basic table looks like this:

A BASIC 3X2 TABLE

A B C
D E F

... and the HTML code looks like this:

<TABLE BORDER>
	<TR>
		<TD>A</TD> <TD>B</TD> <TD>C</TD>
	</TR>
	<TR>
		<TD>D</TD> <TD>E</TD> <TD>F</TD>
	</TR>
</TABLE>


You can also use a table for framing

A link to a lot of table tutorial information available here.


Backgrounds:

Last but not least, notice the background of this page. The command is at the top of the Demo file:

<BODY BACKGROUND="Spotted-Background.JPG">

Here is more background tutorial info.


Links to other HTML sources:



Well - that's it for the basics. Extensive HTML guidelines are available all over the WWW. Here is a link that "Googles" 'HTML tutorial'.

Lots of Web design applications are available. Some are free - here is SeaMonkey. While a word-processor works just fine for simple HTML editing (be sure to save the file as "text"), I prefer a specialized application such as BBedit.

Server extensions add additional features to HTML - for instance, making "live" insertions in a page (the time is currently 5:45:26 PM). We do this by using the now discontinued program Netcloak on our server. Here is a tutorial.

Have fun!

J.B. Claiborne (note how the "mailto" is used here)

 



Last update: Wednesday, July 15, 2009

Return to the Department of Biology Home Page