CO1552 – Web Application Development Linking Pages - The Basis of the Web

Anchors … 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 Load a page 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 ” – web page is opened in a new browser window. _parent ” – target URL will open in the parent frameset _self “– target URL will open in the same window or frame _top ” – target URL 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 Sometimes good and sometimes bad to use this feature!

Link using an image 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 href attribute. Note that we have to have border= ” 0 ” within the image tag to prevent a blue border showing round it

Define a bookmark within a page Used mainly in very long pages - often academic ones Try to avoid very long pages … The above three examples define points that are sections within a document. NOTE: there is no indication of any text between the tags, so nothing appears on the page in the browser. HTML editors (Dreamweaver, Frontpage, Netscape Composer) display an icon in the editor screen

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 Useful for navigating a large document – perhaps jumping from a table of contents to various sections

Jumping to anchor points You can now link to your named anchors by using tags such as: Go to Contents a href= ” #index ” >Go to Index Go to chapter 12 These will display underlined, blue text When you click on any of these links your browser will shift automatically to the part of the document defined by a 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 Better than forcing the user to scroll all the way back up This might ne where your navigation or page control section is! Insert a named anchor (eg, “ top ” ) RIGHT at the top of the page Link to it from the bottom of the page You need to make a long page and then use named anchors to understand fully how to use them – have a go …..

Practise Links are the basis of hypertext They are the bones of the WWW You need to practise creating links to set up pages in a pre-designed pattern Design 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 – try Firefox and Internet Explorer