Link (tautan) di HTML adalah elemen yang digunakan untuk menghubungkan satu halaman ke halaman lain, atau menuju file, gambar, email, atau bagian tertentu dalam halaman yang sama. Link dibuat menggunakan tag:
<a href="...">teks link</a>
🔹 Fungsi Link di HTML
✔ Menghubungkan halaman web
✔ Membuka file atau gambar
✔ Mengirim email
✔ Menghubungkan ke bagian tertentu dari halaman (anchor link)
✔ Membuat tombol download
🔹 Struktur Dasar Tag <a>
<a href="alamat-tujuan">Teks yang diklik</a>
🔹 1. Link ke Halaman Lain
<a href="https://www.google.com">Kunjungi Google</a>
🔹 2. Link ke Halaman di Folder yang Sama
<a href="about.html">Tentang Kami</a>
🔹 3. Link ke Halaman dalam Folder Berbeda
<a href="pages/kontak.html">Hubungi Kami</a>
🔹 4. Membuka Link di Tab Baru
Gunakan atribut target="_blank":
<a href="https://youtube.com" target="_blank">Buka YouTube</a>
🔹 5. Link ke Bagian Tertentu di Halaman (Anchor Link)
Buat ID pada elemen
<h2 id="bagian1">Bagian Pertama</h2>
Buat link-nya
<a href="#bagian1">Ke Bagian Pertama</a>
🔹 6. Link untuk Download File
<a href="file.pdf" download>Download PDF</a>
🔹 7. Link untuk Mengirim Email
<a href="mailto:[email protected]">Kirim Email</a>
🔹 8. Link untuk Mengirim Pesan WhatsApp
<a href="https://wa.me/6281234567890">Chat via WhatsApp</a>
🔹 9. Menambahkan Title (tooltip)
<a href="https://example.com" title="Kunjungi situs kami">Klik di sini</a>
🔹 Contoh Lengkap
<p>
Kunjungi halaman
<a href="about.html" title="Informasi tentang kami">Tentang Kami</a>
untuk mengetahui lebih lanjut.
</p>
Berikut contoh halaman HTML lengkap yang berisi heading, paragraf, link, dan gambar. Kode ini sangat cocok sebagai materi belajar HTML dasar.
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contoh HTML Lengkap</title>
</head>
<body>
<!-- Heading -->
<h1>Belajar HTML Dasar</h1>
<p>
Halaman ini berisi contoh penggunaan heading, paragraf, gambar, dan link dalam HTML.
Semua elemen ini sangat penting untuk membangun struktur dasar halaman web.
</p>
<!-- Paragraf -->
<h2>Apa itu HTML?</h2>
<p>
HTML (HyperText Markup Language) adalah bahasa markup standar untuk membuat halaman web.
Dengan HTML, kita dapat menampilkan teks, gambar, tabel, link, dan elemen-elemen lain.
</p>
<!-- Link -->
<h2>Contoh Link</h2>
<p>
Klik link berikut untuk membuka Google:
<a href="https://www.google.com" target="_blank" title="Kunjungi Google">
Buka Google
</a>.
</p>
<p>
Klik link berikut untuk menuju bagian gambar di bawah:
<a href="#gambar1">Lihat Gambar</a>.
</p>
<!-- Gambar -->
<h2 id="gambar1">Contoh Gambar</h2>
<p>Berikut contoh gambar yang ditampilkan menggunakan tag <code><img></code>:</p>
<img src="https://via.placeholder.com/450x220" alt="Contoh Gambar" width="450">
<p>
Gambar di atas menggunakan URL dari placeholder dan dapat diganti dengan gambar lain.
</p>
<!-- Link Download -->
<h2>Contoh Link Download</h2>
<p>
Anda dapat membuat link download menggunakan atribut <code>download</code>:
</p>
<a href="contoh.pdf" download>Download File Contoh</a>
</body>
</html>
Leave a Reply