Linking overview june 2010

1,163 views
1,057 views

Published on

Creating links within a web page using standard HTML.

Published in: Technology, Self Improvement
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,163
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Linking overview june 2010

  1. 1. Linking Between web pages and image files
  2. 2. Absolute vs Relative URL <ul><li>Absolute URL </li></ul><ul><li>For example, to get the page about hyperlinks on Wikipedia you might type in the URL: </li></ul><ul><ul><li>http://en.wikipedia.org/wiki/Hyperlink </li></ul></ul><ul><li>An absolute URL like this one contains everything you need to uniquely identify a particular file on the Internet. </li></ul><ul><ul><li>http://www.exampleNewsSite.com/Entertainment/TV/index.html </li></ul></ul><ul><ul><li>http://www.exampleNewsSite.com/Entertainment/Arts/index.html </li></ul></ul><ul><ul><li>http://www.exampleNewsSite.com/Entertainment/Music/index.html </li></ul></ul>
  3. 3. Absolute vs Relative URL <ul><li>Relative URL </li></ul><ul><li>A relative URL indicates where the resource is in relation to the current page. </li></ul><ul><li>http :// www.eonline.com/  absolute URL </li></ul><ul><li>Rather than including the full URL for each page, you can use a relative URL . For example: </li></ul><ul><ul><li>fashion/fashionpolice/ </li></ul></ul><ul><ul><li>uberblog/the_soup/ </li></ul></ul><ul><li>As I am sure you agree, this is a lot quicker than having to write out the following: </li></ul><ul><ul><li>http://www.eonline.com / fashion /fashionpolice / </li></ul></ul><ul><ul><li>http://www.eonline.com/ uberblog/the_soup/index.html </li></ul></ul>
  4. 4. Linking Definition of Root Jen’s Kitchen Web Site Root (Starting Folder) http://www.jenskitchen.com/ jenskitchen index.html about.html
  5. 5. Linking To place a link on the index.html page that links to about.html <ul><li>Relative Link - almost always the best to use: <a href=&quot;about.html&quot;>About Jen's Kitchen</a> </li></ul><ul><li>Absolute Link: <a href=&quot; http://www.jenskitchen.com/ about.html&quot;>About Jen's Kitchen</a> </li></ul>jenskitchen index.html about.html
  6. 6. Linking Linking to a lower directory <ul><li>To place a link on the index.html that links to salmon.html </li></ul><ul><li><a href=&quot;recipes/salmon.html&quot;>Jen's Salmon Recipes</a> </li></ul>jenskitchen recipes index.html about.html salmon.html topenade.html
  7. 7. Linking Linking 2 directories down <ul><li>To place a link on the index.html that links to couscous.html. </li></ul><ul><li><a href=&quot;recipes/pasta/couscous.html&quot;>Jen's Couscous Recipes</a> </li></ul>recipes pasta couscous.html linguine.html jenskitchen index.html about.html salmon.html topenade.html
  8. 8. Linking Linking to a higher directory <ul><li>To place a link on the salmon.html that links to index.html. <a href=&quot;../index.html&quot;>Jen's Kitchen Home Page</a> </li></ul>jenskitchen recipes index.html about.html salmon.html topenade.html
  9. 9. Linking Linking 2 directories higher <ul><li>To place a link on the couscous.html page that links to index.html. </li></ul><ul><li><a href=&quot;../../index.html&quot;>Jen's Kitchen Home Page</a> </li></ul>recipes pasta couscous.html linguine.html jenskitchen index.html about.html salmon.html topenade.html
  10. 10. Linking Site Root Relative Pathnames <ul><li>To place a link on the index.html that links to salmon.html. </li></ul><ul><li>a href=&quot;/recipes/salmon.html&quot;>Jen's Salmon Recipes</a> </li></ul>jenskitchen recipes / index.html about.html salmon.html topenade.html
  11. 11. Linking Same Pattern for Images <ul><li>To place a link on salmon.html that links to logo.png. </li></ul><ul><li><a href=&quot;../images/logo.png&quot;>Jen's Salmon Recipes</a> </li></ul>jenskitchen recipes salmon.html / images logo.png
  12. 12. Linking Targeting a New Browser Window <ul><li>Creating a link that opens in a new browser window. </li></ul><ul><li><a href=&quot; http:// www.google.com &quot; target=&quot;_blank&quot; > The Google Web Site </a> </li></ul><ul><li>Value Description </li></ul><ul><li>_blank Open the linked document in a new window </li></ul><ul><li>_self Open the linked document in the same frame as it was clicked (this is default) </li></ul><ul><li>_parent Open the linked document in the parent frameset </li></ul><ul><li>_top Open the linked document in the full body of the window </li></ul>
  13. 13. Linking To a specific point on a page <ul><li>Name the Destination <h1 id=&quot;top&quot; >This is the text on the page</h1> </li></ul><ul><li>To link to the Destination <a href=&quot;#top&quot;> Go to the Top </a> </li></ul>
  14. 14. Mail Links <ul><li><a href=&quot; mailto:mfcarter2@gmail.com &quot;> Contact Mark </a> </li></ul><ul><li>Encryption of mailto: </li></ul><ul><ul><li>http://www.katpatuka.org/pub/doc/anti-spam.html </li></ul></ul><ul><ul><li>http://jumk.de/nospam/stopspam.html </li></ul></ul>

×