Saving your documents:

In this segment we will learn to save our documents in Windows XP however the process is pretty much the same in most windows software.

Now go back to your wordpad document.

From here on out for study purpose you are going to be saving 2 documents that are exactly the same except one will be saved in wordpad and will remain colored.
The other will be saved in notepad. They are exactly the same except one will be pretty colors and will be called a Rich Text File ".rtf" (because it is "Rich Text" pretty and colored) and the other will be a Plain Text File with a ".html" file extension......because your browser does not need pretty colors to read and display the document.

The reason I am having you go to the added trouble of saving 2 documents is simple. If you write code with colors it is much easier to see what you are doing than if you write in black and white document like notepad.
Then for these training tutorials I will match tag pair colors for you ... before you know it you will know what belongs to what and if something is missing. This will be more important when you have a whole page of code or perhaps a document that is a few pages long.
Remember the documents will be EXACTLY THE SAME except for the file extension and the program they are created in.....either Wordpad (NOT MICROSOFT WORD) or Notepad.

Just one more added note....when you are naming files you can use whatever name you want but after the "." the file name must be standard....in this case we are using ".rtf" (in wordpad) and ".html" (in notepad) also the name before the "." is best of lower case and can not have breaks in it. For instance you CAN NOT use html 1.html....but you CAN use html1.html or html-1.html or html_1.html.
Avoid the urge to use capitol letters. Some server equipment is very picky about this and you may find your images not showing up....better to be safe than sorry. An example might be you have an image you have saved as mycat.jpg and in your document you called it Mycat.jpg ... when all of this reaches your server it will not show your cat because according to the server there is no Mycat.jpg ... it does not know you really meant mycat.jpg which is there.

You save your wordpad document by clicking file at the top of your document window and then..... save as....another window will open and you will name your doc....html1.rtf....click the arrow on the "save as type"...select....rich text format (RTF)

Make sure you pay attention to the "Save In" section....in this case you will choose (0html) ...you click the down arrow and double click your C:\then look in the window below and fine your (0html) folder double click it until you see the contents of that folder...at this point it should be empty. It should look like the figures below.

When you click save and look into your (0html) folder it should now look like this.

Now open a notepad document. You will find notepad under start ... programs ... accessories ... notepad. A empty document window will open and paste the same information (copy info from your saved wordpad document) into notepad and save as html1.html....click save. The save process for notepad is the same as wordpad. In fact all documents you want to save are done this way. You click the file in the top of the document ... select save as and when the save as window opens you tell it where you want to save it and what you are going to name it ... voila done.

Why are we saving our document in notepad?
Browsers will only read a text document (HTML is a text document). So when you want to see what you are doing in your browser you must look at the text document by opening your browser and going to file....open.....click browse and find your html1.html and click ok and it should open your browser showing the page that you have just saved....it will look like this ... Example 1

Now I have to admit this is certainly not very exciting but hang in here it will be as we progress.

There is a more simple way to open a html document in your browser and that is simply click on it from your explorer window where it is now saved in your 0html folder.

Double click your html1.html in this new folder and it will open in your browser to the very dull page we have just created.

For practice change the text in the body of your document.
If you want your text to drop to the next line you add <br/> to the end of your sentence.
If you want to drop a line and add an empty line you will add <p/> to the end of your sentence.
Example below:

check it out in your browser here.

Save your documents with the added text and your line drops and line spaces. Then look at them in your browser. See what you can do with these simple changes.

These 2 tags of course are a couple of the exceptions to the rules and do not need an ending to the pair of tags they can stand alone.

The next section of our HTML tutorials will be adding backgrounds, fonts, images and colors to our pages. That section is called Web Design 2