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:
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:
Saya rasa semua sudah tahu masalah ini, saya akan tuliskan atribute berkaitan dengan align untuk image, lihat tabel dibawah ini:
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.
Koordinat dari object relatif terhadap pojok kiri atas image seperti dibawah ini:
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:
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:
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.
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 |
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 |
| Coordinate | Value |
|---|---|
| Rect | Left-x, top-y, right-x, bottom-y |
| Circle | CENTER-X, CENTER-Y, RADIUS |
| Poly | X1, Y1, X2, Y2, … XN, YN |
<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:
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:
Tidak ada komentar:
Posting Komentar