loading...
Pada tutorial HTML dasar kali ini kita akan membahas tentang salah satu bagian terpenting dan sering kita temui di web, yaitu bagaimana cara membuat link di HTML. Link atau Hyperlink adalah sebuah text yang ketika teks tersebut di-klik oleh pengunjung, maka pengunjung tersebut akan dibawa ke halaman lainnya, baik itu menuju ke halaman website yang berbeda maupun ke website yang sama.
Link sendiri merupakan tujuan dari kata Hypertext dari kepanjangan HTML, maksudnya adalah sebuah teks biasa dapat berfungsi lain, yaitu ketika di-klik akan berpindah ke halaman lainnya.
Untuk menambahkan link, HTML menyediakan sebuah tag yang bernama tag <a>. Tag <a> merupakan singkatan dari anchor (jangkar). Setiap tag <a> setidaknya memiliki atribut href (singkatan dari hypertext reference) yang berisi alamat atau url yang dituju. Berikut syntax dasar penulisan tag link:
Untuk lebih jelasnya silakan sobat perhatikan contoh penggunaan tag link <a> berikut ini:
Secara default, link akan ditampilkan oleh web browser seperti berikut:
Alamat absolut biasanya digunakan untuk link yang menuju ke situs lain di internet atau yang dikenal dengan sebutan external link (link keluar). Seperti pada contoh kode di atas kita menuliskan alamat secara lengkap dengan bagian "http://" yang berarti kita membuat link menuju ke alamat lain (bukan situs saat ini).
Lebih sederhananya, alamat absolut adalah cara penulisan alamat dengan menyertakan nama website, misalnya seperti href=”http://strukturweb.blogspot.com/p/tutorial-html.html” atau href="https://www.facebook.com".
Sedangkan alamat relatif adalah link yang dibuat untuk menuju ke situs yang sama dan tidak perlu menyertakan alamat website tersebut secara lengkap, melainkan kita cukup mencantumkan file yang dituju relatif kepada file saat ini.
Sebagai contoh sederhananya, jika kita ingin membuat link menuju ke file hello.html pada folder yang sama dengan file saat ini, maka kita cukup menuliskan href=”hello.html”. Supaya lebih mudah memahami perbedaannya dari keduanya, silakan sobat perhatikan contoh di bawh ini.
Contoh penggunaan tag link <a> untuk alamat absolut dan relatif. Buatlah dua buah file HTML dengan nama halaman1.html dan hello.html dan simpan di dalam folder yang sama.
Kode halaman1.html:
Kode hello.html:
Kesimpulan:
Selain atribut href, ternyata tag <a> masih memiliki beberapa atribut penting lainnya, dan yang paling sering digunakan adalah atribut target. Atribut ini berfungsi untuk menentukan apakah link yang dituju terbuka pada halaman web browser saat ini atau terbuka di jendela baru.
Jika kita tidak menambahkan atribut target, secara default link tersebut akan terbuka pada jendela yang sama ketika di-klik (menimpa halaman saat ini). Tetapi jika kita ingin halaman tersebut terbuka pada tab baru, maka kita harus menambahkan atribut target=”_blank”.
Contoh penggunaan tag <a> dengan atribut target:
Jika anchor text Strukturweb di atas di-klik, maka akan terbuka pada jendela baru pada web browser karena sudah ditambahkan atribut target=”_blank”. Itulah tutorial tentang cara membuat link di HTML. Untuk tutorial HTML dasar berikutnya kita akan membahas tentang cara memasukkan gambar ke dalam HTML (tag <img>).
Link sendiri merupakan tujuan dari kata Hypertext dari kepanjangan HTML, maksudnya adalah sebuah teks biasa dapat berfungsi lain, yaitu ketika di-klik akan berpindah ke halaman lainnya.
Cara Membuat Hyperlink di HTML
Untuk menambahkan link, HTML menyediakan sebuah tag yang bernama tag <a>. Tag <a> merupakan singkatan dari anchor (jangkar). Setiap tag <a> setidaknya memiliki atribut href (singkatan dari hypertext reference) yang berisi alamat atau url yang dituju. Berikut syntax dasar penulisan tag link:
<a href="url_tujuan">Teks link</a>
Untuk lebih jelasnya silakan sobat perhatikan contoh penggunaan tag link <a> berikut ini:
<!DOCTYPE html>
<html>
<head>
<title>Belajar link HTML</title>
</head>
<body>
<h1>Contoh penggunaan tag link</h1>
<p>Saya sedang belajar HTML di <a href="http://strukturweb.blogspot.com">Strukturweb</a></p>
</body>
</html>
Secara default, link akan ditampilkan oleh web browser seperti berikut:
- Link yang belum dikunjungi akan berwarna biru dan digarisbawahi
- Link yang telah dikunjungi (di-klik) akan berwarna ungu dan digarisbawahi
- Link aktif akan berwarna merah dan digarisbawahi
Mengenal Alamat Absolut dan Alamat Relatif Pada Link
Alamat absolut biasanya digunakan untuk link yang menuju ke situs lain di internet atau yang dikenal dengan sebutan external link (link keluar). Seperti pada contoh kode di atas kita menuliskan alamat secara lengkap dengan bagian "http://" yang berarti kita membuat link menuju ke alamat lain (bukan situs saat ini).
Lebih sederhananya, alamat absolut adalah cara penulisan alamat dengan menyertakan nama website, misalnya seperti href=”http://strukturweb.blogspot.com/p/tutorial-html.html” atau href="https://www.facebook.com".
Sedangkan alamat relatif adalah link yang dibuat untuk menuju ke situs yang sama dan tidak perlu menyertakan alamat website tersebut secara lengkap, melainkan kita cukup mencantumkan file yang dituju relatif kepada file saat ini.
Sebagai contoh sederhananya, jika kita ingin membuat link menuju ke file hello.html pada folder yang sama dengan file saat ini, maka kita cukup menuliskan href=”hello.html”. Supaya lebih mudah memahami perbedaannya dari keduanya, silakan sobat perhatikan contoh di bawh ini.
Contoh penggunaan tag link <a> untuk alamat absolut dan relatif. Buatlah dua buah file HTML dengan nama halaman1.html dan hello.html dan simpan di dalam folder yang sama.
Kode halaman1.html:
<!DOCTYPE html>
<html>
<head>
<title>Belajar membuat link HTML</title>
</head>
<body>
<h1>Link absolut dan link relatif</h1>
<h3>Link absolut</h3>
<p>Saya sedang belajar HTML dasar di <a href="http://strukturweb.blogspot.com/p/tutorial-belajar-html.html">Strukturweb</a>.</p>
<h3>Link relatif</h3>
<p>Pelajaran pertama saya adalah membuat file <a href="hello.html">Hello</a>.</p>
</body>
</html>
Kode hello.html:
<!DOCTYPE html>
<html>
<head>
<title>Halaman HTML pertama saya</title>
</head>
<body>
<p>Hello World!</p>
</body>
</html>
Kesimpulan:
- Alamat absolut ditulis dengan menyertakan nama website secara lengkap, seperti href="https://wikipedia.org", atau jika kita menuju ke halaman tertentu seperti href="https://wikipedia.org/pengertian-html.html". Biasanya link absolut digunakan untuk menuju ke situs lain di luar file saat ini (external link).
- Alamat relatif adalah relatif kepada file tempat kita memanggil link ini (situs saat ini). Misalnya file kita saat ini adalah halaman1.html, dan dalam folder yang sama terdapat file hello.html, sehingga kita dapat menuliskan href="hello.html" untuk membuat link menuju hello.html. Jika file hello.html berada pada folder sedang_belajar, maka penulisannya href=”sedang_belajar/hello.html".
Mengenal Atribut Target Pada Tag <a>
Selain atribut href, ternyata tag <a> masih memiliki beberapa atribut penting lainnya, dan yang paling sering digunakan adalah atribut target. Atribut ini berfungsi untuk menentukan apakah link yang dituju terbuka pada halaman web browser saat ini atau terbuka di jendela baru.
Jika kita tidak menambahkan atribut target, secara default link tersebut akan terbuka pada jendela yang sama ketika di-klik (menimpa halaman saat ini). Tetapi jika kita ingin halaman tersebut terbuka pada tab baru, maka kita harus menambahkan atribut target=”_blank”.
Contoh penggunaan tag <a> dengan atribut target:
<!DOCTYPE html>
<html>
<head>
<title>Belajar link HTML</title>
</head>
<body>
<h3>Contoh penggunaan atribut target</h3>
<p>Saya sedang belajar di <a href="http://strukturweb.blogspot.com" target="_blank">Struktur web</a> dan akan terbuka pada tab baru.</p>
<p>Sedangkan <a href="http://strukturweb.blogspot.com">Halaman ini</a> akan terbuka pada jendela saat ini.</p>
</body>
</html>
Jika anchor text Strukturweb di atas di-klik, maka akan terbuka pada jendela baru pada web browser karena sudah ditambahkan atribut target=”_blank”. Itulah tutorial tentang cara membuat link di HTML. Untuk tutorial HTML dasar berikutnya kita akan membahas tentang cara memasukkan gambar ke dalam HTML (tag <img>).
loading...
sebelumya terima kasih atas penjelasannya mas, saya masih belum jelas dengan membuat link dengan menggunakan title atau rel apakah kedua ini berbeda dengan href dan apakah ada fungsi tertentu ya menggunakan link seperti itu?
ReplyDeletePenggunaan atribut title di dalam tag link berfungsi untuk memberikan keterangan dari link tersebut.
DeleteContoh: title="Tempat belajar pemrograman web"
Sedangkan atribut rel berfungsi untuk memberikan apakah link tersebut bersifat dofollow atau nofollow.
Contoh: rel="nofollow"
Semoga membantu :)
thank tutornya bro
ReplyDeletemampir juga di http://dedyk19.blogspot.co.id/?m=1
Sama-sama bro
Delete