Apa itu HTML? Struktur Dasar HTML

⬢⬡⬡, HTML /

Kita mengenal ada banyak macam format file pada komputer. Apabila untuk dokumen teks kita mengenal format seperti DOC, DOCX, PDF, lalu untuk berkas lagu kita mengenal MP3, AAC, dsb. Masing-masing format ini hanya bisa dibuka menggunakan aplikasi tertentu yang mendukung format tersebut.

Nah, ketika kita menjelajahi website menggunakan peramban web alias web browser seperti Firefox atau Chrome, seperti ketika kamu membaca artikel ini, yang sebenarnya kita lakukan adalah men-download sebuah file dengan format HTML, lalu membukanya di web browser.

HTML, singkatan dari Hypertext Markup Language, adalah format dokumen yang lazim digunakan pada halaman Web.

File HTML sebenarnya bisa dibuat menggunakan aplikasi seperti Dreamweaver dan Microsoft Word, meski aplikasi tersebut memiliki banyak keterbatasan. Cara lain yang lebih fleksibel dan disarankan adalah menggunakan editor teks atau kode seperti Notepad, Notepad++, Visual Studio Code dsb.

Cobalah membuat sebuah dokumen teks dengan Microsoft Word atau LibreOffice lalu simpan dengan format RTF atau HTML, kemudian buka kembali dengan Notepad. Maka kita akan bisa melihat susunan kode-kode bagaimana file tersebut dibuat.

Struktur dasar HTML

Sekarang mari kita buat dengan cara sebaliknya, menuliskan kode-kode dengan Notepad, lalu menyimpannya dengan format HTML (bukan TXT). Tenang, struktur kode HTML sebenarnya sangatlah sederhana. Lagipula kamu membaca artikel ini karena ingin belajar koding, bukan?

Mari coba buka Notepad dan ketikkan kode berikut. Kemudian simpan dengan nama “halo.html” (pastikan tidak ada akhiran ekstensi .txt).

<!DOCTYPE html>
<html>
  <head>
    <title>Belajar HTML</title>
  </head>
  <body>
    <b>Halo dunia!</b> Apa kabar?
  </body>
</html>

Kemudian coba buka kembali file tersebut dengan Firefox atau Chrome untuk melihat bagaimana hasilnya.

Halo dunia! Apa kabar?

Selamat, kamu baru saja membuat dokumen HTML pertamamu!

Penjelasan

Mari kita pilah-pilah maksud dari tiap baris kode di atas.

<!DOCTYPE html>

DOCTYPE ini berguna untuk menjelaskan jenis format dokumen apabila kita hendak menggunakan format yang lebih spesifik, seperti XHTML, HTML 4.0, dsb. Jenis-jenis spesifik ini tidak akan dibahas pada artikel ini, untuk permulaan kita cukup gunakan format HTML yang umum.

<html>
...
</html>

Saat melihat kode di atas tentu kamu sudah menduga, bahwa tiap bagian HTML harus selalu diapit oleh <tag>...</tag>.

Setiap dokumen HTML harus dibuka dengan tag <html> dan diakhiri dengan </html>. Isi dokumen berada di antaranya.

  <head>
    <title>Belajar HTML</title>
  </head>

Berikutnya adalah tag <head>. Apa yang tercantum di antara <head>...</head> merupakan informasi-informasi yang tidak ditampilkan di web browser. Pada contoh di atas terdapat tag <title>Belajar HTML</title>. Tulisan “Belajar HTML” ini merupakan judul Tab di web browser.

  <body>
    <b>Halo dunia!</b> Apa kabar?
  </body>

Segala sesuatu yang terdapat di dalam tag <body>...</body> merupakan isi dokumen yang akan muncul di halaman web browser. Di sinilah kita menuliskan isi halamannya.

Seperti halnya saat mengetik di Microsoft Word, kita bisa membuat tulisan bercetak tebal, bercetak miring, digaris bawah, dan lain sebagainya. Ini bisa dilakukan dengan menggunakan tag-tag tertentu.

Pada contoh di atas, tulisan Halo dunia! diapit dengan <b>...</b> yang berfungsi untuk membuat cetak tebal.

Berikut ini daftar beberapa tag dasar yang bisa digunakan untuk memformat tulisan.

<b></b>Cetak tebal (bold)
<i></i>Cetak miring (italic)
<u></u>Garis bawah (underline)
<p></p>Membuat paragraf
<h1></h1>Membuat judul (heading) tingkat 1
<h2></h2>Membuat judul (heading) tingkat 2
<h3></h3>Membuat judul (heading) tingkat 3
<h4></h4>Membuat judul (heading) tingkat 4
<h5></h5>Membuat judul (heading) tingkat 5
<h6></h6>Membuat judul (heading) tingkat 6
<br />Membuat baris baru (seperti menekan enter)

Spasi, tab, dan baris baru (enter)

Hal yang perlu diperhatikan pada HTML, sebagaimana halnya dengan bahasa pemrograman pada umumnya, spasi, tab, dan baris baru pada kode akan diabaikan. Dengan kata lain, kita bisa saja menuliskan kodenya dalam satu baris seperti ini:

<!DOCTYPE html><html><head><title>Belajar HTML</title></head><body><b>Halo dunia!</b> Apa kabar?</body></html>

Hasilnya akan sama saja. Walaupun begitu, tetap lebih mudah memanfaatkan baris baru dan spasi sedemikian rupa agar kode sumber (source code) mudah dibacanya.

Lalu bagaimana jika ingin membuat baris baru yang ditampilkan di halaman web? Caranya, dengan menggunakan tag <br />. Tag ini merupakan penyingkatan dari <br></br>, karena tidak memerlukan isian apa-apa di antaranya, maka tag tersebut ditulis dalam bentuk singkat.

Misalnya kita ingin memberi baris baru antara “Halo dunia!” dan “Apa kabar?”, penulisan kodenya menjadi sbb.

<b>Halo dunia!</b><br />
Apa kabar?
Halo dunia!
Apa kabar?

Tulis Komentar