Menampilkan Gambar pada HTML

Baca Juga

Suatu halaman web akan terlihat kaku, terkesan formal, dan sedikit menjemukan bila tidak disertai dengan gambar. Kita bisa lihat saat ini, halaman web yang ada di internet, hampir semuanya memasukkan unsur gambar, animasi, bahkan audio dan video untuk menarik dan membuat tercengang para pengunjungnya

Cara yang diperlukan untuk memasukkan atau menambahakan gambar ke dalam suatu halaman web sangatlah mudah. HTML telah menyediakan tag khusus untuk keperluan ini, yaitu <img>. Tag ini merupakan tag tunggal atau tidak memiliki pasangan. Atribut terpenting dari tag <img> adalah SRC (source atau sumber), yang berisi file gambar yang akan ditampilkan ke dalam halaman web

Percobaan (catatan : file gambar harus satu folder dengan file kodingan dan type gambarnya harus benar misalnya .jpg .jpeg .png dll)
Buatlah halaman web sebagai berikut (bentuk umum tag img)

Simpan kode HTML diatas dengan nama img1.html lalu buka hasilnya dengan menggunakan web browser. Apabila penulisannya benar maka akan tampil halaman web sebagai berikut

Buatlah halaman web sebagai berikut (memasukkan gambar dari folder yang berbeda)

Simpan kode HTML diatas dengan nama img2.html lalu buka hasilnya dengan menggunakan web browser. Apabila penulisannya benar maka akan tampil halaman web sebagai berikut

Buatlah halaman web sebagai berikut (Menggabung gambar dan teks)

Simpan kode HTML diatas dengan nama img3.html lalu buka hasilnya dengan menggunakan web browser. Apabila penulisannya benar maka akan tampil halaman web sebagai berikut

Buatlah halaman web sebagai berikut (mengatur ukuran gambar)

Simpan kode HTML diatas dengan nama img4.html lalu buka hasilnya dengan menggunakan web browser. Apabila penulisannya benar maka akan tampil halaman web sebagai berikut

Buatlah halaman web sebagai berikut (memberi keterangan pada gambar)

Simpan kode HTML diatas dengan nama img5.html lalu buka hasilnya dengan menggunakan web browser. Apabila penulisannya benar maka akan tampil halaman web sebagai berikut

Buatlah halaman web sebagai berikut (memberi keterangan pada gambar yang gagal di load)

Simpan kode HTML diatas dengan nama img6.html lalu buka hasilnya dengan menggunakan web browser. Apabila penulisannya benar maka akan tampil halaman web sebagai berikut