6 Perbedaan HTML, CSS, dan JavaScript

Halo semuanya, di artikel ini kita akan bahas apa saja perbedaan HTML, CSS, dan JavaScript. Ingin tahu lebih dalam? Simak selengkapnya di bawah ini.

Daftar Isi

Mengenal HTML, CSS, dan JavaScript

Di dunia web development pasti kita tidak asing lagi dengan HTML, CSS, dan JavaScript. Di mana ketiganya merupakan pilar utama yang membentuk fondasi situs web modern. Walaupun disebut bersama, ketiganya memiliki fungsi dan peran yang sangat berbeda. Nah, kita akan bahas perbedaannya, apa saja? Mari kita kenali terlebih dahulu HTML, CSS, dan JavaScript.

Pengenalan HTML

HTML (HyperText Markup Language) merupakan bahasa markup yang berguna untuk membuat struktur dasar dari sebuah halaman website. Kalau kita halaman apapun di internet maka itu dasarnya dibuat dengan HTML.

HTML memungkinkan pengembang website untuk menentukan elemen-elemen seperti paragraf, heading, gambar, link, video, dan lain sebagainya.

Adapun contoh kode-kode HTML dasar yaitu sebagai berikut :

<!DOCTYPE html>
<html>
<head>
<title>Contoh Halaman HTML</title>
</head>
<body>
<h1>Halo Dunia!</h1>
<p>Ini adalah paragraf pertama saya.</p>
</body>
</html>

Sedikit menjelaskan maksud dari kode-kode di atas yaitu :

<!DOCTYPE html>: Deklarasi ini digunakan untuk memberitahu browser bahwa dokumen ini menggunakan versi HTML5.
<html>: Elemen root dari dokumen HTML.
<head>: Bagian ini berisi metadata tentang dokumen, seperti title, link ke file CSS, dan informasi lainnya yang tidak ditampilkan langsung pada halaman web.
<title>: Menentukan judul halaman yang akan muncul di tab browser.
<body>: Bagian ini berisi semua konten yang akan ditampilkan pada halaman web.
<h1>: Elemen heading tingkat pertama, digunakan untuk judul utama.
<p>: Elemen paragraf, digunakan untuk teks biasa.

Kenalan dengan CSS

Selanjutnya mari kita kenalan dengan CSS. CSS (Cascading Style Sheets) yaitu bahasa stylesheet yang berfungsi untuk mengatur tampilan dan layout dari halaman web yang dibuat dengan HTML.

Kalau HTML saja pasti halaman website tidak berwarna dan terlihat sangat sederhana. Nah, dengan CSS, pengembang dapat mengontrol warna, font, margin, padding, dan banyak aspek visual lainnya dari elemen HTML.

Berikut merupakan ontoh sederhana dari kode CSS:

body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
margin: 0;
padding: 20px;
}

h1 {
color: #333;
}

Kita bahas sedikit kode-kode di atas fungsinya apa :

body: Selektor yang mengacu pada elemen <body> dari HTML.
- font-family: Menentukan jenis font yang digunakan pada halaman, dalam hal ini “Arial” atau font sans-serif lainnya.
- background-color: Mengatur warna latar belakang halaman menjadi abu-abu muda (#f0f0f0).
- margin: Menghilangkan margin default pada halaman (0).
- padding: Menambahkan jarak padding sebesar 20px di dalam elemen body.
h1: Selektor yang mengacu pada elemen <h1> dari HTML.
- color: Mengatur warna teks heading menjadi abu-abu gelap (#333).

Lanjut Kenalan dengan JavaScript

Lalu apa itu JavaScript ? yaitu bahasa pemrograman yang digunakan untuk membuat halaman web menjadi lebih interaktif. Dengan bahasa pemrograman JavaScript, memungkinkan pengembang untuk menambahkan fungsi dinamis seperti formulir validasi, animasi, dan manipulasi DOM (Document Object Model).

Berikut adalah contoh kode JavaScript sederhana yang bisa digunakan yaitu :

document.getElementById("myButton").onclick = function() {
alert("Tombol diklik!");
};

Penjelasan sederhana dari kode di atas yaitu :

document.getElementById("myButton"): Mengambil elemen HTML dengan id myButton.
.onclick: Menambahkan event listener yang akan merespon klik pada elemen yang dipilih.
function() { alert("Tombol diklik!"); }: Fungsi anonim yang akan dijalankan ketika elemen tersebut diklik, dalam hal ini akan menampilkan pesan alert dengan teks “Tombol diklik!”.