Daftar Destinasi

Tautan “Destinasi” pada kerangka Bagian 1 masih menuju berkas yang tidak ada. Bagian ini menghidupkannya: kita mengisi beranda dengan tiga kartu destinasi, membuat destinasi.html berisi versi lengkapnya, lalu menghubungkan keduanya lewat fragment yang menyeberang halaman — teknik yang belum kita pakai pada proyek satu berkas.

Kartu Destinasi di Beranda #

Section kedua beranda merangkum tiga destinasi pilihan redaksi. Tambahkan setelah section sambutan; potongan ini sama persis dengan baris 28-48 berkas final:

    <!-- Kartu destinasi populer -->
    <section id="destinasi-populer">
      <article>
        <h2>Tangkuban Perahu</h2>
        <img src="assets/tangkuban-perahu.svg" alt="Kawah Ratu di puncak Tangkuban Perahu dilihat dari tepian jalur pengunjung" width="800" height="600">
        <p>Gunung berapi setinggi 2.084 meter di kawasan Lembang, sekitar 25 kilometer di utara pusat kota.</p>
        <p><a href="destinasi.html#tangkuban-perahu">Detail destinasi Tangkuban Perahu</a></p>
      </article>
      <article>
        <h2>Kawah Putih</h2>
        <img src="assets/kawah-putih.svg" alt="Danau kawah berwarna pucat kebiruan dikelilingi tebing berpasir" width="800" height="600">
        <p>Danau kawah pucat kebiruan di kawasan Ciwidey, sekitar dua jam berkendara dari pusat kota ke arah selatan.</p>
        <p><a href="destinasi.html#kawah-putih">Detail destinasi Kawah Putih</a></p>
      </article>
      <article>
        <h2>Jalan Braga</h2>
        <img src="assets/jalan-braga.svg" alt="Jalan berlapis paving dengan deretan gedung bersejarah di kedua sisinya" width="800" height="600">
        <p>Jalan bersejarah di pusat kota; deretan gedung kuno di kedua sisinya kini berisi kedai kopi, galeri, dan toko suvenir.</p>
        <p><a href="destinasi.html#jalan-braga">Detail destinasi Jalan Braga</a></p>
      </article>
    </section>

Mari kita bedah baris demi baris:

1. section pengelompok (baris 2): wadah kartu diberi id="destinasi-populer" sebagai penanda struktural, tanpa heading sendiri — tiap kartu sudah membawa judulnya, pengecualian yang sama dipakai section resep pada katalog resep.
2. article per kartu (baris 3, 9, 15): uji dicabut dari chapter Section vs Article menentukan pilihan ini — kartu “Kawah Putih” tetap masuk akal bila dicetak atau dibagikan terpisah, maka wadahnya article.
3. h2 judul destinasi (baris 4, 10, 16): satu tingkat di bawah h1 sambutan — level yang sama dipakai judul destinasi di destinasi.html, sehingga “Kawah Putih” terbaca selevel di kedua halaman.
4. Gambar kartu (baris 5, 11, 17): src merujuk folder assets/; alt menjelaskan yang terlihat, width dan height menahan ruang sebelum termuat.
5. Tautan detail (baris 7, 13, 19): nilai href menggabungkan nama berkas dan fragment — bahan utama bagian ini, dibedah setelah melihat targetnya.

Halaman Daftar Destinasi #

Buat src/destinasi.html di folder yang sama — head-nya meniru pola beranda dengan judul dan deskripsi berbeda. Potongan berikut sama persis dengan baris 22-36 berkas final:

    <h1>Daftar Destinasi</h1>
    <p>Tiga destinasi berikut adalah pilihan redaksi untuk kunjungan pertama Anda ke Bandung. Setiap destinasi dilengkapi alamat, jam buka, dan tautan peta lokasi.</p>
    <p>Beranda merangkum ketiganya dalam kartu singkat; dari sana, tautan detail melompat langsung ke bagian destinasi terkait di halaman ini.</p>
    <!-- Destinasi: Tangkuban Perahu -->
    <article id="tangkuban-perahu">
      <h2>Tangkuban Perahu</h2>
      <p>Gunung berapi setinggi 2.084 meter di kawasan Lembang, sekitar 25 kilometer di utara pusat kota. Kendaraan dapat langsung menuju bibir kawah utama, Kawah Ratu.</p>
      <p>Sepanjang jalur pengunjung tersedia kios suvenir dan jagung bakar. Suhu di puncak bisa turun di bawah 15 derajat Celsius, jadi siapkan jaket.</p>
      <p>Akses: sekitar 45 menit berkendara dari Stasiun Bandung melalui Jalan Setiabudi.</p>
      <address>
        Jalan Raya Tangkuban Perahu, Cikahuripan, Lembang, Kabupaten Bandung Barat
      </address>
      <p>Jam buka: setiap hari <time datetime="07:00">07.00</time>–<time datetime="17:00">17.00</time> WIB.</p>
      <p><a href="https://maps.example.com/tangkuban-perahu" target="_blank" rel="noopener">Buka peta lokasi Tangkuban Perahu</a></p>
    </article>

Bedah potongan ini:

1. h1 dan pengantar (baris 1-3): judul halaman berbeda dari beranda, dan begitu pula title pada head — dua tab, dua nama.
2. id pada article (baris 5): anchor dipasang di elemen terluar, sehingga lompatan mendarat di awal seluruh blok. Versi panjang ini pun lulus uji dicabut — kartu ringkas dan versi lengkapnya sama-sama article.
3. Dua paragraf deskripsi lalu akses (baris 7-10): kartu di beranda merangkum satu kalimat; halaman daftar merinci dua paragraf plus rute. Informasi alamat, jam buka, dan peta menyusul pada Bagian 3 — dua article lain meniru pola yang sama.

Fragment yang Menyeberang Halaman #

Sekarang momen kuncinya. Chapter Link ke Bagian Halaman mengajarkan fragment sebagai penunjuk bagian di halaman yang sama: #kawah-putih berarti cari id itu di halaman ini. Tautan kartu kita menulis destinasi.html#kawah-putih — fragment menempel pada nama berkas, dan browser bekerja dua tahap:

Tahap memuat selalu dulu, tahap menggulir menyusul — beda mendasar dari fragment satu halaman. Address bar merekam keduanya: setelah klik, ia berakhir dengan destinasi.html#kawah-putih.

Hasil pada Browser #

Simpan kedua berkas dalam satu folder dan buka index.html. Tautan “Destinasi” memuat halaman daftar; dari kartu Kawah Putih, satu klik memuat destinasi.html lalu menggulir ke bagian Kawah Putih. Klik “Tips Perjalanan” — masih berkas tidak ditemukan; itu tugas Bagian 4.

Inilah keadaan beranda pada akhir Bagian 2 — tiga kartu destinasi kini tampil di bawah sambutan:

Pada demo, tiga gambar kartu diganti placeholder SVG dan seluruh tautan antarhalaman dimatikan (nilainya diganti #) karena demo hanya satu potongan berkas — lompatan destinasi.html#kawah-putih tidak bisa terjadi di sini; unduh berkasnya untuk mencoba fragment yang menyeberang halaman.

Ringkasan Bagian 2 #

• Kartu dan destinasi lengkap sama-sama article — keduanya lulus uji dicabut; id dipasang di elemen terluar agar lompatan mendarat di awal blok.
• destinasi.html#id bekerja dua tahap: muat berkasnya dulu, gulir ke id-nya kemudian — beda dari fragment satu halaman.

Bagian berikutnya melengkapi tiap destinasi dengan alamat, jam buka, dan peta lokasi.