Tag image - html img tag

Kode html tag image (tag img) merupakan tag html yang paling sering digunakan dalam aktifitas blogger selain tag div, tag p, tag a, tag span, tag h1 s/d tag h3. Alasan mengapa tag img begitu seing digunakan adalah tingginya frekuensi penggunaan image sebagai salah satu materi posting. Bukan hal aneh karena image adalah salah satu media paling tepat untuk berkomunikasi dengan pembaca selain teks. Frekuensi penggunaan image sebagai salah satu bahan posting dan desain blog mengharuskan blogger untuk mengetahui lebih dalam tentang image, tag img serta beberapa property css yang berkaitan dengan penerbitan image dalam posting. Kode html tag img dalam penggunaan sederhana berisi attribute src dan alt dan width serta height.

• Attribute src berisi URL atau alamat dimana image disimpan (situs/file hosting).
  Contoh URL : https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmu_ZlxJ2EMIUT3O3BPyTVErnluBBQo-jKo69uM6HhRn1bCSM0knUDRdxAaNalulUpDlUcaF4p-gBNfhVNrMQIruLGdHsVGHn4FDyjPdHnHoHc3uhq4puySfSi8bZuAUtik8UAAX878Yk/h300/monyet-makan-pisang-400x300.jpg
• Attribute alt Alternate Text atau teks singkat yang menerangkan image/berkaitan dengan image. Alternate text sangat berguna untuk SEO karena teks inilah yang akan dikenali oleh mesin pencari (google). Sekalipun anda menuliskan ..../monyet-makan-pisang.jpg, teks yang muncul sebagai bagian dari URL ini tak dapat dikenali google sebagai pernyataan tentang image.

Contoh tag img paling sederhana (tanpa alt)

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmu_ZlxJ2EMIUT3O3BPyTVErnluBBQo-jKo69uM6HhRn1bCSM0knUDRdxAaNalulUpDlUcaF4p-gBNfhVNrMQIruLGdHsVGHn4FDyjPdHnHoHc3uhq4puySfSi8bZuAUtik8UAAX878Yk/h300/monyet-makan-pisang-400x300.jpg" width="400" height="300" />

Contoh tag img paling sederhana (menggunakan alt)

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmu_ZlxJ2EMIUT3O3BPyTVErnluBBQo-jKo69uM6HhRn1bCSM0knUDRdxAaNalulUpDlUcaF4p-gBNfhVNrMQIruLGdHsVGHn4FDyjPdHnHoHc3uhq4puySfSi8bZuAUtik8UAAX878Yk/h300/monyet-makan-pisang-400x300.jpg" width="400" height="300" alt="munyuk mau maem pisang" />

Attribute class & id dalam tag image

Memanfaatkan attribute "class" dan "id" menjadi pilihan yang sangat menarik untuk digunakan dalam tag img. Melalui kedua attribute ini beberapa pengaturan dilakukan dalam kode css/syntax css yang terdiri atas beberapa properti css dan nilainya. Penagturan bersifat tetap dan berlaku bagi semua image yang menggunakan "class" atau "id" dimalksud.

Contoh penggunaan attribute id dalam tag img

<style type="text/css">
img#my-id{
    padding:10px;
    background:red;
    border:2px solid darkred;
    margin:10px;
}
</style>

<img id="my-id" src="http://.../images/cat.jpg" width="200" height="240" alt="gambar kucing" />

Contoh penggunaan attribute class dalam tag img

<style type="text/css">
img.my-class{
    padding:10px;
    background:#888;
    float:left;
    margin:0 15px 5px 0;
    border:2px solid #eee;
    border-radius:8px;
    box-shadow:0 0 6px #666;
}
</style>

<img class="my-class" src="http://.../images/cat.jpg" width="200" height="240" alt="gambar kucing" />

Atttribute lain dalam tag img

Masih ada beberapa attribute lain yang dapat disertakan dalam tag img, sekalipun jarang dipergunakan. Beberapa karena bisa langsung dituliskan dalam posting.

1. align attribute align mempunyai value : top, bottom, middle, left, right. Attribute ini sekarang jarang digunakan karena lebih banyak dicover melalui css property.
2. border attribute border lebih sering digunakan untuk reset border shingga hanya dituliskan border="0". Property css border property banyak menggantikan attribute border karena mampu memberikan berbagai effek yang lebih baik dan lengkap.
3. height Masih banyak digunakan karena lebih fleksibel saat digunakan serta lebih praktis. Attribute dituliskan sebagai height="xx". Nilai xx dalam pixel (px).
4. width Sama seperti height, attribute width banyak digunakan untuk melengkapi tag img.
5. longdesc Long Description berfungsi untuk menerangkan image secara detail. Anda harus menyimpan file longdesc dalam file hosting. File biasanya dalam bentuk txt.
6. hspace Amat jarang digunakan. Attribute hspace hampir sama dengan margin yang berfungsi menciptakan jarak dengan elemen di kanan dan kiri object/image (satuan dalam pixel/px).
7. vspace Tak berbeda dengan hspace, attribute vspace juga hampir tak pernah dipergunakan. Attribute ini berfungsi membuat jarak secara vertikal antara image dan elemen di atas dan bawahnya (satuan dalam pixel/px).
8. usemap Attribute usemap digunakan untuk menentukan suatu titik dalam image dengan pengaturan koordinat. Anda dapat menempatkan teks, link, teks link, image melalui attribute usemap. Jika ingin melihat penggunaan usemap, silahkan buka link di bawah ini:
   Contoh pemanfaatan usemap : Penggunaan usemap di tag image
9. ismap Menentukan gambar sebagai peta gambar sisi server. Sangat jarang digunakan blogger.

Menambahkan css property dalam tag img

Dalam beberapa kasus tertentu, menambahkan menambahkan css property dalam attribute style sangat diperlukan. Hal seperti ini biasanya dilakukan karena ada sesuatu yang bersifat khusus harus dilakukan berkaitan dengan penerbitan/pemuatan image.
Contoh menambahkan attribute style dan beberapa property css dalam tag img:

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidkblzuBeVIi8-l_v-LzxZBM-HyifXIiZwpYG0Hxg7n2KoUJbzuOULI73bsglHjVPmQw5lDDr1Yr40Mt_MiAaP3JyCSE36KO5rsEAhueWkonXRmlgYWXWY696biqDnOVkFD74lVPRV6EM/h284/gambar-harimau-03-400x284.jpg" style="width:400px;height:284px;margin:40px;padding:10px;background:#555;border:3px solid #aaa;border-radius:165px 90px 285px 235px;box-shadow:-2px -2px 2px #444,3px 4px 8px #000;" alt="Harimau Sumatera" />

tag img sederhana dg attribute src, width, height, style, border dan alt.

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidkblzuBeVIi8-l_v-LzxZBM-HyifXIiZwpYG0Hxg7n2KoUJbzuOULI73bsglHjVPmQw5lDDr1Yr40Mt_MiAaP3JyCSE36KO5rsEAhueWkonXRmlgYWXWY696biqDnOVkFD74lVPRV6EM/h284/gambar-harimau-03-400x284.jpg" width="400" height="284" border="0" style="margin:20px" alt="Harimau Sumatera" />

tag img sederhana dg attribute src, style dan alt.

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidkblzuBeVIi8-l_v-LzxZBM-HyifXIiZwpYG0Hxg7n2KoUJbzuOULI73bsglHjVPmQw5lDDr1Yr40Mt_MiAaP3JyCSE36KO5rsEAhueWkonXRmlgYWXWY696biqDnOVkFD74lVPRV6EM/h284/gambar-harimau-03-400x284.jpg" style="width:400px;height:284px;border:none;margin:20px;" alt="Harimau Sumatera" />

Di bawah ini telah tersedia berbagai penggunaan attribute dalam tag img. Lakukan berbagai penambahan atau pengurangan property css berikut nilainya untuk memperoleh berbagai bentuk tampilan image.

Please click the button to display. Continue with editing code and click to see the results!

<!DOCTYPE html> <!DOCTYPE html> <html> <title>Tag Image - HTML img tag</title> <head> <style type="text/css"> body{color:#000;font-family:Arial;font-size:14px;padding:0;margin:0 auto;background:#ccc;} h3{font-size:18px;margin:20px;font-weight:400;} </style> </head> <body> <h3>tag img dg attribute width, height, alt dg menambah margin</h3> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidkblzuBeVIi8-l_v-LzxZBM-HyifXIiZwpYG0Hxg7n2KoUJbzuOULI73bsglHjVPmQw5lDDr1Yr40Mt_MiAaP3JyCSE36KO5rsEAhueWkonXRmlgYWXWY696biqDnOVkFD74lVPRV6EM/h284/gambar-harimau-03-400x284.jpg" border="0" width="400" height="284" style="margin:20px;" alt="Harimau Sumatera" /> <h3>tag img sederhana dg attribute style</h3> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidkblzuBeVIi8-l_v-LzxZBM-HyifXIiZwpYG0Hxg7n2KoUJbzuOULI73bsglHjVPmQw5lDDr1Yr40Mt_MiAaP3JyCSE36KO5rsEAhueWkonXRmlgYWXWY696biqDnOVkFD74lVPRV6EM/h284/gambar-harimau-03-400x284.jpg" border="0" style="width:400px;height=284px;margin:20px;" alt="Harimau Sumatera" /> <h3>tag img dg attribute width, height dan style dilengkapi property css komplex</h3> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidkblzuBeVIi8-l_v-LzxZBM-HyifXIiZwpYG0Hxg7n2KoUJbzuOULI73bsglHjVPmQw5lDDr1Yr40Mt_MiAaP3JyCSE36KO5rsEAhueWkonXRmlgYWXWY696biqDnOVkFD74lVPRV6EM/h284/gambar-harimau-03-400x284.jpg" height="284" width="400" style="margin:40px;padding:10px;background:#555;border:3px solid #aaa;border-radius:165px 90px 285px 235px;box-shadow:-2px -2px 2px #444,3px 4px 8px #000;" alt="Harimau Sumatera" /> <h3>tag img style dilengkapi property css komplex</h3> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidkblzuBeVIi8-l_v-LzxZBM-HyifXIiZwpYG0Hxg7n2KoUJbzuOULI73bsglHjVPmQw5lDDr1Yr40Mt_MiAaP3JyCSE36KO5rsEAhueWkonXRmlgYWXWY696biqDnOVkFD74lVPRV6EM/h284/gambar-harimau-03-400x284.jpg" style="width:400px;height:284px;margin:40px;padding:10px;background:#555;border:3px solid #aaa;border-radius:165px 90px 285px 235px;box-shadow:-2px -2px 2px #444,3px 4px 8px #000;" alt="Harimau Sumatera" /> <h3>Menampilkan image dg bantuan kode css dalam tag style dan selector "class"</h3> <style type="text/css"> img.radius{ width:400px; height:284px; margin:40px; padding:10px; background:#555; border:3px solid #aaa; border-radius:165px 90px 285px 235px; box-shadow:-2px -2px 2px #444,3px 4px 8px #000; } </style> <img class="radius" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidkblzuBeVIi8-l_v-LzxZBM-HyifXIiZwpYG0Hxg7n2KoUJbzuOULI73bsglHjVPmQw5lDDr1Yr40Mt_MiAaP3JyCSE36KO5rsEAhueWkonXRmlgYWXWY696biqDnOVkFD74lVPRV6EM/h284/gambar-harimau-03-400x284.jpg" alt="Harimau Sumatera" /> </body> </html>

Post : Tag image - html img tag
by : gubhugreyot - gubhugcss
my Blogs : Demo Tutorial Blogger-1 | Demo Tutorial Blogger-2 | Best Blogger Hacks | Best Blogger Menus | gubhuggreyot-b'detik | gubhugreyot