When editing HTML code to create web pages, you can use any word processor. The keys are to save your file as a text file and give it a name ending in .html. Simple word processors, like NotePad or WordPad in Windows and SimpleText or TeachText on a Mac work very well. All of these programs except WordPad will only save files as text, so they save one step in the process.
When creating an HTML document, you are going to create one document and view it in two separate ways. You will view and edit the HTML code using a word processor, and you will view the web page as it will appear on the web through a browser. Always remember that whether you are in a word processor or a browser, you are looking at the same document; you are just looking at it through two different lenses.
There are four things you will want to do while creating an HTML document:
None of these steps are difficult, but each is extremely important if you want to get your web pages to work.
In order to create a new document, you must open your word processor. Full-featured word processors are not always the best choice because of auto-formatting features that will re-interpret your text and otherwise be too smart for their own good. The following examples will use WordPad because that is the most complex of the word processors recommended. If you use NotePad, TextEdit, SimpleText, or TeachText, you might not have to perform all of the functions. For example, these programs will only save files as text files so you will not have to specify the file type.
On a Macintosh, you will have to find TextEdit, TeachText, or SimpleText. If you have trouble, use the Find feature to locate one of these programs. In Windows, NotePad and WordPad are located in the Start Menu, under Programs, under Accessories:
In Windows 7, click the Start Button, click All Programs, and click Accessories in order to find WordPad.
Now type your HTML document and choose Save from the File menu (in Windows 7, choose Save As and choose Plain Text Document). At this point, you need to pay attention to three things:
1. You can save your document wherever your want, but it must be somewhere you will remember. If you are in a public lab, you will probably want to save it to your flash drive or network drive. You should give your document a simple name. Do not include any spaces (i.e., make it all one word) or any other special characters. That is, use only letters and numbers. End the name of your document with .html or .htm. This will help your computer to recognize it as an HTML file.
3. Save your document as a text document. HTML is all text, and browsers look for text files.
If you use Macintosh OS X, you will have access to TextEdit. This simple word processor has many of the same features as WordPad for the PC, including the ability to save and read RTF (rich text format) files and interpret HTML commands. In order to ensure that your document is created as a regular, ordinary, every day text file (as opposed to a rich tet file), you will have to do the following.
When you are done, your preferences should look like the pictures above (some versions of TextEdit might have these options layed out differently, but the options should still be the same).
|Note that if you did not already have Plain text set for New Document Attributes, you will have to close the current blank document and open a new one because the current document is in rich text format, and that will not work.|
Once you have created your document, you will want to view it in your browser (e.g. Internet Explorer or Safari or Firefox). Since you will want to go back and forth between editing your document (in the word processor) and viewing it (in the browser), you will not want to close the document. You will want to minimize or hide it. On a Macintosh, you can simply go to the Text Edit menu and choose Hide TextEdit (or Hide whatever word processor you are using). In Windows, you can minimize the current application by clicking on the line in the upper right hand corner (you have three buttons: a line for minimize, two overlapping squares or one big square to change the size of the window, and an X to close the window). Choose the line to minimize.
There are two ways to open your file in the browser. The easiest way is to find the file itself (in Finder or Windows Explorer, not in any application). Then, right-click on the file (ctrl-click if you use a one-button mouse), and choose Open With. and pick your browser.
Alternatively, you can open your browser in whatever way you normally do this (from the Start menu, from the Macintosh Dock, form a big e on your desktop, etc.). Once your browser is open, you will need to find the file that you just created and saved. In the File menu, you should choose Open or Open Fileor something similar depending on which version of which browser you are using (if you are using Inernet Explorer 7, you might find that you don't have any menus; if this is the case, right-click in a blank area near the top of the screen right below where the URL is showing, and choose Menu Bar from the flyout menu). At this point you will either already be in a standard Open File dialog box, or you will need to do something (probably click on a button marked Browse) to get into a standard Open File dialog box. You will then navigate through your computer to find the file in the place you saved it. If for example, you saved it on your floppy drive, click on the arrow next to the current folder to choose the floppy drive. Once you find the file, click on it, and click Open or Open. In Windows, you probably have to click OK at this point, and you should see the file in your browser as it will look on the web.
There are three likely things that can go wrong:
If you could not find the file at all, you either forgot where you put it, or you did not save it with the .html or .htm extension. If the latter is the case, you will have to use Save As in the word processor to save it again with the proper extension.
If you found the file, but it does not look right, that is par for the course. That is why you will have to edit (see the next section). If it looks almost identical to the way it looked in the word processor, including all the HTML tags, you probably did not save it with the .html or .htm extension, and will have to use Save As in the word processor to save it again with the proper extension. If it looks like a bunch of gobbledygook, you probably did not save it as a text file, and you will have to use Save As in the word processor to save it again as a text file
If you found the file, and it will not open, you probably gave it a bad name. Some systems will have trouble opening some file names, especially those with spaces in them. If this is the case, try using Save As in the word processor to save it again with a simpler name.
If you found the document in the browser, and it looks something like a web page, you are doing great. Now, you will want to make changes to the document and view the changes in the browser. First, you want to switch back to the word processor and then follow a simple four-step process.
If you followed the above directions and hid or minimized the word processor (and did not close it), you can easily switch back to it either by choosing it from the Applications menu (in the upper right hand corner on a Macintosh) or clicking on it in the Applications bar (usually at the bottom of the screen in Windows). Now make whatever changes you want to make and follow the four step process:
1. Saving the file is easy. Go to the File menu and choose Save. That's it! You have already told the computer where the file is going and what it is called, so you don't have to tell it again.
2. Some programs (such as WordPad) will insist that you confirm that you want this to be a Text document every time you save it. Fortunately, this is easy. It will ask you if you want to save it as a text document, and you click on the button marked text document. If your program doesn't ask, it is automatically saving it as a text document.
3. Switch to the browser either on the Dock (Macintosh) or in the Task bar (PC).
4. Click on the Refresh or Reload button to read the file back in.
All these steps are necessary (but really easy) because your browser reads the file from the disk when you first open it. Any changes you make will be in the file that is on disk until you save the file (step 1). We want to make sure it is still a text document (step 2). You need to be in the browser to see the file as it will look on the web (step 3). The browser will not automatically read the changes until you tell it to do so (step 4); until then it will still be showing you the old version of the file.
Once you are done, you will close up all your programs and go away. At some point, you will want to come back and edit the document some more and view it in your browser. Since you need to view it two different ways (in the word processor and in the browser), you can't simply double-click on the file and expect it to open in both views. On a Macintosh, when you double click on a file, generally whatever program created it will be the one to open, so if you find your file and double-click on it, the word processor is likely to open it. In Windows, generally anything with a .html or .htm extension will be opened by your browser.
As with opening the document in the browser for the first time, there are two ways to open the document (both in the Word processor and browser) the next day. The easy way is to locate the file in Finder or Windows (that is, not choosing Open from the File menu from within an application). Once you see the icon for the file, right-click on the file (hold down the control key and click on a one-button mouse). You should get a fly-out menu that includes Open With. On a Windows computer, choose Word Pad from the Open With list. In Windows 7, you might have to click Choose Default Program from the Open With menu and then click on the arrow next to Other Programs in order to see WordPad (you probably want to uncheck the box for Always Open With). On a Mac, choose Text Edit. Next mimize the file (don't close it) and repeat the right-click and Open With, but this time choose your browser from the Open With list (Safari, Firefox, Internet Explorer, etc.).
Alternatively, you can do this from within the applications. To open the file in your word processor, start the word processor (as you did to create a new document), and go to the file menu and choose open. You will be presented with the standard Open Dialog box, but you might not be able to see your file (if you are in Windows). You might have to choose what type of file you want to be able to see. If, for example, you are using WordPad, it will automatically be looking for "Files of type" Word for Windows (*.doc), and it will not show you .html files. Other word processors might automatically be looking for "Files of type" Text (*.txt). Find the choice for "Files of type" and choose All Documents (*.*).
You can now go to the location where you saved the file, and you should be able to see it and open it normally.
To open the file in the browser, follow the same steps as you did when you first opened the file in the browser. You should now be back to where you were when you finished with your file open in two views:
It is now ready for you to make changes in the word process and: save, as a text file, switch to the browser, and click on Reload or Refresh.
Alternatively, you can locate the file in Finder or Windows (that is, not choosing Open from the File menu from within an application). Once you see the icon for the file, right-click on the file (hold down the control key and click on a one-button mouse). You should get a fly-out menu that includes Open With. On a Windows computer, choose Word Pad from the Open With list. On a Mac, choose Text Edit. Next mimize the file (don't close it) and repeat the right-click and Open With, but this time choose your browser from the Open With list (Safari, Firefox, Internet Explorer, etc.).
If you are not used to switching among applications, this process might seem complicated. However, it is fairly easy, and after you have done it once or twice it will not take any time at all.
Last Updated: October 3, 2011