Komputer Lanjutan TPL

Pertemuan 5
 Hyperlinks ‐ An Introduction 
Hyperlinks  An Introduction
• The chief power of the Web comes from its ability 
p y
to link from one web page or site to any other 
regardless of where (ie. which computer server) 
they physically reside This can be achieved by
they physically reside. This can be achieved by 
the use of hyperlink tags. 
• Though only text could be so tagged in earlier 
versions of HTML (hence the origins of the name 
HyperTEXT Markup Language), today any text or 
image can serve as a hyperlink to any another
image can serve as a hyperlink to any another 
page, site or even an e‐mail address, jumping to 
the appropriate resource when clicked on. 
• To
To add a link, the <A HREF=> and </A> tags are 
add a link the <A HREF=> and </A> tags are
used.
• These tags bracket a portion of text or an 
These tags bracket a portion of text or an
image which will serve as a hyperlink, with the 
HREF=  attribute identifying the destination 
"HREF=" attribute identifying the destination
URL. 
 Text Hyperlinks
Text Hyperlinks 
• To link with text simply bracket the desired word 
o t te t s p y b ac et t e des ed o d
or phrase with the <A HREF=> and </A> tags. 
Typically, though not always, hyperlinked text is 
d l d b
displayed in browsers with an underline, as 
h d l
illustrated below: 
• HTML Code 
HTML C d <A  <A
HREF=http://www.unitedmedia.com/comics/dilb
ert/> Check out today'ss Dilbert comic!</A> 
ert/> Check out today Dilbert comic!</A>
• Browser Display 
– Check out today
Check out today'ss Dilbert comic!
Dilbert comic!
 Relative Versus Absolute Pathnames
Relative Versus Absolute Pathnames 
• An important point to remember when creating 
po ta t po t to e e be e c eat g
links is to make sure the correct URL is given. In 
order to provide a link to documents in other 
d
directories, the complete path from the current 
h l hf h
document to the linked document must be 
indicated For example a link to a file called
indicated. For example, a link to a file called 
"dilbert.html" located in the subdirectory 
"comics" would be written as: 
• <A HREF="comics/dilbert.html">Dilbert 
Comic</A>
• <A
<A HREF=
HREF="comics/dilbert
comics/dilbert.html
html">Dilbert
>Dilbert 
Comic</A> 
• These are called relative
These are called relative links because the 
links because the
path to the file being linked to is specified 
relative to the location of the current file
relative to the location of the current file. 
 The absolute pathname
The absolute
• The absolute pathname (ie., the complete URL) of the 
file could also be used, but relative links are more 
efficient in accessing a server. They also have the 
advantage of making documents more "portable" ‐‐
g g p for 
instance, several web pages stored in a single folder on 
a local computer, with relative hyperlinks between 
each other, could be uploaded to a web server 
p
together, where the links would continue to work just 
as they do within a locally stored copy. 
• The exception to this is when links are made to 
The exception to this is when links are made to
websites on other servers the absolute pathway must 
be given (ie., the complete URL). 
• Thus
Thus the relative pathway for this page is: 
the relative pathway for this page is:
<A HREF="lesson5.htm

• Whereas the absolute pathway is: 
<A HREF="www.alternetwebdesign.com/ 
A HREF " l bd i /
htmltutorial/lesson5.htm">
 Image Hyperlinks
Image Hyperlinks 
• Instead of using text as hyperlinks, images may be 
stead o us g te t as ype s, ages ay be
used instead. This method of providing visual 
clues to links is becoming increasingly common 
on the Web. To do this, simply surround the 
h b d h l d h
image tag with hyperlink tags, in the same way a 
text link is tagged:
text link is tagged: 
• HTML Code  Browser Display <A 
HREF http://www.unitedmedia.com/comics/dilb
HREF=http://www.unitedmedia.com/comics/dilb
ert/> <IMG SRC="dilbert.gif" WIDTH=78 
HEIGHT=72 BORDER=0></A>
 Image Maps
Image Maps 
• Image
Image mapping is a method of hypertext linking 
mapping is a method of hypertext linking
different parts of an image with the use of pixel 
coordinates to denote the areas. With an image g
map, a single image can provide many links to a 
number of different URLs. 
• Below is a sample image map as it appears in 
HTML code and within a browser window: 
•
HTML Code  Browser Display <MAP 
NAME="links">
"l k "
<AREA HREF="lesson1.htm" SHAPE="RECT" COORDS="10,11,121,39">
<AREA HREF "lesson1 htm" SHAPE "RECT" COORDS "10 11 121 39">
<AREA HREF="lesson2.htm" SHAPE="RECT" COORDS="10,48,121,73">
<AREA HREF="lesson3.htm" SHAPE="RECT" COORDS="10,78,121,106">
<AREA HREF="lesson4.htm" SHAPE="RECT" COORDS="10,114,121,137">
<AREA HREF "lesson5 htm" SHAPE "RECT" COORDS "10 144 121 170">
<AREA HREF="lesson5.htm" SHAPE="RECT" COORDS="10,144,121,170">
<AREA HREF="lesson6.htm" SHAPE="RECT" COORDS="10,172,121,201">
<AREA HREF="lesson7.htm" SHAPE="RECT" COORDS="10,205,121,235">
<AREA HREF="lesson8.htm" SHAPE="RECT" COORDS="10,234,121,266">
</MAP>
 EE‐Mail
Mail Hyperlinks 
Hyperlinks
• In
In order to create a link which launches the 
order to create a link which launches the
visitor's own e‐mail program while filling in a 
specified address, include the "MAILTO:" tag 
with the desired e‐mail address as shown 
here: 
• HTML Code  <A 
HREF="MAILTO:[email protected]"> Click 
h
here to send e‐mail.</A> 
d il /A
• Browser Display  Click here to send e‐mail.
 Try it out! 

• In the box below, type the following HTML code, then 
, yp g ,
click the "View" button. The HTML document you have 
written will be displayed in your browser. You may wish 
to change some of the tags and/or attributes to
to change some of the tags and/or attributes to 
experiment with some of the different items discussed 
in this lesson. 
• NOTE: If you would like to put one of the graphics from 
these lessons into your code, include the entire 
address ‐ ie. the Absolute Pathname. 
address ‐ ie the Absolute Pathname EG. 
EG
http://www.alternetwebdesign.com/htmltutorial/imag
ename.gif 
 Try typing this:
Try typing this: 
<HTML> 
<HEAD>
<TITLE>Want to learn more? </TITLE>
</HEAD> 
</HEAD>
<BODY BGCOLOR="#FFFFFF" TEXT="#000000"> 

Do you want to learn more? 

Click on the links below to get to some other useful HTML tutorials and reference documents: 
Click on the links below to get to some other useful HTML tutorials and reference documents:
<UL>
<LI><A HREF=http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimerAll.html>NCSA‐ A Beginners Guide to 
HTML</A>
<LI> <A HREF=http://WWW.stars.com/Authoring/HTML/Intro/>The WDVL: Introduction to HTML</A>
</UL>

If you have any other HTML links you would recommend, please e‐mail me at: <A 
HREF="MAILTO:[email protected]">[email protected]</A> 

<P> Click on the arrow to go to the next lesson. 
P Cli k h h l
Lesson 6 
<A HREF="http://www.alternetwebdesign.com/htmltutorial/lesson6.htm"><IMG 
SRC="http://www.alternetwebdesign.com/htmltutorial/arrowright.gif" WIDTH=10 HEIGHT=8 BORDER=0></A> 

</BODY>

</HTML>