Setiap hari kamu membuka halaman web, mungkin tanpa sadar. Artikel yang sedang kamu baca ini salah satunya. Kotak masuk emailmu juga, begitu pula daftar hasil pencarian yang kamu gulir tadi, dan layar tempat kamu membayar tagihan listrik. Tapi kalau ada yang minta kamu menjelaskan halaman web itu sebenarnya apa, mungkin kamu butuh berpikir sejenak. Itu wajar, dan setelah membaca artikel ini kamu akan bisa menjawabnya dengan jelas.
Kita akan mulai dari yang paling dasar dan menyusunnya pelan-pelan. Tidak perlu bekal apa pun sebelumnya. Kalau kamu pernah penasaran apa yang sebetulnya terjadi saat kamu mengetik sebuah alamat lalu sebuah halaman muncul, tulisan ini cocok untukmu.
Halaman web adalah sebuah dokumen
Inilah definisi paling jujur dan paling sederhana: halaman web adalah sebuah dokumen yang diambil browser dari suatu tempat di internet, lalu ditampilkan di layarmu.
Bayangkan sebuah dokumen kertas sebentar, misalnya surat atau selebaran. Di dalamnya ada teks, mungkin judul di bagian atas, mungkin gambar di tengah, dan ada struktur yang memberitahu mana yang penting. Halaman web kurang lebih sama, hanya saja dokumennya berada di sebuah komputer yang lokasinya jauh, dan alih-alih dibaca di atas kertas, browser-lah yang menggambarnya di layarmu.
Dokumen itu biasanya ditulis dengan bahasa bernama HTML (HyperText Markup Language). HTML pada dasarnya hanya teks yang diberi label. Label-label itu memberitahu browser hal seperti “bagian ini judul”, “bagian ini paragraf”, dan “bagian ini tautan ke halaman lain”. Potongan kecil HTML terlihat seperti ini:
<h1>Halo</h1>
<p>Ini sebuah paragraf di halaman web.</p>
<a href="https://acy-partner.com">Tautan yang bisa kamu klik</a>Browser membaca teks itu, memahami labelnya, lalu mengubahnya menjadi halaman rapi yang benar-benar kamu lihat. Kamu tidak perlu membaca HTML mentah itu sendiri, browser yang mengerjakannya untukmu.
Inti gagasannya dalam satu kalimat
Halaman web adalah sebuah dokumen (hampir selalu dokumen HTML) yang diunduh dan ditampilkan oleh browser. Semua hal lain dibangun di atas fakta sederhana itu.
Bagaimana halaman sampai ke layarmu
Membayangkan dari mana dokumen itu berasal akan sangat membantu. Halaman web tidak tinggal di dalam ponsel atau laptopmu. Mereka berada di komputer lain, yang disebut server, yang selalu menyala dan terhubung ke internet, menunggu untuk membagikan dokumen ketika diminta.
Saat kamu mengetik sebuah alamat (misalnya acy-partner.com) atau mengklik tautan, browser mengirim permintaan sopan melintasi internet ke server yang tepat. Server mencari dokumen yang kamu minta lalu mengirim salinannya kembali. Browser menerimanya dan menampilkannya. Perjalanan bolak-balik itu biasanya hanya butuh sepersekian detik.
Kamu (browser) Server
-------------- ------
"Tolong kirim mencari
halaman di --- permintaan --> halamannya
acy-partner.com"
<--- jawaban ----- mengirim
browser dokumennya
menampilkan halamanAlamat yang kamu ketik disebut URL (Uniform Resource Locator). Anggap saja itu alamat lengkap untuk satu dokumen tertentu. Sama seperti alamat rumah menunjuk ke satu rumah, URL menunjuk ke satu halaman.
Halaman, situs, dan aplikasi web
Di sinilah banyak pemula mulai bingung, jadi mari kita pilah baik-baik. Tiga istilah ini sering dipakai bergantian dalam obrolan, padahal artinya berbeda.
Halaman web adalah satu dokumen, persis seperti yang baru saja kita definisikan.
Situs web adalah kumpulan halaman yang saling berkaitan dan menjadi satu kesatuan, biasanya berada di bawah satu alamat. Blog yang sedang kamu baca ini adalah sebuah situs web. Ada halaman beranda, halaman artikel ini, halaman “tentang kami”, dan banyak lainnya. Semuanya berbagi desain dan nama domain, lalu dihubungkan oleh tautan. Jadi hubungan situs web dengan halaman web kira-kira seperti sebuah buku dengan satu lembar halaman di dalamnya.
Aplikasi web adalah situs web yang tidak sekadar menampilkan dokumen, tapi membuatmu bisa melakukan sesuatu dan langsung merespons tindakanmu. Lembar kerja daring, klien email, atau dasbor mobile banking adalah aplikasi web. Kamu tidak cuma membacanya; kamu mengetik, menyeret, menghitung, menyimpan, dan halamannya berubah seketika tanpa perlu dimuat ulang. Batas antara situs web canggih dan aplikasi web memang tidak tegas, tapi patokan ini cukup membantu.
Berikut gagasan yang sama dalam bentuk tabel:
| Istilah | Artinya | Contoh sehari-hari |
|---|---|---|
| Halaman web | Satu dokumen tunggal | Artikel yang kamu baca ini |
| Situs web | Sekumpulan halaman terkait | Seluruh blog blog.acy-partner.com |
| Aplikasi web | Situs web yang kamu gunakan secara interaktif | Kotak masuk email atau lembar kerja daring |
Cara gampang mengingatnya
Halaman = satu dokumen. Situs = banyak halaman jadi satu. Aplikasi = situs yang aktif kamu gunakan, bukan sekadar dibaca. Kalau ragu istilah mana yang pas, tanyakan: “Aku sedang membacanya, atau sedang melakukan sesuatu dengannya?”
Tiga hal penyusun sebuah halaman
Halaman web sebagian besar berupa HTML, tapi pada praktiknya biasanya ada dua bahasa lain yang ikut menyertai. Kamu belum perlu mempelajarinya hari ini, cukup tahu peran masing-masing, karena pemula sering tertukar membedakannya.
HTML: strukturnya
HTML adalah kerangkanya. Ia menentukan apa saja yang ada di halaman dan makna tiap bagiannya, mulai dari judul, paragraf, gambar, tautan, tombol, dan sebagainya. Kalau sebuah halaman hanya punya HTML, ia tetap berfungsi, hanya saja tampilannya polos tanpa gaya, mirip dokumen ketikan tanpa format apa pun.
CSS: tampilannya
CSS (Cascading Style Sheets) adalah penataan gayanya. Ia mengatur bagaimana halaman terlihat, seperti warna, jenis huruf, jarak antar elemen, ukuran, dan tata letak secara keseluruhan. CSS-lah yang membuat satu situs terasa elegan dan situs lain terasa ceria, padahal keduanya dibangun dari HTML yang sejenis di baliknya. Hilangkan CSS, isinya tetap ada; hanya tampilannya jadi gersang.
JavaScript: perilakunya
JavaScript adalah bahasa yang membuat halaman bisa melakukan sesuatu. Ia berjalan di dalam browser dan merespons apa yang kamu lakukan, misalnya membuka menu saat diketuk, memeriksa formulir sebelum dikirim, atau memuat konten baru tanpa memuat ulang seluruh halaman. JavaScript-lah yang mengubah dokumen statis menjadi sesuatu yang terasa hidup, dan inilah bahan utama yang mendorong sebuah situs web menjadi aplikasi web.
Berikut pembagian tugasnya secara sekilas:
| Lapisan | Pertanyaan yang dijawab | Tugas |
|---|---|---|
| HTML | Ini apa? | Struktur dan isi |
| CSS | Tampilannya seperti apa? | Gaya dan tata letak |
| JavaScript | Apa yang dilakukannya? | Perilaku dan interaksi |
Analogi yang ramah pemula: HTML itu bata dan ruangan-ruangan sebuah rumah, CSS itu cat dan perabotnya, sedangkan JavaScript itu listrik dan saluran air yang membuat rumah benar-benar berfungsi. Di sini kita baru menyebut ketiganya. Masing-masing layak dijelaskan lebih dalam, dan penjelasan itu bisa kamu temukan di tempat lain di blog ini.
Halaman statis dan halaman dinamis
Ada satu perbedaan lagi yang patut disebut sekilas, karena istilah ini akan sering kamu dengar.
Halaman statis sama untuk semua orang dan tidak berubah kecuali ada yang menyunting berkasnya. Halaman “tentang kami” sederhana biasanya statis, server membagikan dokumen yang persis sama setiap kali.
Halaman dinamis disusun ulang sesuai keadaan, siapa dirimu, apa yang kamu cari, atau apa isi basis data saat itu. Beranda media sosialmu bersifat dinamis, karena dirangkai khusus untukmu setiap kali dimuat. Yang penting, ketika dokumennya sampai ke browser, ia tetaplah sebuah halaman web, yaitu dokumen yang ditampilkan browser. “Dinamis” menggambarkan bagaimana dokumen itu disiapkan, bukan apa wujud dasarnya begitu tiba.
Jangan terlalu memusingkan istilahnya
Statis lawan dinamis, situs web lawan aplikasi web, semua ini deskripsi yang berguna, bukan kategori yang kaku. Satu proyek yang sama bisa punya halaman statis dan halaman dinamis berdampingan. Pegang dulu inti gagasannya: ini adalah dokumen yang ditampilkan browser. Istilah-istilah itu hanya menggambarkan ragamnya.
Rangkuman
Mari satukan kembali keseluruhan gambarannya.
- Halaman web adalah sebuah dokumen, hampir selalu ditulis dengan HTML, yang diambil browser dari sebuah server lalu ditampilkan di layarmu.
- Server menyimpan dokumen-dokumen ini dan mengirim salinannya setiap kali browser meminta, dikenali lewat URL-nya.
- Situs web adalah kumpulan halaman terkait di bawah satu alamat, sedangkan aplikasi web adalah situs web yang aktif kamu gunakan, bukan sekadar dibaca.
- Sebuah halaman biasanya tersusun dari tiga lapisan: HTML untuk struktur, CSS untuk tampilan, dan JavaScript untuk perilaku.
- Halaman statis sama untuk semua orang; halaman dinamis dirangkai sesuai keadaan, tapi keduanya sampai ke browser sebagai halaman web biasa.
Kalau hanya satu hal yang ingin kamu ingat, ingatlah ini: halaman web adalah sebuah dokumen, dan tugas browser adalah mengambilnya lalu menampilkannya kepadamu. Semua hal lain dalam pengembangan web hanyalah rincian yang ditumpuk di atas fondasi itu.
Langkah lanjutan yang wajar adalah mengamati lebih dekat bagaimana HTML, CSS, dan JavaScript bekerja sama sebagai tiga lapisan, lalu mulai menjelajahi HTML itu sendiri, bahasa yang menyusun hampir setiap halaman. Pelan-pelan saja, dan biarkan setiap gagasan mengendap sebelum lanjut. Sekarang kamu sudah punya kerangka berpikir tempat semua hal lain bergantung.
