LinksLinks

Hypertext LinksHypertext Links Link to a local page (in the same Link to a local page (in the same

folder) folder) Link to a local page (in a different Link to a local page (in a different

folder) folder) Link to an anchor (on the same page) Link to an anchor (on the same page) Link to a page on the WWW Link to a page on the WWW Other types of links Other types of links

Various Kinds of LinksVarious Kinds of Links

File in the Same FolderFile in the Same Folder We can jump to a We can jump to a child page in the same in the same

folder. folder.

We can jump to a  <a href="childpage.html"> child page </a> in the same folder.

File in a Different FolderFile in a Different Folder We can jump to a the We can jump to a the Lists page page

located in a different folder. located in a different folder. We can jump to the <a href="../06list/demolist.html">Lists</a> page located in a different folder.

File Up the Folder HierarchyFile Up the Folder Hierarchy We can return to the Home page. We can return to the Home page. We can return to the  <a href="../../../index.html">Home</a> page.

File on the WWWFile on the WWW We can contact another part of the We can contact another part of the

world, e.g., at world, e.g., at New York Times..We can contact another part of the world, e.g., at <a href="http://www.nytimes.com">New York Times</a>.

Folder Hierarchy Folder Hierarchy

ExamplesExamplesAssume Assume myPage.htmlmyPage.html as the current as the current

page. page. Link to Link to p1.html which is in the same folder which is in the same folder

Link to Link to p2.html which is under a sibling folder which is under a sibling folder

Link to <a href="p1.html">p1.html</a> which is in the same folder

Link to <href="sibFolder/p2.html”>p2.html</a> which is under a sibling folder

ExamplesExamplesAssume Assume myPage.htmlmyPage.html as the current as the current

page. page. Link to Link to p3.html which is 2 levels below a which is 2 levels below a

sibling foldersibling folder

Link to <a href="sibFolder/childFolder/p3.html">p3.html</a> which is 2 levels below a sibling folder

ExamplesExamplesAssume Assume myPage.htmlmyPage.html as the current as the current

page. page. Link to Link to p4.html which is way out which is way out

there... there...

Linking to <a href="../../uncleFolder/p4.html">p4.html</a> which is way out there

Link to an Anchor Link to an Anchor on the Same Page (Bookmark)on the Same Page (Bookmark)We can jump from here to We can jump from here to another sectionanother section on on

this page.this page.

Creating Anchor NameCreating Anchor Name

We can jump from here to <a href="#linkSection">another section

</a>of this page.

... text text text <a name="linkSection"></a><h2>Link to Another section</h2>... text text text

Table of Contents for a Long Table of Contents for a Long Page Page

Table of Contents• Topic One • Topic Two • Topic Three

.............……….……….

<a name="toc"></a><h3>Table of Contents</h3><ol>   <li><a href="#t1">Topic One</a>   <li><a href="#t2">Topic Two</a>   <li><a href="#t3">Topic Three</a></ol>

……….

………..

……….

Table of Contents for a Long Table of Contents for a Long Page Page

Topic One ……….

……….……….Return ……….……….

Topic Two ……….

……….……….Return

.....

<a NAME="t1"></a><h3>Topic One</h3>……….……….……….<a href="#toc">Return</a> ……….……….<a name=t2”></a><h3>Topic Two</h3>……….……….……….<a href="#toc">Return</a> ……….

Link to a Page on the WWW Link to a Page on the WWW What’s new at Coca Cola?

What’s new at <a href="http://www.cocacola.com">Coca Cola</a>?

Link to a Page on the WWW Link to a Page on the WWW University of Dayton and St. Mary's University are sister schools of Chaminade University.

<a href="http://www.udayton.edu/">University of Dayton</a> and <a href="http://www.stmarytx.edu/">St. Mary's University</a> are sister schools of <a href="http://www.chaminade.edu">Chaminade University</a>.

Linking to E-mail Sites Linking to E-mail Sites This page is maintained by Robert K. Maruyama.

This page is maintained by<a href="mailto:rmaruyam@chaminade.edu">Robert K. Maruyama</a>.

Linking Small Image Linking Small Image To a Larger Image To a Larger Image

Click the thumbnail image to see the full picture.

Click the thumbnail image to see the full picture.<a href="irises.jpg"><img src="irisesthm.jpg" width="89" height="70" ALT=“iris" align=“right”></a>

Linking to Sound and Video Linking to Sound and Video Audio Files

•.WAV (Windows), .AU (8-bit), .AIFF(Mac) •Creating your own sound: All rogramsAccessoriesEntertainmentSound

Recorders

Audio FilesAudio Files You can listen to a sample of macarena You can listen to a sample of macarena

music. (150 KB)music. (150 KB)

Here is a sample sound created on the PC. Here is a sample sound created on the PC.

You can listen to a sample of <a href="macarena.wav">macarena</a> music. (150 KB)

Here is a <a href=“amazingGrace.wav”>sample sound</a> created on the PC.

Movie ClipsMovie Clips You can see an animation of a klein bottle (200 KB), You can see an animation of a klein bottle (200 KB),

provided that you have a program that can display provided that you have a program that can display MPEG-formatted files, such as the MPEG-formatted files, such as the QuicktimeQuicktime plug-in plug-in for the for the NetscapeNetscape or or Internet ExplorerInternet Explorer browers. browers.

You can see an animation of a <a href="klein.mpg">klein bottle</a> (200 KB), provided that you have a program that can display MPEG-formatted files, such as the <i>Quicktime</i>plug-in for the <i>Netscape</i> or <i>Internet Explorer</i> browsers.

Movie ClipsMovie Clips Here is a movie clip with sound. Here is a movie clip with sound.

Here is a <a href = "supercal.mov"> movie clip with sound.</a>