HTML

Cara Menambahkan Gambar Pada HTML

Cara Menambahkan Gambar Pada HTML

Cara Menambahkan Gambar Pada HTML

Kalian tentu sudah tidak asing lagi dengan istilah website. Biasanya setiap website sering kita jumpai gambar-gambar disetiap halamannya. Fungsi gambar ini, selain untuk mempercantik tampilan juga digunakan untuk memperjelas dari tulisan yang ada pada website tersebut. Nah bagi kalian yang masih belajar HTML, pada kali ini saya akan membagikan tutorial Cara Menambahkan Gambar Pada HTML. Berikut tutorialnya :

Atribut src dalam tag <img>

Sebelumnya kalian harus mengerti dahulu tentang src, Apa itu src? Src adalah singkatan dari source, yaitu atribut yang berisi alamat dari gambar yang akan ditampilkan dalam website. Untuk menampilkan gambar pada HTML, kalian harus menempatkan file HTML dan gambar yang akan kalian tampilkan dalam satu tempat atau folder.

Saya menggunakan contoh gambar Rossi_aragon.jpg yang berada pada satu tempat dengan file HTMLnya. Di bawah ini contoh kode file HTML, bisa kalian copy pada notepad++ kemudian simpan sesuai keinginan kalian, sebagai contoh Rossi_aragon.html.

Maka, apabila kalian buka file html tersebut tampilannya akan seperti ini :

Cara Menambahkan Gambar Pada HTML

Atribut alt

Apakah kalian tahu tag alt? Alt adalah alternative description, yang digunakan untuk menambahkan keterangan dari gambar yang kalian tambahkan tadi. Ini juga berfungsi apabila gambar kalian tidak berhasil dimuat oleh browser, jadi yang tampil hanya keterangan yang ditulis dengan alt tersebut.

Berikut contoh penggunaan atribut alt:

Atribut height dan width

Ini adalah atribut yang berfungsi untuk menentukan ukuran lebar dan tinggi gambar yang sudah kita tambahkan dalam HTML. Yaitu dengan menambahkan height=” “ dan width=” “ pada tag <img> HTML.

Contoh penambahan atribut height dan widht pada tag <img>

Pada contoh height saya atur dengan ukuran 100 dan width dengan ukuran 200, maka hasilnya akan mengecil seperti dibawah ini :

Cara Menambahkan Gambar Pada HTML

Nah itulah tutorial sederhana cara menambahkan gambar pada html. Tutorial untuk kalian yang masih pemula dan ingin belajar HTML. Sedangkan buat kalian yang sudah lama berkecimpung dengan coding, abaikan saja tutorial ini. he he…!

Baca Juga :

Advertisements

Leave a Reply

%d blogger menyukai ini: