Pengenalan HTML: Bahasa Markup

Pada artikel sebelumnya telah dijelaskan tentang bagaimana HTML bekerja meskipun dengan sederhana, pada artikel ini kita akan membahas tentang apa itu bahasa markup.

Setelah membaca dan mempraktekkan artikel sebelumnya mengenai “Pengenalan HTML: Langkah Dasar”, Sekarang Anda tahu bagaimana mudahnya untuk membuat sesuatu untuk ditampilkan dalam Web Browser.

Sekarang saatnya kita untuk belajar tentang bahasa markup, khususnya HTML. HTML adalah singkatan dari hypertext markup language. Yang mana terdiri dari dua bagian: hypertext dan markup language (bahasa markup). Namun, dalam artikel ini kita akan fokus membahas pada bagian bahasa markup.

Sebuah bahasa markup itu tidak sama dengan bahasa pemrograman, ketika kita menggunakan bahasa pemrograman, kita akan menjelaskan bagaimana sesuatu itu harus berjalan seperti kondisi if else atau sebagainya.

Sebaliknya, bahasa markup hanya digunakan untuk membubuhi keterangan dan menambahkan struktur semantik, atau makna, untuk dokumen teks. Jadi pada dasarnya, Anda dapat menganggap bahwa halaman web itu terdiri dari teks dengan penambahan markup.

Konsep umum dan istilah “markup” berevolusi dari ide pada pengoreksian dokumen atau penulisan struktur dokumen dengan “mem-markup” atau menandai isi dokumen tersebut dengan pena atau pensil, mirip dengan dokumen hasil ulangan sekolah yang penuh coretan dari guru.

contoh markup dalam dokumen teks

Namun, HTML tidak dimaksudkan untuk koreksi teks, melainkan mengatur struktur dan bentuk teks dengan cara membuatnya lebih mudah untuk dipahami, baik bagi Anda dan saya serta untuk perangkat lunak yang menafsirkan markup.

Dengan kata lain HTML adalah bahasa markup yang ditafsirkan oleh web browser. Untuk lebih jelasnya, mari kita lihat beberapa teks normal dan kemudian kita akan mencari tahu bagaimana kita bisa menandai teks ini dengan HTML. Lihat Teks dibawah ini:

Mi instan

Mi instan adalah mi yang sudah dimasak terlebih dahulu dan dicampur dengan minyak
dan bisa dipersiapkan untuk konsumsi hanya dengan menambahkan air panas dan bumbu
- bumbu yang sudah ada dalam paketnya

Teks diatas menjelaskan arti dari mie instan, Anda dapat membuat halaman web sesuka anda, seperti tentang kutipan favorit dari Shakespeare, bagaimana membuat pizza, praktek dan prosedur lingkungan kerja, atau apapun yang Anda inginkan.

Kembali dengan teks diatas tentang mie instan, lihat teks pada bagian paling atas yaitu pada teks “Mie Instan”, tulisan itu tampak seperti sebuah header yang mewakili isi dari halaman dan di bawahnya terdapat paragraf yang menjelaskan lebih detail. Dengan sekali lihat kita tahu dalam teks tersebut mana yang merupakan “header” (Judul) dan mana yang paragraf.

Namun, sepertinya, tidak ada cara untuk web browser untuk menentukan bagian mana dari teks tersebut yang merupakan header dan bagian mana yang paragraf? Bagaimana caranya agar web browser mengetahuinya?

Kita dapat mengatasi masalah ini dengan menerapkan “TAG”. Lebih jelas tentang tag bisa kunjungi halaman “STRUKTUR HALAMAN DALAM HTML”.

Tag H1

Sebuah tag tunggal seperti diatas: ada kurung pembuka, sebuah karakter khusus dalam kurung, dan kemudian dilengkapi dengan kurung tutup.

Ada banyak tag seperti ini, tapi dengan beberapa latihan, anda akan dengan mudah menghapalnya.

Tag diatas disebut tag judul, Kita akan berbicara lebih banyak tentang tag “headline” (judul) dalam artikel yang akan datang, tapi untuk saat ini yang kita perlu tahu adalah bahwa tag ini dimaksudkan untuk menandai headline atau judul.

Tag P

Lihat gambar diatas, Ini disebut tag paragraf, atau disebut sebagai “p-tag” untuk singkatannya.

Mari kita gunakan dua tag diatas pada teks yang kita punya tadi, yaitu teks “Mie Instan”.

Untuk header, mari kita tambahkan tag judul seperti dibawah ini, perhatikan tag “<h1>” yang disisipkan sebelum tulisan “Mie instan”:

<h1>Mi instan

Mi instan adalah mi yang sudah dimasak terlebih dahulu dan dicampur dengan minyak
dan bisa dipersiapkan untuk konsumsi hanya dengan menambahkan air panas dan bumbu
- bumbu yang sudah ada dalam paketnya.

Tapi bagaimana komputer tahu di mana judul kita akan berakhir?

Penggunaan Tag hampir selalu dipakai secara berpasangan, kita memiliki tag pembuka di sini, tapi kita harus menyelesaikan membungkus teks ini dengan menambahkan tag penutup.

Sebuah tag penutup tampak seperti tag pembuka, namun dengan penambahan garis miring setelah kurung buka.

Kita akan menambahkan tag penutup pada tulisan “Mie Instan” dengan penambahan Tag:

</h1>

Sehingga akan menjadi seperti ini :

<h1>Mie Instan</h1>

Mi instan adalah mi yang sudah dimasak terlebih dahulu dan dicampur dengan minyak
dan bisa dipersiapkan untuk konsumsi hanya dengan menambahkan air panas dan bumbu
- bumbu yang sudah ada dalam paketnya.

Sekarang kita perlu menggunakan tag paragraf untuk membungkus paragraf kita, di sini Sama seperti judul, kita akan menggunakan tag pembuka “p-tag” dan tag penutup “p-tag”, sehingga seperti dibawah ini:

Lihat penambahan tag “<p>” dan tag “</p>” yang digunakan untuk membungkus paragraf diatas.

Untuk melihat hasilnya silahkan lihat hasil akhir dibawah ini dan jalankan:

<h1>Mie Instan</h1>
<p>Mi instan adalah mi yang sudah dimasak terlebih dahulu dan dicampur dengan miny
ak, dan bisa dipersiapkan untuk konsumsi hanya dengan menambahkan air panas dan b
umbu - bumbu yang sudah ada dalam paketnya.</p>

Happy Nyekrip! Terimakasih.