Hari 2: Perbedaan HTML dan CSS – Belajar CSS From Zero to Hero

by

Bingung perbedaan HTML dan CSS? Artikel ini menjelaskan fungsi HTML & CSS, bagaimana keduanya bekerja sama, serta contoh praktis untuk pemula.

Perbedaan HTML dan CSS – Belajar CSS From Zero to Hero

Kenapa Harus Memahami Perbedaan HTML dan CSS?

Banyak pemula yang masih bingung ketika mendengar istilah HTML dan CSS. Ada yang mengira keduanya sama, padahal fungsinya sangat berbeda. Jika HTML adalah kerangka sebuah rumah, maka CSS adalah cat, dekorasi, dan tata letak yang membuat rumah itu indah dan nyaman.

Memahami perbedaan HTML dan CSS adalah langkah penting sebelum melangkah lebih jauh dalam dunia web development. Dengan memahami fungsi masing-masing, kamu akan lebih mudah mempelajari teknik lanjutan seperti Flexbox, Grid, dan Responsive Design.

Apa Itu HTML?

HTML (HyperText Markup Language) adalah bahasa markup standar yang digunakan untuk membuat struktur dan konten halaman web. HTML tidak mengatur tampilan, melainkan hanya menyusun elemen-elemen seperti:

  • Heading (<h1>, <h2>, dll.)
  • Paragraf (<p>)
  • Gambar (<img>)
  • Tautan (<a>)
  • Daftar (<ul>, <ol>)

Contoh HTML sederhana:

<h1>Selamat Datang</h1>
<p>Ini adalah paragraf pertama saya.</p>
<a href="https://example.com">Kunjungi Website</a>

Jika kamu membuka file ini di browser, tampilannya masih sangat sederhana tanpa warna atau gaya tertentu.

Apa Itu CSS?

CSS (Cascading Style Sheets) adalah bahasa yang digunakan untuk mengatur tampilan halaman web. Dengan CSS, kita bisa menambahkan warna, mengganti font, mengatur jarak antar elemen, hingga membuat layout yang lebih rapi.

Contoh CSS sederhana:

h1 {
  color: blue;
  text-align: center;
}

p {
  font-size: 18px;
  color: #333;
}

Dengan CSS, teks menjadi lebih enak dibaca dan halaman lebih menarik.

Perbedaan Utama HTML dan CSS

AspekHTMLCSS
FungsiMenyusun struktur & kontenMengatur tampilan & gaya visual
BahasaMarkup languageStyle sheet language
OutputHeading, paragraf, gambar, linkWarna, font, layout, animasi
Hubungan“Kerangka rumah”“Cat & dekorasi rumah”
File.html.css

Bagaimana HTML dan CSS Bekerja Bersama?

HTML dan CSS saling melengkapi. HTML menyediakan konten sementara CSS menyediakan gaya visual. Bayangkan membuat artikel di website:

  • HTML: menentukan judul artikel, paragraf, dan gambar.
  • CSS: mengatur agar judul berwarna biru, paragraf punya spasi nyaman, dan gambar berada di tengah.

Studi kasus sederhana:

<!-- File index.html -->
<!DOCTYPE html>
<html>
<head>
  <title>Belajar HTML & CSS</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>Halo Dunia!</h1>
  <p>Belajar web development menyenangkan.</p>
</body>
</html>

/* File style.css */
body {
  font-family: Arial, sans-serif;
  background-color: #f9f9f9;
}

h1 {
  color: #0066cc;
  text-align: center;
}

p {
  color: #444;
  line-height: 1.6;
}

Jika hanya menggunakan HTML, hasilnya polos. Tetapi dengan tambahan CSS, halaman terlihat lebih profesional.

Kesalahan Umum Pemula

  1. Mencampur semua style di HTML
    Banyak pemula menulis style="..." langsung pada elemen. Ini membuat kode sulit dikelola.
    ✔ Solusi: gunakan external CSS.
  2. Tidak memisahkan struktur dan style
    HTML harus fokus pada konten, CSS fokus pada tampilan.
  3. Mengabaikan konsistensi desain
    Tanpa CSS yang rapi, tampilan antar halaman bisa berbeda-beda.

Manfaat Memisahkan HTML dan CSS

  • Mendukung SEO – struktur HTML tetap jelas, CSS membantu tampilan lebih ramah pengguna.
  • Mudah dikelola – cukup ubah satu file CSS untuk memengaruhi banyak halaman.
  • Efisien – kode HTML lebih bersih, loading website lebih cepat.
  • Profesional – desain website lebih konsisten.

Referensi Belajar HTML dan CSS

Rencana Belajar Selanjutnya

Hari ini kamu sudah memahami perbedaan HTML dan CSS. Pada hari berikutnya, kita akan membahas cara menyematkan CSS ke dalam HTML agar lebih efisien.
👉 Lanjut ke Hari 3: Cara Menyematkan CSS

Kesimpulan

  • Memahami perbedaan HTML dan CSS akan memudahkan belajar tahap berikutnya.
  • HTML = struktur, CSS = tampilan.
  • Keduanya tidak bisa dipisahkan dalam web development.

💡 Tantangan Hari 2:
Buat file HTML sederhana dengan judul, paragraf, dan gambar. Lalu, tambahkan file CSS eksternal untuk mengubah warna, font, dan background. Simpan project-mu sebagai langkah kedua dalam perjalanan 30 Hari Belajar CSS.

Leave a Comment