Sebuah situs web umumnya merupakan kumpulan dokumen HTML. Setiap halaman/dokumen saling terkait satu sama lain
Contoh paling mendasar adalah. Sebuah halaman web biasanya memiliki minimal 3 halaman
- Beranda di url /index.html
- Tentang kami halaman di url /tentang-kami.html
- dan halaman Kontak di url <a href="//facebook.com" style="background-color: #3b5998; color: white; padding: .5rem 1.25rem; border-radius: .3rem; text-decoration: none"> Facebook </a> 0
Sebagai pengguna, kita dapat mengunjungi halaman tersebut secara langsung dengan menuliskan alamatnya di browser. Namun cara ini tentu tidak efisien, selain kita harus membuang waktu mengetik url, kita juga harus menghafal url tersebut.
Oleh karena itu HTML memberi kita fitur yang disebut hyperlink atau tag jangkar
Apa itu Hyperlink atau Tag Jangkar?
Hyperlink adalah teks atau tombol dalam dokumen HTML yang jika kita klik akan membawa kita ke halaman lain
Jadi jika kita klik menu Home maka browser akan membawa kita ke halaman home. Jika kita mengklik menu About maka browser akan membawa kita ke halaman about dan seterusnya, kemudian menu-menu tersebut dikatakan sebagai hyperlink atau singkatnya sering juga disebut sebagai link
Dalam HTML, link didefinisikan dengan tag <a href="//facebook.com" style="background-color: #3b5998; color: white; padding: .5rem 1.25rem; border-radius: .3rem; text-decoration: none"> Facebook </a> 1 yang merupakan singkatan dari anchor yang artinya jangkar
Atribut href
Tag <a href="//facebook.com" style="background-color: #3b5998; color: white; padding: .5rem 1.25rem; border-radius: .3rem; text-decoration: none"> Facebook </a> 1 minimal harus memiliki satu atribut yaitu atribut <a href="//facebook.com" style="background-color: #3b5998; color: white; padding: .5rem 1.25rem; border-radius: .3rem; text-decoration: none"> Facebook </a> 3, dimana pada atribut tersebut kita akan mendefinisikan URL dari link yang kita buat
Perhatikan contoh berikut
<p>Kita bisa mengunjungi sosial media melalui link berikut:</p> <p> <a href="//facebook.com">Facebook</a> <br> <a href="//instagram.com">Instagram</a> <br> <a href="//twitter.com">Twitter</a> </p> _
Hasil keluaran
Jika kita mengklik tautan di atas, browser akan mengarahkan kita ke URL yang terdapat di atribut <a href="//facebook.com" style="background-color: #3b5998; color: white; padding: .5rem 1.25rem; border-radius: .3rem; text-decoration: none"> Facebook </a> 3
Tautan Tampilan
Secara default, link pada masing-masing browser akan ditampilkan dengan ketentuan sebagai berikut
- Link yang belum dikunjungi akan ditampilkan dengan warna biru dan diberi garis bawah
- Link yang sudah dikunjungi akan ditampilkan dengan warna ungu dan diberi garis bawah
- Dan link yang aktif akan berwarna merah dan memiliki garis bawah
Untuk mencoba link yang aktif, kita bisa mengklik link tersebut dan menahannya, kemudian link yang kita pegang akan berubah warna menjadi merah
Tentu saja kita bisa mengatur tampilan sebuah link dengan CSS
Perhatikan contoh berikut
<a href="//facebook.com" style="background-color: #3b5998; color: white; padding: .5rem 1.25rem; border-radius: .3rem; text-decoration: none"> Facebook </a>
Hasil keluaran
Lebih mirip tombol kan?
Atribut target
Selanjutnya tag <a href="//facebook.com" style="background-color: #3b5998; color: white; padding: .5rem 1.25rem; border-radius: .3rem; text-decoration: none"> Facebook </a> 1 memiliki atribut <a href="//facebook.com" style="background-color: #3b5998; color: white; padding: .5rem 1.25rem; border-radius: .3rem; text-decoration: none"> Facebook </a> 6 yang dapat kita isi dengan beberapa nilai
- <a href="//facebook.com" style="background-color: #3b5998; color: white; padding: .5rem 1.25rem; border-radius: .3rem; text-decoration: none"> Facebook </a> 7 - ini adalah default. Tautan akan terbuka di halaman aktif
- <a href="//facebook.com" style="background-color: #3b5998; color: white; padding: .5rem 1.25rem; border-radius: .3rem; text-decoration: none"> Facebook </a> 8 - tautan akan terbuka di tab baru
- <a href="//facebook.com" style="background-color: #3b5998; color: white; padding: .5rem 1.25rem; border-radius: .3rem; text-decoration: none"> Facebook </a> 9 - tautan akan dibuka pada bingkai induk (jika dokumen dimuat di <h1>Contoh link berdasarkan targetnya:</h1> <p> <a href="//jagongoding.com/web/html/dasar/overview"> Tutorial HTML Dasar (self) </a> </p> <p> <a href="//jagongoding.com/web/php/dasar/overview" target="_blank"> Tutorial PHP Dasar (blank) </a> </p> <p> <a href="//jagongoding.com/python/dasar/overview" target="_parent"> Tutorial Python Dasar (parent) </a> </p> <p> <a href="//jagongoding.com/python/menengah/overview" target="_top"> Tutorial Python Menengah (top) </a> </p> 0)
- <h1>Contoh link berdasarkan targetnya:</h1> <p> <a href="//jagongoding.com/web/html/dasar/overview"> Tutorial HTML Dasar (self) </a> </p> <p> <a href="//jagongoding.com/web/php/dasar/overview" target="_blank"> Tutorial PHP Dasar (blank) </a> </p> <p> <a href="//jagongoding.com/python/dasar/overview" target="_parent"> Tutorial Python Dasar (parent) </a> </p> <p> <a href="//jagongoding.com/python/menengah/overview" target="_top"> Tutorial Python Menengah (top) </a> </p> 1 - tautan akan terbuka di bingkai atas (jika dokumen dimuat di <h1>Contoh link berdasarkan targetnya:</h1> <p> <a href="//jagongoding.com/web/html/dasar/overview"> Tutorial HTML Dasar (self) </a> </p> <p> <a href="//jagongoding.com/web/php/dasar/overview" target="_blank"> Tutorial PHP Dasar (blank) </a> </p> <p> <a href="//jagongoding.com/python/dasar/overview" target="_parent"> Tutorial Python Dasar (parent) </a> </p> <p> <a href="//jagongoding.com/python/menengah/overview" target="_top"> Tutorial Python Menengah (top) </a> </p> 0)
Perhatikan contoh berikut
<h1>Contoh link berdasarkan targetnya:</h1> <p> <a href="//jagongoding.com/web/html/dasar/overview"> Tutorial HTML Dasar (self) </a> </p> <p> <a href="//jagongoding.com/web/php/dasar/overview" target="_blank"> Tutorial PHP Dasar (blank) </a> </p> <p> <a href="//jagongoding.com/python/dasar/overview" target="_parent"> Tutorial Python Dasar (parent) </a> </p> <p> <a href="//jagongoding.com/python/menengah/overview" target="_top"> Tutorial Python Menengah (top) </a> </p>
Hasil keluaran
Pada contoh di atas, nilai <a href="//facebook.com" style="background-color: #3b5998; color: white; padding: .5rem 1.25rem; border-radius: .3rem; text-decoration: none"> Facebook </a> _7, <h1>Contoh link berdasarkan targetnya:</h1> <p> <a href="//jagongoding.com/web/html/dasar/overview"> Tutorial HTML Dasar (self) </a> </p> <p> <a href="//jagongoding.com/web/php/dasar/overview" target="_blank"> Tutorial PHP Dasar (blank) </a> </p> <p> <a href="//jagongoding.com/python/dasar/overview" target="_parent"> Tutorial Python Dasar (parent) </a> </p> <p> <a href="//jagongoding.com/python/menengah/overview" target="_top"> Tutorial Python Menengah (top) </a> </p> 1 dan <a href="//facebook.com" style="background-color: #3b5998; color: white; padding: .5rem 1.25rem; border-radius: .3rem; text-decoration: none"> Facebook </a> 9 mungkin tidak terlihat. Ketiganya buka link di halaman yang sedang aktif (halaman yang sedang dibuka teman Anda sekarang). Namun, jika kita mengklik link dengan target <a href="//facebook.com" style="background-color: #3b5998; color: white; padding: .5rem 1.25rem; border-radius: .3rem; text-decoration: none"> Facebook </a> 8, browser akan membawa kita ke tab baru
Atribut judul
Selanjutnya kita dapat menambahkan atribut <h1>Contoh link berdasarkan targetnya:</h1> <p> <a href="//jagongoding.com/web/html/dasar/overview"> Tutorial HTML Dasar (self) </a> </p> <p> <a href="//jagongoding.com/web/php/dasar/overview" target="_blank"> Tutorial PHP Dasar (blank) </a> </p> <p> <a href="//jagongoding.com/python/dasar/overview" target="_parent"> Tutorial Python Dasar (parent) </a> </p> <p> <a href="//jagongoding.com/python/menengah/overview" target="_top"> Tutorial Python Menengah (top) </a> </p> _7 ke tag <a href="//facebook.com" style="background-color: #3b5998; color: white; padding: .5rem 1.25rem; border-radius: .3rem; text-decoration: none"> Facebook </a> 1
Fungsi dari atribut <h1>Contoh link berdasarkan targetnya:</h1> <p> <a href="//jagongoding.com/web/html/dasar/overview"> Tutorial HTML Dasar (self) </a> </p> <p> <a href="//jagongoding.com/web/php/dasar/overview" target="_blank"> Tutorial PHP Dasar (blank) </a> </p> <p> <a href="//jagongoding.com/python/dasar/overview" target="_parent"> Tutorial Python Dasar (parent) </a> </p> <p> <a href="//jagongoding.com/python/menengah/overview" target="_top"> Tutorial Python Menengah (top) </a> </p> _7 adalah untuk menampilkan tooltip ketika pengguna mengarahkan kursor ke sebuah link
Perhatikan contoh berikut
<p> Untuk lebih lengkapnya silakan kunjungi halaman <a href="//jagongoding.com/python" title="Tutorial Python">berikut</a> </p>
Hasil keluaran
Teman-teman, Anda dapat menempatkan kursor di atas teks berikut, browser akan menampilkan tooltip dengan teks Tutorial Python
URL Relatif vs URL Absolut
Berikutnya adalah perbedaan antara URL relatif dan URL absolut
URL absolut adalah URL yang ditulis lengkap mulai dari domain dan jalurnya
Ada juga relative URL yaitu URL yang hanya dituliskan path saja tanpa domain. Dan secara otomatis browser akan menganggap domain dari link tersebut sebagai domain situs yang kita buka
Perhatikan contoh berikut
<h4>Contoh URL lengkap</h4> <a href="//jagongoding.com/python/dasar/overview"> Tutorial Python </a> <h4>Contoh URL relatif</h4> <a href="/web/php/dasar/overview"> Tutorial PHP </a>
Hasil keluaran
Buat tautan dalam bentuk gambar
Selain link berupa teks, kita juga bisa membuat link berupa gambar
Caranya sangat sederhana yaitu kita hanya perlu memasukkan tag <p> Untuk lebih lengkapnya silakan kunjungi halaman <a href="//jagongoding.com/python" title="Tutorial Python">berikut</a> </p> 0 di dalam tag <a href="//facebook.com" style="background-color: #3b5998; color: white; padding: .5rem 1.25rem; border-radius: .3rem; text-decoration: none"> Facebook </a> 1
Perhatikan contoh berikut
<a href="/"> <img src="//jagongoding.com/images/jagongoding-logo-full.png"> </a>
Hasil keluaran
Buat Tautan ke Alamat Email
Selain tautan yang mengarah ke halaman web (dengan protokol <p> Untuk lebih lengkapnya silakan kunjungi halaman <a href="//jagongoding.com/python" title="Tutorial Python">berikut</a> </p> 2 atau <p> Untuk lebih lengkapnya silakan kunjungi halaman <a href="//jagongoding.com/python" title="Tutorial Python">berikut</a> </p> 3), tautan juga dapat mengarah ke email
Kita dapat melakukannya dengan menulis <p> Untuk lebih lengkapnya silakan kunjungi halaman <a href="//jagongoding.com/python" title="Tutorial Python">berikut</a> </p> _4 di atribut <a href="//facebook.com" style="background-color: #3b5998; color: white; padding: .5rem 1.25rem; border-radius: .3rem; text-decoration: none"> Facebook </a> 3
Perhatikan contoh berikut
<p> Silakan hubungi email berikut: </p> <a href="mailto:indonesiagoid@mail.kominfo.go.id"> indonesiagoid@mail.kominfo.go.id </a>
Hasil keluaran
Jika Anda mengklik tautan email di atas, sistem akan mengarahkan Anda ke aplikasi pembuka email (tergantung konfigurasi OS masing-masing pengguna)
Membuat Tautan ke Nomor Telepon
Last but not least, kita juga bisa membuat link yang mengarah ke nomor telepon. Yang mana jika link tersebut kita klik maka browser akan menginstruksikan kita untuk langsung menghubungi (call) nomor tersebut (tentunya ini hanya bisa dilakukan jika dokumen HTML dibuka melalui perangkat mobile)
Untuk membuat link yang mengarah ke nomor telepon, kita dapat menuliskan <p> Untuk lebih lengkapnya silakan kunjungi halaman <a href="//jagongoding.com/python" title="Tutorial Python">berikut</a> </p> 6 pada atribut <a href="//facebook.com" style="background-color: #3b5998; color: white; padding: .5rem 1.25rem; border-radius: .3rem; text-decoration: none"> Facebook </a> 3
Perhatikan contoh berikut
Silakan hubungi ambulan di nomor telpon <a href="tel:118">118</a>
Hasil keluaran
Kode Program Lengkap
Bagi anda yang ingin mendapatkan kode program lengkapnya silahkan kunjungi repositori html-dasar di github
Jangan lupa kasih ⭐⭐
Pertemuan Lanjutan
Insya Allah pada pertemuan berikutnya akan dibahas berbagai cara menampilkan gambar pada dokumen HTML