Mengenal Desain Website

Ini adalah sebuah catatan kecil dari saya mengenal desain website.

Halaman ini bukan mau mengajari bagaimana cara membuat website, hanya sekedar bercerita saja. dan yang akan diceritakan adalah lebih tentang bagaimana desain website itu dibangun dan dibentuk.

Website diibaratkan seperti sebuah bangunan rumah, ada banyak elemen yang digunakan untuk mendirikan sebuah rupah, ada banyak bahan yang diperukan untuk membuat sebuah rumah. Begitupun dengan membuat bangunan sebuah website.

Bahasa pemrograman website menggunakan HTML, Hipertext Markup Language yang fungsinya untuk menampilkan semua bagian seperti text atau tulisan, image atau gambar, kotak, warna, dan lainnya. Ada juga bahasa lain yang lebih sederhana bernama WML yang dulunya digunakan untuk menampilkan halaman website dengan format sangat sederhana (hitam putih) dan dikhususkan untuk dibuka menggunakan perangkat selular. Website dengan format WML dulunya dibuka dengan beberapa perangat selular sederhana seperti sony ericsson T100, nokia n8250 yang masih berlayar monokrom atau satu warna. Mungkin Anda tidak akan menyangka jika perangkat tersebut sudah bisa untuk mengakses internet. Dimasa itu tentu perangkat tersebut juga dimanfaatkan dengan baik. Google.com pada masa tersebut juga mempunyai versi tampilan WML sehingga bisa juga di akses dengan perangkat sederhana tersebut.

HTML sangat maju, jika  diawalnya dulu adalah untuk membuat berbagai tampilan halaman menjadi lebih berwarna. Saat ini HTML sudah sangat komplek dan mambuat sebuah website semakin hidup.

Selain HTML kemudian dikenal juga CSS, fungsinya untuk memanipulasi tampilan, seperti warna, ukuran text, batas luar (margin), batas dalam (padding) dan lain lain. CSS bisa ditulis secara inline yaitu disisipkan kedalam sebuah HTML, dan ada juga yang berdiri sendiri dalam sebuah file yang diberi ekstensi .css dan di includekan ke dalam halaman HTML agar fungsinya bisa dijalankan dalam HTML.

Dengan hanya menggunakan HTML saja sebenarnya sudah bisa untuk membuat sebuah website dengan tampilan yang menarik, ditambah lagi jika menggunakan CSS juga akan membuat lebih bagus lagi, dan kemudian bisa juga didukung dengan bahasa program lainnya yaitu Javascript.

WML Bahasa Program Sederhana

Sekitar awal tahun 2000an teknologi komunikasi menggunakan perangkat genggam atau handphone mulai meluas bukan hanya di kota besar seperti Jakarta. Di daerah juga mulai ada beberapa yang memiliki perangkat ini tetapi tentu hanya seberapa gelintir saja karena memang belum begitu dikenal oleh publik dan terlebih merupakan barang dengan harga yang lumayan tinggi.

Untuk berkomunikasi mereka masih sangat bergantung pada layanan Wartel, walaupun biaya komunikasinya juga mahal. Terlebih untuk telpon ke luar kota biayanya menjadi beberapak kali lipat telpon di area yang sama. Tetapi wartel juga memjadi pilihan paling populer dan diminati oleh masyarakat. Awalnya mungkin keberadaan perangkat tersebut hanya dikhususkan untuk berkirim pesan dan telepon saja, hingga kemudian berkembang pemikiran perangkat tersebut bisa dipakai untuk menyimpan data dan juga untuk mengakses internet.

Dengan keterbatasan perangkat dan perkembangkan dunia website saat itu, maka kita sudah bisa menebak seperti apa tampilan website yang bisa diakses di perangkat sesederhana itu.
Maka program yang waktu itu digunakan adalah WML yang merupakan kepanjangan dari Wireless Markup Language. Jenis ini digunakan untuk mengakses WAP atau Website versi mobile. (mobile=selular)

WML adalah bahasa yang sangat sederhana, orang umum menyebut WML sebagai hitam putih. Bahwa website  dengan bahasa program adalah website hitam putih. hal itu karena memang WML tidak mengenal warna. Hanya sebuah halaman putih dengan text berwarna hitam dan link berwarna biru.

Data yang ditampilkan juga sangat minim, lebih banyak berupa text dan jarang memuat gambar karena gambar membutuhkan byte yang besar untuk di load oleh perangkat.
Tetapi biar begitu WML juga dulu sempat menjadi idola, di era wml sudah muncul website komunitas dan juga website chating.

Perkenalan saya dengan WML sekitar tahun 2004, dan itulah yang paling memungkinkan saya pelajari, walaupun sudah dikenal juga bahasa HTML tapi perangkat saya belum memadai untuk mengakses halaman HTMl full.
Dan memang seharusnya seperti itu, pelajaran awal adalah dari yang palingsederhana yaitu WML dan kemudian mulai mempelajari HTML.

Bahasa Pemrograman HTML

Dulu ketika ditanya apakah itu WML dan HTML jawaban yang paling mudah adalah bahwa WML itu hitam putih dan HTML itu warna. Itu jawaban yang paling bisa menerangkan tentang pengertian sekaligus perbedaan antara keduanya. Saat ini juga jawaban tersebut masih berlaku dan relevan.

WML boleh jadi saat ini sudah tidak dikenal dan sudah jadi sebuah sejarah saja. Untuk yang baru belajar bahasa program website saat ini mungkin tidak perlu kenal tentang WML, langsung saja ke mempelajari HTML.

Tahun 1986, ISO menyatakan bahwa IBM memiliki suatu konsep tentang dokumen yang sangat baik, dan kemudian mengeluarkan suatu publikasi (ISO 8879) yang menyatakan markup language sebagai standar untuk pembuatan dokumen-dokumen. ISO membuat bahasa ini dari GML milik IBM, tetapi memberinya nama lain, yaitu SGML (Standard Generalized Markup Language). ISO dalam publikasinya meyakini bahwa SGML akan sangat berguna untuk pemrosesan informasi teks dan sistem-sistem perkantoran. Tetapi di luar perkiraan ISO, SGML dan terutama subset dari SGML, yaitu HTML juga berguna untuk menjelajahi internet. Khususnya bagi mereka yang menggunakan World Wide Web. Versi terakhir dari HTML saat ini adalah HTML5.

Perkembangan HTML yang saat ini sudah jauh sekali, HTML versi terkini yaitu versi 5 bahkan dibanding bandingkan dengan Flash dan dianggap akan benar benar menggusur dan menghapus Flash dari bahasa program website. Apalagi satu kelemahan Flash yang tidak support dengan versi mobile atau selular.

Semua orang pasti akan terkagum dengan tampilan sebuah website berbasis Flash, efek yang sangat bagus dan unik bisa dibentuk dengan Flash, dan dulu harga sebuah web Flash sangatlah tinggi, bisa 5 atau 10 kali lebih banyak daripada membayar untuk webiste berbasis CMS dengan HTML.

Dan HTML memang sudah jadi sebuah bahasa yang bagus, semakin berkembang dan semakin fleksibel, 

Percantik Website Dengan CSS

Cascading Style Sheets, adalah pengarah gaya (style) untuk sebuah halaman website. Ia dapat memanipulasi tampilan dan mempercantik halaman sebuah website. Dan saat ini CSS juga bisa membuat sebuah website tampil atraktif dengan efek efek transisi dan animasi.

Sebuah baris CSS dapat digunakan untuk merubah tampilan dan bentuk, dengan CSS sebuah text bisa dirubah warnanya sesuai dengan keinginan, background warna juga bisa diganti dengan warna yang diinginkan. Bisa menentukan ukuran sebuah font apakah besar sedang atau kecil dengan memberikan sebuah nilai pasti berupa angka padanya. Misalkan sebuah text di atur pada ukuran 12px untuk normal dan untuk heading di set pada 26px.

Itu contoh kecil saja untuk menggambarkan kegunaan dari sebuah CSS dalam halaman website.
Dengan CSS sebuah website akan tampak lebih hidup. Ada dua jenis CSS yang dikenal

- CSS Inline
Jenis ini adalah potongan kode yang disisipkan ke dalam sebuah kode html.
Sebagai contoh sebuah kode CSS untuk text dengan cetak tebal
<b>Cetak Tebal</b>

dengan menambahkan CSS inline kita bisa membuat warna tulisan menjadi merah

<b style="color:red">Cetak Tebal</b>

CSS inline dituliskan dengan awalan style dan diikuti oleh karakter sama dengan dan isi diapit tanda petik

style="color:red"

Hampir semua kode HTML bisa disisipi dengan CSS inline

- CSS File
Jenis ini adalah sebuah CSS yang berdiri sendiri sebagai sebuah file dengan ekstensi .css misalnya style.css, sesuatu.css, dan lain lain.
CSS jenis ini harus dipanggil di halaman HTML yang bersangkutan, ditulis di dalam bagian header diantara tag <head> dan </head> dan cara penulisannya dengan memanggil link dari file CSS tersebut

penulisan kode CSS jenis ini seperti berikut

body {
    background: #fff;
    color: #000;
}
.wrap {
    width: 880px;
    padding: 10px;
}

misalkan potongan file ini disimpan dengan nama style.css . File ini harus dipanggil dibagian header dari file HTML yang bersangkutan dengan kode seperti berikut

<link rel="stylesheet" type="text/css" href="style.css" />

penulisan alamat file disesuaikan misalkan ia ada di folder atau tidak

Dengan menambahkan elemen yang komplek pada sebuah file CSS maka akan semakin membuat website menarik. tetapi jangan berlebihan karena justru akan membuat website tampak 'kampungan'