Resume Desain & Pemrograman Web 5

Resume Kali ini mengacu bab III dari e-book HTML & XHTML, The Complete reference dari tim DDU. Bab II sendiri membahas tentang permasalahan Presentation & Layout.

Secara garis besar yang akan dibahas kali ini adalah :

  • Images (gambar)
  • Text, Colors & backgrounds (teks, warna dan latar belakang)
  • Table & layout (Tabel dan tata letak)

Images

Langsung saja bahas dari yang pertama, Images.

HTML/XHTML memiliki kemampuan untuk menampilkan gambar sehingga desain web menjadi lebih menarik lagi. Namun tidak semua format gambar dapat di-support oleh HTML/XHTML. Beberapa yang dapat di support adalah :

File Type File Extension Penjelasan
GIF (Graphics Interchange Format) .gif Animasi, biasa digunakan untuk avatar forum
JPEG (Joint Photographic Experts Group) .jpg or .jpeg Format gambar pada umumnya
XBM (X Bitmaps) .xbm
XPM (X Pixelmaps) .xpm
PNG (Portable Network Graphics) .png Format gambar yang digunakan apabila ada elemen transparansi

Untuk yang mengerti tentang XPM / XBM bias ditambahin di comment yah 😀

Memilih ektensi gambar sangatlah penting dalam mendesain sebuah website, karena satu ekstensi gambar dengan yang lainnya memilki karakter yang berbeda samasekali. Contoh, ekstensi GIF, meskipun hanya men support 8-bit warna dalam sebuah gambar, namun gambar tersebut akan tetap sama. Format file GIF adalah format yang paling sering digunakan di internet, karena adanya fitur interlacing

Contoh interlacing :

Fitur interlacing dapat memberitahu user kira-kira gambar apa yang akan muncul.

Berbeda dengan GIF, format file JPEG sangat memperhitungkan kualitas, dan juga file JPEG dapat di compress sedemikian rupa sehingga lebih menghemat space ketimbang GIF.

Syntax untuk image pada HTML/XHTML

 

 

"<img src="images/logo.gif" alt="Demo Company Logo" />" alternative text dapat membantu user mengetahui gambar apa yang akan muncul.

 

 

"<img src="images/aligntest.gif" align="middle" alt="" border="1" />" bagaimana cara mengatur letak gambar pada web.

 

 

 

Text, Colors & backgrounds

Teks, warna dan latar belakang. Ketiga hal itu membentuk sebuah kesatuan web yang entah dapat memudahkan user dalam menjelajah web atau malah membuat user bingung.

Contoh saja, sebuah web dengan latar belakang gambar spiral, berwarna hijau terang, plus tulian super mini dengan warna pink…. Sebuah web yang tidak akan pernah dikunjungi oleh orang-orang.

Syntax untuk text formatting

 

 

"<font color="color value" size="size value from 1-7" face="list of font faces">"

 

Windows
Arial
Comic Sans MS
Courier New
Impact
Times New Roman
Symbol
Verdana
Wingdings

 

Beberapa tipe font yang diterima pada HTML/XHTML

			

 

Colors, warna untuk formatting text dan background

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

Warna warna diatas sudah di support untuk formatting text dan background, jika ingin warna lainnya, bias dicoba-coba sendiri hex-nya yah 😀 atau bias me refer ke sini.

Kalau tidak puas dengan warna-warna standar diatas, bias digunakan hex code untuk menentukan gradasi dari warna-warna itu.

 

System yang digunakan disini adalah system RGB, system warna dasar yang hamper diketahui oleh semua orang. Menggunakan 3 warna dasar sebagai patokan pencampurannya, yaitu Red, Green, Blue (iya, TV Aquos sudah menambah 1 warna lagi, Yellow. Slogannya – No Yellow, No Glow).

Sistem2 warna yang biasa ada :

  • RGB (Red, Green, Blue)
  • HSL (Hue, Sat, Lum)
  • CMYK (Cyan, Magenta, Yellow, Key) ( buat yang belum tahu warna2 CMYK. Bingung K = Black? K adalah Key, atau warna kunci dalam CMYK)
  • Dll, bagi yang mau mendalami soal warna, cek Wikipedia dulu yah

Tables & Layout

Table, sebagaimana layaknya sebuah table yang ditemukan pada ms word, excel dsb, adalah… uhhh…. Sebuah table.

Contoh table :

 

Simple Table Example

Basic Fruit Comparison Chart
Fruit Color
Apple Red
Kiwi Green
Watermelon Pink

Table ini pada awalnya digunakan untuk mengatur layout atau tata letak sebuah website agar rapi dan teratur.

Advertisements

2 comments on “Resume Desain & Pemrograman Web 5

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