# Tugas Praktik HTML: Membuat Mockup Blog ## Tujuan Pembelajaran Gunakan pengetahuan HTML Anda dengan merancang dan membuat struktur halaman utama blog yang lengkap. Tugas praktis ini akan memperkuat konsep HTML semantik, praktik terbaik aksesibilitas, dan keterampilan organisasi kode profesional yang akan Anda gunakan sepanjang perjalanan pengembangan web Anda. **Dengan menyelesaikan tugas ini, Anda akan:** - Berlatih merencanakan tata letak situs web sebelum mulai coding - Menggunakan elemen HTML semantik dengan tepat - Membuat markup yang terstruktur dan mudah diakses - Mengembangkan kebiasaan coding profesional dengan komentar dan organisasi yang baik ## Persyaratan Proyek ### Bagian 1: Perencanaan Desain (Mockup Visual) **Buat mockup visual dari halaman utama blog Anda yang mencakup:** - Header dengan judul situs dan navigasi - Area konten utama dengan setidaknya 2-3 pratinjau postingan blog - Sidebar dengan informasi tambahan (bagian tentang, postingan terbaru, kategori) - Footer dengan informasi kontak atau tautan **Opsi Pembuatan Mockup:** - **Sketsa tangan**: Gunakan kertas dan pensil, lalu foto atau scan desain Anda - **Alat digital**: Figma, Adobe XD, Canva, PowerPoint, atau aplikasi gambar lainnya - **Alat wireframe**: Balsamiq, MockFlow, atau perangkat lunak wireframing serupa **Labeli bagian mockup Anda** dengan elemen HTML yang Anda rencanakan untuk digunakan (misalnya, "Header - `

`", "Postingan Blog - `

`"). ### Bagian 2: Perencanaan Elemen HTML **Buat daftar yang memetakan setiap bagian dari mockup Anda ke elemen HTML tertentu:** ``` Example: - Site Header →

- Main Navigation →