HTML/Training/Hyper Links

From W3C Wiki
< HTML‎ | Training
Revision as of 22:36, 21 July 2011 by Plehegar (Talk | contribs)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to: navigation, search

Hyper Link

<body>
  <ul>
    <li><a href="faq1.html">What does W3C do?</a></li>
    <li><a href="faq2.html">How is W3C funded?</a></li>
    <li><a href="faq3.html">Is W3C sending me spam?</a></li>
  </ul>
  <p>Copyright © 2009 W3C  ( <a href="http://www.csail.mit.edu/">MIT</a> ,
         ERCIM , Keio) Usage policies apply.</p>
</body>

What is Hyper Links

Start of the World Wide Web is the ability to define links from one page to another, and to follow links at the click of a button. This is Hyperlink.


Hyper Links

Hyper Links are specified by <a>.
Linked document is represented by the href attribute.


[syntax]

<a href="URL">Link label</a>

try it

Let's link to Google.

1. Enclose the link text between <a> and </a>.

<a>Go to Google</a>

2. Specifies the href attribute.

<a href="http://www.google.com/">Go to Google</a>

Tr a01.png


See also The a element.


Relative paths or Absolute URL

Relative path

Path.png


  • Linking to be in a same folder/directory:

[Syntax]

 <a href="file.html">Link label</a>

ex) [b.html-c.html]

 <a href="c.html">Link label</a>


  • Linking to be in a parent folder/directory:

[Syntax]

 <a href="../file.html">Link label</a>

ex) [b.html-a.html]

 <a href="../a.html">Link label</a>


  • Linking to be in a subdirectory:

[Syntax]

 <a href="directory/file.html">Link label</a>

ex) [a.html-b.html]

 <a href="XXX/b.html">Link label</a>


absolute URL

  • Linking to a page on another Web site.
 <a href="URL">Link label</a>

Challenge

1. Links to other pages in our Web site.

[index.html]

<ul>
  <li><a href="menu.html">menu</a></li>
  <li><a href="location.html">location</a></li>
  <li><a href="about.html">about us</a></li>
  <li><a href="recruit.html">recruit</a></li>
</ul>

Hyperlink01.png


In the next chapter, introduce some attribute for the a element. "Link options"