Using a Text Editor to Create HTML Pages

In this page we look at how one goes about using a text editor to create and modify HTML pages. It is quite straightforward, but there are some "gotchas" that one must be aware of. We also suggest that you set your file system on your computer to display file name extensions. Finally, we discuss how you can cause files to open with the program you desire when you double click on to open those files.

Selecting a Text Editor

The first thing to do is to select a text editor to use for creating and modifying HTML pages.

TextWrangler for All Computers

We recommend using TextWrangler, created and distributed by BareBones.com. TextWrangler is all one needs for creating standard text documents, including HTML pages, but it has many extensions that make it usable in a variety of other settings as well. TextWrangler is free, but BareBones.com also has a commercial version called BBEdit that is HTML friendly, meaning that it provides greater support for the creation of Web pages. You can download TextWrangler here.

Since TextWrangler is available for virtually all computers, we use it in this book for most of our text examples. This makes the presentation much simpler than it would be if we had to discuss a variety of different text editors. However, on this one page we will discuss the use of other common text editors for PCs and Macs.

Notepad for Windows

The text editor Notepad can be found on Windows computers at:

Start Icon (bottom left corner of Windows desktop) > All Programs > Accessories > Notepad

This is a very minimalistic text editor, but is just OK for creating Web pages.

Note: When using Notepad to create Web pages, be certain when saving a page to select "Save as ...", then select "all files," and then type the desired file name, such as index.html. This will cause the file to be saved with the HTML extension. If the text file option is selected, a .txt extension will be appended to the end of the file name, so that even if you save the file with the name index.html, Windows will add the .txt extension, causing the file to actually be named index.html.txt.

TextEdit app for Mac

The TextEdit app for Macs is also a fine editor, but it is specific to Macs.

TextEdit has a major "gotcha" when one wants a simple webpage. By default, TextEdit opens in Rich Text Format (rtf) form. What this means is that one can do such things as make text boldface, center text, number text, etc. That is, it has some features of a word processing program rather than just a text editor. When using the Rich Text Format option in TextEdit, hidden characters are in the file that indicate boldface, centering, etc, so the content of the page is really not just a simple text file. That's bad for HTML pages. To use TextEdit for HTML pages one must:

Open TextEdit.app.
Click the Format tab at the top of the Mac desktop.
Click Make Plain Text (from then on, TextEdit should open in the Plain Text mode, unless you later click the Format tab and select Make Rich Text).
When saving a file, make sure that the box is checked labeled "if no extension is provided use .txt"
Before saving give the desired name of the file with the HTML extension, as in index.html; be sure to overwrite the .txt extension when naming the file.

Show File Extensions

Showing file extensions on all files on your computer can be quite helpful in catching problems. In this subsection we discuss this aspect of file names.

File Names and File Extensions

A complete file name will look something like this:

myPicture.jpg

The part "myPicture" is the name you wanted to give your file. The part ".jpg" is called the file extension. The file extension is necessary so that when you click on a file to open it, the operating system (e.g. Mac OSX, Windows, or Linux) can tell which program should open that file. Here are some examples:

myPicture.jpg - when you click on the file named myPicture, the operating system will open the picture with the program or app that is associated with that file extension type. In the Mac this might be opened with the program Preview.app. In windows, this might be opened with the Windows Gallery program.
myLetter.doc - when you click on the file named myLetter, the operating system will most likely be configured to open the file myLetter with Microsoft word.
myWebpage.html - when you click on the file named myWebpage.html, the operating system will most likely be configured to open this file with its preferred browser, such as Internet Explorer in Windows or Safari in a Mac.

So it goes with all files and extensions.

Show Files Names With Their Extensions

It is a good idea when you are working with websites (and many other things) to have the operating system configured to show file names with their extensions. Operating systems are generally configured to just show the first part of the file name, not the extension. Showing the extension will let you know more about the file type (e.g., a picture might have a .jpg extension or a .tif extension, each of which might open in a different program, which might be puzzling and not what you wanted). You might also find errors that way. For example, you might think that you have named a file index.html. However, it might be revealed if the file extension is shown that the real name is index.html.txt, which will make a big difference in how the file is opened and viewed, even in a browser.

So, how does one configure an operating system to display file names with their extensions? Use the following links for good descriptions.

In every case you can reverse the procedures described for displaying file name extensions if you want to hide the extensions later.

Changing the Program that the Operating System Uses to Open a File Based on the File Extension

Now that you know about file extensions, you may also want to know how to change the program the operating system uses to open files with certain extensions. For example, you may want a file to open in Photoshop rather than Preview on a Mac when you double click to open it. You may also have discovered that the VLC video player is the best of the bunch for playing any video type, so you might want to select each video extension type (e.g. ,mov, .mp4, .ogg, .webm, etc.) to be opened by VLC. This is easily done. Select the desired link below to see how:

Making changes depending on your desires can make your computing experience just a little smoother.

Summary

As suggested, you should download and use TextWrangler for uniformity across various computer/operating system platforms. In addition, for lots of reasons you should also set the file system on your operating system to display file extensions. Finally, to make your own computer experience better you can change the file extension associations so that files are associated with the programs you are most likely to want to use with those files.