Latihan: Menetapkan Elemen Header, Main, dan Footer di Halaman Profil

Belajar Dasar Pemrograman Web

Tools

Syukurlah! Semakin kaya akan ilmu dari materi ke materi setelah dipelajari sebelumnya. Seperti biasa, kita akan kembali praktik kali ini. Sudah siap?

Tujuan

Pada latihan ini, kita akan melakukan pengelompokan elemen berdasarkan kontennya. Ada konten yang bersifat sebagai kepala (header), pokok (main), dan kaki (footer). Halaman Profil yang telah kita miliki sebelumnya dapat dikelompokkan menjadi tiga bagian tersebut.

Nah, harapannya, browser akan semakin memahami hal yang sebenarnya ia tampilkan. Ini karena kita memanfaatkan tiga buah elemen, yaitu <header>, <main>, dan <footer>. Bagaimana dengan hasilnya? Mari kita lihat pada latihan ini.

Alur Latihan

Berikut adalah alur latihan kali ini.

Membuka hasil latihan terakhir dengan VSCode.
Membungkus judul halaman beserta deskripsinya dan daftar navigasi dengan elemen header.
Membungkus teks hak cipta dengan elemen footer.
Membungkus konten utama dengan elemen main.
Menjalankan dokumen HTML pada browser.

Latihan Menetapkan Elemen Header, Main, dan Footer di Halaman Profil

Berikut adalah langkah-langkah yang perlu diikuti agar praktik ini berjalan dengan baik.

Silakan buka proyek Halaman Profil terbaru dengan VS Code. Jika belum memilikinya, silakan Anda unduh dan buka proyek tersebut pada GitHub repository ini.

Kita akan membagi konten yang ditampilkan pada halaman web. Tentu saja konten tersebut berada dalam elemen <body>. Pembagian ini terbagi menjadi tiga bagian besar, yaitu heading, main, dan footer.

Pertama kali, kelompokkanlah konten judul besar dan navigasi menggunakan elemen <header>. Silakan sesuaikan kodenya seperti kode bercetak tebal berikut.

<body>
  <header>
    <h1>Bandung</h1>
    <p>
      Kota metropolitan terbesar di Provinsi Jawa Barat, sekaligus menjadi ibu kota provinsi tersebut.
    </p>
    <ul>
      <li><a href="#sejarah">Sejarah</a></li>
      <li><a href="#geografis">Geografis</a></li>
      <li><a href="#wisata">Wisata</a></li>
    </ul>
  </header>
 
  <!-- Kode lainnya disembunyikan... -->
</body>

Sebelumnya, kita telah membuat daftar navigasi menggunakan elemen list. Namun, browser tidak mengetahui bahwa elemen list tersebut merupakan navigation list karena ia hanyalah elemen yang menampilkan sebuah daftar barang saja. Oleh karena itu, kita akan memanfaatkan semantic element lainnya yang bernama <nav>. Silakan bungkus elemen list dengan elemen nav menjadi seperti berikut.

<body>
  <header>
    <h1>Bandung</h1>
    <p>
      Kota metropolitan terbesar di Provinsi Jawa Barat, sekaligus menjadi ibu kota provinsi
      tersebut.
    </p>
 
    <nav>
      <ul>
        <li><a href="#sejarah">Sejarah</a></li>
        <li><a href="#geografis">Geografis</a></li>
        <li><a href="#wisata">Wisata</a></li>
      </ul>
    </nav>
  </header>
 
  <!-- Kode lainnya disembunyikan... -->
</body>

Sudah selesai mengelompokkan konten kepala dengan elemen header. Kita akan masuk ke bagian konten kaki terlebih dahulu. Pada konten hak cipta (copyright)–biasanya berada di paling akhir dari konten body, pindahkan atau bungkus konten tersebut dalam elemen <footer>. Hasilnya seperti berikut.
```
<body>
  
 
  <footer>
    <p>Belajar Dasar Pemrograman Web &#169; 2019, Dicoding Academy</p>
  </footer>
</body>
```

Dua konten sudah kita kelompokkan. Terakhir adalah konten pokok atau utama. Elemen apa yang akan kita gunakan untuk mengelompokkan konten tersebut? Tentu saja jawabannya adalah elemen <main>. Silakan bungkus seluruh isi elemen di antara elemen <header> dan <footer> dengan elemen <main>. Hasilnya seperti berikut.

<body>
  <header>
    <!-- Kode lainnya disembunyikan... -->
  </header>
 
  <main>
    <h2 id="sejarah">Sejarah</h2>
    <img src="assets/image/history.jpg" alt="sejarah" />
    <p>
      Kata Bandung berasal dari kata bendung atau bendungan karena terbendungnya sungai Citarum oleh
      lava Gunung Tangkuban Parahu yang lalu membentuk telaga. Legenda yang diceritakan oleh
      orang-orang tua di Bandung mengatakan bahwa nama Bandung diambil dari sebuah kendaraan air
      yang terdiri dari dua perahu yang diikat berdampingan yang disebut perahu bandung yang
      digunakan oleh Bupati Bandung, R.A. Wiranatakusumah II, untuk melayari Ci Tarum dalam mencari
      tempat kedudukan kabupaten yang baru untuk menggantikan ibu kota yang lama di Dayeuhkolot.
    </p>
 
    <p>
      Berdasarkan filosofi Sunda, kata Bandung juga berasal dari kalimat Nga-Bandung-an Banda
      Indung, yang merupakan kalimat sakral dan luhur karena mengandung nilai ajaran Sunda.
      Nga-Bandung-an artinya menyaksikan atau bersaksi. Banda adalah segala sesuatu yang berada di
      alam hidup yaitu di bumi dan atmosfer, baik makhluk hidup maupun benda mati. Sinonim dari
      banda adalah harta. Indung berarti Ibu atau Bumi, disebut juga sebagai Ibu Pertiwi tempat
      Banda berada.
    </p>
 
    <h2 id="geografis">Geografis</h2>
    <img src="assets/image/geografis.jpg" alt="geografis" />
    <p>
      Kota Bandung dikelilingi oleh pegunungan, sehingga bentuk morfologi wilayahnya bagaikan sebuah
      mangkok raksasa,[9] secara geografis kota ini terletak di tengah-tengah provinsi Jawa Barat,
      serta berada pada ketinggian ±768 m di atas permukaan laut, dengan titik tertinggi di berada
      di sebelah utara dengan ketinggian 1.050 meter di atas permukaan laut dan sebelah selatan
      merupakan kawasan rendah dengan ketinggian 675 meter di atas permukaan laut.
    </p>
 
    <p>
      Kota Bandung dialiri dua sungai utama, yaitu Sungai Cikapundung dan Sungai Citarum beserta
      anak-anak sungainya yang pada umumnya mengalir ke arah selatan dan bertemu di Sungai Citarum.
      Dengan kondisi yang demikian, Bandung selatan sangat rentan terhadap masalah banjir terutama
      pada musim hujan.
    </p>
 
    <h2 id="wisata">Wisata</h2>
    <p>
      Sejak dibukanya Jalan Tol Cipularang, kota Bandung telah menjadi tujuan utama dalam menikmati
      liburan akhir pekan terutama dari masyarakat yang berasal dari Jakarta sekitarnya. Selain
      menjadi kota wisata belanja, kota Bandung juga dikenal dengan sejumlah besar bangunan lama
      berarsitektur peninggalan Belanda.
    </p>
 
    <h3>Farm House Lembang</h3>
    <img src="assets/image/farm-house.jpg" alt="farm house" />
    <p>
      Berada di jalur utama Bandung-Lembang, Farm House menjadi objek wisata yang tidak pernah sepi
      pengunjung. Selain karena letaknya strategis, kawasan ini juga menghadirkan nuansa wisata khas
      Eropa. Semua itu diterapkan dalam bentuk spot swafoto Instagramable.
    </p>
 
    <h3>Observatorium Bosscha</h3>
    <img src="assets/image/bosscha.jpg" alt="bosscha" />
    <p>
      Memiliki beberapa teleskop, antara lain, Refraktor Ganda Zeiss, Schmidt Bimasakti, Refraktor
      Bamberg, Cassegrain GOTO, dan Teleskop Surya. Refraktor Ganda Zeiss adalah jenis teleskop
      terbesar untuk meneropong bintang. Benda ini diletakkan pada atap kubah sehingga saat teropong
      digunakan, atap tersebut harus dibuka. Observatorium Bosscha boleh dikunjungi oleh siapapun,
      tanpa tiket. Namun, bagi yang ingin menggunakan teleskop Zeiss, wajib mendaftarkan diri. Untuk
      instansi atau lembaga pendidikan, diberikan jadwal hari Selasa sampai Jumat. Sementara itu,
      kunjungan individu dibuka setiap hari Sabtu.
    </p>
 
    <h2>Kota Bandung</h2>
    <p>Kota Kembang Paris van Java</p>
    <figure>
      <img src="assets/image/bandung-badge.png" />
      <figcaption>Lambang</figcaption>
    </figure>
  </main>
 
  <footer>
    <!-- Kode lainnya disembunyikan... -->
  </footer>
</body>

Alhasil, struktur body pada HTML menjadi seperti berikut.
Silakan jalankan proyek pada browser. Hasilnya akan seperti gambar berikut.

Bedah Kode

Keren! Halaman Profil kita semakin bagus dan terstruktur. Kita berhasil menerapkan elemen <header>, <main>, dan <footer>. Browser pun semakin senang karena ia paham hal yang ditampilkan ke user. Mari kita ulas apa yang telah dilakukan pada latihan ini.

Konten Kepala

Halaman Profil memiliki beberapa konten yang muncul pertama kali atau paling atas. Konten tersebut adalah judul dan navigation list. Nah, elemen-elemen ini kita bungkus dengan elemen <header>. Elemen ini dapat mengandung berbagai elemen, seperti logo halaman, judul halaman, daftar navigasi, dan sebagainya yang bukan merupakan konten utama. Dalam konteks latihan ini, kita membungkus judul halaman beserta deskripsinya dan elemen navigation list.

Konten Pokok

Konten pokok merupakan konten utama yang akan dikonsumsi oleh user. Dalam hal ini adalah teks bacaan atau artikel. Pada Halaman Profil, konten utama yang dimaksud adalah teks-teks yang membahas mengenai sejarah, geografis, dan wisata. Oleh karena itu, kita membungkusnya dengan elemen main.

Elemen main dalam satu halaman tidak boleh ganda. Hal ini berarti elemen main hanya diperbolehkan berjumlah satu dalam tiap halaman web.

Konten Kaki

Banyak informasi tambahan yang dapat disampaikan pada elemen kaki dan bisa kita bungkus dengan elemen footer. Tidak sedikit halaman web yang memanfaatkan elemen ini. Umumnya, elemen footer berisi informasi hak cipta, alamat, logo situs, formulir untuk langganan ke newsletter, dan sebagainya.

Apakah Anda sudah coba periksa hasilnya di browser? Jika sudah, apakah Anda melihat ada perubahan yang terjadi dari latihan sebelumnya? Jika menjawab “tidak ada”, jawaban Anda benar! Hal ini karena kita hanya menstrukturkan ulang dokumen HTML. Tidak ada perubahan konten apa pun. Bahkan, tidak ada perubahan styling sedikit pun yang terjadi. Hal ini karena memang kita belum mempelajari materi styling.

Itulah beberapa hal yang kita lakukan pada latihan ini. Bagi sebagian dari kita merasa bahwa tidak banyak perubahan yang dilakukan. Hal tersebut tidak sepenuhnya salah karena tampilan halaman webnya pun tidak berbeda dengan sebelumnya. Namun, percayalah bahwa Halaman Profil kita semakin baik dan dimengerti oleh browser (semantic HTML).

Tidak hanya sampai di sini. Ada satu perjalanan lagi yang akan kita lalui untuk meningkatkan kualitas dokumen HTML kita. Yuk, segera masuk ke materi berikutnya!