Copyright Michael Karbo, Denmark, Europe.


  • Next chapter.
  • Previous chapter.


    Chapter 9. Studying the code

    Now look at the code that
    NoteTab inserted in the HTML document
    venezia.htm.

    1.     The code itself is named IMG, as you see in the beginning. Then comes the parameter:

    SRC="venezia.jpg"

    2.     The SRC parameter refers to the name of the picture file that has to be inserted. In your example the picture file is placed in the same folder as the HTML document. That is called a relative placement. This code will always work regardless of which folder the home page is placed, as long as the picture file is in the same folder.

    3.     The next two parameters are:

    WIDTH="384" HEIGHT="256"

    4.     They specify the pictures pixel size (width and height). NoteTab finds this information in the dialog box Image. You do not need to specify height and width when the picture is to be shown in 100 percent size – in our case you could have omitted that information.

    5.     The last parameter is called BORDER="0". Border means edge or frame, and here it is set to 0 pixels. If you change the value to 1 or 2, you will see en thin frame around the photograph. Try for yourself!

    Colors

    Color is a very basic element in most home pages. You can insert the finest pictures in all kinds of colors, but you can also color the page yourself. Let us look at an example.

    1.     Start by reading the BODY code in the document venezia.htm, which you have on your screen. That consists of several parameters. Here I show it with line breaks, but that is of no significance. If your code looks quite different, you have probably saved the template wrongly (see the description on page later). Here you see the code as it should be:

     

    2.     Within this BODY code there are a number of color instructions. You can see that from the 6 digit color codes between the quotation marks. In this context letter F is a number as I will explain in a minute. Compare with Figure 19 on page 40.

    3.     Among others the document reads:

    BGCOLOR="#FFFFFF".

    4.     In plain english that means background color = white.

    5.     Try to change the code to BGCOLOR="#00F000"

    6.     Then test the page in the browser. Now the background is certainly not white; it is light green.

    See the following volor examples, but remember that the percentages indicate the strength of the individual color, as will be explained in the following section.:

     

    Hex-value

    Name

    Composed of

    #00FFFF

    Aqua

    0% Red, 100% Green, 100% Blue

    #DC143C

    Crimson

    86% Red, 7.8% Green, 23.4% Blue

    #FF00FF

    Fuchsia

    100% Red, 0% Green, 100% Blue

    #40E0D0

    Turquoise

    25% Red, 87.5% Green, 81.3% Blue

    #000080

    Navy

    0% Red, 0% Green, 50% Blue

    Figure 22. All the screen colors appear as mixtures of red, green and blue, each of which can be set from 0 to 100%.

    Understand the color codes

    The color codes are used a lot in HTML, so let us look at them briefly. I have mentioned before that colors are described with a 6 digit color code. The color code is written in the hexadecimal number system. That is a number system where each digit can assume one out of 16 values: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E and F.

    Actually the color code consists of three pairs of numbers, each of which is associated with the three basic colors red, green and blue (also called the RGB color system). Each of the three pairs can go from 00 to FF. That results in a total of 255 possible steps (since #FF=255).

    Figure 23. The screen RGB colors are formed from a mixture of three color rays, ech of which can be set in 255 steps.

    The desired color is a mixture of the three basic colors, and it is described with the three pair of numbers that are linked together in the 6 digit color code. The three colors can each be adjusted in intensity.

    The number #00 indicates 0 intensity for that color. The value #40 gives 25% intensity, #80 gives 50% and #C0 gives 75%.

    Try for yourself

    It may be difficult to understand the color mixtures based on a table like the one in Figure 22. That is due to different conditions, but the most confusing is that a higher percentage for an individual color component results in brighter colors. That is because the screen starts out being black.

    The pure black color is called #000000, since this means that all three colors are turned off. On the other hand pure white is called #FFFFFF, since white is created by turning both red, green and blue on to maximum (100%).

    1.     Now try to change the background color in venezia.htm with the five colors you see in Figure 22.

    2.     Test each color in the browser. Which is the brightest?

    3.     Try some other colors. Select the color value in the BODY code:

     

    4.     The find the section Other Elements in the HTML library and double click on the clip
    Color:

    5.     Now you can choose among a number of colors from this menu. Try the color peru:

     

    6.     Click on OK, then the color is inserted –as a hexadecimal value:

     

    7.     Test the page in the browser. The color peru is apparently a shade of brown.

    8.     You can also enter the colors by their name. Try to enter this (remember to delete the #):

    9.     Gold is one of the colors that the browser recognizes. Whether you specify it by name or by color code is actually immaterial. However it is that the color code gives the fastest retrieval in the browser – it does not ”have to think so much about it”.

    You do not need to know and remember all the different hex codes for different screen colors – just take it easy. You can get help for the codes in the clip Color! I took you through this exercise primarily to show you that there are multiple colors, and that they can be used on home pages

    Additionally the colors can be used both for text fonts and various backgrounds.


  • Next chapter.
  • Previous chapter.


  • HTML Tutorial Overview.

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