<html> <head> <meta name="viewport"> </head> <body> ... Simbol coding sederhana Representasi visual dari kode HTML dasar dengan warna sintaks.

Visualisasi Struktur Dasar

Contoh Coding Sederhana: Memulai dengan HTML dan CSS

Selamat datang di dunia pemrograman! Salah satu langkah paling mendasar dan penting ketika memulai perjalanan coding adalah menguasai HTML (HyperText Markup Language) dan CSS (Cascading Style Sheets). HTML berfungsi sebagai tulang punggung konten di web, sementara CSS bertanggung jawab atas tampilan visualnya. Artikel ini menyajikan contoh coding sederhana yang dapat Anda terapkan langsung.

Mengapa Memulai dengan yang Sederhana?

Banyak pemula merasa terintimidasi oleh kerumitan bahasa pemrograman tingkat lanjut. Namun, menguasai fondasi melalui contoh coding sederhana akan membangun kepercayaan diri dan pemahaman struktural yang kuat. HTML dan CSS adalah titik awal yang ideal karena hasilnya langsung terlihat di browser.

Fokus utama dalam tahap ini adalah memahami struktur hierarkis dokumen (DOM) dan bagaimana properti styling diterapkan. Dengan kode yang ringkas, Anda dapat mengisolasi dan mempelajari setiap elemen tanpa gangguan.

Contoh 1: Struktur Dasar HTML

Setiap halaman web yang valid dimulai dengan deklarasi tipe dokumen dan tag dasar. Berikut adalah kerangka minimum yang diperlukan untuk sebuah halaman web yang valid.

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Halaman Uji Coba</title>
</head>
<body>
    <h1>Halo Dunia!</h1>
    <p>Ini adalah paragraf pertama saya.</p>
</body>
</html>

Contoh 2: Menambahkan Styling Dasar dengan CSS In-line

Meskipun praktik terbaik menyarankan pemisahan CSS (menggunakan file eksternal atau internal `