Dalam tutorial ini kita akan belajar cara membuat link html menggunakan tag a untuk menghubungkan satu halaman ke halaman lainnya
Keterangan
Tag atau jangkar adalah tag yang mendefinisikan hyperlink untuk menunjukkan link ke halaman lain
cara menulis sintaks jangkar
<a> link yang tidak bisa di klik </a> <a><img src="//thohirdev.com/images/logo-tutorial.png"></>
Code language: HTML, XML (xml)walaupun kodenya menggunakan elemen anchor tetapi tidak terlalu berguna karena belum menyertakan petunjuk tambahan, untuk membuat link kita membutuhkan atribut tambahan pada elemen anchor
Baca juga. cara membuat komentar di html
Tag atribut a
1. href
href adalah atribut yang berfungsi untuk menentukan alamat tujuan, url pada atribut href terbagi menjadi 2 url, sebagai berikut
Tautan absolut
contoh url lengkap situs web seperti https. //thohirdev. com menyertakan tautan eksternal karena mengarah ke halaman web lain
<a href="//thohirdev.com"> website </a>
Code language: HTML, XML (xml)_Tautan relatif
url yang mengarah ke dokumen lain di situs web yang sama
Tautan ini merupakan tautan internal karena masih berada di situs web yang sama, misalnya /kontak menunjuk ke halaman kontak
<a href="/contact"> contact </a>
Code language: HTML, XML (xml)jika kita ingin masuk ke halaman depan web, kita dapat menggunakan sintaks berikut
<a href="/"> Beranda </a>
Code language: HTML, XML (xml)Tautan mengarah ke dokumen indeks. html atau index. php jika menggunakan php
buat link untuk menuju ke bagian atas halaman web ketika posisinya berada di bagian bawah halaman web
<a href="#top">ke atas</a>
Code language: HTML, XML (xml)_buat tautan ke posisi tertentu menggunakan atribut id
<a href="#menujukeid">menuju ke atribut id</a>
Code language: HTML, XML (xml)untuk menuju ke posisi tertentu harus menambahkan atribut id, nilai id harus sama dengan nilai atribut href sebagai berikut
<div id="menujukeid"> Jika klik link paling bawah akan menuju kesini </div>
Code language: HTML, XML (xml)_Atribut href juga dapat digunakan untuk memanggil nomor telepon dan bahkan mengirim email
tautan sintaks cara memanggil nomor telepon
<a href="tel:089669566600">telpon thohir</a>
Code language: HTML, XML (xml)jika nilai atribut href adalah tel. ketika Anda mengklik tautan, Anda akan memanggil nomor tersebut
tautan sintaks cara mengirim email
jika nilai atribut href mailto. kemudian akan membuka alamat email ketika diklik
<a href="mailto:mas@thohirdev.com">Kirim email</a>
Code language: HTML, XML (xml)_kita juga dapat menambahkan alamat untuk penerima cc atau bcc menggunakan sintaks berikut
<a href="mailto:mas@thohirdev.com?cc=info@thohirdev.com&bcc=admin@thohirdev.com ">Kirim email</a>
kita juga bisa mengisi subjek dan isi email
<a href="//thohirdev.com"> website </a>
Code language: HTML, XML (xml)_0bahkan tag a dapat membuat tautan untuk memanggil fungsi javascript
<a href="//thohirdev.com"> website </a>
Code language: HTML, XML (xml)1Coba script berikut yang sudah kita pelajari
Coba Skrip
<a href="//thohirdev.com"> website </a>
Code language: HTML, XML (xml)2Warna tautan default adalah biru, cara mengubah warna tautan di html dengan menggunakan gaya CSS
<a href="//thohirdev.com"> website </a>
Code language: HTML, XML (xml)3cara menghilangkan garis bawah pada link html dengan dekorasi teks css. tidak ada;
<a href="//thohirdev.com"> website </a>
Code language: HTML, XML (xml)42. hreflang
hreflang adalah atribut yang berguna untuk memberi tahu mesin pencari dalam menentukan bahasa situs web yang akan ditampilkan. misalnya sebagai berikut
<a href="//thohirdev.com"> website </a>
Code language: HTML, XML (xml)_5Contoh menunjukkan bahwa halaman web https. //thohirdev. com menggunakan bahasa inggris, jika bahasanya bahasa indonesia maka ganti kode bahasanya dengan id
3. rel
rel adalah atribut yang berfungsi untuk menggambarkan hubungan dari dokumen saat ini dengan dokumen target
misalnya, kita dapat menggunakan untuk mengidentifikasi alamat tujuan sebagai sumber tentang penulis dokumen
<a href="//thohirdev.com"> website </a>
Code language: HTML, XML (xml)_6Ada beberapa nilai atribut yang berbeda untuk menggambarkan hubungan antara tautan saat ini dan tujuan tautan
- rel=”jangan ikuti”. gunakan nilai atribut ini jika kita menautkan ke tautan tujuan yang tidak ingin memberikan reputasi ke situs web tertentu
misal kita ingin link ke situs yang mengandung spam, misal link web yang ratenya jelek atau link yang bisa menimbulkan spam seperti link di kolom komentar, kita gunakan nilai ini agar mesin pencari mengabaikan nilai SEO
perbedaan link nofollow dan dofollow, nofollow singkatnya membuat google tidak mengikuti link atau url yang disematkan padahal dofollow justru memberikan sinyal kepada google untuk mengikuti link tersebut. Atribut dofollow tidak perlu ditambahkan karena secara default link sudah menyertakan dofollow - rel=”alternatif”. jika situs kami memiliki lebih dari satu versi, seperti terjemahan ke berbagai bahasa. Gunakan nilai ini untuk mengidentifikasi tautan sebagai versi alternatif dari halaman sat ini
- rel="bookmark". Nilai ini mengidentifikasi url permanen dan dapat digunakan untuk menandai halaman
- rel="bantuan". Identifikasi tautan penghubung sebagai tautan bantuan untuk halaman saat ini
- rel=”lisensi”. Gunakan atribut ini saat menautkan ke lisensi hak cipta
- rel="selanjutnya". Jika dokumen saat ini berada dalam rantai dokumen, gunakan nilai ini saat menautkan ke dokumen berikutnya dalam rantai
- rel="sebelumnya". Jika dokumen saat ini berada dalam rantai dokumen, gunakan nilai ini saat menautkan ke dokumen sebelumnya dalam rantai
- rel=”noreferrer”. Jika Anda ingin menautkan ke situs web eksternal tetapi hindari memberi tahu situs web tujuan siapa perujuknya
4. target
target adalah atribut yang berfungsi untuk menentukan target saat membuka link. tidak ada atribut target
- _diri sendiri. buka tautan di halaman itu sendiri (target default dan biasanya tidak perlu menambahkannya)
<a href="//thohirdev.com"> website </a>
Code language: HTML, XML (xml)_7- _kosong. buka tautan di jendela atau tab baru
<a href="//thohirdev.com"> website </a>
Code language: HTML, XML (xml)_8- _atas. ke bagian atas halaman
<a href="//thohirdev.com"> website </a>
Code language: HTML, XML (xml)_9- _induk. buka tautan di bingkai utama
<a href="/contact"> contact </a>
Code language: HTML, XML (xml)0- framename. membuka tautan dalam bingkai bernama tertentu. (usang di html5 dan tidak disarankan untuk digunakan), nama bingkai target memerlukan nama iframe untuk masuk ke bingkai
<a href="/contact"> contact </a>
Code language: HTML, XML (xml)15. judul
title adalah atribut yang berfungsi sama seperti tooltips, yaitu memberikan informasi tambahan yang akan muncul saat kursor menyentuh link
Coba Skrip
<a href="/contact"> contact </a>
Code language: HTML, XML (xml)2coba scriptnya dengan menekan tombol biru coba scriptnya dan coba pindahkan kursor ke link maka akan muncul keterangan teks di atribut title
6. unduh
unduh adalah atribut yang berfungsi memberi tahu browser bahwa tautannya adalah file