Linking Web Pages
Why is Hypertext Hyper?
Storyboarding Page Links (Site Map)
Path to Files
Various Links
Click Here :(
Page Footers
1
Objectives
• Explain how storyboards are used to develop
professional-looking Web pages
• Use anchor tags to create hyperlinks
• Establish intrapage target names in HTML code and use
these names as hyperlink references
• Give some ways to avoid the “click here”
• Create a hyperlink that opens the user’s e-mail
• List potential design elements for page footers
2
Why is Hypertext is Hyper?
A Hypertext Document <-- Links
Activates a particular part of the screen
perform some action;
• Moving to another part of the document
• Opening another document on the same Web Site
• Opening a document on a Web Site somewhere else in
the world.
3
Storyboarding Page Links
A Storyboard is a diagram
Illustrates how two or more Web pages, or
sections of a Web page, relate to each
other.
• Sequential Design
• Indexed-Sequential Designs
• Hierarchical Design
4
Storyboarding Page Links
Home
Link
Pg1
Link
Link
Link
Home
Hierarchical
Link
pg1
Link
Link
pg1
pg2
pg3
Link
Link
Link
pg4
pg2
Link
pg3
Link
Link
pg1
Link
Link
Link
Custom
Sequential
Indexed
Sequential
pg3
Home
Link
Link
Link
pg4
Link
pg2
Link
Link
5
Storyboarding Page Links
Sequential
Link one page to another
Indexed -Sequential
Link sections of text within a page
Hierarchical
related text does not need to be read in any
particular order
Custom Design
A subject requires a unique set of links
6
Anchor
<a>anchor<a>
Description: provides data to link images,
sounds, another area within the page, or to
another Web page
Type: Container
Link sections of text within a page
Some Attributes:
href, name, target, title,.....
7
Source Anchors
Used to indicate the origin of a link
The following source anchor container identifies a
link to the target HTML documeny frost.html
<a href = “frost.html”>Robert Frost</a>
(link to a Web page)
Link will be seen as
Robert Frost
8
href
Every source anchor contains the special attribute
Href,
which stands for “Hypertext Reference”
The href identifies the pointer, pathway, to the target of
the link. Example;
<a href = “poetry.html#RF”>Robert Frost</a>
(link to RF section of the Web page)
Link will be seen as
Robert Frost
9
Target Examples
• Intrapage link: a link to a different location within the
same Web page
<a href = “poetry.html#RF”>Robert Frost</a>
• Intrasystem link: link to other web pages stored on the
same Web server
<a href =
“http://www.bim.bilkent.edu.tr/~nsaglam/index.html”
>Nur Sağlam</a>
• Intersystem link: link to Web pages in other Web server
<a href = “http://www.metu.edu.tr”>METU</a>
10
Intrapage targets
Intrapage Target NAME and Source Anchors
<a name = “RF”>Robert Frost</a>
(name of the target part of the Web page)
<a href = “poetry.html#RF”>Robert Frost</a>
(link of the target part of the Web page)
or
<a href =
“http://poetry.org/poets/poetry.html#RF”>Robert
Frost</a>
DO NOT forget to define your folder structure relatively!
DO NOT forget how to write nested tags!
11
The “Click Here”
click here to go to the next page
Click here to send me e-mail
You can go to the next page
See pictures of my son
Send me some e-mail
12
mailto: protocol
mailto: is one type of Internet Protocol
<a href = “mailto:aikinci@bilkent.edu.tr”>e-mail</a>
13
Page Footers
Interesting list of links must appear at the end of every
HTML document – page footer
•
Organization’s name
•
Logo
•
Street Address
•
Telephone Number
•
Fax Number
•
Web weaver’s name
•
Date page was last updated
•
Links to related pages
14
title
It is used to display description of a link when it is
pointed:
<a href = http://www. bilkent.edu.tr title = “Bilkent
University Home Page”>Bilkent University</a>
15