Belajar HTML dari Nol untuk Pemula

Bandung 14-04-2026 Berikut Ringkasan Mengenai HTML untuk para pemula - Belajar HTML dari Nol untuk Pemula. HTML (HyperText Markup Language) adalah bahasa dasar untuk membuat halaman website. Jika kamu ingin menjadi web developer, HTML adalah langkah pertama yang wajib dikuasai.

Apa Itu HTML?

HTML adalah bahasa markup yang digunakan untuk menyusun struktur halaman web. Dengan HTML, kamu bisa membuat: Judul, Paragraf, Gambar, Link, Tabel, Form

HTML bukan bahasa pemrograman, tapi bahasa struktur.

Struktur Dasar HTML

Berikut contoh struktur dasar HTML:

<!DOCTYPE html>

<html>

<head>

<title>Website Pertamaku</title>

</head>

<body>

<h1>Hello World</h1>

<p>Ini adalah website pertama saya</p>

</body>

</html>

Penjelasan:

<!DOCTYPE html> → Menentukan bahwa ini HTML5

<html> → Elemen utama

<head> → Informasi halaman

<title> → Judul di tab browser

<body> → Isi utama website

Tag HTML Dasar yang Wajib Diketahui

1. Heading (Judul)

<h1>Judul Utama</h1>

<h2>Sub Judul</h2>

<h3>Judul Kecil</h3>

2. Paragraf

<p>Ini adalah paragraf</p>

3. Link

<a href="https://google.com">Kunjungi Google</a>

4. Gambar

5. List (Daftar)

<ul>

<li>Item 1</li>

<li>Item 2</li>

</ul>

Cara Menjalankan HTML

1. Buka Notepad / VS Code

2. Simpan file dengan nama: index.html

3. Buka file tersebut di browser (Chrome, Edge, dll)

Contoh Halaman Sederhana

<!DOCTYPE html>

<html>

<head>

<title>Profil Saya</title>

</head>

<body>

<h1>Nama Saya Rezza</h1>

<p>Saya sedang belajar HTML</p>

<h2>Hobi Saya</h2>

<ul>

<li>Membaca</li>

<li>Ngoding</li>

<li>Olahraga</li>

</ul>

</body>

</html>

Contoh Latihan (Wajib Dicoba)

Latihan 1: Buat Halaman Profil

Buat halaman HTML yang berisi: Nama kamu, Deskripsi singkat, Hobi (minimal 3)

Latihan 2: Tambahkan Gambar & Link

Tambahkan ke halaman: 1 gambar, 1 link ke Google

Latihan 3: Buat Daftar Makanan Favorit

Gunakan <ul> atau <ol> untuk menampilkan: 5 makanan favorit kamu

Latihan 4: Mini Project

Buat halaman sederhana dengan isi: Judul: "Website Pertamaku", Paragraf perkenalan, Daftar hobi

Gambar, Link ke sosial media

Tips Belajar HTML untuk Pemula

Jangan hanya membaca, langsung praktek
Gunakan editor seperti VS Code
Coba ubah-ubah kode dan lihat hasilnya
Konsisten latihan setiap hari

HTML adalah fondasi utama dalam dunia web. Dengan menguasai HTML, kamu sudah selangkah lebih dekat menjadi web developer.

Perbedaan antara <head> dan <body> dalam HTML sangat penting karena keduanya memiliki fungsi yang berbeda dalam sebuah halaman web.

<head> (Bagian Informasi)

<head> adalah bagian yang berisi informasi tentang halaman, bukan isi yang ditampilkan langsung ke pengguna.

Fungsi <head>:

Menyimpan judul halaman (<title>)

Menyisipkan CSS (tampilan)

Menyisipkan metadata (deskripsi, keyword)

Menambahkan script (JavaScript)

Contoh:

<head>

<title>Website Saya</title>

</head>

Isi dalam <head> tidak terlihat langsung di halaman, tapi berpengaruh pada sistem dan tampilan.

<body> (Bagian Isi)

<body> adalah bagian yang berisi semua konten yang ditampilkan di halaman web.

Fungsi <body>: Menampilkan teks, Menampilkan gambar, Menampilkan link, Menampilkan video, tabel, dll

Contoh:

<body>

<h1>Halo Dunia</h1>

<p>Ini adalah isi website</p>

</body>

Semua yang ada di <body> akan terlihat oleh pengguna di browser.

Perbedaan Utama

<head> <body>

Tidak terlihat oleh pengguna Terlihat oleh pengguna

Berisi informasi halaman Berisi isi/konten halaman

Contoh: title, meta, CSS Contoh: teks, gambar, link

Berikut contoh kode HTML sederhana yang menampilkan judul dan paragraf:

<!DOCTYPE html>

<html>

<head>

<title>Contoh Sederhana</title>

</head>

<body>

<h1>Belajar HTML</h1>

<p>Ini adalah paragraf pertama saya dalam HTML.</p>

</body>

</html>

Penjelasan singkat:

<h1> → untuk menampilkan judul
<p> → untuk menampilkan paragraf

Silakan simpan dengan nama index.html, lalu buka di browser untuk melihat hasilnya

Materi “kode HTML sederhana yang menampilkan: Judul dan Paragraf” adalah dasar paling awal dalam belajar HTML. Di sini kamu belajar bagaimana menampilkan teks utama (judul) dan isi penjelasan (paragraf) di halaman web.

Penjelasan Dasar

Dalam HTML, untuk menampilkan:

Judul → menggunakan tag <h1> sampai <h6>
Paragraf → menggunakan tag <p>

Contoh Kode

<!DOCTYPE html>

<html>

<head>

<title>Contoh HTML</title>

</head>

<body>

<h1>Belajar HTML</h1>

<p>Ini adalah paragraf pertama saya.</p>

</body>

</html>

Penjelasan Kode

1. <!DOCTYPE html>

Menandakan bahwa dokumen menggunakan HTML versi terbaru (HTML5).

2. <html>

Tag utama yang membungkus seluruh isi halaman.

3. <head>

Berisi informasi seperti judul tab browser:

<title>Contoh HTML</title>

4. <body>

Bagian yang ditampilkan ke pengguna.

Fokus Utama Materi

Judul → <h1>

<h1>Belajar HTML</h1>

Digunakan untuk judul utama
Ukurannya paling besar
Biasanya hanya 1 dalam satu halaman

Paragraf → <p>

<p>Ini adalah paragraf pertama saya.</p>

Digunakan untuk menulis isi atau penjelasan
Bisa lebih dari satu paragraf

Contoh Variasi

<h1>Website Saya</h1>

<p>Selamat datang di website saya.</p>

<h2>Tentang Saya</h2>

<p>Saya sedang belajar HTML dari nol.</p>

Di sini:

<h1> untuk judul utama
<h2> untuk subjudul
<p> untuk isi penjelasan

Vivo Y12 PD1901BF_EXMA

Wednesday, 15 April 2026