Writing HTML | About | Index | previous | next |

Creating Your First HTML Document

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

Objectives

After this lesson you will be able to:

Identify the meaning and purpose of HTML tags.
Open up a workspace for creating new World Wide Web documents.
Create the basic structure for any World Wide Web document in HTML format using a text editor.
Open your document within your WWW browser to see how it is displayed.

Lesson

Now that you think you know what HTML is (quick quiz- what do those letters stand for?), let's start using it.

What are HTML tags?

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

     <tag name>string of text</tag name>

As an example, the title for this section uses a header tag:

     <h3>What are HTML tags?</h3>

This tag tells a WWW browser to display the text What are HTML tags? in the style of header level 3. HTML tags may tell a web browser to bold the text, italicize it, make it into a header, or make it be a hypertext link to another web [age. It is important to note that the ending tag,

    </tag name>

contains the "/" slash character. This "/" slash tells a WWW browser to stop tagging the text. Many HTML tags are paired this way. If you forget the slash, a WWW 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.

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 tree carnage).

Here are the steps for setting up your workspace:

From the File menu of your web browser, select New Window. A second web should appear. Think of the first window as your "textbook" and the second clone window as your "workspace" for completing the HTML lessons.

NOTE: Not all web browsers support multiple windows. The only reason to have two windows here is so that you can read the instructions for the lessons and also view your working document.
Next, you need to jump out of the WWW browser and open your text editor program.

NOTE: You will need to move back and forth between the different windows to complete these lessons. This can be a challenge depending on the size of your monitor. You may choose to resize the three windows so that they all fit on your screen or layer your windows so you can click on any of them to bring it to the front.
If you are using a word processor program to create your HTML, be sure to save in plain text (or ASCII) format.

Creating Your HTML Document

An HTML document contains two distinct parts, the head and the body. The head contains information about the document that is not displayed on the screen. The body then contains everything else that is displayed.

The basic structure then of any HTML page is:

  <html>
  <head>
     ** [header info used by some web servers, not displayed] **
  </head>

  <body>
    ** [all the HTML for display] **
          :      :
          :      :
          :      :
  </body>
  </html>

Enclose all HTML work within an <html>....</html> tag. Note that your web pages will display fine on most computers without any of these tags. However by using them, your web pages will be fully compliant with International HTML standards and ensure compatibility with future web browsers.

It's good habit, like brushing your teeth.

Here are the steps for creating your first HTML file. Are you ready?

Go to the text editor window.
Enter the following text (you do not have to press RETURN at the end of each line; the WWW browser will word wrap all text):
```
     <html>
     <head>
     <title>Volcanoes!</title>
     </head>
     
     <body>
     In this lesson you will use the Internet to research 
     information on volcanoes and then write a report on 
     your results.
     </body>
     </html>
```
NOTE: Look where the <title>...</title> tag is located. It is in the <head>...</head> portion and thus will not be visible on the screen. What does it do? The <title> tag is used to uniquely identify each document and is also displayed in the title bar of the browser window.
In lesson 3 you will learn how to add a title that will appear directly on your web page.
Save the document as "Volc.html" If you are using a word processor porgram to create your HTML, be sure to save in plain text (or ASCII) format.
NOTE: For Windows 3.1 users, by DOS convention, you will have to name all HTML files with extensions of .HTM Your web browser will recognize them even when HTML refers to a file called file.html
By using this file name extension, a web browser will know to read these text files as HTML and properly display the web page.

Displaying Your Document In a WWW Browser

Return to the window you are using for your work space.
Select Open File... from the File menu.
Use the dialog box to find and open the file you created, "Volc.html"
You should now see within the workspace window "Volcanoes!" in the title bar and the HTML text you created displayed in WWW format underneath.

Check Your Work

Compare your document with a sample of how this document should appear. After viewing the sample, use the back button on your web browser to return to this page.

If your document was different than the sample, review the text you entered in the text editor. A common mistake is "I cannot see the title!". The text within the <title>...</title> tag is NOT displayed on the web page; you will likely see it in the titlebar of the web browser window

Review Topics

What are HTML tags?
Why can you not see the title if you entered a title tag?
What steps are involved in creating a simple HTML document?
How can you display your HTML document in a WWW browser?

Independent Practice

Think of a topic for your own web page. Now create your own HTML text file that includes a <title> tag and a few introductory sentences. Save the HTML file and reload it in your WWW browser. Keep this file handy as you will add to it in later lessons.

Coming Next....

Your first WWW page is done!

But, to be honest, it is pretty short and not very exciting! In the next lesson you will modify and update your HTML document.

GO TO.... | Lesson Index | previous lesson "Standardly Speaking" | next lesson "Modifying HTML" |

Writing HTML Lesson 1: Creating Your First HTML Document

The Internet Connection at MCLI is Alan Levine --}
Comments to levine@maricopa.edu