Transcript Lecture 9
Navigation Structures: Linking Pages The Basis of the Web Anchors <a>…</a> In various forms, anchors provide navigation: Link one document to another document Identify bookmark points in a page Link to bookmark points in a page. •Anchors are the basis of hyper-text. Link from one page to another <a href=”apage.htm”>Load a page</a> <a href=“http://www.f1community.com/apage.htm”> Load a page</a> In the above two examples, the text “Load a page” is displayed by the browser in blue text and underlined. When the text is clicked-on, the named page is loaded by the browser. Open a page You can write an anchor that will open a page in the same or a different browser window: “Target= _blank” – target URL (web page) is opened in a new browser window. _parent” – target will open in the parent frameset _self” – target will open in the same window or frame _top” – target will open in the full body of the window If you do not define the target, the new page replaces the old within the active browser window or frame (ie default is “_self”) Sometimes good and sometimes bad! You will find “_blank” and “_self” the most useful Link using an image Join <a href=“join.htm”> <img src=“joinbutton.gif” alt=“link to joining instructions” border=“0”> </a> In the above example, an image called “joinbutton” is displayed on the browser. When the user clicks on the image, s/he is automatically taken to the page defined in the image’s href attribute. Note that we have to have border=”0” within the image tag to prevent a blue border showing round the button shape what formats might the button be saved in to show as an oval and not a rectangle? Define a bookmark within a page Used mainly in very long pages - often academic ones Try to avoid very long pages… The following three examples define points that are sections within a document. <a name=”List_of_contents”></a> <a name=”section_1”></a> <a name=”ingredients”></a> NOTE: there is no indication of any text between the tags here, so nothing appears on the page in the browser. HTML editors (Dreamweaver, Frontpage, Netscape Composer) will display an icon in the editor screen only Effects of bookmark anchors The name and anchor make no difference whatsoever to the formatting of your web page. Named bookmark anchors are used solely to define a position in your web page. They are invisible except to the browser. Jumping to anchor points You can now link to your named anchors by using tags such as: <a href=”#list_of_contents”>Go to Contents</a> a href=”#section_1”>Go to Section 1</a> <a href=”http://www.f1community.com/index.htm #ingredients”>Go to Ingredients list</a> These will display as underlined, blue text. When a user clicks on any of these links the browser window will show the part of the document defined by the named anchor. Back to top In a long document, you may want to use “go to top” links from the lower parts of your pages Insert a named anchor (eg, “top”) RIGHT at the top of the page rather than forcing the user to scroll all the way back up. Link to it from the bottom of the page You will need make a long page and then use named anchors to understand fully how to use them. However, ideally for business use you will keep pages short So most of your links will be between pages. Linking between pages You have two pages about Big Cats Index.htm (the home page) tigers.htm They link to each other Index.htm tigers.htm Linking between pages Index.htm carries at least one link to tigers.htm: <A href=“tigers.htm”>Tigers Page</a> Tigers.htm carries at least one link to the Home Page: <A href=“index.htm”>Home Page</a> Index.htm tigers.htm Linking between pages There are several ways in which you can design a navigation structure between your pages Linear Branching Mesh or matrix Linear structure Index.htm tigers.htm lynxes.htm OK for ‘stories’ lions.htm And then and Then and THEN… Often used in photo galleries Linear structure main page similar pages similar pages similar pages similar pages similar pages Only 3 links are needed per page – “Back” and “Next” and “Home” But it doesn’t always make sense to use this It might not fit the logic of the content Branching Structure Index.htm tigers.htm Indian.htm lions.htm siberian.htm lynxes.htm eurasian.htm N_american.htm Branching structure This structure is much more logical for the subject of the Big Cat web site Home page links to Tigers, Lions and Lynxes Tigers links to Indian and Siberian tiger pages, and back to Home Indian and Siberian link to each other and back to Tigers; etc Mesh or matrix structure page page page main page page page page Probably the commonest structure on the Web Every page is accessible from every other Mesh or matrix structure page page page main page page page Copy your complete list of links onto every page At top or side, not bottom of page Edit the list for each page, and deactivate the link belonging to that page Don’t remove it totally page Leave it there as a clue to the page the user is on Sample “matrix” menus Home Romans Dark Ages Vikings Normans Home Romans Dark Ages Vikings Normans Home Romans Dark Ages Vikings Normans As seen on different pages in the matrix Summary Links and anchors <a href> </a> <a name=“name”></a> are the basis of hypertext They are the bones of the WWW Practise linking pages You need to practise creating links to set up pages in a pre-designed pattern Design (diagram) a simple navigation structure needing 3 or 4 pages Create the pages (keep them simple but identifiable) and link them This is a tutorial exercise today! Test in a browser(s)