Arsip | Draft 004: Style: Color, Graphic, Graphic Editor

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~<e-Web 2000>~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
STYLE: COLOR, GRAPHIC, GRAPHIC EDITOR
=====================================

"Web tanpa grafik ibarat sayur tanpa garam, atau Madonna tanpa 
kontroversi." [Jon M. Duff & James L. Mohler]  

1. COLOR
--------
Cara termudah menghias halaman web adalah dengan menambahkan warna-
warni. Hampir semua elemen HTML yang sudah kita pelajari bisa 
diwarnai: latar belakang, teks, tabel, link, dan lain-lain. 
Kesulitannya di sini adalah bagaimana memadukan kombinasi warna yang 
tepat sehingga menghasilkan halaman web yang indah tanpa kelihatan 
terlalu 'norak', tapi dengan banyak berlatih membuat halaman web, 
anda akan semakin mahir dalam memadukan warna.

Terdapat dua cara mendefinisikan warna dalam HTML: dengan penggunaan 
nama warna atau dengan nilai RGB, yaitu sebuah angka heksadesimal 
enam digit di mana dua digit pertama mendefinisikan nilai warna 
merah, dua digit berikutnya mendefinisikan nilai warna hijau, dan dua 
digit terakhir mendefinisikan nilai warna biru. Standar HTML mula-
mula hanya mengenal 16 buah nama warna berikut ini [beserta nilai RGB 
masing-masing]:  

Aqua    = #00FFFF       Black   = #000000       Blue    = #0000FF
Fuchsia = #FF00FF       Gray    = #808080       Green   = #008000
Lime    = #00FF00       Maroon  = #800000       Navy    = #000080
Olive   = #808000       Purple  = #800080       Red     = #FF0000
Silver  = #C0C0C0       Teal    = #008080       Yellow  = #FFFF00
White   = #FFFFFF

Selanjutnya standar HTML ditingkatkan sehingga mampu mendukung 
penggunaan sekitar 140 nama warna tambahan, seperti:  

Beige   = #F5F5DC       Brown   = #A52A2A       Coral   = #FF7F50
Gold    = #FFD700       Khaki   = #F0E68C       Sienna  = #A0522D

Elemen BODY yang sudah kita kenal dapat diperindah dengan warna:  

  <BODY BGCOLOR=warna LINK=warna ALINK=warna VLINK=warna> ... </BODY>

Di mana atribut BGCOLOR menentukan warna latar belakang, LINK 
menentukan warna link, ALINK menentukan warna link yang aktif, dan 
VLINK menentukan warna link yang sudah dikunjungi.  

2. GRAPHIC
----------
Syntax lengkap instruksi HTML untuk menyisipkan grafik ke dalam 
halaman web sebagai berikut:  

  <IMG SRC=hiresgraphic LOWSRC=loresgraphic ALT=teks
    WIDTH=lebar HEIGHT=tinggi
    ALIGN=LEFT|RIGHT|TOP|BOTTOM|MIDDLE|TEXTTOP|TEXTBOTTOM|ABSMIDDLE|
      ABSBOTTOM|BASELINE
    HSPACE=horisontal VSPACE=vertikal BORDER=batas
    USEMAP=#peta
    ISMAP>

Penjelasannya akan dilakukan secara bertahap berikut ini:

+ Gambar, gambar alternatif, dan teks alternatif
  ----------------------------------------------
  Atribut SRC adalah satu-satunya atribut yang harus ada karena 
  menyatakan nama file gambar yang akan kita tampilkan. Jika file 
  gambar tersebut terlalu besar [misalnya lebih dari 10 kB] kadang-
  kadang kita perlu menyediakan gambar dengan resolusi lebih rendah 
  yang dapat ditampilkan lebih cepat. Gambar ini kita letakkan di 
  atribut LOWSRC. Sedangkan atribut ALT digunakan untuk menampilkan 
  teks sebagai pengganti gambar.

+ Ukuran gambar
  -------------
  Gambar dapat kita ubah-ubah sendiri ukurannya dengan atribut WIDTH 
  untuk menentukan lebar gambar dan HEIGHT untuk menentukan tinggi 
  gambar, keduanya dalam piksel.

+ Alignment
  ---------
  Perataan gambar terhadap teks di sekitarnya dilakukan dengan 
  atribut ALIGN.

+ Jarak tepi
  ----------
  Untuk menentukan ruang kosong di sekeliling gambar digunakan 
  atribut HSPACE untuk memberi jarak di kiri dan kanan gambar, dan 
  atribut VSPACE untuk memberi jarak di atas dan bawah gambar. 
  Atribut BORDER digunakan untuk memberi batas sekeliling gambar yang 
  diwarnai dengan piksel yang berbeda.

+ Image map
  ---------
  Sebuah gambar dapat digunakan sebagai link dengan meletakkannya 
  dalam elemen A, tapi sebuah gambar dapat juga memiliki beberapa 
  link sekaligus, yaitu dengan membuat image map.
  Terdapat dua macam image map, yaitu server side dan client side. 
  Server side image map dibuat dengan atribut ISMAP, dan 
  pemrogramannya dilakukan di server dengan menggunakan cgi atau 
  fasilitas scripting yang lain. Sedangkan client side image map 
  dibuat dengan atribut USEMAP yang memuat nama peta yang digunakan.

  Peta USEMAP dibuat dengan tag-tag berikut:

    <MAP NAME=nama>
      <AREA SHAPE=RECT|CIRC|POLY COORDS=.... HREF=alamat|NOHREF>
        ...
    </MAP>

  Atribut SHAPE menentukan bentuk pemetaan, yaitu persegi, lingkaran, 
  atau poligon. Atribut COORDS menentukan koordinat area dalam bentuk 
  x1,y1,x2,y2 untuk persegi, x,y,r untuk lingkaran dan 
  x1,y1,x2,y2,...xn,yn untuk poligon. Atribut HREF berisi alamat yang 
  akan dituju jika mouse ditekan di dalam area yang didefinisikan.

3. GRAPHICS EDITOR
------------------
Tidak sembarang grafik dapat dimuat dalam dokumen HTML. Standar HTML 
telah menetapkan dua format umum yang dapat berada di sembarang 
platform, yaitu GIF dan JPEG. File GIF biasanya digunakan untuk 
menampilkan gambar-gambar grafik dengan perbedaan kontras yang tajam 
dan hanya mampu menampilkan maksimal 256 warna, sedangkan file JPEG 
dapat menampilkan ribuan hingga jutaan warna, namun relatif berukuran 
lebih besar, dan lebih tepat digunakan untuk menampilkan gambar-
gambar fotografis yang bersifat 'blur' dan banyak mengandung gradasi.

Gambar-gambar ini dapat dibuat dengan editor grafik yang banyak 
tersedia di internet, antara lain LView Pro, Paintshop Pro, dan lain-
lain. Daftar URL dari situs-situs yang memiliki program menggambar 
dapat anda lihat dibagian paling akhir draft ini.  

Selain membuat sendiri, kita juga dapat menggunakan gambar-gambar 
hasil rancangan orang lain di dalam situs web kita. Tentu saja untuk 
menggunakannya kita harus meminta ijin terlebih dulu kepada 
pembuatnya. Namun di internet kini terdapat beberapa layanan yang 
bisa anda gunakan untuk mengambil gambar-gambar secara gratis. Gambar-
gambar tersebut tersedia dalam berbagai format dan bentuk, antara 
lain: icon, gif, animated gif, jpg, eps, dan lain-lain.  

--------------------------
Edisi Berikutnya:
  "STYLE: TEXT FORMATTING DENGAN CSS (CASCADING STYLE SHEET)"

--------------------------
Referensi untuk edisi ini:

          HTML

HTML Ref (Bahasa Indonesia)
http://werbach.com/barebones/barebone_id.htm
http://werbach.com/barebones/barebone_annot_id.htm

NCSAA Beginner's Guide to HTML
http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.htm

HTML Ref dari HTML Writers Guild (HWG)
http://www.hwg.org/

The HTML 3.2 Specification
http://www.w3.org/hypertext/WWW/MarkUp/HTML3/

HTML Help.
http://www.htmhelp.com/

Netscape Extension to HTML 3.2
http://home.netscape.com/assist/net_sites/HTML_extensions_3.htm

The HTML Reference Manual (from Sandia National Laboratories)
http://www.sandia.gov/sci_compute/HTML_ref.htm

Frames
http://home.netscape.com/assist/net_sites/frames.htm

HTML Tables (Working Draft)
http://www.w3.org/hypertext/WWW/TR/WD-tables

Mosaic Tables
http://www.ncsa.uiuc.edu/SDG/Software/XMosaic/table-spec.htm


           PROGRAM/PLUGIN UNTUK MENGGAMBAR

Paint Shop Pro
http://www.jasc.com

GIFTool (UNIX)
http://www.homepages.com/tools/

ADOBE
http://www.adobe.com/
http://www.adobe.com/Apps/Photoshop/
http://www.equilibrium.com/

The 3-D Cafe[as]
http://www.baraboo.com/3dcafe/

Corel/WordPerfect
http://www.corel.ca

GIFTool (UNIX)
http://www.homepages.com/tools/

Giftrans
ftp://ftp.rz.uni-karlsruhe.de/pub/net/www/tools/giftrans.c

Imaging Machine
http://www.vrl.com/Imaging/

Mapedit: Tool untuk membuat Image Map (Windows dan X11)
http://www.boutell.com/mapedit/

HotSpots (a Windows Image Map Tool)
http://www.cris.com/~automata/index.htm


              KOLEKSI GAMBAR DI INTERNET

Graphics Wonderland
http://www.geocities.com/SiliconValley/Heights/1272/index.htm

Kira's Icon Library
http://fohnix.metronet.com/~kira/icongifs/

Anthony's Icon Library
http://www.cit.gu.edu.au/~anthony/icons/index.htm

Barry's Clip Art Server
http://www.barrysclipart.com
http://www4.clever.net/graphics/clip_art/clipart.htm

256 Color Square
http://www59.metronet.com/colors/

Color Triplet Chart
http://www.phoenix.net/~jacobson/rgb.htm

Web Developers Virtual Library
http://www.stars.com/Graphics/

Yahoo's Clip Art List
http://www.yahoo.com/Computers/Multimedia/Pictures/Clip_Art/

Yahoo's GIF List
http://www.yahoo.com/Computers/Software/Data_Formats/GIF/0

Yahoo's Icons List
http://www.yahoo.com/Computers/World_Wide_Web/Programming/Icons/0

         REFERENSI UNTUK MENGGAMBAR

Creating Graphics for the Web
http://www.widearea.co.uk/designer/

Graphics Formats for the WWW
http://www.w3.org/pub/WWW/Graphics/

Spesifikasi PNG (Portable Network Graphics)
http://boutell.com/boutell/png.htm

Informasi tentang format GIF transparan
http://melmac.harris-atd.com/transparent_images.htm
| Home | Mailing Lists | Halaman Anggota | Tutorial | Referensi | Tips & Trik | Tools | Links | FAQ | Feedback | Arsip |
copyright© 1999 WebServant-2000 last updated: by webmaster <webmaster@sabda.org>