Writing HTML | About | Index | 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:

Lesson

What are HTML tags?

When a WWW 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 that looks like the following: 

     <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 WWW browser to bold the text, italicize it, make it into a header, or have it be a link to another document. It is important to note that the ending tag, </tag name> , contains the "/" backslash character. This "/" backslash tells a WWW browser to stop tagging the text. Many HTML tags are paired this way. If you forget the backslash, a WWW browser will continue the tag for the rest of the text in your document, producing undesirable results.

Opening Up Your Workspace

To complete the lessons in this tutorial, you will need to create a second window and open your text editor application. Here are the steps for setting up your workspace:

  1. From the File menu of your WWW browser, select New Window. A second window which contains the same information as the first window will be displayed. Think of the first window as your "textbook" and the second clone window as your "workspace" for completing the HTML lessons.

    NOTE: Not all WWW 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.

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

Creating Your HTML Document

  1. Go to the text editor window.
  2. 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): 
    
     <title>Volcanoes!</title> 
     In this lesson you will use the Internet to research 
     information on volcanoes and then write a report on 
     your results.
  3. Save the document as "Volc.html"
    NOTE: For Windows users, by DOS convention, you will have to refer to all HTML files with extensions of ".HTM"
    By using this file name extension, a WWW browser will know to read these text files as HTML and properly display the codes.

This simple file begins with the title tag, <title>Volcanoes of the World</title>. All HTML documents start with a title tag. This is the name a WWW browser will display in the title bar at the top of the browser window.

Displaying Your Document In a WWW Browser

  1. Return to the window you are using for your work space.
  2. Select Open Local... from the File menu.
  3. Use the dialog box to find and open the file you created, "Volc.html"
  4. 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 Mosaic back button to return to this page.

If your document was different than the sample, review the text you entered in the text editor. Make sure it matches the text instructions in this lesson.

Review Topics

  1. What are HTML tags?
  2. How do you "open up your workspace" when creating new HTML documents?
  3. What steps are involved in creating a simple HTML document?
  4. How can you display your HTML document in a WWW browser?

Independent Practice

Think of a topic for your own WWW 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 it is pretty short and not very exciting! In the next lesson you will modify and update your HTML document.

| Lesson Index | next lesson "Modifying HTML" |

Writing HTML Lesson 1: Creating Your First HTML Document
©1995 Maricopa Center for Learning & Instruction (MCLI)
Maricopa County Community College District, Arizona

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