co1552 – web application development linking pages - the basis of the web
TRANSCRIPT
CO1552 – Web Application Development
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” – 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
<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 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…<a name=”contents_page”></a><a name=”index”></a><a name=”chapter12”></a>
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:
<a href=”#contents_list”>Go to Contents</a> a href=”#index”>Go to Index</a> <a
href=”http://www.f1community.com/index.htm#chapter12”>Go to chapter 12</a>
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 <a> </a> 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