Sunday, October 10, 2010

Presentation dan Layout pada Website

Komponen dalam website dapat terdiri atas :

  • Images
  • Text
  • Color and background
  • Tables and layout
  • Frame
  • Multimedia
  • CSS

Gambar menjadi pelengkap dan dapat juga sebagai content untuk informasi tambahan.

Contoh images dalam website seperti GIF, JPEG, XBM (XBitmap), XPM (XPixelmap), PNG (Portable Network Graphic).

Pixel merupakan elemn terkecil dari sebuah image. Terdapat gradasi warna terdiri atas RGB (Red Green Blue) masing-masing memiliki nilai 0-255.

File gambar yang dapat melakukan transaparan utnuk sebuah web yakni GIF (Graphic Interchange Format), dan GIF juga dapat melakukan animasi sederhana dimana frame-frame gambar digabungkan sehingga membentuk gambar gerak.

Warna hitam memiliki kode #000000 dan warna putih berkode #FFFFFF.

Contoh Color Space atau dapat disebut juga sebagai bidang warna :

  • RGB (Red Green Blue)
  • CMYK, digunakan pada layar televise dan printing
  • HSB
  • YCBR

Gambar dibagi lagi menjadi 2 yakni :

  • Non Dithered, dimana hasil gambar yang diciptakan halus
  • Dithered, gambar yang ihasilkan memiliki pola bintik-bintik warna semacam noise

Alt text dalam pemrograman web dapat disebut juga sebagai alternate text, jadi jika gambar tidak dapat ditampilkan maka alternate text akan membantu untuk mendeskripsikan gambar yang seharusnya muncul atau dapat digunakan sebagai tool tips ketika gambar di hover oleh mouse atau dibayangi oleh mouse.

Gambar dapat juga sebagai tombol. Jadi gambar diklik sehingga akan mereferensikan ke link halaman yang lain.

Satu lagi kita dapat melakukan pemograman image map seperti halnya yang diterapkan pada facebook yang dapat melakukan tag-ing terhadap foto-foto untuk identifikasi foto siapakah ini. Dimana image map ini melakukan pemetaan sekaligus gambar sehingga kita dapat melakukan pemilihan link maupun posisi dengan koordinat.
 

Gambar Contoh ImageMap, hanya dengan 1 gambar saja namun kita dapat membagi link dari gambar ini

Berikut saya bagikan ilmu saya mengenai image mapping terhadap gambar menggunakan koordinat sebagai titik pemilihan, berikut adalah source codenya

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Untitled Document</title>

</head>

<body>

<DIV ALIGN=CENTER>

<MAP NAME="map1">

<AREA HREF="contacts.html" ALT="Contacts" TITLE="Contacts" SHAPE=RECT COORDS="28,22,122,119">

<AREA HREF="products.html" ALT="Products" TITLE="Products" SHAPE=RECT COORDS="147,36,242,130">

<AREA HREF="new.html" ALT="New!" TITLE="New!" SHAPE=RECT COORDS="76,148,184,232">

</MAP>

<IMG SRC="tes.gif" ALT="Gambar Coba2" BORDER=0 WIDTH=301 HEIGHT=301 USEMAP="#map1">

<BR>

</DIV>

</body>

</html>

Selamat belajar pemrograman website, salam ericovamili ! :D

3 comments:

Anonymous said...

ric ajarin image mapping....

aq ga ngerti cara nentuin koordinatnya

Ericova said...

angga : beres bro :)

Telkom University said...

Apa saja jenis file gambar yang umum digunakan dalam sebuah website, dan bagaimana karakteristik pixel serta gradasi warna dalam sebuah gambar?
Regard Telkom University