You have begun to learn to create individual HTML pages that conform to a set of standards. Now you will begin to learn how to organize web sites so that individual pages are related to other pages in an orderly manner. This week you will learn to organize sites using a tree structure and using Venn Diagrams.
Suppose you want to create a web site for a bookstore. The store sells many types of books, so its site must be broken down into pages that provide access to various types of books. In this case suppose the two major categories are fiction and non-fiction. Each of these categories can be broken into subcategories. In this case you see some of these subcategories for the fiction section.
Once you have created the complete tree (or as complete a tree as possible since in the case of the bookstore you may end up generating pages as a result of a search). You can create a page for each node in the tree and for each branch from a parent node to a child node you can create a link. While the user can use their browsers go back feature to return to various nodes in the tree, you can make it easier for the user by providing a graphic image of the sequence of links the user has followed. Suppose for instance that the user has entered through the non-fiction page, then went to the biography and finally the standard biography page as shown below.
You can represent this path on the standard biography page as the following:
main --> non-fiction --> biography --> standard biography
Here each of the nodes along the path to the current node has a link in the sequence above. This sequence is placed right in the standard biography page since this is the only way to get to this page. If you have a page that includes autobiographies of scientists and this page can be considered a descendent of both biographies and one of the science pages. Users can get to this page by two different routes. While you could make two diagrams (one for each path), in a real on-line business there may be many paths to a given page. One way to provide the customer with an overall view of paths to a given point is the map.
Maps as their name suggests are graphic representations of the site. This may in fact be a real map when the site is a guide to a location such as a university campus, actual store or any other geographical entity. In an on-line business, you could create a fictional map of a store (each department in its own area) or in the case above where you have overlapping areas you can use Venn diagrams. If a customer of our on-line bookstore is looking for a biography of Mme Currie. They would arrive at a page containing other biographies of scientists. This page might also be accessed from a page of books on physics. The diagram below shows the user all routes they might have taken. From this the user can either go back or to other related pages. In each case there will be a similar diagram indicating the page location in relation to other pages.
While this map illustrates the relation between pages, to make it useful there has to be a way to go to the pages depicted. HTML has the MAP tag. The following map might represent the page you are reading.
The code for this map follows. You will create maps during in-class 5.
<CENTER><IMG SRC = "week3_4.gif" USEMAP = "#CourseMap"></CENTER> <MAP NAME = "CourseMap"border="0"> <AREA SHAPE = "POLY" COORDS = "88, 82, 88, 82, 57, 87, 114, 80, 106, 81, 135, 84, 163, 105, 167, 125, 132, 151, 79, 160, 39, 146, 20, 122, 31, 99, 61, 82" HREF = "week1.htm"ALT="Link to Week1"> <AREA SHAPE = "POLY" COORDS = "256, 78, 256, 78, 275, 81, 295, 88, 312, 92, 327, 108, 322, 131, 294, 151, 249, 160, 203, 147, 183, 129, 181, 106, 204, 86, 235, 83" HREF = "week2.htm" ALT="Link to Week2"> <AREA SHAPE = "POLY" COORDS = "347, 173, 347, 174, 372, 169, 389, 183, 401, 195, 400, 212, 393, 225, 363, 228, 343, 227, 320, 216, 316, 199, 323, 185, 336, 170, 355, 173" HREF = "inclass5.htm" ALT="Link to InClass 5"> <area shape="default" nohref> </MAP>
While maps provide a graphic way to display your location and provide easy access to the other pages on the site, they are not visible in text only browsers. This is an increasing problem with palm-sized machines. Make sure to include alternate text that indicates the link for each area.
Each group will present a 10 minute summary of: