Menampilkan Gambar

Ada banyak format gambar, tapi ada tiga jenis format yang paling sering digunakan:
  • GIF (Graphical Interchange Format) (.GIF)
  • JPEG (Joint Photographic Expert Image) (.JPG)
  • PNG (Portable Network Graphick) (.PNG)

Image - HTML

Dalam HTML, gambar di definisikan dengan Tag . Tag merupakan tag kosong, yang berarti hanya berisi atribut dan tidak memiliki tag penutup. Tag digunakan untuk memasukkan gambar dan menampilkan gambar di halaman HTML dengan format file JPG, GIF, dan PNG.

Untuk menampilkan sebuah gambar pada halaman HTML, Anda perlu menggunakan atribut "src". SRC singkatan dari "source". Nilai dari atribut src adalah URL dari gambar yang ingin ditampilkan atau menunjuk ke lokasi di mana gambar disimpan.

Sintaks untuk mendefinisikan gambar:


Attribut elemen image:
src = lokasi dan nama gambar
alt = teks (teks alternatif)
width = pixel (lebar gambar)
height = pixel (tinggi gambar)
align = top, middle, bottom, (untuk menentukan posisi image terhadap text) left, right, center (untuk menentukan posisi image di dokumen)
border = pixel (tebal garis tepi gambar)
hspace = pixel (menentukan jarak spasi horizontal dan spaci vertikal)
vspace = pixel (menentukan jarak antara gambar dengan object disekitarnya)


Misal sebuah gambar bernama "blognya_eli.jpg" memiliki url: "http://i1118.photobucket.com/albums/k611/eliastutik/blognya_eli.jpg"

Contoh : img.htm
view plainprint?
  1. <html>
  2. <head>
  3. <title>Belajar menampilkan gambartitle>
  4. head>
  5. <body>
  6. <img src="http://i1118.photobucket.com/albums/k611/eliastutik/blognya_eli.jpg" />
  7. body>
  8. html>

HTML images
Menampilkan gambar

Contoh : img_bg2.htm
view plainprint?
  1. <html>
  2. <head>
  3. <title>Belajar menampilkan gambar bagian2title>
  4. head>
  5. <body>
  6. <img src="http://i1118.photobucket.com/albums/k611/eliastutik/blognya_eli.jpg" width="300" height="120" />
  7. body>
  8. html>
Menampilkan gambar bagian2


Peta Gambar


Anda bisa gunakan gambar yang ada pada website Anda untuk membuat peta gambar. Peta gambar (image map) yaitu suatu area pada gambar yang bisa kita beri hyperlink area ini biasanya disebut “hotspots”. Koordinat dari hotspot ditentukan menggunakan bidang geometry seperti rectangle, polygon dan lainya.

Tag Image
TagKeterangan
Mendefinisikan gambar
Mendefinisikan peta gambar
Mendefinisikan daerah yang dapat diklik dalam sebuah peta gambar

Attribut shape:
default = semua area gambar
rect = area kotak (persegi empat/panjang) tertentu
circle = area lingkaran/ellips tertentu
poly = area polygon


Koordinat dari object relatif terhadap pojok kiri atas gambar:

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


Contoh: hotspot.htm
view plainprint?
  1. <html>
  2. <head>
  3. <title>Membuat Hotspottitle>
  4. head>
  5. <body>
  6. <img src="http://i1118.photobucket.com/albums/k611/eliastutik/natural.jpg" width="500" height="350" hspace="2" vspace="4" usemap="#Map" />
  7. <map name="Map">
  8. <area shape="rect" coords="0,0,500,350" href="http://eliastutik.blogspot.com/" title="link image... silahkan di link, dengan cara klik gambar ini" />
  9. map>
  10. body>
  11. html>
HTML images
Membuat peta gambar

Tentang Kami

Langgan artikel Via Email

Langgan artikel Via Email

© 2011 - Tutorial blog dan belajar SEO blogger