Informasi Lokasi

Deskripsi destinasi sudah berdiri; pertanyaan pengunjung berikutnya ada tiga: di mana tempatnya, kapan buka, dan bagaimana mencapainya. Pada bagian ini kita melengkapi tiap destinasi dengan address, tautan peta, dan jam buka bertanda time, lalu memasang section kontak di beranda — lengkap dengan tautan telepon yang bisa ditekan dari ponsel.

Kontak Redaksi di Beranda #

Section ketiga beranda menampung kontak redaksi, dan id-nya menjadikannya sasaran tautan “Kontak” dari dua halaman lain. Potongan berikut sama persis dengan baris 49-56 index.html:

    <!-- Kontak redaksi -->
    <section id="kontak">
      <h2>Kontak</h2>
      <address>
        <p>Redaksi Jelajah Bandung<br>Jalan Braga No. 10, Bandung 40111</p>
        <p>Telepon: <a href="tel:+62221234567">(022) 123-4567</a></p>
      </address>
    </section>

Mari kita bedah baris demi baris:

1. section ber-id="kontak" (baris 2): inilah target yang dijanjikan fragment sejak Bagian 1; tautan “Kontak” dari dua halaman lain kini mendarat di sini.
2. address (baris 4-7): rumah informasi kontak pemilik dokumen, seperti dibahas chapter Address — di dalamnya boleh berupa p, br, daftar, hingga tautan; alamat pos dan telepon berada bersama dalam satu wadah bermakna.
3. Alamat dua baris dengan br (baris 5): baris pertama nama redaksi, baris kedua jalan dan kode pos — alamat memang tertulis demikian di surat.
4. Tautan tel: (baris 6): href memakai format internasional +62 tanpa spasi dan tanpa awalan nol, teks tampilannya tetap format lokal — persis aturan E.164 dari chapter Link Email dan Telepon. Di ponsel, satu ketukan membuka aplikasi telepon.

Alamat, Jam Buka, dan Peta Tiap Destinasi #

Di destinasi.html, informasi serupa menempel pada tiap article. Potongan berikut adalah bagian informasi lokasi Tangkuban Perahu — sama persis dengan baris 31-35 berkas final:

      <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>

Bedah potongan ini:

1. address per destinasi (baris 1-3): alamat fisik tempat wisata — address kini hadir di dalam article. Banyak elemen address dalam satu halaman sah, selama masing-masing menjadi kontak bagi konteksnya: ini alamat Tangkuban Perahu, bukan alamat situs.
2. Jam buka dengan dua time (baris 4): rentang dibangun dua elemen time dipisah tanda hubung. Nilai datetime="07:00" memakai pola HH:MM dari tabel chapter Time — jam tanpa tanggal; teks tampilan tetap format Indonesia 07.00.
3. Tautan peta (baris 5): URL absolut ber-skema https:// karena menunjuk situs luar — kita tidak bisa menebak posisi halaman kita relatif terhadap situs orang lain. Pasangan atributnya dibedah di bawah.

Membuka Peta di Tab Baru #

Tautan peta sengaja tidak membawa pengunjung meninggalkan panduan kita. Dua atribut bekerja bersama:

• target="_blank": browser membuka URL di tab baru, halaman panduan tetap ada di tab sebelumnya — persis perilaku dari chapter Membuka Link di Tab Baru.
• rel="noopener": memutus akses halaman baru ke objek window halaman kita. Browser modern sudah menyiratkannya untuk target="_blank", tetapi menuliskannya eksplisit tetap dianjurkan.

Teks tautannya pun sengaja: “Buka peta lokasi Tangkuban Perahu” menyebut tujuan secara utuh, bukan sekadar “peta” yang hanya bisa dipahami dari konteks sekitarnya.

Hasil pada Browser #

Alamat dan jam buka tampil menjorok khas address pada sebagian browser. Klik tautan peta — tab baru terbuka, halaman destinasi tetap di belakangnya. Buka beranda dari ponsel dan ketuk nomor telepon: aplikasi panggilan menyiapkan nomor redaksi.

Inilah section kontak beranda yang baru terpasang — pada ponsel sungguhan, satu ketukan pada nomornya membuka aplikasi panggilan; di dalam iframe biasanya ditahan browser:

Dan inilah isi main halaman destinasi pada akhir Bagian 3 — ketiga destinasi kini lengkap dengan alamat, jam buka, dan tautan petanya; coba klik salah satu tautan peta, ia terbuka di tab baru:

Demo kedua hanya memuat isi main halaman destinasi — tautan petanya tetap berfungsi karena bertautan keluar; alamat maps.example.com adalah domain contoh fiktif.

Ringkasan Bagian 3 #

• address menampung alamat dan telepon redaksi di beranda, serta alamat fisik tiap destinasi di dalam article-nya.
• tel: menulis nomor format E.164 pada href dan format lokal pada teks tampilannya.
• Jam buka memakai dua time dengan datetime pola HH:MM; tautan peta absolut membuka tab baru dengan target="_blank" dan rel="noopener".

Bagian berikutnya menyempurnakan menu yang sama di ketiga berkas dan menandai halaman yang sedang dibuka.