HTML Educational Materials
- Week 2
  - Hyper Links
    - Hyper Links
    - Link options
  - Embedded contents
    - Image
    - Video

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>

Relative paths or Absolute URL

Relative path

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>

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