🌐 Bagian 0: Web Server & Browser

🚧 Awalnya dari Masalah

Di masa awal jaringan komputer, muncul satu masalah besar: bandwidth sangat terbatas, tetapi kebutuhan pengiriman data sangat besar.

Mengirim file berat itu lambat, mahal, dan tidak efisien. Maka muncul ide: bagaimana jika informasi dikirim dalam bentuk teks ringan, tetapi tetap memiliki makna?

💡 Solusinya: gunakan teks biasa, tapi diberi struktur dan arti khusus.

🧠 Lahirnya HTML

HTML (HyperText Markup Language) adalah plain text yang diberi “makna tambahan”.

<h1> → Judul
<p> → Paragraf
<a> → Link

Dengan HTML, data menjadi:

📦 Ringan untuk dikirim
📖 Mudah dibaca
🖥️ Bisa ditampilkan oleh browser

HTML bukan bahasa pemrograman, tapi bahasa untuk menyusun struktur informasi.

📖 Website Generasi Awal (Satu Arah)

Di awal kemunculannya, website hanya berfungsi sebagai media informasi.

Pengguna hanya membaca
Tidak bisa berinteraksi

💡 Ibaratnya seperti brosur digital — hanya dilihat, tidak bisa dibalas.

🔄 Website Interaktif (Dua Arah)

Seiring waktu, kebutuhan berkembang. Pengguna ingin:

Mengisi form
Login
Mengirim data

Maka lahirlah website interaktif.

🔁 User mengirim data → Server memproses → Hasil dikirim kembali

🧱 Masalah Ego Teknologi

Dulu, setiap perusahaan punya sistem sendiri:

Microsoft hanya kompatibel dengan Microsoft
IBM hanya dengan IBM
Novell hanya dengan Novell

❗ Akibatnya: sistem tidak saling terhubung

🤝 Lahirnya Standarisasi

Akhirnya muncul kesadaran:

💡 “Kalau mau terhubung, semua harus menggunakan bahasa yang sama.”

Maka HTML menjadi standar yang bisa dibaca oleh semua sistem.

🌐 Fondasi Internet: TCP/IP

Internet berjalan di atas protokol yang sama, yaitu TCP/IP.

IP → alamat tujuan
TCP → memastikan data sampai utuh

📦 IP = alamat rumah
🚚 TCP = kurir yang memastikan paket sampai dengan baik

🚀 Perkembangan Hingga HTML5

HTML terus berkembang hingga sekarang menjadi HTML5.

Dulu: hanya teks
Sekarang: video, audio, animasi, aplikasi

💡 Website modern bisa seperti aplikasi (YouTube, Gmail, dll)

⚙️ Bagaimana Cara Kerja Internet?

User → Browser → Internet → Server → Browser

User mengetik alamat website
Browser mengirim permintaan
Server menerima dan memproses
Server mengirim HTML
Browser menampilkan halaman

🧑‍💻 Siapa di Balik Layar?

Di balik tampilan website yang kita lihat, sebenarnya ada “mesin” yang sedang bekerja.

Mesin ini bertugas melayani (serve) permintaan dari pengguna. Dari sinilah muncul istilah Server.

💡 Server = pelayan
💡 Client (Browser) = yang meminta layanan

Jadi ketika kita membuka website:

Browser bertindak sebagai client (yang meminta)
Server bertindak sebagai pelayan (yang melayani)

🔁 Browser minta halaman → Server kirimkan HTML → Browser tampilkan

🖥️ Apa Itu Web Server?

Web server adalah software (program) yang berjalan di komputer server dan bertugas:

Menerima permintaan dari browser
Mencari file yang diminta (HTML, CSS, JS)
Mengirimkan hasilnya kembali ke browser

💡 Jadi server bukan hanya komputer, tapi juga program yang melayani permintaan.

Contoh Web Server

IIS (Internet Information Services) → buatan Microsoft, biasanya untuk Windows Server
Apache → open source, sangat populer dan banyak digunakan
Nginx → ringan dan cepat, sering dipakai untuk website besar

🔥 Web server inilah yang “menyajikan” website ke seluruh dunia

🌐 Apa Itu Browser?

Browser adalah aplikasi yang digunakan oleh pengguna untuk membuka dan melihat website.

Mengirim permintaan ke server
Menerima file HTML
Menerjemahkan HTML menjadi tampilan visual

💡 Browser = penerjemah HTML menjadi tampilan yang bisa dilihat manusia

Contoh Browser

Microsoft Edge → browser modern dari Microsoft
Google Chrome → paling populer saat ini
Mozilla Firefox → fokus pada privasi
Netscape → salah satu browser pertama dalam sejarah internet

🔥 Tanpa browser, HTML hanya teks biasa yang tidak “terlihat indah”

⚙️ Hubungan Web Server dan Browser

🌐 Browser ↔ Web Server
🤝 Saling bekerja sama

Browser meminta halaman
Web server mencari dan mengirimkan file
Browser menampilkan hasilnya

Tanpa web server → tidak ada yang melayani
Tanpa browser → tidak ada yang menampilkan

💡 Website hanya bisa berjalan jika ada server + browser

💡 HTML = yang terlihat
⚙️ Backend = yang bekerja di belakang layar

📡 Layanan di Internet

Internet bukan hanya website, tapi banyak layanan lain:

📧 SMTP → kirim email
📥 POP3 / IMAP → menerima email
📁 FTP → transfer file
🌐 HTTP → website

💡 Internet adalah kumpulan layanan, bukan hanya web.

🛠️ Cara Install Web Server

Agar bisa mencoba website sendiri di komputer (localhost), kita perlu menginstall web server. Berikut dua contoh yang paling umum digunakan:

🪟 Install IIS (Windows)

IIS (Internet Information Services) adalah web server bawaan dari Microsoft. Tidak perlu download, cukup diaktifkan saja.

Buka Control Panel
Pilih Programs → Programs and Features
Klik Turn Windows features on or off
Cari dan centang Internet Information Services (IIS)
Klik OK dan tunggu proses selesai

Setelah selesai, buka browser dan akses:

http://localhost

Jika berhasil, akan muncul halaman default IIS 🎉

💡 Folder utama IIS biasanya ada di:
C:\inetpub\wwwroot

🐧 Install Apache (XAMPP)

Apache biasanya digunakan melalui paket seperti XAMPP agar lebih mudah.

Download XAMPP dari website resminya
Install seperti biasa (Next → Next → Finish)
Buka XAMPP Control Panel
Klik tombol Start pada Apache

🌐 Download XAMPP resmi di:
https://www.apachefriends.org

Setelah Apache berjalan, buka:

http://localhost

Jika berhasil, akan muncul halaman dashboard XAMPP 🎉

💡 Folder website (htdocs) ada di:
C:\xampp\htdocs

⚖️ Perbedaan Singkat

IIS → cocok untuk Windows & teknologi Microsoft (.NET)
Apache → fleksibel & banyak digunakan untuk PHP

🔥 Untuk belajar HTML dasar, keduanya sama-sama bisa digunakan

⚠️ Kenapa Tidak Bisa Menjalankan IIS & Apache Bersamaan?

Dalam satu komputer (1 OS), pada umumnya kita tidak bisa menjalankan dua web server sekaligus seperti IIS dan Apache secara bersamaan (aktif di waktu yang sama).

💡 Biasanya hanya boleh 1 web server aktif dalam satu waktu

🔌 Penyebab Utamanya: Port yang Sama

Web server bekerja menggunakan port, dan secara default:

HTTP menggunakan port 80
HTTPS menggunakan port 443

Masalahnya:

❗ IIS dan Apache sama-sama ingin menggunakan port 80

Sedangkan dalam sistem operasi:

🚫 Satu port hanya bisa digunakan oleh satu aplikasi saja

Jadi kalau IIS sudah aktif dan menggunakan port 80, maka Apache tidak bisa berjalan, dan sebaliknya.

💥 Apa yang Terjadi Kalau Dipaksa?

Apache gagal start
Atau IIS tidak bisa diakses
Muncul error seperti: Port 80 already in use

🛠️ Solusi Jika Ingin Keduanya

Sebenarnya bisa menjalankan keduanya, tetapi harus mengubah port salah satunya.

Contoh: Apache tetap di port 80
IIS diubah ke port 8080

Cara aksesnya:

http://localhost:8080

🎯 Kesimpulan

✔ 1 web server = normal dan sederhana
⚠ 2 web server = harus beda port

🔥 Untuk pemula, disarankan gunakan satu saja dulu (IIS atau Apache)

🌐 Kenapa File .HTML Langsung Bisa Dibuka?

Setelah kita menginstall web server seperti IIS atau Apache, maka file dengan ekstensi .html bisa langsung dijalankan di browser.

💡 Karena HTML adalah standar baku di internet

HTML digunakan oleh semua website di dunia sebagai format utama untuk menampilkan halaman.

Browser memahami HTML secara langsung
Semua web server mengirimkan HTML ke browser
Tidak tergantung pada bahasa pemrograman tertentu

Artinya:

🌐 Apapun teknologi di belakangnya, hasil akhirnya tetap HTML

⚙️ Dari Mana HTML Itu Datang?

HTML bisa dibuat langsung (manual), atau dihasilkan oleh bahasa backend seperti:

.NET (C#, ASP.NET)
PHP
Node.js
dan lainnya

Contohnya:

User buka website → Server proses (PHP / .NET) → hasilnya dikirim ke browser dalam bentuk HTML

Jadi sebenarnya browser tidak tahu apakah itu dibuat dengan PHP atau .NET. Yang dia terima hanya:

📄 HTML + CSS + JavaScript

⚠️ Perbedaan IIS dan Apache (Backend)

Walaupun sama-sama bisa menjalankan file HTML, tetapi untuk backend biasanya berbeda:

IIS → umumnya digunakan untuk .NET (ASP.NET)
Apache → umumnya digunakan untuk PHP

💡 HTML tetap sama, tetapi “mesin pembuat HTML”-nya berbeda

🚫 Kenapa Tidak Dicampur?

Secara normal:

❌ .NET tidak digunakan di Apache (XAMPP)
❌ PHP tidak digunakan di IIS

Karena:

Setiap web server punya konfigurasi dan ekosistem sendiri
Bahasa backend butuh engine khusus untuk dijalankan
Integrasi bawaan sudah dioptimalkan masing-masing

⚙️ IIS = mesin .NET
⚙️ Apache = mesin PHP

Memang ada cara untuk menggabungkan (advanced), tetapi untuk pembelajaran dasar:

🔥 Gunakan pasangan standar:
IIS + .NET
Apache + PHP

🎯 Kesimpulan

✔ HTML adalah bahasa standar internet
✔ Semua web server mengirim HTML ke browser
✔ Backend hanya “membuat” HTML
✔ Browser hanya menampilkan HTML

💡 Jadi HTML adalah “bahasa universal” yang menyatukan semua teknologi web

🎯 Latihan 0

Coba buka 3 website berbeda (misalnya Google, YouTube, dan TTC).

Perhatikan kecepatannya
Perhatikan tampilannya

Diskusikan: kenapa bisa berbeda?