10. Menambahkan Gambar Pada HTML

Sebuah halaman website HTML tanpa gambar untuk standart gak keren guys. Pada tutorial belajar HTML saat ini cara menambahkan gambar di HTML ini kita akan mempelajari cara penggunaan tag image. Tag Image digunakan untuk menampilkan gambar kedalam halaman web, menggunakan <img>.

Atribut src dalam tag <img>

Atribut src adalah singkatan dari source, merupakan atribut yang berisi alamat dari gambar yang akan ditampilkan.Alamat ini bisa di ambil dari google (external) atau kita juga bisa menggunakan gambar yang kita punya kita bisa menaruhnya satu folder,

Kali ini saya sudah membuat membuat folder dengan nama latihan7 di dalamnya terdapat file img.html disini saya sudah membuat struktur html seperti yang di web-web sebelumnya

Untuk contoh kode HTML tentang image ini, sediakan sebuah gambar yang akan digunakan sebagai tampilan, dan tempatkan gambar tersebut ke dalam satu folder dengan halaman contoh. Gambar dapat berupa JPEG, PNG, maupun GIF.

Pada contoh dibawah ini saya menggunakan sebuah gambar coding.jpeg yang berada dalam satu folder dengan latihan7 saat ini. 

Contoh penggunaan tag <img>:

Kalau kita lihat hasilnya di browser klik kanan open in browser,

Dan kalian harus Hati-hati dengan penulisan atribut src, sering gambar gagal tampil karena kita salah ketik atribut src menjadi “scr”.

Atribut alt dalam tag <img>

Tag image juga memiliki atribut penting lainnya, yaitu alt

Atribut alt adalah singkatan dari alternative description, dimana alt digunakan untuk keterangan dari gambar jika gambar tersebut gagal ditampilkan oleh browser. Atau jika web broser telah disetting untuk tidak menampilkan gambar.

Contoh penggunaan atribut alt pada tag <img>: 

Atribut alt juga berperan penting untuk mesin pencari seperti Google. Karena cara kerja google yang meng-index seluruh situs dengan memproses tulisan yang ada, Google ‘tidak mengerti’ isi dari gambar tanpa bantuan deskripsi yang ditulis dalam atribut alt. Hal ini menambah pentingnya menambahkan atribut alt.

Atribut width dan height dalam tag <img>

Atribut lainnya membolehkan kita untuk menentukan besar dari gambar yang ditampilkan, yaitu width dan height.

Contoh penggunaan atribut width dan height pada tag <img>:

Kalau kita lihat hasilnya di browser,kembali ke browser lalu refresh,

Pada penggunaan tag image diatas, gambar terlihat tidak proporsional, hal ini karena penggunaan 

atribut width dan height ‘memaksa‘ gambar untuk tampil dengan nilai yang kita tetapkan.

Untuk mempertahankan proporsi gambar, namun tetap membuat gambar menjadi besar/kecil, cantumkan hanya salah satu atribut saja (width saja atau height saja, namun tidak keduanya). Misalkan jika kita menetapkan atribut width=300px (tanpa mencantumkan height), maka web browser akan menampilkan gambar dengan lebar 300px, dan menghitung secara otomatis tinggi gambar agar gambar tetap proporsional.

Jadi itu adalah cara menambahkan gambar pada html kalian bisa coba-coba kalian bisa bereksperimen mengganti dengan gambar yang kamu inginkan.

Sekian bersama saya lumbungweb disini kita bisa belajar coding tak perlu khawatir sedikit-sedikit yang penting bisa buat website. Kalau kalian ingin mempunyai web tapi tidak tahu ngoding tak perlu susah kalian bisa kunjungi Sepsialis Web

~♧Semoga membantu kalian semua :) ♧~

10. Menambahkan Gambar Pada HTML 2020-01-28T07:22:00-08:00 Rating: 4.5 Diposkan Oleh: Anonim