January 2026 – Freelance Website Design

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>&copy; 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?

Month: January 2026

HTML dari dasar sampai Tingkat lanjut