Copyright Michael Karbo, Denmark, Europe.
Now I think that you are ready to make your own home pages. If you have done all the exercises in the first two parts of this book, you have learned a number of the most important HTML codes that you need to know. You have seen how you can design a web site, that can include different HTML documents where are links from one to another. It is all tied together in a frameset.
On the following pages you can read about a number of more particular subjects. Those are small and larger tricks and tips that you might be able to use on your own pages.
You have previously made a small home page with a picture of a zebra. Actually you have two versions of the zebra picture on your pc; the one is transparent, and the other one is not (see page 59).
Now you are going to change the home page so both zebra pictures are opened alternately – depending on the mouse cursor movement.
1. Open the HTML document zebra.htm in NoteTab (that is in the page1 folder).
2. On the home page for this book you find a link to the code that you need. Click on the link Code and buttons for Rollover effects:
Then you get to a page where you can retrieve the code.
3. The code is in two parts. Select the first part (code to the HEAD-section):
4. Make a copy. Shift to the document zebra.htm in NoteTab and place the cursor above the end code /HEAD. Then insert a blank line:
5. Then insert the copy with Control+v.
6. Now 6 lines with code area added, which include the two file names (zebra.gif and zebra_t.gif):
That was the first code portion.
7. Now you are going to delete the existing line of IMG code in the HTML document’s BODY section:
8. You have deleted the IMG code, so now there is no code for any picture. In stead a new line appears.
9. Select the second code portion (Code for the BODY section) in the home page for this book:
10. Make another copy and shift back to NoteTab. It needs to be placed in the BODY section instead of the IMG code that you just deleted. Then it will look like this:
11. Save the document, and test it in the browser.
On the surface the home page looks the same with the transparent zebra picture, where you see the yellow background color. But try to move the mouse cursor in over the picture. Then you see the other (non transparent) version!