Share
in TIK

USING IMAGES

by hannasyifa20011@gmail.com · September 12, 2026

Halo halo kita mau belajar menambah gambar [Using Images] pake link yang aku sertakan di bawah

https://studio.code.org/courses/web-development-2025/units/1/lessons/8/levels/5

Gimana sih cara bikin dari kosong begini:

Jadi kayak gini:

Kita akan belajar yang namanya Using Images.

USING IMAGE Menggunakan tag <img> berfungsi menambah gambar di halaman web.

– MENGUBAH NAMA DULU

Pertama untuk memudahkan kita untuk mengerjakannya, kita akan mengubah nama pada hewan yang sudah tersedia.

Di bagian sebelah kiri akan ada block seperti yang diatas, akan ada beberapa hewan. Kita akan mengubah namanya agar lebih mudah digunakan.

Caranya dengan memencet [Drop-down List] pada sebelah kanan. Nanti akan ada pilihan ubah nama atau rename. Namakan dengan nama yang kalian inginkan.

>Lakukan pada seluruh block image yang ada gambar hewannya.

– MEMBERI URUTAN ANGKA SERTA MEMUNCULKAN GAMBAR

Yaitu dengan menggunakan ol [Ordered List]

kita tamabahkan <ol> pada baris ke-10

lalu dibawahnya ditambahakan <li><img src="[nama yang kalian ganti]" alt="Deskripsi gambar" /> dibaris ke-11

di baris ke-12 tutup dengan <li/>

<Cara baris ke 11 <img src="[nama yang kalian ganti]" alt="Deskripsi gambar" /> >

copy bagian HTML [crtl + c] lalu masukkan di baris ke 11 [crtl + v]

YEAY jadi satu

– LAKUKAN KE SEMUA GAMBAR YANG MAU DIURUTKAN

Lakukan dengan cara yang sama, tetapi jangan lupa bedakan nama hewannya.

Diatas ini yang aku bikin yaa. sebelah kiri index.html nya dan yang kanan hasilnya.

Dah kayak gitu aja oke. Semoga kalian yang baca bisa paham sama apa yang aku tulis disini.

You may also like