<!--
CO_OP_TRANSLATOR_METADATA:
{
  "original_hash": "5a764667bbe82aa72ac0a67f4c97ff4a",
  "translation_date": "2025-10-03T10:21:59+00:00",
  "source_file": "3-terrarium/1-intro-to-html/assignment.md",
  "language_code": "ms"
}
-->
# Tugasan Amali HTML: Membina Reka Bentuk Blog

## Objektif

Reka bentuk dan kodkan struktur HTML untuk laman utama blog peribadi. Latihan ini akan membantu anda mempraktikkan HTML semantik, perancangan susun atur, dan pengorganisasian kod.

## Arahan

1. **Reka Bentuk Reka Bentuk Blog Anda**
   - Lukiskan reka bentuk visual untuk laman utama blog anda. Sertakan bahagian utama seperti header, navigasi, kandungan utama, sidebar, dan footer.
   - Anda boleh menggunakan kertas dan imbas lakaran anda, atau gunakan alat digital (contohnya, Figma, Adobe XD, Canva, atau PowerPoint).

2. **Kenal Pasti Elemen HTML**
   - Senaraikan elemen HTML yang anda rancang untuk digunakan bagi setiap bahagian (contohnya, `<header>`, `<nav>`, `<main>`, `<article>`, `<aside>`, `<footer>`, `<section>`, `<h1>`–`<h6>`, `<p>`, `<img>`, `<ul>`, `<li>`, `<a>`, dll.).

3. **Tulis Markup HTML**
   - Kodkan HTML untuk reka bentuk anda secara manual. Fokus pada struktur semantik dan amalan terbaik.
   - Sertakan sekurang-kurangnya 10 elemen HTML yang berbeza.
   - Tambahkan komen untuk menerangkan pilihan dan struktur anda.

4. **Hantar Kerja Anda**
   - Muat naik lakaran/reka bentuk anda dan fail HTML anda.
   - Secara pilihan, berikan refleksi ringkas (2–3 ayat) tentang keputusan reka bentuk anda.

## Rubrik

| Kriteria         | Cemerlang                                                                                  | Memadai                                                                         | Perlu Penambahbaikan                                                            |
|------------------|--------------------------------------------------------------------------------------------|----------------------------------------------------------------------------------|---------------------------------------------------------------------------------|
| Reka Bentuk Visual | Reka bentuk yang jelas, terperinci dengan bahagian berlabel dan susun atur yang teliti    | Reka bentuk asas dengan beberapa bahagian berlabel                              | Reka bentuk minimum atau tidak jelas; tiada label bahagian                      |
| Elemen HTML      | Menggunakan 10+ elemen HTML semantik; menunjukkan pemahaman struktur dan amalan terbaik    | Menggunakan 5–9 elemen HTML; beberapa struktur semantik                         | Menggunakan kurang daripada 5 elemen; tiada struktur semantik                   |
| Kualiti Kod      | Kod yang teratur, mudah dibaca dengan komen; mematuhi piawaian HTML                        | Kod yang agak teratur; sedikit komen                                            | Kod tidak teratur; tiada komen                                                  |
| Refleksi         | Refleksi yang mendalam tentang pilihan reka bentuk dan cabaran                             | Refleksi asas                                                                   | Tiada refleksi atau tidak relevan                                               |

## Petua

- Gunakan tag HTML semantik untuk aksesibiliti dan SEO yang lebih baik.
- Susun kod anda dengan indentasi dan komen.
- Rujuk [Rujukan Elemen HTML MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element) untuk panduan.
- Fikirkan bagaimana susun atur anda boleh diperluaskan atau digayakan dalam tugasan masa depan.

---

**Penafian**:  
Dokumen ini telah diterjemahkan menggunakan perkhidmatan terjemahan AI [Co-op Translator](https://github.com/Azure/co-op-translator). Walaupun kami berusaha untuk memastikan ketepatan, sila ambil perhatian bahawa terjemahan automatik mungkin mengandungi kesilapan atau ketidaktepatan. Dokumen asal dalam bahasa asalnya harus dianggap sebagai sumber yang berwibawa. Untuk maklumat yang kritikal, terjemahan manusia profesional adalah disyorkan. Kami tidak bertanggungjawab atas sebarang salah faham atau salah tafsir yang timbul daripada penggunaan terjemahan ini.