Adding Links
Chapter 6
1
5/28/2016
Linking
2
 You can link to other sites, your own, and also
within a page itself.
 You use anchor tag <a> …</a>
 <a href="url">linked textor element</a>
 Example to link a web site:
<a href="http://www.oreilly.com">Go to the O'Reilly Media site</a>
5/28/2016
URL and href
3
 The href (hypertext reference) attribute provides the




address of the page or resource (its URL) to the
browser.
URL: Uniform Resource Locator
The URL must always appear in quotation marks.
Most of the time you’ll point to other HTML
documents; however, you can
also point to other web resources, such as images,
audio, and video files.
5/28/2016
Specifying URL
4
There are two ways to specify the URL:
 Absolute URLs provide the full URL for the document,
including the protocol (http://), the domain name, and the
pathname as necessary.
You need to use an absolute URL when pointing to a document
out on the Web (i.e., not on your own server).
Example: href="http://www.oreilly.com/"
 Relative URLs describe the pathname to a file relative to
the current document.
Relative URLs can be used when you are linking to another
document on your own site (i.e., on the same server). It doesn’t
requirethe protocol or domain name—just the pathname.
Example: href="recipes/index.html"
5/28/2016
Adding external link to Jen’s Kitchen
5
 You can embed any html element within another
element
<ol>
<li><a href="http://www.foodnetwork.com">The Food
Network</a></li>
<li><a href=“http://www.epicurious.com”>Epicurious
</a></li>
</0l>
5/28/2016
Structure of Jen’s Kitchen
6
5/28/2016
Jen’s Kitchen Structure
7
5/28/2016
Linking within a site
8
 <a href="about.html">About the site...</a>
5/28/2016
Linking to a lower directory
9
 <li><a href="recipes/salmon.html">Garlic
Salmon</a></li>
 <li><a
href="recipes/pasta/couscous.html">Couscous with
Peas and Mint</a></li>
5/28/2016
Linking to a higher directory
10
 <p><a href="../index.html">[Back to home
page]</a></p>
5/28/2016
Lets try it out
11
5/28/2016