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

X
Logo Koala Skodev mengetik

Skodev

Belajar coding dalam bahasa Indonesia

CARA MENAMPILKAN GAMBAR DI HTML

Artikel ini akan membantu kamu memahami langkah-langkah mudah dalam menampilkan gambar di HTML. Sobat akan mempelajari pengetahuan dasar dan metode sederhana untuk memasukkan gambar ke dalam halaman web.

Berbicara tentang membuat halaman web menggunakan HTML, kamu pasti akan merasa bahwa halaman tersebut sangat hambar jika hanya berisi teks. Untuk mempercantik tampilan halaman web, akan sangat efektif jika kamu menambahkan beberapa gambar. Dalam artikel ini, kamu akan diajarkan bagaimana cara menampilkan gambar di HTML dengan mudah.

HTML memiliki sebuah tag spesial untuk menampilkan gambar yaitu < img >. Dengan tag ini, kamu bisa memasukkan gambar ke dalam halaman web sesuai yang kamu inginkan.

Langkah-langkah menampilkan gambar di HTML

Berikut adalah langkah-langkah yang bisa kamu ikuti untuk menampilkan gambar di HTML:

1. Pilih gambar yang ingin ditampilkan

Langkah pertama yang harus kamu lakukan tentu saja adalah memilih gambar yang ingin ditampilkan di halaman web kamu. Kamu bisa memilih gambar apa saja. Namun, pastikan gambar tersebut sudah diunggah ke server tempat kamu memesan hosting.

2. Menggunakan tag < img >

Setelah gambar dipilih dan sudah di server, langkah selanjutnya adalah menggunakan tag < img > untuk menampilkan gambar tersebut.

<img src="url-gambar">

Dalam tag tersebut, src adalah atribut yang berfungsi untuk menunjukkan sumber atau URL dari gambar yang akan ditampilkan. Ganti keterangan url-gambar dengan link atau lokasi dimana gambar tersebut tersimpan.

3. Menentukan ukuran gambar

Jika kamu menambahkan atribut width dan height, maka gambar akan ditampilkan sesuai dengan ukuran yang telah ditentukan.

<img src="url-gambar" width="500" height="400">

Dalam contoh di atas, gambar akan ditampilkan dengan lebar (width) 500 pixel dan tinggi (height) 400 pixel.

4. Menambahkan atribut alt

Atribut alt berfungsi untuk menyediakan deskripsi alternatif untuk gambar jika gambar gagal dimuat atau tidak ditemukan.

<img src="url-gambar" alt="deskripsi gambar">

Dengan demikian, jika gambar gagal dimuat oleh browser, maka akan ditampilkan teks yang ada di atribut alt sebagai pengganti.

Demikianlah cara sederhana untuk menampilkan gambar di HTML. Tentu saja masih banyak lagi teknik dan trik yang bisa kamu gunakan, namun dengan memahami langkah-langkah dasar ini, kamu sudah bisa mempercantik tampilan halaman web kamu dengan gambar-gambar menarik. 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