Upload
wendy-brooks
View
262
Download
0
Embed Size (px)
DESCRIPTION
Various Kinds of Links
Citation preview
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:[email protected]">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>