Membangun halaman kecil

Situs satu halaman yang lengkap untuk toko roti di lingkungan sekitar muat dalam sekitar 50 baris HTML, dan setiap elemen di dalamnya berasal dari sembilan unit sebelumnya.

Rencanakan sebelum mengetik

Sebelum menulis HTML apa pun, tuliskan apa yang harus disampaikan halaman, dengan kata-kata sederhana dan berurutan. Untuk toko roti kecil, isinya mungkin: nama, menu tautan singkat, roti yang dipanggang hari ini, jam buka, foto roti, cara mendaftar untuk menerima kabar, dan alamat. Setiap butir lalu menyarankan sebuah elemen: nama menjadi <h1> di dalam <header>, tautan ditaruh di <nav>, jam buka berupa tabel, daftar roti berupa <ul>, pendaftaran berupa formulir, dan alamat ditaruh di <footer>. Merencanakan konten lebih dulu juga dilakukan tim profesional; HTML mengikuti dari situ.

Struktur yang sudah jadi

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Corner Bakery</title>
</head>
<body>
  <header>
    <h1>Corner Bakery</h1>
    <nav>
      <ul>
        <li><a href="#today">Today</a></li>
        <li><a href="#hours">Hours</a></li>
        <li><a href="#news">News</a></li>
      </ul>
    </nav>
  </header>
  <main>
    <section id="today">
      <h2>Baked today</h2>
      <ul>...</ul>
    </section>
    <section id="hours">
      <h2>Opening hours</h2>
      <table>...</table>
    </section>
    <section id="news">
      <h2>Get our news</h2>
      <form>...</form>
    </section>
  </main>
  <footer>
    <p>12 Mill Street, Springfield</p>
  </footer>
</body>
</html>

Dua baris di head adalah hal baru. <meta name="viewport" content="width=device-width, initial-scale=1"> memberi tahu ponsel untuk memakai lebar layar sebenarnya alih-alih berpura-pura menjadi layar desktop lalu mengecilkan halaman; kursus CSS menjelaskannya di unit desain responsif. Menu adalah daftar tautan di dalam <nav>, yang diumumkan pembaca layar sebagai navigation, list, 3 items. Setiap tautan menu menunjuk ke id sebuah section, jadi halaman berfungsi sebagai satu dokumen yang digulir.

Periksa seperti seorang peninjau

Setelah halaman ditulis, telusuri seperti peninjau yang teliti. Baca judul-judulnya saja: apakah judul-judul itu menceritakan isi halaman? Tekan Tab dari atas: bisakah kamu mencapai setiap tautan dan kolom formulir dengan urutan yang masuk akal, dan bisakah kamu melihat di mana fokusnya? Lihat setiap gambar: apakah teks alt-nya menyatakan apa yang hilang tanpa gambar itu, atau kosong karena gambarnya hiasan? Klik setiap label: apakah label itu memfokuskan kolomnya? Terakhir, tempel halaman ke W3C Markup Validation Service di validator.w3.org, yang mendaftar kesalahan seperti elemen yang tidak ditutup atau id yang ganda.

Halamannya akan tampak polos: teks hitam di atas putih, tautan biru, huruf bawaan browser. Itu tidak apa-apa, bahkan berguna. Halaman dengan HTML yang baik sudah bisa dibaca di semua perangkat, berfungsi dengan papan ketik dan pembaca layar, dan bisa dicetak. Kursus CSS dimulai tepat dari halaman semacam ini dan menambahkan warna, jarak, dan tata letak di atasnya, tanpa mengubah satu baris pun HTML-nya.

Bangun dengan langkah-langkah kecil

Tulis halaman dengan langkah-langkah kecil dan lihat hasilnya setelah setiap langkah: kerangka dulu, lalu header dan menu, lalu satu section demi satu section. Kalau ada yang tampak salah, kamu hanya perlu memeriksa beberapa baris baru. Di komputermu sendiri, simpan file sebagai index.html dan buka dengan mengeklik dua kali; browser menampilkannya langsung dari disk. Untuk menerbitkannya, unggah file yang sama ke layanan hosting web, dan server mengirimkannya kepada siapa pun yang meminta alamatnya, sama seperti awal unit pertama.