Membuat blog dari nol menggunakan HTML adalah cara terbaik untuk memahami bagaimana “tulang punggung” sebuah website bekerja. Kita akan membaginya menjadi tiga tahap: Dasar (Struktur), Menengah (Tampilan), dan Lanjut (Interaktivitas & Optimasi).
1. Tingkat Dasar: Struktur HTML
Pada tahap ini, kita hanya fokus pada konten. Bayangkan HTML sebagai kerangka manusia tanpa baju atau kulit.
Simpan kode ini dengan nama index.html:
HTML
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Blog Pertamaku</title>
</head>
<body>
<header>
<h1>Selamat Datang di Blog Saya</h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Tentang</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h2>Judul Artikel Pertama</h2>
<p>Diposting pada <time datetime="2026-01-24">24 Januari 2026</time></p>
<p>Ini adalah isi paragraf blog. HTML digunakan untuk menentukan struktur teks ini.</p>
</article>
</main>
<footer>
<p>© 2026 Nama Kamu</p>
</footer>
</body>
</html>
2. Tingkat Menengah: Styling dengan CSS
Blog di atas akan terlihat sangat polos. Untuk membuatnya menarik, kita perlu CSS (Cascading Style Sheets) untuk mengatur tata letak, warna, dan font.
Tambahkan tag <style> di dalam bagian <head>:
CSS
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
line-height: 1.6;
margin: 0;
padding: 0;
background-color: #f4f4f4;
}
header {
background: #333;
color: #fff;
padding: 1rem;
text-align: center;
}
main {
max-width: 800px;
margin: 20px auto;
background: #fff;
padding: 20px;
border-radius: 8px;
}
article h2 {
color: #333;
}
3. Tingkat Lanjut: Responsif & Dinamis
Blog modern harus bisa dibuka di HP (Responsive Design) dan memiliki interaksi dasar.
A. Membuat Layout Responsif
Tambahkan media query agar tampilan menyesuaikan layar ponsel:
CSS
@media (max-width: 600px) {
main {
width: 90%;
margin: 10px auto;
}
}
B. Interaktivitas (JavaScript Dasar)
Ingin menambahkan tombol “Mode Gelap”? Tambahkan script ini sebelum tag penutup </body>:
HTML
<button onclick="toggleDark()">Mode Gelap</button>
<script>
function toggleDark() {
document.body.classList.toggle("dark-mode");
}
</script>
<style>
.dark-mode {
background-color: #222;
color: white;
}
.dark-mode main {
background-color: #333;
color: white;
}
</style>
Ringkasan Perbedaan Tahapan
| Fitur | Dasar (HTML) | Menengah (CSS) | Lanjut (JS & SEO) |
| Fungsi | Struktur & Teks | Estetika & Warna | Interaksi & Responsif |
| Alat | Tag Dasar (<p>, <h1>) | Flexbox / Grid | JavaScript & Meta Tags |
| Tampilan | Hitam Putih | Berwarna & Rapi | Mendukung HP & Dark Mode |
Langkah Selanjutnya
Membuat blog HTML statis adalah awal yang hebat. Namun, jika artikel Anda bertambah banyak, Anda akan lelah mengedit file HTML satu per satu.
Apakah Anda ingin saya ajarkan cara menghubungkan blog ini ke CSS eksternal agar kode lebih rapi, atau ingin mencoba membuat layout “Grid” yang lebih kompleks untuk galeri foto?
