Logo

RoisDev

Coding02 Desember 2025

Berkenalan dengan HTML & CSS Dasar: Pondasi Utama dalam Web Development

Dalam artikel ini, kita akan mengenal apa itu HTML, apa itu CSS, serta bagaimana keduanya bekerja membangun sebuah halaman web.

Berkenalan dengan HTML & CSS Dasar: Pondasi Utama dalam Web Development

🧑‍💻 Berkenalan dengan HTML & CSS Dasar: Pondasi Utama dalam Web Development

Ketika membuka halaman web—entah itu marketplace, blog, atau media sosial—sebenarnya kita sedang melihat hasil kerja dari dua komponen utama: HTML dan CSS. Keduanya adalah fondasi dasar dalam dunia web development. Untuk memulai perjalanan sebagai web developer, memahami HTML dan CSS adalah langkah pertama yang wajib dikuasai.

Dalam artikel ini, kita akan mengenal apa itu HTML, apa itu CSS, serta bagaimana keduanya bekerja membangun sebuah halaman web.

🌐 Apa Itu HTML?

HTML (HyperText Markup Language) adalah bahasa dasar untuk membangun struktur sebuah halaman web.

HTML tidak digunakan untuk membuat website terlihat cantik, tetapi untuk mengatur struktur, konten, dan elemen pada sebuah halaman.

🔹 Fungsi Utama HTML:

  • Menampilkan teks, gambar, dan video

  • Mengatur judul dan paragraf

  • Membuat tabel dan daftar

  • Membuat tombol dan formulir

  • Menyusun kerangka seluruh halaman

Contoh kode HTML sederhana:

 
<!DOCTYPE html>
 <html>
  <head>
     <title>Belajar HTML</title>
</head>
  <body>
   <h1>Halo, ini judul pertama saya!</h1>
  <p>Ini adalah paragraf pertama saya dalam HTML.</p>
</body>
</html>

🎨 Apa Itu CSS?

CSS (Cascading Style Sheets) adalah bahasa yang digunakan untuk mengatur tampilan halaman web.

Jika HTML adalah kerangka tubuh, maka CSS adalah pakaian yang membuat tampilan menjadi lebih menarik.

🔹 Fungsi CSS:

  • Mengatur warna

  • Mengatur ukuran teks

  • Menambahkan jarak (padding & margin)

  • Membuat layout grid atau flexbox

  • Mengatur animasi

Contoh CSS sederhana:

 
h1 { color: teal; font-size: 32px; }
p { color: #555; line-height: 1.5; }

🧩 Bagaimana HTML dan CSS Bekerja Bersama?

HTML = struktur
CSS = tampilan

Keduanya saling melengkapi.
HTML memberi tahu browser “apa yang ditampilkan”, sedangkan CSS memberi tahu “bagaimana tampilannya”.

Contoh HTML + CSS:

 
<!DOCTYPE html> <html> <head> <style> h1 { color: blue; } p { font-size: 18px; } </style> </head> <body> <h1>Belajar HTML dan CSS</h1> <p>Ini adalah contoh sederhana cara kerja HTML dan CSS bersama.</p> </body> </html>

🚀 Mengapa Harus Belajar HTML & CSS?

1. Dasar Segala Website

Semua framework modern seperti React, Next.js, Angular, bahkan WordPress berbasis HTML & CSS.

2. Mudah Dipelajari Pemula

Tidak membutuhkan logika rumit. Cukup memahami struktur dan styling.

3. Wajib untuk Web Developer

Frontend, UI/UX, bahkan fullstack developer wajib menguasainya.

4. Digunakan Dalam Berbagai Proyek

Mulai dari landing page, company profile, hingga dashboard web.

🛠️ Tools yang Bisa Dipakai untuk Belajar

  • VS Code (editor kode terbaik untuk pemula)

  • Live Server (melihat hasil secara real-time)

  • Google Chrome Inspector (mengecek struktur & style)

  • CodePen atau JSFiddle (latihan online)

💡 Tips Belajar HTML & CSS untuk Pemula

  • Mulai dari struktur dasar HTML terlebih dahulu

  • Belajar CSS step-by-step: font → color → spacing → layout

  • Gunakan Flexbox dan Grid untuk layout modern

  • Rajin membuat proyek kecil, seperti:

    • halaman profil sederhana

    • card produk

    • landing page mini

🎯 Kesimpulan

HTML dan CSS adalah pondasi utama dari setiap halaman web. HTML bertugas membangun struktur, sedangkan CSS bertugas mempercantik tampilan. Menguasai keduanya adalah langkah awal yang sangat penting untuk siapa pun yang ingin masuk ke dunia web development.

Dengan memahami dasar-dasarnya, kamu sudah selangkah lebih dekat menjadi web developer yang handal.

Tinggalkan Komentar

Komentar akan tampil setelah dimoderasi.