Linking overview june 2010
-
Upload
mark-carter -
Category
Technology
-
view
903 -
download
0
description
Transcript of Linking overview june 2010
![Page 1: Linking overview june 2010](https://reader034.fdocuments.in/reader034/viewer/2022052321/54b87f9a4a795920198b46b1/html5/thumbnails/1.jpg)
LinkingBetween web pages and image files
![Page 2: Linking overview june 2010](https://reader034.fdocuments.in/reader034/viewer/2022052321/54b87f9a4a795920198b46b1/html5/thumbnails/2.jpg)
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
![Page 3: Linking overview june 2010](https://reader034.fdocuments.in/reader034/viewer/2022052321/54b87f9a4a795920198b46b1/html5/thumbnails/3.jpg)
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
![Page 4: Linking overview june 2010](https://reader034.fdocuments.in/reader034/viewer/2022052321/54b87f9a4a795920198b46b1/html5/thumbnails/4.jpg)
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/
![Page 5: Linking overview june 2010](https://reader034.fdocuments.in/reader034/viewer/2022052321/54b87f9a4a795920198b46b1/html5/thumbnails/5.jpg)
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
![Page 6: Linking overview june 2010](https://reader034.fdocuments.in/reader034/viewer/2022052321/54b87f9a4a795920198b46b1/html5/thumbnails/6.jpg)
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
![Page 7: Linking overview june 2010](https://reader034.fdocuments.in/reader034/viewer/2022052321/54b87f9a4a795920198b46b1/html5/thumbnails/7.jpg)
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
![Page 8: Linking overview june 2010](https://reader034.fdocuments.in/reader034/viewer/2022052321/54b87f9a4a795920198b46b1/html5/thumbnails/8.jpg)
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
![Page 9: Linking overview june 2010](https://reader034.fdocuments.in/reader034/viewer/2022052321/54b87f9a4a795920198b46b1/html5/thumbnails/9.jpg)
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
![Page 10: Linking overview june 2010](https://reader034.fdocuments.in/reader034/viewer/2022052321/54b87f9a4a795920198b46b1/html5/thumbnails/10.jpg)
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
//
![Page 11: Linking overview june 2010](https://reader034.fdocuments.in/reader034/viewer/2022052321/54b87f9a4a795920198b46b1/html5/thumbnails/11.jpg)
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
![Page 12: Linking overview june 2010](https://reader034.fdocuments.in/reader034/viewer/2022052321/54b87f9a4a795920198b46b1/html5/thumbnails/12.jpg)
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
![Page 13: Linking overview june 2010](https://reader034.fdocuments.in/reader034/viewer/2022052321/54b87f9a4a795920198b46b1/html5/thumbnails/13.jpg)
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>
![Page 14: Linking overview june 2010](https://reader034.fdocuments.in/reader034/viewer/2022052321/54b87f9a4a795920198b46b1/html5/thumbnails/14.jpg)
Mail LinksMail Links<a href="<a href="mailto:[email protected]:[email protected]">"> Contact Mark </a></a>
Encryption of mailto:http://www.katpatuka.org/pub/doc/anti-spam.htmlhttp://jumk.de/nospam/stopspam.html