Tutorial Menambahkan Gambar di HTML (tag image)

Atribut src dalam tag img 

Atribut src yaitu singkatan dari source, adalah atribut yang diisi alamat dari gambar yang juga akan dipertunjukkan. Alamat ini dapat relatif atau absolute. (ketidaksamaan mengenai alamat relatif serta alamat absolute sudah kita ulas pada Belajar HTML : Langkah Buat link di HTML).

Untuk contoh kode HTML mengenai image ini, siapkan satu gambar yang juga akan dipakai jadi penampilan, serta letakkan gambar itu kedalam satu folder dengan halaman contoh. Gambar bisa berbentuk JPEG, PNG, ataupun GIF.

Pada contoh berikut ini saya memakai satu gambar koala. jpg yang ada dalam satu folder dengan halaman HTML sekarang ini. Savelah jadi img. html

Contoh pemakaian tag img :

! DOCTYPE html
html
head
titlePenggunaan Tag Image/title
/head
body
h1Belajar Tag Gambar/h1
img src= " koala. jpg " /
/body
/html
Cermati kalau tag img tidak mempunyai elemen, hingga segera ditutup dengan/



Langkah Memberikan Gambar di HTML

Hati-hati dengan penulisan atribut src, seringkali gambar tidak berhasil tampak karna kita salah tulis atribut src jadi “scr”.
Atribut alt dalam tag img
Tag image juga mempunyai atribut perlu yang lain, yakni alt

Atribut alt yaitu singkatan dari alternative description, di mana alt dipakai untuk info dari gambar bila gambar itu tidak berhasil dipertunjukkan oleh browser. Atau bila situs broser sudah disetting tidak untuk menghadirkan gambar.

Contoh pemakaian atribut alt pada tag img :

! DOCTYPE html
html
head
titlePenggunaan Tag Image/title
/head
body
h1Belajar Tag Gambar/h1
img alt= " gambar koala " src= " koala. jpg "/
/body
/html

Atribut alt juga bertindak perlu untuk mesin pencari seperti Google. Karna langkah kerja google yang meng-index semua website dengan mengolah tulisan yang ada, Google ‘tidak mengerti’ isi dari gambar tanpa ada pertolongan gambaran yang ditulis dalam atribut alt. Hal semacam ini menaikkan perlunya memberikan atribut alt.
Atribut width serta height dalam tag img
Atribut yang lain membolehkan kita untuk memastikan besar dari gambar yang dipertunjukkan, yakni width serta height.

Contoh pemakaian atribut width serta height pada tag img :

! DOCTYPE html
html
head
titlePenggunaan Tag Image/title
/head
body
h1Belajar Tag Gambar/h1
img alt= " Gambar Koala " src= " koala. jpg " height= " 200 " width= " 100 " /
/body
/html
Langkah Memberikan Gambar di HTML Width

Pada pemakaian tag image di atas, gambar tampak tidak seimbang, hal semacam ini karna pemakaian atribut width serta height ‘memaksa‘ gambar untuk tampak dengan nilai yang kita tentukan.

Untuk menjaga pembagian gambar, namun masih tetap buat gambar jadi besar/kecil, cantumkan cuma satu diantara atribut saja (width saja atau height saja, tetapi tidak keduanya). Umpamanya bila kita mengambil keputusan atribut width=300px (tanpa ada memberikan height), jadi situs browser juga akan menghadirkan gambar dengan lebar 300px, serta mengkalkulasi dengan automatis tinggi gambar supaya gambar tetaplah seimbang.