jika dalam tutorial sebelumnya kita telah membahas mengenai cara membuat daftar/list di html, nah dalam tutorial kali ini kita akan membahas mengenai cara membuat link di HTML.
Sebenarnya link itu apa sih ?
Link itu adalah sebuah fitur yang diberikan oleh HTML untuk mengkaitkan 1 halaman website dengan halaman – halaman website lainnya, halaman tersebut bisa dalam 1 website yang sama, ataupun bisa dengan halaman website lainnya, tidak hanya itu anda bisa mengkaitkan dengan dokumen yang anda inginkan seperti image, audio, video dan masih banyak yang lain, cara ini biasanya digunakan untuk membuat fitur download.
Cara membuat link di HTML
Tag yang digunakan untuk membuat link di HTML adalah tag <a>, tag <a> memiliki attribute href yang valuenya adalah alamat yang akan diakses ketika link di klik, coba anda perhatikan skrip dibawah ini :
<!DOCTYPE html>
<html>
<head>
<title>Belajar HTML di Warung Belajar</title>
</head>
<body>
<p>Selamat Datang di <a href="https://grahakreatif.id">Warung Belajar</a> anda dapat belajar
mengenai tutorial pemrogaman web disini</p>
</body>
</html>nah setelah itu silahkan diakses di browser.
terlihat untuk tulisan dari warung belajar telah berganti warna, hal tersebut dikarenakan kita telah menambahkan link di text tersebut, nantinya jika di klik akan mengakses halaman website https://grahakreatif.id nah jadi mudahkan.
Mengenal Attribute target
Akan timbul pertanyaan jika nanti link di klik, link tersebut terbuka dimana ?
Nah dengan menggunakan attribute ini kita bisa mengatur dimana link akan dibuka. Secara default jika link di klik maka akan dibuka di tab itu sendiri, tetapi jika anda menginginkan untuk membukanya di tab lain anda bisa mengisikan value attribute target dengan _blank
contohnya adalah seperti berikut ini :
<!DOCTYPE html>
<html>
<head>
<title>Belajar HTML di Warung Belajar</title>
</head>
<body>
<p>Selamat Datang di <a target="_blank" href="https://www.warungbelajar.com">Warung Belajar</a> anda dapat belajar mengenai tutorial pemrogaman web disini</p>
</body>
</html>jika anda buka lewat browser, dan anda klik linknya, maka link akan terbuka di tab baru.
Mengenal Alamat Absolute dan Alamat Relatif
Alamat Absolute ini adalah alamat dari website lain, bisa juga dikenal dengan nama external link.
Alamat absolute biasanya menyebutkan alamat url websitenya, semisal seperti href=”http://www.facebook.com”
oww jadi seperti itu alamat absolute, lalu yang seperti apa alamat relatif itu ?
Alamat relatif itu adalah alamat yang berada didalam website itu sendiri, semisal ingin mengakses dari halaman aboutus.html ya maka tinggal tulis aja href=”aboutus.html” nah itu yang dimaksud dari alamat relatif.
contohnya adalah seperti berikut ini :
<!DOCTYPE html>
<html>
<head>
<title>Belajar HTML di Warung Belajar</title>
</head>
<body>
Silahkan tinggalkan pesan pada halaman <a href="contactus.html">Contact Us</a> jika ingin mengirim pesan ke admin website.
</body>
</html>nah coba perhatikan jika anda menginginkan mengakses file contactus.html yang berada di folder yang sama dengan file website yang sedang aktif, anda cukup mengetikkan dengan menggunakan cara tersebut.
lalu bagaimana jika ternyata filenya itu ada di folder lain, baik kita akan bahas lebih detail lagi.
Struktur folder pada link
jika pada contoh diatas anda bisa mengetikkan langsung nama filenya jika ingin membuat link dengan catatan filenya itu berada di folder 1 yang sama.
| 1 | <a href="contactus.html">Contact Us</a> |
jika file tersebut berada di folder lain semisal foldernya bernama “web” maka anda bisa mengetikkan.
| 1 | <a href="web/contactus.html">Contact Us</a> |
jika file tersebut berada di 1 tingkat diluar folder dari tempat anda menyimpan file website yang sedang diakses, anda bisa mengetikkan.
| 1 | <a href="../contactus.html">Contact Us</a> |
jika file berada di 2 tingkat diluar folder anda bisa merubahnya dengan mengetikkan
| 1 | <a href="../../contactus.html">Contact Us</a> |
ya kurang lebih seperti itu ya kawan, kita telah belajar mengenai bagaimana cara membuat link di html, serta belajar mengenai beberapa attribute yang ada dalam html, sekian dulu tutorial html kali ini, jika ingin berdiskusi bisa dikolom komentar, sekian dulu sampai jumpa di tutorial berikutnya.
Post a Comment