Home > Articles > Web Development > HTML/CSS

  • Print
  • + Share This

Getting Started

Bring up your favorite text editor. Any editor that can save your work as a text file should do. We like using the standard Windows Notepad program, since all files are automatically saved as text files, so we'll use that for this installment.


Your menus, dialog boxes, windows, and so on may differ from those shown in this tutorial. We've made these steps as generic as possible to accommodate various versions of Windows and other products.

Opening the Editor

If you're using Microsoft Windows, open Notepad by following these steps:

  1. Click the Start button on the Taskbar, normally located at the bottom of your screen (see Figure 2).

  2. Select Run on the Start menu to open the Run dialog box.

  3. In the Open text box, type Notepad (see Figure 3) to open the Notepad editor (see Figure 4).

Figure 2 Getting ready to run Notepad.

Figure 3 The Run dialog box.

Figure 4 The Notepad editor.

Before typing anything into the editor, it's a good idea to give the new file a name. We'll save our file as guestbook.html.

  1. In Notepad, open the File menu and select Save As (see Figure 5).

  2. In the resulting Save As dialog box, type guestbook.html as the name of your file in the File Name text box (see Figure 6).

  3. Figure 5 Notepad: The File menu.

    Figure 6 Notepad: Saving the file as guestbook.html.


    Notice that in Figure 6 we didn't just enter guestbook.html as the filename, but instead prefixed it with the name of the subfolder in which we store all our InformIT files: c:\inetpub\wwwroot\informit\. Your folder name will undoubtedly differ from ours. You will need to know the full path to guestbook.html in order to view it in your web browser.

  4. Click Save. Notepad now displays the name of your file in the title bar (see Figure 7).

  5. Figure 7 Notepad: The new (empty) file is saved as guestbook.html.

You're ready to create a form! But first, let's make sure that your browser can view what you type into Notepad.

Testing the Editor-Browser Connection

To make sure that your browser can view the HTML files you create in Notepad, follow these steps:

  1. Enter some random text into Notepad. For example, type The quick brown fox jumped over the lazy dog (see Figure 8).

  2. Save the file again by selecting File, Save from the menu (see Figure 9). After saving the file, you'll be right back where you were in the editor.

  3. Figure 8 Notepad: Entering some sample text.

    Figure 9 Notepad: Saving the file.

  4. Now, start your favorite web browser and open the new guestbook.html file. We'll assume that everyone knows how to do this step, so we won't go through it in detail. Just note that your home page will differ from ours, and that you don't have to be connected to the Internet to test the browser-editor connection.

  5. Enter file://path_to_folder\guestbook.html in your browser's Address or Location box (see Figure 10).

  6. Because the path to the folder where we stored our guestbook.html file is c:\inetpub\wwwroot\informit, we entered file://c:\inetpub\wwwroot\informit\guestbook.html into our browser's Address box. Again, the path to the folder where you stored your guestbook.html may differ from ours.

    Figure 10 Browser: Entering the path and filename in the Address bar.


    If any folders or subfolders in the path have names containing spaces, you may need to substitute a percent sign (%) for each space to get your browser to find and open the file.


    Rather than entering the path and filename, you can choose File, Open and browse with the Open dialog box for the file you want. This method is particularly useful if you store your files deep in the directory structure or on a network.

  7. Press Enter to open the file. Your browser should display the message that you typed in Notepad (see Figure 11).

  8. Figure 11 Browser: Displaying the HTML file (guestbook.html).

Of course, the message is unformatted, since we haven't added any HTML commands to our file yet. But the point wasn't to create a fancy message—just to make sure that the browser could display what we entered into Notepad. Now we can start creating a form.

  • + Share This
  • 🔖 Save To Your Account

Related Resources

There are currently no related titles. Please check back later.