Halaman web itu cuma berkas

Kamu tiap hari buka halaman web. Instagram, YouTube, situs sekolah, toko online. Rasanya kayak “sesuatu yang canggih dan rumit”, kan?

Kabar baiknya: di balik layar, sebuah halaman web itu cuma berkas teks. Sama jenisnya dengan catatan di Notepad. Di pelajaran ini kamu bakal lihat sendiri buktinya, dan langsung mengubah satu halaman.

Berkas: wadah isi komputer

BerkasFileSatu "lembar" data yang disimpan di komputer atau HP — bisa berisi tulisan, gambar, suara, atau kode.Penjelasan lengkap → (sering disebut file) adalah satu “lembar” isi di komputer. Fotomu berkas. Lagu berkas. Tugas Word juga berkas.

Setiap berkas punya nama, dan di ujung namanya ada ekstensi: tulisan pendek setelah titik yang memberi tahu jenisnya.

Jadi kalau ada berkas bernama index.html, itu berkas halaman web. Ekstensi .html adalah tanda pengenalnya.

Isinya teks biasa

Bedanya dengan foto atau lagu: isi berkas .html adalah teks polosTeks polosTulisan apa adanya tanpa format apa pun (tanpa jenis huruf, warna, atau tebal-miring).Penjelasan lengkap →. Huruf-huruf biasa yang bisa kamu ketik sendiri. Kalau dibuka di Notepad, kamu bisa membacanya.

Isinya kira-kira begini:

<h1>Halo, dunia!</h1>
<p>Ini halaman web pertamaku.</p>

Tulisan itu belum “jadi halaman”. Ia baru resep-nya. Yang mengubahnya menjadi tampilan di layar adalah program lain.

Browser: si pembaca

BrowserBrowserAplikasi untuk membuka halaman web, seperti Chrome, Firefox, Safari, atau Edge.Penjelasan lengkap → (Chrome, Edge, Firefox, Safari) adalah program yang membaca berkas HTML lalu menampilkannya. Tugasnya mirip pembaca yang disodori naskah, lalu mementaskannya.

Karena itu ada dua wujud yang perlu kamu bedakan:

1. Teks di berkas: yang kamu tulis, lengkap dengan tanda <h1> dan kawan-kawannya.
2. Hasil di layar: yang browser tampilkan. Tanda <h1> tidak kelihatan; yang muncul tulisan besar tebal.

Kalau kamu menulis <h1>Halo</h1>, di layar cuma muncul Halo dalam huruf besar. Tanda-tandanya “diterjemahkan”, tidak ditampilkan.

Cara bikinnya: cukup editor teks

Untuk membuat halaman web, kamu tidak perlu program mahal. Cukup:

1. Sebuah editor teks. Notepad bawaan Windows sudah cukup. Nanti kamu bisa pindah ke editor kodeCode editorAplikasi khusus untuk menulis kode — seperti Notepad, tapi pintar (ada warna, nomor baris, dan saran otomatis).Penjelasan lengkap → yang lebih enak, tapi untuk belajar, Notepad nggak masalah.
2. Simpan dengan nama berakhiran .html, misalnya index.html.
3. Klik dua kali berkasnya. Browser terbuka dan menampilkannya.

Itu seluruh rahasianya. Tidak ada instalasi, tidak ada internet yang wajib.

Coba sendiri: ubah tulisannya

Kotak di bawah ini bekerja seperti pasangan Notepad dan browser. Satu sisi adalah editor: isi berkas. Sisi lainnya adalah hasil di layar. Ubah tulisan di editor, hasilnya ikut berubah.

Tugasmu:

1. Ganti tulisan di dalam <h1> dengan namamu.
2. Ganti isi paragraf <p> dengan satu kalimat tentang dirimu.
3. Jangan hapus tanda < dan > di sekitarnya, cukup ganti tulisan di tengahnya.

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <title>Halaman pertamaku</title>
</head>
<body>
  <h1>Halo, dunia!</h1>
  <p>Ini halaman web pertamaku. Tulisan ini hidup di sebuah berkas.</p>

  <!-- Tantangan: ganti judul dengan namamu, lalu ganti isi paragraf -->

</body>
</html>

Perhatikan: kamu tidak menjalankan apa-apa. Kamu cuma mengedit teks, dan tampilannya mengikuti.

Browser itu pemaaf

Coba hapus satu tanda > secara sengaja, atau salah ketik nama tag. Kemungkinan besar browser tidak bakal marah. Tidak ada tulisan merah, tidak ada layar error. Ia akan berusaha menebak maksudmu, dan kalau gagal, hasilnya cuma tampil aneh.

Ini kabar baik sekaligus kabar buruk:

• Baik: kamu nggak akan “merusak” komputer dengan salah ketik.
• Buruk: kesalahan nggak diumumkan. Kamu harus melihat hasilnya dan membandingkan dengan yang kamu maksud.

Jadi kebiasaan terbaikmu: tulis sedikit, lihat hasilnya, tulis lagi.

Kesalahan umum pemula

• Menyimpan sebagai .txt (lihat peringatan Notepad di atas). Ciri-cirinya: browser menampilkan semua kodenya mentah-mentah.
• Mengedit tapi lupa menyimpan, lalu heran kenapa tampilannya tidak berubah.
• Lupa menyegarkan (refresh) browser setelah menyimpan. Tekan F5.
• Mengira halaman web “harus online”. Berkas HTML di komputermu sendiri sudah bisa dibuka tanpa internet.

Kamu sekarang tahu bentuk halaman web: berkas teks. Tapi tulisan <h1> dan <p> tadi artinya apa, dan kenapa selalu berpasangan? Jawabannya ada di pelajaran berikutnya: tag.