HTML: kerangkanya

Kalau kamu pernah lihat orang bangun rumah, mereka nggak mulai dari ngecat. Yang pertama dipasang itu tiang, dinding, dan atap. Warna dan perabot belakangan.

Bab ini sama. Kita mulai membangun aplikasi catatan uang jajan, dan langkah pertamanya adalah kerangka: judul, kotak buat ngisi nama jajanan, kotak buat ngisi harga, dan sebuah tombol. Belum cantik, belum bisa ngapa-ngapain. Tapi tanpa kerangka ini, nggak ada yang bisa dicantikkan atau dihidupkan.

Alat yang kita pakai namanya HTMLHTMLBahasa untuk menyusun kerangka halaman web, seperti judul, paragraf, kotak isian, dan tombol.Penjelasan lengkap →. Kamu sebenarnya sudah kenalan di Bab 2 waktu mengetik <h1>. Sekarang kita kenalan lebih dalam.

Tag: label buat browser

HTML bekerja dengan cara memberi label pada tulisan. Label itu namanya tagTagPenanda di HTML yang ditulis di antara tanda kurung sudut, seperti h1 untuk judul atau p untuk paragraf.Penjelasan lengkap →, ditulis di antara tanda < dan >. Misalnya:

<p>Catat setiap kali kamu jajan.</p>

Coba bedah. <p> adalah tag pembuka, artinya “mulai paragraf”. Lalu ada tulisan isinya. Terakhir </p> adalah tag penutup, artinya “paragrafnya selesai”. Perhatikan garis miring / di tag penutup. Cuma itu bedanya.

Seluruh paket itu, dari tag pembuka sampai tag penutup, disebut elemenElemenSatu bagian halaman web yang lengkap, misalnya sebuah judul atau sebuah tombol.Penjelasan lengkap →.

Di kerangka uang jajan, kita bakal memakai lima tag ini:

Satu keunikan: <input> tidak punya tag penutup. Wajar, soalnya kotak isian nggak membungkus tulisan apa pun di dalamnya, jadi nggak ada yang perlu “ditutup”.

Atribut: keterangan tambahan di dalam tag

Sekarang lihat kotak isian yang akan kita bikin:

<input id="nama" type="text" placeholder="contoh: Bakso">

Bagian id="nama", type="text", dan placeholder="..." namanya atributAtributKeterangan tambahan di dalam tag pembuka, seperti id, type, atau placeholder.Penjelasan lengkap →. Atribut adalah keterangan tambahan yang ditulis di dalam tag pembuka, polanya nama="nilai".

Tiga atribut yang kita pakai:

• id adalah nama panggilan unik untuk satu elemen (istilah resminya IDID (nama elemen)Nama unik untuk satu elemen, supaya mudah ditunjuk oleh CSS atau JavaScript.Penjelasan lengkap →). Kenapa penting? Di Bab 5, JavaScript bakal memanggil elemen ini lewat namanya. Satu halaman nggak boleh punya dua elemen dengan id yang sama, seperti satu kelas yang nggak boleh punya dua murid dengan nama panggilan yang persis sama.
• type menentukan jenis isian. text untuk tulisan biasa, number untuk angka. Kalau pakai number, kotaknya khusus angka, dan di HP keyboard yang muncul pun keyboard angka.
• placeholder adalah tulisan samar petunjuk di dalam kotak. Begitu pengguna mulai mengetik, tulisan samarnya hilang.

Satu atribut lagi ada di <label>: for. Isinya harus sama dengan id kotak yang dimaksud, jadi:

<label for="nama">Jajan apa?</label>
<input id="nama" type="text" placeholder="contoh: Bakso">

Dengan begitu browser tahu label “Jajan apa?” adalah keterangan buat kotak nama. Bonusnya, kalau tulisan labelnya diklik, kursor otomatis loncat ke kotaknya.

Struktur satu halaman HTML utuh

Sampai sini kamu sudah kenal bahan-bahannya. Sekarang lihat “wadah” yang membungkus semuanya. Satu halaman HTML yang rapi punya struktur seperti ini:

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <title>Uang Jajanku</title>
</head>
<body>
  <h1>Uang Jajanku</h1>
  <p>Catat setiap kali kamu jajan.</p>
</body>
</html>

Bayangkan sebuah buku. Ada sampul dan keterangan penerbit, ada juga isi bukunya. Struktur HTML pun begitu:

• <!DOCTYPE html> adalah pemberitahuan di baris paling atas untuk browser: “ini halaman HTML versi modern”. Tulis saja persis begitu.
• <html lang="id"> membungkus seluruh halaman. Bagian lang="id" memberi tahu bahwa halaman ini berbahasa Indonesia.
• <head> adalah “sampul dan keterangan penerbit”: hal-hal di balik layar yang nggak tampil di halaman. Di dalamnya ada <title> yang jadi tulisan di tab browser, dan <meta charset="UTF-8"> yang memastikan huruf, tanda baca, dan emoji tampil dengan benar.
• <body> adalah isi bukunya, semua yang tampil di layar. Judul, paragraf, kotak isian, tombol, semuanya taruh di sini.

Baris yang menjorok ke dalam (diberi spasi di depan) cuma untuk kerapian supaya mudah dibaca manusia. Browser nggak peduli.

Di Bab 2 kodenya nggak punya <head>, tapi tetap jalan karena browser itu pemaaf. Meski begitu, biasakan menulis lengkap seperti di atas.

Satu fitur lagi yang berguna: komentar. Tulisan di antara <!-- dan --> nggak ditampilkan browser. Isinya catatan buat manusia, misalnya penanda “tulis di sini ya”.

Coba sendiri: bikin kerangka uang jajan

Kodenya sudah punya <head>, judul, dan satu paragraf. Tugasmu: menambahkan kotak isian dan tombol di tempat komentar Tantangan.

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <title>Uang Jajanku</title>
</head>
<body>
  <h1>Uang Jajanku</h1>
  <p>Catat setiap kali kamu jajan.</p>

  <!-- Tantangan: tambahkan kotak isian dan tombol di bawah sini -->

</body>
</html>

Urutannya:

1. Tambahkan label dan kotak isian untuk nama jajanan. Contohnya sudah ada di atas tadi: label yang for-nya nama, dan input ber-id nama.
2. Tambahkan label dan kotak isian kedua untuk harga. Isi labelnya Harganya berapa?, id-nya harga, type-nya number, dan placeholder contoh: 15000.
3. Tambahkan tombol dengan id tombol-tambah dan tulisan Tambah.
4. Terakhir, tambahkan paragraf <p id="total">Total: Rp 0</p>. Di sini nanti jumlah pengeluaranmu muncul.

Ketik id-nya persis seperti itu (nama, harga, tombol-tambah, total) karena nama-nama ini bakal dipanggil lagi di bab-bab berikutnya. Buntu? Tombol Lihat jawaban selalu ada.

Hasilnya masih polos dan rapat banget, dan tombolnya belum ngapa-ngapain kalau diklik. Itu normal. Namanya juga masih kerangka. Di bab berikutnya kita beri baju, dan setelahnya kita beri otak.