Didiek
Posted on
• HTML

HTML - Link dan Gambar

Author

Materi HTML selanjutnya yang bisa kita pelajari adalah mengenai HTML Link dan gambar. Oke Lets Go!:

1. 🖇️Link / Tautan

Tag <a> digunakan untuk membuat tautan ke halaman lain, bagian lain di halaman, atau file eksternal.

Struktur dasarnya tag seperti berikut ini :

<a href="URL">Teks Tautan</a>

Contoh jika kamu ingin menautkan link google.com pada html bisa seperti berikut:

<a href="https://www.google.com" target="_blank">Kunjungi Google</a>

Penjelasan singkatnya:

  • href: atribut untuk menentukan alamat tujuan.
  • target="_blank": membuka link di tab baru (opsional tapi umum digunakan).

Contoh lainnya, kamu bisa menggunakan seperti berikut:

  • Link eksternal:

    <a href="https://openai.com">OpenAI</a>

  • Link internal (ke halaman lain di website kamu):

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

  • Link ke bagian tertentu di halaman (anchor): Tambahkan id pada elemen target, lalu tautkan dengan #id.

    <a href="#kontak">Ke bagian kontak</a>

<h2 id="kontak">Kontak Kami</h2>

kita lanjut ke bagian selanjutnya yaa

2. Gambar (Tag <img>)

Tag <img> digunakan untuk menampilkan sebuah gambar. Ini adalah tag atau elemen self-closing (tidak punya tag penutup).

Berikut Struktur tag dasarnya:

<img src="alamat-gambar" alt="deskripsi gambar">

dan berikut contohnya:

<img src="https://via.placeholder.com/300" alt="Contoh Gambar" width="300">

Atribut penting:

  • src: lokasi gambar (bisa URL atau file lokal).
  • alt: teks alternatif, penting untuk SEO dan aksesibilitas.
  • width, height: untuk mengatur ukuran gambar (bisa px atau %).

sampai sini, untuk kamu yang benar-benar baru mengenal HTML harap bersabar dan lanjutkan membacanya, perlahan kamu pasti bisa paham. lanjut yaa

3. Menggabungkan Gambar dan Link

Kamu bisa menjadikan gambar sebagai tautan seperti berikut ini:

<a href="https://example.com">
    <img src="gambar.jpg" alt="Klik gambar ini">
</a>

atau Contoh Lengkapnya bisa sambil kamu praktikkan ya; silahkan buat dengan nama filelink-dan-gambar.html dan sesuaikan seperti kode berikut:

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <title>Link dan Gambar</title>
</head>
<body>

    <h1>Belajar Link dan Gambar</h1>

    <h2>Contoh Link</h2>
    <p><a href="https://www.wikipedia.org" target="_blank">Buka Wikipedia di tab baru</a></p>
    <p><a href="halaman2.html">Ke halaman kedua (internal)</a></p>

    <h2>Contoh Anchor</h2>
    <p><a href="#gambar">Lompat ke bagian gambar di bawah</a></p>

    <h2 id="gambar">Contoh Gambar</h2>
    <img src="https://via.placeholder.com/250" alt="Gambar contoh" width="250">

    <h2>Gambar sebagai Link</h2>
    <a href="https://www.openai.com" target="_blank">
        <img src="https://via.placeholder.com/100" alt="Logo OpenAI">
    </a>

</body>
</html>

setelah itu kamu buka filenya dengan browser yang kamu miliki, perhatikan tampilan yang ada, dan jika kamu masih semangat silahkan berkreasi dengan menambahkan apa yang sudah kamu pelajari sebelumnya. Oke, untuk kali ini dicukupkan sampai sini dulu yaa, tetap semangat!

Related posts