Cara Menambahkan Gambar di HTML

cara menambahkan gambar di html

Halo sobat Belajar Koding , sebelum nya kita sudah membahas ya tentang tag, struktur dan atribut di html. Tutorial selanjutnya kita akan membahas cara menambahkan gambar di html. Cara nya sangat lah mudah, pertama yang kita butuhkan adalah image atau gambar yang akan kita masukkan ke dalam kode html.

Kedua kita buat 1 file html terlebih dahulu. Disini saya buat nama nya latihan.html. Didalam direktori yang sama, saya mempunyai 1 file png yang nanti nya akan dipanggil ke dalam html. Kurang lebih seperti ini :

cara menambahkan gambar di html

Buka file latihan.html nya dengan menggunakan editor kalian. Kemudian ketikkan kodingan seperti ini :

Perhatikan tag <img>, didalam nya terdapat atribut src dengan nilai atribut nya adalah nama file dari gambar yang akan kita panggil. Apabila nama file yang berada di direktori tidak sesuai dengan yang kita sebutkan didalam nilai atribut src maka gambar tidak akan muncul.

Untuk melihat hasil kodingan tersebut tinggal klik kanan pada file latihan.html kemudian open with Google Chrome (karena saya pakai nya Google Chrome). Berikut hasil output dari kodingan diatas :

cara menambahkan gambar di html

Untuk mengatur panjang dan lebar gambar, kita cukup menambahkan atribut width dan height didalam tag <img> seperti kodingan di bawah ini :

Atribut width untuk mengatur panjang gambar, sedangkan atribut height untuk mengatur tinggi gambar.

Cara Penulisan di Lokasi File

Contoh diatas gambar atau image berada didalam satu direktori, lalu bagaimana cara kita memanggil file gambar yang berada di lokasi yang berbeda ?

Sekarang kita buat satu folder nama nya img kemudian kita pindahkan gambar yang tadi ke dalam folder img menjadi seperti berikut :

cara penulisan lokasi di html
gambar 1.1
cara penulisan lokasi di html
gambar 1.2

Bisa dilihat, gambar 1.1 kita sudah membuat folder nama nya img, kemudian di gambar 1.2 kita bisa lihat gambar nya berada didalam folder img yang tadi kita buat.

Dengan kondisi seperti itu kita harus menambahkan nama folder yang tadi kita buat diikuti dengan tanda slash (/) dan nama file gambar yang akan dimuat, kurang lebih seperti ini :

Contoh lain kalau misalkan file latihan.html nya juga berada di dalam folder, seperti berikut :

cara penulisan lokasi file di html
gambar 2.1
cara penulisan lokasi file di html
gambar 2.2

Karena file gambar nya diluar folder source, maka kita memakai “..” gunanya untuk keluar dari folder source. Kodingan nya pun seperti ini :

Sampai disini kita sudah bisa menambahkan gambar ke dalam kode html kita menggunakan tag <img>. Mungkin cukup untuk tutorial cara menambahkan gambar di html. Kalo ada yang kurang dimengerti bisa di tanyakan di kolom komentar. Terimakasih ^_^ #salamKoding.

2 thoughts on “Cara Menambahkan Gambar di HTML

Leave a Reply

Your email address will not be published. Required fields are marked *