Chapter 4. Start the home page

Now you have retrieved and installed NoteTab, which you will
use to produce your first home page.

Start NoteTab Light

You can use the program right away:

1. Open
Windows Start menu. You can just click on the Start button. Point to the menu
item Programs and then find:

2. First time
you start the program, you see ”Tip of the Day.” I suggest that you eliminate
this function by deleting the check mark in the field Show Tips on Startup.
Then click on the Close button:

3. The
program is now ready. Look around in the program window to familiarize yourself
with it. There are the familiar menu and tool bars on top. Below that you see a
field with the document name NoName01.txt:

That is the name of the (empty) document that you
have on your screen. But we are not going to work on that right now.

4. Look at
the two buttons in the bottom of the window. They cover the two clipbook
libraries Autotext and HTML that you will get acquainted with later:

5. Try to
click alternately on those two buttons; that changes the content of the tall
narrow frame in the left side of the window.

6. The
content of both libraries is a collection of clips. Clips are a
specialty in NoteTab that you will be using a lot. Those are small scripts,
which each can be used to insert different HTML codes. Click on the HTML
button. Now you see the biggest library, where the different clips are sorted
in groups (each with a red title):

7. Your
cursor is flashing in the large white frame to the right. That is where you
write the text content of the home page.

8. Now press
function key F6. That opens a file list in the right side of the window. Now
NoteTab is ready to use:

Figure 13. NoteTab Light is ready for use. Notice that the
screen is divided in three frames.

Get a template

Now you are ready to make your first home page. I have made
a small HTML file that you can use as your template:

5. You
need to save it on your pc since you will use it repeatedly later in your work.

6. Close the
page, which opened in a new browser window.

7. Right
click on the link template1.htm, and choose Save Target As…:

8. Now save
the file in your folder C:\HTML:

9. Click on
the Save button and the file is copied to your pc. Now you can work with
this file on your pc without being connected to the internet.

In this way you can always
download existing HTML documents from the net. You can save them as files on
you own pc. Then you could study the HTML code if you are looking for some good
ideas to copy.

Create your first HTML file

Now you are going to use my template as the starting point
for your first home page. You have NoteTab Light on your screen.

1. Open the
file template1.htm. First
press Control+o.

2. NoteTab is
by default set to work with text files (with the suffix .txt). We need to
change that. Click on the arrow by the field Files of type: and select HTML
files from the list as here:

3. Then you
need to find the folder C:\HTML:

4. Select the
file template1, and
click on the Open button:

5. Now this
small HTML document will be loaded in NoteTab Light:

Figure 14. NoteTab Light with the HTML document entered in
the large middle window.

Testing

Now you are finally ready to work with the home page.

1. Start by
saving the HTML document under a new name. So select the menu item File à Save As.

2. Click on
the folder test, since
that is the file has to be saved. Enter the file name test.htm, and click on the Save
button. Now the program’s title bar tells the proper file name:

3. Start by
looking down in the large, white text field. Move cursor with the arrow keys (ArrowLeft
ArrowRight ArrowUp ArrowDown) – it works like any other word processing
program.

4. Find the
line that reads Hallo…. Delete that and write this in stead:

5. Be careful
not to deleted the codes <H1> and </H1>, they need to remain!

6. Press Control+s to save the document. Now let
us see if it works. So press F8. This ”sends” the HTML docu­men­t directly to
the browser, so you can see the result. Sometimes it takes a little time
before it works, but the home page appears in the browser window:

7. Now you
have both NoteTab Light and the browser open on the screen, and you can switch
between the two windows by clicking on their respective button in the task bar
at the bottom of the screen:

8. But in my
opinion the easiest way to switch between the two program windows is to press Alt+Tab.
Try that a couple of times!

9. Close any
other windows you might have open, so you can concentrate on the two you see
above. Now you can modify the home page in the NoteTab window, where after you
with F8 can ”send” the changes directly to the browser window.

This page (test.htm) will not be
used for anything else but to give you a small feel for the work with NoteTab
Light. So we will make a couple of more small exercises.

Title for the page

You just observed the title bar in the browser window. There
you can read the file name for the current HTML document. But actually the
browsers title bar is intended to show the title for the home page. So
let us make one.

The title is governed by the code <TITLE>, which has to be
in the HEAD section of the HTML docu­ment. Your document has currently no title
– therefore the browser shows the file name in stead in the title bar.

1. The <TITLE> code is a start
code that requires a corresponding end ode. So place the cursor between the two
codes:

2. Enter the
text My first page ...
between the two codes. Save and test the page in the browser. NOTE: sometimes
you have to press F8 more than once to pen the browser window.

3. You see
right away that the content in the blue title bar in top of the browser window
has changed:

4. Return to
the NoteTab window. Now you are going to work down in the BODY section. Adjust
the document, so it appears like here:

5. Test the
page in the browser. You can surely see that the <P> causes double spacing
between the different paragraphs. Normally the browser will let the text distribute
over a number of lines (create automatic paragraph breaks) when you just
write in one long line.

6. Try to
extend the first line of text with lots of characters. Save it and test it in
the browser:

Figure 15. Here the second
paragraph includes one very long line. When it is shown in the browser, the
paragraph will be broken into shorter lines.