Home › Pemrograman (Ngoding) › HTML & CSS

Mengenal HTML dan CSS untuk Pemula

Latifah May 22, 2025 1:33 pm . 5 min read

Ilustrasi Gambar: Mengenal HTML dan CSS untuk Pemula

Halo semuanya! 👋 Pernah dengar kata “HTML” dan “CSS” tapi masih bingung itu apaan? Tenang, kamu nggak sendirian. Artikel ini akan membahas dua teknologi dasar dalam dunia pembuatan website: HTML dan CSS. Tenang, kita bahas dari nol, jadi cocok buat guru, siswa, mahasiswa, dan siapa pun yang ingin mulai belajar dunia web.

🧱 Apa itu HTML?

HTML adalah singkatan dari HyperText Markup Language. Dalam bahasa manusia, HTML itu semacam “kerangka” dari sebuah website. Kalau website itu manusia, HTML adalah tulang dan struktur tubuhnya.

Contoh sederhana:

Penjelasan:

<h1> adalah heading, biasanya digunakan untuk judul.
<p> adalah paragraf.

HTML tidak bersifat pemrograman, melainkan markup—artinya kamu menandai bagian-bagian dari dokumen agar browser tahu, “Oh ini judul, ini paragraf, ini gambar.”

🎨 Apa itu CSS?

CSS adalah singkatan dari Cascading Style Sheets. Nah, kalau HTML adalah kerangka tubuh, CSS itu seperti pakaian dan gaya. CSS mengatur bagaimana tampilan website: warna, ukuran huruf, posisi elemen, dan lain-lain.

Contoh sederhana:

Dengan CSS, kamu bisa bikin website yang tadinya polos jadi menarik dan cantik dilihat. Jadi, HTML dan CSS itu ibarat pasangan serasi: satu ngatur isi, satu ngatur gaya.

🔍 Kenapa HTML dan CSS Penting?

Dasar dari semua website
Semua website yang kamu buka—Facebook, Google, YouTube—pasti menggunakan HTML & CSS.
Gampang dipelajari
Tidak butuh komputer canggih atau kemampuan coding tingkat dewa. Cukup laptop, browser, dan semangat belajar.
Bisa langsung praktik
Kamu bisa nulis HTML & CSS di Notepad atau VS Code, lalu buka di browser untuk lihat hasilnya.

📁 Struktur Dasar File HTML

Berikut contoh struktur dasar HTML:

 &lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;Website Pertamaku&lt;/title&gt;
&lt;style&gt;
body {
background-color: #f5f5f5;
}
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;h1&gt;Selamat Datang!&lt;/h1&gt;
&lt;p&gt;Ini adalah website pertama saya.&lt;/p&gt;
&lt;/body&gt;
&lt;/html&gt;

<!DOCTYPE html> → memberitahu browser bahwa ini dokumen HTML5.
<html> → elemen utama.
<head> → bagian “kepala” berisi info, judul, dan link CSS.
<body> → isi utama yang akan tampil di browser.

📚 Elemen-Elemen Penting di HTML

Berikut beberapa elemen HTML yang sering digunakan:

Elemen	Fungsi
`<h1>` sampai `<h6>`	Judul, dari paling besar sampai kecil
`<p>`	Paragraf
`<a href="">`	Link
`<img src="">`	Menampilkan gambar
`<ul>` & `<ol>`	Daftar bullet & angka
`<div>`	Kotak pembungkus konten
`<form>`	Formulir input (nama, email, dll)

Contoh:

 &lt;a href="https://ruanginformatika.com"&gt;Kunjungi Ruang Informatika&lt;/a&gt;

🧑‍🎨 Elemen-Elemen CSS Penting

Beberapa properti CSS yang sering dipakai:

Properti	Fungsi
`color`	Warna teks
`background-color`	Warna latar
`font-size`	Ukuran huruf
`margin` & `padding`	Jarak antar elemen
`border`	Garis tepi
`text-align`	Posisi teks (kiri, tengah, kanan)

Contoh penggunaan:

 p {
color: green;
font-size: 18px;
}

Kamu bisa buka Notepad, copy-paste kode di bawah ini, lalu simpan dengan nama index.html. Setelah itu buka di browser.

 <!DOCTYPE html>
<html>
<head>
<title>Website Mini</title>
<style>
body {
font-family: Arial;
background-color: #e3f2fd;
}
h1 {
color: #0d47a1;
}
p {
color: #424242;
}
</style>
</head>
<body>
<h1>Halo Dunia!</h1>
<p>Saya sedang belajar HTML dan CSS. Ini menyenangkan!</p>
</body>
</html>

Belajar dari proyek kecil
Mulai dari buat halaman profil, biodata, atau daftar tugas.
Gunakan alat bantu
Coba pakai Visual Studio Code (gratis), dan plugin seperti Live Server.
Kunjungi situs belajar gratis:
- W3Schools
- freeCodeCamp
- MDN Web Docs
Konsisten itu kunci
Coba 15-30 menit latihan setiap hari, hasilnya luar biasa dalam 1 bulan!

🧑‍🏫 Untuk Guru dan Dosen

Mengajarkan HTML dan CSS bisa menjadi kegiatan seru di kelas:

Gunakan papan tulis digital untuk jelaskan struktur kode.
Buat proyek “Website Profil Siswa” sebagai tugas kreatif.
Kombinasikan dengan pelajaran bahasa atau desain untuk hasil interdisipliner.

👩‍🎓 Untuk Siswa dan Mahasiswa

Belajar HTML & CSS:

Bisa jadi hobi seru
Bisa jadi portofolio digital
Bisa juga jadi awal karier di dunia IT/web

🎯 Kesalahan Umum Saat Belajar (Dan Solusinya!)

Kesalahan	Solusi
Lupa menutup tag HTML	Selalu cek pasangan tag `<div>...</div>`
CSS tidak berubah	Pastikan disimpan dan browser di-refresh
Terlalu buru-buru ingin bikin website keren	Mulai dari dasar, pelan-pelan

🚀 Tahapan Belajar HTML dan CSS

Minggu 1-2: Belajar HTML dasar (struktur, elemen, link, gambar)
Minggu 3: Belajar CSS dasar (warna, font, margin)
Minggu 4: Gabungkan HTML & CSS untuk bikin proyek mini
Minggu 5+: Mulai belajar layout (Flexbox, Grid), dan responsive design

🔮 Apa Selanjutnya Setelah HTML & CSS?

Setelah kamu nyaman dengan HTML dan CSS, kamu bisa lanjut ke:

JavaScript (menambahkan interaktivitas)
Bootstrap (framework desain cepat)
Tailwind CSS (utility-first framework)
React.js / Vue.js (untuk jadi web developer profesional)

📌 Penutup

HTML dan CSS adalah pintu gerbang dunia pemrograman web. Belajar dua hal ini tidak hanya berguna untuk jadi programmer, tapi juga untuk siapa saja yang ingin melek digital, kreatif, dan mandiri di era internet.