ITD-110: Notes on Using Notepad with HTML

Notepad is a simple text editor that comes with the Windows operating systems. It is used to write plain text files, i.e. text files limited to the keys on your keyboard. You cannot bold, italicize, or underline. Text editors like Notepad can be used to write HTML documents used to create web pages. Unless you use a MacIntosh computer you will probably at least initially use Notepad for this course to do your work, so you need to gain proficiency in using it. Fortunately, it is simple to learn and use.

Under Windows, Notepad can be found by pressing: Start > Programs > Accessories > Notepad

Creating an HTML File Using Notepad

While Notepad can be used to write HTML files by default it will save a file with a .TXT extension. For this course you must explicitly save your files with a .HTM or .HTML extension.

Try this exercise:

  1. Open Notepad: Start > Programs > Accessories > Notepad
  2. Type the following using the editor on separate lines as shown
  3. <html>
    <head>
    <title>My First Web Page</title>
    </head>
    <body>
    This is my first web page
    </body>
    </html>

  4. From the menu select: File > Save
  5. Since the file does not have a name you must give it a name. By default documents are placed in a folder called My Documents on your desktop. In the file name box type: webpage.htm and press SAVE.
  6. If you make changes to the file you can do a File > Save to resave it.
  7. Exit Notepad.

Opening an HTML File Using Notepad

  1. Open Notepad: Start > Programs > Accessories > Notepad
  2. From the menu select: File > Open
  3. By default Notepad will look in your My Documents on your desktop. If you placed the file somewhere else you will have to open the drop down list box under Look In and navigate to the proper drive and directory,
  4. By default Notepad looks for files with a .TXT extension. To find HTML files either select All Files (*.*) from the Files of Type drop down list box or enter *.htm* in the File Name box. Then press OPEN.
  5. When you find the file in the list of files, click on it and press OPEN.

If you need to work on two or more files using Notepad at the same time simply open up another instance of Notepad from the Start button.

NoteTab Lite: An alternative to Notepad

Notepad has the virtue of being extremely simple to use. However it is designed to save files with a .TXT extension, so it gets awkward to use if you do a lot of HTML. It also doesn't allow you to easily work on multiple HTML files at once. You may find it more convenient to use a text editor with a tab feature. I use NoteTab Lite and find it very convenient and useful. Among its features, it allows me to press a button to bring up the HTML file in a browser. It can save you a lot of time and has lots of useful features that you will discover with regular use.

You can download it for Windows operating systems from http://www.notetab.com. Make sure you specify the Lite version, because the other versions cost money or operate as Shareware. They will request some personal information to download the software. If you are uncomfortable giving out this information stick with Notepad.

The file is downloaded as a ZIP file, which is a compressed archive. You will need a utility like WinZip to uncompress the archive and extract all the files you need. WinZip can be downloaded from NVCC. See the class web page for a link. After the archive is unzipped, you must then run the installation program. Compete details are on the Notetab web site.

Opening an HTML File Locally with Internet Explorer

  1. Start Internet Explorer
  2. Select File > Open.
  3. Use the BROWSE button to navigate to the directory where you placed the HTML file. When you find it click on it and press OPEN.
  4. Press OK. The web page should display in the browser. If your HTML has errors in it, you may need incorrect output or no output at all.

Opening an HTML File Locally with Mozilla Firefox

  1. Start Mozilla Firefox
  2. Select File > Open File.
  3. Expand the Look In dropdown box to locate the directory where you placed the HTML file. Then locatea the file you created, which should have a .htm or .html extension. When you find it click on it and press OPEN.

View Source Problem with Internet Explorer

IE will let you look at the HTML source code for the currently rendered page. When you do a View Source in IE (View > Source) it places the text into Notepad (in the case of IE).

It is tempting to edit this source code. But unless you edit it and do a SAVE AS overwriting your old file in the exact same folder that the original was placed it, when you press REFRESH you won’t see the changes you applied to the source code. Many students in the past make mistakes and forget to save with a .htm extension, or place it in the wrong directory and wonder why their changes don’t work.

Recommendation: Always open Notepad explicitly (Start > Programs > Accessories > Notepad) and find your HTML file this way. Use View Source only to check the underlying HTML and close this instance of Notepad when done.