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! 😊

Komentar

Postingan Populer

Gambar

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...

Halo teman-teman! Pada artikel kali ini, kita akan belajar tentang konsep baru yang penting untuk pemrograman web, yaitu file paths . Kalau sebelumnya kita sudah belajar tentang elemen gambar di HTML, kali ini kita akan memahami cara mengatur lokasi file gambar (atau file lainnya) agar bisa ditampilkan di website. Yuk, langsung mulai! Apa Itu File Path? Bayangkan kamu ingin menunjukkan lokasi spesifik suatu tempat ke temanmu. Misalnya, “Pergi ke Jakarta, masuk ke daerah Menteng, lalu cari Jalan Kebon Sirih.” Nah, komputer juga butuh cara untuk menemukan lokasi file, seperti gambar, dokumen, atau halaman HTML lainnya. Inilah yang disebut file path . File path bisa diartikan sebagai “alamat” file atau folder di komputer kamu. Ada dua jenis file path yang sering digunakan: Absolute Path Alamat lengkap file yang dimulai dari “akar” (root) komputer. Misalnya: Windows: C:\Project\Images\kucing.png Mac: /Users/NamaUser/Project/Images/kucing.png Relative Path Alamat file yang r...

Halo teman-teman, apa kabar kalian? Jika kalian punya blog atau website dan ingin banget meningkatkan penghasilan lewat Google AdSense, kalian berada di tempat yang tepat. Dalam artikel yang sangat panjang ini, kita akan kupas tuntas gimana caranya menaikkan Cost Per Click (CPC) dan Click-Through Rate (CTR) , dua hal penting yang sangat memengaruhi besaran uang yang bisa kalian dapatkan dari iklan di blog. Kita bakal bahas strategi-strategi jitu supaya blog kalian makin menarik di mata pengiklan. Dengan begitu, nilai klik (CPC) bisa melonjak, dan persentase pengunjung yang mengklik iklan (CTR) juga ikut naik. Kita akan bedah kenapa kedua hal ini krusial, gimana mengoptimalkan konten, cara memilih topik yang pas, sampai gimana menempatkan iklan dengan taktik yang tepat. Nggak ketinggalan, kita juga akan kupas soal SEO—karena kalau blog kalian gampang ditemukan di mesin pencari, jumlah pengunjung pasti meningkat. Lebih banyak pengunjung = lebih besar peluang klik = pendapatan blog yan...