Copyright Michael Karbo, Denmark, Europe.

  • Next chapter.
  • Previous chapter.

    Chapter 18. Let's make a travellers homepage

    Now you are going to make a brand new home page. In this exercise we will revive a long string of techniques that you have learned already. I try to make the review as ”effective” as possible, so you get the feel for how you can create a home page fast with a specified layout. Among other things that mean that we work in a sequence, which may not appear logic at fist.

    But the finished product will be completed in an effective way, and that is my plan: You will be able to make home pages fast. We will widely use Note Tabs clips from the Autotext library, which I presume that you are familiar with. Thus I expect that you can remember the table codes and other subjects that have already been covered in this book.

    Create the page

    Your new page will contain tourist information about the southern French town Saint-Raphaël. You can find the pictures etc. that you need for this exercise on the home page for this book.

    1.   Open the template2.htm document, and save it in the site1 folder under the new name

    2.   Change the page title to About Saint-Raphaël. Please remember the accent …

    3.   Enter the same text as heading. The fastest is to copy the text (press Control+Shift+ArrowLeft, ArrowLeft, ArrowLeft, ArrowLeft to select it) and insert the copy between the H1 codes.

    4.   Then place the cursor above the heading and insert the bookmark top (use the autotext bm):

    5.   The result is a small A code that contains the parameter NAME=”top”. You can link to this code, and we will do that soon:

    6.   The save the document. Then you need to enter the following six bullets just below the heading. Use LI  codes for the bullet list:

    7.   Press p for a new paragraph. Then use the img clip to insert the picture file raph01.jpg. Also get the picture from the home page for the book, and place that in the site1 folder.

    8.   Finally insert a horizontal line. You need P codes above and below the horizontal line, and all this is combined in the autotext clip phr, which you can use.

    9.   Now you need to enter a new heading, but it needs to be placed in the left cell of a table. Enter a table with one row and two cells. You could use autotext ta2, and select one row:

    10. Place the cursor within the code for the first cell and type h3 to format to heading level 3. Then enter the text Introduction:

    11. Move the cursor to cell two and enter the text To the top.

    12. Now select this text:

    13. Activate the clip hl2 by double clicking on it:

    14.    You must not type hl2, since that will erase the selected text.

    15.    The clip hl2 opens a dialog box where you can enter a so-called Link URL (an internet address). In this situation the link needs to go to a bookmark, and that is specified with a ”garden gate symbol”. Enter #top in the dialog box and click OK:

    16. Press ArrowRight to remove the selection. The result will be a small link code that will include the text ”To top”:

    17. Finally you need to justify the text right. You need to do that in the cells TD start code. There you need to add the parameter ALIGN="right". The easiest is probably that you enter it like here. Remember that you need a space before the parameter or it will not work:

    18. Move the cursor above the table. Insert a bookmark (use the bm clip) and name it intro.

    19. Save the site. Now test it in the browser. Try to change the browser window size and keep an eye on the link To top. It is always placed to the right.

    Figure 45. The start of the site about Saint-Raphaël. It is far from finished yet.

  • Next chapter.
  • Previous chapter.

  • HTML Tutorial Overview.

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