Dalam pembelajaran kali ini akan dibahas mengenai penggunaan hyperlink pada html,
Karena sebuah halaman web akanlah sangat membosankan apabila hanya akan memuat satu halaman saja tanpa ada penggunaan secara dinamis, ntah itu hanya link antar halaman ataupun sampai ke aplikasi download. semoga isi dari materi ini bisa menjadi referensi anda dalam pembelajaran html.
Suported By :
Berikut ini akan saya contohkan, aplikasi sederhana akan konsep penggunaan hyperlink.
pertama kita akan membuat menu untuk mendownload sebuah dokumen file, yang lngsung diarahkan ke layanan download.
Untuk scriptnya silahkan diamati dan di analisis ya preNn :
<!DOCTYPE HTML>
<html lang="en">
<link rel="shortcut icon" href="matrix.ico">
<head>
<title>Dokumen</title>
</head>
<body>
<table border=0 align="center" cellspacing=0
cellpadding=10>
<caption> :: UNLIMITED DOWNLOAD :: </caption>
<tr>
<th width="30" bgcolor="teal"></th>
<th width="5"></th>
<th width="300" bgcolor="teal"><a href="film.html">Film</a></th>
<th width="30"></th>
<th width="300" bgcolor="yellow"><a href="dokumen.html">Dokumen</a></th>
<th width="30"></th>
<th width="300" bgcolor="teal"><a href="musik.html">Musik</a></th>
<th width="5"></th>
<th width="30" bgcolor="teal"></th></tr>
<tr>
<td rowspan=12 bgcolor="teal"></td>
<td colspan = 7 bgcolor="yellow"><ol>
<li><a href="www.4shared.com" title="Download file"> BIOZ in Blitar</a></li>
<li><a href="www.4shared.com" title="Download file"> BIOZ in Mojokerto</a></li>
<li><a href="www.4shared.com" title="Download file"> PTI'09 OFF B</a></li>
<li><a href="www.4shared.com" title="Download file"> BIOZ in Bondowoso</a></li>
<li><a href="www.4shared.com" title="Download file"> BIOZ in Bali</a></li>
</ol>
</td>
<td rowspan=10 bgcolor="teal"></td>
</tr>
<tr>
<td colspan=12 bgcolor="teal"><p align="center"> © andibayu </b></p></td>
</tr>
</table>
</body>
</html>
<html lang="en">
<link rel="shortcut icon" href="matrix.ico">
<head>
<title>Dokumen</title>
</head>
<body>
<table border=0 align="center" cellspacing=0
cellpadding=10>
<caption> :: UNLIMITED DOWNLOAD :: </caption>
<tr>
<th width="30" bgcolor="teal"></th>
<th width="5"></th>
<th width="300" bgcolor="teal"><a href="film.html">Film</a></th>
<th width="30"></th>
<th width="300" bgcolor="yellow"><a href="dokumen.html">Dokumen</a></th>
<th width="30"></th>
<th width="300" bgcolor="teal"><a href="musik.html">Musik</a></th>
<th width="5"></th>
<th width="30" bgcolor="teal"></th></tr>
<tr>
<td rowspan=12 bgcolor="teal"></td>
<td colspan = 7 bgcolor="yellow"><ol>
<li><a href="www.4shared.com" title="Download file"> BIOZ in Blitar</a></li>
<li><a href="www.4shared.com" title="Download file"> BIOZ in Mojokerto</a></li>
<li><a href="www.4shared.com" title="Download file"> PTI'09 OFF B</a></li>
<li><a href="www.4shared.com" title="Download file"> BIOZ in Bondowoso</a></li>
<li><a href="www.4shared.com" title="Download file"> BIOZ in Bali</a></li>
</ol>
</td>
<td rowspan=10 bgcolor="teal"></td>
</tr>
<tr>
<td colspan=12 bgcolor="teal"><p align="center"> © andibayu </b></p></td>
</tr>
</table>
</body>
</html>
Dan tampilan dari scipt di atas yakni sbb :
Jika kita ingin mendownload film, maka kita langsung saja clik pada tulisan film, maka secara otomatis tampilan menu akan menampilkan tampilan menu daftar download film, untuk lebih jelasnya silahkan perhatikan script berikut ini guys :
<!DOCTYPE HTML>
<html lang="en">
<link rel="shortcut icon" href="matrix.ico">
<head>
<title> Film</title>
</head>
<body>
<table border=0 align="center" cellspacing=0
cellpadding=10>
<caption> :: UNLIMITED DOWNLOAD ::</caption>
<tr>
<th width="30" bgcolor="teal"></th>
<th width="5"></th>
<th width="300" bgcolor="yellow"><a href="film.html">Film</a></th>
<th width="30"></th>
<th width="300" bgcolor="teal"><a href="dokumen.html">Dokumen</a></th>
<th width="30"></th>
<th width="300" bgcolor="teal"><a href="musik.html">Musik</a></th>
<th width="5"></th>
<th width="30" bgcolor="teal"></th></tr>
<tr>
<td rowspan=12 bgcolor="teal"></td>
<td colspan = 7 bgcolor="yellow"><ol>
<li><a href="sinema3satu.com" title="Download file">The Crazies</a></li>
<li><a href="sinema3satu.com" title="Download file">Harry Potter 7</a></li>
<li><a href="sinema3satu.com" title="Download file">In the Name of God</a></li>
<li><a href="sinema3satu.com" title="Download file">You Again</a></li>
<li><a href="sinema3satu.com" title="Download file">The Social Network</a></li>
</ol>
</td>
<td rowspan=10 bgcolor="teal"></td>
</tr>
<tr>
<td colspan=12 bgcolor="teal"><p align="center"> © andibayu </b></p></td>
</tr>
</table>
</body>
</html>
Dari script diatas maka akan muncul tampilan sperti ini kawaNn :
Lanjutnya ketika kita ingin menampilkan layanan untuk mendownload film, maka kita langsung saja meng click tulisan musik.
adapun script nya seperti ini preNn :
<!DOCTYPE HTML>
<html lang="en">
<link rel="shortcut icon" href="matrix.ico">
<head>
<title>Musik</title>
</head>
<body>
<table border=0 align="center" cellspacing=0
cellpadding=10>
<caption> :: UNLIMITED DOWNLOAD ::</caption>
<tr>
<th width="30" bgcolor="teal"></th>
<th width="5"></th>
<th width="300" bgcolor="teal"><a href="film.html">Film</a></th>
<th width="30"></th>
<th width="300" bgcolor="teal"><a href="dokumen.html">Dokumen</a></th>
<th width="30"></th>
<th width="300" bgcolor="yellow"><a href="musik.html">Musik</a></th>
<th width="5"></th>
<th width="30" bgcolor="teal"></th></tr>
<tr>
<td rowspan=12 bgcolor="teal"></td>
<td colspan = 7 bgcolor="yellow"><ol>
<li><a href="http://beemp3.com/" title="Download file">westlife - miss you</a></li>
<li><a href="http://beemp3.com/" title="Download file">westlife - I have a dream</a></li>
<li><a href="http://beemp3.com/" title="Download file"> westlife - change the world</a></li>
<li><a href="http://beemp3.com/" title="Download file">westlife - my love</a></li>
<li><a href="http://beemp3.com/" title="Download file">westlife - soledad></li>
</ol>
</td>
<td rowspan=10 bgcolor="teal"></td>
</tr>
<tr>
<td colspan=12 bgcolor="teal"><p align="center"> © andibayu </b></p></td>
</tr>
</table>
</body>
</html>
<html lang="en">
<link rel="shortcut icon" href="matrix.ico">
<head>
<title>Musik</title>
</head>
<body>
<table border=0 align="center" cellspacing=0
cellpadding=10>
<caption> :: UNLIMITED DOWNLOAD ::</caption>
<tr>
<th width="30" bgcolor="teal"></th>
<th width="5"></th>
<th width="300" bgcolor="teal"><a href="film.html">Film</a></th>
<th width="30"></th>
<th width="300" bgcolor="teal"><a href="dokumen.html">Dokumen</a></th>
<th width="30"></th>
<th width="300" bgcolor="yellow"><a href="musik.html">Musik</a></th>
<th width="5"></th>
<th width="30" bgcolor="teal"></th></tr>
<tr>
<td rowspan=12 bgcolor="teal"></td>
<td colspan = 7 bgcolor="yellow"><ol>
<li><a href="http://beemp3.com/" title="Download file">westlife - miss you</a></li>
<li><a href="http://beemp3.com/" title="Download file">westlife - I have a dream</a></li>
<li><a href="http://beemp3.com/" title="Download file"> westlife - change the world</a></li>
<li><a href="http://beemp3.com/" title="Download file">westlife - my love</a></li>
<li><a href="http://beemp3.com/" title="Download file">westlife - soledad></li>
</ol>
</td>
<td rowspan=10 bgcolor="teal"></td>
</tr>
<tr>
<td colspan=12 bgcolor="teal"><p align="center"> © andibayu </b></p></td>
</tr>
</table>
</body>
</html>
Dan untuk tampilan dari script di atas, dapat dilihat seperti gambar dibawah ini guys...
ANALISIS ---> Jadi pada dasarnya file script pada halaman tampilan itu sebenarnya ada 3, yakni :
dokumen.html , musik.html , film.html
ke 3 halaman itu di jadikan link antar halaman sehingga ketiganya bisa saling berkaitan, ditambah lagi link dengan sebuah koneksi download pada layanan yg berbeda, sesuai dengan file yang ingin di download guys..
Bagaimana kawaNn, apakah kallian udah ada gambaran mengenai konsep nya? kalu belum ya jangan di terusin preNn ( gak tanggung ya aq kalu ntar tiba2 ada yang langsung pusing, hehe ^_^ )
silahkan mencoba latian guys..
See you next time..
Bye...
0 komentar:
Posting Komentar
Jangan Pernah Kita Usul Jika Asal, Dan Jika Mau Usul Lebih Baik Jangan Pernah Asal...