Media Belajar Bahasa Pemrograman | by APPKEY

HTML/CSSTutorial HTML/CSS 6 : Link HTML, Cara Menggunakan Tag...

Tutorial HTML/CSS 6 : Link HTML, Cara Menggunakan Tag Link di HTML

-

Last Updated on December 11, 2021 by

Halo pembaca setia Codekey! Selamat datang di tutorial keenam bahasa pemrograman HTML yang akan membahas tag link HTML. Namun sebelumnya kami ingatkan untuk membaca tutorial bahasa pemrograman HTML yang sebelumnya agar Anda dapat mengikuti tutorial ini dengan mudah.

Link merupakan tujuan dari kata Hypertext pada bahasa pemrograman HTML. Nah, kali ini kami akan membahas tutorial tentang cara mudah membuat link di HTML. Jadi, yuk simak penjelasan lengkapnya hingga akhir!

Pengertian Link HTML

HTML1

Link HTML adalah sebuah elemen yang dapat diklik dan akan membawa pengguna ke halaman lain. Link HTML atau biasa disebut juga dengan hyperlink, memungkinkan Anda untuk berinteraksi dengan situs web dengan mudah.

Untuk memasukkan link ke dalam halaman web Anda, Anda harus menggunakan sepasang tag <a>. Berikut contoh sintaksnya:

<a href="https://www.codekey.id">Belajar coding bersama Codekey.</a>

Catatan untuk Anda ingat ialah link HTML tidak boleh menjadi elemen kosong, sebab link harus memiliki konten yang dapat Anda klik. Selain itu, sangat penting untuk menyertakan href atribut dalam <a> tag – jika tidak, tautan HTML Anda tidak akan mengarah ke halaman mana pun.

Seperti semua atribut , hal ini ditentukan dalam pasangan name-value yang ditentukan dalam huruf kecil. Pada contoh sintaks di bawah ini, Anda melihat tautan HTML sederhana yang akan mengarahkan Anda ke dalam situs web Codekey:

<a href="https://www.codekey.id">Belajar coding bersama Codekey.</a>

Link HTML Mutlak, Relatif, dan Root-Relatif

Sebuah link atau URL yang mutlak akan mendefinisikan path lengkap ke alamat web yang terhubung. Ini alamat URL lengkap yang mencakup http: // www … atau https: // www … . Dalam kebanyakan kasus yang terjadi, tipe link mutlak digunakan untuk mereferensikan sumber daya eksternal.

Sementara itu, sebuah relatif URL menggambarkan lokasi web halaman yang terhubung dalam kaitannya dengan halaman saat ini. URL relatif pada umumnya digunakan untuk mengarahkan pengguna ke lokasi berbeda dalam situs web yang sedang dibuka saat ini. Contoh sintaksnya dapat Anda lihat pada sintaks di bawah ini:

<a href="tentang-kami">Tentang kami</a>

Apabila Anda ingin mereferensikan file dalam folder yang ditemukan satu tingkat di atas folder yang saat ini Anda buka, Anda perlu menambahkan dua titik dan garis miring. Lebih jelasnya dapat Anda lihat seperti contoh sintaks di bawah ini:

<a href="../tentang-kami" target="_blank">Tentang kami</a>

Selanjutnya ialah, link HTML root relatif,  URL ini biasanya digunakan sebagai referensi sebuah alamat relatif terhadap root domain situs web yang dibuka saat ini. Root Relatif selalu dimulai dengan garis miring yang menentukan root, contohnya dapat Anda lihat pada sintaks berikut:

<a href="/profil/tentang-kami" target="_blank">Tentang kami</a>

Untuk dapat lebih memahami tipe-tipe link HTML ini, kami akan membawa Anda melihat perbandingan sederhana untuk mendapatkan perbedaan antara tautan HTML absolut, relatif, dan root-relative dengan lebih baik.

Bayangkan Anda ingin menambahkan link ke halaman https://codekey.id/profil/ pada halaman web https://www.codekey.id/. Beginilah cara Anda mendefinisikan tautan di setiap jenis link HTML:

Tipe Tautan
Mutlak https://codekey.id/profil/
Relatif profil
Root Relatif / profil

 

Menggunakan Gambar Sebagai Tautan HTML

Selain dengan menggunakan URL, Anda juga dapat menggunakan gambar untuk berpindah halaman web. Gambar ini akan berfungsi sebagai link HTML dengan fungsi seperti tautan URL.

Tekniknya sama dengan kata-kata: elemen yang dapat diklik harus ditempatkan di dalam tag jangkar. Dalam kasus ini, Anda harus menumpuk tag <img> di dalam tag tautan. Contohnya dapat Anda lihat pada sintaks di bawah ini:

Artikel Terkait  Tutorial HTML/CSS 18 : Cara Menggunakan CSS Color Picker dengan Mudah
<a href="https://www.codekey.id/category/html-css">
  <img src="image.png" alt="html-css" style="width: 150px; height: 150px;">
</a>

Cara Mengatur Warna Tautan HTML

Sebenarnya secara default, semua browser menggarisbawahi link HTML dan memberinya warna sebagai berikut:

-Biru untuk link HTML yang belum dikunjungi.

-Ungun untuk link HTML yang telah dikunjungi.

-Merah digunakan untuk link HTML yang sedang aktif.

Untuk mengubah warna default tersebut, Anda dapat melakukannya dengan menggunakan gaya khas HTML/CSS. Contoh cara mengubahnya ialah sebagai berikut:

<style>
a:link {
    color: red; 
    background-color: white;
}
a:visited {
    color: black; 
    background-color: white;
}
a:active {
    color: green; 
    background-color:white;
}
a:hover {
    color: gray; 
    background-color: white;
}
</style>

Selain itu, dengan HTML Anda juga dapat mensetting warna yang berbeda ketika pengguna mengarahkan kursor mereka pada tautan.

HTML Bookmark Links

Anda dapat menandai link HTML Anda untuk melompat ke bagian tertentu dalam halaman web yang sama ataupun halaman web yang berbeda. Bookmark akan sangat membantu jika konten yangAnda buat sangat panjang.

Untuk membuat link bookmark HTML di halaman web yang sama, Anda harus membuat bookmark menggunakan atribut id. Gunakan atribut ini untuk menandai bagian halaman yang Anda inginkan untuk dibuka oleh pengguna. Contohnya dapat Anda lihat pada sintaks di bawah ini:

<h2 id="category">HTML/CSS</h2>

Langkah berikutnya yang harus Anda lakukan ialah membuat hyperlink ke sana dengan menambahkan simbol hash (#) diikuti dengan id nilai target yang akan di-bookmark seperti contoh berikut:

<a href="#category">HTML/CSS</a>

Bagaimana jika Anda ingin menyertakan link ke bookmark pada halaman lain? Untuk menyertakan link ke bookmark dari halaman lain, sertakan URL target sebelum simbol hash (dengan asumsi ada id dengan nilai itu di halaman lain). Caranya dapat Anda lihat pada contoh di bawah ini:

<a href="https://www.codekey.id/html-css/pengenalan-html/#pengenalan_html">Pengenalan HTML: Memahami HTML dan Berbagai Versinya</a>

Atribut pada Link HTML yang Paling Banyak Dipakai

1. href

Atribut  href berfungsi untuk mendefinisikan alamat URL target untuk link HTML, membuat kata ditandai atau frase yang dapat diklik. Saat href membuat hyperlink ke halaman web lain, link HTML tidak akan berfungsi sebagaimana mestinya tanpa href. Contohnya sebagai berikut:

<a href="https://www.codekey.id">Belajar coding bersama Codekey</a>

2. Style

Atribut style berfungsi untuk menetapkan gaya atau style dari setiap property yang ada (misalnya, warna) untuk sebuah elemen yang ada. Contohnya dapat Anda lihat pada sintaks di bawah ini:

<a href="https://www.codekey.id/" style="background-color: gray;">Belajar coding bersama Codekey</a>

3. Target

Atribut target berfungsi untuk mendefinisikan mana link HTML yang akan dibuka. Berikut ini list semua opsi yang memungkinkan untuk Anda gunakan:

_blank, berfungsi untuk mengarahkan pengguna ke jendela atau tab baru

_self, berfungsi untuk memuat URL pada jendela yang sama atau tab tempat link diklik.

_parent, befungsi Memuat URL di bingkai induk. Ini hanya digunakan dengan bingkai.

_top, berfungsi memuat dokumen terkait di seluruh badan jendela.

Frame name, berfungsi memuat dokumen terkait dalam bingkai bernama. Namun saat ini frame name sudah tidak digunakan lagi

Contoh dari penggunaan berbagai atribut target di atas ialah sebagai berikut:

<a href="https://www.codekey.id" target="_blank">Menampilkan tab baru</a>
<a href="https://www.codekey.id" target="_self">Memuat pada tab yang sama</a>
<a href="https://www.codekey.id" target="_parent">Memuat pada induk</a>
<a href="https://www.codekey.id" target="_top">Memuat dalam body</a>

4. Title

Atribut title berfungsi untuk menguraikan informasi tambahan terkait tujuan sebuah link. Jika pengguna mengarahkan mouse ke link HTML, tooltip akan segera muncul untuk menjelaskan tujuan, judul, atau informasi lain dari link HTML. Contoh sintaksnya ialah sebagai berikut:

<a href="https://www.codekey.id/" title="Codekey">Belajar coding bersama Codekey</a>

Tips yang Harus Diingat

  • Jika Anda menggunakan gambarsebagai link, sebaiknya sertakan atribut alt yang berfungsi untuk menyediakan teks alternatif yang akan ditampilkan jika gambar tidak dimuat.
  • Atribut href juga dapat digunakan dengan properti mailto dan alamat email sebagai nilainya. Setelah mengklik link HTML, pengguna akan diarahkan ke aplikasi email default mereka dengan alamat email yang sudah disertakan sebelumnya. Contohnya ialah sebagai berikut:
<a href="mailto:info@codekey.id">Email Codekey</a>

Nah itulah penjelasan lengkap dan menarik tentang link pada bahasa pemrograman HTML khusus untuk Anda. Apakah Anda telah memahami keseluruhan link dan atribut yang terdapat pada bahasa pemrograman HTML?

Jangan lupa untuk selalu berlatih agar Anda dapat memahaminya dengan baik. Sebab cara terbaik untuk memahami sesuatu adalah dengan mempraktikkannya sesering mungkin.

Sekian pembahasan tentang cara membuat link HTML kali ini, sampai berjumpa di artikel menarik lainnya. Terima kasih telah mengikuti hingga akhir, selamat berlatih dan semoga bermanfaat!


Jasa Pembuatan Aplikasi, Website dan Internet Marketing | PT APPKEY
PT APPKEY adalah perusahaan IT yang khusus membuat aplikasi Android, iOS dan mengembangkan sistem website. Kami juga memiliki pengetahuan dan wawasan dalam menjalankan pemasaran online sehingga diharapkan dapat membantu menyelesaikan permasalahan Anda.

Jasa Pembuatan Aplikasi

Jasa Pembuatan Website

Jasa Pembuatan Paket Aplikasi

Jasa Pembuatan Internet Marketing

Tutorial

Subscribe Sekarang

Dapatkan beragam informasi menarik tentang bahasa pemrograman langsung melalui email Anda. Subscribe sekarang dan terus belajar bersama kami!

Blog Post Ranking 10

Tutorial PHP 22 : Cara Membuat Redirect PHP dengan Cepat dan Mudah

Jika Anda melakukan browsing di browser kesayangan Anda, mungkin Anda pernah melihat link yang berisikan “php redirect” atau yang...

Tutorial PHP 23 : Cara Membuat Messages Alert PHP

Alert box atau alert messages digunakan di situs web untuk menampilkan pesan peringatan kepada pengguna bahwa mereka telah memasukkan...

Tutorial PHP 2 : Cara Install PHP, Langkah Awal Belajar PHP

PHP adalah bahasa pemrograman gratis dan open source. Secara teknis tidak perlu menginstal PHP: sebagian besar host web dan...

Tutorial Python 9 : Cara Membuat Looping Python

Pada artikel sebelumnya, Codekey telah menjelaskan tentang Operasi Kondisional Python yang di dalamnya menyinggung tentang percabangan dan perulangan. Belajar...

Tutorial HTML/CSS 23 : Cara Membuat Form Sederhana dengan HTML

Form memiliki peran yang sangat krusial bagi website atau aplikasi untuk menjaga sistem keamanannya. Form HTML digunakan untuk mengumpulkan...

Tutorial SQL 8 : Constraint SQL, Bagaimana Fungsi dan Penggunaannya?

Pada artikel sebelumnya Anda telah mempelajari tentang wildcard SQL, pada artikel kali ini kami akan menjelaskan tentang constraint SQL. Jika...

Tutorial Javascript 8 : Array Javascript, Panduan Lengkap Cara Membuatnya

Seperti bahasa pemrograman yang berorientasi objek lainnya, dalam JavaScript juga terdapat array. Jika Anda memiliki banyak objek yang ingin...

Tutorial SQL 20 : Mari Pelajari Cara Menggunakan Fungsi GROUP by SQL

Pada pembahasan seri Tutorial SQL ke- 20 ini, Codekey akan membahas tentang GROUP BY yang merupakan statement di dalam...

Tutorial Python 7 : Python String Format dan Cara Mudahnya

Anda ingin belajar Python dan ingin menjadi ahli dalam bahasa pemrograman Python? Mari belajar bersama Codekey! Pada pembahasan kali...

Tutorial Python 8 : Langkah Mudah Membuat Operasi Kondisional pada Python

Pada pembahasan sebelumnya, Codekey telah menjelaskan kepada Anda tentang pengoperasian string pada Python mulai dari menggabungkan hingga memanipulasi string...

Bisnis

Online Service

Peluang Bisnis

Model Bisnis

Entrepreneurship

Uang

Ketrampilan

Outsourcing

Monetize

Pemasaran

SEO

Internet Marketing

Dasar Pemasaran

Strategi Pemasaran

Situs Web Analitik

Iklan

Teknologi

Teknologi Terbaru

AI

Komputer

Jaringan

Paling Sering dibaca
Mungkin Anda Menyukainya