Langkau ke kandungan
WANCODE
EN

Apa Sebenarnya Berlaku Apabila Anda Buka Laman Web?

10 minitPemulaHTML · CSS · JS

Dalam pelajaran ini

  • Terangkan apa itu pelayar (browser), pelayan (server) dan request
  • Tahu bahawa halaman web bermula sebagai fail teks biasa: HTML, CSS dan JavaScript
  • Sunting fail HTML dan lihat pelayar memaparkan perubahan anda

Idea utama

Laman web ialah sekumpulan fail teks. Pelayar anda meminta fail itu daripada server, kemudian membaca teksnya dan melukis halaman.

Apabila anda taip alamat seperti wancode.my dan tekan Enter, banyak perkara berlaku dalam masa kurang sesaat. Berita baiknya: anda cuma perlu empat idea untuk memahaminya.

Browser
Aplikasi yang anda guna sekarang (Chrome, Safari, Firefox…). Ia meminta fail dan menukarnya menjadi halaman.
Server
Komputer di suatu tempat di internet yang menyimpan fail laman web dan menghantarnya apabila diminta.
Request / Response
Pelayar menghantar request ("tolong hantar halaman ini"). Server membalas dengan response (fail tersebut).
HTML · CSS · JavaScript
HTML ialah kandungan dan struktur. CSS ialah rupa. JavaScript ialah tingkah laku.
Ikuti setiap langkah memuatkan halaman. Ini ilustrasi — tiada request rangkaian sebenar dibuat.

Halaman itu cuma teks

Ini ialah satu halaman web yang lengkap. Perkataan di dalam kurungan sudut — seperti <h1> — dipanggil tag. Tag memberitahu pelayar apa jenis setiap bahagian teks: tajuk, perenggan, tajuk halaman.

index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>My Page</title>
  </head>
  <body>
    <h1>Hello, web!</h1>
  </body>
</html>
  • <head> menyimpan maklumat tentang halaman. <title> dipaparkan pada tab pelayar, bukan pada halaman.
  • <body> menyimpan semua yang anda boleh lihat.
  • Tag <link> dalam fail di editor memuatkan style.css, yang mengawal warna dan jarak.

Tiada apa yang ajaib di sini. Kalau anda boleh sunting fail teks, anda boleh sunting laman web. Cuba dalam editor — pratonton dilukis semula semasa anda menaip.

Dalam index.html, tukar teks di dalam <h1> supaya ia menyapa daripada anda (contohnya Hello, I'm Aina!). Kemudian tukar <title> kepada apa-apa selain My Page.

Semakan

  • Teks tajuk telah ditukar
  • Tajuk halaman telah ditukar

Uji kefahaman

Q1

Apa yang pelayar lakukan dengan fail HTML yang diterimanya?

Q2

Di mana teks dalam <title> dipaparkan?

Apa yang anda pelajari

  • Pelayar meminta fail daripada server dan memaparkannya.
  • Halaman web ialah teks: HTML untuk struktur, CSS untuk gaya, JavaScript untuk tingkah laku.
  • Tag seperti <h1> dan <p> melabelkan jenis setiap kandungan.
Pratonton

Output konsol daripada kod anda akan dipaparkan di sini.

Langkah 1 daripada 2