Link dan Gambar dalam HTML

25 menit Pemula Dasar HTML

Pelajari cara menambahkan hyperlink dan gambar untuk membuat konten web yang interaktif dan visual menarik.

Hyperlink dalam HTML

Hyperlink (atau link) adalah elemen fundamental web yang memungkinkan navigasi antar halaman dan sumber daya. Dibuat dengan tag <a> (anchor).

Link Eksternal

Menghubungkan ke website eksternal atau domain berbeda.

<a href="https://example.com">Kunjungi Website</a>

Kunjungi Website

Link Internal

Menghubungkan ke halaman dalam website yang sama.

<a href="about.html">Tentang Kami</a>

Tentang Kami

Link Email

Membuka aplikasi email default pengguna.

<a href="mailto:email@contoh.com">Email Kami</a>

Email Kami

Link Telepon

Menghubungkan ke aplikasi telepon pada perangkat mobile.

<a href="tel:+628123456789">Hubungi Kami</a>

Hubungi Kami

Link Download

Memaksa browser untuk mendownload file.

<a href="file.pdf" download>Download PDF</a>

Download PDF

Link Anchor

Menghubungkan ke bagian tertentu dalam halaman yang sama.

<a href="#section1">Ke Bagian 1</a>

Ke Bagian 1

Atribut Penting untuk Link

href Wajib

URL atau tujuan link. Bisa berupa path relatif atau absolut.

href="page.html" href="https://example.com" href="#section"

target Opsional

Menentukan dimana link akan dibuka.

_blank _self _parent _top

rel Opsional

Menentukan hubungan antara dokumen saat ini dan dokumen tujuan.

nofollow noopener noreferrer

title Opsional

Informasi tambahan yang muncul sebagai tooltip saat hover.

title="Klik untuk info lebih lanjut"

Gambar dalam HTML

Gambar ditambahkan dengan tag <img>. Ini adalah void element (self-closing) yang tidak memerlukan tag penutup.

Gambar Dasar

<img src="gambar.jpg" 
     alt="Deskripsi gambar untuk aksesibilitas">

Contoh gambar placeholder dengan background biru

Gambar dengan Figure

<figure>
    <img src="landscape.jpg" 
         alt="Pemandangan alam yang indah">
    <figcaption>
        Pemandangan gunung di pagi hari
    </figcaption>
</figure>

Pemandangan alam hijau yang segar — Pemandangan gunung di pagi hari - Foto oleh Fotografer

Atribut Penting untuk Gambar

src Wajib

URL atau path menuju file gambar.

src="images/photo.jpg" src="../assets/image.png"

alt Wajib

Teks alternatif untuk aksesibilitas dan SEO.

alt="Anak tersenyum di taman" alt="Grafik pertumbuhan perusahaan 2024"

width & height Opsional

Dimensi gambar dalam pixel. Membantu layout stability.

width="800" height="600"

loading Opsional

Kontrol lazy loading untuk performa.

lazy eager

Best Practices untuk Gambar

Selalu Gunakan Alt Text

Alt text penting untuk aksesibilitas (screen reader) dan SEO.

Optimalkan Ukuran File

Kompres gambar untuk loading yang lebih cepat.

Gunakan Format yang Tepat

JPEG untuk foto, PNG untuk grafik, WebP untuk modern browser.

Hindari Alt Text Berlebihan

Alt text harus deskriptif tapi ringkas dan relevan.

Contoh Implementasi Lengkap

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Portofolio Photography</title>
</head>
<body>
    <header>
        <nav>
            <a href="#home">Home</a>
            <a href="#gallery">Galeri</a>
            <a href="#about">Tentang</a>
            <a href="#contact">Kontak</a>
        </nav>
    </header>

    <main>
        <section id="home">
            <h1>Portofolio Photography</h1>
            <figure>
                <img src="hero-image.jpg" 
                     alt="Fotografer sedang mengambil gambar landscape" 
                     width="800" 
                     height="400">
                <figcaption>
                    Moment captured in the wild - 
                    <a href="gallery.html" title="Lihat galeri lengkap">Lihat lebih banyak</a>
                </figcaption>
            </figure>
        </section>

        <section id="gallery">
            <h2>Galeri Foto</h2>
            <div class="gallery-grid">
                <figure>
                    <img src="photo1.jpg" 
                         alt="Sunset di pantai dengan siluet pohon" 
                         loading="lazy">
                    <figcaption>Sunset Golden Hour</figcaption>
                </figure>
                <figure>
                    <img src="photo2.jpg" 
                         alt="Pemandangan kota di malam hari dengan lampu-lampu" 
                         loading="lazy">
                    <figcaption>City Night Lights</figcaption>
                </figure>
            </div>
        </section>

        <section id="contact">
            <h2>Hubungi Saya</h2>
            <p>
                <a href="mailto:photo@example.com">📧 Email</a> | 
                <a href="tel:+628123456789">📞 Telepon</a> |
                <a href="https://instagram.com/username" target="_blank" rel="noopener">
                    📷 Instagram
                </a>
            </p>
        </section>
    </main>

    <footer>
        <p>
            <a href="sitemap.html">Sitemap</a> | 
            <a href="privacy.html" target="_blank">Privacy Policy</a>
        </p>
    </footer>
</body>
</html>

portofolio-photography.html