Lecture 3: Links and Navigation
1
Lecture Overview
• Directory Structure
• url
• Hyper links
2
Directory Structure
• Directory – object that holds files
• Also called “folder”
• File- basic unit of storage in
secondary memory.
• Subdirectory – a directory inside
another directory
3
Directory Structure
Local Disk (D)
Y1 Y2SITE Y3
BIOGRAPHIES
index.html
ACTORS MUSICIAN PRESIDENT
-bush.html
-Clinton.html
-presidents.html
Mozart.html
4
Directory Structure cont’d
• Determine the paths of the following files:
mozart.html,bush.html
Soln
• D:/Y2SITE/ BIOGRAPHIES/
MUSICIAN/Mozart.html
5
URL (Uniform Resource Locator)
• Standard addressing format for Internet
resources.
• Example:
• http://www.masenouni.ac.ke/IT/Y2/sem1/scs207.html
protocol host name path
document
6
URL cont’d
• made up of four parts:
1) Protocol: (e.g. http://, ftp://, gopher,
file:///, telnet:// etc.) This is the language the
server and your browser will communicate
with.
2) Host Name: the name of the server that
delivers to you the HTML documents you see
through your browser.
7
URL cont’d
• 3) Path: The folder in which the document
you see resides.
• 4) A File Name: This is the name of the
document you are viewing.
8
Hyper Links
• Areas on a web page that when clicked opens
another web page.
• Usually displayed in different colors and
underlined.
• Allows visitors to navigate between web
pages by clicking on words, phrases, and
images.
9
Creating Hyperlinks
• use the <a href=“” > (anchor) element.
• Syntax
• <a href="url">Hyper Text</a>
• Example:
<a href="http://www.w3schools.com/">Visit
W3Schools!</a>
10
Linking to another Web Site
• Must supply the full url.
Syntax
• <a href="url">Hyper Text</a>
• Example:
<a href="http://www.w3schools.com/">Visit
W3Schools!</a>
11
Linking to another Web Site cont’d
• Example
• <html>
• <head>
• <title> link to w3schools</title>
• <body>
• <a href="http://www.w3schools.com/">Visit
W3Schools!</a>
• </body>
• </html>
12
Creating Links to Pages on Your Own
Site
• Three situations arise:
1. Linking to another document in the same
directory
2. Linking to another document in a different
directory
3. Linking to different sections in the same page.
13
Creating a Link to Another Page in the
Same Directory
• Simply include the filename in the href=" "
attribute.
14
Linking to Another Page in the Same
Directory cont’d
• <body>
• <a href="clinton.html">Bill Clinton</a>
• <a href="bush.html">George Bush</a>
• </body>
15
2- Linking to Another Page in a Different
Directory
• 2 options when linking to a file in another
directory:
1. absolute and
2. relative URLs.
16
(a). Using Absolute URLs
• This refers to the exact “path” to the file’s location,
including all directories and subdirectories you have
to go through to get there.
• For example:
• <a
href=“c:/y2site/biographies/presidents/clinton.html"
>Bill Clinton</a>
• It is called absolute because it specifies a precise
address.
17
• Exercise: write code segment to create a
hyper link in the Clinton.html document
linking to the index.html file.
18
(b) Using Relative URLs
• a relative URL uses a kind of shorthand to tell the
browser to go backward one or more directories.
• Example: the link from clinton.html-to-index.htm
using a relative URL:
• <a href=”../../index.htm”>Home</a>
• The two dots followed by a slash are the code that
instructs the browser to move backward (or up) one
directory level.
19
Absolute URLs cont’d
• advantage – the link will work even if you
move the file to another directory.
• Example 2: create link in Clinton.html pointing
to Mozart.html:
• <a href="../Musicians/mozart.htm>Mozart
Biography</a>
20
3- Linking to different sections in the same page
21
Linking to different sections cont’d
• Common examples of linking to a specific
part of a page that you might have seen
used on web pages include:
1. “Back to top” links at the bottom of long pages
2. A list of contents for a page that takes the user to
the relevant section
3. Links to footnotes or definitions
22
Linking to different sections cont’d
• The destination anchor allows the page author
to mark specific points in a page that a source
link can point to.
• create a destination anchor using the <a>
element together with the id attribute.
23
Linking to different sections cont’d
• <h1>Linking and Navigation</h1>
• <a id=”URL”>URLs</a>
• <a id=”SourceAnchors”>Source Anchors</a>
• <a id=”DestinationAnchors”>Destination
Anchors</a>
• <a id=”Examples”>Examples</a>
24
Linking to different sections cont’d
• to add source anchors to link to these sections (destination
achors):
• <p>This page covers the following topics:
• <ul>
• <li><a href=”#URL”>URLs</a></li>
• <li><a href=”#SourceAnchors”>Source Anchors</a></li>
• <li><a href=”#DestinationAnchors”>Destination
Anchors</a></li>
• <li><a href=”#Examples”>Examples</a></li>
• </ul>
• </p>
25
Opening a Link in a New Browser
Window
26
Opening a Link in a New Browser
Window cont’d
• Add target=“_blank” attribute.
• Example :
<a href="mypage"
target="_blank">my first page</a>
27
Giving a Link Details
28
Giving a Link Details cont’d
• Add the title=" " attribute.
• Example:
• <a href=“ku.html” title=“Kenyatta
University">KU</a>
29
Creating E-mail Links
• Enable visitors to contact you from your
own site.
• Created with the mailto: protocol.
• Example:
• <a href="mailto:john@gmail.com">Email
Us!</a>
30
