Dalam pembahasan kali ini kita akan membuat LINK dg menggunakan Tag <A>, yg dgunakan untuk meloncat ke bagian halaman web yg dmksd, atau ke halaman web yg lain. Untuk lbh memahami kita coba praktek.
- Jalankan Notepad
- Ketik baris2 berikut
<html>
<head>
<title> Latihan Membuat Link </title>
</head>
<body>
Di bawah ini adalah contoh Link<br>
Jika Link dbawah ini dklik maka halaman web ini akan loncat ke halaman web yg bernama lat5.htm, yg sudah kita buat sblmnya : <br>
<a href="lat5.htm"> buka Lat 5</a>
<br>
Di bawah ini adalah contoh Link yg ketika diklik akan loncat ke halaman web Blog ini.
<br>
<a href="http://teguhikhsan.blogspot.com"> Ke Blog Saya</a>
</body>
</html>
- Simpan dg nama "lat8.htm" di folder LatihanHTML. (Buat temen2 yg bngung knp ada lat5.htm, silahkan liat disini dan disini)
- Lalu jalankan filenya dan liat hasilnya.
- Kira2 seperti ini hasilnya....
Tag <A> jg mempunyai atribut ID yg dpt dgunakan untuk menandai sebuah bagian trtntu dlm dokumen HTML.
Untuk mencoba menggunakan atribut ID pada Tag <A> lakukan langkah2 berikut.
- Jalanan Notepad
- Ketik baris2 dbawah ini.
<html>
<head>
<title> Latihan Membuat Link dg ID </title>
</head>
<body>
Pilih Paragraf :
<br>
<a href="#par1"> Paragraf 1 </a>
<br>
<a href="#par2"> Paragraf 2 </a>
<br>
<a href="#par3"> Paragraf 3 </a>
<br>
<br><br><br><br><br><br><br>
<a ID="par1"> Bagian Paragraf Kesatu </a>
<p>Ini adalah paragraf ke satu dari seluruh teks yg ada, Anda dapat mengklik Link lainnya untuk berpindah ke paragraf lainnya. </p>
<br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br>
<a ID="par2"> Bagian Paragraf Kedua </a>
<p>Ini adalah paragraf ke dua dari seluruh teks yg ada, Anda dapat mengklik Link lainnya untuk berpindah ke paragraf lainnya. </p>
<br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br>
<a ID="par3"> Bagian Paragraf Ketiga </a>
<p>Ini adalah paragraf ke dua dari seluruh teks yg ada, Anda dapat mengklik Link lainnya untuk berpindah ke paragraf lainnya. </p>
</body>
</html>
- Simpan dg nama lat9.htm d folder LatihanHTML.
- Lalu jalankan filenya, lalu amati hasilnya. (g pake gambar, gede bgt ampe ke bawah2, jd susah :D, tp klo dah d coba pasti tau fungsinya)
Fungsi diatas juga bisa dgunakan untuk membuat semacam tombol "Back to Top/Kembali ke Atas", sperti itulah fungsinya kira2...Selamat mencoba....