Posted by: kkpitriska | February 17, 2013

Menambahkan Gambar (Image) dengan HTML

Menambahkan Gambar (Image) dengan HTML

  • Format Image

Ada banyak format image, tapi ada tiga jenis format yang paling sering di gunakan :

  1. GIF (Graphical Interchange Format) (.GIF)
  2. JPEG (Joint Photographic Expert Image) (.JPG)
  3. PNG (Portable Network Graphics)
  • Insert Image ke Document

Tag IMG di gunakan untuk menginsertkan image ke document HTML. Syntax nya:

<IMG SRC = “URL”>

<html>

<head>

<title>Working with Image</title>

</head>

<body>

<img src=”Dog.gif”>

</body>

</html>

Attribute

Value

Description

Align Center | justify | left | right |Baseline | top | bottom |middle
  • Top, bottom, middle digunakan untuk menentukan posisi image terhadap text
  • Left, right, center untuk menentukan posisi image di document

<html>

<head>

<title>Working with Image</title>

</head>

<body>

<p><img src=”Dog.gif” height=”100″ width=”100″>Default alignment at the bottom</p>

<p><img src=”Dog.gif” height=”100″ width=”100″ align=”top”>Aligned at Top</p>

<p><img src=”Dog.gif” height=”100″ width=”100″ align=”middle”>Aligned at Middle</p>

</body>

</html>

11

  • Image Map

Anda bisa gunakan image yang ada pada website anda 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

Coordinat dari object relatif terhadap pojok kirai atas image.

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:

<html>

<head>

<title>Creating Hotspot</title>

</head>

<body>

<img src=”Starry.gif” width=”400″ height=”200″ border=”0″ usemap=”#Map”>

<map name=”Map”>

<area shape=”rect” coords=”0,0,200,100″ href=”file1.htm” alt=”kotak link”>

<area shape=”circle” coords=”354,41,36″ href=”file2.htm” alt=”lingkaran link”>

<area shape=”poly” coords=”58,102,97,101,110,134,119,119,177,195,69,196, 47,162,62,143″ href=”#”>

</map>

</body>

</html>

 


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Categories

%d bloggers like this: