Bahasa Penskripan Klien: HTML, CSS dan JavaScript

Penskripan Klien vs Pelayan

Bahasa penskripan KLIEN (client-side) dilaksanakan oleh PELAYAR WEB pada komputer pengguna — HTML, CSS dan JavaScript. Bahasa penskripan PELAYAN (server-side) dilaksanakan di komputer pelayan sebelum hasil dihantar kepada pelayar — contohnya PHP.

HTML: Struktur Laman Web

html

<!DOCTYPE html>
<html>
<head>
    <title>Laman Web Saya</title>
</head>
<body>
    <h1>Selamat Datang</h1>
    <p>Ini perenggan pertama saya.</p>
    <img src="gambar.jpg" alt="Gambar saya">
    <a href="https://codecikgu.com">Klik sini</a>
</body>
</html>

Tag HTML	Fungsi
<h1> hingga <h6>	Tajuk (h1 terbesar)
<p>	Perenggan
<img src="..." alt="...">	Memaparkan imej
<a href="...">	Pautan (hyperlink)
<table>, <tr>, <td>	Jadual, baris, sel
<ul>/<ol> dengan <li>	Senarai tidak bernombor / bernombor
<form>, <input>, <button>	Borang dan medan input
<div>	Bahagian/kontena umum

CSS: Penggayaan

css

/* Sintaks: pemilih { sifat: nilai; } */
h1 {
    color: blue;
    text-align: center;
}
p {
    font-size: 16px;
    font-family: Arial;
}
body {
    background-color: #f0f8ff;
}

Tiga cara memasukkan CSS: sebaris (inline) menggunakan atribut style pada tag; dalaman (internal) dalam tag <style> di bahagian <head>; dan luaran (external) dalam fail .css berasingan yang dipautkan dengan <link rel="stylesheet" href="gaya.css">. CSS luaran ialah amalan terbaik kerana satu fail boleh menggayakan banyak halaman.

JavaScript: Interaktiviti

javascript

<script>
function sapaPengguna() {
    var nama = document.getElementById("nama").value;
    alert("Selamat datang, " + nama + "!");
}
</script>

<input type="text" id="nama">
<button onclick="sapaPengguna()">Sapa Saya</button>

🎯 TIP SPM: Ingat peranan tiga serangkai — HTML = STRUKTUR (rangka), CSS = GAYA (pakaian), JavaScript = TINGKAH LAKU (interaksi). Analoginya badan manusia: HTML tulang, CSS kulit dan pakaian, JavaScript otot yang bergerak.

Contoh: Halaman HTML Ringkas

html

<!DOCTYPE html>
<html>
<head><title>Biodata</title></head>
<body>
  <h1>Ali bin Ahmad</h1>
  <p>Tingkatan 5 Bestari</p>
  <ul><li>Hobi: Koding</li></ul>
</body>
</html>