Gambar · Kode bersama Martin

Tambahkan foto dan gambar ke situs web kamu – dan pelajari cara mengaturnya dengan rapi dalam satu folder.

Tunjukkan pada saya: tag gambar

Gambar ditambahkan dengan tag <img>:

<img src="images/school.jpg" alt="Our school building">

Dua hal yang perlu dijelaskan di sini:

src (sumber) menyatakan di mana gambar itu berada. Di sini: di folder gambar, file sekolah.jpg.
alt (alternatif) adalah teks deskripsi gambar. Ini muncul jika gambar gagal dimuat, dan dibacakan oleh pembaca layar untuk orang tunanetra. Selalu isi – ini merupakan praktik yang sopan dan standar bagi para profesional.

Perhatikan satu hal lagi: <img> tidak memiliki tag penutup. Itu tidak “membungkus” apa pun, itu hanya menyisipkan dirinya sendiri – beberapa tag berfungsi seperti itu.

💡

Di mana kamu mendapatkan gambar? Foto kamu sendiri (minta orang tua untuk mengirimkannya ke komputer kamu), gambar kamu sendiri yang dipindai atau difoto – atau gambar gratis dari situs seperti pixabay.com. Jangan hanya mengambil gambar dari Google – sebagian besar gambar tersebut adalah milik seseorang dan tidak dapat digunakan tanpa izin.

Tetap rapi: folder untuk gambar

Di VS Code, di dalam folder situs web saya, buat folder baru dan beri nama gambar (ikon folder dengan plus di kiri atas).
Salin 2–3 gambar ke dalamnya. kamu bahkan dapat menarik dan melepasnya langsung ke VS Code.
Ganti namanya dengan mudah: huruf kecil, tanpa aksen, tanpa spasi. Sesuatu seperti sekolah.jpg, bidang.jpg, trip-mountains.jpg. Ini akan menyelamatkan kamu dari banyak sakit kepala.

Giliran kamu 💪

Tambahkan setidaknya dua gambar ke halaman kamu yang sesuai dengan konten (mungkin satu tepat di bawah judul utama dan satu lagi di dalam bab).

🏫 Situs web sekolah – solusi

<h1>Riverside Elementary School</h1>
<img src="images/school.jpg" alt="Our school building">
<p>Welcome to our school's website.</p>

<h2>Clubs</h2>
<img src="images/gym.jpg" alt="Our gym during a floorball game">
<ul>
  <li>floorball</li>
  <li>ceramics</li>
</ul>

🙋 Situs web pribadi – solusi

<h1>Hi, I'm Jake</h1>
<img src="images/me.jpg" alt="Me with a soccer ball">

<h2>What I Like</h2>
<img src="images/minecraft-build.jpg" alt="My castle built in Minecraft">
<p>More than anything, soccer and Minecraft.</p>

🌍 Jurnal perjalanan – solusi

<h1>Where We've Been 🌍</h1>

<h2>Last Trip: The Mountains</h2>
<img src="images/mountains.jpg" alt="View from the summit over the forest">
<p>Over the summer we hiked through the mountains.</p>

<h2>Greece 2025</h2>
<img src="images/sea.jpg" alt="A bay with crystal-clear water">

⚽ Situs web klub – solusi

<h1>Riverside Eagles FC</h1>
<img src="images/team.jpg" alt="Our team photo after the match">

<h2>Recent Results</h2>
<img src="images/match.jpg" alt="Owen scoring a goal against the Wildcats">

⚠️

Gambar tidak muncul? Periksa: 1) nama dalam kode kamu sama persis dengan nama file (bahkan huruf besar/kecil!), 2) gambar benar-benar ada di folder gambar, 3) kamu tidak lupa menyimpan dan menyegarkan halaman. Temukan bantuan lebih lanjut di bab Saat Sesuatu Tidak Berfungsi.

✅

Periksa diri kamu: kamu dapat melihat gambar kamu di halaman. Mereka mungkin terlalu besar atau anehnya melebar – tidak apa-apa, kami akan memperbaiki ukurannya setelah kami masuk ke CSS.

Apa yang bisa diambil dari pelajaran ini

Tag <img src="..." alt="..."> menyisipkan gambar – tidak memiliki tag penutup.
alt mendeskripsikan gambar dengan kata-kata. Selalu isi.
Simpan gambar dalam folder gambar, dengan nama sederhana: huruf kecil, tanpa spasi atau aksen.