Panduan Belajar HTML dari Nol!

Yaedu Digital November 13, 2025
Panduan Lengkap Belajar HTML

Panduan Lengkap Belajar HTML untuk Pemula

HTML (HyperText Markup Language) adalah bahasa markup yang digunakan untuk membuat halaman web. HTML sendiri bukan bahasa pemrograman, tetapi bahasa markup yang digunakan untuk memberi struktur pada konten web. Dengan HTML, kamu bisa menampilkan teks, gambar, link, tabel, formulir, dan banyak lagi di browser. Materi ini membahas HTML dari dasar hingga membuat halaman web sederhana secara step by step.

1. Memulai Belajar HTML

Sebelum menulis HTML, siapkan:

  • Editor Teks: Notepad, Visual Studio Code, Sublime Text, Atom, Code Studio, Acode, atau lainnya.
  • Browser: Google Chrome, Mozilla Firefox, Edge, atau lainnya.

Langkah pertama: Buat file HTML

  1. Buka editor teks.
  2. Buat file baru dan simpan dengan nama index.html.
  3. Tulis kode dasar HTML berikut:
<!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 paragraf pertama saya di HTML.</p>
</body>
</html>

Penjelasan kode:

  • <!DOCTYPE html> → Memberi tahu browser bahwa ini adalah dokumen HTML5.
  • <html> → Tag pembuka dan penutup dokumen HTML.
  • <head> → Bagian berisi informasi tentang halaman (metadata).
  • <title> → Judul halaman yang muncul di tab browser.
  • <body> → Bagian yang terlihat di halaman web.
  • <h1> → Heading 1, judul besar.
  • <p> → Paragraf.

2. Struktur Dasar HTML

HTML terdiri dari tag dengan pembuka <tag> dan penutup </tag>. Beberapa tag bisa self-closing, misalnya <img /> atau <br />.

Contoh elemen penting HTML

ElemenFungsi
<h1>…<h6>Judul / heading
<p>Paragraf
<a>Link / tautan
<img>Gambar
<ul> / <ol>Daftar tak berurutan / berurutan
<li>Item daftar
<div>Kotak pembungkus (container)
<span>Inline container

3. Menambahkan Teks dan Heading

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<p>Ini paragraf di bawah heading.</p>

Tips: Gunakan heading secara hierarki, <h1> hanya satu kali di halaman, dan <p> untuk paragraf teks biasa.

4. Menambahkan Link

<a href="https://www.google.com" target="_blank">Kunjungi Google</a>
  • href → alamat tujuan link
  • target="_blank" → membuka link di tab baru

5. Menambahkan Gambar

<img src="gambar.jpg" alt="Deskripsi Gambar" width="300">
  • src → sumber gambar
  • alt → teks alternatif jika gambar gagal dimuat
  • width → lebar gambar dalam piksel

6. Membuat Daftar

a. Daftar Tak Berurutan

<ul>
    <li>Belajar HTML</li>
    <li>Belajar CSS</li>
    <li>Belajar JavaScript</li>
</ul>

b. Daftar Berurutan

<ol>
    <li>Buka editor teks</li>
    <li>Tulis kode HTML</li>
    <li>Simpan file dan buka di browser</li>
</ol>

7. Menambahkan Tabel

<table border="1">
    <tr>
        <th>Nama</th>
        <th>Usia</th>
        <th>Kota</th>
    </tr>
    <tr>
        <td>Alice</td>
        <td>20</td>
        <td>Bandung</td>
    </tr>
    <tr>
        <td>Bob</td>
        <td>22</td>
        <td>Jakarta</td>
    </tr>
</table>

Penjelasan kode:

  • <table> → Membuat tabel.
  • <tr> → Baris tabel.
  • <th> → Heading Kolom.
  • <td> → Data sel.

8. Formulir (Form)

<form action="/submit" method="post">
    <label for="nama">Nama:</label>
    <input type="text" id="nama" name="nama" placeholder="Masukkan nama"><br><br>

    <label for="email">Email:</label>
    <input type="email" id="email" name="email" placeholder="Masukkan email"><br><br>

    <input type="submit" value="Kirim">
</form>

Penjelasan kode:

  • <action> → alamat server tempat data dikirim.
  • <method> → metode pengiriman data (get atau post).
  • <input> → berbagai jenis input seperti text, email, password, checkbox, radio, dll.
  • <label> → Teks deskriptif untuk input.

9. Mengatur Struktur dengan <div> dan <span>

  • <div> → digunakan untuk membungkus blok besar.
  • <span> → digunakan untuk inline styling pada bagian teks tertentu.
<div style="background-color: lightblue; padding: 10px;">
    <h2>Ini Judul Div</h2>
    <p>Ini paragraf di dalam div.</p>
</div>

<p>Saya <span style="color: red;">sangat suka</span> belajar HTML.</p>

1.) Perbedaan Dasar div dan span

Aspek <div> <span>
Tipe Block-level element (blok) Inline element (sebaris)
Fungsi utama Membungkus section, konten, atau bagian besar halaman Membungkus teks atau elemen kecil di dalam paragraf atau kalimat
Memulai baris baru Ya, selalu membuat baris baru Tidak, tetap dalam baris yang sama
Digunakan untuk Layout, kelompok elemen, struktur halaman Styling teks tertentu, bagian kecil dari teks, inline styling

2.) Penjelasan

<div> → digunakan untuk membungkus beberapa elemen sekaligus atau membuat bagian besar dari halaman. Contohnya: header, sidebar, konten utama, footer. Karena sifatnya blok, <div> selalu memulai baris baru.

<span> → digunakan untuk mengubah atau memberi style pada bagian kecil teks atau elemen dalam satu baris. Cocok untuk menyorot kata tertentu, warna teks, font berbeda, atau efek inline lainnya. Tidak memulai baris baru karena sifatnya inline.

3.) Contoh Penerapan

a. Menggunakan <div>

<div style="background-color: lightblue; padding: 10px;">
    <h2>Judul Bagian</h2>
    <p>Ini adalah konten di dalam div. Semua elemen di dalam div ini menjadi satu blok.</p>
</div>

<div style="background-color: lightgreen; padding: 10px;">
    <p>Ini div lain. Membuat baris baru secara otomatis.</p>
</div>

Hasil:

  • Setiap <div> muncul di baris baru.
  • Bisa membungkus beberapa elemen sekaligus (misal <h2> + <p>).

b. Menggunakan <span>

<p>Saya <span style="color: red; font-weight: bold;">sangat suka</span> belajar HTML.</p>
<p>Ini <span style="background-color: yellow;">teks yang diberi highlight</span> menggunakan span.</p>

Hasil:

  • <span> tidak membuat baris baru.
  • Hanya mempengaruhi teks atau elemen di dalamnya saja.

4.) Kapan Menggunakan <div> dan <span>

  • Gunakan <div> jika ingin mengelompokkan beberapa elemen atau membuat struktur layout halaman.
  • Gunakan <span> jika ingin memberi style atau efek pada teks tertentu tanpa mempengaruhi layout sebaris.

10. HTML Semantik

TagFungsi
<header>Bagian atas halaman / header
<nav>Menu navigasi
<main>Konten utama
<section>Bagian konten / bab tertentu
<article>Artikel independen
<footer>Bagian bawah halaman / footer
<header>
    <h1>Website Saya</h1>
</header>

<nav>
    <a href="#home">Home</a> |
    <a href="#about">About</a>
</nav>

<main>
    <section id="home">
        <h2>Selamat Datang</h2>
        <p>Ini halaman utama.</p>
    </section>

    <section id="about">
        <h2>Tentang Saya</h2>
        <p>Saya belajar HTML step by step.</p>
    </section>
</main>

<footer>
    <p>Hak Cipta &copy; 2025</p>
</footer>

11. Tips dan Praktik Terbaik

  1. Gunakan indentasi agar kode mudah dibaca.
  2. Gunakan komentar: <!-- Ini komentar, tidak akan muncul di browser -->
  3. Gunakan tag semantik agar web lebih terstruktur.
  4. Selalu sertakan alt di gambar untuk aksesibilitas.
  5. Cek halaman di berbagai browser agar tampilannya konsisten.

12. Langkah Selanjutnya Setelah Menguasai HTML

  • Pelajari CSS untuk mengatur tampilan (warna, layout, font).
  • Pelajari JavaScript untuk membuat halaman interaktif.
  • Buat proyek mini seperti halaman profil, portofolio, atau blog sederhana.
  • Gunakan editor modern seperti VS Code dan live server untuk melihat hasil langsung.

Contoh Proyek Mini: Halaman Profil Sederhana

<!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>
    <header>
        <h1>Profil Saya</h1>
    </header>

    <section>
        <h2>Tentang Saya</h2>
        <p>Nama saya Faisal. Saya belajar HTML step by step.</p>
        <img src="profil.jpg" alt="Foto Profil" width="200">
    </section>

    <section>
        <h2>Kontak</h2>
        <p>Email: faisal@email.com</p>
        <p>Telepon: 08123456789</p>
    </section>

    <footer>
        <p>Hak Cipta &copy; 2025 Faisal</p>
    </footer>
</body>
</html>

Kontak







Penjelasan Kode Form:

  • <form action="/submit" method="post"> → Membuat form. action menentukan alamat tujuan data dikirim, method="post" adalah metode pengiriman.
  • <label for="..."> → Memberi keterangan input, mengaitkan label dengan input berdasarkan id.
  • <input type="text"> → Input teks biasa untuk Nama. placeholder untuk teks sementara, required agar wajib diisi.
  • <input type="email"> → Input email, browser akan validasi format email otomatis.
  • <input type="tel"> → Input nomor telepon.
  • <input type="submit"> → Tombol kirim form. value adalah teks tombol. Style CSS mengatur tampilan warna, padding, border-radius, dan cursor.
  • Style Inline → Digunakan untuk membuat kotak input dan tombol rapi dan seragam, bisa diganti dengan CSS eksternal untuk versi lebih profesional.

Panduan Lengkap Belajar HTML | 2025

Tags
Yaedu Digital

Posted by Yaedu Digital

Yaedu Digital merupakan media informasi berbasis Internet yang membahas dan berbagi informasi terupdate mengenai seputar dunia Teknologi, Pendidikan, dan Informasi Lainnya Mencakup (Media Pembelajaran, Materi Ajar, Video Tutorial) serta artikel pembelajaran di dunia Komputer / IT.

Post a Comment

0 Comments