Pengantar HTML

Pada modul sebelumnya, Anda sudah belajar banyak hal sebagai penuntun Anda memasuki front-end web development. Ada banyak pengetahuan yang telah diserap, seperti cara internet bekerja, website dan halaman web, web server, dan web browser. Selain itu, kamu juga sudah memahami anatomi dari website sehingga memahami komponen vital pembangun website. Nah, saat ini, seharusnya Anda sudah siap untuk memulai gathering knowledge tentang teknik pembangunan aplikasi web.

Apakah Anda masih ingat HTML? Ia merupakan satu-satunya bahasa markup untuk membangun struktur halaman website. Sebagaimana telah dipelajari sebelumnya, HTML dianalogikan seperti kerangka hewan yang menentukan bentuk tubuhnya. Hal ini menjadikan setiap hewan memiliki bentuk yang bermacam-macam.

Nah, pada modul ini, kita akan berkenalan dengan HTML terlebih dahulu. Namun, tenang saja. Istilah “berkenalan” mungkin terdengar seperti Anda tidak akan mendapatkan pembahasan HTML secara dalam. Kita akan membagi sesi pembahasan HTML menjadi dua, yaitu Pengenalan HTML (modul yang sedang dipijak) dan Pendalaman HTML.

Pada akhir modul, kita akan membuat halaman website seperti gambar berikut.

Halaman web di atas menampilkan artikel yang menjelaskan profil Kota Bandung. Yap, benar. Tampilan di atas terlihat tidak menarik. Kita akan memperindah halaman ini secara progresif pada modul-modul berikutnya.

Pada materi selanjutnya, sebelum berkenalan dengan HTML, kita akan sedikit pemanasan terlebih dahulu. Nah, Anda sudah tidak sabar untuk memasuki langkah awal menjadi web developer, kan? Kami yakin, antusias Anda untuk menjadi web developer andal sangat tinggi.

Tunggu apa lagi? Yuk, langsung menuju ke materi berikutnya.

Latihan: Membangun Halaman Web Pertama (Halaman Profil)

Sebelumnya, Anda sudah berkenalan dengan HTML yang merupakan satu-satunya bahasa pembangun halaman web. Langkah berikutnya, sebelum belajar lebih jauh dengan HTML, kita akan berlatih membuat halaman web untuk yang pertama kalinya. Menarik, bukan? Yuk, langsung saja ikuti latihannya.

Tujuan

Dalam membuat halaman web pertama, tentunya bersinggungan dengan HTML. Kita akan mencoba membuatnya dari nol dengan menggunakan alat yang ada, yaitu code editor bawaan sistem operasi. Mengapa hal tersebut perlu dilakukan? Hal ini agar kita tahu pengalaman membuat dan menuliskan kode tanpa bantuan fitur-fitur yang powerful, seperti code completion.

Berikut adalah hasil yang didapat pada akhir latihan ini.

Alur Latihan

Berikut adalah alur latihan kali ini.

Membuka code editor bawaan sistem operasi.
Menuliskan struktur konten (kode) halaman web pada code editor.
Menyimpan kode yang telah ditulis dalam bentuk HTML.
Menjalankan berkas HTML dalam browser (Google Chrome).

Latihan Membangun Halaman Web Pertama

Dengan beragamnya sistem operasi yang tersedia, kami menyediakan langkah-langkah latihan menggunakan tiga buah sistem operasi. Sistem operasi yang dimaksud adalah Windows, Linux (Ubuntu), dan MacOS. Untuk itu, silakan ikuti langkah-langkah latihan berikut dan pilih sistem operasi yang didukung oleh perangkat Anda.

Windows memiliki code editor bawaan yang bernama Notepad. Kita akan menggunakan aplikasi tersebut untuk membuat halaman web. Ada banyak cara yang dapat dilakukan. Salah satunya adalah melalui fitur run command atau pencarian aplikasi–pencarian aplikasi yang dimaksud adalah pop up yang muncul jika menekan tombol Windows dan terdapat pencarian aplikasi padanya.

Silakan buka pencarian aplikasi tersebut dengan menekan tombol Windows. Jika sudah, tuliskan “notepad” dan pilihan aplikasi Notepad akan muncul. Kliklah pilihan aplikasi tersebut untuk membuka Notepad.
Seharusnya Notepad akan muncul pada layar laptop/komputer seperti berikut.

Selanjutnya, kita akan mulai menuliskan konten untuk halaman web kita. Sebetulnya, ada struktur yang disepakati untuk menuliskan halaman web. Saat ini masih dalam tahap awal membuat halaman web, jadi kita akan menuliskan kontennya secara langsung. Silakan isi dengan konten berikut pada Notepad.

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.

Jika sudah, seharusnya tampilan Notepad kurang lebih akan tampak seperti gambar berikut.
Nah, kita sudah selesai menuliskan konten halaman web. Sekarang, kita dapat melihat hasilnya pada browser. Namun, kita perlu menyimpan perubahan isi berkas terlebih dahulu. Silakan lakukan simpan berkas. Anda dapat melakukannya dengan kombinasi tombol ”CTRL + S”.

Kemudian, pilih lokasi penyimpanan yang diinginkan. Contoh pada komputer kami, kami menyimpannya pada alamat “C -> WebDasar”. Oleh karena itu, buka direktori “WebDasar” dengan dobel klik kiri pada folder terkait.
Seharusnya, tampilannya sudah berada dalam direktori WebDasar saat ini. Selanjutnya, kita namai berkas ini dengan “index.html” pada bagian ”File name”. Ingat! Simpan berkas dalam format HTML. Pada bagian “Save as type”, silakan pilih “All Files (*.*)” dan Anda dapat memberinya nama beserta formatnya secara langsung–nama dan format yang dimaksud adalah “index.html”.
Jika sudah, tekan tombol “Save” untuk memproses penyimpanan berkas.
Luar biasa! Berkas tersebut sudah dapat kita lihat pada folder yang kita tentukan sebelumnya. Berikut adalah kondisi direktori WebDasar milik kami saat ini.
Dengan demikian, kita selesai membuat berkas HTML pertama. Untuk melihat hasilnya, silakan buka berkas HTML tersebut menggunakan browser. Cara yang paling mudah adalah dobel klik berkas tersebut dan hasilnya akan tampak seperti berikut.
Selamat! Anda sudah berhasil membuat halaman web pertama. Good job!

Bedah Kode

Kudos to you! Anda sudah berjaya membuat halaman web untuk pertama kalinya. Kita akan membahas tahapan yang telah kita lakukan sejauh ini.

Saat ini, Anda sudah berhasil membuat dokumen HTML. Sebagai web developer pemula, ini merupakan capaian yang baik karena Anda akan lebih mudah menghadapi rintangan-rintangan berikutnya.

Root Project Directory

Dalam membuat halaman web, sebetulnya kita perlu menyiapkan satu hal utama dan yang paling utama, yaitu folder proyek. Ini biasa disebut dengan root project. Disadari atau tidak, sebetulnya kita telah menyiapkan hal tersebut yang dinamai “WebDasar”. Nah, folder inilah tempat kita bekerja membangun halaman web.

Folder proyek ini sebetulnya merupakan folder biasa. Folder proyek juga biasa disebut dengan root project directory karena di dalam folder inilah kita menyimpan seluruh berkas yang dibutuhkan untuk membuat website, salah satunya berkas HTML.

Membuat Berkas HTML

Nama berkas HTML yang digunakan adalah index.html. Apakah di antara Anda ada yang bertanya-tanya, mengapa kita menamainya dengan index.html? Penamaan berkas ini dibagi menjadi dua bagian, yaitu nama dan formatnya. Kita bahas terlebih dahulu mengenai formatnya. Format yang digunakan adalah .html (dibaca: dot html). Ini merupakan format atau ekstensi berkas yang tepat untuk membuat halaman web.

Itulah alasan mengenai format berkas yang digunakan. Namun, bagaimana dengan hal yang kedua–nama berkas, yaitu index? Kita menggunakan “index” karena ia merupakan nama berkas default dari web server jika tidak ada berkas spesifik pada URL. Berkas tersebut akan dikirimkan dan ditampilkan pada browser oleh web server.

Ketika mengunjungi dicoding.com, apakah ada di antara kita yang mengetahui sebenarnya berkas apa yang ditampilkan? Tentu tidak ada yang mengetahuinya. Namun, bisa kita pastikan bahwa web server mengirimkan berkas index.html untuk menampilkan homepage dari Dicoding. Itulah alasan penggunaan index sebagai nama berkasnya.

Berikut adalah perbedaan jika kita menampilkan halaman web antara index.html dengan lainnya–misalnya example.com.

dos:ad69ec21e4c8e4ece90289d0466e519620230614145837.jpeg

Anda dapat melihat perbedaan antara keduanya pada URL-nya.

Mengakses Halaman Web

Kita sudah mencoba untuk menjalankan dokumen HTML di browser yang telah dibuat sebelumnya. Namun, apakah Anda merasa ada yang berbeda dengan membuka website pada umumnya?

Umumnya, kita membuka website dengan menyebutkan nama domainnya. Contohnya dicoding.com. Namun, dalam praktik ini, kita menggunakan file sebagai skemanya untuk membaca file system dari komputer.

Silakan Anda sisakan menjadi “C:/” saja pada URL di atas. Hasilnya seharusnya akan seperti berikut.

Untuk memahami lebih jauh terkait Uniform Resource Locator (URL), Anda dapat membaca artikel URI Schemes dari MDN.

Berlatihnya hebat! Anda sudah berjaya membuat halaman web untuk pertama kalinya. Ini merupakan capaian yang baik untuk menggali lebih dalam pada pengembangan website berikutnya. Kami yakin, setelah ini Anda akan lebih mudah dan siap dalam melewati serta menaklukkan materi-materi berikutnya.

Yuk, lanjut ke materi berikutnya.

Latihan: Identifikasi Elemen pada Halaman Profil

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.

Anatomi Elemen HTML

Pada hasil latihan sebelumnya, Anda sudah berhasil menjalankan halaman web pertama dengan baik. Apakah Anda merasa bahwa membuat dokumen HTML tidak berbeda dengan membuat dokumen biasa? Jika melihat pengalaman tersebut, sebenarnya hal tersebut memang benar.

Sudah disinggung sebelumnya bahwa ada struktur dasar dalam menyusun halaman web. Ini dibutuhkan agar halaman web yang diakses dapat dipahami oleh browser. Namun, sebelum ke sana, kita akan belajar mengenai elemen HTML.

Pada dasarnya, struktur dasar halaman web disusun dengan banyak elemen HTML. Oleh karena itu, kita perlu memahami elemen HTML dan anatominya.

Apa Itu Elemen HTML

Elemen adalah salah satu bagian dari HTML dalam membangun halaman web. Ini digunakan untuk mendefinisikan konten-konten yang ditampilkan dalam halaman web. Contohnya, kita bisa menggunakan elemen paragraf dalam menampilkan media teks sebagai kontennya.

Gambar di atas adalah salah satu contoh elemen untuk menampilkan paragraf dalam halaman web. Bagaimana dengan judul? Tentunya, HTML memiliki elemen khusus untuk hal tersebut. HTML memiliki segudang elemen untuk mendukung kita dalam membuat halaman web yang baik.

Jika gambar di atas dijalankan, hasilnya seperti berikut.

Apabila sekilas dilihat, sebetulnya tidak ada bedanya jika kita menuliskannya tanpa elemen HTML, yaitu menuliskan teks dalam berkas secara langsung. Mengapa hal tersebut dapat terjadi? Sebelum menjawab pertanyaan tersebut, silakan perhatikan kode berikut.

Ini adalah teks tanpa elemen paragraf

Hasilnya berikut.

Silakan Anda perhatikan kedua window Browser pada gambar di atas, lebih tepatnya DevTools pada bagian tab Styles. Kita melihat ada kotak yang berwarna jingga, kuning, hijau, dan biru (bagian kotak terdalam). Warna-warna tersebut merupakan margin, border, padding, dan konten (contohnya teks yang akan ditampilkan). Kotak ini merupakan hasil representasi dari seluruh elemen HTML. Pembahasan ini dinamai box model dan akan diulas lebih rinci pada modul terpisah.

Catatan:
Untuk melihat seperti yang ditunjukkan gambar di atas, Anda dapat membuka Developer Tools (Inspect Elements) dan tab Elements serta Styles pada browser yang digunakan. Cara yang paling singkat untuk membukanya adalah menekan tombol F12.

Nah, berbicara mengenai perbedaan antara menggunakan elemen HTML maupun tidak, kita melihat ada perbedaan dari sisi styling. Teks yang dibungkus dengan elemen paragraf memiliki margin vertikal sebesar 16 piksel secara bawaan, sedangkan teks yang tidak dibungkus sama sekali tidak akan memiliki style apa pun, kecuali styling yang dimiliki oleh elemen <body>.

Dalam membangun halaman web, penggunaan elemen HTML sangatlah penting. Sebagaimana disebutkan sebelumnya, browser akan memahami hal yang dituliskan jika kita menggunakan elemen yang tepat. Selain itu, browser memiliki pengaturan khusus bagi masing-masing elemen HTML, seperti styling yang diterapkan, aksesibilitas, dsb. Dibandingkan tanpa elemen, konten yang ditampilkan pun tidak memiliki arti apa pun oleh browser.

Anatomi Elemen HTML

Kita semua sudah melihat secara sekilas rupa dari elemen HTML. Namun, ada beberapa hal untuk membangun elemen HTML itu sendiri. Secara garis besar, berikut adalah bagan dari anatomi elemen HTML.

Pada gambar di atas, kita dapat melihat bahwa elemen HTML terdapat dua tag, yaitu tag pembuka <> dan tag penutup </>. Di antara tag pembuka dan penutup, kita dapat meletakkan sebuah konten.

Item	Keterangan
Tag pembuka	Berisi nama dari elemen yang akan dibuat dan dibungkus dengan dua simbol, yaitu lebih kecil dari (<) serta lebih besar dari (>). Contohnya adalah <p> untuk membuat elemen paragraf yang menggunakan p sebagai nama elemennya–singkatan dari kata paragraf dalam bahasa inggris (paragraph).
Konten	Konten dari elemen. Contohnya teks sebagai konten dari elemen paragraf.
Tag penutup	Mirip seperti tag pembuka, tetapi terdapat garis miring sebelum nama elemennya. Ini menandakan akhir dari elemen HTML. Biasanya, kesalahan bagi web programmer pemula adalah melupakan tag ini sehingga menyebabkan elemen tidak valid.

Elemen dalam Elemen

Selain memiliki teks sebagai konten, elemen dapat memiliki elemen lain di dalamnya atau biasa disebut dengan child-element. Contohnya, kami memiliki elemen paragraf dengan teks sebagai konten di dalamnya. Kami ingin memberikan format teks miring atau tebal pada beberapa kata. Berikut adalah hasil implementasinya.

Hasilnya berikut.

Itulah pembahasan mengenai anatomi elemen HTML. Elemen ini memiliki peran yang sangat besar terhadap browser agar informasi-informasi dapat ditampilkan dengan baik. Untuk menambah wawasan, ada sumber artikel yang menyebutkan elemen HTML. Anda dapat membuka HTML elements reference dari MDN.

Attribute di Elemen HTML

Sebelumnya, kita sudah membahas elemen HTML beserta anatominya. Nah, ada satu bahasan lainnya yang belum kita pelajari, yaitu atribut. Nah, mari kita simak pembahasannya.

Dalam membuat elemen HTML, ada satu hal yang dapat dilakukan, yaitu memberi atribut. Atribut dapat memberi informasi-informasi tambahan untuk elemen HTML. Informasi ini tidak akan tampil dalam halaman web, tetapi ia dapat menentukan perilaku elemen biasanya.

Contohnya, ada satu elemen yang berfungsi untuk menampilkan gambar sebagai konten halaman web, yaitu <img>. Nah, kita perlu menyertakan informasi pada elemen tersebut, yaitu alamat dari gambar yang akan ditampilkan.

Pada gambar di atas, atribut src menentukan lokasi gambar yang akan ditampilkan pada halaman web.

Dari contoh di atas, mungkin Anda sudah terbayang bentuk penerapan atribut HTML. Namun, berikut adalah anatomi dari atribut elemen untuk memperjelas pemahaman Anda.

Pada gambar di atas, kita memiliki atribut class. Secara singkat, atribut ini merupakan sebuah nama identitas yang digunakan untuk menargetkan elemen dengan kode styling. Untuk pembahasan styling akan dicakup pada modul terpisah.

Ada dua hal yang dilakukan untuk menambahkan atribut pada elemen HTML, yaitu nama atribut dan nilainya. Ada banyak atribut yang disediakan oleh HTML. Salah satu yang terlihat sebelumnya adalah class dan src. Terkait nilainya, Anda dapat menulisnya dengan membungkus dengan tanda kutip satu atau dua setelah karakter sama dengan (=).

Berikut adalah beberapa atribut yang tersedia di HTML.

Attribute	Description
accesskey	Menentukan tombol shortcut untuk mengaktifkan/memfokuskan pada sebuah element.
class	Menentukan satu atau lebih classname untuk sebuah elemen.
contenteditable	Menentukan konten dari elemen merupakan konten yang dapat diubah atau tidak.
data-*	Menyimpan sebuah data pribadi khusus ke halaman atau aplikasi.
dir	Menentukan arah teks untuk konten pada suatu elemen.
draggable	Menentukan suatu elemen dapat di-drag atau tidak.
dropzone	Menentukan data yang di-drag adalah data yang disalin, dipindahkan, atau ditautkan saat dijatuhkan.
hidden	Menentukan suatu elemen ditampilkan atau tidak pada browser.
id	Menetapkan id pada elemen.
lang	Menentukan bahasa pada konten elemen.
spellcheck	Menentukan elemen harus diperiksa ejaannya dan tata bahasanya atau tidak.
style	Menentukan styling secara satu baris untuk suatu elemen.
tabindex	Menentukan urutan dari suatu elemen.
title	Menentukan informasi tambahan tentang suatu elemen.
translate	Menentukan konten elemen harus diterjemahkan atau tidak.

Itulah pembahasan mengenai anatomi elemen HTML. Elemen ini memiliki peran yang sangat besar terhadap browser agar informasi-informasi dapat ditampilkan dengan baik. Untuk menambah wawasan, ada artikel yang menyebutkan atribut-atribut yang dapat digunakan. Silakan kunjungi HTML attribute reference dari MDN.

Anatomi Dokumen HTML

Website serupa dengan dokumen konvensional yang ada. Serupa dalam arti memiliki struktur konten layaknya dokumen konvensional pada umumnya. Contohnya koran, majalah, atau buku. Selain itu, tidak jarang juga kita sering melihat artikel. Artikel memiliki beberapa komponen atau elemen, seperti judul, gambar, paragraf, dan sebagainya. Terkadang, jika konten artikel sangat panjang, pengelompokan akan dilakukan pada setiap bahasan menjadi beberapa bagian dengan memanfaatkan subjudul.

Judul dan subjudul pada sebuah dokumen menggambarkan suatu hierarki informasi. Misalnya, judul tingkat tertinggi merupakan judul utama dalam sebuah konten. Kemudian, diikuti dengan judul tingkat lebih rendah dan menjelaskan informasi dengan lebih rinci lagi.

Pada dasarnya, dokumen HTML memerlukan struktur dasar untuk menampilkan halaman web dengan baik. Halaman web seharusnya memiliki susunan elemen HTML yang tampak seperti berikut.

Pada pembahasan materi sebelumnya, kita mengetahui bahwa elemen dapat menjadi anak dari elemen lain atau biasa disebut child-element. Nah, contoh nyata yang dapat kita lihat adalah struktur dasar halaman web di atas. Contohnya, elemen <head> dan <body> merupakan child-element dari <html>. Lalu, elemen <head> memiliki child-element <title> yang memiliki konten berupa teks dari judul halaman yang ditampilkan. Elemen <body> memiliki child-element <h1> untuk menampilkan heading dan <p> untuk menampilkan paragraf.

Hal di atas sebetulnya akan membentuk sebuah hierarki elemen atau biasa disebut dengan DOM Tree (pohon DOM). Ini dapat Anda analogikan seperti silsilah keluarga.

Doctype HTML

Sederhananya, doctype dimaksudkan sebagai format atau versi HTML dan berisi sekumpulan aturan-aturan yang perlu diikuti dalam membangun halaman web yang baik. Pada waktu lampau, dokumen HTML disusun seperti berikut.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Versi HTML yang digunakan dari kode di atas adalah 4. Selain itu, penulisannya pun sangat panjang dan sulit dihafal. Sekarang, kita dapat menggunakan HTML versi 5 dengan cara yang sangat mudah dan valid.

<!DOCTYPE html>

Elemen <html>

Hierarki elemen teratas dari halaman web adalah elemen <html>. Elemen ini digunakan untuk memberitahu browser bahwa ia merupakan sebuah berkas HTML sekaligus menjadi root dari halaman web. Seluruh elemen lain tentunya dituliskan di dalam elemen ini (child-element).

Elemen <head>

Elemen <head> berfungsi sebagai tempat disimpannya informasi dari dokumen HTML. Informasi dapat berupa elemen meta, style, favicon, atau link. Selain itu, kita bisa memberikan judul dari halaman web (tab browser). Berikut adalah beberapa contoh elemen yang biasanya diletakkan dalam elemen ini.

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

Pada HTML versi 4.01, elemen <head> wajib ada dalam sebuah berkas HTML. Berikut adalah contoh pembuatan elemen <head> beserta kontennya.

<head>
  <meta charset="utf-8">
  <title>Judul Halaman Anda</title>
  <style>
    /* Kode CSS anda */
  </style>
</head>

Namun, penggunaan <head> dapat dihilangkan sejak HTML5. Jadi, struktur dasar berkas HTML menjadi seperti berikut.

<!DOCTYPE html>
<html>
  <meta charset="utf-8">
  <title>Judul Halaman</title>
  <style>
    /* style */
  </style>
  <body>
    <h1>Judul Utama</h1>
    <p>Sebuah paragraf</p>
  </body>
</html>

Elemen <body>

Tahukah kamu, bagaimana konten dapat ditampilkan dan di mana peletakannya? Setiap konten atau elemen dalam elemen <body> akan ditampilkan dalam halaman web. Elemen apa pun, baik gambar, judul, daftar barang, paragraf, dsb., yang diletakkan dalam elemen ini akan muncul. Bahkan, teks yang tak dibungkus oleh elemen sekalipun.

Silakan tuliskan kode berikut, simpan dalam format HTML, dan jalankan pada browser.

<!DOCTYPE html>
<html>
  <head>
    <title>Judul Dokumen HTML</title>
  </head>
  <body>
    <h1>Heading yang Diletakkan dalam Elemen Body</h1>
    <p>Ini merupakan sebuah paragraf yang juga diletakkan pada elemen body. Konten ini dapat dilihat oleh pengguna pada jendela browser.</p>
  </body>
</html>

Seluruh konten yang dituliskan pada body akan ditampilkan. Namun, ada kode yang tidak akan ditampilkan. Kode atau fitur yang dimaksud adalah komentar. Jika ingin menuliskan keterangan tambahan pada struktur dokumen HTML, kita perlu menggunakan commenting tag. Ini dituliskan dengan simbol  sebagai penutupnya.

Semua yang dituliskan di antara tag komentar tidak akan memberikan pengaruh apa pun, termasuk tampilan di jendela browser. Berikut adalah contoh implementasi dari tag komentar.

<!-- Ini merupakan sebuah komentar -->
<!-- Ini merupakan
  sebuah komentar yang
  terdiri lebih dari satu baris -->

Komentar berguna untuk memberikan label dan mengorganisasi sebuah dokumen yang panjang, terlebih ketika bekerja secara tim.

Lorem Ipsum Generator

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.

Sebagai pengisi sementara jika belum ada konten teks.
Jika ingin menunjukkan hasil website sementara yang mana audiens diharapkan lebih fokus kepada elemen desain yang dipresentasikan, bukan pada isinya (teks).

Penggunaan lorem ipsum biasanya digunakan pada proses pengembangan (development). Berbagai cara untuk membuat teks lorem ipsum dijelaskan pada poin-poin berikut.

Menggunakan Microsoft Word
Buat dokumen baru dan ketiklah kode berikut pada lembar kerja.
```
=lorem()
```
Kemudian, tekan tombol enter pada keyboard. Teks lorem ipsum akan muncul secara otomatis. Kamu juga dapat mengatur jumlah teks yang muncul dengan cara ketik kode berikut.
```
=lorem("angka_paragraf", "angka_kalimat_pada_setiap_paragraf")
```
Contohnya, jika mengetik =lorem(3,4), teks lorem ipsum akan muncul sebanyak 3 paragraf dan masing-masing paragraf terdapat 4 kalimat.
Generator Online
Tersedia banyak situs generator lorem ipsum gratis, seperti id.lipsum.com dan loremipsum.io.

BersambUng ke:

Search This Blog

Full-Stack Web Developer

Pengantar HTML

Pengantar HTML

Latihan: Membangun Halaman Web Pertama (Halaman Profil)

Tujuan

Alur Latihan

Latihan Membangun Halaman Web Pertama

Bedah Kode

Root Project Directory

Membuat Berkas HTML

Mengakses Halaman Web

Latihan: Identifikasi Elemen pada Halaman Profil

Tujuan

Alur Latihan

Latihan Identifikasi Elemen pada Halaman Website

Bedah Kode

Struktur Dasar Dokumen HTML

Menerapkan Elemen yang Sesuai

Anatomi Elemen HTML

Apa Itu Elemen HTML

Anatomi Elemen HTML

Elemen dalam Elemen

Attribute di Elemen HTML

Anatomi Dokumen HTML

Doctype HTML

Elemen <html>

Elemen <head>

Elemen <body>

Lorem Ipsum Generator

Rangkuman Pengenalan HTML

Comments

Post a Comment

Popular posts from this blog

Belajar Dasar Pemrograman Web

Loan Management 101 - Smart Borrowing

Pengantar Web Programming