Responsive Advertisement

Memasukkan Image Pada HTML

judul

Pada pembahasan kali ini adalah cara memasukkan gambar ke dalam HTML. Tetapi kalian dapat mencoba materi Cara Membuat Paragraf HTML untuk mengetahui cara membuat susunan paragraf dan Memilih Text Editor HTML untuk mengetahui text editor yang cocok untuk membuat kodingan

Memasukkan gambar ke dalam HTML itu sangat mudah. Seperti pembahasan sebelumnya, ada tag dan atribut yang saling membantu dalam pembuatan. Inilah kegunaan tag <img> untuk definisi gambar sedangkan atribut <src> untuk mencari gambar tersebut terletak dimana. 

Namun, untuk hal memunculkan gambar, kamu harus benar-benar meletakkan gambar dengan nama dan pada folder yang sama dengan kodingan atau tidak didalam folder yang sama. Kamu juga bisa mengatur kembali ukuran gambar dengan memakai atribut width untuk lebar dan height untuk tinggi. 

Contoh kodingan dapat kamu lihat dibawah ini.

See the Pen Image1_materi HTML by lintangzakti (@zakti13) on CodePen.


kesatriakoding.blogspot

Kodingan diatas adalah contoh cara menampilkan gambar dengan 2 metode yaitu memanggil gambar dari alamat website dan memanggil gambar dalam folder yang sama. Perlu diketahui, penggunaan atribut alt hanya untuk definisi nama gambar tersebut dan tidak terlalu wajib digunakan.

Selanjutnya, kamu dapat memindahkan gambar ke kiri maupun ke kanan. Pemakaian tersebut menggunakan kodingan CSS float yaitu untuk memindahkan posisi gambar. 

Contoh kodingan dapat kamu lihat dibawah ini.

See the Pen Image2_materi HTML by lintangzakti (@zakti13) on CodePen.

kesatriakoding.blogspot

Jika kalian ingin mencoba, silahkan kalian masukkan kodingan tersebut ke dalam Text Editor lalu Save As dengan format HTML dan nama yang kalian suka. Klik dua kali untuk membuka File tersebut dan lihat hasilnya.