HTML Linking Overview

495 views

Published on

Presentation on creating hyperlinks in HTML5

Published in: Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
495
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
6
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

HTML Linking Overview

  1. 1. Linking Between web pages and image files
  2. 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. 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. 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. 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. 6. Linking Definition of Root Jen’s Kitchen Web Site Root (Starting Folder) jenskitchen http://www.jenskitchen.com about.html index.html
  7. 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. 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. 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. 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. 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. 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. 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. 14. Directory Structure
  15. 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. 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. 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

×