Web Page Editing with NotePad

This is going to be an attempt to teach you how to create, edit, and publish a page with notepad.

The first thing you need to do to create a file in NotePad, is to open NotePad.

Before you start typing things in, it makes it easier if you turn on wordwrap so that you are not chasing text with a scrollbar. Look at figure 1 and you will see that you can turn on wordwrap by clicking on NotePads edit menu, and then click on Wordwrap.

FIG. 1

Figure 2 jumps right in to coding. The basic things you have to have in your document are in black. The things in blue are extra things you can add to your page, and shows where they should be added. Everything in red is an explanation of what it is next to.

In red it talks about changing from a background color to an image file. The ? marks represent an RGB Hex Code for color. To see the 216 internet safe colors you can look at the color codes here on this site from the menu on the left or if you are not using frames, the menu buttons at the bottom of the page.

Where ever there is an occurence of filename.html, filename.gif, filename.mid, or sound.mid you would replace your actual filename there.

Please keep in mind, that all the images, sounds, etc., that you want to add to your page must be uploaded to your directory, just as this file will have to be uploaded once you have completed it.

The sound code starts with the embed tag and ends with the /noembed tag.
Embed is a Netscape tag and bgsound works for Internet Explorer.

FIG. 2

Fig 3. introduces centering things, changing font sizes and making clickable images. By using the center tag to "envelope" images, text, tables, forms, etc., you can center things on the page. You must use the beginning and ending tag.

There are 7 positive font sizes from 1 to 7. 7 is the largest and 1 is the smallest. The heading at the top of this page is done in font size 6. You can "envelope" and text you want in the font tag, remebering that you need to use the beginning font tag and the ending /font tag.

Making images clickable is just a matter of adding the img tag and image filename to the a href tag. The following is an example code for a clickable email link.

<a href="mailto:vikki_d@hotmail.com">
<img src="filename.gif"></a>

FIG. 3

Meta tags are important for describing your page to search engine spiders, automatic forwarding, etc. You do not see the text from the meta tags in your document and meta tags always belong in the head section of the document.  If you look at Fig 4. you will see that the meta tag line come between the beginning head tag and the ending /head tag.

An example of a regular full set of meta tags would look like this:

<meta name="description"
content="Tutorial on creating and editing web
pages with NotePad">
<meta name="keywords"
content="NotePad, html editing, web page editing">
<meta name="Author" content="Vikki Dawson">

There are other META tags also, like for automatic forwarding of a viewer from one place to the next and for page content expiration (for dated materials).

<meta http-equiv="refresh" content="5;url=http://www.goto.com">
<meta http-equiv="expires" content="Mon, 28 Dec 1997">

In the content part of the refresh line content="5; means that it will wait 5 seconds before the page forwards to the url specified. You can use whatever value in seconds you would like there.

FIG. 4

The <br> tag just allows you to make a line break. Pretty simple. It has no ending tag, so all you have to do is follow the example in Fig 5. It would look like the following on a real page:

Use this tag to force a line break.

FIG. 5

Ok, let's suppose you now have all the text, links, images, and sounds, you want on your page. You are now ready to save the file. Fig 6. shows that you need to click on the file menu in NotePad and then click on save as.... The next screen that comes up is shown in Fig 7.

FIG. 6

This (Fig 7.) is the save as... screen. As you can see at the top is a box that says Save in next to it. This is where you will save your file to. If you have made a directory or folder to hold your web site files, you will want to click on the down arrow on the right side of the box to browse your hard drive for the folder you are going to save this file in. Once you find the folder highlight and click on open.

Next you will see a box next to the save button. You will want to type in a filename for this file here. Try to keep it simple and when making web page files always use the extension .html or .htm. For example, you could name this file test.html. Then you would click on save, and that is it. The file is now done.

FIG. 7

Now that you have your file, you need to write down all the names of the image files you included in this file and the sound files. Actually any files you included here, or what I call referenced. Once you have that done, you can upload your files to your account at your server, and once that is done, you can go visit the page you just created and uploaded.

If after visiting, you see something that is not quite right, you can open the file in NotePad, edit it, save it, (not save as... this time, just save) and reupload it.   You could make your whole website this way. You can add tables, forms, lists, and you can even makes frames with NotePad.

For help with uploading, you can use your servers upload utitlity if they have one, or any FTP client.