Tutorial HTML / Membuat situs web kecil dengan beberapa halaman

Sebuah situs web kecil dengan beberapa halaman menggabungkan struktur dokumen, area semantik, tautan, dan formulir. Dalam proyek ini, Anda membuat halaman Beranda, Tentang Kami, dan Kontak dalam folder yang sama, menavigasi di antaranya, dan memeriksa hasilnya. HTML sendiri tidak dapat menerima atau menyimpan pesan kontak, jadi formulir di sini hanyalah demonstrasi input dan bukan layanan kontak yang berfungsi.

Siapkan file-file tersebut

Buat folder baru dan simpan ketiga file teks UTF-8 sederhana ini di dalamnya. Nama file Anda harus persis sesuai dengan nilai dari href di menu. Pertama-tama bandingkan bagaimana jalur relatif diselesaikan dari lokasi penyimpanan file di Tautan: Jalur, fragmen halaman, dan Email.

small-site/
  index.html
  about.html
  contact.html

Pastikan editor tidak menambahkan ekstensi lain, seperti .txt. Menjaga ketiga file tetap bersama memungkinkan href="about.html" untuk menemukan halaman "Tentang Kami" menggunakan jalur relatif. Jika Anda memindahkan file ke folder lain nanti, perbarui tautan yang sesuai. Selesaikan versi berbasis teks terlebih dahulu; kemudian Anda dapat menambahkan gambar yang diperbolehkan penggunaannya, dengan teks alternatif yang sesuai.

Buat halaman beranda

Simpan dokumen lengkap berikut dengan nama index.html. Gunakan tiga tujuan menu yang sama di setiap halaman. Peran header, nav, dan main mengikuti tata letak semantik di Struktur halaman dengan elemen semantik .

<!doctype html>
<html lang="id-ID">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Beranda | Taman Kecil</title>
  <meta name="description" content="Beranda halaman latihan Taman Kecil, dengan tautan untuk perkenalan dan latihan formulir kontak.">
  <style>
    body { margin: 1rem; font-family: sans-serif; line-height: 1.6; }
    nav a { display: inline-block; margin: 0 .5rem .5rem 0; }
    nav a[aria-current="page"] { font-weight: bold; }
    textarea, input { max-width: 100%; box-sizing: border-box; font: inherit; }
    textarea { width: 24rem; }
    :focus-visible { outline: 3px solid #005fcc; outline-offset: 3px; }
  </style>
</head>
<body>
  <header>
    <nav aria-label="Navigasi Utama">
      <a href="index.html" aria-current="page">Beranda</a>
      <a href="about.html">Tentang Kami</a>
      <a href="contact.html">Kontak</a>
    </nav>
  </header>
  <main>
    <h1>Taman Kecil</h1>
    <p>Panduan kecil untuk orang-orang yang mulai menanam tanaman.</p>
  </main>
  <footer><p>Halaman latihan Taman Kecil</p></footer>
</body>
</html>

Membuka index.html harus menampilkan menu dan judul "Taman Kecil". Tautan Tentang Kami dan Kontak baru akan berfungsi setelah Anda membuat file-file mereka di folder yang sama. h1 yang ditampilkan di sini adalah milik halaman contoh, bukan bagian dari tutorial ini.

Buat halaman Tentang Kami dan Kontak

Simpan dokumen lengkap berikut dengan nama about.html. Ini mempertahankan halaman target yang sama dari menu, sementara untuk Tentang Kami diberikan judul, deskripsi, dan status menu saat ini sendiri. Pembedaan antara memeriksa nilai GET dan menerima pesan mengikuti penjelasan permintaan dalam Struktur formulir dan GET vs. POST.

<!doctype html>
<html lang="id-ID">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Tentang Kami | Taman Kecil</title>
  <meta name="description" content="Perkenalan halaman latihan Taman Kecil, ditujukan untuk orang-orang yang mulai menanam tanaman.">
  <style>
    body { margin: 1rem; font-family: sans-serif; line-height: 1.6; }
    nav a { display: inline-block; margin: 0 .5rem .5rem 0; }
    nav a[aria-current="page"] { font-weight: bold; }
    textarea, input { max-width: 100%; box-sizing: border-box; font: inherit; }
    textarea { width: 24rem; }
    :focus-visible { outline: 3px solid #005fcc; outline-offset: 3px; }
  </style>
</head>
<body>
  <header>
    <nav aria-label="Navigasi Utama">
      <a href="index.html">Beranda</a>
      <a href="about.html" aria-current="page">Tentang Kami</a>
      <a href="contact.html">Kontak</a>
    </nav>
  </header>
  <main>
    <h1>Tentang Kami</h1>
    <p>Taman Kecil adalah halaman latihan untuk orang-orang yang mulai menanam tanaman.</p>
  </main>
  <footer><p>Halaman latihan Taman Kecil</p></footer>
</body>
</html>

Simpan dokumen lengkap berikut dengan nama contact.html. Formulir latihan mengirimkan masukan dengan GET ke URL dokumen saat ini dan tidak mengirim pesan yang sebenarnya.

<!doctype html>
<html lang="id-ID">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Kontak | Taman Kecil</title>
  <meta name="description" content="Latihlah memasukkan nama dan pesan percobaan serta mengonfirmasinya, tanpa mengirim permintaan kontak yang nyata.">
  <style>
    body { margin: 1rem; font-family: sans-serif; line-height: 1.6; }
    nav a { display: inline-block; margin: 0 .5rem .5rem 0; }
    nav a[aria-current="page"] { font-weight: bold; }
    textarea, input { max-width: 100%; box-sizing: border-box; font: inherit; }
    textarea { width: 24rem; }
    :focus-visible { outline: 3px solid #005fcc; outline-offset: 3px; }
  </style>
</head>
<body>
  <header>
    <nav aria-label="Navigasi Utama">
      <a href="index.html">Beranda</a>
      <a href="about.html">Tentang Kami</a>
      <a href="contact.html" aria-current="page">Kontak</a>
    </nav>
  </header>
  <main>
    <h1>Latihan Formulir Kontak</h1>
    <p>Contoh ini tidak mengirimkan pesan. Gunakan hanya teks percobaan.</p>
    <form method="get">
      <p><label for="visitor-name">Nama</label>
        <input id="visitor-name" name="name" required></p>
      <p><label for="message">Pesan</label>
        <textarea id="message" name="message" rows="4" required></textarea></p>
      <button type="submit">Periksa nilai yang dimasukkan</button>
    </form>
  </main>
  <footer><p>Halaman latihan Taman Kecil</p></footer>
</body>
</html>

Setiap blok adalah dokumen yang lengkap, jadi simpanlah sebagai file utuh, daripada menempatkan elemen html atau main tambahan di dalam salinan yang ada. Pertahankan target menu yang sama, tetapi tetapkan aria-current="page" hanya pada tautan yang mewakili dokumen ini.

"Periksa nilai yang dimasukkan" tidak mengirimkan pesan kepada siapa pun. Peramban memeriksa bidang yang wajib diisi dan mengirimkan input menggunakan GET ke URL dokumen saat ini. Gunakan hanya teks uji, karena nilai yang dikirimkan dapat muncul di URL. Layanan kontak yang sebenarnya memerlukan penangan sisi server, langkah-langkah privasi, kontrol anti-spam, dan informasi keberhasilan atau kesalahan yang jelas.

Gunakan tabel ini untuk membandingkan layar yang telah dibuat. Tautan saat ini ditampilkan dengan tebal, sementara aria-current menyampaikan statusnya terlepas dari perlakuan visual ini.

Periksa kriteria keberhasilan dan kembangkan situs web secara bertahap

Selesaikan versi dasar sebelum menambahkan setiap ekstensi: daftar yang berguna di bagian "Tentang kami", gambar dengan teks alternatif yang sesuai, atau informasi opsional dalam elemen details. Ulangi pemeriksaan navigasi, sintaks, dan keyboard setelah setiap tambahan, agar setiap masalah baru dapat dikaitkan hanya dengan satu perubahan.

Saat memperbarui menu bersama, perbarui ketiga salinannya, tetapi tetapkan aria-current pada tautan yang sesuai di masing-masing salinan. Uji kembali jalur relatif setelah penyebaran: penggunaan huruf besar/kecil pada nama file dan direktori penyebaran bisa berbeda dari lingkungan lokal.

Periksa situs web yang telah selesai

1. Buka index.html dan pastikan bahwa setiap tautan menu membuka file yang benar.
2. Navigasikan dari "Tentang kami" dan "Kontak" juga ke kedua halaman lainnya; jangan hanya menguji menu halaman utama.
3. Pastikan bahwa setiap judul tab yang terlihat dan h1 menggambarkan halaman ini.
4. Gunakan Tab untuk mengakses setiap tautan dan setiap kontrol bidang kontak.
5. Cobalah menyerahkan bidang kosong, lalu masukkan nilai uji sambil mengamati URL.
6. Periksa setiap file dengan Nu HTML Checker, perbaiki kesalahannya, lalu periksa lagi.

Jika sebuah tautan gagal, periksa terlebih dahulu nama file dan jalur relatif. Jika Anda mengubah menu bersama, perbarui ketiga salinannya. Ketika sebuah situs web berkembang, menjadi penting untuk menjaga markup berulang tetap konsisten. Dalam latihan ini, diharapkan sebuah formulir yang tidak mengirim pesan nyata; tujuannya adalah untuk membuat dan memeriksa antarmuka HTML. Bedakan hasil validator dari perilaku halaman yang sebenarnya. Ikuti langkah dalam Menemukan kesalahan dan memvalidasi dokumen HTML untuk memeriksa keduanya.