Belajar Web Development

Dasar HTML

HTML (HyperText Markup Language) adalah bahasa dasar untuk membuat halaman web. Setiap website yang kamu lihat di internet — Google, YouTube, Instagram — semuanya dibangun di atas HTML.

HTML bukanlah bahasa pemrograman, tapi bahasa markup. Artinya, HTML digunakan untuk menandai (markup) bagian-bagian konten dan memberi tahu browser bagaimana menampilkannya.

Struktur Dokumen HTML

Setiap halaman HTML memiliki struktur dasar seperti ini:

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Judul Halaman</title>
</head>
<body>
    <!-- Konten halaman ditaruh di sini -->
    <h1>Selamat Datang!</h1>
    <p>Ini adalah paragraf pertama.</p>
</body>
</html>

Mari kita bahas satu per satu:

TagFungsi
<!DOCTYPE html>Memberi tahu browser bahwa ini dokumen HTML5
<html>Elemen root — pembungkus seluruh halaman
<head>Berisi informasi tentang halaman (tidak ditampilkan di browser)
<meta charset="UTF-8">Mengatur encoding karakter (agar huruf Indonesia tampil benar)
<title>Judul yang muncul di tab browser
<body>Berisi konten yang ditampilkan di browser
Tag Pembuka dan Penutup

Hampir semua tag HTML punya pembuka dan penutup:

  • Pembuka: <h1>
  • Penutup: </h1> (ada garis miring /)
  • Konten ditulis di antaranya: <h1>Judul</h1> :::

Heading (Judul)

HTML punya 6 level heading, dari <h1> (paling besar) sampai <h6> (paling kecil):

<h1>Heading 1 — Judul Utama</h1>
<h2>Heading 2 — Sub Judul</h2>
<h3>Heading 3 — Sub Sub Judul</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

:::warning Aturan Penting Dalam satu halaman, sebaiknya hanya ada 1 buah <h1>. Ini adalah judul utama halaman. Gunakan <h2>, <h3>, dst. untuk sub-bagian.

Paragraf dan Teks

<!-- Paragraf -->
<p>Ini adalah sebuah paragraf. Paragraf otomatis diberi jarak dengan elemen lain.</p>
<p>Ini paragraf kedua. Setiap tag <p> membuat baris baru.</p>

<!-- Teks tebal -->
<p>Kata ini <strong>penting sekali</strong> jadi dibuat tebal.</p>

<!-- Teks miring -->
<p>Kata ini <em>ditekankan</em> jadi dibuat miring.</p>

<!-- Line break (pindah baris tanpa paragraf baru) -->
<p>Baris pertama<br>Baris kedua</p>

<!-- Garis horizontal -->
<hr>
TagHasil
<p>Paragraf
<strong>Teks tebal
<em>Teks miring
<br>Pindah baris
<hr>Garis horizontal

Link digunakan untuk menghubungkan satu halaman ke halaman lain:

<!-- Link ke website lain -->
<a href="https://www.google.com">Buka Google</a>

<!-- Link ke halaman lain di website kita -->
<a href="tentang.html">Halaman Tentang</a>

<!-- Link yang buka di tab baru -->
<a href="https://www.google.com" target="_blank">Buka di Tab Baru</a>

Penjelasan:

  • href — alamat tujuan link
  • target="_blank" — buka di tab baru

Gambar

<!-- Gambar dari file lokal -->
<img src="foto.jpg" alt="Deskripsi foto">

<!-- Gambar dengan ukuran tertentu -->
<img src="logo.png" alt="Logo Website" width="200" height="100">

<!-- Gambar dari internet -->
<img src="https://picsum.photos/400/200" alt="Gambar Random">

Penjelasan:

  • src — lokasi file gambar
  • alt — teks alternatif (muncul kalau gambar gagal dimuat, penting untuk aksesibilitas)
  • width dan height — ukuran gambar dalam pixel

List (Daftar)

Unordered List (Daftar Tidak Berurutan)

Menggunakan bullet point:

<ul>
    <li>Nasi Goreng</li>
    <li>Mie Ayam</li>
    <li>Sate Ayam</li>
    <li>Bakso</li>
</ul>

Ordered List (Daftar Berurutan)

Menggunakan nomor:

<ol>
    <li>Siapkan bahan</li>
    <li>Panaskan minyak</li>
    <li>Masukkan bumbu</li>
    <li>Aduk rata</li>
    <li>Sajikan</li>
</ol>

Nested List (Daftar Bersarang)

List bisa ditaruh di dalam list:

<ul>
    <li>Frontend
        <ul>
            <li>HTML</li>
            <li>CSS</li>
            <li>JavaScript</li>
        </ul>
    </li>
    <li>Backend
        <ul>
            <li>PHP</li>
            <li>MySQL</li>
        </ul>
    </li>
</ul>

Komentar HTML

Komentar tidak akan ditampilkan di browser, tapi berguna untuk catatan di kode:

<!-- Ini adalah komentar, tidak akan muncul di browser -->

<!-- TODO: Tambahkan navigasi di sini -->

<!--
    Komentar bisa
    lebih dari satu baris
-->

Latihan: Halaman Profil Sederhana

Coba buat file profil.html di folder ~/Herd/belajar/ dengan isi berikut:

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Profil Saya</title>
</head>
<body>
    <h1>Profil Saya</h1>

    <img src="https://picsum.photos/150/150" alt="Foto Profil">

    <h2>Tentang Saya</h2>
    <p>Halo! Nama saya <strong>User</strong>. Saya sedang belajar <em>web development</em>.</p>

    <h2>Hobi</h2>
    <ul>
        <li>Coding</li>
        <li>Membaca</li>
        <li>Bermain game</li>
    </ul>

    <h2>Langkah Belajar</h2>
    <ol>
        <li>Belajar HTML ✅</li>
        <li>Belajar CSS</li>
        <li>Belajar JavaScript</li>
        <li>Belajar PHP</li>
        <li>Belajar Database</li>
    </ol>

    <hr>

    <p>Hubungi saya: <a href="mailto:user@email.com">user@email.com</a></p>

    <p><a href="index.html">← Kembali ke Beranda</a></p>
</body>
</html>

Buka http://belajar.test/profil.html di browser untuk melihat hasilnya!

Selanjutnya

Sekarang kamu sudah paham dasar HTML. Mari lanjut ke Tabel dan Form → untuk belajar membuat tabel data dan form input.

❓ Error Umum Pemula

:::warning Sering Terjadi!

  1. Lupa Tag Penutup: Menulis <h1>Judul tapi lupa </h1>. Akibatnya, seluruh teks di bawahnya akan menjadi tebal dan besar semua!
  2. Salah Ketik Nama Tag/Atribut: Menulis <img scr="foto.jpg"> (seharusnya src). Gambarnya tidak akan muncul dan hanya menampilkan ikon rusak.
  3. Tertukar <head> dan <header>: <head> adalah untuk metadata (konfigurasi yang dibaca browser) dan tidak tampil di layar. <header> adalah untuk bagian atas halaman web (seperti logo dan menu) yang bisa dilihat oleh user. :::