Previewing and Debugging Your Web Page

Now that you have inserted something that is part of your page's body, you can preview it in your browser to see the result. The basic steps for previewing and debugging your Web page are the same no matter which platform you are working on:

Save your HTML file in your text editor. (Note: Pressing Ctrl+S will not work for saving a file in Windows Notepad; you must select File, Save, instead.)
Run your Web browser. If prompted to connect to the Internet, or if your dialer starts to connect, click on the Cancel or the Work Offline button (depending on which is displayed).
Open your HTML file in you Web browser to preview and debug it. (See below for specific instructions for opening HTML files on different platforms and in different browsers.)
Switch back to your text editor and make additions, revisions, or corrections. Resave your file.
Switch back to your Web browser, refresh the display of your page (click the Refresh or Reload button, or press Ctrl+R), and preview and debug the changes you just made.
Repeat Steps 3 and 4 frequently, to preview and debug your page as you create it.

Opening an HTML File in a Web Browser

The specific steps required to open a local HTML file in a Web browser can vary, based upon the browser, browser version, and platform that is being used.

Internet Explorer 6 for Windows: Select File, Open, and click the Browse button. Navigate to and double-click on an HTML file. Click OK to open it.

Internet Explorer 5 for the Macintosh: Select File, Open File, and navigate to and double-click on an HTML file to open it.

Netscape 6 and Mozilla 1 (Windows, Macintosh, or Unix/Linux): Select File, Open File, and navigate to and double-click on an HTML file to open it.

Opera 6/7 (Windows, Macintosh, Unix/Linux): Select File, Open, and navigate to and double-click on an HTML file to open it.

All browsers/platforms: You can also open a local HTML file in your browser by dragging it from its file window (in an Open dialog window, for instance) and dropping it onto your browser's window. Both windows need to be visible to drag and drop between them.

Figure 2.2 shows tutor1.html opened in a Web browser.

Figure 2.2: The H1 element defines the level-one heading (or displayable title) for an HTML document.