Scribd
Upload
17 views

Lecture 4 Links and Navigation

1) The document discusses directory structures, URLs, and hyperlinks used for navigation on websites. 2) URLs contain the protocol, host name, path, and file name to uniquely identify web pages. Absolute URLs specify the full path while relative URLs use shorthand. 3) Hyperlinks allow users to navigate between pages by clicking text or images linked to other pages using the <a> tag and href attribute. Links can target pages in the same or different directories on a site.

Uploaded by

wanderaignatious
Copyright
© © All Rights Reserved
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
17 views

Lecture 4 Links and Navigation

1) The document discusses directory structures, URLs, and hyperlinks used for navigation on websites. 2) URLs contain the protocol, host name, path, and file name to uniquely identify web pages. Absolute URLs specify the full path while relative URLs use shorthand. 3) Hyperlinks allow users to navigate between pages by clicking text or images linked to other pages using the <a> tag and href attribute. Links can target pages in the same or different directories on a site.

Uploaded by

wanderaignatious
Copyright
© © All Rights Reserved
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 30

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:[email protected]">Email
Us!</a>

30

You might also like