Teks ini menjelaskan pengenalan awal penulis terhadap dunia web dan bagaimana ketidakmengertiannya pada awalnya menyebabkan kegagalan dalam membangun website. Teks selanjutnya menjelaskan cara kerja dasar web melalui ilustrasi sistem pos dan penjelasan singkat tentang komponen-komponen pembangunan web seperti HTML, CSS, dan Javascript.

1. Mengenal Dunia Web
“Tak kenal maka tak sayang” – Pribahasa Indonesia
Ketika pertama kali mengenal dunia web, segala sesuatu terlihat seperti sihir di mata saya.
Hidupkan komputer, colok modem (pastikan juga tidak ada yang akan / sedang menggunakan
telepon!), jalankan software yang disediakan oleh ISP, tekan “Dial”, dan tunggu sampai terdapat
tulisan “Connected to the Internet”. Selesai terkoneksi, buka Netscape Navigator [1], dan
masukkan alamat website yang ingin dituju (90% boleh.com waktu itu).
Karena hanya memandang Internet sebagai sihir, pada saat itu saya sama sekali tidak tertarik
untuk mengetahui bagaimana internet bekerja. Tidak adanya minat tersebut membuat saya sama
sekali tidak peduli akan pengembangan web, dan meskipun sangat ingin memiliki website
sendiri, pada akhirnya saya hanya bisa membuat website menggunakan Frontpage atau Word
(dan percayalah, hasilnya sangat, sangat parah). Ketidak mengertian saya tentang dunia web
pada saat itu berdampak pada parahnya website yang saya kembangkan. Karena hal inilah pada
saat memutuskan untuk menulis buku ini, saya mendedikasikan satu bab untuk mengenalkan
pembaca kepada dunia web, dan mudah-mudahan membangun minat pembaca dalam dunia web.
Pembelajaran yang disertai dengan minat dan ketertarikan akan jauh lebih optimal dibandingkan
pembelajaran tanpa minat sama sekali.
Akhir kata, pengenalan akan dunia web akan kita mulai dengan melihat cara kerja web secara
singkat.
Cara Kerja Web
Ketika menjelajah website dalam Internet, umumnya kita menggunakan sebuah browser. Kita
memasukkan sebuah alamat, seperti google.com ke dalam browser, dan kemudian browser akan
menampilkan website Google kepada kita. Apa yang sebenarnya terjadi di belakang layar?
Tentu saja cara kerja web sebenarnya tidak sesederhana ini. Prosesnya disederhanakan hanya
untuk ilustrasi saja.
Secara sederhana, dapat dikatakan bahwa web bekerja seperti pos, di mana setiap orang yang
ingin berkomunikasi dengan orang lain harus melakukan pengiriman pesan. Identifikasi
penerima pesan dilakukan melalui alamat dan kode pos, yang ditentukan oleh kantor pos. Pesan
yang dikirimkan ini kemudian disampaikan oleh kantor pos, untuk kemudian dibaca oleh
penerima pesan. “Kantor pos”, sebagai pihak yang menentukan alamat dan kode pos, dikenal
dengan nama DNS (Domain Name Server) pada dunia web. “Alamat”, sebagai tempat penerima
pesan, dikenal sebagai IP Address, sementara penerima pesannya sendiri tentunya adalah website
atau komputer lain. Pengirim pesan, tentunya adalah web browser yang kita gunakan. Ilustrasi
lengkap tapi sederhana dari langkah-langkah tersebut dapat dilihat pada Gambar Bagaimana
Web Bekerja.

2. Bagaimana Web Bekerja
Mari kita telaah langkah demi langkah yang diperlihatkan oleh Gambar Bagaimana Web
Bekerja:
Langkah Pertama
Cukup jelas. Pengguna memberikan perintah kepada browser untuk membuka halaman
tertentu.
Langkah Kedua
Browser kemudian harus melalui firewall atau proxy, sebuah sistem pengamanan di sisi
pengguna atau ISP, sebelum memasuki Internet.
Langkah Ketiga
Browser menanyakan DNS alamat IP dari http://www.google.com.
Langkah Keempat
Browser berjalan menuju alamat IP yang diberikan oleh DNS.
Langkah Kelima
Setelah mencapai alamat, browser biasanya menemui sekumpulan website pada alamat
tersebut. Hal ini disebabkan karena umumnya beberapa website disajikan dalam satu
server (yang dikenal dengan nama Hosting Server) untuk menghemat sumber daya.
Langkah Keenam
Browser memasuki “ruang” google.com pada hosting server, dan meminta konten dari
google.com kepada penyaji konten. Pada gambar Bagaimana Web Bekerja, penyaji
konten diilustrasikan sebagai burung hantu.
Langkah Ketujuh
Data dikirimkan kembali ke pengguna.
Langkah Kedelapan
Ketika data sampai, maka browser menampilkan data yang didapatkan kepada pengguna.
Langkah Kesembilan
Selesai.

3. Perlu ditekankan bahwa langkah-langkah di atas merupakan langkah yang telah disederhanakan,
dan hanya mencakup satu bagian dari browser: pengambilan data dari server. Bagian ini bahkan
adalah bagian yang paling sederhana dari sebuah browser, karena sebagian besar pekerjaan
dikerjakan oleh jaringan Internet. Kegunaan utama (dan tugas tersulit) dari sebuah browser ialah
menampilkan halaman web. Penjelasan mengenai hal ini akan diberikan pada bagian selanjutnya.
Sampai pada titik ini, kita dapat melihat bahwa web merupakan kumpulan dokumen masif dalam
jaringan yang dapat diakses kapanpun, selama kita terkoneksi dalam jaringan tersebut. Untuk
pengembangan web sendiri, terdapat dua komponen penting, yaitu: komponen server yang
menyajikan halaman kepada kita, dan komponen klien yang menampilkan halaman yang
disajikan oleh server ke pengguna. Komponen server dikenal dengan nama web server,
sementara komponen klien dikenal dengan nama web browser. Contoh dari web server adalah
Apache dan nginx, sementara contoh dari web browser yaitu Internet Explorer dan Mozilla
Firefox.
Karena memiliki dua komponen dalam pengembangan, tentunya pembangunan sebuah website
akan memerlukan pengembangan dari kedua sisi. Seorang pengembang web yang handal
setidaknya harus dapat melakukan pengembangan klien dan server, meskipun banyak
pengembang yang memiliki spesialisasi pada satu sisi saja (misalnya penulis lebih menguasai
pengembangan server, meskipun tetap harus memiliki pengetahuan yang mumpuni pada sisi
klien). Mempelajari web, menurut penulis, lebih baik dilakukan mulai dari sisi klien terlebih
dahulu, karena pengembangan pada sisi server tidak dapat terlepas dari pengembangan sisi klien.
Ingat, tujuan akhir dari server ialah untuk menghasilkan halaman web kepada pengguna, yang
adalah sisi klien.
HyperText Markup Language
HyperText Markup Language, yang lebih dikenal sebagai HTML, merupakan bahasa yang
digunakan untuk membuat halaman web. HTML dikirimkan kepada pengguna oleh web server,
untuk kemudian ditampilkan oleh web browser. Sebagai sebuah markup language, HTML
bertugas hanya memberikan informasi mengenai isi dari konten (dengan cara memberikan
“tanda” pada teks, makanya disebut markup), tanpa memiliki informasi mengenai tampilan
(style) dari konten tersebut. HTML hanya memberitahukan browser bahwa bagian tertentu dari
sebuah tulisan merupakan kutipan, atau harus dicetak tebal. Bagaimana bentuk dari tulisan cetak
tebal tidak diatur dalam HTML.
Karena bertugas hanya memberikan informasi isi (semantik), HTML bersifat sangat sederhana,
biasanya hanya sepasang penanda (tag) yang melingkupi teks yang ingin ditandai. Listing di
bawah memberikan contoh potongan HTML pada teks:
Scala (yang adalah kepanjangan dari "<u>Scalable Language</u>") merupakan
sebuah bahasa pemrograman yang dirancang untuk digunakan dalam berbagai
lingkungan,
mulai dari <i>script</i> sederhana sampai dengan sebuah sistem yang besar dan
rumit.
Istilah kerennya, Scala adalah sebuah <b>general purpose programming
language</b>.

4. bagian mana yang merupkana HTML pada kode di atas? Dengan mudah tentunya anda dapat
melihat, bahwa bagian yang merupakan kode HTML adalah kode-kode yang tidak dapat dibaca
seperti <u>Scalable Language</u>. Penanda teks seperti <u></u> tersebut dikenal dengan
nama tag pada HTML. Setiap tag memberikan arti khusus kepada teks. Tag “u” berarti teks
tersebut bergaris bawah (underlined). Tag “i” berarti teks dicetak miring (italics), dan tag “b”,
seperti yang dapat ditebak, memberikan huruf tebal (bold).
Kaget bahwa ternyata HTML sesederhana itu? Ya, HTML memang sangat sederhana!
Pembelajaran HTML biasanya berkisar dalam eksperimen dan pembacaan dokumentasi
mengenai setiap tag. Kedua hal tersebut menyebabkan penguasaan HTML hanya menjadi
masalah kerajinan membaca dan pengalaman. Tantangan dalam pengembangan web pada sisi
klien utamanya terdapat pada memperindah tampilan dan interaktifitas dari teks yang telah
diformat HTML.
Cascading StyleSheet
Jadi, kalau HTML hanya berguna untuk menandai teks, bagaimana kita memberikan tampilan
yang bagus pada teks tersebut? Dokumen HTML ditingkatkan tampilannya menggunakan sebuah
bahasa lain, yang dikenal dengan nama Cascading Stylesheet, atau CSS. CSS sendiri merupakan
bahasa deklaratif yang sangat kompleks, sehingga intrik utamanya tidak dapat dijelaskan di
dalam beberapa paragraf, seperti pada HTML. Penjelasan detil mengenai CSS akan diberikan
pada bagian selanjutnya. Untuk sekarang, hanya perlu dimengerti bahwa untuk membuat
halaman web yang indah, diperlukan pengetahuan HTML dan CSS yang baik.
Javascript
Pada sebuah website modern, web yang enak dipandang mata saja tidak cukup. Sebuah website
yang baik juga kerap kali bersifat sangat interaktif. Nama anda terlalu panjang untuk masuk ke
dalam kolom nama di formulir pendaftaran? Tenang saja, web kami akan memperpanjang kolom
tersebut begitu anda mengetik sampai di ujung kolom. Ingin mengetahui apakah user id yang
diinginkan telah terpakai? Tenang, otomatis dicek kok, tidak perlu melakukan apa-apa.
Interaktifitas seperti yang dicontohkan di atas dimungkinkan dengan adanya kode khusus pada
website tersebut yang dijalankan oleh browser ketika kita menampilkan website. Kode yang
dijalankan ini ditulis dalam bahasa pemrograman Javascript, yang dapat langsung berinteraksi
dengan HTML dan mengubah atribut, CSS, maupun isi dari HTML itu sendiri. Sama seperti
CSS, Javascript tidak akan dibahas mendalam pada bagian ini, dan bahkan pada buku ini sama
sekali. Pembahasan mengenai Javascript akan memerlukan sebuah buku tersendiri, karena
kayanya bahasa pemrograman ini.
Browser dan Kode Klien
Sejauh ini, kita telah mengetahui bahwa pengembangan pada sisi klien dilakukan dengan
menggunakan tiga bahasa, yaitu: HTML sebagai bahasa penanda konten, CSS untuk membuat
desain tampilan, dan Javascript untuk inteaktifitas. Ketika browser menerima ketiga kode

5. tersebut dari web server, maka browser akan menjalankan ketiga kode tersebut. Hasil dari
eksekusi kode tersebut ialah tampilan website yang diberikan kepada pengguna. Jadi, tugas
utama dari pengembang browser ialah membaca dan menjalankan kode pada sisi klien, untuk
kemudian ditampilkan kepada pengguna.
Untuk memastikan berbagai browser yang ada dapat mengintepretasikan kode web dengan
benar, sebuah badan standar dibuat untuk memberikan spesifikasi yang dapat dirujuk oleh
pengembang browser. Badan standar ini dikenal dengan nama W3C (World Wide Web
Consortium). Idealnya, setiap browser yang mengimplementasikan spesifikasi HTML dan CSS
sesuai dengan standar yang ditentukan (W3C hanya mengatur kedua standar tersebut, Javascript
diatur oleh badan lain) akan mendapatkan tampilan yang sama dari kode yang sama. Sayangnya,
hal ini tidak sesuai dengan kenyataan yang ada di lapangan. Pada implementasinya, setiap
browser memiliki “keunikan” tersendiri dalam mengintepretasikan HTML dan CSS. Hal ini
menyebabkan pengembang pada sisi klien harus menguji web yang dikembangkan pada banyak
browser, atau setidaknya beberapa browser yang paling populer, untuk memastikan halaman
yang dikembangkan dapat tampil sesuai dengan keinginan.
Beberapa browser utama yang umumnya didukung oleh kebanyakan website karena pangsa
pasarnya yang besar yaitu: Microsoft Internet Explorer, Mozilla Firefox, Google Chrome, Apple
Safari, dan Opera. Tabel Browser dan engine-nya table-browser-engine memperlihatkan engine
yang digunakan oleh masing-masing browser.
Browser dan engine-nya
Browser
Engine
Microsoft Internet Explorer Trident
Mozilla Firefox
Gecko
Google Chrome
Webkit
Apple Safari
Webkit
Opera
Presto (Kedepannya Webkit)
Perbedaan-perbedaan tampilan yang diashilkan oleh setiap engine dapat berupa perbedaan kecil,
seperti ukuran font, ataupun perbedaan yang sangat besar, seperti perbedaan layout. Gambar
Perbedaan Tampilan Browser memperlihatkan contoh perbedaan tampilah oleh empat buah
browser, dari satu halaman yang sama [2]. Jika ditemui perbedaan-perbedaan sejenis pada bagian
selanjutnya dalam buku ini, catatan khusus akan diberikan kepada pembaca.

6. Perbedaan Tampilan Browser
Adanya perbedaan cara setiap browser menampilkan ini menyebabkan pengembang web pada
umumnya memiliki banyak browser pada sistem pengembangan mereka, dan biasanya akan
menguji tampilan web mereka pada banyak browser. Begitupun, kesamaan tampilan 100%
umumnya tidak menjadi tujuan akhir, karena hal tersebut akan sangat sulit dilakukan. Yang
umumnya ingin dicapai dengan pengujian pada banyak browser ialah tidak adanya tampilan yang
menyebabkan web tidak dapat digunakan pada browser tertentu, misalnya komponen yang saling
menimpa ataupun tulisan yang terlalu besar.
Jika anda masih belum memiliki seluruh browser utama yang tertera pada tabel Browser dan
engine-nya, tunggu apa lagi? Segera pasang semua browser yang ada, dan lihat berbagai
perbedaan dari tiap browser pada website yang sering anda kunjungi!