Gambar: Menambahkan Gambar ke Halaman Anda
Sisipkan dan format gambar di halaman web Anda
Gambar: Menambahkan Gambar ke Halaman Anda adalah pelajaran HTML for Kids gratis di CoddyKit. Ini adalah pelajaran 4 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar HTML for Kids, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus HTML for Kids mencakup 4 pelajaran total.
Gambar: Menambahkan Gambar ke Halaman Anda
Selamat datang di pelajaran berikutnya! Hari ini, kita akan mempelajari cara menambahkan gambar ke halaman web Anda. Gambar membuat halaman Anda lebih menarik dan menyenangkan!
Apa Itu Gambar dalam HTML?
Gambar ditambahkan ke halaman web menggunakan tag <img>. Ini adalah tag yang dapat ditutup sendiri, artinya tidak memerlukan tag penutup seperti </img>.
Mari kita pelajari cara menggunakannya!
Menambahkan Gambar
Untuk menambahkan gambar, gunakan atribut src untuk menentukan lokasi berkas gambar.
Contoh:
Dalam contoh ini:
src: Menentukan berkas gambar.alt: Menyediakan teks alternatif jika gambar tidak dapat ditampilkan.
<img src="https://www.w3.org/html/logo/img/html5-display.png"
alt="A beautiful view" />
Teks Alternatif (Atribut alt)
Atribut alt menjelaskan gambar. Atribut ini penting untuk aksesibilitas dan membantu mesin pencari memahami gambar Anda.
Contoh:
Jika gambar tidak dimuat, teks "A beautiful sunset over the ocean" akan muncul sebagai gantinya.
<img src="https://www.w3.org/html/logo/img/html5-display.png" alt="A beautiful sunset over the ocean" />
Menambahkan Dimensi Gambar
Anda dapat mengatur ukuran gambar menggunakan atribut width dan height.
Contoh:
Contoh ini mengatur lebar gambar menjadi 300 piksel dan tingginya menjadi 200 piksel.
<img src="https://www.w3.org/html/logo/img/html5-display.png" alt="A red flower" width="300" height="200" />
Menautkan Gambar
Anda dapat mengubah gambar menjadi tautan yang dapat diklik dengan menempatkannya di dalam tag <a>.
Contoh:
Saat gambar diklik, pengguna akan dibawa ke https://example.com.
<a href="https://example.com">
<img src="https://www.w3.org/html/logo/img/html5-display.png" alt="Example Logo" />
</a>
Menggunakan Gambar Online
Anda dapat menggunakan gambar yang dihosting secara online dengan menentukan URL-nya dalam atribut src.
Contoh:
<img src="https://www.w3.org/html/logo/img/html5-display.png" alt="Online Image" />
Coba Sendiri
Mari kita membuat halaman web sederhana dengan gambar. Berikut contohnya:
<!DOCTYPE html>
<html>
<head>
<title>My Image Page</title>
</head>
<body>
<h1>Welcome to My Gallery</h1>
<img src="cat.jpg" alt="A cute cat" width="400" />
<p>This is my adorable cat!</p>
<img src="https://www.w3.org/html/logo/img/html5-display.png" alt="A playful dog" />
<p>This is a friendly dog from the internet!</p>
</body>
</html>
Kerja Bagus!
Selamat! Anda telah mempelajari cara menambahkan gambar ke halaman web, mengatur dimensinya, dan bahkan menautkannya ke halaman lain. Gambar membuat halaman web Anda lebih menarik dan sedap dipandang. Pada pelajaran berikutnya, kita akan mempelajari cara membuat tabel untuk mengatur data. Bersiaplah untuk membuat halaman Anda semakin fungsional!
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Gambar: Menambahkan Gambar ke Halaman Anda” gratis?
Ya — teks lengkap “Gambar: Menambahkan Gambar ke Halaman Anda” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus HTML for Kids, upgrade ke CoddyKit PRO. Kursus HTML for Kids mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “Gambar: Menambahkan Gambar ke Halaman Anda”?
Sisipkan dan format gambar di halaman web Anda Kamu berlatih HTML for Kids dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai HTML for Kids?
Tidak diperlukan pengalaman sebelumnya. HTML for Kids di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 4 dari 4.
Berapa lama pelajaran “Gambar: Menambahkan Gambar ke Halaman Anda” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran HTML for Kids ini?
Ya. Setiap pelajaran HTML for Kids menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.
Semua pelajaran dalam kursus ini
- Judul dan Paragraf
- Daftar: Berurutan dan Tidak Berurutan
- Tautan: Menghubungkan Web
- Gambar: Menambahkan Gambar ke Halaman Anda