Presentation on creating hyperlinks in HTML5

1. Linking
Between web pages and image files

2. Absolute vs Relative Links

Absolute Link
For example, to reach the site that supports this book you
would type in the URL in your browser:
http://webdevbasics.net/
This is the home page or index.html page for the site.
On a HTML web page this link is written using an anchor
element:
<a href=“http://webdevbasics.net/”>http://webdevbasics.net</a>

3. Absolute vs Relative Links

Absolute Link
If you were wishing to go to the page on this web site that supports
chapter 3 for this book you have a choice between writing an
absolute link or a relative link.
Below is what the absolute link looks like.
<a href=“http://webdevbasics.net/chapter3/index.html”> Chapter 3</a>

4. Absolute vs Relative Links

Relative URL

A relative URL indicates where the resource is in relation to the
current page. Rather than including the full URL for each page, you
can use a relative URL.

For example to link from the index page to the chapter 3 page:

Absolute link:
<a href=“http://webdevbasics.net/chapter3/index.html”> Chapter
3</a>

Relative link:
<a href=“chapter3/index.html”> Chapter 3</a>

5. Absolute vs Relative Links

Relative links should always be used when you are linking
from page to page within the same site.

Absolute links are necessary when you link to sites outside
of the current site.

6. Linking
Definition of Root
Jen’s Kitchen Web Site
Root (Starting Folder)
jenskitchen http://www.jenskitchen.com
about.html index.html

7. Linking
To place a link on the index.html page that links to about.html

Relative Link - almost always
the best to use:
<a href="about.html">About
Jen's Kitchen</a>

Absolute Link:
<a
href="http://www.jenskitchen.c
om/about.html">About Jen's
Kitchen</a>
jenskitchen
about.html index.html

8. Linking
Linking to a lower directory
jenskitchen

recipes
about.html
index.html
salmon.html topenade.ht
ml
To place a link on the
index.html that links to
salmon.html
<a
href="recipes/salmon.html">
Jen's Salmon Recipes</a>

9. Linking
Linking 2 directories down

To place a link on the index.html
that links to couscous.html.
jenskitchen
recipes
about.html
<a
href="recipes/pasta/couscous.html">
Jen's Couscous Recipes</a>
index.html
pasta
salmon.html topenade.ht
ml
couscous.html linguine.html

10. Linking
Linking to a higher directory
jenskitchen

recipes
about.html
index.html
salmon.html topenade.ht
ml
To place a link on the
salmon.html that links
to index.html.
<a href="../index.html">Jen's
Kitchen Home Page</a>

11. Linking
Linking 2 directories higher

jenskitchen
recipes
about.html
To place a link on the
couscous.html page
that links to index.html.
<a href="../../index.html">Jen's
Kitchen Home Page</a>
index.html
pasta
salmon.html topenade.ht
ml
couscous.html linguine.html

12. Linking
Site Root Relative Pathnames
/
jenskitchen

recipes
about.html
index.html
salmon.html topenade.ht
ml
a
To place a link on the
index.html that links to
salmon.html.
href="/recipes/salmon.ht
ml">Jen's Salmon
Recipes</a>

13. Linking
Same Pattern for Images
/
jenskitchen
images
logo.png

recipes
salmon.html
To place a link on
salmon.html that links to
logo.png.
<img
src="../images/logo.pn
g" alt="logo">

14. Directory Structure

15. Linking
Targeting a New Browser Window
Creating a link that opens in
a new browser window.
<a href="http://www.google.com"
target="_blank"> The Google
target="_blank"
Web Site </a>
Value
Description
_blank
Open the linked document in
a new window
_self
Open the linked document in
the same frame as it was
clicked (this is default)
_parent
Open the linked document in
the parent frameset
_top
Open the linked document in
the full body of the window

16. Linking
To a specific point on a page
1.
Name the Destination
<h1 id="top">This is the text on the page</h1>
id="top"
2.
To link to the Destination
<a href="#top">Go to the Top</a>
href="#top">

17. Mail Links
<a href="mailto:mfcarter2@gmail.com"> Contact Mark </a>
Encryption of mailto:
http://www.katpatuka.org/pub/doc/anti-spam.html
http://jumk.de/nospam/stopspam.html