Pada tutorial HTML lengkap 11 telah dibahas tentang pembuatan tabel di dokumen html. Nah tutorial kali ini membahas kode-kode dan tag-tag HTML untuk pemasangan gambar (image) di dokumen HTML. Artikel sejenis tentang optimasi pemasangan gambar dalam ngeblog agar SEO friendly sudah pernah saya bahas dalam artikel Mengoptimalkan pemasangan gambar di blog. Bedanya dalam artikel ini akan membahas lebih mendasar pada HTML secara umum dalam pemasangan gambar.

Format Image

  Ada banyak format image, tapi ada tiga jenis format yang paling sering digunakan dalam dokumen HTML yaitu:  

 
• GIF (Graphical Interchange Format) (.GIF)
 
•     JPEG (Joint Photographic Expert Image) (.JPG)
 
•     PNG (Portable Network Graphics) (.PNG)
 

Insert Image ke Dokumen

Tag IMG di gunakan untuk menginsertkan image ke document HTML. Syntax nya:
<IMG SRC="URL" />
URL bisa diisi dengan alamat absolute maupun alamat relatif (untuk penjelasan alamat silahkan baca artikel tutorial HTML lengkap 10). Untuk ngeblog di blogspot, maka biasanya menggunakan alamat absolute. Contoh memasukkan gambar logo tutorial HTML lengkap seperti kode dibawah ini:
<img src="http://ateon.fs.googlepages.com/Tutorial_HTML_Lengkap.gif" /> hasil gambarnya seperti dibawah ini:



Saya rasa semua sudah tahu masalah ini, saya akan tuliskan atribute berkaitan dengan align untuk image, lihat tabel dibawah ini:

                                           

Attribute	Value	Description
Align	top | bottom | middle	digunakan untuk menentukan posisi image terhadap text
	center | left | right	untuk menentukan posisi image di dokumen

Silahkan mencoba sendiri untuk masing-masing attribute diatas.

Image Map

  Anda bisa gunakan image yang ada pada website untuk membuat image map. Image map yaitu suatu area pada image yang bisa kita beri hyperlink, area ini biasanya disebut hot spots. Coordinat dari hotspot ditentukan menggunakan bidang geometry seperti rectangle, polygon dan lainya. 

                                                           

Shape	Description
Default	Semua area image
Rect	Area kotak tertentu
Circle	Area lingkaran tertentu
Poly	Area polygon

Koordinat dari object relatif terhadap pojok kiri atas image seperti dibawah ini:

                                               

Coordinate	Value
Rect	Left-x, top-y, right-x, bottom-y
Circle	CENTER-X, CENTER-Y, RADIUS
Poly	X1, Y1, X2, Y2, … XN, YN

Agar lebih jelas saya contohkan pemakaian untuk shape rect pada gambar dibawah ini:

Perhatikan gambar diatas, coba anda klik dibagian logo, kemudian anda klik pada tulisan Tutorial HTML Lengkap, terakhir coba  klik pada tulisan ateonsoft.com. Walaupun 1 gambar tapi bisa digunakan untuk link-link yang berbeda. Ini bisa digunakan untuk memberikan link pada sebuah gambar yang memiliki bagian-bagian gambar yang unik. Atau jika anda memiliki gambar kotak menu, anda bisa memberi link pada masing-masing kotak. Kode untuk membuat gambar diatas seperti dibawah ini:
<img src="http://ateon.fs.googlepages.com/Tutorial_HTML_Lengkap.gif" border="0" width="216" height="53" usemap="#albri" />
<map name="albri">
<area shape="rect" coords="0,0,43,43" href="http://www.ateonsoft.com/search" target="_blank" alt="kotak link">
<area shape="rect" coords="47,30,159,44" href="http://www.ateonsoft.com/" target="_blank" alt="kotak link">
<area shape="rect" coords="47,6,216,25" href="http://www.ateonsoft.com/search/label/HTML" target="_blank" alt="kotak link">
</map>

Contoh penggunaan shape circle pada menu gambar seperti dibawah ini:

Coba anda klik masing-masing lingkaran menu diatas, meski satu gambar tapi bisa menampung banyak link, dan bidang link-nya juga berbentuk lingkaran, coba saja anda sorot diluar area lingkaran memutar, tidak ada link-nya 'kan? Dengan design gambar yang bagus maka menu akan semakin bagus. Gambar diatas jelek jadi kurang bagus hehe..

Kode untuk membuat menu diatas seperti dibawah ini:
  <img src="http://ateon.fs.googlepages.com/MenuGambarMap.png" border="0" width="400" height="200" usemap="#albri2" />
<map name="albri2">
<area shape="circle" coords="58,59,36" href="http://www.ateonsoft.com/2008/11/jurus-seo-bangkit-dari-kubur.html" target="_blank" alt="jurus SEO bangkit dari kubur">
<area shape="circle" coords="151,59,36" href="http://www.ateonsoft.com/2008/10/pasang-widget-google-translate.html" target="_blank" alt="Widget google translate">
<area shape="circle" coords="247,59,36" href="http://www.ateonsoft.com/2008/10/pasang-widget-top-artikel.html" target="_blank" alt="Widget Top Artikel">
<area shape="circle" coords="339,59,36" href="http://www.ateonsoft.com/2008/10/pasang-widget-top-komentator.html" target="_blank" alt="Widget Top Comenters">
<area shape="rect" coords="262,174,374,188" href="http://www.ateonsoft.com/" target="_blank" alt="ateonsoft.com">
</map>

Membuat menu seperti diatas tentu sulit tanpa sebuah tools. Saya membuatnya menggunakan adobe photoshop untuk membuat design gambarnya dan menggunakan macromedia dreamweaver untuk membuat kode. Pembuatan kode akan menjadi mudah jika dalam mode visual. Tampilan pembuatan kode dalam mode visual di macromedia dreamweaver seperti dibawah ini:

Sampai sini dulu tutorialnya, disambung lagi pada tutorial HTML lengkap selanjutnya insyaAllah. selamat mencoba kode-kode diatas.

feed dari situs: http://www.ateonsoft.com