1. Creating Your First HTML Document

You are about to embark on a journey that will transform you from a mere Internet Surfer of the Web to an Internet Author of Multimedia!

Objectives

After this lesson you will be able to:


Lesson

Now that you know what HTML is, let's start using it.

When a web browser displays a page such as the one you are reading now, it reads from a plain text file, and looks for special codes or "tags" that are marked by the < and > signs. The general format for a HTML tag is:

contains the "/" slash character. This "/" slash tells a web browser to stop tagging the text. Many HTML tags are paired this way. If you forget the slash, a web browser will continue the tag for the rest of the text in your document, producing undesirable results (as an experiment you may want to try this later).

Unlike computer programming, if you make a typographical error in HTML you will not get a "bomb" or "crash" the system; your web page will simply look, well... wrong. It is quick and easy to go inside the HTML and make the changes.

Opening Up Your Workspace

To complete the lessons in this tutorial, you should create a second web window (this allows you to keep this window with the lesson instructions and one window as your "workspace"), plus open your text editor application in a third window.

So you will want to be pretty comfortable jumping between different applications and windows on your computer. Another option is to print out the lesson instructions (but we really do not want to promote that kind of excessive tree carnage).



Creating Your HTML Document


The basic structure then of any HTML page is:

The very first line:

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">


Formatting Text

Probably the most versatile text formatting tag is the < font ></ font > tag
The font tag not only allows the color and size of text to be selected but also allows specific fonts to be selected
An example of the font tag
< font face="arial"> this is the arial font face</ font >


Change the color



< font face="arial" color="#FF0000"> this is the arial font face</ font >

Change the size -- choose from 1 of 6 sizes
< font size=6 color="#FF0000"> size 6 </ font >

size 5
size 4
size 3
size 2
size 1


The font tag gives enough flexibility to allow html authors to specify a 'back up' font

<font face="georgia, times new roman, arial"> alternativefonts</ font >

in the example above the browser will attempt to render text in the georgia font, if the georgia font is not installed the browser will attempt to render text in the times new roman font and if that is unavailable the browser will search for the arial font

the following 12 fonts are installed on both pc and mac and are considered as 'safe'
arial, arial black, comic sans ms,
courier, courier new, georgia,
helvetica, impact, palatino,
times new roman, trebuchet ms, verdana



Tables



Harrisopolis Clarkhart Landing Bridgedale
Hilvale Woods Chatville Falls Kentland
Beachton Woods Beechbridge Ironvale
Circletown Landing