Diskon kelas baru hingga 25%! Masukkan kupon "lebihcepat" di kelas ini

X
Logo Koala Skodev mengetik

Skodev

Belajar coding dalam bahasa Indonesia

CARA MENAMBAHKAN GAMBAR DI HTML

Artikel ini menjelaskan langkah-langkah mudah cara menambahkan gambar di HTML. Mulai dari memilih gambar sampai menyesuaikan ukurannya sesuai kebutuhan.

Daftar Isi:

Memilih Gambar
Menambahkan Gambar
Kesimpulan

Salah satu fitur yang membuat sebuah website lebih menarik adalah penggunaan seni visual seperti gambar. Gambar dapat menambah estetika dan nuansa ke dalam sebuah website. Dalam bahasa pemrograman HTML, ada cara sederhana untuk mencantumkan gambar. Berikut ini cara menambahkan gambar di HTML.

Memilih Gambar

Sebelum kamu mulai, kamu perlu memiliki gambar yang siap untuk digunakan. Kamu bisa menggunakan gambar pribadi atau dari situs penyedia gambar gratis seperti Unsplash, Pexels, dan lainnya. Pastikan gambar berada di dalam folder yang sama dengan file HTML, atau jika berbeda folder, kamu harus mengetahui alamat relatif atau absolut gambarnya.

Menambahkan Gambar

Untuk menambahkan gambar di HTML, kamu perlu menggunakan tag ‘img’. Tag ini tidak memiliki tag penutup, jadi kamu perlu memasukkan semua informasi di dalam satu tag saja. Berikut adalah contoh penggunaan tag ‘img’:

<img src="alamatgambar.jpg" alt="deskripsi gambar">

Ganti ‘alamatgambar.jpg’ dengan alamat atau nama file gambar kamu. Bagian ‘alt’ adalah deskripsi gambar yang akan ditampilkan jika gambar tidak muncul atau tidak bisa dimuat.

Menentukan Ukuran Gambar

Jika kamu ingin menentukan ukuran gambar, kamu bisa menambahkan atribut ‘width’ dan ‘height’ dalam tag ‘img’. Nilai width dan height diukur dalam pixel. Contohnya seperti ini:

<img src="alamatgambar.jpg" alt="deskripsi gambar" width="500" height="300">

Atribut ‘width’ menentukan lebar gambar dan ‘height’ menentukan tinggi gambar. Kamu bisa menyesuaikan angka-angka ini sesuai dengan kebutuhan website kamu.

Menentukan Tipe Gambar

Kamu juga bisa mendefinisikan tipe gambar menggunakan atribut ‘type’. Atribut ini sangat berguna jika gambar tersebut tidak tersedia atau tidak didukung oleh browser. Contohnya seperti ini:

<img src="alamatgambar.jpg" alt="deskripsi gambar" type="image/jpeg">

Kesimpulan

Menambahkan gambar ke dalam website bisa dilakukan dengan sangat mudah menggunakan HTML. Gambar dapat meningkatkan estetika dan kualitas visual website, membuatnya lebih menarik bagi pengunjung. Selamat mencoba!

cover kelas Kelas membuat website dengan HTML dan CSS
Kelas membuat website dengan HTML dan CSS

belajar membuat website kamu dari nol. Cocok untuk pemula

Lihat Kelas

Daftar newsletter skodev masukkan emailmu untuk dapat informasi menarik dari dunia koding