Writing HTML | About | FAQ | Alumni | Tags | Index | previous | next |

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 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 web 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? if you read the introduction you would know!), 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 web 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 page. It is important to note that the ending tag,

    </tag name>

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

NOTE: A web browser does not care if you use upper or lower case. For example, <h3>...</h3> is no different from <H3>...</H3>

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 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 web 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

If you are just starting out, we most STRONGLY recommend that you use the simplest text editor available- SimpleText/TeachText for the Macintosh or the Windows NotePad. Why not use those nifty HTML editors? It is sound instructional design that you first learn the concepts and THEN look for shortcuts or helpers that make the work less tedious.

Also, it will help you if you first create a new directory/folder on your computer that will be your work area. You can call it workarea or myspace or whatever you like; just make sure that you keep all of the files you create in this one area. It will make your life simpler... well, at least while working on this tutorial!

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 web browser will word wrap all text):
```
     <html>
     <head>
     <title>Volcano Web</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 a file called "Volc.htm" and keep it in the "work area" folder/directory you set up for this tutorial. Also, if you are using a word processor program to create your HTML, be sure to save in plain text (or ASCII) format.
NOTE: For Windows 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.htm
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 web 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.htm"
You should now see within the workspace window "Volcano Web" 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?
Where is the text of the title tag displayed?
What steps are involved in creating a simple HTML document?
How can you display your HTML document in a web 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 web browser. Keep this file handy as you will add to it in later lessons.

Coming Next....

Your first web 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 | back: "Standardly Speaking" | next: "Modifying HTML" |

Writing HTML Lesson 1: Creating Your First HTML Document

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

URL: http://www.mcli.dist.maricopa.edu/tut/tut1.htm