HTML Tingkat Lanjut
Mini Project: Membuat Blog Sederhana
oleh: Suryo Adhy Chandra, ST
Setelah mempelajari padding, margin, div, dan input secara terpisah, sekarang saatnya kita menggabungkan semuanya untuk membangun sebuah blog sederhana!
Blog yang akan kita buat memiliki 4 bagian utama:
- Header — judul blog
- Daftar artikel — menampilkan postingan
- Form komentar — menggunakan input
- Footer — bagian bawah halaman
Hasil Akhir yang Akan Kita Buat
Preview Blog
Blog Saya
Tempat berbagi cerita dan ilmu pengetahuan
Judul Artikel Pertama
Senin, 7 April 2025 | oleh: Admin
Ini adalah isi dari artikel pertama. Di sini kita bisa menulis cerita, tips, atau ilmu apapun yang ingin kita bagikan kepada pembaca.
Judul Artikel Kedua
Selasa, 8 April 2025 | oleh: Admin
Ini adalah isi dari artikel kedua. Setiap artikel dibungkus dalam div tersendiri agar mudah diatur tampilannya.
Tulis Komentar
Langkah-langkah Membuatnya
1
Buat struktur HTML dasar
Pertama siapkan kerangka HTML beserta tag <style> untuk CSS.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Blog Saya</title>
<style>
/* nanti kita isi style di sini */
</style>
</head>
<body>
<!-- nanti kita isi konten di sini -->
</body>
</html>
2
Buat header blog menggunakan div + padding + margin
Header adalah bagian paling atas. Kita bungkus dalam <div> dengan
padding agar teks tidak mepet ke tepi, dan beri background warna.
/* CSS */
.header {
background-color: #1e3a8a;
color: white;
padding: 20px 30px; /* ruang di dalam header */
margin-bottom: 20px; /* jarak ke konten di bawahnya */
}
/* HTML */
<div class="header">
<h1>Blog Saya</h1>
<p>Tempat berbagi cerita dan ilmu pengetahuan</p>
</div>
3
Buat kartu artikel menggunakan div + padding + margin
Setiap artikel dibungkus dalam sebuah <div class="artikel">.
Padding memberi ruang di dalam kartu, margin-bottom memberi jarak antar artikel.
/* CSS */
.artikel {
border: 1px solid #e2e8f0;
border-radius: 8px;
padding: 16px; /* ruang di dalam kartu artikel */
margin-bottom: 16px; /* jarak ke artikel berikutnya */
}
.artikel h3 {
margin-top: 0;
margin-bottom: 6px; /* jarak judul ke teks tanggal */
color: #1e40af;
}
.artikel small {
color: #64748b;
}
.artikel p {
margin-top: 10px;
margin-bottom: 10px;
}
/* HTML */
<div class="artikel">
<h3>Judul Artikel Pertama</h3>
<small>Senin, 7 April 2025 | oleh: Admin</small>
<p>Ini adalah isi dari artikel pertama...</p>
<button>Baca Selengkapnya</button>
</div>
<div class="artikel">
<h3>Judul Artikel Kedua</h3>
<small>Selasa, 8 April 2025 | oleh: Admin</small>
<p>Ini adalah isi dari artikel kedua...</p>
<button>Baca Selengkapnya</button>
</div>
4
Buat form komentar menggunakan input + div + padding
Form komentar dibungkus div tersendiri agar mudah di-styling. Di dalamnya terdapat
beberapa <input> dan satu <textarea> untuk isi komentar.
/* CSS */
.form-komentar {
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 8px;
padding: 20px; /* ruang di dalam form */
margin-top: 24px; /* jarak dari artikel terakhir */
}
.form-komentar h4 {
margin-top: 0;
margin-bottom: 14px;
}
.form-komentar input,
.form-komentar textarea {
width: 100%;
padding: 8px 12px; /* ruang di dalam kotak input */
margin-bottom: 10px; /* jarak antar input */
border: 1px solid #cbd5e1;
border-radius: 6px;
box-sizing: border-box;
}
.form-komentar textarea {
height: 100px;
resize: vertical;
}
/* HTML */
<div class="form-komentar">
<h4>Tulis Komentar</h4>
<input type="text" placeholder="Nama kamu...">
<input type="email" placeholder="Email kamu...">
<textarea placeholder="Tulis komentarmu di sini..."></textarea>
<button>Kirim Komentar</button>
</div>
5
Buat footer menggunakan div + padding + margin
/* CSS */
.footer {
background: #1e293b;
color: #94a3b8;
text-align: center;
padding: 16px; /* ruang di dalam footer */
margin-top: 30px; /* jarak dari konten di atasnya */
}
/* HTML */
<div class="footer">
© 2025 Blog Saya — Dibuat dengan HTML & CSS
</div>
Kode Lengkap
Gabungkan semua langkah di atas menjadi satu file HTML utuh:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Blog Saya</title>
<style>
body {
font-family: sans-serif;
background: #f1f5f9;
margin: 0;
padding: 0;
}
/* Header */
.header {
background-color: #1e3a8a;
color: white;
padding: 20px 30px;
margin-bottom: 20px;
}
.header h1 { margin: 0; }
.header p { margin: 4px 0 0; opacity: 0.8; }
/* Wrapper isi halaman */
.konten {
max-width: 700px;
margin: 0 auto; /* tengah horizontal */
padding: 0 16px; /* jarak dari tepi layar */
}
/* Kartu artikel */
.artikel {
background: white;
border: 1px solid #e2e8f0;
border-radius: 8px;
padding: 16px;
margin-bottom: 16px;
}
.artikel h3 {
margin-top: 0;
margin-bottom: 4px;
color: #1e40af;
}
.artikel small { color: #64748b; }
.artikel p { margin: 10px 0; }
.artikel button {
padding: 6px 16px;
margin-right: 6px;
border: none;
border-radius: 6px;
cursor: pointer;
}
.btn-baca { background: #3b82f6; color: white; }
.btn-komen { background: #e2e8f0; color: #374151; }
/* Form komentar */
.form-komentar {
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 8px;
padding: 20px;
margin-top: 24px;
}
.form-komentar h4 { margin-top: 0; margin-bottom: 14px; }
.form-komentar input,
.form-komentar textarea {
width: 100%;
padding: 8px 12px;
margin-bottom: 10px;
border: 1px solid #cbd5e1;
border-radius: 6px;
box-sizing: border-box;
font-size: 0.9rem;
}
.form-komentar textarea { height: 100px; resize: vertical; }
.btn-kirim {
background: #16a34a;
color: white;
padding: 8px 20px;
border: none;
border-radius: 6px;
cursor: pointer;
}
/* Footer */
.footer {
background: #1e293b;
color: #94a3b8;
text-align: center;
padding: 16px;
margin-top: 30px;
font-size: 0.85rem;
}
</style>
</head>
<body>
<!-- HEADER -->
<div class="header">
<h1>Blog Saya</h1>
<p>Tempat berbagi cerita dan ilmu pengetahuan</p>
</div>
<!-- KONTEN -->
<div class="konten">
<!-- ARTIKEL 1 -->
<div class="artikel">
<h3>Judul Artikel Pertama</h3>
<small>Senin, 7 April 2025 | oleh: Admin</small>
<p>Ini adalah isi dari artikel pertama. Di sini kita bisa menulis cerita,
tips, atau ilmu apapun yang ingin kita bagikan kepada pembaca.</p>
<button class="btn-baca">Baca Selengkapnya</button>
<button class="btn-komen">Komentar</button>
</div>
<!-- ARTIKEL 2 -->
<div class="artikel">
<h3>Judul Artikel Kedua</h3>
<small>Selasa, 8 April 2025 | oleh: Admin</small>
<p>Ini adalah isi dari artikel kedua. Setiap artikel dibungkus
dalam div tersendiri agar mudah diatur tampilannya.</p>
<button class="btn-baca">Baca Selengkapnya</button>
<button class="btn-komen">Komentar</button>
</div>
<!-- FORM KOMENTAR -->
<div class="form-komentar">
<h4>Tulis Komentar</h4>
<input type="text" placeholder="Nama kamu...">
<input type="email" placeholder="Email kamu...">
<textarea placeholder="Tulis komentarmu di sini..."></textarea>
<button class="btn-kirim">Kirim Komentar</button>
</div>
</div>
<!-- FOOTER -->
<div class="footer">
© 2025 Blog Saya — Dibuat dengan HTML & CSS
</div>
</body>
</html>
Rangkuman penggunaan dalam project ini:
- div — digunakan sebagai wadah untuk setiap bagian: header, artikel, form, footer
- padding — memberi ruang di dalam setiap div agar konten tidak mepet ke tepi
- margin — memberi jarak antar artikel, antar bagian, dan memusatkan konten dengan
margin: 0 auto - input — digunakan pada form komentar untuk mengambil nama, email, dan isi komentar
Tantangan!
Setelah berhasil membuat blog di atas, coba kembangkan dengan:
- Tambahkan artikel ketiga dengan judul dan isi berbeda
- Ubah warna header menjadi warna favoritmu menggunakan kode hex
- Tambahkan
input type="text"untuk kolom pencarian di bawah header - Beri box-shadow pada kartu artikel agar terlihat lebih modern
- Tambahkan
border-radiusyang lebih besar pada kartu artikel