Apa itu HTML?

HTML (HyperText Markup Language) adalah bahasa markup yang digunakan untuk membuat struktur halaman web. HTML bukanlah bahasa pemrograman, melainkan bahasa yang digunakan untuk memberikan struktur dan identifikasi pada elemen-elemen halaman web.

Struktur Dasar HTML

Dokumen HTML selalu dimulai dengan deklarasi , diikuti dengan elemen-elemen dasar berikut:

<!DOCTYPE html>
<html>
  <head>
    <title>Judul Halaman</title>
  </head>
  <body>
    <h1>Selamat Datang di HTML</h1>
    <p>Ini adalah paragraf pertama di halaman web saya.</p>
  </body>
</html>

Penjelasan Struktur:

<!DOCTYPE html>: Menandakan bahwa dokumen ini menggunakan HTML5.
<html>: Elemen utama yang membungkus seluruh isi halaman.
<head>: Bagian yang berisi informasi meta, link ke file eksternal (CSS, JavaScript), dan judul halaman yang muncul di tab browser.
<title>: Judul yang muncul di tab browser.
<body>: Berisi konten utama yang akan ditampilkan di halaman web seperti teks, gambar, tautan, dan lain-lain.

Elemen Dasar HTML

Berikut adalah beberapa elemen HTML dasar yang sering digunakan:

Heading Heading digunakan untuk membuat judul atau subjudul pada halaman. Tersedia enam tingkat heading, dari <h1> (paling penting) hingga <h6> (paling kecil).

<h1>Judul Utama</h1>
<h2>Subjudul</h2>
<h3>Sub-subjudul</h3>

Paragraf Paragraf dalam HTML dibuat menggunakan elemen <p>.

<p>Ini adalah contoh paragraf di HTML.</p>

Tautan (Link) Tautan dibuat menggunakan elemen <a>. Atribut href menentukan URL tujuan.

<a href="https://www.example.com">Kunjungi Example</a>

Gambar Untuk menambahkan gambar, gunakan elemen <img> dengan atribut src untuk menentukan lokasi gambar, dan alt sebagai teks alternatif jika gambar tidak bisa ditampilkan.

<img src="gambar.jpg" alt="Deskripsi gambar">

list HTML menyediakan dua jenis list:

Daftar berurutan menggunakan <ol> (ordered list). Daftar tidak berurutan menggunakan <ul> (unordered list).

<!-- Daftar berurutan -->
<ol>
  <li>Item pertama</li>
  <li>Item kedua</li>
</ol>

<!-- Daftar tidak berurutan -->
<ul>
  <li>Item pertama</li>
  <li>Item kedua</li>
</ul>

Tabel HTML juga mendukung pembuatan tabel menggunakan elemen <table>, <tr> (baris), <th> (header), dan <td> (data).

<table>
  <tr>
    <th>Nama</th>
    <th>Umur</th>
  </tr>
  <tr>
    <td>Ana</td>
    <td>23</td>
  </tr>
  <tr>
    <td>Budi</td>
    <td>30</td>
  </tr>
</table>

Atribut HTML

Setiap elemen HTML bisa memiliki atribut yang memberikan informasi tambahan. Beberapa atribut umum adalah:

id: Untuk memberikan identitas unik pada elemen.
class: Untuk mengelompokkan elemen ke dalam kategori tertentu.
style: Untuk memberikan gaya langsung ke elemen.
href: Digunakan pada elemen untuk menentukan tautan.

src: Digunakan pada elemen untuk menentukan lokasi gambar.

<p id="paragraf1" class="paragraf-utama">Ini adalah paragraf dengan id dan class.</p>

Komentar di HTML

Komentar digunakan untuk menambahkan catatan atau deskripsi pada kode HTML tanpa ditampilkan di browser.

<!-- Ini adalah komentar -->

Form

HTML juga memungkinkan pembuatan formulir untuk mengumpulkan input pengguna. Formulir menggunakan elemen <form>, dan elemen-elemen input seperti <input>, <textarea>, dan <button>.

<form action="/submit" method="POST">
  <label for="nama">Nama:</label>
  <input type="text" id="nama" name="nama">
  
  <label for="email">Email:</label>
  <input type="email" id="email" name="email">

  <button type="submit">Kirim</button>
</form>