Widodo

#HTML Dasar Part 5 Cara Membuat link di HTML

Cara Membuat Link di HTML

Kembali pada Artikel pertama kali kita bahas,  Arti dari kata Hypertext dari HTML adalah teks yang ketika di-klik akan membawa kita berpindah ke satu halaman ke halaman lainnya atau disebut juga dengan link.

Link ditulis dengan tag <a> yang merupakan singkatan dari anchor. Setiap tag <a> sebaiknya dilengkapi dengan atribut href. Atribut href diisi dengan alamat atau nama file halaman yang dituju. Href sendiri adalah singkatan dari hypertext reference. lebih jelaskan kita akan coba memberikan contoh penggunaanya sebagai berikut :

<!DOCTYPE html>
<html>
    <head>
       <title>Belajar Membuat Link</title>
    </head>
<body>
    <p>Asiknya belajar mengenal html dasar bersama
    <a href="http://s-widodo.com">S-widodo.com</a></p>
</body>
</html>

Demo

Kode HTML diatas saat link di klik, maka Anda akan dibawa ke alamat  s-widodo.com

Mengenal Alamat Abbsolute dan Alamat Relatif Dalam HTML

Pada contoh diatas kita menuliskan alamat link secara lengkap dengan bagian “http://”. Penulisan seperti ini disebut juga dengan external link, yang berarti kita membuat link ke alamat lain di internet, atau lebih dikenal dengan: Alamat absolut.

Alamat Absolut merupakan penulisan alamat website baik yang dilengkapi nama file maupun tidak, seperti :

href="http://www.shoppinglagi.com/category/sepatu-pria.html" atau hanya  href="http://www.shoppinglagi.com".

Jika kita ingin membuat link didalam situs kita sendiri, maka tidak perlu menyebut alamat lengkap tersebut, cukup mencantumkan alamat file yang dituju relatif pada file saat ini.  Jenis alamat ini disebut alamat relatif. Sebagai contoh penggunaan alamat relatif, apabila kita ingin membuat link yang mengarah pada file belajar-html.html pada folder yang sama dengan file saat ini, atribut hrefnya cukup ditulis href="./category/sepatu-pria.html" dan tidak perlu href="http://www.shoppinglagi.com/category/sepatu-pria.html " ini adalah salah satu contoh dari web shoppinglagi.com

Berikut contoh kode HTML penggunaan alamat relatif :

<!DOCTYPE html>
<html>
    <head>
        <title>Belajar Membuat Link</title>
    </head>
<body>
    <p>Asiknya belanja Sepatu Premium di 
    <a href="./category/sepatu-pria.html">Shoppinglagi.com</a></p>
</body>
</html>

Demo

Lihat perbedaannya? Alamat absolute harus ditulis dengan lengkap, seperti http://www.shoppinglagi.com atau jika menunjuk kepada halaman/file tertentu, maka menjadi seperti ini: href="http://www.shoppinglagi.com/category/sepatu-pria.html. Yang dimaksud alamat relatif adalah alamat yang relatif terhadap file tempat kita memanggil link ini.

Jika file tersebut berada di dalam folder category/sepatu-pria, maka alamat relatifnya menjadi href=”./category/sepatu-pria.html”. Namun bagaimana jika halaman tersebut berada 1 tingkat di luar folder saat ini? Kita dapat menggunakan href=”../category/sepatu-pria.html”, untuk naik 1 folder diatasnya.

Mengenal Atribut Target

Atribut  target digunakan untuk mengatur apakah link yang dituju terbuka di jendela browser yang aktif saat ini atau terbuka di jendela baru. Dalam kondisi default, setiap link yang diklik akan terbuka pada jendela yang sama sehingga mengganti halaman web saat ini yang sedang terbuka. Akan tetapi, kondisi tersebut bia diubah. Apabila kita ingin halaman tersebut terbuka pada jendela baru, maka gunakan atribut target="_blank",  link tersebut bisa juga terbuka di tab yang baru.

<!DOCTYPE html>
<html>
    <head>
      <title>Belajar Membuat Link</title>
    </head>
<body>
    <p>Asiknya belanja Sepatu Premium di
      <a href="http://www.shoppinglagi.com" target="_blank">Shoppinglagi.com</a>
    </p>
</body>
</html>

Demo

Penjelasan Kode diatas adalah Jika kita meng-klik link tersebut, maka situs www.shoppinglagi.com akan terbuka di tab browser kalian.

Melanjutkan pembahasan Dasar-dasar HTML berikutnya  kita akan belajar bagaimana  memasukkan Gambar ke dalalam HTML dengan enggunakan tag <img>



0 Komentar


Copyright © 2015 S-widodo.com Digital marketing