Menambahkan Gambar di HTML (Untuk Membuat Website Jadi Lebih Menarik)

Gambar di HTML

Halo teman-teman!

Kalian pasti setuju, website tanpa gambar akan terasa membosankan. Kali ini, kita akan belajar menggunakan image element (<img>) untuk menambahkan gambar ke website kalian. Yuk, langsung kita bahas!

Apa Itu Image Element?

Image element digunakan untuk menampilkan gambar di website. Bentuknya seperti ini:

<img src="URL" />

Komponen pentingnya:

  1. src: Attribute untuk menentukan sumber gambar.
  2. Self-closing tag: Tidak memerlukan tag penutup karena tidak memiliki konten teks di dalamnya.

Contoh Penggunaan Image Element

1. Menampilkan Gambar

Berikut cara menambahkan gambar ke website:

<img src="https://via.placeholder.com/150" />

Hasil di browser: Gambar placeholder dengan ukuran 150x150 piksel akan tampil.

2. Menambahkan Alt Text

Tambahkan attribute alt untuk memberikan deskripsi gambar:

<img src="https://via.placeholder.com/150" alt="Contoh gambar placeholder" />

Alt text ini penting untuk:

  • Membantu pengguna dengan gangguan penglihatan melalui screen reader.
  • Menjelaskan konten gambar jika gambar gagal dimuat.

Tips Menemukan Gambar Placeholder

Kalian bisa menggunakan layanan seperti picsum.photos untuk mendapatkan gambar placeholder:

  • URL: https://picsum.photos/200
  • Hasil: Gambar acak dengan ukuran 200x200 piksel.

Contoh penggunaan di HTML:

<img src="https://picsum.photos/200" alt="Gambar acak 200x200 piksel" />

Proyek: Cat Person atau Dog Person?

Kita akan membuat halaman sederhana untuk menunjukkan apakah kalian tim anjing atau kucing.

Langkah 1: Struktur Dasar

Buat file index.html dan tambahkan struktur berikut:

<!DOCTYPE html>
<html>
<head>
    <title>Tim Kucing atau Anjing?</title>
</head>
<body>
</body>
</html>

Langkah 2: Tambahkan Heading

Tambahkan judul menggunakan <h1>:

<h1>Aku Tim Anjing</h1>

Langkah 3: Tambahkan Gambar

Tambahkan gambar anjing dengan tag <img>:

<img src="https://via.placeholder.com/300" alt="Anjing lucu sedang bermain" />

Jika kalian tim kucing, gunakan URL gambar kucing:

<img src="https://via.placeholder.com/300/0000FF" alt="Kucing sedang duduk" />

Hasil Akhir Kode

Berikut kode lengkapnya untuk tim anjing:

<!DOCTYPE html>
<html>
<head>
    <title>Tim Kucing atau Anjing?</title>
</head>
<body>
    <h1>Aku Tim Anjing</h1>
    <img src="https://via.placeholder.com/300" alt="Anjing lucu sedang bermain" />
</body>
</html>

Jika kalian tim kucing, cukup ganti heading dan URL gambar.

Kelebihan Menggunakan Alt Text

  1. Aksesibilitas: Membantu pengguna dengan gangguan penglihatan memahami isi gambar melalui screen reader.
  2. SEO: Search engine seperti Google menggunakan alt text untuk memahami isi gambar di website kalian.

Kesimpulan
Dengan image element, kalian bisa menambahkan gambar untuk membuat website lebih menarik. Jangan lupa gunakan alt text untuk memastikan website kalian tetap ramah bagi semua pengguna.

Di pelajaran berikutnya, kita akan menggabungkan semua yang sudah dipelajari untuk membuat Birthday Invite Website. Sampai jumpa di pelajaran berikutnya! 😊

Comments

Postingan Populer

Image

Superingan is a Blogger template designed with simplicity and functionality in mind, offering a clean and user-friendly platform for professional websites. This theme is perfect for various website types, including personal blogs, online magazines, news websites, and portfolios. Features: Responsive Design: Your website will look its best across all devices, from desktops and laptops to tablets and smartphones. Customizable Colors: Easily change the template's colors to match your branding or preferences. Custom Headers: Upload your own header image to add a personal touch to your website. Custom Menus: Create and manage your website's navigation menus with ease. Widget Areas: Add widgets to display additional content and features on your website's sidebar. Clean HTML & CSS Code: The template is built with clean and well-structured code, making it easy to learn and customize further. Superingan is an ideal choice for those seeking a professional website with a sim...

Image

Hitung Cicilan, Bunga, dan Total Biaya Pinjaman Bisnis dengan Praktis dan Akurat Jumlah Pinjaman (Rp) Suku Bunga Tahunan (%) Lama Pinjaman (Tahun) Pembayaran Tambahan per Bulan (Rp) Setel Ulang Hitung Halo teman-teman! Kalau kamu lagi cari tambahan modal buat mulai usaha atau ingin mengembangkan bisnis yang sudah berjalan, penting banget untuk tahu seberapa besar cicilan dan total biaya yang harus kamu siapkan. Jangan sampai asal ambil pinjaman tanpa perhitungan, ya! Nah, di sinilah Kalkulator Pinjaman Usaha Online jadi solusi praktis yang bisa bantu kamu. Kalkulator ini dirancang khusus buat pelaku usaha, UMKM, atau siapa pun yang ingin tahu rincian pinjaman usaha secara lengkap. Mulai dari cicilan bulanan, bunga tahunan, durasi pelunasan, sampai total pembayaran. Semua bisa kamu hitung otomatis hanya dengan beberapa input sederhana. Cara Menggun...

Image

Calculate Business Loan Payments, Interest, and Total Cost Easily and Accurately Loan Amount (USD) Annual Interest Rate (%) Loan Term (Years) Extra Monthly Payment (USD) Reset Calculate Hi everyone! If you're looking for extra capital to launch a startup or expand your existing business, it's important to know how much you'll need to repay—monthly and overall. Don’t commit to a loan without understanding the full picture. That’s where our Online Business Loan Calculator comes in handy. This tool is designed for business owners, entrepreneurs, or anyone seeking a full breakdown of a loan. It helps you calculate monthly payments, total interest, repayment period, and overall cost automatically with just a few simple inputs. How to Use the Business Loan Calculator Fill in the following fields based on your situation: Loan Amount (USD): Ent...