HTML

ltoktlkom web 8oseJ
kAk1IkUM : LINk n1ML

NAMA : ___________________________________
1ANGGAL kAk1IkUM : ___________________________________
A. 1UIUAN
1. Mengenal, memahaml dan menglmplemenLaslkan Pyperllnk pada dokumen P1ML.
2. Mengenal, memahaml dan menglmplemenLaslkan aLrlbuL-aLrlbuL pada Lag <a>.
8. LNDAnULUAN
kekuaLan uLama darl wotlJ wlJe web adalah kemampuannya unLuk membuaL bypettext llok
pada berbagal macam lnformasl dalam [arlngan lnLerneL. ualam P1ML, unLuk membuaL suaLu
llok dlpergunakan elemen Anchor yang dlnyaLakan dengan toq berpasangan <a>...</a>.
ualam btowset, llok blasanya dlnyaLakan dalam Leks dengan garls bawah. !lka klLa meng-kllk
Leks pada suaLu llok, btowset akan membawa pemakal ke potb (menyaLakan lokasl dlrekLorl
flle) darl llok LersebuL. unLuk membuaL llok, dlgunakan suaLu aLrlbuL Lambahan href pada toq
<a>. !lka suaLu llok dlnyaLakan sebagal <a href= "bela[arpemograman.hLml"> emrograman
</a>, lnl berarLl bahwa flle yang dlLu[u oleh llok LersebuL adalah bela[arpemrograman.hLml",
sedang emrograman" adalah Leks yang akan dlLampllkan btowset dengan garls bawah
sebagal penanda llok.
C. MA1LkI
1. ke|at|ve dan Abso|ute L|nk
Llnk ke suaLu halaman web pada dlrekLorl laln dapaL dlbuaL dengan menenLukan relaLlve
paLh darl poslsl dokumen asal berada. lnl dlsebuL sebagal relaLlve llnk.
ConLoh:
<a href="lrlan!aya/Cendrawaslh.hLml">8urung Cendrawaslh</a>
ada conLoh dlaLas, [lka llnk dengan Leks 8urung Cendrawaslh dl kllk, maka browser akan
menampllkan halaman Cendrawaslh.hLml yang berada pada sub dlrekLorl lrlan!aya.
AlamaL (u8L) dokumen yang dlLulls secara lengkap (absoluLe paLh) dlsebuL llnk absoluLe.
ConLoh:
<a href="hLLp://gmall.google.com">L-mall Coogle</a>
2. L|nk ke Dokumen La|n
!lka Lu[uan llnk berada pada folder yang sama, maka klLa dapaL langsung mengeLlkkan nama
flle halaman web yang bersangkuLan pada aLLrlbuL href.
ada gambar berlkuL lnl, dlLampllkan susunan dlrekLorl MyWebages dengan dua buah flle
dokumen hLml, dlmana pada halaman web age1.hLml LerdapaL sebuah llnk dengan Lu[uan
age2.hLml.
ltoktlkom web 8oseJ
ada gambar susunan dlrekLorl dlbawah LerdapaL sebuah dlrekLorl Zoo dlmana pada
halaman lndex.hLml LerdapaL sebuah llnk menu[u halaman web LlephanL.hLml yang LerdapaL
pada sub dlrekLorl Afrlca.
Index.htm|
<a href="Afrlca/LlephanL.hLml">LlephanL from SouLh Afrlca</a>
!lka pada halaman web LlephanL.hLml LerdapaL suaLu llnk unLuk kemball ke halaman
lndex.hLml, maka benLuk penullsannya adalah sebagal berlkuL:
L|ephant.htm|
<a href="../lndex.hLml"> 8ack </a>
3. L-ma|| L|nk
ALrlbuL yang dlgunakan unLuk llnk emall adalah mallLo, llnk lnl [lka dlkllk maka akan langsung
membuka mall cllenL dengan Lu[uan alamaL e-mall yang LerLera pada mallLo.
ConLoh:
<a href="mallLo:saya[gmall.com?sub[ecL=1anya">klrlm L-mall</a>
4. L|nk ke 8ag|an 1ertentu (8ookmark L|nk)
a. L|nk ke suatu bag|an d| ha|aman yang sama
Llnk ke suaLu baglan dl dokumen yang sama, caranya hamplr sama dengan langkah dl
aLas. ada dokumen, dlLullskan : <a href="#hLml">P1ML</a>
ada baglan yang dlLu[u, dlLullskan : <a name="hLml">MaLerl P1ML </a>
b. L|nk ke bag|an tertentu pada ha|aman |a|n
Mlsalnya: saLu.hLml dlllnk ke suaLu baglan dl dua.hLml, caranya adalah : ada dokumen
saLu.hLml, dlLullskan: <a href="dua.hLml#8ag2">uua</a>
ada baglan yang dlLu[u, dlLullskan : <a name="8ag2">8aglan uua</a>
S. Image sebaga| L|nk
lmage dapaL dlfungslkan sebagal llnk dengan menambahkan Lag <lmg> dlanLara Lag <a>.
ConLoh:
<a href="8afleslakallmanLan.hLml"><lmg="raflesla.glf" border="0"></a>
6. L|nk, A||nk dan V||nk
Secara defaulL warna Leks llnk pada dokumen web P1ML adalah blru dengan garls bawah.
!lka Leks llnk dlkllk, maka warna Leks akan berubah men[adl ungu. uengan mendeflnlslkan
nllal aLrlbuL llnk (llnk yang belum dlkun[ungl), allnk (llnk yang sedang dlkllk/akLlf) dan vllnk
(llnk yang Lelah dlkun[ungl/vlslLed llnk) pada Lag <body>, klLa dapaL mengaLur warna llnk
LersebuL.
ConLoh:
<body bgcolor="#6l8800" llnk="black" allnk="red" vllnk="blue">
ltoktlkom web 8oseJ
D. kAk1IkUM
ketentuan rakt|kum:
1. ke|at|ve, Abso|ute L|nk dan L-ma|| L|nk
1. keLlk dokumen halaman web pada noLepad
2. CapLure Screen hasll Lampllan pada browser.
3. 8uaL anallsa dan keslmpulan darl prakLlkum yang Anda ker[akan.
<html>
<head><title>Cannington Cougars Football Club Website</title></head>
<body>
<div align="center">

<a href="home.html">Home</a> |
<a href="about.html">About Us</a> |
<a href="events.html">Upcoming Events</a>|
<a href="contact.html">Contact</a>|
<a href="links.html">Links</a>
<h1>Cannington Cougars Football Club Website</h1>
<b><font face="Arial" size="4" color="orange">Welcome to the website of the Cannington Cougars
Football Club </font></b>
<p>
This is the home of the Cannington Cougars Football Club on the World Wide Web.<br>
Take a look around and find out <a href="about.html">about our club</a>.
<br>
This year's motto:<br>
<i>"Top the grade in Y2K"</i>
</p>
<br><br>

<font face="georgia" color="brown" size="2"><b>If you have any questions about us, <a
href="mailto:cougar@footy.net.au">Send us an email</a></b></font>
<p>
<hr width="50%" size="3" color="orange">
<i>Our Sponsors are:

<a href="http://www.shoes-x.com">Shoes-X</a> and <a href="http://www.drinkhealth.com">Drink
Health</a>
<hr width="50%" size="3" color="orange">
</i></p>
</div>
</body>
</html>
ltoktlkom web 8oseJ
2. L|nk ke 8ag|an 1ertentu (8ookmark L|nk) ada Dokumen yang Sama

<html>
<head>
<title>HTML Bookmark link</title>
</head>
<body>
See news on:
<a href="#january">January</a> |
<a href="#february">February</a> |
<a href="#march">March</a> |
<a href="#april">April</a> |
<a href="#may">May</a> |
<a href="#june">June</a>
<h1><name="top">Bookmark Links</a></h1>
It is often useful to link to a different part of the same document or to link to a specific location on a
different document. <br>
It is especially useful to do this when you want an index at the top of a long document so people canskip
to different parts in the document.
<p>
<h2><a name="january">January</a></h2>
The quick brown for jumped over the lazy dog.<br>
<a href="#top">go to top</a>
</p>
<p>
<h2><a name="february">February</a></h2>
Thequick brown for jumped over the lazy dog.<br>
</p>
<p>
<h2><a name="march">March</a></h2>
The quick brown for jumped over thelazy dog.<br>
</p>
ltoktlkom web 8oseJ
<p>
<h2><a name="april">April</a></h2>
</p>
<p>
<h2><a name="may">May</a></h2>
</p>
<p>
<h2><a name="june">June</a></h2>
</p>
</body>
</html>
ltoktlkom web 8oseJ
3. L|nk, a||nk, v||nk dan Image sebaga| L|nk

Slmpan 2 buah halaman web serLa gambar LlephanL.png seperLl susunan dlrekLorl dlaLas!
Index.htm|
L|ephantage.htm|
erhaLlkan gambar dengan susunan dlrekLorl berlkuL lnl!
A.
B.
ltoktlkom web 8oseJ
Index.htm|
ltoktlkom web 8oseJ
Monkey8orneo.htm|
L|ephantAfr|ca.htm|
L. kLSIMULAN kAk1IkUM

HTML

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

HTML

Diunggah oleh

Hak Cipta:

Format Tersedia

ltoktlkom web 8oseJ

kAk1IkUM : LINk n1ML

2. L|nk ke 8ag|an 1ertentu (8ookmark L|nk) ada Dokumen yang Sama

3. L|nk, a||nk, v||nk dan Image sebaga| L|nk

Anda mungkin juga menyukai