LESSON 1 - PUTTING TEXT ON A PAGE.
In this lesson you will learn how to:
Three optional topics on this page are:
|Note: The basic method of placing text on a web page is just like typing a letter with a word processor or an email, i.e. you start at the left margin and continue to the right. The word processor or email program will automatically word-wrap the text on your screen. A browser will do the same. There are many ways to place text on a web page but this topic is for more advanced tutorials such as my CSS Tutorial.|
START WITH A BLANK, NEW PAGE
To begin making your first web page, start up HTML-KIT and, when the program is displayed on the screen, click on FILE > NEW in the tool bar at the top left of the screen. This is what you should see.
Put this text on the page as shown below by position your cursor in the space between the <BODY> and the </BODY> and just type in the following:
This is my first web page made with HTML-KIT.
It should look like this:
You could, of course, could have typed a complete paragraph instead of this short sentence. Lesson 4 will show you how to start a new paragraph or a new line (a line break).
The next thing you want to do is put in a title for the page. So change the Untitled to My First Page.
SAVE THE PAGE
Once you have it typed in (actually you can type anything you wish) save the file/page by:
As you can see by this graphic, I will be saving the file to my subdirectory, web pages, which I created before hand. You may have to use the little arrow (circled in red) to get to the folder. If necessary, you can create a new folder by clicking on the 3rd icon from the left in the SAVE window. When this window first came up, there was no file name in the FILE NAME box. Type in myfirstpage.htm and click OK.
I always use lower case letters and I put .htm at the end of the name. If you use lower case letter in all your file names you will save yourself a lot of trouble later on. You will be using this page in the remaining lessons so be sure you file it in a folder with any name such as Tutorial. I always use .htm but any web page can also be .html. Originally, Windows didn't like four letter extensions so I settled on using .htm.
PREVIEW THE PAGE
Since you have saved the file, you can display it by clicking on the Preview Tab at the lower left of the editor screen.
And this is what you will see.
If you like you can skip then rest of this lesson and go directly to
Lesson 2 - Changing Size, Color, And Font Of Text.
USING HTML-KIT PREFERENCES
Special note: In the future when you wish to save the page you are working on all you have to do is click on the SAVE ICON, which is circled in RED
You could have typed in quite a bit more text so see how the editor works. But before you experiment with more sentences I recommend that you look through the Preferences. Below is just one of the many options available under the Preferences, the Editor. To access the Preferences, click on EDIT > PREFERENCES (Preferences is down at the bottom of the menu). You will need to check the Word Wrap box at the middle right side. Then spend a bit of time looking through all the tabs in Preferences.
If you click on on the PREVIEW tag you can set HTML-KIT to automatically save your page each time it is previewed. This is a good idea as then you never have to worry about losing any work you have been done by a power surge or the electricity going out.
SOME DETAILS ON HTML TAGS
Before we continue, let me explain a few thing about the HTML tags that are on the page. All HTML tags consists of a < and a > surrounding text, e.g. <HEAD>. The Basic HTML tags needed on every web page are:
To look at all the HTML tags I recommend that you go to www.willcam.com/cmat/html/crossref.html. You can find a complete explanation of all the HTML tags there. This is an excellent page, one that you should bookmark for future use.
I hope you have taken a bit of time to examine the various tool bars you can place at the top of the screen. If not please click on the various words, i.e.
File Edit View Tools Tags Actions Workspace Window Help
at the top and see what each one has for sub-menus. Use the View to test out the three different extra tool bars that can be display.
Now that you have created your first web page let's move on to how you change this text. So, on to: