Hallo coders, kali ini kita akan belajar cara membuat link Html. Disini kita akan belajar cara membuat link untuk menghubungkan halaman website kita. Pasti temen temen sudah tau ya, gampangnya kalo temen temen mengeklik navigasi maka halaman akan berpindah nah itu adalah menggunakan tag link temen temen. Coba bayangkan apa jadinya website tanpa link ?. Kita harus mengetik urlnya untuk berpindah halaman, tentu ini akan meribetkan user kan. Nah maka dari itu tag link ini dibuat.
Apa itu tag link Html
Link atau hyperlink adalah elemen HTML yang berfungsi menghubungkan suatu halaman web ke halaman web yang lain. Elemen ini bisa diklik dan nanti akan membuka halaman lain sesuai alamat URL yang kita berikan.
Hyperlink ini juga bisa berfungsi untuk kendali menuju scroll top dan scroll down, download file, dan menjalankan fungsi javascript dll. Contohnya adalah navbar di sebuah website landing page gaess.
Nah untuk lebih dalamnya kita akan bahasa lebih dalam ya gess.
Cara membuat Link Html
Cara membuat link di html kita mulai dengan tag a. Di tag ini terdapat atribut yaitu href, nah di sini kita akan meletakan alamat yang akan kita tuju. Kurang lebih konsepnya seperti ini gaess.
Contoh diatas adalah konsep jika kita mau membuat link menuju website blog dunia coding.
Mari kita prakteran, temen temen bisa membuat file dengan naman index.html. Kemudian bisa praktekan kode seperti dibawah ini.
<!DOCTYPE html>
<html>
<head>
<title>Belajar Tag Link </title>
</head>
<body>
<h1>Belajar Tag Link</h1>
<p>Halaman ini akan menuju website duniacoding <a href="https://duniacoding.site/">Dunia Coding Academy</a></p>
</body>
</html>
Jika temen temen praktekan kode diatas maka akan muncul halaman seperti ini.
Link Absolute
Link absolute ditulis secara lengkap seperti diatas tadi temen temen yaitu https://duniacoding.site/. Atau jika kita ingin ke halaman tertentu di website tersebut temen temen bisa menuliskannya seperti ini https://duniacoding.site/kelas.
<!DOCTYPE html>
<html>
<head>
<title>Belajar Tag Link </title>
</head>
<body>
<h1>Belajar Tag Link</h1>
<p>Halaman ini akan menuju website duniacoding <a href="https://duniacoding.site/kelas">Kelas Dunia Coding Academy</a></p>
</body>
</html>
Link Relative
Link relative berbeda dengan link absolute. Link relative untuk memanggil file website kita yang dihalaman lain. Semisal kita punya halaman index.html kemudian kita membuat file untuk halaman yang lain contoh halaman.html. Maka akan mengarahkan website kita yang halaman lain dengan cara menuliskan halaman.html didalam atribut href.
Jika file tersebut berada didalam folder yang namanya belajar, maka link relatifnya menjadi href=”belajar/halaman.html”. Tetapi bagaimana jika halaman tersebut berada di dua tingkat luar folder saat ini ? Kita dapat menggunakan href=”../../halaman.html”.
Untuk lebih jelasnya disini saya akan membuat halaman.html yang dijejerkan dengan halaman index.html
index.html
<!DOCTYPE html>
<html>
<head>
<title>Belajar Tag Link </title>
</head>
<body>
<h1>Belajar Tag Link</h1>
<a href="halaman.html">Menuju halaman lain</a>
</body>
</html>
halaman.html
<!DOCTYPE html>
<html>
<head>
<title>Halaman Html baru </title>
</head>
<body>
<h1>Hallo ini halaman baru</h1>
<p>Untuk kembali kehalaman utama
<a href="index.html">klik ini</a>
</p>
</body>
</html>
Jika temen temen buka maka hasilnya akan boom keren bukan.
Nah untuk yang kasus didalam folder atau diluar tingkat folder kalian bisa explore sendiri yah mimin sudah kasih cluenya tadi diatas semangat.
Link dengan Tab baru
Setelah kita belajar tentang menuliskan alamat. Kali ini kita akan belajar artibut yang gak kalah penting di tag link yaitu namanya adalah tag target. Atribut ini digunakan khusus menentukan apakah link yang kita tuju itu mau dibuka di browser yang sekarang dengan mengganti keseluruhan halaman atau dengan membuka tab baru dibrowser kita.
Secara default, setiap link yang kita tuliskan akan terbuka di halaman tab browser yang sama atau bisa dibilang menimpa halaman web saat ini seperti yang kita lakuan tadi diawal. Nah jika kita ingin halaman tersebut terbuka di tab baru, gunakan atribut target=”_blank”.
<!DOCTYPE html>
<html>
<head>
<title>Belajar Tag Link </title>
</head>
<body>
<h1>Belajar Tag Link</h1>
<a href="halaman.html" target="_blank">Menuju halaman lain</a>
</body>
</html>
Nah belajar kita sampai sini dulu ya gaess semoga apa yang saya tulis dapat dengan mudah dipahami oleh kalian semua. Jika ada pertanyaan bisa bertanya di kolom komen insyaallah dibalas secepatnya salam ngoding.
