Ketika Anda memulai perjalanan dalam mempelajari web development, ada tiga bahasa utama yang perlu dipahami: HTML, CSS, dan JavaScript. Meskipun ketiganya bekerja bersama-sama untuk membuat situs web yang interaktif dan menarik, masing-masing memiliki peran yang berbeda. Mari kita bahas perbedaan mendasar antara ketiganya:
HTML (Hypertext Markup Language)
HTML adalah bahasa dasar yang digunakan untuk membuat struktur atau kerangka dasar sebuah halaman web. Ini berfungsi sebagai tulang belakang dari suatu halaman web. Dengan HTML, Anda mendefinisikan elemen-elemen seperti judul, paragraf, gambar, dan tautan.
Contoh Kode HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Judul Halaman</title>
</head>
<body>
<h1>Selamat Datang di Situs Saya</h1>
<p>Ini adalah contoh paragraf.</p>
<img src="gambar.jpg" alt="Deskripsi gambar">
<a href="https://www.contoh.com">Tautan Contoh</a>
</body>
</html>
Sumber Belajar:
MDN Web Docs – HTML
W3Schools – HTML Tutorial
CSS (Cascading Style Sheets)
CSS digunakan untuk mengubah tampilan atau gaya dari elemen-elemen HTML. Ini memungkinkan Anda untuk mengatur warna, ukuran, posisi, dan efek lainnya pada halaman web. Dengan CSS, Anda dapat membuat desain yang lebih menarik dan responsif.
Contoh Kode CSS:
/* Gaya untuk judul */
h1 {
color: blue;
font-size: 24px;
}
/* Gaya untuk paragraf */
p {
font-family: Arial, sans-serif;
}
/* Gaya untuk gambar */
img {
width: 100%;
}
/* Gaya untuk tautan */
a {
text-decoration: none;
color: green;
}
Sumber Belajar:
MDN Web Docs – CSS
W3Schools – CSS Tutorial
JavaScript
JavaScript adalah bahasa pemrograman yang digunakan untuk membuat situs web menjadi interaktif. Ini memungkinkan Anda untuk menambahkan fungsi-fungsi seperti animasi, validasi formulir, manipulasi DOM (Document Object Model), dan banyak lagi.
Contoh Kode JavaScript:
// Fungsi untuk menyapa pengguna
function sapa() {
alert('Halo! Selamat datang di situs kami.');
}
// Manipulasi teks pada elemen
document.getElementById('judul').innerHTML = 'Situs Interaktif';
// Validasi formulir
function validasiForm() {
var nama = document.getElementById('nama').value;
if (nama == '') {
alert('Silakan masukkan nama Anda.');
return false;
}
return true;
}
Sumber Belajar:
MDN Web Docs – JavaScript
W3Schools – JavaScript Tutorial
Kesimpulan
HTML digunakan untuk menentukan struktur dasar dari halaman, CSS digunakan untuk mengatur tampilan dan estetika, sedangkan JavaScript digunakan untuk memberikan fungsionalitas dan interaktivitas pada halaman web.
Dengan memahami perbedaan antara HTML, CSS, dan JavaScript, Anda dapat mulai membangun situs web yang dinamis dan menarik. Selamat belajar!