Hypertext Markup Language (HTML)

Selamat datang ke modul pembelajaran HTML. Gunakan navigasi di sebelah kiri untuk memilih topik.

Struktur Asas Dokumen HTML

Setiap laman web bermula dengan struktur asas ini. Ia memberitahu pelayar web cara untuk membaca dan memaparkan kandungan anda.

Elemen Asas HTML:

  • <!DOCTYPE html>: Mendefinisikan dokumen sebagai HTML5
  • <html>: Elemen asas yang membungkus semua kandungan
  • <head>: Mengandungi maklumat meta seperti tajuk halaman
  • <body>: Mengandungi semua kandungan yang boleh dilihat

Contoh:

<!DOCTYPE html>
<html>
<head>
    <title>Laman Web Pertama Saya</title>
</head>
<body>
    <h1>Selamat Datang!</h1>
    <p>Ini adalah laman web pertama saya.</p>
</body>
</html>

Latihan 1:

Bina struktur asas HTML dengan nama dan hobi anda:

Paparan:

a. Heading (Tajuk)

Heading digunakan untuk menanda tajuk dan subtajuk dalam halaman web. Terdapat 6 level: h1 hingga h6.

ℹī¸ Nota: <h1> adalah yang terbesar dan paling penting, manakala <h6> adalah yang terkecil.

Contoh:

<h1>Tajuk Utama</h1>
<h2>Tajuk Kecil</h2>
<h3>Tajuk Lebih Kecil</h3>

Latihan 2:

Paparan:

b. Paragraph (Perenggan)

Elemen <p> digunakan untuk menulis perenggan teks.

Contoh:

<p>Ini adalah perenggan pertama.</p>
<p>Ini adalah perenggan kedua.</p>

Latihan 3:

Paparan:

c. Comments (Komen)

Komen digunakan untuk menulis nota dalam kod yang tidak akan dipaparkan di pelayar.

Sintaks:

<!-- Ini adalah komen -->
<p>Ini akan dipaparkan</p>

✅ Tips: Gunakan komen untuk menjelaskan kod anda!

d. Div (Division)

Elemen <div> adalah bekas (container) untuk mengumpulkan elemen lain.

Contoh:

<div style="background-color: lightblue; padding: 20px;">
    <h2>Dalam Div</h2>
    <p>Kandungan dalam div ini.</p>
</div>

Latihan 4:

Paparan:

f. Images (Gambar)

Elemen <img> digunakan untuk memaparkan gambar.

Atribut Penting:

  • src: Path ke gambar
  • alt: Teks alternatif jika gambar tidak dapat dipaparkan
  • width dan height: Saiz gambar
<img src="logo.png" alt="Logo Syarikat" width="200" >

Latihan 6:

Paparan:

g. Tables (Jadual)

Jadual digunakan untuk memaparkan data dalam format baris dan lajur.

Elemen Table:

  • <table>: Container untuk jadual
  • <thead>: Header jadual
  • <tbody>: Body jadual
  • <tr>: Table row (baris)
  • <th>: Table header (kepala)
  • <td>: Table data (data)
<table border="1">
    <thead>
        <tr>
            <th>Nama</th>
            <th>Umur</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Ali</td>
            <td>20</td>
        </tr>
    </tbody>
</table>

Latihan 7:

Paparan:

h. List (Senarai)

Terdapat 2 jenis list: Ordered list (<ol>) dan Unordered list (<ul>).

Unordered List (bullet points):

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
</ul>

Ordered List (numbered):

<ol>
    <li>Langkah 1</li>
    <li>Langkah 2</li>
</ol>

Latihan 8:

Paparan:

i. Break (Pemisah Baris)

Elemen <br> digunakan untuk membuat baris baru.

Contoh:

<p>Baris pertama<br>Baris kedua<br>Baris ketiga</p>

ℹī¸ Nota: <br> adalah self-closing tag, tidak perlu </br>