Link yakni tujuan kata Hypertext dari kepanjangan HTML. Pada Tutorial kali ini aku akan membahas cara menciptakan link pada HTML. Tujuan kata Hypertext dari HTML yakni menciptakan sebuah text yang ketika di-klik akan pindah ke halaman lainnya. HTML memakai tag <a> untuk keperluan ini. Link ditulis dengan <a> yang merupakan abreviasi cari anchor (jangkar). Setiap tag <a> setidaknya mempunyai sebuah atribut href. Dimana href berisi alamat yang dituju (href yakni abreviasi dari hypertext reference). Ada dua model untuk menciptakan link diantara ada link Alamat Absolute dan link Alamat Relatif. Agar lebih gampang dimengerti aku sudah buatkan pola dibawah ini, silahkan buka text editor teman-teman dan buat instruksi ibarat dibawah ini.
<!DOCTYPE html>
<html>
<head>
<title>Penggunaan Tag Link </title>
</head>
<body>
<h1>Belajar Tag Link</h1>
<p>Saya lagi berguru HTML di <a href="http://pointwebsite.blogspot.co.id"></p>
</body>
</html>
<html>
<head>
<title>Penggunaan Tag Link </title>
</head>
<body>
<h1>Belajar Tag Link</h1>
<p>Saya lagi berguru HTML di <a href="http://pointwebsite.blogspot.co.id"></p>
</body>
</html>
Maka jikalau dijalankan pada web browser akan menghasilkan ibarat ini :
Pada pola diatas kita menuliskan alamat link secara lengkap dengan bab “http://www.”. Penulisan ibarat ini disebut juga dengan external link, yang berarti kita menciptakan link ke alamat lain di internet, atau lebih dikenal dengan sebutan alamat absolut.
Alamat sewenang-wenang yakni penulisan alamat file dengan menyertakan nama website, seperti: href=”http://pointwebsite.blogspot.co.id/”, atau href=”http://www.wikipedia.org”.
Pada pola diatas kita menuliskan alamat link secara lengkap dengan bab “http://www.”. Penulisan ibarat ini disebut juga dengan external link, yang berarti kita menciptakan link ke alamat lain di internet, atau lebih dikenal dengan sebutan alamat absolut.
Alamat sewenang-wenang yakni penulisan alamat file dengan menyertakan nama website, seperti: href=”http://pointwebsite.blogspot.co.id/”, atau href=”http://www.wikipedia.org”.
Alamat absolute ditulis dengan lengkap, ibarat http://www.contohweb.com, atau jikalau kita merujuk kepada halaman tertentu pada website tersebut teman-teman sanggup menciptakan nya menjadi http://www.contohweb.com/nama_halaman.html.
Namun jikalau kita ingin menciptakan link di dalam situs yang sama, maka tidak perlu menyebutkan alamat lengkap tersebut. Tetapi cukup mencantumkan alamat file yang dituju relatif kepada file ketika ini. Jenis alamat ini disebut alamat relatif.
Namun jikalau kita ingin menciptakan link di dalam situs yang sama, maka tidak perlu menyebutkan alamat lengkap tersebut. Tetapi cukup mencantumkan alamat file yang dituju relatif kepada file ketika ini. Jenis alamat ini disebut alamat relatif.
Sebagai pola alamat relatif,apabila kita ingin menciptakan link kepada file kedua.html pada folder yang sama dengan file ketika ini, maka atribut hrefnya, berisi: href=”kedua.html”. Agar lebih memudahkan silahkan teman-teman buat satu folder dan didalam folder tersebut teman-teman buat dua file HTML yang satu nama file nya pertama.html dan yang kedua nama file nya kedua.html. Silahkan ketikkan code dibawah ini untuk file pertama.html.
<!DOCTYPE html>
<html>
<head>
<title>Penggunaan Tag Link </title>
</head>
<body>
<h1>Belajar Tag Link</h1>
<p>Ini halaman HTML pertama aku </p>
<p>Lanjutkan pada halaman HTML kedua saya<a href="kedua.html">Halaman kedua</a></p>
</body>
</html>
Kemudian ketikan lagi untuk file kedua.html dengan code di bawah ini :
<!DOCTYPE html>
<html>
<head>
<title>Penggunaan Tag Link </title>
</head>
<body>
<h1>Belajar Tag Link</h1>
<p>Ini halaman HTML kedua saya</p>
<p>kembali pada halaman HTML pertama saya<a href="pertama.html">Halaman pertama</a></p>
</body>
</html>
Silahkan teman-teman jalankan file pertama.html dan file kedua.html pada web browser lalu klick pada text yang bergaris bawah tersebut.
Perlu diperhatikan, Alamat relatif maksudnya yakni relatif kepada file daerah kita memanggil link ini. Seandainya nama file kita yakni belajar_link.html, dan dalam folder yang sama terdapat halaman belajar_list.html, kita sanggup memakai href=”belajar_list.html” untuk menciptakan link ke halaman belajar_list.html .
Jika file tersebut berada di dalam folder lagi_belajar, maka alamat relatif nya menjadi href=”lagi_belajar/belajar_list.html”. Namun bagaimana jikalau halaman tersebut berada 2 tingkat di luar folder ketika ini? Kita sanggup menggunakan href =”../../belajar_list.html”, untuk naik 2 folder diatasnya.
Atribut tag <a>: target
Atribut penting lainnya dari tag <a> yakni target. Atribut ini dipakai untuk memilih apakah link yang dituju terbuka di jendela browser ketika ini, atau terbuka di jendela baru. Secara default, setiap link yang kita tulis akan terbuka pada jendela yang sama (menimpa halaman web ketika ini). Tetapi apabila kita ingin halaman tersebut terbuka pada tab baru, gunakan atribut target=”_blank”.Contoh penggunaan tag link <a> dengan atribut sasaran :
<!DOCTYPE html>
<html>
<head>
<title>Penggunaan Tag Link </title>
</head>
<body>
<h1>Belajar Tag Link</h1>
<p>Ini halaman HTML pertama aku </p>
<p>Lanjutkan pada halaman HTML kedua aku <a href="kedua.html" target="_blank">Halaman kedua</a></p>
</body>
</html>
Silahkan teman-teman jalankan dan coba klik link tersebut, maka halaman kedua akan terbuka di tab baru, dan tidak menimpa tab ketika ini.
Selain dipakai untuk menghubungkan halaman HTML, Tag <a> juga sanggup dipakai untuk dihubungkan ke bab lain dari halaman yang sama, atau disebut Internal Link. Cara pembuatan internal link yakni dengan menciptakan link berisi atribut id dari tag lain. Untuk lebih jelasnya, akan kita bahas pada tutorial selanjutnya.
No comments:
Post a Comment