Cara kerja web, dan halaman pertama kamu

Cari tahu apa yang terjadi saat kamu mengetikkan alamat di browser, dan membangun fondasi situs web kamu.

Apa yang terjadi saat kamu membuka situs web

Saat kamu mengetik sesuatu seperti www.myschool.com ke browser, inilah yang terjadi:

Browser mengirimkan pesan melalui internet ke server – komputer tempat situs web berada: “Hei, kirimkan saya halamannya!”
Server membalas dan mengirim kembali file – teks, gambar, kode.
Browser menggambar halaman di layar kamu menggunakan file tersebut.

File yang dikirimkan server ditulis dalam bahasa yang disebut HTML. Dan itulah yang akan kamu pelajari. Untuk saat ini situs web kamu tidak akan berada di server – situs tersebut akan berada di komputer kamu sendiri, dan kita akan menayangkannya secara online pada pelajaran terakhir.

Pilih proyek kamu

Sebelum kamu menulis satu baris pun, putuskan apa yang sebenarnya kamu buat. kamu akan mengerjakan salah satu proyek berikut untuk seluruh level:

🏫 Situs web sekolah saya – jadwal, menu makan siang, acara, guru
🙋 Situs web pribadi saya – tentang saya, apa yang saya suka, kreasi saya
🌍 Jurnal perjalanan – perjalanan, foto, kenangan
⚽ Situs web klub olahraga – tim, pertandingan, pelatihan

Memilih satu? Besar. Tugas setiap pelajaran akan mencakup keempat proyek – temukan saja satu yang sesuai dengan keinginan kamu.

Tunjukkan pada saya: kerangka setiap halaman di Bumi dimulai

Setiap halaman web – mulai dari halaman kamu hingga halaman YouTube – dimulai dengan kerangka yang sama persis:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Page name</title>
  </head>
  <body>
    <h1>A big heading</h1>
    <p>Some text.</p>
  </body>
</html>

Mari kita terjemahkan ke dalam bahasa Inggris sederhana:

Kode	Apa yang diberitahukan kepada browser
`<!doctype html>`	”Perhatian, halaman HTML dimulai!”
`<html lang="en">`	“Semua yang ada di dalamnya adalah satu halaman, dan dalam bahasa Inggris.”
`<kepala>` … `</kepala>`	”Ini informasi tentang halaman tersebut.” Pengunjung tidak melihatnya.
`<meta charset="UTF-8">`	“Mungkin ada karakter khusus di sini, bersiaplah untuk mereka.”
`<judul>` … `</judul>`	Nama halaman – ditampilkan di tab browser.
`<tubuh>` … `</tubuh>`	”Segala sesuatu yang dilihat pengunjung dimulai dari sini.” Semua konten kamu ada di sini.

Perhatikan cara kerja tag: <h1> membuka sesuatu dan </h1> (dengan garis miring) menutupnya lagi. Apa pun yang ada di antara mereka adalah milik tag itu. Sama seperti tanda kurung.

Giliran kamu 💪

Buka folder situs web saya kamu (dari Tingkat Persiapan) di VS Code, dan buka file index.html di dalamnya. Hapus apa pun yang ada di sana dan ketik kerangka halaman dari contoh di atas.
Ubah <title> dan <h1> agar sesuai dengan proyek kamu, dan tambahkan paragraf <p> di bawah judul dengan satu kalimat tentang situs web kamu.
Simpan (Ctrl+S) dan buka index.html di browser kamu (atau segarkan halaman dengan F5).

Tidak yakin bagaimana caranya? Berikut adalah solusi untuk setiap proyek:

🏫 Solusi: Situs web sekolah saya

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Riverside Elementary</title>
  </head>
  <body>
    <h1>Riverside Elementary School</h1>
    <p>Welcome to our school's website. You'll find the schedule, lunch menu, and photos from events here.</p>
  </body>
</html>

🙋 Solusi: Situs web pribadi saya

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Jake Miller</title>
  </head>
  <body>
    <h1>Hi, I'm Jake</h1>
    <p>This is my website. I love soccer, Minecraft, and building websites.</p>
  </body>
</html>

🌍 Solusi: Jurnal perjalanan

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Where We've Been</title>
  </head>
  <body>
    <h1>Where We've Been 🌍</h1>
    <p>A journal of our trips and adventures. A new story gets added every holiday.</p>
  </body>
</html>

⚽ Solusi: Situs web klub olahraga

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Riverside Eagles FC</title>
  </head>
  <body>
    <h1>Riverside Eagles FC</h1>
    <p>The official website of our soccer club. Results, roster, and training schedule.</p>
  </body>
</html>

✅

Periksa diri kamu: Tab browser menampilkan nama situs web kamu, dan halaman menampilkan judul dan kalimat kamu. Jika ya – batu fondasinya sudah diletakkan!

Apa yang bisa diambil dari pelajaran ini

Situs web = file yang dikirimkan server ke browser. Browser mengambil halaman darinya.
Setiap halaman memiliki kerangka yang sama: <head> (informasi tentang halaman) dan <body> (konten terlihat).
Tag dibuka seperti <ini> dan ditutup seperti </ini>.