LinkingBetween web pages and image files

Absolute vs Relative Absolute vs Relative URLURL

Absolute URL

For example, to get the page about hyperlinks on Wikipedia you might type in the URL:

http://en.wikipedia.org/wiki/Hyperlink

An absolute URL like this one contains everything you need to uniquely identify a particular file on the Internet.

http://www.exampleNewsSite.com/Entertainment/TV/index.html

http://www.exampleNewsSite.com/Entertainment/Arts/index.html

http://www.exampleNewsSite.com/Entertainment/Music/index.html

Absolute vs Relative Absolute vs Relative URLURL

Relative URL

A relative URL indicates where the resource is in relation to the current page.

http://www.eonline.com/ absolute URL

Rather than including the full URL for each page, you can use a relative URL. For example:

fashion/fashionpolice/

uberblog/the_soup/

As I am sure you agree, this is a lot quicker than having to write out the following:

http://www.eonline.com/fashion/fashionpolice/

http://www.eonline.com/uberblog/the_soup/index.html

LinkingLinkingDefinition of RootDefinition of Root

jenskitchenjenskitchen

index.htmlindex.htmlabout.htmlabout.html

Jen’s Kitchen Web SiteRoot (Starting Folder)http://http://www.jenskitchen.com/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 href="about.html">About <a href="about.html">About Jen's Kitchen</a>Jen's Kitchen</a>

Absolute Link:<a <a href="href="http://www.jenskitchen.comhttp://www.jenskitchen.com//about.html">About Jen's about.html">About Jen's Kitchen</a>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.html">Jen'href="recipes/salmon.html">Jen's Salmon Recipes</a>s Salmon 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/couscoushref="recipes/pasta/couscous.html">Jen's Couscous .html">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 href="../index.html">Jen's <a href="../index.html">Jen's Kitchen Home Page</a>Kitchen Home 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

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

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

jenskitchenjenskitchen

index.htmlindex.htmlabout.htmlabout.html

recipesrecipes

salmon.htmlsalmon.html topenade.httopenade.htmlml

pastapasta

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/salmon.html">Jenhref="/recipes/salmon.html">Jen's Salmon Recipes</a>'s Salmon 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.

<a <a href="../images/logo.png">Jen'href="../images/logo.png">Jen's Salmon Recipes</a>s Salmon Recipes</a>

jenskitchenjenskitchen

recipesrecipes

salmon.htsalmon.htmlml

//

imagesimages

logo.pnglogo.png

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:mfcarter2@gmail.commailto:mfcarter2@gmail.com">"> Contact Mark </a></a>

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