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:

• Identify the meaning and purpose of HTML tags.
• Open up a workspace for creating new HTML documents.
• Use a text editor to create the basic HTML structure for any web page.
• Insert non-displayed comments into your HTML files.
• Open your document within your web browser to see how it is displayed.

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:

     <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 (We'll learn more about these tags later). 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.

Your browser has a small but open vocabulary! An interesting aspect of HTML is that if the browser does not know what to do with a given tag, it will ignore it! For example, in this document you are viewing, the header tag for this section really looks like this:

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

but since your browser probably does not support a <wiggle> tag (I made it up, perhaps in the future it could cause the text to wave across the screen?), it proceeds with what it knows how to do. If I were programming a new web browser, I might decide to add the functionality for the <wiggle> tag into my software.

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.

NOTE: This is a good place to remind you that we will provide directions that are somewhat general as the menu names and file names can differ depending on which web browser you are using. If our instructions say, "Select Open Location... from the File Menu" and your web browser does not have that exact choice, try to find the closest equivalent option in your own web browser.

In some web browsers (notable Internet Explorer), a new browser window opens with either a copy of the page you are viewing or your home page. Just ignore that for now, we will load new content in it below.

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

Here are the steps for setting up your "workspace":

1. From the File menu of your web browser, select New Window or New Web Browser (The exact name of the menu command can be different depending on what browser you are using). A second web window should appear. Think of the first window as your "textbook" and the second clone window as your "workspace" for completing the HTML lessons.

NOTE: 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. It is not mandatory to have two windows open; it just makes your work easier. You could also bookmark this web page or jump back here via your Go or History menu.

2. Next, you need to jump out of the web browser, go to your desktop 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.

If you are just starting out, we most STRONGLY recommend that you use the simplest text editor available -- TextEdit for the Mac OSX (but you need to know how to save files as Plain Text-- as an alternative, Mac users can download the free and wonderfully simple Plain Old HTML Editor) 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!

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 as part of the web page.                  The basic structure then of any HTML page is:

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

  <html>

                                     <head>

  <!-- header info used to contain extra information about

       this document, not displayed on the page
                                    -->

  </head>

 
                                    <body>

  <!-- all the HTML for display -->

          :      :

          :     
                                    :

         
                                    :      :

  </body>

  </html>

The very first line:

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

is not technically required, but is a code that tells the browser what version of HTML the current page is written for.

Enclose all HTML content within <html>...</html> tags. Inside is first your <head>...</head> and then the <body>...</body> sections.

Also note the comment tags enclosed by <!-- blah blah blah -->. The text between the tags is NOT displayed in the web page but is for information that might be of use to you or anyone else who might look at the HTML code behind the web page. When your web pages get complicated (like you will see when we get into tables, frames, and other fun stuff about 20 lessons from now!), the comments will be very helpful when you need to update a page you may have created long ago.

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

1. If it is not open already, launch your text editor program.
2. Go to the text editor window.
3. 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):

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

5.                <html>

6.          
                                         <head>

7.                <title>Volcano Web</title>

8.                </head>

9.          
                                         <!-- written
                                    for the Writing HTML Tutorial

10.            by Lorrie Lava, February 31, 1999       -->

11.      
                                         <body>

12.            In this lesson you will use the Internet to research 

13.            information on volcanoes and then write a report on 

14.            your results.

15.      
                                         </body>

16.            </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 string of text for a title that will appear directly on your web page.

Also note that we have inserted a comment tag that lists the name of the author and the date the document was created. You could write anything in between the comment tags but it is only visible when you look at the source HTML for a web page.

17. Save the document as a file called "volc.html" 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 3.1 users, you must save all of your HTML files with names that end in .HTM, so in this case your file should be VOLC.HTM. Do not worry! Your web browser is smart enough to know that a file that has a name that ends in .HTM is an HTML file.

You can create files with names like VOLC.HTML if you use Windows95 or a later Windows operating system.

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

1. Return to the web browser window you are using for your "work space". (If you do not have a second browser window open yet, select New Window or New Browser from the File window.)
2. Select Open File... from the File menu. (Note: For users of Internet Explorer, click the Browse button to select your file)
3. Use the dialog box to find and open the file you created, "volc.html"
4. You should now see in the title bar of the workspace window the text "Volcano Web" and in the web page below, the one sentence of <body> text you wrote, "In this lesson..."

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 from the sample, review the text you entered in your text editor.

A common mistake we hear is, "I cannot see the title!" You shouldn't! The text within the <title>...</title> tag is NOT displayed on the web page; you should see it in the title bar of the web browser window.

The most common mistake that beginners make here is that they try using a word processing program to type HTML and then are unable to open it in their browser, or if it does, the page is full of odd garbage characters. When you are starting out, we urge you to use the most basic text editor. Look for shortcuts later!

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. You might want to create a different folder/directory for this file so you do not get it mixed up with all of the volcano pages you will create for this tutorial.                                                                        Keep this file handy as you will add to it in later lessons.

___________________________________________

2. Modifying an HTML Document

Now that you have created your first HTML document, you will learn how to swiftly make changes in your document and view the updates within your web browser.

Objectives

After this lesson, you will be able to:

• Re-open the workspace for your web page.
• Make changes in your HTML document using the text editor.
• Reload the document in your web browser to see your changes.

Re-opening Your Workspace

To complete this lesson, you will need to create a second web browser window and re-open the text editor window you used in the first lesson. Here are the steps for re-opening your workspace (remember that the exact name of the menu commands may be different depending which web browser you are using):

1. If not open, create a new web browser window by selecting New Window from the File menu.
2. Use the Open File... command from the File menu to find and open the HTML file you created in the previous lesson.
3. Re-open your text editor program.
4. In the text editor, open the file ("volc.html") you created in the previous lesson.

NOTE: If you are using Windows 3.1 computer then your file should be named "VOLC.HTM". From now on, we will assume that you can easily re-open your workspace in this manner.

Making Changes in Your HTML Document

1. Go to the text editor window.
2. Below the text you typed from the previous lesson, press RETURN a few times and type the following text:

3.            
                                     

4.                       A
                                    volcano is a location where magma, 

5.            
                                              or
                                    hot melted rock from within a planet, 

6.                       reaches
                                    the surface. It may happen violently, 

7.                       in
                                    a massive supersonic explosion, or more 

8.                       quietly,
                                    as a sticky, slow lava flow. 

Note that this text should be above the </body> and </html> tags at the bottom of your HTML file.

9. Select Save from the File menu to update the changes in your HTML file.

Reloading the Document in your Web Browser

Return to the web browser workspace where the previous version of your file was displayed. Note that the new text you entered in the previous steps may not yet be visible. To see the changes, use the Reload button or menu item in your web browser. This instructs your web browser to read in the same HTML file and display it with whatever changes have been made. You should now see the new text that you entered.

Note that the web browser ignores all blank lines and extra spaces (carriage returns) that you enter in the HTML file. It will also ignore any extra space characters (beyond the one between words). However, when you are writing HTML, it will help you greatly to separate major sections by some blank lines... when you need to go back and edit content, it makes it easier to locate the correct location to make the changes.

Of course, there will be times that you want your web pages to have blank space between sections (e.g. between paragraphs). You just passed a location in this very page! In Lesson 4 we will learn how to do this.

Drag and Drop Bonus!

There may be an easier way for you to load and view your HTML pages. You will have to arrange your computer desktop so that you can see the icon for your HTML files adjacent to your web browser window. Simply click and drag the icon for your "vol.html" or "vol.htm" file right into your web browser window. Voilà! your page will display if your computer supports drag and drop operations (It works for operating for Macintosh OS 7.5 and Windows 95 or newer).

Check Your Work

Compare your document to this sample of how this document should appear. If your page looks different than the example, review the text you entered in the text editor. Make sure it matches the text instructions in the Making Changes in Your HTML Document section of this lesson.

Review

Review topics for this lesson:

1. How did you re-open your workspace?
2. What steps did you use to make changes in your HTML document?
3. How did you display and view these changes in your web browser?

Independent Practice

As you did in the lesson, modify your own HTML document that you started in the last lesson. Add a few more sentences and see if you can successfully reload the modified document into your web browser.