Scribd
Upload
10 views

lecture02_wthtml_links_and_navigation

This lecture covers the fundamentals of HTML links, including internal and external links, their syntax, and attributes. It explains how to structure directories for web applications and provides examples of various link types, such as download and mailto links. Additionally, it discusses how to reference specific locations within documents using internal references.

Uploaded by

horizonmart786
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
10 views

lecture02_wthtml_links_and_navigation

This lecture covers the fundamentals of HTML links, including internal and external links, their syntax, and attributes. It explains how to structure directories for web applications and provides examples of various link types, such as download and mailto links. Additionally, it discusses how to reference specific locations within documents using internal references.

Uploaded by

horizonmart786
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 47

Web Engineering

Lecture 07

Modeling web applications

2
HTML Links and navigation

3
Summary of Previous Lecture
• What is HTML?
• Basic Structure of HTML page
• Body tag attributes
• Text formatting tags
• Lists

4
Outline
1. How to link between pages of your site
(internal links)
2. How to link to other sites (external)
3. How to structure the folders on your web
site
4. Internal document references
5. Link attributes
6. Other Type of links
5
1. HTML links
• HTML links are hyperlinks.
• A hyperlink is a text or an image you
can click on, and jump to another
document.

6
1. HTML links
• HTML Links - Syntax
• In HTML, links are defined with the <a> tag:
• <a href="url">link text</a>

• The href attribute specifies the destination


address .
• The link text is the visible part

7
1. HTML links
• HTML Links – Example
• <a href="http://
www.w3schools.com/html/">Visit
our HTML tutorial</a>

8
1. HTML links
• The crux of HTML is its capability to
reference countless other pieces of
information easily on the internet
• A hyperlink is a text or an image you can
click on, and jump to another document.
• In HTML, links are defined with
the <a></a> tag

9
1. HTML links - Colors
• When you move the mouse over a link,
two things will normally happen:
– The mouse arrow will turn into a little hand
– The color of the link element will change

10
1. HTML links
• By default, links will appear as follows in
all browsers:
• An unvisited link is underlined and blue
• A visited link is underlined and purple
• An active link is underlined and red

11
1. HTML links
• For visited link
• <body vlink=“red”>
• For active link
• <body alink=“pink">
• For color of link
• <body link=“ebl">

12
1. HTML links
• Example
•<style>
a:link {color:green; background-color:transparent; text-decoration:none}
a:visited {color:pink; background-color:transparent; text-decoration:none}
a:hover {color:red; background-color:transparent; text-decoration:underline}
a:active color:yellow; background-color:transparent; text-decoration:underline}
</style>

13
1. HTML links
• When you link to another page in your
own web site, the link is known as an
internal link
• When you link to a different site, it is
known as an external link
• Some other form of links are also discuss
in this lecture.

14
1.1 Internal links
• Anything between the opening <a> tag
and the closing </a> tag becomes part of
the link that users can click in a browser
• A Local link uses a page name (including
sub-directories if needed) as the target. It
is “local” to the current server.

15
1.1 Internal links…
• Href
• href attribute specifies the URL of the page
the link goes to.
• If the href attribute is not present, the <a>
tag is not a hyperlink.

16
1.1 Internal links…
• Href
• URL used in Href can be
• The URL of the link. Possible values:
• An absolute URL (external)
• points to another web site (like
href="http://www.example.com/default.htm")
• A relative URL (local) –
• points to a file within a web site (like
href="default.html")
17
1.1 Internal links…
• Href
• URL used in Href can be
• Link to an element with a specified id
within the page (like href="#top")
• A script (like
href="javascript:alert('Hello');")

18
1.1 Internal links…
• To link another page, href attribute of
opening tag of <a> is used
• the value of the href attribute is the name
of the file you are linking to
• For example:
• <a href=“abc.html”> Click here </a>

19
1.1 Internal links…
• The A stands for Anchor.
• The anchor tag tells the browser to anchor
or to attach to something else. Every Anchor
tag must have a closing or end tag (</A>) to
signal the end of the anchor.
• HREF stands for Hypertext REFerence. It
means that “this is where the link is going
to.

20
1.1 Internal links…

21
1.1 Internal links…

22
1.1 Internal links…

23
1.2 External links
• To link the page of another website, again
the href attribute of opening tag of <a> is
used
• the value of the href attribute is the full
web address for the page you want to link
to rather than just the filename
• <a href="https://www.google.com.pk"> Click here
</a>

24
1.2 External links …

25
2. Directory Structures
• A directory is simply another name for a
folder on a web site
• The root directory (or root folder) is the main
directory that holds the whole of your web
site
• A subdirectory is a directory that is within
another directory
• A parent directory is a directory that contains
another directory
26
2. Directory Structures…

Entertainment
index.html
Songs
audio.html
Videos video.html
videos.html

Films
englishfilms.html
urdufilms.html

27
2.1 Referencing a web page
• Same Directory: When you want to link to, or
include, a resource from the same directory,
you can just use the name of that file
• Subdirectory:
– sub-directory/…/file-name
• Parent directory:
– ../file-name

28
2.1 Referencing a web page…
Entertainment
index.html Songs
audio.html
Videos video.html
videos.html
Films
englishfilms.html
urdufilms.html

• <a href=“englishfilms.html”>…..</a>
• <a href=“Videos/Films/englishfilms.html”>….</a>
• <a href=“../../Songs/audio.html”>….</a>

29
3. Internal document references
• Also be called page jump, u can make this
jump with two simple steps
• Step 1
• Assign a name to the link you want to
reference
• E.g. <A NAME=”your bookmark name“></A>

30
3. Internal document references
• Step 2
• add a link in anyplace in your page to let the
user move to your bookmark point from it
• E.g. <A HREF=”# your bookmark name “> Add
the text to be displayed and clicked by the
user</A>

31
3. Internal document references

32
3. Internal document references

33
4. Referencing another page at specific location

Referring other pages also involves 2 steps


Step 1: Assign a name to the link
e.g.
<a name=“location-name”>
Step 2: Link to that page
<a href=“pagename#location-name”>….</a>

34
4. Referencing another page at specific location

35
4. Referencing another page at specific location

36
5. More attribute for <a>
• target:
• The target attribute specifies where to open
the linked document.
• This example will open the linked document in
a new browser window or in a new tab:
– <a href=“abc.html” target=“_blank”>….</a>

37
5. More attribute for <a>
• target:
• Other values of target are:
_blank Opens the linked document in a new window or tab

_self Opens the linked document in the same frame as it was clicked (this is default)

_parent Opens the linked document in the parent frame

_top Opens the linked document in the full body of the window

framen Opens the linked document in a named frame


ame

38
5. More attribute for <a>
• accesskey:
To access the link
– <a href=“abc.html” accesskey=“a”>…..</a>
• tabindex:
Which index shall be selected
– <a href=“abc.html” tabindex=“1”>….</a>
• title:
Show title of link
– <a href=“abc.html” title=“it,s a link”>….</a>
39
5. More attribute for <a>…

40
Other type of links
• Download Link
• The download attribute specifies that the
target will be downloaded when a user
clicks on the hyperlink.
• This attribute is only used if the href
attribute is set.
• There are no restrictions on allowed
values
41
Other type of links
• Download Link
• This link is not supported in Internet explorer
and Safari browser
• E.g.
• <a href="/images/
myw3schoolsimage.jpg" download>
• It can also be written as
• <a download="filename">
42
Other type of links
• Mailto:
• Is used to send email
• E.g.
• <a href="mailto:[email protected]">J
on Doe</a>

43
Other type of links
• Mailto Example:

44
Summary
• Use the HTML <a> element to define a link
• Use the HTML href attribute to define the link
address
• Use the HTML target attribute to define where
to open the linked document
• Use the HTML <img> element (inside <a>) to
use an image as a link

45
Summary
• Internal links
• External links
• Directory Structure
• Internal document reference
• Some attributes of <a>
• Other types of links

46
THANK YOU

You might also like