Scribd
Upload
2 views

Lect12(HTML_links_and_navigation)

The document provides an overview of HTML links and navigation, covering internal and external links, directory structures, and internal document references. It explains how to use the <a> tag for linking and discusses various attributes that can enhance links. Additionally, it includes a summary of key topics and references for further reading.

Uploaded by

chabdulmanan8953
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
2 views

Lect12(HTML_links_and_navigation)

The document provides an overview of HTML links and navigation, covering internal and external links, directory structures, and internal document references. It explains how to use the <a> tag for linking and discusses various attributes that can enhance links. Additionally, it includes a summary of key topics and references for further reading.

Uploaded by

chabdulmanan8953
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 22

HTML Links and navigation

1
Summary of the previous
lecture
• What is HTML?
• Basic Structure of HTML page
• Body tag attributes
• Text formatting tags
• Lists

2
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

3
1. HTML links
• The crux of HTML is its capability to
reference countless other pieces of
information easily on the internet
• 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
4
1.1 Internal links
• The element <a> is used to link another
document
• Anything between the opening <a> tag
and the closing </a> tag becomes part of
the link that users can click in a browser

5
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>

6
1.1 Internal links…

7
1.1 Internal links…

8
1.1 Internal links…

9
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>

10
1.2 External links …

11
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
12
2. Directory Structures…

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

Films
englishfilms.html
urdufilms.html

13
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

14
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>

15
3. Internal document references
Step 1: Mark locations
<A NAME=‘’LOCATION1”></A>
Step 2: link
<A HREF=“#LOCATION1”>……</A>

16
3. Internal document references

17
3. Internal document references

18
4. More attribute for <a>

• accesskey:
– <a href=“abc.html” accesskey=“a”>…..</a>
• tabindex:
– <a href=“abc.html” tabindex=“1”>….</a>
• target:
– <a href=“abc.html” target=“_blank”>….</a>
• title:
– <a href=“abc.html” title=“it,s a link”>….</a>

19
4. More attribute for <a>…

20
Summary
• Internal links
• External links
• Directory Structure
• Internal document reference
• Some attributes of <a>

21
References
• Chapter 2, Beginning HTML, XHTML,CSS,
and JavaScript, by Jon Duckett, Wiley
Publishing; 2009, ISBN: 978-0-470-
54070-1.

22

You might also like