Copyright Michael Karbo, Denmark, Europe.


  • Next chapter.
  • Previous chapter.


    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:

    1.   Again, open the home page for this book (www.mkdata.dk/html/us).

    2.   The click on the link The templates.

    3.   The click on the link template1.htm:

    4.   That opens a home page with a very limited content.

    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.

     


  • Next chapter.
  • Previous chapter.


  • HTML Tutorial Overview.

  • Get the files for this tutorial (opens in a new window)