exercises 2

1. Modify the IQTravel_3a.html document by adding a hyperlink near the end of the document. Place the following sentence: "Find out more about one of our favorite islands." in the document where the darker type is the clickable portion. Locate a "home page" for some island of your choice on the internet and make that the target of the hyperlink.
exercise 1
3. If you have access to a printer, print out the document from the previous exercise. Print the original version of the same document and compare.
New version: Find out more about one of our

favorite islands, or visit the

Web-Archipelago site, just one of the places where you
can gain more information about other island adventures.
Old version: Visit the
Web-Archipelago site, one of the places where you
can gain more information about other island adventures.

5. Locate a site containing small icons (you can start from the Web-Archipelago site) and find an appropriate arrow icon that you can use to take you back to the top of the page as in the previous exercise. Turn the icon into an explicitly-anchored hyperlink to take you to the top of the page in the IQTravel_3b.html Web document. Try the use of the BORDER attribute to see the effect.
exercise 5--with bordersexercise 5--without borders
7. Modify the townMap.html document to provide for a default region in which mouse clicks will result in a link to a document (just create a simple test one) whose name is neighborhoods.html.
exercise 7
Some browsers may not support the default region in client-side image maps.
Longer Voyage Exercises
9. Start with the townMap.html document and use the coordinates of the clickable regions associated with Brent's Restaurant and the Cowboy Museum in the following way. Suppose the street from the corner on which Brent's Restaurant is located to the corner on which the Cowboy Museum is located is known as Stevens Creek Plaza. In the client-side image map implementation create a narrow rectangular area that contains this street. When the user clicks in this region, link to a test document called plaza.html. Make sure your implementation works correctly. In particular, let clicks in the restaurant and museum have precedence over the plaza.
exercise 9
11. In the previous exercise, use small icons to identify each list item and make the icon the active element to click.Exercise #2:In this exercise you will develop an HTML notebook where you can keep track of useful Web sites containing material that you can use for your HTML documents.
(a) Create a table of contents at the beginning of the document (use an ordered list):1. HTML language elements2. Images and textures3. Graphical elements4. Useful techniques
[Language elements should be about tag syntax and other things that will help you quickly locate material you need for Web development. Images and textures are either sites where you can get image elements that you can use as background images or links to images themselves that you may have downloaded and placed in a graphics directory. Graphical elements are sites containing collections of things like small icons or perhaps icons themselves that you have downloaded and placed in an icon directory. Useful techniques should be links to sites that contain information about things like forms or interesting techniques for doing interesting things that you might want to use someday.]
(b) Make these topics hyperlinks to explicit anchors within the notebook document.
(c) In each of the sections provide a list of items containing links to locations relating to that topic. Provide a few lines that will tell you what's at the other end of the hyperlink.
HTML notebookNote: to check if the explicit anchors work, make your browser window small
13. Download the image: stonehenge.gif from the textBook graphics area of the Web-Archipelago. The following figure identifies certain key points in terms of their pixel coordinates relative to the upper left corner of the image.1: (198, 133) 2: (201, 180) 3: (214, 183) 4: (216, 133) 5: (132, 37) 6: (138, 65)7: (230, 68) 8: (274, 58) 9: (374, 54) 10: (374, 26) 11: (211, 22)
We'll create a clickable image such as one might use in a computer game. We want to let the region marked by the four points 1 - 4 be a portal into another realm of the game. The dark horizontal stone resting atop the others and marked by the points 5 - 11 is a lethal area. Users who click here will perish. Clicking anywhere else in the image will leave users in a lost state.
First set up a directory called mystery in which you will place four HTML documents:(a) an HTML document that will contain the stonehenge picture. Above picture place the following text as a level 1 header (centered):
Mystery jumpBelow the picture, center the following text:
Click in the picture and hyperlink into the mystery.Beware of the hidden danger!
(b) an HTML document (perish.html) that is completely black except for white text (centered---level 1 header)
You have perished
(c) an HTML document (realm.html) that is completely white with red text (centered---level 1 header)
Enter into the realm
(d) an HTML document (lost.html) that is gray with black text (centered---level 1 header)
You are lost
Create a client-side clickable image from this image and create links so that users who click in the portal area go to the realm document. Those who click on the dangerous stone go to the perish document and all other clicks go to the lost document.

exercises

Exercises
1. Start with the HTML document: simple.html and modify it so that the title is "My home page". Replace the "Hello, WWW World." string with an appropriate greeting for you.
exercise 1
3. Change the header tags in the file IQTravel_2c.html so that the first header ("Island Quest Travel") is rendered using the H1 tag and each of the services headers are rendered using the H2 tag.
exercise 3
5. Modify the IQTravel_2d.html file using an ordered list instead of an unordered list for the list of services. Look up the OL tag in Appendix 1 and use uppercase roman numbering.
exercise 5
7. Find a Web site where graphical icons are available for free downloading. Locate an icon to represent the "under construction" sign you might see along the highway. Place it in the simple.html file so that it is centered at the top of the page.
exercise 7
9. Find a location on the Web that has small images that can be used for texture and replace the background image in IQTravel_2g.html. Try to find a texture appropriate to the theme of the Island Quest Travel customer.
exercise 9
11. Modify IQTravel_2h.html to add an appropriate META tag to supply keywords to a visiting search engine.
exercise 11
Longer Voyage Exercises
13. Browsers are designed to ignore tags that they don't understand and to try to make reasonable choices when you forget certain items. Try starting with the simple.html file and try the following:
leave off the HTML tag and its companion closing tag.
put the HTML tags back in and leave out the closing /TITLE tag.
put the /TITLE tag back in and leave out the opening and closing BODY tags.
put the opening BODY tag back in but leave out the /BODY tag. Report your findings.
exercise 13 (a)
exercise 13 (b)
exercise 13 (c)
exercise 13 (d)
15. In the IQTravel_2b.html file replace all occurrences of

by

. Is there any difference in the document viewed in the browser?
exercise 15
17. How would you modify the IQTravel_2d.html file to make each letter of the main title header a different color?
exercise 17
19. Start with the IQTravel_2f.html file and modify it so that the text "Island Quest Travel" that appears in italics at the beginning of the document appears two font sizes larger and in red. Note the design flaw having the font in the logo be different than the font in the text. This would have to be corrected by having the appropriate font used in the creation of the logo image.
exercise 19
21. Change the background color of the IQTravel_2f.html file to "teal". How would you fix the document to make it readable?
exercise 21
23. If you have access to graphical tools, try to put together the home page for a Web site for a small business (fictitious or otherwise) in your city or town (a toy store would be a fun site). See if you can place all the information in about one screenful as viewed in the browser. In the next chapter we will see how to link documents so, for now, plan on leaving lower level details to other pages. See if you locate free graphical elements on the Web that you have permission to use and download them to your hard drive. Work with the placement of graphical elements and text to make it easy for viewers to locate the information they are looking for.
exercise 23