Editing and Previewing

Basic Procedures

The mechanics of producing Web pages, at it’s simplest, is to make changes to an XHTML document with an editor then previewing those changes in a Web browser. We’ll learn these procedures by first setting up our tools, using the template.html document, then applying the steps to open, edit, save, and preview.

Let’s prepare the tools:

  1. Open your text editor;
  2. From within your editor, navigate to your Web Projects directory and open the template.html file you previously saved;
  3. Open your Web browser;
  4. From within your browser, navigate to your Web Projects directory and open the template.html file.

Here’s how the template.html file will look in your browser:

Browser View of template.html

This may not look very exciting to you right now but note three things:

  1. The comments are not displayed in the browser window;
  2. The text in the <title> tag is displayed in the title bar at the top of the browser;
  3. The browser window is blank because nothing has been entered between the <body> tags.

 

Starting a New Web Page

Remember that we are using the template.html document as a starting point for subsequent XHTML documents. This will save us some typing each time we create a new XHTML document.

  1. First, let’s create a new XHTML document with a new filename.
  • Go to your text editor;
  • Select File;
  • From the drop-down menu, select Save As…;
  • In the Save As… dialog box, type in a new filename (type in experiments.html) and select the Save button;

    We now have a second, new XHTML document in our Web Projects folder named experiments.html.

  1. Second, let’s open up experiments.html in our Web browser so we can preview our changes.

We now have everything prepared to begin creating our very first Web page!

 

Editing and Saving the XHTML Document

Adding, editing, and formatting text is done between the opening and closing <body> tags. Let’s go over the basics by making some simple changes to our experiments.html document.

  1. First, let’s change the title of our page by typing in My Experiments Page between the opening and closing <title> tags.
  2. Second, type in Welcome to My First Web Page! between the opening and closing <body> tags.

After you’ve entered in this new information, this is what you should see in your text editor:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>My First XHTML Page</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
<!-- INFORMATION TO BE DISPLAYED BEGINS ON THE NEXT LINE -->

Welcome to My First Web Page!

<!-- INFORMATION TO BE DISPLAYED ENDS ON THE PREVIOUS LINE -->
</body>
</html>

Save the document when you’re finished.

 

Previewing Changes

Switch to your Web browser (which should still have experiments.html loaded) and select the Refresh/Reload button or press the F5 key.

You should now see the changes you made in both the browser’s title bar and window. If you see it, congratulations! If not, go back and retrace your steps.

 

Summary

Those are the mechanical basics of editing and previewing your XHTML documents. Here’s a quick review:

  • Use the template.html document as the starting point for new XHTML documents;
  • Open the XHTML document you are editing in both the text editor and the Web browser;
  • After making changes to your XHTML document, Save the document before previewing;
  • To preview changes in the Web browser, select the browser’s Refresh/Reload button.

We will now begin formatting XHTML documents in the next section entitled Text Flow.

 

<XHTML Template ^Top of Page Text Flow >
XHTML Basics Workshop
© 1996-2005