Tutorial HTML / Membuat tautan: jalur berkas, fragmen, dan alamat email

Buat tautan HTML dengan elemen a dan tetapkan tujuannya di href. Tujuan dapat berupa halaman lain, file, lokasi dalam dokumen, atau alamat email. Tulis teks tautan yang menunjukkan kepada pembaca ke mana mereka akan pergi.

Buat tautan dasar dengan a dan href

Bungkus teks tautan yang terlihat dengan a dan tempatkan URL tujuan dalam href. Contoh ini mengarah ke tutorial berbahasa Indonesia dari Coding Factory tentang daftar HTML. Jenis daftar yang ditautkan dan aturan penyarangan dijelaskan dalam Daftar: ul, ol, dl, dan Daftar Bersarang.

<a href="https://www.codingfactory.net/id/18461">Tutorial Daftar HTML</a>

"Tutorial tentang daftar HTML" adalah teks yang terlihat; URL adalah tujuan. a tanpa href bukanlah tautan navigasi biasa. Menggunakan href="#" sebagai placeholder dapat menyebabkan navigasi ke atas halaman secara tak terduga.

Memahami URL absolut dan relatif

Sebuah URL absolut yang dimulai dengan https:// berisi domain tujuan. URL relatif dapat merujuk ke file dari lokasi dokumen saat ini atau dari direktori root situs web. Latih mempertahankan menu yang sama pada tiga dokumen di Membuat Situs Web Multi-Halaman Kecil.

Jalur berikut about.html dan ../contact.html adalah contoh latihan, bukan halaman yang saat ini ada di Coding Factory. Misalkan, Anda menulis tautan di lessons/index.html dalam struktur folder ini:

site/

  contact.html

  lessons/

    index.html

    about.html

<a href="https://www.codingfactory.net/id/18461">URL Lengkap</a>
<a href="about.html">Halaman perkenalan di folder ini</a>
<a href="../contact.html">Halaman kontak di folder induk</a>
<a href="/id/18461">Daftar HTML di situs web ini</a>

about.html diselesaikan sehubungan dengan dokumen saat ini. Jalur yang dimulai dengan / diselesaikan dari direktori root situs web. File lokal file:// memiliki root yang berbeda dari situs web yang disediakan, jadi uji jalur relatif lagi setelah penyebaran.

Tautan ke tempat di sebuah dokumen

Beri elemen tujuan id yang unik dan kemudian gunakan # diikuti dengan nilai ini dalam tautan.

<a href="#contact">Pergi ke detail kontak</a>



<h2 id="contact">Kontak</h2>

<p>Detail kontak ada di sini.</p>

Untuk pergi ke tempat di file lain, tambahkan fragmen ke URL-nya: about.html#contact. Hindari menggunakan id yang sama pada satu halaman.

Tautan ke email dan tab baru

Sebuah URL mailto: meminta aplikasi email pengguna untuk membuat pesan. Ini mungkin tidak berfungsi sebagaimana dimaksud jika tidak ada aplikasi email yang dikonfigurasi.

<a href="mailto:hello@example.com">Menulis email</a>

Untuk membuka situs web eksternal di tab baru, gunakan target="_blank" dan kebijakan rel="noopener noreferrer" dari situs web.

<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/a"

   target="_blank" rel="noopener noreferrer">Referensi elemen a di MDN</a>

Pilih tab baru jika sesuai dengan tugas pembaca, dan jelaskan perilaku tersebut di teks tautan atau dalam penjelasan yang dekat.

Apa yang dapat dilakukan atribut download

Atribut download meminta browser untuk mengunduh file yang ditautkan. Misalnya, atribut ini dapat digunakan untuk gambar yang dihosting di situs web yang sama.

<a href="/wp-content/uploads/html-image-sample-lake-tree-1600-v1.webp" download>Unduh gambar contoh</a>

download berfungsi dengan URL dari asal yang sama (protokol yang sama, host yang sama, dan port yang sama) serta dengan URL blob: dan data:. Ini tidak dapat memaksa pengunduhan URL reguler di situs web lain. Bahkan untuk file dari asal yang sama, pengaturan browser dan respons server dapat mempengaruhi apa yang terjadi.

MDN: Tautan dan atribut unduhan

Uji jalur relatif dengan tiga file nyata

Simpan ketiga dokumen ini dalam struktur folder sebelumnya site/. Latihan ini memeriksa navigasi antara file dan bukan mengirim pesan kontak yang nyata.

site/lessons/index.html

<!doctype html>
<html lang="id-ID">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Beranda latihan tentang jalur</title>
</head>
<body>
  <h1>Beranda latihan tentang jalur</h1>
  <nav aria-label="Menu latihan">
    <a href="about.html">Perkenalan</a>
    <a href="../contact.html">Kontak</a>
  </nav>
</body>
</html>

site/lessons/about.html

<!doctype html>
<html lang="id-ID">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Perkenalan</title>
</head>
<body>
  <h1>Perkenalan</h1>
  <nav aria-label="Menu latihan">
    <a href="index.html">Memulai latihan</a>
    <a href="../contact.html">Kontak</a>
  </nav>
</body>
</html>

site/contact.html

<!doctype html>
<html lang="id-ID">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Kontak</title>
</head>
<body>
  <h1>Kontak</h1>
  <nav aria-label="Menu latihan">
    <a href="lessons/index.html">Memulai latihan</a>
    <a href="lessons/about.html">Perkenalan</a>
  </nav>
</body>
</html>

Buka setiap file, ikuti tautannya dan bandingkan folder di bilah alamat. ../ naik satu direktori ke atas. Jika sebuah tautan gagal, selesaikan masalah dari folder file sumber, daripada menebak nama file lain. Pulihkan nilai-nilai dalam tabel setelah Anda bereksperimen.

Periksa tautan sebelum menerbitkannya

• Gunakan teks seperti “Tutorial Daftar HTML” alih-alih “klik di sini”.
• Uji jalur relatif dari lokasi penyimpanan dokumen yang disediakan.
• Periksa apakah fragmen #id sesuai persis dengan targetnya.
• Ingatlah bahwa tautan email dan unduhan bergantung pada browser dan lingkungan pengguna.

Lihat referensi elemen a dari MDN untuk informasi lebih lanjut tentang URL dan atribut.