Media Belajar Bahasa Pemrograman | by APPKEY

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

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

-

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 21 : Pelajari Cara Membuat Komentar pada Bahasa HTML

<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 Dart 1 : Pengenalan Bahasa Pemrogaman Dart untuk Pemula

Halo pembaca setia Codekey! Belajar pemrograman saat ini menjadi keharusan bagi semua orang yang ingin berkarir sebagai programmer, hal...

Tutorial Swift 2 : Tahap Awal Persiapan dan Mengatur Lingkungan Kerja pada Swift

Setelah Anda mengenal bahasa pemrograman Swift 4, langkah selanjutnya adalah Anda perlu memulai pemrograman Swift 4 dengan cara install...

Tutorial Javascript 6 : Cara Membuat Event pada Javascript

Event JavaScript adalah tindakan atau proses khusus yang terjadi dalam program atau situs web yang akan Anda kembangkan. Anda...

Tutorial Javascript 8 : Panduan Lengkap Cara Membuat Array di Javascript

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

Tutorial Dart 3 : Belajar Menggunakan Syntax atau Perintah dasar Dart

Setelah mengatur lingkungan kerja serta instalasi Dart ke dalam sistem operasi yang kalian miliki, dalam pembuatan suatu program baik...

Tutorial Javascript 1 : Pengenalan Javascript untuk Pemula

Ada banyak sekali jenis bahasa pemrograman yang bisa Anda pelajari untuk menjadi seorang programmer profesional. Salah satunya adalah belajar...

Tutorial PHP 8 : Memahami Array Multidimensi di PHP | Kapan dan Bagaimana Menggunakannya?

Pada artikel sebelumnya kami telah membahas tentang array PHP serta membahas sedikit tentang array multidimensi PHP. Pada artikel kali...

Tutorial Javascript 2 : Tahap Awal Cara Mudah Menulis Kode di Javascript

Kembali lagi di seri belajar Javascript bersama Codekey! Setelah di postingan sebelumnya Anda belajar Javascript terkait konsep-konsep dasarnya, kini...

Tutorial Python 7 : Tutorial Dasar Cara Mengoperasikan String pada Python

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

Tutorial PHP 9 : Belajar Menggunakan Sort Array Berdasarkan Key dan Value

Array PHP sangat berguna untuk para developer untuk menyimpan data pada variabel. Anda dapat mengelompokkannya dengan membuat kategori tertentu...

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