Transcript Lecture 5 - Designing for the Web

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 hypertext.
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



Insert a named anchor (eg, “top”) RIGHT at the
top of the page


Better than forcing the user to scroll all the way back up
This might ne where your navigation or page control
section is!
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