Beranda
HTML

Cara Menambahkan Gambar di HTML

Menambahkan gambar di HTML itu gampang banget asal tahu tag dan atributnya. Dengan menambahkan gambar yang tepat, website kalian bisa jadi lebih
Kode Violet
Cara Menambahkan Gambar di HTML

Hai teman-teman! Pernah nggak sih kalian bikin halaman web tapi bingung gimana caranya masukin gambar? Nah, di kesempatan ini kodeviolet.com akan membahas tentang cara menambahkan gambar di HTML biar tampilan website kalian makin kece dan menarik.

Kenapa Menambahkan Gambar di HTML Itu Penting?

Gambar punya peran besar dalam membuat website terlihat lebih hidup. Gambar bisa bantu menjelaskan konten, memperindah tampilan, sampai memberikan informasi visual yang lebih mudah dipahami.

Cara Dasar Menambahkan Gambar di HTML

Untuk menambahkan gambar di HTML, kalian bisa pakai tag <img>. Tag ini bersifat self-closing, artinya nggak butuh penutup kayak tag lain. Kalian cuma perlu atribut src untuk sumber gambar dan alt untuk teks alternatif.

Contohnya:

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

Berikut ini contoh lengkap HTML-nya dengan gambar nyata:

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Cara Menambahkan Gambar di HTML - Panduan Lengkap untuk Pemula</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      padding: 20px;
      background-color: #f9f9f9;
    }
    h1 {
      color: #333;
    }
    img {
      max-width: 100%;
      height: auto;
      border: 1px solid #ccc;
    }
  </style>
</head>
<body>
  <h1>Contoh Menambahkan Gambar di HTML</h1>
  <p>Di bawah ini adalah contoh gambar yang ditambahkan menggunakan tag <code>&lt;img&gt;</code>:</p>
  <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRTSba5ugtraL3A2W5jEsl0tNefBjx4iotzq8eWbhrEAxP8sEHTlYR_J8dViTM2BfT-x2CnSk-WMYp7jm_tpF6a8NNP7jQnrNnLRwqzkyLMStS7oyj9qpDZcSELhBknEh6IUgjbepLYkgGe0kpz1ZEgnpMHicuVCvYgFTlz-N19Ss6pRrm3tgSYa7s/s16000-rw/Cara%20Menulis%20Kode%20Javascript%20pada%20HTML.png" alt="Contoh gambar HTML" title="Cara Menulis Kode Javascript pada HTML">
</body>
</html>

Atribut Penting pada Tag <img>

Berikut ini tabel yang menjelaskan beberapa atribut penting yang sering digunakan saat menambahkan gambar di HTML:

Atribut Keterangan
src Alamat atau path dari gambar yang akan ditampilkan
alt Teks alternatif jika gambar tidak bisa ditampilkan
width Menentukan lebar gambar (dalam pixel atau persen)
height Menentukan tinggi gambar (dalam pixel atau persen)
title Teks yang muncul saat kursor diarahkan ke gambar

Tips Menambahkan Gambar agar SEO Friendly

  • Gunakan nama file gambar yang deskriptif (contoh: sepatu-kulit-hitam.jpg)
  • Isi atribut alt dengan teks yang menggambarkan isi gambar
  • Kompres gambar agar loading website tetap cepat

Kesimpulan

Menambahkan gambar di HTML itu gampang banget asal tahu tag dan atributnya. Dengan menambahkan gambar yang tepat, website kalian bisa jadi lebih menarik dan informatif.

Sekian artikel dari kodeviolet.com, semoga membantu kalian yang lagi belajar HTML. Kalau masih bingung atau ada pertanyaan, langsung aja tulis di kolom komentar ya!

Posting Komentar