Belajar HTML Bag. 5 ( Links )
Tuesday, August 24, 2010
Labels:
Windows dan Linux
Di HTML kita akan mengenal dua buah tag yang menangani linking, yaitu tag <a> dan <link>.
Tag <a>
Tag ini digunakan untuk berpindah dari satu page ke page lainnya, dari satu website ke website lainnya atau berpindah dari satu bagian dalam page kebagian lainnya yang masih dalam page tesebut. Untuk memperjelas maksud saya, berikut kita bahas dan praktikan kedalam kode.
Linking antar situs
Code:
<a href=”http://4-mall.com”>Go To 4-mall.com</a>
Penjelasan:
Kode diatas memberikan fungsi kepada text bertuliskan “Go To 4-mall.com” untuk link ke alamat http://www.4-mall.com pada halaman yang sama.
Linking antar page
Code:
<a href=”page7.htm”>Ke Page 7</a>
Penjelasan:
Kode diatas memberikan fungsi kepada text bertuliskan “Ke Page 7” untuk link ke webpage page7.htm yang masih dalam satu root situs.
Linking dengan membuka tab baru
Code:
<a href=”http://www.4-mall.com” target=”_blank”>Go to 4-mall.com</a>
Penjelasan:
Kode diatas memberikan fungsi kepada text bertuliskan “Go to 4-mall.com” untuk link ke alamat http://www.4-mall.com dengan membuka window baru.
Linking antar bagian
Sebelum dapat menggunakan fungsi linking antar bagian dalam satu webpage, terlebih dahulu anda harus membuat tanda atau sebuah alamat pada bagian tesebut. Anda dapat menggunakan atribut “name” untuk membuat tanda tersebut. Untuk lebih jelasnya perhatikan dan jalankan kode berikut :
Code:
<html>
<head>
<title> Cobalihatsaja Tutorial </title>
</head>
<body>
<a href="#bawah">Ke Bawah</a><br><br><br><br>
<h4 ><a name="atas">Bagian 1</a></h4><br><br>
<h4>Bagian 2</h4><br><br><br><br>
<h4>Bagian 3</h4><br><br><br><br>
<h4>Bagian 4</h4><br><br><br><br>
<h4>Bagian 5</h4><br><br><br><br>
<h4><a name="bawah">Bagian 6</a></h4><br><br><br><br>
<a href="#atas">Ke Atas</a><br><br>
</body>
</html>
Hasil :
Penjelasan:
Lihat pada kode diatas, saya membuat 6 baris judul diikuti dengan tag <br> supaya jarak antar judul berbeda jauh, sehingga akan terlihat fungsi link yang kita buat. Selanjutnya perhatikan pada “Bagian 1” dan “Bagian 6”, disana tentu anda lihat sebuah tag <a> diikuti dengan atribut “name” yang berfungsi memberikan alamat untuk linking, disana saya memberikan nama alamat “atas” untuk “Bagian 1” dan “bawah” untuk “Bagian 6”. Setelah itu lihat pada bagian link yang kita buat, perbedaannya adalah adanya tanda “#” pada atribut href yang kita buat.
Linking untuk mengirim email
Selain digunakan untuk mehubungkan antar webpage, tag <a> juga dapat digunakan untuk keperluan mengirim email. Perhatikan contoh berikut :
Code :
<html>
<head>
<title> Cobalihatsaja Tutorial </title>
</head>
<body>
<a href="mailto:sales@4-mall.com?cc=sales2@4-mall.com&bcc=direktur@4- mall.com&subject=Permintaan penawaran harga laptop&body=Dengan email ini saya mohon untuk dikirimkan pricelist laptop terbaru. Terima kasih.">Kirim Email!</a></body>
</html>
Hasil :
Penjelasan :
Seperti anda lihat, disana kita menggunakan atribut mailto dengan sub-atribut cc,bcc, subject dan body. Jika link tersebut kita klick, maka akan muncul mail client default system operasi anda dan akan secara langsung terisi dengan parameter yang sudah kita berikan pada atribut mailto tersebut.
Tag <link>
Tag ini digunakan bukan untuk melakukan linking secara langsung, akan tetapi digunakan untuk melakukan linking sebagai relasi webpage dengan file lain. Misalkan webpage anda menggunakan style css yang ada difile lain, maka anda dapat menghubungkan webpage anda dengan file css tersebut dengan tag ini. Penggunaanya pun simple, berikut contoh penggunaan tag <link>
<html>
<head>
<link rel=”stylesheet” type=”text/css” href=”thema.css”/>
<title> Cobalihatsaja Tutorial </title>
</head>
<body>
Web Page yang sudah terformat menggunakan file style thema.css
</body>
</html>
Uwes ndisik rek…….nguantoke polll…zzzzzzzzzzzzz…….
Terima Kasih Sudah Mampir, Salam Persahabatan...
0 comments:
Post a Comment