Latihan: Identifikasi Elemen pada Halaman Profil

Belajar Dasar Pemrograman Web

Tools

Setelah mengetahui struktur dasar HTML, mari kita terapkan ilmu ini pada halaman web yang sudah kita buat dalam latihan awal. Yuk, berlatih!

Tujuan

Pada latihan sebelumnya, konten halaman web ditampilkan dengan berantakan dan tidak mudah dibaca. Kita tidak berekspektasi pada browser bahwa tampilan halaman web akan mengikuti kode yang dituliskan pada code editor. Hal ini termasuk jika kita menambahkan baris baru dan karakter spasi pada code editor karena browser tidak akan membacanya.

Agar browser dapat mengenal setiap konten dan menampilkannya dengan rapi, kita akan memberinya elemen yang sesuai. Judul akan menggunakan elemen heading, paragraf akan menggunakan elemen paragraf, dsb.

Alur Latihan

Berikut adalah alur latihan kali ini.

Membuka hasil akhir dari latihan sebelumnya.
Menuliskan struktur dasar dokumen HTML pada berkas index.html.
Menempatkan seluruh konten pada elemen body.
Membungkus setiap bagian dari artikel dengan elemen yang tepat.
Menjalankan dokumen HTML pada browser.

Latihan Identifikasi Elemen pada Halaman Website

Pada latihan ini, kita tidak akan mengajarkan latihan untuk banyak sistem operasi lagi karena penerapannya masih sama. Jadi, silakan sesuaikan dengan perangkat masing-masing. Silakan ikuti beberapa langkah latihan berikut.

Membuka hasil akhir pada latihan sebelumnya. Jika belum punya, silakan siapkan proyek berisi berkas index.html dengan kode berikut.

Bandung
Kota metropolitan terbesar di Provinsi Jawa Barat, sekaligus menjadi ibu kota provinsi tersebut.
 
 
Sejarah
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.
 
 
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.
 
 
Geografis
Kota Bandung dikelilingi oleh pegunungan, sehingga bentuk morfologi wilayahnya bagaikan sebuah mangkok raksasa, 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.
 
 
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.
 
 
Wisata
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.
 
 
Farm House Lembang
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.
 
 
Observatorium Bosscha
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 siapa pun, 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.

Pada berkas index.html, silakan tambahkan struktur dasar dokumen HTML di posisi teratas. Kode yang perlu ditambahkan adalah kode bercetak tebal.

<!DOCTYPE html>
<html>
  <head></head>
  <body>   
 
  </body>
</html>
 
Bandung
Kota metropolitan terbesar di Provinsi Jawa Barat, sekaligus menjadi ibu kota provinsi tersebut.
 
 
Sejarah
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.
 
 
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.
 
 
Geografis
Kota Bandung dikelilingi oleh pegunungan, sehingga bentuk morfologi wilayahnya bagaikan sebuah mangkok raksasa, 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.
 
 
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.
 
 
Wisata
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.
 
 
Farm House Lembang
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.
 
 
Observatorium Bosscha
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 siapa pun, 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.

Karena seluruh konten yang ditampilkan ada dalam elemen <body>, silakan masukkan seluruh konten artikel padanya sehingga hasil keseluruhan kode menjadi seperti berikut.

<!DOCTYPE html><html>
  <head></head>
 
  <body>
    Bandung
    Kota metropolitan terbesar di Provinsi Jawa Barat, sekaligus menjadi ibu kota provinsi tersebut.
 
 
    Sejarah
    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.
 
 
    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.
 
 
    Geografis
    Kota Bandung dikelilingi oleh pegunungan, sehingga bentuk morfologi wilayahnya bagaikan sebuah mangkok raksasa, 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.
 
 
    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.
 
 
    Wisata
    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.
 
 
    Farm House Lembang
    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.
 
 
    Observatorium Bosscha
    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 siapa pun, 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.
  </body>
</html>

Selanjutnya, kita akan mengidentifikasi konten artikel ini. Carilah konten yang paling penting atau topik utama pembahasan dari artikel serta bungkus konten tersebut dengan elemen <h1>; lalu, konten yang merupakan pemaparan dari topik tersebut serta bungkus konten tersebut dengan elemen <p>; dan seterusnya.

Gambar berikut adalah hasil identifikasi dari konten artikel bandung.

Jika sudah, kita dapat memberi elemen heading dan elemen paragraf sesuai dengan hasil identifikasi. Jika diimplementasikan, hasil kode akan tampak seperti berikut.

<!DOCTYPE html><html>
  <head></head>
  <body>
    <h1>Bandung</h1>
    <p>
      Kota metropolitan terbesar di Provinsi Jawa Barat, sekaligus menjadi ibu
      kota provinsi tersebut.
    </p>
 
 
    <h2>Sejarah</h2>
    <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>Geografis</h2>
    <p>
      Kota Bandung dikelilingi oleh pegunungan, sehingga bentuk morfologi
      wilayahnya bagaikan sebuah mangkok raksasa, 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>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>
    <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>
    <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>
  </body>
</html>

Silakan save perubahan yang terjadi pada berkas HTML dan buka pada browser. Seharusnya, halaman web akan terlihat seperti berikut.
Kita belum selesai sampai di sini. Tidak hanya elemen <body>, untuk memperlengkap dokumen ini, kita akan melengkapi elemen dalam elemen <head>. Silakan tambahkan kode bercetak tebal berikut pada index.html.
```
<!DOCTYPE html><html>
  <head>
    <meta charset="utf-8">
    <title>Halaman Profil Bandung</title>
  </head>
  <body>
    
  </body>
</html>
```
Seharusnya tab browser Anda akan menampilkan judul webpage dengan baik.

Bedah Kode

Bravo! Kita sudah berhasil menerapkan struktur HTML dasar pada artikel Bandung. Pada modul selanjutnya, kalian akan lebih dalam mengetahui tentang elemen yang ada pada HTML.

Pada latihan sebelumnya, kita sudah berhasil memiliki halaman web dengan membuat dokumen HTML. Kita juga sudah melihat hasilnya pada browser.

Konten yang di-render pun tidak merepresentasikan hal yang dituliskan pada code editor. Selain itu, kontennya sulit untuk dibaca, bukan? Namun, bukan hal tersebut yang menjadi inti permasalahan.

Membangun konten halaman web tanpa menggunakan elemen HTML tidak akan dipahami oleh browser. Untuk itu, kita perlu memanfaatkan elemen yang tepat. Sebelum itu, kita perlu mendefinisikan struktur HTML dasar.

Struktur Dasar Dokumen HTML

Nah, pada kode di atas, kita telah memberikan beberapa elemen yang merupakan basic structure of webpage. Di antaranya ada doctype, html, head, dan body. Sebetulnya, jika kita tidak membuat struktur dasarnya pun (kontennya saja), secara otomatis, browser akan membuatkan struktur dasarnya (tanpa doctype). Browser akan langsung menempatkan isi konten yang kita tuliskan pada elemen <body> dan elemen <head> yang kosong. Jika kembali ke latihan pertama, Anda seharusnya mengalami hal ini karena pada saat itu kita tidak mendefinisikan struktur dasarnya, bukan?

Anda juga dapat membuktikannya pada praktik latihan sebelumnya. Anda dapat memeriksanya pada Developer Tools dari browser yang digunakan (Google Chrome). Bagi pengguna Google Chrome, Anda bisa menekan tombol F12 dan membuka tab Elements.

Menerapkan Elemen yang Sesuai

Sebelumnya, setiap konten artikel belum memiliki atau dibungkus dengan elemen HTML. Kali ini, kita sudah berhasil memberikan setiap konten (teks) dengan elemen HTML, mulai dari judul, paragraf, hingga subjudul.

Berdasarkan hasil identifikasi yang ditunjukkan pada gambar di atas, kita sudah bisa melihat bahwa ada hierarki yang dibentuk. Karena artikel ini memaparkan tentang profil Kota Bandung, kita bungkus “Bandung” dengan elemen <h1> untuk sebagai heading utama. Bagaimana dengan kalimat penjelas di bawahnya? Kita bungkus ia dengan elemen paragraf.

Biasanya, artikel tidak hanya memuat satu judul saja. Untuk memberikan penjelasan yang rinci dan terpusat, kita memanfaatkan sesuatu yang disebut subjudul. Subjudul merupakan topik turunan dari topik utama. Oleh karena itu, kita mengidentifikasi beberapa judul lainnya dengan elemen <h2> hingga <h3> untuk menampilkannya sebagai subjudul. Hal ini karena topik yang dicakup masih berkaitan dengan topik utama, yaitu profil Kota Bandung.

Itulah cara mengidentifikasi konten dan menerapkan elemen yang sesuai. Sekarang, tampilan artikel sudah lebih baik dan enak dibaca, kan? Halaman web yang kita buat memang belum terlihat cantik dan masih monoton. Namun, jangan khawatir karena kita akan mengaturnya ketika sudah mempelajari teknik styling ke depannya.

Kita masih belum selesai dengan HTML. Masih banyak pembahasan lainnya yang perlu kita pelajari untuk memperkuat fundamental HTML. Anda ingin menjadi web developer andal, kan? Nah, oleh karena itu, tetaplah semangat dalam menuju modul berikutnya.