Kalau baru mulai belajar membuat website, tiga istilah yang hampir pasti akan ditemui adalah HTML, CSS, dan JavaScript.

Ketiganya sering disebut bersamaan, tetapi sebenarnya memiliki tugas yang berbeda.

Sederhananya:

• HTML mengatur struktur halaman.
• CSS mengatur tampilan.
• JavaScript membuat halaman menjadi interaktif.

Kalau dianalogikan seperti sebuah rumah, HTML adalah struktur bangunannya, CSS adalah bagian yang mengatur bentuk dan penampilannya, sedangkan JavaScript adalah sesuatu yang membuat berbagai bagian rumah tersebut dapat melakukan sesuatu ketika digunakan.

HTML: Membuat Struktur Website

HTML adalah singkatan dari HyperText Markup Language.

HTML digunakan untuk menentukan struktur dan isi sebuah halaman web.

Contohnya, sebuah halaman dapat memiliki judul, paragraf, gambar, tabel, formulir, tombol, dan berbagai elemen lainnya.

Contoh sederhana:

<h1>Halo Dunia</h1>
<p>Ini adalah halaman website pertama saya.</p>

HTML tidak bertugas membuat halaman terlihat cantik. Tugas utamanya adalah menentukan apa yang ada di dalam halaman tersebut dan bagaimana strukturnya.

CSS: Mengatur Tampilan

CSS adalah singkatan dari Cascading Style Sheets.

Kalau HTML sudah menentukan isi dan struktur halaman, CSS digunakan untuk mengatur bagaimana halaman tersebut ditampilkan.

Misalnya:

• warna
• ukuran teks
• jenis font
• jarak antar elemen
• posisi elemen
• layout
• animasi
• tampilan responsif

Contoh:

h1 {
    color: blue;
    font-size: 32px;
}

HTML mengatakan, “Ini adalah judul.”

CSS mengatakan, “Judulnya tampil seperti ini.”

JavaScript: Membuat Website Interaktif

JavaScript digunakan untuk membuat halaman web dapat melakukan berbagai tindakan berdasarkan interaksi pengguna maupun kondisi tertentu.

Misalnya ketika pengguna:

• mengklik tombol
• mengisi formulir
• membuka menu
• mengubah data
• melakukan pencarian
• mengirim data ke server

Contoh sederhana:

document.querySelector('button').onclick = function () {
    alert('Halo!');
};

Sekarang tombol tidak hanya tampil di halaman, tetapi juga dapat melakukan sesuatu ketika diklik.

Jadi, Apa Perbedaan Ketiganya?

Cara paling mudah untuk mengingatnya:

Ketiganya bukan teknologi yang saling menggantikan.

Justru dalam sebuah website modern, ketiganya biasanya bekerja bersama.

HTML membuat elemennya ada.
CSS membuatnya terlihat bagus.
JavaScript membuatnya bisa melakukan sesuatu.

Apakah Harus Belajar Ketiganya Sekaligus?

Tidak harus.

Untuk pemula, lebih baik memahami HTML terlebih dahulu. Setelah memahami struktur halaman, lanjutkan dengan CSS untuk mengatur tampilannya.

Setelah itu JavaScript akan terasa jauh lebih masuk akal karena sudah memahami elemen-elemen yang akan dimanipulasi.

Tidak perlu terburu-buru menghafalkan semuanya.

Yang penting adalah memahami fungsi dan hubungan antara ketiganya.

Saya Buatkan Contoh Praktisnya

Penjelasan seperti ini memang lebih mudah dipahami kalau langsung melihat contohnya.

Saya juga membuat video yang membahas perbedaan HTML, CSS, dan JavaScript dengan contoh sederhana agar perbedaannya bisa langsung terlihat.

Di video tersebut, HTML, CSS, dan JavaScript dijelaskan dengan pendekatan sederhana sehingga cocok untuk yang baru mulai belajar membuat website.

Kesimpulan

HTML, CSS, dan JavaScript memiliki tugas yang berbeda.

HTML menangani struktur, CSS menangani tampilan, sedangkan JavaScript menangani interaksi dan perilaku.

Memahami perbedaan ketiganya adalah salah satu dasar penting sebelum masuk lebih jauh ke dunia web development.

Setelah memahami fondasinya, barulah berbagai teknologi dan framework web akan lebih mudah dipelajari.

Karena pada akhirnya, framework boleh berganti.

Tetapi fondasinya tetap sama.