in Blog

𝐇𝐓𝐌𝐋 ; 𝐇𝐲𝐩𝐞đĢ𝐓𝐞𝐱𝐭 𝐌𝐚đĢ𝐤𝐮𝐩 𝐋𝐚𝐧𝐠𝐮𝐚𝐠𝐞

đ€ĪÎą đ—‚đ—Ī… 𝐇𝐓𝐌𝐋?

HTML (HyperText Markup Language) adalah bahasa markup standar yang digunakan untuk membuat dan menyusun halaman web.

  • HyperText → Teks yang bisa menaut (link) ke halaman lain.
  • Markup → Bahasa yang menggunakan tag untuk memberi struktur pada teks.
  • Language → Artinya HTML punya aturan baku (syntax) yang harus diikuti.

HTML pertama kali dibuat oleh Tim Berners-Lee pada tahun 1991, dan sampai sekarang sudah berkembang menjadi versi modern yaitu HTML5.

đ…Ī…đ“Ŗđ—€đ—Œđ—‚ 𝐇𝐓𝐌𝐋

  1. Membuat struktur halaman → Menyusun teks, gambar, video, link, tabel, dll.
  2. Menghubungkan antar halaman → Dengan hyperlink (<a>).
  3. Menyisipkan media → Gambar, audio, video, animasi.
  4. Membuat formulir → Untuk input data pengguna (login, search, komentar, dll).
  5. Pondasi untuk CSS & JavaScript → HTML = kerangka, CSS = tampilan, JS = interaktif.

đ’đ—đ—‹Ī…đ—„đ—Ī…đ—‹ 𝐃α𝗌α𝗋 𝐃âąēđ—„Ī…ę­‘đ–žđ“Ŗ 𝐇𝐓𝐌𝐋

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Belajar HTML</title>
</head>
<body>
  <h1>Halo, Dunia!</h1>
  <p>Ini adalah contoh halaman HTML pertama saya.</p>
</body>
</html>

đ’Ģâ„¯đ“ƒđ’ŋâ„¯đ“đ’ļ𝓈đ’ļ𝓃:

  • <!DOCTYPE html> → Mendefinisikan bahwa dokumen ini adalah HTML5.
  • <html lang="id"> → Elemen root (paling luar), atribut lang menunjukkan bahasa.
  • <head> → Bagian kepala dokumen, berisi metadata, judul, stylesheet, script.
  • <meta charset="UTF-8"> → Menentukan karakter encoding agar teks muncul benar.
  • <meta name="viewport"> → Agar tampilan responsif di perangkat mobile.
  • <title> → Judul halaman, muncul di tab browser.
  • <body> → Isi utama yang akan ditampilkan di layar browser.

𝐄áĨŖđ–žę­‘đ–žđ“Ŗ 𝐃α𝗌α𝗋

HTML tersusun dari elemen (tags).

  1. Heading (judul) <h1>Judul Utama</h1> <h2>Sub Judul</h2> <h3>Sub Sub Judul</h3> → Ada dari <h1> sampai <h6>, semakin besar angka semakin kecil ukurannya.
  2. Paragraf <p>Ini adalah sebuah paragraf.</p>
  3. Tautan (link) <a href="https://google.com">Kunjungi Google</a>
  4. Gambar <img src="gambar.jpg" alt="Deskripsi gambar">
  5. Daftar
    • Berurutan (ordered list): <ol> <li>Pertama</li> <li>Kedua</li> </ol>
    • Tidak berurutan (unordered list): <ul> <li>Apel</li> <li>Pisang</li> </ul>
  6. Tabel <table border="1"> <tr> <th>Nama</th> <th>Umur</th> </tr> <tr> <td>Budi</td> <td>20</td> </tr> </table>
  7. Formulir <form action="/submit" method="post"> <label>Nama:</label> <input type="text" name="nama"> <button type="submit">Kirim</button> </form>

đđ–žđ—‹đ—„đ–žę­‘á‘˛Îąđ“Ŗđ—€Îąđ“Ŗ 𝐇𝐓𝐌𝐋 (𝐕𝖾𝗋𝗌𝗂)

  • HTML 1.0 (1991) → Versi pertama, sangat sederhana.
  • HTML 2.0 (1995) → Mendukung form dan tabel.
  • HTML 3.2 (1997) → Menambahkan elemen desain (misalnya <font>).
  • HTML 4.01 (1999) → Lebih terstruktur, mendukung CSS.
  • XHTML (2000-an) → Varian ketat dari HTML.
  • HTML5 (2008 – sekarang) → Modern, mendukung video, audio, canvas, geolocation, responsive, dll.

đ‡Ī…á‘˛Ī…đ“Ŗđ—€Îąđ“Ŗ 𝐇𝐓𝐌𝐋, 𝐂𝐒𝐒, á‘¯Îąđ“Ŗ 𝐉α𝗏α𝐒đ–ŧđ—‹đ—‚Īđ—

👉 Dalam pembuatan website, ketiga ini selalu digunakan bersama:

  • HTML → Kerangka (struktur).
  • CSS → Memberi gaya/tampilan (warna, layout, font).
  • JavaScript → Memberi interaktivitas (animasi, validasi, efek dinamis).

Contoh singkat integrasi:

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <title>Website Mini</title>
  <style>
    body { font-family: Arial; background-color: #f0f0f0; }
    h1 { color: blue; }
  </style>
</head>
<body>
  <h1>Halo, Dunia!</h1>
  <button onclick="alert('Tombol diklik!')">Klik Saya</button>
</body>
</html>

đŠđ–žđ—Œđ—‚ę­‘ĪĪ…áĨŖÎąđ“Ŗ

  • HTML adalah bahasa markup standar untuk membuat halaman web.
  • HTML menyusun struktur konten, sedangkan tampilan diatur CSS dan interaktivitas oleh JavaScript.
  • HTML5 adalah versi terbaru yang mendukung banyak fitur modern (video, audio, canvas, form canggih, dll).
  • Dengan memahami HTML, kamu bisa mulai membuat website dari nol hingga kompleks.

You may also like