LESSON 29: INTRODUCTION TO IMAGEMAPS

  1. Study the index cards on Introduction to Imagemaps. I've included a hard copy of these index cards, for your convenience.
  2. Be sure that you can answer all the following questions, which are fair game for quizzes and tests.
    1. What is an imagemap?
    2. What is a "hot spot" in an imagemap?
    3. Give an example of how an imagemap might be used as a navigational device.
    4. List two general uses of imagemaps.
    5. Give an example of how an imagemap might be used to distribute additional information about parts of an illustration.
    6. Are there different types of imagemaps? If so, what are the types?
    7. Fill in the blank: For client-side imagemaps, all the information needed to make the map "work" is contained                   .
    8. Fill in the blank: For server-side imagemaps, some of the information needed to make the map "work" is supplied                   .
    9. In this class, are we learning to make client-side or server-side imagemaps?
    10. List three advantages to client-side imagemaps:
    11. Are there any disadvantages to client-side imagemaps? If so, comment.
    12. Which type of imagemap is self-contained in the HTML document?
    13. Which type of imagemap cuts down the load on the server, hence improving response time?
  3. Continue reading in the Weasel book in Chapter 11, Creating Links, pages 145 to 154 (up to "Imagemaps").
    Be able to answer all the following questions. As usual, you should have SimpleText, your personal file folder, and a browser set up on your screen, and you should be TRYING OUT everything that you're reading about!
    1. What does the HTML 4.01 specification say that a "link" is?
    2. What feature makes HTML unique among document markup languages?
    3. What is another name for a link?
    4. What does "a" stand for in the <a> tag?
    5. Why is "anchor" an appropriate word to describe a link?
    6. What is the general structure of a link?
    7. Write a link that says "Click here!". When you click, you are sent to "http://www.theplace.com".
    8. Can you use both absolute and relative pathnames in links?
    9. How can you use a graphic as a link?
    10. Write the code that would use the graphic "tigger.gif" as a link to "http://tigger.com".
    11. How can you tell if a graphic image is being used as a link?
    12. If you use a graphic as a link, and don't want the blue outline to appear, how can you turn it off?
    13. Write the code that would use the graphic "tigger.gif" as a link to "http://tigger.com"; the blue outline should be turned off.
    14. What does "URL" stand for?
    15. What are the three parts to every absolute URL?
    16. In the URL http://www.tigger.com/tigger2.gif what is the protocol identifier?
    17. What does "http" stand for?
    18. In the URL http://www.tigger.com/tigger2.gif what is the host name?
    19. In the URL http://www.tigger.com/mytig/small/tigger2.gif what is the path to the specific file?
    20. What type of URL must be used when you are linking to documents on other servers?
    21. When you are pointing to another document within your own site, what type of URL is usually used?
    22. By default, when you link to a page, what part of the page is displayed?
    23. How can you link to a particular place in a document?
    24. What does it mean to "name a fragment"?
    25. How do you "name a fragment"?
    26. Suppose a fragment in the current document has been named "mathcats". Write the code that would link to this fragment. The clickable area should be: "Read about math cats!"
    27. Can you change the color of links with HTML?
    28. Should you exercise caution in changing link appearance? Why or why not?
    29. If you DO choose to change link colors in a document, what two rules should you generally abide by?
    30. Change the color for this particular link to PINK: URL is "http://www.valentine.com"; clickable area is "Find love!"
    31. Create a SimpleText document with the following code:
      <STYLE TYPE="text/css">
      H1 {color: red}
      </STYLE>
      
      In the body, put a first-level heading. What color does it appear in? This is one way that style sheet information works!
    32. What is the style-sheet line for turning off underlines on hyperlinks?
    33. What is the style-sheet line for changing the color of anchors?
    34. Write the style-sheet line that would change link colors to red.
    35. When you position the mouse over a link, by default, what displays in the status bar at the bottom of the browser?
    36. Write the JavaScript code to do the following: link to "file.htm"; clickable area "Go here!"; status bar message is "Do you know where you are going?"
    37. Should you rely on status bar messages to clarify navigation? Why or why not?
    38. The author says (fill in the blank): "The problem with the hypertext medium is that when a user clicks on an interesting link on your page, they might             ." What is one currently popular solution to this problem?
    39. What is the name given to a second window that opens up when you click on a link?
    40. Write the code that will load "file.htm" in a new window when you click on it. The clickable area should read "File will open in a new window."
    41. Can you give a pop-up window a name, and then re-use this same pop-up window? If so, how do you do this?
    42. What bug does Netscape Navigator 4.0 have concerning named windows?

THE QUIZ OVER THIS LESSON WILL CONSIST OF:
Prepare for the quiz over this section by practicing below.
Questions are asked in random order.
You can generate a printable quiz with solutions.








How many problems would you like on the quiz? (54 max)