. Nah tutorial kali ini membahas
. Artikel sejenis tentang optimasi pemasangan gambar dalam ngeblog agar SEO friendly sudah pernah saya bahas dalam artikel
. Bedanya dalam artikel ini akan membahas lebih mendasar pada HTML secara umum dalam pemasangan gambar.
Ada banyak format image, tapi ada tiga jenis format yang paling sering digunakan dalam dokumen HTML yaitu:
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.
