Fungsi tag IMG html serta atribut-atributnya

tag img adalah satu dari beberapa tag html, fungsi tag img ini untuk menampilkan gambar pada document web. contoh penulisan tag image sperti ini

Mereka yang berjiwa lemah tak akan mampu memberi seuntai maaf tulus.Pemaaf sejati hanya melekat bagi mereka yang berjiwa tangguh. Mohandas Gandhi

tag img adalah satu dari beberapa tag html, fungsi tag img ini untuk menampilkan gambar pada document web. contoh penulisan tag image sperti ini

Last Modif at July 8th, 2011

tag img adalah satu dari beberapa tag html, fungsi tag img ini untuk menampilkan gambar pada document web. contoh penulisan tag image sperti ini

<img src="url-lokasi-gambar-yang-akan-ditampilkan"/>

sedangkan atribut tag img antara lain!
berikut beberapa aribut yang bisa ditambahkan ke dalam tag img

  • src
  • border
  • alt
  • width
  • height
  • style
  • align
  • selector class atau id

berikut rincian masing-masing atribtut!

<img src="value"

setiap tag img harus disertai dengan atribut src, karena src ini fungsiya untuk memanggil gambar yang ditampilkan, sedangkan valuenya adalah url gambar

contoh penulisan

<img src="http://www.indaam/wp-content/uploads/cursor/12cursor.gif"/>

jadinya seperti ini

<img width="value"

fungsi atribut width ini adalah untuk melebarkan gambar, sedangkan valuenya adalah angka dalam px atau %

contoh penulisan

<img src="http://www.indaam/wp-content/uploads/cursor/12cursor.gif" width="200px"/>

jadinya seperti ini

<img height="value"

fungsi height untuk melebarkan secara vertikal atau tinggi, sedangkan valuenya adalah angka dalam px atau %

contoh penulisan

<img src="http://www.indaam/wp-content/uploads/cursor/12cursor.gif" height="500px"/>

jadinya seperti ini

<img alt="vealue"

fungsi atribut alt adalah untuk memberikan judul pada gambar, valuenya adalah text

contoh penulisan

<img src="http://www.indaam/wp-content/uploads/cursor/12cursor.gif" alt="keterangan gambar ini adalah cursor"/>

jadinya seperti ini
keterangan gambar ini adalah cursor

<img border="value"

fungsi atribut border untuk memberi garis pinggir pada gambar, sedangkan valuenya adalah angka

contoh penulisan

<img src="http://www.indaam/wp-content/uploads/cursor/12cursor.gif" border="5" alt="gambar cursor"/>

jadinya seperti ini
gambar cursor
garisnya ngga tampil karena pada style css image web saya adalah border:none;

<img style="value"

fungsi atribut style adalah untuk mambahkan style css kedalam gambar, sedangkan valuenya adalah style css

contoh

<img style="border-bottom:10px dotted blue; width:300px;" src="http://www.indaam/wp-content/uploads/cursor/12cursor.gif" border="5px" alt="gambar cursor"/>

jadinya seperti ini

gambar cursor

<img selector id-atau-class="value"

sobat juga bisa menambahkan selector id dan class kedalam tag img, namun sebelumya sobat wajib manambahkan style css kedalam style web sobat, sedangkan valuenya adalah nama id maupun class yang sudah kita buat sebelumnya

contoh penulisan

<img class="alignleft" style="border-bottom:4px dotted blue; width:80px;" src="http://www.indaam/wp-content/uploads/cursor/12cursor.gif" alt="gambar cursor"/>

jadinya seperti ini
gambar cursor

<img align="value"

fungsi align ini adalah untuk mengatur posisi gambar! valuenya right, center, left.

contoh penulisan

<img align="left" style="border-bottom:4px dotted blue; width:50px;" src="http://www.indaam/wp-content/uploads/cursor/12cursor.gif" alt="gambar cursor"/>

jadinya seperti ini
gambar cursor
agar perbedaanya jelas!
copy markup dibawah

<html>
<head>
<title>tag img html</title>
</head>
<body>
<img src="http://www.indaam.net/wp-content/uploads/cursor/1cursor.gif" alt="" /><br/>
<img src="http://www.indaam.net/wp-content/uploads/cursor/2cursor.gif" alt="" width="200px" /><br/>
<img src="http://www.indaam.net/wp-content/uploads/cursor/3cursor.gif" alt="" height="500px" /><br/>
<img src="http://www.indaam.net/wp-content/uploads/cursor/4cursor.gif" alt="keterangan gambar ini adalah cursor" /><br/>
<img src="http://www.indaam.net/wp-content/uploads/cursor/5cursor.gif" border="5" alt="gambar cursor" /><br/>
<img style="border-bottom: 10px dotted blue; width: 300px;" src="http://www.indaam.net/wp-content/uploads/cursor/6cursor.gif" border="5px" alt="gambar cursor" /><br/>
<img style="border-bottom: 4px dotted blue; width: 80px;" src="http://www.indaam.net/wp-content/uploads/cursor/7cursor.gif" alt="gambar cursor" /><br/>
<img style="border-bottom: 4px dotted blue; width: 50px;" src="http://www.indaam.net/wp-content/uploads/cursor/8cursor.gif" alt="gambar cursor" align="left" /><br/>
<!--// salam
www.indaam.net //-->
</body>
</html>

  • lalu
  • buka notepad
  • paste, kemudian
  • save as(pilih all types)
  • dengan nama tag_img.htm
  • lalu jalankan(double click) atau open with(ff, ie, opera)
  • yang berwarna merah adalah url-lokasi-gambar, dapat(bisa) diganti dengan url-lain dengan ekstensi jpg, gif, png, dll!

semoga bermanfaat

Indam

A geek, frontend developer. Like you, coding & experiment.
#web #design #ui #ux #standard #dreamer
#welding #interisti #beer #coffee

3 thoughts on “Fungsi tag IMG html serta atribut-atributnya”

  1. Dikma says:

    ulasannya luar biasa, but blognya terlalu semarak mas, :lol:

  2. wouw, menggunakan jasa desainer dari salsabela developer ya mas,

    oia mas saya hanya ingin memberikansaran saja, mungkin dalam kombinasi warnanya perlu di edit lagi, saya terlalu silau dan bikin capek mata mas

    tapi secara interface dan topografinya udah ok

    makasih atas infonya mas
    kunjungan pertama saya disini

  3. Puat Zen says:

    Tanks banyak buat Master Indaam tutorial yang diberikan sangat gampang dimengerti plus begitu bermammfaat buat kami, selamat berkarya Indonesia butuh orang seperti anda.Jambi berpesan…!.

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Disclaimer, FAQ & License

Hello Gaes, untuk tujuan apapun semua content text di blog ini dapat di copas, tanpa harus menulis sumbernya. Namun content yang berupa gambar--harus Anda periksa kembali lisensinya.

Adapun(mungkin) sebagian content blog ini sudah kadaluarsa atau sudah tidak relevan, contoh :'Theme default WordPress 3+ adalah Twentyten 'apakah selamanya Twentyten?' ngga kan? Indam selaku pengelolah berharap melaporkan jika menemukan content basi yang mungkin dapat menimbulkan salah persepsi tentang content dan konsep itu sendiri. Oia, karena blog ini bersifat pribadi dan bukan untuk komersil, mungkin anda juga akan menemukan tulisan tentang aku dan hal-hal rancu yang sama sekali ngga ada hubungan dengan web dan blog-blogan. Perlu dicatat: Indam selaku pengelolah tidak bertanggung jawab atas kerugian materi, waktu, tenaga, pikiran yang mungkin ditimbulkan dari sini. So, pandai-pandai yah dalam memilah informasi. Thanks for reading.

Quote

Ketika Anda melihat orang lain mengangkat dirinya dengan cara merendahkan orang lain, sebenarnya orang itu lebih rendah dari mereka yang direndahkan. Phidias--greece filsuf

+
-