Copyright Michael Karbo, Denmark, Europe.

  • Next chapter.
  • Previous chapter.

    Chapter 10. Background graphics

    We continue the experiments with the HTML document venezia.htm. Another very popular way to ”dress up the pages” is to put graphics in the background. Let us try that.

    1.   Open the home page for this book and get the two backgrounds back1.gif and back2.gif:

    2.   Save them in the folder site1.

    3.   Check with the Explorer that you have the right files in the folder site1:

    4.   If you see back1.gif in your browser, than that is small item of graphic; actually it occupies only 128 x 128 pixels:


    5.   The thought with small graphic file is not that it should be shown as a picture. Rather it will form background in the venezia.htm HTML document.

    6.   Now delete the parameter BGCOLOR="" in the document venezia.htm. In stead enter this:

    7.   Save the document and test it in the browser. That looks quite neat, right? The yellow pattern forms a background for the whole page.

    8.   Now you have to use the other background, which you have downloaded before. So change the code to: BACKGROUND = "back2.gif"

    9.   Save the page and test the result in the browser. That is not really very good, right? The background is a colored band in the left side, and it collides clumsily with the contents of the page:


    Figure 24. This background is bad, since it creates confusion and makes text hard to read.

    Adjusting the page

    If you are going to use background graphic like in Figure 24, you have to adjust text and graphics relative to the actual background. In this case text and picture need to be moved in on the page.

    1.   Select the text and the pictures HTML code in NoteTab:

    2.   Then find the Block Formatting section in the HTML library and double click on the Center clip:

    3.   That inserts the code CENTER around the selected document section. Press ArrowRight to remove the selection.

    4.   Notice that the CENTER code consists of both a start code and an end code:

    5.   Everything between the two codes will be centered on the page.

    6.   Save the page and test it in the browser.

    Figure 25. By centering the page contents the layout is improved in the screen presentation. Here you see the result with a screen resolution of 800 x 600 pixels.

    What does the centering mean ?

    You can actually learn a lot about HTML just by studying the small example venezia.htm. For example what does it mean to center text and graphics like you just tried?

    1.   In Figure 25 the screen resolution is relatively low (800 x 600). In that case the centering gives left margin of suitable size. Can you see that? Is the same the case on your screen?

    2.   You can try to change the window size and judge the appearance of the page. That is especially a good technique when the screen has a resolution of 1024 x 768 pixels or more. Then you can test different browser window widths and see how the layout turns out.

    3.   You can easily get a neat layout, but the window must not be too wide. It turns out that this layout fits fine in a window with a width of 800 pixels. That corresponds to the (still) very common screen resolution of 800 x 600 pixels.

    4.   The colored pattern in the left side is around 160 pixels wide:

    5.   If you have the option to see the page in 1280 x 1024 pixels resolution, you will see that a centering moves picture and text way too far to the right.

    Figure 26. When you increase the screen resolution, the centered sections move further to the right.

    Absolute and relative measures

    In the preceding exercise you encountered a very serious problem – that is the relationship between absolute and relative sizes. Try to study Figure 26, and see if you can follow this argument:

    ·        The pattern in the left side and the photograph in the middle of the page have absolute (exact) pixel sizes of 160 and 384 pixels respectively. These sizes do not change – regardless of which pc and screen resolution they are shown in.

    ·        In this case the screen resolution is 1280 X 1024 pixels. That means th at the screen image in the figure is 1280 pixels wide.

    ·        Centering means that the photograph is placed in the middle of the screen image. That is a relative measure, since it depends on the width of the current screen.

    When the screen image is 1280 pixels wide, the centering results in an indentation like in Figure 26. When the screen image is 800 pixels wide like in Figure 25, the indentation becomes quite different.

    The different screen resolutions

    Since internet users have screens with many different resolutions, it is hard to make a precise design. You often see a conflict between different kinds of graphics that have specific (absolute) pixel measures and formatting that works with relative measures.

    Width: 640 pixels


    Width: 800 pixels


    Width: 1024 pixels


    Width: 1280 pixels


    Figure 27. Both graphics placement and size change when the screen resolution is increased.

    We return to these problems later in the book, but it is a good rule of thumb to start with a screen resolution of 1024 x 768 pixels (or maybe 800 x 600). That turns out to be the most common resolution among net users. So if you design your pages so they look neat in this resolution, you will not be far off the mark.

    In Figure 27 I show the appearance of the page at different resolutions. The figures are small, but I am sure you can see the tendency. Graphics with ”fixed” (absolute) measures appear ”smaller” when the screen resolution (and with that windows pixel size) is increased.

  • Next chapter.
  • Previous chapter.

  • HTML Tutorial Overview.

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