HTML Linking Overview

50 %
50 %
Information about HTML Linking Overview
Education

Published on March 6, 2014

Author: MFCarter

Source: slideshare.net

Description

Presentation on creating hyperlinks in HTML5

Linking Between web pages and image files

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>

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>

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>

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.

Linking Definition of Root Jen’s Kitchen Web Site Root (Starting Folder) jenskitchen http://www.jenskitchen.com about.html index.html

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

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>

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

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>

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

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>

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">

Directory Structure

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

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">

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

Add a comment

Related presentations

Related pages

HTML Links - W3Schools

HTML Links - Hyperlinks. HTML links are hyperlinks. You can click on a link and jump to another document.
Read more

MedlinePlus Connect: Linking Patient Portals and ...

URL of this page: https://medlineplus.gov/connect/overview.html. MedlinePlus Connect Linking Patient Portals and EHRs to Consumer Health Information
Read more

Linking Words — A complete List of English Connecting Words

Linking & Connecting Words. It is essential to understand how Linking Words, as a part of speech, can be used to combine ideas in writing - and thus ensure ...
Read more

HTML linking - MoodleDocs

Note: You are currently viewing documentation for Moodle 2.2. Up-to-date documentation for the latest stable version is available here: HTML linking ...
Read more

The SMIL 3.0 Linking Modules

9.3 Module Overview. ... The area element also extends the syntax and semantics of the HTML area element by providing for linking from non-spatial portions ...
Read more

CSS How to - W3Schools - W3Schools Online Web Tutorials

Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, PHP, and XML.
Read more

WebD2: Linking to External Internet Sites

Lesson 1: Linking to External Internet Sites Overview. The World Wide Web was built on the principal of hypertext. Prior to hypertext, documents were all ...
Read more

XML Linking Language (XLink) Version 1.0

Abstract. This specification defines the XML Linking Language (XLink), which allows elements to be inserted into XML documents in order to create and ...
Read more

Linkin Park Tickets – Karten bei Eventim

Melden Sie sich für den Linkin Park Ticketalarm an und Tickets für Linkin Park bei Eventim sichern!
Read more