<!--
CO_OP_TRANSLATOR_METADATA:
{
  "original_hash": "5a764667bbe82aa72ac0a67f4c97ff4a",
  "translation_date": "2025-10-03T10:18:56+00:00",
  "source_file": "3-terrarium/1-intro-to-html/assignment.md",
  "language_code": "id"
}
-->
# Tugas Praktik HTML: Membuat Mockup Blog

## Tujuan

Merancang dan menulis struktur HTML untuk halaman utama blog pribadi. Latihan ini akan membantu Anda mempraktikkan HTML semantik, perencanaan tata letak, dan pengorganisasian kode.

## Instruksi

1. **Rancang Mockup Blog Anda**
   - Buat sketsa visual mockup halaman utama blog Anda. Sertakan bagian-bagian utama seperti header, navigasi, konten utama, sidebar, dan footer.
   - Anda dapat menggunakan kertas dan memindai sketsa Anda, atau menggunakan alat digital (misalnya, Figma, Adobe XD, Canva, atau bahkan PowerPoint).

2. **Identifikasi Elemen HTML**
   - Daftar elemen HTML yang akan Anda gunakan untuk setiap bagian (misalnya, `<header>`, `<nav>`, `<main>`, `<article>`, `<aside>`, `<footer>`, `<section>`, `<h1>`–`<h6>`, `<p>`, `<img>`, `<ul>`, `<li>`, `<a>`, dll.).

3. **Tulis Markup HTML**
   - Tulis kode HTML untuk mockup Anda secara manual. Fokus pada struktur semantik dan praktik terbaik.
   - Sertakan setidaknya 10 elemen HTML yang berbeda.
   - Tambahkan komentar untuk menjelaskan pilihan dan struktur Anda.

4. **Kirimkan Pekerjaan Anda**
   - Unggah sketsa/mockup dan file HTML Anda.
   - Opsional, berikan refleksi singkat (2–3 kalimat) tentang keputusan desain Anda.

## Rubrik Penilaian

| Kriteria         | Unggul                                                                                     | Memadai                                                                         | Perlu Peningkatan                                                               |
|------------------|--------------------------------------------------------------------------------------------|----------------------------------------------------------------------------------|---------------------------------------------------------------------------------|
| Mockup Visual    | Mockup yang jelas, terperinci dengan bagian yang diberi label dan tata letak yang dipikirkan dengan baik | Mockup dasar dengan beberapa bagian yang diberi label                           | Mockup minimal atau tidak jelas; tidak ada label bagian                         |
| Elemen HTML      | Menggunakan 10+ elemen HTML semantik; menunjukkan pemahaman tentang struktur dan praktik terbaik | Menggunakan 5–9 elemen HTML; beberapa struktur semantik                         | Menggunakan kurang dari 5 elemen; kurang struktur semantik                      |
| Kualitas Kode    | Kode yang terorganisir dengan baik, mudah dibaca dengan komentar; mengikuti standar HTML    | Kode sebagian besar terorganisir; sedikit komentar                              | Kode tidak terorganisir; tidak ada komentar                                     |
| Refleksi         | Refleksi yang mendalam tentang pilihan desain dan tantangan                                | Refleksi dasar                                                                  | Tidak ada refleksi atau kurang relevan                                          |

## Tips

- Gunakan tag HTML semantik untuk aksesibilitas dan SEO yang lebih baik.
- Organisasikan kode Anda dengan indentasi dan komentar.
- Lihat [Referensi Elemen HTML MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element) untuk panduan.
- Pikirkan bagaimana tata letak Anda dapat diperluas atau ditata dalam tugas-tugas mendatang.

---

**Penafian**:  
Dokumen ini telah diterjemahkan menggunakan layanan penerjemahan AI [Co-op Translator](https://github.com/Azure/co-op-translator). Meskipun kami berusaha untuk memberikan hasil yang akurat, harap diperhatikan bahwa terjemahan otomatis dapat mengandung kesalahan atau ketidakakuratan. Dokumen asli dalam bahasa aslinya harus dianggap sebagai sumber yang otoritatif. Untuk informasi yang bersifat kritis, disarankan menggunakan jasa penerjemahan profesional oleh manusia. Kami tidak bertanggung jawab atas kesalahpahaman atau interpretasi yang keliru yang timbul dari penggunaan terjemahan ini.