• Sel. Sep 27th, 2022

    Sih4nk

    Dari Kita Untuk Kita

    #8 Belajar HTML Hyperlink

    Byh4nk

    Sep 7, 2022 , ,
    Belajar HTML hyperlink

    Belajar HTML Hyperlink yang sering di kenal dengan link yaitu menghubungkan antara satu dokument dengan dokumen yang lain pada HTML. Tujuan dari hyperlink ini membuat sebuah teks atau gambar yang ketika diklik akan di alihkan ke halaman tertentu yang sudah di tetapkan dalam penulisan hyerlink tersebut.

    Link atau Hyperlink adalah elemen HTML yang berfungsi menghubungkan suatu halaman web ke halaman web yang lain. Elemen ini bisa diklik dan nanti akan membuka halaman lain sesui alamat URL yang diberikan.

    Belajar HTML Hyperlink

    hyperlink sendiri ditulis dengan <a> atau yang kita kenal dengan anchor (jangkar). <a> ini selalu diikiti oleh atribut href, dimana didalam href (hypertext reference) ini lah yang akan diisikan alamat yang dituju ketika text atau gambar diklik.  berikut penulisan hyperlink menggunakan <a href=”#”> :

    ketika diklik pada kata klik disini maka akan di alihkan ke halaman https://sih4nk.com

    Jenis Hyperlink Pada HTML

    dalam penulisan alamat Membuat Hyperlink Pada HTML memiliki dua jenis yaitu alamat absolte dan alamat alternatif.

    1. alamat absolute yaitu penulisan alamat file yang disertai dengan alamat website. contohnya

    dari contoh diatas merupakan hyperlink menggunakan alamat absolute. dimana saya akan menakses file html yang berada di https://sih4nk.com/tag/html

    Belajar HTML Hyperlink

    2. alamat alternatif merupakan penulisan alamat file yang akan di panggil berada dalam aplikasi yang sama, jadi sebelum memanggil file yang diperlikan tidak udah menggunakan nama dari websitenya. contohnya saya akan memanggil file hyperlink-1.html yang berada dalam projek saya (satu folder dengan halaman yang sekarang saya buat)

    Hasilnya

    Belajar HTML Hyperlink

    perlu di perhatikan Membuat Hyperlink Pada HTML dalam penulisan alamat alternatif, sebelum kita memanggil filenya ada kalanya file tersebut tidak berada dalam satu forlder maka folder tempat keberadaan file perlu di panggil.

    Selain atribut href terdapat juga beberapa atribut yang sering ditambahkan pada link, seperti: targettitlerelstyle, dan lain-lain.

    Menggunakan Atribut target

    Atribut ini berfungsi untuk menentukan target dari pembukaan link. Ada beberapa target yang biasanya digunakan:

    • _blank akan membuka link pada jendela atau tab baru;
    • _self akan membuka link pada halaman itu sendiri (default target);
    • _top menuju bagian paling atas pada halaman;
    • _parent membuka link pada frame induk;
    • nama-frame akan membuka link pada <iframe> dengan nama tertentu;

    Contohnya :

    saat klik facebook akan di arahkan ke https://web.facebook.com/H4nks/

    Saat link tersebut diklik, browser akan membuka tab baru. Ini karena kita memberikan atribut target dengan nilai _blank.

    Berikutnya, kita akan mencoba menampilkan link ke dalam sebuah frame.

    Buatlah file baru bernama hyperlink-3.html, kemudian isi kodenya seperti ini:

    hasilnya

    Belajar HTML Hyperlink

    Menggunakan Atribut title

    Atribut ini berfungsi untuk membuat tooltips. Tooltips adalah informasi tambahan yang akan tampil saat link disentuh pointer atau saat kita menahan tap di hp.

    Contohnya:

    hasilnya:

    Belajar HTML Hyperlink

    pada gambar diatas yang di lingkari garis merah adalah tooltips yang di sisipi di link.

    Warna default link adalah biru, ini bisa kita ubah dengan style CSS. Warna bisa kita berikan untuk teks dan latar belakang (background).

    Caranya:

    Tambahkan atribut style kemudian isi dengan style css untuk mengubah warna, yakni color (untuk teks) dan background-color (untuk latar).

    Contoh

    hasilnya

    Belajar HTML Hyperlink

    Link buntu adalah link yang tidak akan membuka apa-pun. Ia biasanya digunakan sebagai placeholder atau sampel saja.

    Cara membuatnya:

    Tambahkan tanda pagar atau tanda pagar dan tanda seru pada atribut href.

    Contoh:

    hasilnya

    Belajar HTML Hyperlink

    Pada contoh tersebut kita mengisi URL-nya dengan tanda pagar. Arti tanda pagar pada URL sebenarnya adalah anchor (jangkar).

    Jangkar ini nantinya akan membawa kita ke lokasi tertentu di dalam dokumen HTML. Jika hanya diisi pagar saja, maka ia tidak akan kemana-mana.

    Link anchor adalah link yang menuju ke suatu elemen tertentu. Cara kerjanya seperti saat kita mengaitkan jangkar, lalu ditarik ke sana. Karena itu, dia dinama anchor.

    Belajar HTML Hyperlink

    Cara membuat link anchor adalah dengan mengisi alamat URL dengan tanda pagar (#), lalu diisi dengan nama id dari elemen yang akan dituju.

    Contoh:

    Hasilnya:

    Belajar HTML Hyperlink

    Kalau kita perhatikan, di sana kita menggunakan #top sebagai URL

    Sedangkan elemen yang memiliki id="top", tidak ada di dalam HTML yang kita tulis.

    Mengapa link anchor ini bisa menuju ke atas?

    Ini karena browser sudah paham, jika ada link anchor yang menuju ke #top maka ia akan dibawa ke bagian teratas dari dokumen.

    Materi HTML Dasar Lainnya :

    #1 Belajar HTML : Pengertian HTML
    #2 Belajar HTML : Text Editor
    #3 Belajar HTML Mengenal Tag, Element, Atribut HTML
    #4 Belajar HTML Heading
    #5 Belajar HTML Format Text
    #6 Belajar HTML Paragraf
    #7 Belajar HTML Tabel
    #8 Belajar HTML Hyperlink
    #9 Belajar HTML List
    #10 Belajar HTML Form
    #11 Belajar HTML Atribut Form
    #12 Belajar HTML Symbol
    #13 Belajar HTML Gambar
    #14 Belajar HTML Tag Iframe
    3 thoughts on “#8 Belajar HTML Hyperlink”

    Tinggalkan Balasan

    Alamat email Anda tidak akan dipublikasikan.