Blog Pemula

3 August 2011

Belajar HTML Dasar (7)

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....
    Posted by Teguh at 22:03
    Labels: ,

    4 comments:

    Subscribe to: Post Comments (Atom)