Creating Basic Web Pages

Getting Started on your HTML Document

It is easiest to change your text into a web page if you do all of your proofreading, spellchecking, editing of the content before beginning to add the tags (or HTML codes). When you have finished with the content in your regular word processor, go to "Save As..." and select "Text" or "ASCII". Before saving, rename your file with an appropriate file name with the suffix html added: "filename.html". The next step is to open this document up in a simple text editor. Examples of programs to use on the Macintosh are SimpleText, BBedit; on IBM compatibles, use WordPad.

Once you begin the process of marking up, or placing the tags (HTML codes) into your document, the typical process is to put some of the tags in using your text editor, save it to your hard drive, then use your favorite web browser to open the file to see how the tags have affected your text. After viewing it in the web browser window, you return to the text editor, and put some more HTML tags in. Then save it and view the changes by reloading the file off the hard drive. And so on, and so forth, back and forth editor, browser, editor, browser until you are satisfied. The biggest dangers to warn against?

Be sure that you save the file each time in the text editor - and that you know where you saved it.
Remember to click reload each time you go to the browser.
If you have other files that are referenced in your tags (like pictures) make sure that they are in right place respective of where your .html document is saved.
If you are moving files between Windows machines and Macintosh machines, you may find that the browser will not be able to open your HTML file on the other platform's disk, you may need to copy it over to the computer's hard drive. (this is because the directory structure is slightly different)
Also, if you are opening a Window's text file on a Macintosh, you may see see a bunch of boxes- these are line feeds- don't worry, they won't show up in the browser.

The Minimal HTML Document

Every HTML document should contain certain standard HTML tags. Each document consists of head and body text. The head contains the title, and the body contains the actual text that is made up of paragraphs, lists, and other elements. Browsers expect specific information because they are programmed according to HTML and SGML specifications.

Required elements are shown in this sample bare-bones document:

The required elements are the tags (and their corresponding end tags). Some browsers will format your HTML file correctly even if these tags are not included. But some browsers won't!

This page shows a simple HTML 2.0 document broken down into the source code on the left and the results (more or less) on the right.

When this column is the code...

You will see this column...

<HTML>

<HEAD>

<TITLE>Web Authoring</TITLE>

Netscape: Web Authoring
(This will appear in the title box of the browser window)

</HEAD>

<BODY>

<H1>I like learning!</H1>

I like learning!

<h2>With text...</h2>

With text...

<h4>...and other things</h4>

...and other things

<HR>

<HR SIZE=8>

I can <em>emphasize</em> things, 
and I can make things 
<strong>stronger</strong>.<p>

I can emphasize things, and I can make things stronger.

Extra          spacing     
    doesn't         
         matter.<p>

Extra spacing doesn't matter.

An inline image <IMG SRC= 
"gopher.gif"
ALIGN=BOTTOM> can be inserted
wherever I want.<P>

An inline image

can be inserted wherever I want.

The alignment of the image
<IMG SRC="gopher.gif"
ALIGN=TOP> can
be adjusted, too.<P>

The alignment of the image

can be adjusted, too.

<DL>
<DT>Definition lists:
<DD>Can be useful.
</DL>

Definition lists:: Can be useful.

<OL>
<LI>Ordered lists
<LI>Number things
<LI>As you go, automatically.
</OL>

Ordered lists
Number things
As you go, automatically.

Lists can be &quot;nested&quot; for 
greater effect:<P>
<MENU>
<LI>Many Topics Have Subtopics
<UL>
<LI>Like this one
<LI>(it has two)
</UL>
<LI>But Some Topics Stand Alone
</MENU>

Lists can be "nested" for greater effect:

Many Topics Have Subtopics

Like this one
(it has two)

But Some Topics Stand Alone

In some cases, a line break is 
better than a paragraph break:<P>
Mr. U. R. Linebreaker<BR>
1 Main St., Davis, CA 95616<P>

In some cases, a line break is better than a paragraph break:

Mr. U. R. Linebreaker
1 Main St., Davis, CA 95616

Hypertext links are useful, as 
in:<BR>
You can <A HREF="http://little.fishnet.net/~gini/cool/">get free 
graphics for your webpage in</A> 
now.<P>

Hypertext links are useful, as in:
You can get free graphics for your webpage now!

Local links are useful, too:<BR>
You can <A HREF="#here">go to the 
next sentence</A> now.<P>

Local links are useful, too:
You can go to the next sentence now.

<A NAME="here">The next 
sentence.<P>

The next sentence.

Pictures may stand alone:<BR>
<IMG SRC="gopher.gif" ALT="(a 
gopher)"><P>

Pictures may stand alone:
(a thought)

Or be links:<BR>

<A HREF="mascot.html"><IMG 
SRC="gopher.gif" ALT="(a 
gopher)"></A><P>

Or be links:

</BODY>

</HTML>

A Few Recommendations Concerning Images for the Web

There are two widely accepted formats for using graphics on your web page:

GIF: GIF images are limited to a 256 color palette. These files are nicely compressed and work best with images that are drawn or illustrated in such a way that they have continuous color areas as opposed to shades or gradient color areas. GIF images are the only file format that can be viewed as animations at this time without the use of Javascript or a special type of plug-in. GIF89 (a special type of GIF compression) has an additional feature that is widely used: transparency. Transparency allows a picture to sit on top of another picture or colored background, and to have some of it's background declared to be tranparent or see-through. This means that if I have a textured background, and I want some words to sit on top of that texture with only the letters visible, the background space in the letter "O" can be specified as the transparent color and you will see your texture through the middle of the "O".
JPEG: JPEG images are more taxing on the client's (or web browser's) computer, but can accomodate many more colors than a GIF in a relatively small file size. This compression scheme lends itself more to photographs or illustrations that have colors that run in gradients, such as a shadow or variation of a red color and a blue blending together in the middle to form purple.

Images may be used as backgrounds for an entire web page with tag: BODY BACKGROUND="file name.gif" included right in the BODY tag at the being of the document. This will cause the image referenced to be tiled or repeated throughout the document's background. Alternately, you can add a background color to the BODY tag by following BODY with BGCOLOR="#0000FF" The six characters following the # sign are known as hexadecimals. These characters come in three pairs with (in order) the three colors of the electron guns used in computer monitor "Red" "Green" and "Blue". 00 means completely off, so 000000 means all guns off, resulting in the absence of the monitor flourescing- which would be black. 0000FF would result in no red, no green, full on blue - so the page would have a blue color. White pages are created with FFFFFF. There are handy utilities that will generate appropriate codes for colors that you select- I frequently use a freeware one for the Mac called Colormeister...

The chief objective in creating and using graphics on in your web page is to make the file size as small as possible, while retaining a quality color depth and physical size of the graphic that it complements your page or communicates what you want. Ideally, graphics should be less than 40 K. Thumbnails (postage stamp sized copies of the original picture) are often used as links to the full-sized graphic on a new page, when the full sized graphic is real big. However, another concern is how many seperate files are transmitted as a page downloads, since each one of the files requires as seperate connection to the server.

Ed Tech Thoughts from the Space Coast