Selamat Datang Di Website Saya... Semoga dapat bermanfaat dari yang saya berikan.... Menetapkan Elemen <header>, <main> dan <footer>.

Menetapkan Elemen
,
dan
.

Petrus Junake Ginting September 06, 2020

 

Mari kita buat konten yang berada pada body menjadi tiga bagian besar yaitu heading, main dan footer. Kelompokkan konten judul besar dan navigasi menggunakan elemen <header>.

  1. <body>
  2.     <header>
  3.         <h1>Bandung</h1>
  4.         <p>Kota metropolitan terbesar di Provinsi Jawa Barat, sekaligus menjadi ibu kota provinsi tersebut.</p>
  5.         <ul>
  6.             <li><a href="#sejarah">Sejarah</a></li>
  7.             <li><a href="#geografis">Geografis</a></li>
  8.             <li><a href="#wisata">Wisata</a></li>
  9.         </ul>
  10.     </header>
  11. .......
  12. </body>


Sebelumnya, kita mengetahui bahwa elemen list yang dibuat nantinya akan dijadikan sebuah navigasi, maka di dalam elemen header ini, kita tambahkan elemen <nav> untuk membungkus elemen list. 

  1. <body>
  2.    <header>
  3.        <h1>Bandung</h1>
  4.        <p>Kota metropolitan terbesar di Provinsi Jawa Barat, sekaligus menjadi ibu kota provinsi tersebut.</p>
  5.        <nav>
  6.            <ul>
  7.                <li><a href="#sejarah">Sejarah</a></li>
  8.                <li><a href="#geografis">Geografis</a></li>
  9.                <li><a href="#wisata">Wisata</a></li>
  10.            </ul>
  11.        </nav>
  12.    </header>
  13. .....
  14. </body>


Kemudian pada konten copyright (konten paragraf paling akhir pada sebuah body) yang kita tambahkan sebelumnya, masukkan konten tersebut ke dalam elemen <footer>.

  1. <body>
  2. ....
  3.  
  4. <footer>
  5.        <p>Belajar Dasar Pemrograman Web &#169; 2019, Dicoding Academy</p>
  6. </footer>
  7. </body>


Terakhir, kelompokkan seluruh konten yang terdapat di antara elemen <header> dan elemen <footer> dengan menggunakan elemen <main>.

  1. <body>
  2.     <header>
  3.     ......
  4.     </header>
  5.     <main>
  6.        <h2 id="sejarah">Sejarah</h2>
  7.        <img src="assets/image/history.jpg" alt="sejarah">
  8.        <p>Kata Bandung berasal dari kata bendung atau bendungan karena terbendungnya sungai Citarum oleh lava Gunung
  9.            Tangkuban Parahu yang lalu membentuk telaga. Legenda yang diceritakan oleh orang-orang tua di
  10.            Bandung mengatakan bahwa nama Bandung diambil dari sebuah kendaraan air yang terdiri dari dua perahu yang
  11.            diikat
  12.            berdampingan yang disebut perahu bandung yang digunakan oleh Bupati Bandung, R.A. Wiranatakusumah II, untuk
  13.            melayari Ci Tarum dalam mencari tempat kedudukan kabupaten yang baru untuk
  14.            menggantikan ibu kota yang lama di Dayeuhkolot. </p>
  15.  
  16.        <p>Berdasarkan filosofi Sunda, kata Bandung juga berasal dari kalimat Nga-Bandung-an Banda Indung, yang
  17.            merupakan
  18.            kalimat sakral dan luhur karena mengandung nilai ajaran Sunda. Nga-Bandung-an artinya menyaksikan atau
  19.            bersaksi.
  20.            Banda adalah segala sesuatu yang berada di alam hidup yaitu di bumi dan atmosfer, baik makhluk hidup maupun
  21.            benda mati. Sinonim dari banda adalah harta. Indung berarti Ibu atau Bumi, disebut juga sebagai Ibu Pertiwi
  22.            tempat Banda berada.</p>
  23.  
  24.        <h2 id="geografis">Geografis</h2>
  25.        <img src="assets/image/geografis.jpg" alt="geografis">
  26.        <p>Kota Bandung dikelilingi oleh pegunungan, sehingga bentuk morfologi wilayahnya bagaikan sebuah mangkok
  27.            raksasa,[9] secara geografis kota ini terletak di tengah-tengah provinsi Jawa Barat, serta berada pada
  28.            ketinggian ±768 m di atas permukaan laut, dengan titik tertinggi di berada di sebelah utara dengan
  29.            ketinggian
  30.            1.050 meter di atas permukaan laut dan sebelah selatan merupakan kawasan rendah dengan ketinggian 675 meter
  31.            di
  32.            atas permukaan laut.</p>
  33.  
  34.        <p>Kota Bandung dialiri dua sungai utama, yaitu Sungai Cikapundung dan Sungai Citarum beserta anak-anak
  35.            sungainya
  36.            yang pada umumnya mengalir ke arah selatan dan bertemu di Sungai Citarum. Dengan kondisi yang
  37.            demikian, Bandung selatan sangat rentan terhadap masalah banjir terutama pada musim hujan.</p>
  38.  
  39.        <h2 id="wisata">Wisata</h2>
  40.        <p>Sejak dibukanya Jalan Tol Cipularang, kota Bandung telah menjadi tujuan utama dalam menikmati liburan akhir
  41.            pekan
  42.            terutama dari masyarakat yang berasal dari Jakarta sekitarnya. Selain menjadi kota wisata belanja,
  43.            kota Bandung juga dikenal dengan sejumlah besar bangunan lama berarsitektur peninggalan Belanda.</p>
  44.  
  45.        <h3>Farm House Lembang</h3>
  46.        <img src="assets/image/farm-house.jpg" alt="farm house">
  47.        <p>Berada di jalur utama Bandung-Lembang, Farm House menjadi objek wisata yang tidak pernah sepi pengunjung.
  48.            Selain
  49.            karena letaknya strategis, kawasan ini juga menghadirkan nuansa wisata khas Eropa. Semua itu diterapkan
  50.            dalam
  51.            bentuk spot swafoto Instagramable.</p>
  52.  
  53.        <h3>Observatorium Bosscha</h3>
  54.        <img src="assets/image/bosscha.jpg" alt="bosscha">
  55.        <p>Memiliki beberapa teleskop, antara lain, Refraktor Ganda Zeiss, Schmidt Bimasakti, Refraktor Bamberg,
  56.            Cassegrain
  57.            GOTO, dan Teleskop Surya. Refraktor Ganda Zeiss adalah jenis teleskop terbesar untuk meneropong bintang.
  58.            Benda
  59.            ini diletakkan pada atap kubah sehingga saat teropong digunakan, atap tersebut harus dibuka. Observatorium
  60.            Bosscha boleh dikunjungi oleh siapapun, tanpa tiket. Namun, bagi yang ingin
  61.            menggunakan teleskop Zeiss, wajib mendaftarkan diri. Untuk instansi atau lembaga pendidikan, diberikan
  62.            jadwal
  63.            hari Selasa sampai Jumat. Sementara itu, kunjungan individu dibuka setiap hari Sabtu.</p>
  64.  
  65.        <h2>Kota Bandung</h2>
  66.        <p>Kota Kembang Paris van Java</p>
  67.        <figure>
  68.            <img src="assets/image/bandung-badge.png">
  69.            <figcaption>Lambang</figcaption>
  70.        </figure>
  71.    </main>
  72.     <footer>
  73.         ........
  74.     </footer>
  75. </body>


Maka struktur body pada HTML menjadi seperti ini:

2019120613444303c68970556108a8b8d5b7bca29810af.png

Reactions

Post a Comment

0 Comments

Perhatikan setiap kata yang dipublikasikan.
Segala bentuk pelanggaran Undang-Undang Informasi dan Transaksi Elektronik menjadi tanggung jawab Komentator.
Copyright © 2020 all rights reserved