Seperti yang sudah kita ketahui, HTML berperan sebagai struktur untuk membangun sebuah halaman website. Dan pada sub-modul ini kita akan mencoba menuliskan struktur HTML, siap? Pada akhir sub-modul, kita akan membuat halaman website seperti gambar berikut:


Membuat berkas HTML Pertama

Untuk langkah awal tentunya kita membuat sebuah berkas HTML. Kita akan mencoba membuatnya dari nol dengan menggunakan alat yang ada. Gunakanlah text editor usungan sistem operasi masing-masing agar kita tahu bagaimana pengalaman membuat dan menuliskan sebuah kode tanpa bantuan code completion.


Windows

Langkah awal dalam membuat berkas HTML adalah kita buka Notepad pada komputer kita. Untuk membukanya bisa melalui beberapa cara, salah satunya melalui fitur Run yang terdapat pada Windows.

Silakan gunakan kombinasi tombol Windows + R untuk membuka jendela Run, kemudian tuliskan “notepad”


Kemudian pilih tombol OK, lalu notepad akan muncul pada layar komputer/laptop kita.

Selanjutnya kita salin dan tempel teks berikut pada notepad. 

       1
         2
         3
         4
         5
         6
         7
         8
         9
        10
        11
        12
        13
        14
        15
        16
        17
        18
        19
        20
        21
        22
        23
        24
        25
        26
        27
        28
 
      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.

Sehingga sekarang notepad tampak seperti gambar di bawah ini:


Simpan perubahan pada notepad dengan melakukan Save (Ctrl + S pada keyboard), kemudian pilih lokasi penyimpanan yang kita inginkan. Pada contoh di bawah ini, berkas HTML akan disimpan pada alamat C -> WebDasar.


Lalu di dalam folder WebDasar. Kita simpan berkas dengan nama index.html. Jangan lupa pada bagian Save as type kita pilih “All Files (*.*)” untuk tipe penyimpanannya. Setelah itu, tekan tombol Save.


Setelah berhasil menyimpan berkas index.html, berkas tersebut dapat kita lihat pada folder yang sudah kita tentukan tadi.


Selamat! Dengan begitu kita sudah membuat berkas HTML pertama. Silakan buka berkas HTML tersebut menggunakan suatu browser (dalam contoh ini, kita menggunakan Google Chrome), maka hasilnya akan nampak seperti ini:


MacOS

Langkah awal dalam membuat berkas HTML di sistem operasi MacOS adalah buka aplikasi TextEdit. Pertama, lakukan pencarian dengan menuliskan “TextEdit”.


Lalu setelah aplikasi TextEdit terbuka, masuk ke preference untuk melakukan pengaturan pada TextEdit melalui panel atas seperti gambar berikut ini:


Selanjutnya jendela preferences akan terbuka, pada bagian format pastikan kita memilih Plain text.


Selanjutnya tutup jendela preferences, lalu kita tentukan lokasi untuk pembuatan berkas HTML baru. Anda bebas menentukkan lokasi sesuai yang Anda inginkan, tetapi pada contoh gambar dibawah ini kita menyimpannya pada lokasi: [nama_user_anda] -> WebDasar.


Setelah menentukkan lokasinya, lalu pilih tombol New Document yang terletak di pojok kiri bawah dari jendela finder. Selanjutnya akan muncul jendela TextEditor baru seperti ini:


Silakan salin dan tempel konten berikut pada text editor: 

       1
         2
         3
         4
         5
         6
         7
         8
         9
        10
        11
        12
        13
        14
        15
        16
        17
        18
        19
        20
        21
        22
        23
        24
        25
        26
        27
        28
 
      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.

Sekarang text editor akan tampak seperti ini:


Lalu tekan tombol kombinasi cmd + s pada keyboard dan beri nama berkas dengan index.html, kemudian tekan tombol save.


Jika muncul dialog seperti di bawah ini, kita pilih "Use .html".


Maka jika kita buka finder, di dalam folder yang kita tentukan akan terdapat berkas index.html.


Selamat! Dengan begitu kita sudah membuat berkas HTML pertama. Silakan buka berkas HTML tersebut menggunakan suatu browser (dalam contoh ini, kita menggunakan Google Chrome), maka hasilnya akan nampak seperti ini:


Linux (Ubuntu)

Langkah awal untuk menuliskan berkas HTML di sistem operasi Linux (Ubuntu) adalah membuka text editor. Bukalah text editor melalui terminal dengan cara mengetikan keyword “gedit” kemudian tekan enter pada keyboard.


Jika berhasil, maka aplikasi text editor baru akan terbuka. Silakan salin konten berikut secara langsung pada text editor. 

       1
         2
         3
         4
         5
         6
         7
         8
         9
        10
        11
        12
        13
        14
        15
        16
        17
        18
        19
        20
        21
        22
        23
        24
        25
        26
        27
        28
 
      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.

Setelah selesai lakukan save (simpan) berkas dengan memberikan nama “index.html”.


Pada contoh di bawah ini, lokasi berkas index.html akan disimpan pada direktori: home -> dicoding -> WebDasar. Kemudian tekan tombol save.


Selamat! Dengan begitu kita sudah membuat berkas HTML pertama. Silakan buka berkas HTML tersebut menggunakan suatu browser (dalam contoh ini, kita menggunakan Google Chrome), maka hasilnya akan nampak seperti ini:


Informasi yang tampil, nampak berantakan dan tidak sesuai dengan yang kita tuliskan, bukan? Karena standarnya, browser akan mengabaikan penulisan spasi yang dituliskan secara berulang, begitu juga dengan line breaks (garis baru). Untuk menuliskan garis baru pada HTML, kita harus menggunakan salah satu tag HTML yaitu yang akan kita bahas pada sub-modul Pendalaman HTML.


Struktur Dasar HTML

Website serupa dengan berkas dokumen yang ada seperti koran, majalah, atau buku. Serupa dalam hal memiliki struktur konten layaknya dokumen sehari-hari yang kita baca. Pada sebuah majalah terdapat judul, gambar yang ditampilkan dan teks dalam bentuk paragraf. Terkadang, jika konten tersebut panjang terdapat sub-judul untuk memisahkannya menjadi beberapa bagian.

Judul dan subjudul pada sebuah dokumen menggambarkan suatu hierarki dari informasi. Misalnya, judul dengan ukuran besar merupakan judul utama dalam sebuah konten. Kemudian diikuti dengan judul kecil di bawahnya yang menjelaskan informasi dengan lebih mendetail lagi.

Berkas HTML dasarnya memiliki struktur yang nampak seperti ini: 

     1
     2
     3
     4
     5
     6
     7
     8
     9
    10
 
<!DOCTYPE html>
    <html>
        <head>
            <title>Judul Halaman</title>
        </head>
        <body>
            <h1>Heading Utama</h1>
            <p>Sebuah Paragraph.</p>
        </body>
    </html>

Kita dapat melihat bahwa struktur dasar HTML dituliskan dari beberapa elemen. Pada setiap elemen HTML terdapat dua tag, yaitu tag pembuka <> dan tag penutup </>. Lihat gambar berikut untuk lebih jelasnya.


Di antara tag pembuka dan tag penutup elemen, kita dapat meletakkan sebuah konten. Konten dapat berupa teks ataupun sebuah elemen HTML lain. Contohnya, elemen <html> memiliki konten yaitu elemen <head> dan juga elemen <body>. Lalu, elemen <head> memiliki konten berupa elemen <title> yang di dalamnya memiliki konten berupa teks dari judul halaman yang ditampilkan. Begitu pula dengan elemen lainnya, sehingga hirarki elemen HTML nampak seperti ini.


Elemen <html>

Hirarki elemen teratas pada berkas HTML adalah elemen HTML-nya itu sendiri. Elemen ini digunakan untuk memberitahu kepada browser bahwa ini merupakan sebuah berkas HTML sekaligus menjadi root dari sebuah berkasnya itu. Seluruh elemen lainnya tentunya dituliskan pada konten elemen ini.


Elemen <head>

Elemen <head> pada berkas HTML berfungsi sebagai tempat disimpannya informasi dari dokumen HTML. Informasi dapat berupa elemen meta, style, atau link. Dan juga elemen penting lainnya yang berfungsi menampilkan judul dari dokumen HTML didefinisikan dengan menggunakan elemen <title>. Berikut contoh elemen yang berada pada konten head:

  • <title>
  • <style>
  • <base>
  • <link>
  • <meta>
  • <script>
  • <noscript>

Pada HTML versi 4.01, elemen <head> wajib ada dalam sebuah berkas HTML. Berikut contoh penulisan sebuah elemen <head> beserta contoh konten di dalamnya: 

      1
      2
      3
      4
      5
      6
      7
 
<head>
          <meta charset="utf-8">
          <title>Judul Halaman Anda</title>
          <style>
              /* Kode CSS anda */
          </style>
      </head>

Tetapi sejak HTML5, penggunaan <head> dapat dihilangkan. Oleh karena itu, struktur dasar berkas HTML menjadi seperti ini: 

       1
       2
       3
       4
       5
       6
       7
       8
       9
      10
 
<!DOCTYPE html>
      <html>
          <meta charset="utf-8">
          <title>Judul halaman</title>
          <style> Style </style>
          <body>
              <h1>Heading Utama</h1>
              <p>Sebuah Paragraph.</p>
          </body>
      </html>

Elemen <body>

Seluruh konten yang terdapat pada elemen ini akan ditampilkan pada halaman website. Maka dari itu, elemen ini digunakan untuk menampung seluruh konten atau elemen yang ditampilkan ke dalam jendela browser. Silakan coba tuliskan kode berikut, simpan dalam format HTML dan jalankan pada browser. 

      1
      2
      3
      4
      5
      6
      7
      8
      9
 
<html>
          <head>
              <title>Ini merupakan judul dari dokumen HTML</title>
          </head>
          <body>
              <h1>header yang diletakan di dalam elemen body</h1>
              <p>Ini merupakan sebuah paragraph yang juga diletakan pada sebuah konten body, sehingga konten ini dapat dilihat oleh pengguna pada jendela browser.</p>
          </body>
      </html>

Maka seluruh konten yang dituliskan di dalam elemen <body> akan nampak pada browser.


Kecuali jika kita ingin menuliskan sebuah catatan kecil pada berkas HTML, kita perlu gunakan commenting tag (<!---->). Semua yang dituliskan di antara tag komentar tidak akan memberikan pengaruh apa pun, termasuk pada tampilan di jendela browser. Pada HTML, tag komentar dituliskan seperti ini: 

      1
      2
      3
      4
 
<!-- Ini merupakan sebuah komentar -->
      <!-- Ini merupakan
        sebuah komentar yang
        terdiri lebih dari satu baris -->

Sebuah komentar berguna untuk memberikan label dan mengorganisir sebuah dokumen yang panjang, terlebih ketika kita bekerja secara tim.


Lorem Ipsum

Lorem ipsum adalah teks standar yang ditempatkan untuk mendemonstrasikan elemen grafis atau presentasi visual seperti font, tipografi, dan tata letak. Tujuan penggunaan lorem ipsum sebagai berikut:

  1. Sebagai pengisi sementara jika belum ada konten teks.
  2. Jika ingin menunjukkan hasil website sementara di mana audiens diharapkan lebih fokus kepada elemen desain yang dipresentasikan dan bukan pada isi teks.

Penggunaan lorem ipsum ini biasanya digunakan pada proses pengembangan (development). Ada berbagai cara untuk membuat teks lorem ipsum seperti berikut:

  1. Gunakan Microsoft Word. Buat dokumen baru dan pada lembar kerja ketiklah =lorem(), kemudian tekan tombol enter pada keyboard. Secara otomatis akan muncul teks lorem ipsum. Kamu juga dapat mengatur jumlah teks yang muncul dengan cara ketik =lorem(“angka jumlah paragraf yang diinginkan”, “angka jumlah kalimat pada setiap paragraf”). Sebagai contoh jika mengetik =lorem(3,4) maka akan muncul teks sebanyak 3 paragraf dan masing-masing paragraf terdapat 4 teks.
  2. Tersedia banyak situs generator lorem ipsum gratis seperti pada https://id.lipsum.com/ dan https://loremipsum.io/

Identifikasi Elemen pada Halaman Website

Setelah mengetahui struktur dasar HTML, mari kita coba terapkan pada berkas HTML yang sudah kita buat pada langkah awal. Kita buka kembali berkas HTML tersebut dan berikan elemen dasar pada sebuah berkas HTML. 

     1
     2
     3
     4
     5
     6
     7
     8
     9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
 
<!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.

Masukkan seluruh konten pada elemen <body> agar nampak pada browser. 

     1
     2
     3
     4
     5
     6
     7
     8
     9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
 
<!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>

Dalam mengidentifikasi konten, carilah konten yang paling penting dan bungkus konten tersebut dengan elemen <h1>. Jangan khawatir apabila tampilan tidak sesuai dengan yang kita inginkan, karena nanti kalian akan mengaturnya ketika sudah mempelajari style sheet.


Setelah itu, kita berikan elemen heading dan elemen paragraf sesuai hasil identifikasi, sehingga kode nampak seperti ini: 

     1
     2
     3
     4
     5
     6
     7
     8
     9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
 
<!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>

Kemudian simpan berkas HTML tersebut, lalu coba buka pada browser.


Selamat, kita sudah berhasil membuat sebuah struktur HTML dasar. Pada sub-modul selanjutnya, kalian akan lebih dalam mengetahui tentang elemen yang ada pada HTML.

Berikut catatan penting yang sudah kita pelajari sejauh ini:

  • Website : Halaman yang menampilkan informasi kepada pengguna berupa teks atau gambar. Website dapat diakses melalui internet dengan menggunakan browser.
  • Browser : Sebuah perangkat lunak yang dapat menerjemahkan berkas HTML, CSS, dan JavaScript yang didapat dari web server untuk ditampilkan dalam bentuk halaman website.
  • HTTP Server : Server berperan pada sebuah website sebagai sebuah software yang dapat menerima transaksi dari HyperText Transfer Protocol.
  • DNS Server : Server yang dapat mengubah/mengarahkan website melalui sebuah nama domain.
  • Client : Perangkat yang meminta (request) suatu layanan tertentu ke suatu server.
  • HTML : Salah satu bahasa markup (markup language) yang digunakan untuk membuat struktur dan menampilkan konten pada World Wide Web (Website).
  • CSS : Bahasa markup yang digunakan untuk mengatur dan mempercantik tampilan pada website.
  • JavaScript : Bahasa pemrograman yang digunakan untuk membantu website menampilkan informasi secara dinamis.
  • Text Editor : Sebuah perangkat lunak yang digunakan untuk mengelola plain text. Kode HTML, CSS, dan Javascript dituliskan menggunakan perangkat ini.
  • Plain Text : Teks yang tidak terformat. Format teks ini digunakan dalam penulisan berkas HTML, CSS, dan Javascript.
  • Rich Text : Teks yang terformat. Format teks ini digunakan jika kita ingin menulis menggunakan Microsoft Word atau teks editor berbasis WYSIWYG (What You See Is What You Get).
  • Element : Sebuah komponen pada HTML yang ditandai dengan tag pembuka dan penutup.

Sebelumnya : Belajar Dasar Pemrograman Web Selanjutnya : Pendalaman HTML