Copyright Michael Karbo, Denmark, Europe.

  • Next chapter.
  • Previous chapter.

    Chapter 11. More about graphics

    Transparency is a concept that you neeed to be aware of, since Web graphics in GIF format can be transparent.

    Transparency means that certain areas in the picture are transparent, and that can be used in numerous ways in web design. Here comes a small exercise that demonstrates the effect. At the same time we will look a little more on the clips that are hidden in the HTML library.

    A digital zebra

    First do this exercise, where we insert an ordinary piece of graphic.

    1.   Open the document template2.htm.

    2.   Save the document as zebra.htm  in the site1.folder It is important that you use the right folder!

    3.   Open the home page for this book in the browser and click on the link The two zebra pictures:

    4.   See the two pictures – they look alike, right? They are not!. Save them both in the site1 folder (right click on both pictures and select Save As …)

    5.   Switch to NoteTab and give the page the heading A digital zebra …:

    6.   Insert the picture zebra.gif in this way: Find the Quick Tags section in the HTML library and double click on the img clip:

    7.   That is a simpler way to insert graphics. You just need to enter the file name
    zebra.gif at the cursor:

    8.   Save the page and look at it in the browser. I am sure it looks quite neat.

    About the HTML library

    Here follows a brief explanation that you ought to read: The HTML codes can be inserted in many ways. You could write them yourself, but that takes too much time. The easiest is to use NoteTab’s HTML library, which is a collection of so-called clips. Each ”clip” can insert  certain HTML code. But as you have seen there is often more than one clip that can result in the same code.

    If we look at the IMG code, which is used to insert graphics in the HTML document, then NoteTab offers two clips, that will insert that code. They are both found in the HTML library:

  • In the Image Elements section is the clip Image. When you activate that clip a larger dialog box open (see page 22). That gives you access to control all the HTML codes possible parameters.

  • If you just need to insert a very simple version of te code (like in the previous exercise), you need to use the Quick Tags session. There is a clip called ”img” that gives a direct insertion of the most essential code, which you complete by entering the file name.

    This ”multipage functionality” is very characteristic for the NoteTab program. There are many ways to insert HTML codes, and that makes the program extremely flexible and fast to work with.

    A transparent picture

    We continue with the zebra exercise.

    1.   Now try to change the background color to ”gold”:

    2.   Save the page and test it. Now you see the zebra on a white background on top of the golden background – I do not think that is pretty!

    3.   So adjust the IMG code to zebra_t.gif like here. That is the name of the transparent version of the zebra picture:

    4.   Save the page and test it. Can you see that the zebra picture background is transparent, so the golden background color covers the whole background – also that which is seen below the animal?

    5.   Close all open documents by pressing Control+Shift+F4.

    6.   Close NoteTab with Alt+F4. Now take a break. Get a cup of coffee!

    A little about transparent graphics

    Normally you would use the JPEG file format for photos, since it compresses much better than GIF does (the image files occupy less space). When I in the example selected GIF for the zebra it is because the JPEG format cannot hold transparent areas; but GIF can.

    Figure 28. The photograph is partially transparent. That means that the home page back­ground color ”shines through” large parts o the photograph.

    The picture is saved as a GIF file, since the JPG format does not allow transparencies.

    If you want to make pictures with trans­parencies, you need a picture processing program. In Photoshop you could use the tool Magic wand to remove selected areas from the picture:

    The ”empty” areas become transparent, when you choose to save the picture in the GIF format, and select transparency:

    Figure 29. All image editing programs can save partially transparent GIF pictures; here is at clip from Photoshop. Notice the check mark in the transparency field.

  • Next chapter.
  • Previous chapter.

  • HTML Tutorial Overview.

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