HTML Dasar Part 4 : Mengenal Hyperlink
Seperti biasa, sebelum memulai belajar alangkah baiknya membaca do'a terlebih dahulu
Kali ini kita sudah berada di Part-4 HTML dasar. Sebelumnya kita sudah belajar di part-3 tentang Tag Heading dan Tag Paragraf, dan untuk di part-4 ini kita akan belajar tentang Tag Hyperlink.
Hyperlink sendiri berfungsi untuk membuka halaman lain pada HTML.
Dalam hyperlink sendiri membutuhkan tag <a></a>, di dalam tag pembuka <a> akan diisi attribute, contoh seperti ini <a href="nilai"> Nama <a/>, pada contoh ini href merupakan attributenya, dan "nilai" merupakan link yang akan kita buka, sedangkan Nama yang berada di antara tag pembuka dan penutup merupakan teks yang akan menuju link tersebut. Oke biar gak pusing atau bingung, mari praktekkan seperti biasa.
1. Buka file latihan.html ke text editor (bagi yang belum mengerti, bisa mempelajari part-1 sampai part-3)
2. Silahkan buat code seperti dibawah ini pada text editor yang anda gunakan
<html>
<head>
<title> Web Ku </title>
</head>
<body>
<h1> Website Keren </h1>
<p> Selamat datang di website ku </p>
<a href="https://google.com"> GOOGLE </a>
</body>
</html>
3. Seperti biasa save terlebih dahulu sebelum mencobanya di browser, cukup menekan tombol Ctrl+S untuk menyimpannya.
4. Sekarang bukalah latihan.html menggunakan browser, maka hasilnya akan seperti ini :
5. Coba anda klik teks GOOGLE, pasti browser akan otomatis menuju ke link Google
**Penjelasan : Kita fokus ke <a href="https://google.com"> GOOGLE </a>. Pada tag <a> berisi sebuah attribute yaitu href, attribute href berfungsi untuk membuat sebuh link yanng akan dituju. "https://google.com" adalah link yang dituju, sedangkan GOOGLE yang merupakan isi dari tag pembuka <a> dan tag penutup </a> yaitu teks yang nantinya jika diklik akan menuju ke alamat atau link https://google.com.
6. Oke kita balik lagi ke teks editornya, silahkan buat lagi kode seperti dibawah ini :
<html>
<head>
<title> Web Ku </title>
</head>
<body>
<h1> Website Keren </h1>
<h2> Belajar HTML </h2>
<p> Selamat datang di website ku </p>
<a href="https://google.com"> GOOGLE </a>
<a href="https://segeranat.blogspot.com" target="_blank"> SEGERAN PUNYA </a>
</body>
</html>
7. Tekan tombol Ctrl+S untuk menyimpan file
8. Refresh browser yang anda gunakan, maka tampilannya akan seperti ini :
9. Silahkan klik teks SEGERAN PUNYA, maka akan mengarah ke halaman baru atau ke tab baru pada browser
**Penjelasan : Sebelumnya kita sudah belajar pada poin nomor 1 sampai 5 yaitu membuka link pada halaman web, di poin 6 juga masih sama yaitu membuka link pada halaman web, tapi ada perbedaannya, perbedaannya yaitu jika pada nomor 1-5 itu hanya membuka link pada satu halaman saja, tapi pada nomor 6 jika teks yang berisi link tersebut diklik, maka akan menuju kehalaman atau ke tab berikutnya pada browser.
**Kita fokus ke <a href="https://segeranat.blogspot.com" target="_blank"> SEGERAN PUNYA </a>, coba perhatikan didalam tag <a> terdapat 2 (dua) attribute yaitu href dan target. Untuk penjelasan href sama seperti pada nomor 5, attribute target yang mempunyai nilai "_blank" yaitu berfungsi untuk membuka link pada tab yang berbeda
Cukup sampai disini terlebih dahulu
Rangkuman :
Tag Hyperlink <a></a> yaitu tag yang digunakan untuk membuat sebuah teks yang nantinya jika diklik akan menuju link tersebut. didalam tag <a> terdapat attribute href yang berfungsi untuk menginput link tersebut, pada contoh diatas menggunakan webnya Google dan Segeran Punya,tadak hanya untuk webnya Googel atau Segeran Punya saja, href juga bisa atau berlaku untuk semua link, bisa seperti facebook, twitter, dan lain sebagainya. Dan tambahan untuk attribute. Untuk link yang secara otomatis pindah tab bisa ditambahkan attribute terget= dengan nilai "_blank".
Oke sekian pembelajaran di Part-4 ini tentang Hyperlink pada HTML. Semoga bermanfaat, dan tambahkan terus ilmunya di part-part selanjutnya.
Do'a sesudah belajar
Tidak ada komentar:
Posting Komentar