HTML Linking Overview

LinkingBetween web pages and image files

Absolute vs Relative Absolute vs Relative LinksLinks

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>

Absolute vs Relative Absolute vs Relative LinksLinks

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>

Absolute vs Relative Absolute vs Relative LinksLinks

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>

Absolute vs Relative Absolute vs Relative LinksLinks

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.

LinkingLinkingDefinition of RootDefinition of Root

jenskitchenjenskitchen

index.htmlindex.htmlabout.htmlabout.html

Jen’s Kitchen Web SiteRoot (Starting Folder)http://www.jenskitchen.com/

LinkingLinkingTo place a link on the index.html page that links to To place a link on the index.html page that links to

about.htmlabout.html

Relative Link - almost always the best to use:<a <a href="about.html">Abohref="about.html">About Jen's Kitchen</a>ut Jen's Kitchen</a>

Absolute Link:<a <a href="href="http://www.jenskitchhttp://www.jenskitchen.com/en.com/about.html">Aboabout.html">About Jen's Kitchen</a>ut Jen's Kitchen</a>

jenskitchenjenskitchen

index.htmlindex.htmlabout.htmlabout.html

Linking Linking Linking to a lower directoryLinking to a lower directory

To place a link on the index.html that links to salmon.html

<a <a href="recipes/salmon.hthref="recipes/salmon.html">Jen's Salmon ml">Jen's Salmon Recipes</a>Recipes</a>

jenskitchenjenskitchen

index.htmlindex.htmlabout.htmlabout.html

recipesrecipes

salmon.htsalmon.htmlml

topenade.httopenade.htmlml

couscous.htcouscous.htmlml

linguine.htmllinguine.html

Linking Linking Linking 2 directories downLinking 2 directories down

To place a link on the index.html that links to couscous.html.

<a <a href="recipes/pasta/couscous.hhref="recipes/pasta/couscous.html">Jen's Couscous tml">Jen's Couscous Recipes</a>Recipes</a>

jenskitchenjenskitchen

index.htmlindex.htmlabout.htmlabout.html

recipesrecipes

salmon.htmlsalmon.html topenade.httopenade.htmlml

pastapasta

Linking Linking Linking to a higher directoryLinking to a higher directory

To place a link on the salmon.html that links to index.html.

<a <a href="../index.html">Jen'href="../index.html">Jen's Kitchen Home s Kitchen Home Page</a>Page</a>

jenskitchenjenskitchen

index.htmlindex.htmlabout.htmlabout.html

recipesrecipes

salmon.htsalmon.htmlml

topenade.httopenade.htmlml

couscous.htcouscous.htmlml

linguine.htmllinguine.html

Linking Linking Linking 2 directories higherLinking 2 directories higher

jenskitchenjenskitchen

index.htmlindex.htmlabout.htmlabout.html

recipesrecipes

salmon.htmlsalmon.html topenade.httopenade.htmlml

pastapasta

To place a link on the couscous.html page that links to index.html.

<a <a href="../../index.html">Jhref="../../index.html">Jen's Kitchen Home en's Kitchen Home Page</a>Page</a>

Linking Linking Site Root Relative PathnamesSite Root Relative Pathnames

To place a link on the index.html that links to salmon.html.

a a href="/recipes/salmohref="/recipes/salmon.html">Jen's Salmon n.html">Jen's Salmon Recipes</a>Recipes</a>

jenskitchenjenskitchen

index.htmlindex.htmlabout.htmlabout.html

recipesrecipes

salmon.htsalmon.htmlml

topenade.httopenade.htmlml

//

Linking Linking Same Pattern for ImagesSame Pattern for Images

To place a link on salmon.html that links to logo.png.

<img <img src="../images/logsrc="../images/logo.png" alt="logo">o.png" alt="logo">

jenskitchenjenskitchen

recipesrecipes

salmon.htsalmon.htmlml

//

imagesimages

logo.pnglogo.png

Directory StructureDirectory Structure

LinkingLinkingTargeting a New Browser WindowTargeting a New Browser Window

Creating a link that opens in a new browser window.

<a href="http://www.google.com" target="_blank"target="_blank"> The Google 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

LinkingLinkingTo a specific point on a pageTo a specific point on a page

1. Name the Destination<h1 id="top"id="top">This is the text on the page</h1>

2. To link to the Destination<a href="#top"><a href="#top">Go to the Top</a></a>

Mail LinksMail Links<a href="<a href="mailto:[email protected]">"> Contact Mark </a></a>

Encryption of mailto:http://www.katpatuka.org/pub/doc/anti-spam.htmlhttp://jumk.de/nospam/stopspam.html