Writing HTML | About | FAQ | Alumni | References | Tags | Lessons | previous | next |

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:

Lesson

Re-opening Your Workspace

Note: If you do not have the document from the previous lesson, download a copy now.

To complete this lesson, you will need to create a second window and re-open the text editor window you used in the first lesson. Here are the steps for re-opening your workspace:

  1. If not open, create a new 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 this point on, we will assume that you can easily re-open your workspace.

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: 
    
          A volcano is a location where magma, 
          or hot melted rock from within a planet, 
          reaches the surface. It may happen violently, 
          in a massive supersonic explosion, or more 
          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.

  3. 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 ignored the extra blank lines that you entered. However, you may want to use blank lines, extra spaces, and the comment tags we saw in lesson 1 to make your HTML files more readable in your text editor.

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 "Volc.html" or "Volc.htm" file right into your web browser window. Voilà! your page will display if your computer supports drag and drop operations (We know it works for Macintosh System 7.5 and Windows 95.)

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.

Coming Next....

Now that you have an understanding of the editing process, we will add big and beautiful section headings to your HTML documents.

GO TO.... | Lesson Index | back: "Creating HTML" | next: "Headings" |

Writing HTML Lesson 2: Modifying an HTML Document

©1995, 1996, 1997 Maricopa Center for Learning and Instruction (MCLI)
Maricopa Community Colleges, Arizona

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

URL: http://www.mcli.dist.maricopa.edu/tut/tut2.html