HTML Programming 4 - Hyperlink di HTML
Assalamu'alaikum
Selamat malam, melanjutkan kembali pembahasan html kali ini saya ingin mengupas mengenai hyperlink pada html. Seperti yang sudah saya jelaskan sebelumya, salah satu fitur yang disediakan html adalah bisa menghubungkan antar dokumen yang diletakan di website atau disebut juga sebagai hyperlink. Jadi pada dasarnya hyperlink ini digunakan untuk memberikan tag pada sebuah tulisan agar bisa diarahkan ke laman lain misalnya.
Relatif Vs Absolut Hyperlink
Jenis hyperlink pada html terdapat 2 jenis yaitu relatif hyperlink (mengarahkan hyperlink ke internal file manager) dan absolut hyperlink (mengarahkan ke website atau domain web yang berbeda misalnya). Dan untuk relatif hyperlink dokumen antar html harus jelas peletakan file dan foldernya. Disarankan antar dokumen html berada pada direktori yang sama.
Tag hyperlink umumnya berbentuk <a>...</a> dimana mengenai a ini disebuat sebagai anchor. Dimana terdapat elemen atau parameter yang wajib memiliki valuenya yaitu elemen href yang fungsinya untuk mengarahkan letak file html yang ingin di hyperlink kan.
Tag hyperlink umumnya berbentuk <a>...</a> dimana mengenai a ini disebuat sebagai anchor. Dimana terdapat elemen atau parameter yang wajib memiliki valuenya yaitu elemen href yang fungsinya untuk mengarahkan letak file html yang ingin di hyperlink kan.
Protocol atau url yang di support oleh hyperlink html antara lain : http, ftp, file (lokal), news dan mail. Selain elemen href, terdapat attribut lainnya untuk mengganti warna hyperlink. Secara default warna text hyperlink adalah berwarna biru, tentu kita bisa mengkustomisasi warna hyperlink dengan menggunakan parameter berikut :
- link : untuk menentukan warna hyperlink
- alink : untuk menentukan warna hyperlink ketika di klik
- vlink : untuk menentukan warna hyperlink setelah pernah di klik
value setiap parameter di atas bisa menggunakan nama warna atau kode warna. Langsung saja berikut contoh dan perbedaan relatif dan absolut hyperlink dengan menggunakan ketiga parameter yang disebutkan.
| <html> <head> <title>Latihan Hyperlink | Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 </title> </head> <body link="yellow" alink="blue" vlink="red"> <h1> Relatif Hyperlink </h1> <p> ini <a href="./latihan1/latihan1.1.html"> latihan1.1 </a> </p> <p> ini <a href="./latihan1/latihan1.2.html"> latihan1.2 </a> </p> <p> ini <a href="./latihan1/latihan1.3.html"> latihan1.3 </a> </p> <p> ini <a href="./latihan1/latihan1.4.html"> latihan1.4 </a> </p> <p> ini <a href="./latihan1/latihan1.5.html"> latihan1.5 </a> </p> <br> <h1> Absolut Hyperlink </h1> <p> ini <a href="https://www.google.com"> google </a> </p> <p> ini <a href="https://www.mercubuana.ac.id"> mercubuana </a> </p> <br> <p> <a href="latihan3.3.html" target="_blank"> Go to latihan3.3 </a> </p> <br> <p align=center> © Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 </p> </body> </html> |
Hyperlink Lompat Paragraf
Masuk ke pembahasan mengenai hyperlink lompat paragraf. Biasanya penggunaannya digunakan ketika pada suatu laman memiliki kepadatan informasi tanpa adanya pemisahan di laman yang berbeda. Untuk tagnya pun masih sama yaitu menggunakan tag <a> hanya saja href yang ditembak menggunakan hastag (#) dimana hastag ini diarahkan terhadapt tulisan yang di tandai terlebih dahulu. Berikut contohnya.
| <html> <head> <title>Latihan Hyperlink Lompat Paragraf | Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 </title> </head> <body> <a href="#paragraf_satu"> Lompat ke Paragraf satu </a><br> <a href="#paragraf_dua"> Lompat ke Paragraf dua </a><br> <br> <br> <h2><a name="paragraf_satu">Paragraf Satu</a></h2> <p> Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 </p> <br> <br> <h2><a name="paragraf_dua">Paragraf Dua</a></h2> <p> Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 </p> <br> <br> <a href="#paragraf_satu"> Kembali ke atas </a><br> <p align=center> © Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 </p> </body> </html> |
Kira-kira hasilnya akan seperti contoh berikut.
Hyperlink ke Page Lain
Pada dasarnya hyperlink ke page lain ini sama seperti relatif hyperlink yang mengarahkan ke page internal yang berbeda. Artinya masih berada di dalam website dan file manager yang sama. Berikut contoh htmlnya.| <html> <head> <title>Hyperlink Ke Page Lain | Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 </title> </head> <body> <p> <a href="latihan3.1.html" target="_blank"> Go to latihan3.1 </a> </p> <br> <p align=center> © Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 </p> </body> </html> |
Kira-kira hasilnya akan seperti contoh berikut.
Demikianlah penjelasan pembahasan hyperlink pada html. Semoga bermanfaat untuk pembaca. Jika masih ada yang kurang jelas bisa langsung tanyakan di kolom komentar. Terima kasih sudah berkunjung, sampai bertemu di pembahasan berikutnya. Salam programming!!.
Unknown