Copyright Michael Karbo, Denmark, Europe.

  • Next chapter.
  • Previous chapter.

    Chapter 14. The Fish Page

    For the last exercise in this sequence you are going to make a very graphic oriented page, where you will also use the table function.

    Get ready for a new page

    You are going to make a small page that deals with fish. The page is neither comprehensive nor advanced, but it shows the use of tables.

    Go to the home page for this book and get all the pictures you need for the fish page.

    1.   Save them in the site1 folder. There are 7 pictures all together. They are: fish1.gif, fish2.gif, fish3a.gif, fish3b.gif, ship1.gif, ship2.gif and wave1.gif:

    2.   Open the HTML document template2.htm.

    3.   Save it right away in the folder site1 under the new name fishisgood.htm.

    4.   Correct the page title to Fish is good!:


    5.   Delete the heading codes <H1></H1>, we do not need them here.

    6.   Now we need to insert a table. It needs two rows with three cells in each: find the clip Table wizard (simple) and activate it with a double click. The dialog box suggests two rows, and that is OK.

    7.   Press Tab to jump to the next field and enter 3 there:

    8.   That brings a lot of codes into the document. Now start by adjusting the TABLE code parameter to: BORDER="0".

    9.   Also delete WIDTH="80%". Now it should read like here:


    10. Now enter the text Fisk is good! in the second cell in the top row and select the text:


    11. This text should be in a large font. So you need to select the text as shown in the figure. Then find the clip Font (in the Block Formatting section) and activate it with a double click:

    12. That opens a dialog box, where you can specify font and size etc. Press 7 in the Font size field. That is the largest font.

    13. Click OK or press Enter. You could press ArrowUp to remove the selection.

    14. Save the page and test it in the browser. There is not much to see yet...

    Insert a couple of fish

    You have created a table in the fishisgood.htm document. In the first row there is a text in the center of the thre cells. We need to place some graphic in each of the two outer cells:

    1.   Place the cursor within the codes in the first cell:


    2.   Now you need to make an IMG code. Find the Quick Tags section in the HTML library and double click on the img clip (you might want to look at the review on page  Fejl! Bogmærke er ikke defineret.). Enter the file name fish3a.gif right away.

    3.   Place the cursor in the code for the third cell and repeat the operation there, as you enter the file name fish3b.gif in the IMG code.

    4.   Now the codes look like this in the first row of the table. Your line breaks may be slightly different, but that is immaterial:

    5.   Save the page and test it in the browser. If you have made the exercise correct, the result will look as shown  in Figure 36.

    Figure 36. The two fish and the text are placed in three cells in a  table.

  • Next chapter.
  • Previous chapter.

  • HTML Tutorial Overview.

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

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