Copyright Michael Karbo, Denmark, Europe.

  • Next chapter.
  • Previous chapter.

    Chapter 8. Graphics and colors

    Now we will look at two other very central subjects regarding home page design. That is the use of graphics and colors. Here you will see a long string of exercises that illustrate many of the possibilities.

    Insert a picture

    In the first small exercise you will make a new page, and you need to insert a picture in it.

    1.      First get the picture venezia.jpg from the home page for this book. Click on the link Material for the exercises, and then click on this link:


    2.      When the picture opens in the browser window, you should save it locally. Using Internet Explorer version 6.0, you may just click on this button:

    3.      Otherwise right click on the image and select Save Picture As…:


    4.      Save the picture in the folder C:\HTML\site1

    5.      Then open NoteTab Light, if that program is not already on your screen.

    6.      Get the HTML document template2.htm from the home page for this book. Save the document in the C:\HTML folder by right clicking on the link and using the menu item Save Target as… It is quite important that it ends in the right place!

    7.      Open template2.htm  in NoteTab and save it right away under a new name: The document needs to be placed in the folder site1 under the name venezia.htm.

    8.      NOTE: Since the two files have different suffixes, it makes no difference that there is a file with the name venezia.jpg in the same folder. But as mentioned before, it is very important that you name the file precisely as I write it and that you save it in the right folder!

    9.      Open venezia.htm in NoteTab.

    10.   Enter the heading Venezia  … like here:


    Now you are going to insert a picture below the heading.

    11.   Move the cursor to the line below the heading. Insert a P code and then press Enter to go to an empty line (there is already a P code further down in the document, but just leave that there).

    12.   In the clips panel in the left side of the screen image you need to find the section Image Elements. Double click here on the clip Image:

    13.   That opens the dialog box Image:


    14.   The Image dialog box can insert the HTML code for a picture. Here you will not utilize all the options for different parameters that are available in the IMG code. In stead: just click on the button to the right of the topmost field:

    15.   Now you have to click on (select)  the picture file Venezia:

    16.   Then click on the Open button. Then you see the file name in the dialog box:

    17.   Then click on the OK button.

    18.   Now the HTML code is inserted in the document as in Figure 21. Save the document and test the page in the browser. Hopefully the result looks like Figure 5.

    Figure 21. NoteTab writes the code for you.

  • Next chapter.
  • Previous chapter.

  • HTML Tutorial Overview.

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