Di Balik Selubung Web

Atas permintaan Mbak Primanita Dewi, Mbak Rhani, dan akhirnya Nilla, saya mengangkat topik baru di blog saya ini, yaitu topik Desain Web. Meskipun risikonya adalah apa yang saya angkat di blog ini semakin meluas, namun demi memuaskan penggemar (halah.. sok seleb 😛 ), saya memulai kategori baru ini. Nantinya, kategori ini akan membahas masalah desain website, mulai tingkat yang paling dasar hingga yang paling mahir semampu saya (karena saya pun juga sedang belajar).

Well, dibangun dari apa sesungguhnya website itu? Tampilan yang indah mahakarya webmaster-webmaster yang Anda lihat, ada apa sebenarnya di balik selubung web yang indah itu? Banyak hal, tapi yang paling berhubungan dengan desain web adalah apa yang dinamakan HTML (Hypertext Markup Language).

Selubung web HTML dapat Anda kuak dengan mudah dengan menekan tombol [View]-[Source] di Internet Explorer kesayangan, atau [View]-[Page Source] di Firefox. Dan segera akan Anda lihat sebuah tulisan-tulisan kacau balau mirip bahasa planet! Bahasa Inggris? Ah, siapa bilang itu strukturnya bahasa Inggris? Yeah, itulah sebenarnya kode yang membangun tampilan dengan indah yang biasa Anda nikmati. Ladies, and Gentleman, please welcome: the Hypertext Markup Language, sebuah bahasa standar dalam membangun sebuah website.

Namun jika dipelototi lebih lanjut, sebenarnya bahasa ini sangat sederhana. Pada dasarnya, setiap file HTML terdiri dari dua komponen komponen utama, head dan body.

Ciri-ciri HTML adalah masing-masing tag (kode yang ditulis diantara < dan >) berpasangan, dimulai dari kode tertentu dan selalu diakhiri tanda / dengan kode yang sama dengan kode pembuka. Kode yang di-highlight dalam warna kuning di atas disebut tag, dan yang ditulis dalam warna hijau disebut atribut yang bertugas menjelaskan tag itu, misalnya panjang, lebar, warna, ketebalan, dan lain-lain. Di antara pasangan tag adalah isi. Misalnya, diantara tag < title > dan < / title > adalah isi dari tag < title > tersebut yang berarti judul dari halaman web. Kita akan bahas semua tag-tag HTML nanti. Namun sementara cukuplah sampai di sini bahwa pada dasarnya HTML terbangun dari properti-properti di atas, html, head, dan body. Maka, keep stay tuned with me 😛

Kenapa aku mesti membahas tag-tag yang membingungkan itu di saat ada begitu banyak editor HTML What You See Is What You Get yang handal dimana kita bisa membuat web cantik tanpa harus mengerti apa itu HTML? Maaf, inilah idealismeku. Mengerti konsep dasar adalah syarat mutlak agar kita tidak dikendalikan oleh sebuah tools. Tools hanyalah tools. Tidak lebih! Tools hanyalah bersifat membantu, bukan membuat. Aku takut jika aku langsung “serang” ke cara mendesain web dengan, katakanlah, Dreamweaver, FrontPage, NVu, atau yang lain tanpa melakukan foreplay seperti ini dulu, kita akan memiliki ketergantungan terhadap sebuah software.

Tentu saja tidak menarik jika seri tutorial ini tidak membahas dengan tools. Aku nanti akan membahas desain web ini dengan tools Dreamweaver dan Photoshop sebagai image editornya. Bagi yang tak punya lisensi dua tool itu, bisa tetap mengikuti dengan tools alternatif yang akan kuberikan. Screenshot di atas aku ambil dari sebuah teks editor kesayanganku, ViM for Windows 😀

Sampai saat ini, yang kepikiran di kepalaku sebagai pembahasan adalah sbb:

  1. Di Balik Selubung Web, sudah kubahas.
  2. Basic Layout: auto-stretch, fixed-width, dan the-rule-of-the-three.
  3. Layouting dengan Dreamweaver dan Nvu
  4. Desain Layout dengan Adobe Photoshop
  5. Header, Apa yang Perlu Ditaruh di sana?
  6. Tag Pembangun Header
  7. Sidebar, Apa yang Perlu Ditaruh di sana?
  8. Isi dan Komponen Pendukungnya, termasuk menyusun paragraf, tabel, dan gambar
  9. Menyusun navigasi situs yang nyaman
  10. Footer dan pernik-perniknya

Dan akan segera disambung dengan desain web dengan CSS, tableless-layout, interaktivitas dengan Javascript, Server side scripting sederhana, dan Ajax! Namun aku tidak yakin aku akan sampai membahas yang paling rumit Ajax jika tidak ada feedback dari Anda. Jadi, komentar terus yach, agar bisa interaktif dan komunikasi dua arah terjalin. Tanya apa saja boleh, OOT boleh, mencaci maki boleh, kirim salam manis boleh, menyatakan cinta juga boleh :D. Biar aku tahu apa yang sebenarnya Anda inginkan. Okay, see you at the next chapter! 🙂

Published
Categorized as Desain Web

By Galih Satriaji

Bookaholic, Workaholic. Chubby. That's me!

19 comments

  1. Hohohoho… Bener bgt Mas Galih! Mengerti konsep adalah awal dr segalanya! 😉 Itu jg yg diajarkan para dosenku di kampus. 😀 Chayo, Mas Galih! Lanjutkan lg Bab berikutnya. I’ll be stay tune with you! hehehe… 😛

    Uhmmm… Btw… “menyatakan cinta juga boleh”??? Hahaha… =)) Kalo gitu aku sekalian pengen bilang… “Ai Loph You… My Mom!!!” Hehehe… kejebak kan? :-> ;))

  2. Ayo Mas Galih, tulis terus soal desain web, aku ikut mendukung. Soalnya aku bener2 penasaran sama dunia seni satu ini. kalo bisa sampai pemrograman web sekalian 🙂

  3. Gimana dengan SEO?
    Membangun konten?
    Mengkonsep web….
    Penggunaan engine?
    (abis nggak tertarik sama desain dan programming, lebih suka konsep dan isi)

  4. #daniel:
    secara detail tidak membahas itu dan, tapi akan aku masukin secara implisit sebagai pemanis artikel 🙂

    #Anang:
    ah, saya masih belajar kok, seharusnya saya yang belajar pada Anda 🙂

  5. Ok ditunggu kelanjutannya, saya sudah ada sedikit modal nih, ditunggu tambahan modalnya, yah. BTW Disain itu tampilan saja yah. :). Sebab banyak web yang bagus tapi tidak dimbangi dengan isi je.

  6. Aduhhh Galiihhhh!!!! Makasih bangetttt!!!! Ai lop yuuuu!!!! Hehehe..
    Gw makasih banget lu mau share ‘kelas web design’ di blog lu ini. Justru memang gw pengen tau dari dasarnya banget. Wah, udah punya modul pelajarannya lagi yah.. Top banget dah! Ternyata berbakat jadi dosen.. hahaha…

    Gw tunggu loh postingan selanjutnya.. (sambil nge-grab buku catetan & duduk tegak :&#68;)

  7. huaaaaaaaaaaaaaaahahahaah… =)) saya kira tadi panjang lebar kek buku =)) :(( kasianni saya ^:)^ mohon dong tutorialnya sampai mentok,,, padahal saya udah siapin kopi segelas, roti sebungkus, rokok setengah pack, trus korsi empuk, sama kacamata kesayangan saya,, dah bener bener siap saya mo baca :-s tapi baru aja saya, isep rokoknya, eh isinya udah gini >>>>>

    Biar aku tahu apa yang sebenarnya Anda inginkan. Okay, see you at the next chapter!:)

    :(( mamaaaaaaaaaaaaaaa,,,

  8. #q_n07:
    haduh, makanya ngomong dunks, ini kan tutorial bersambung, jadi karena ini wahana blog, komunikasi dua arah bisa tercapai. beda dengan buku. jadi, aku harus nerangin yang mana dulu nich?

  9. guys..gw mau nanya nih…
    di kantor gw ada beberapa web yg gak bisa dibuka.
    gimana caranya untuk membuka web tsb dengan selubung web yg lain?

  10. bisa ngasih gue codingan aplikasi bukualamat berbasis web (jsp) yang isinya bisa nyimpan,edit.hapus, n tampilin data….??jangan lupa kasih source codenya koneksi ke databasenya y! biar mudah pake access aj! key
    soalnya webku gak ada buku alamatnya

    thanks b4…….. u’r d best programmer

  11. mas kirim ke emailku tutorial dasar AJAX yang mudah dipahami pemula dong, bener-bener pemula ini. ato kasih link aja mas pernah belajar AJAX dari mana. tx.

Leave a comment

Your email address will not be published. Required fields are marked *