msb-public
/
Web-Dev-For-Beginners
mirror of https://github.com/microsoft/Web-Dev-For-Beginners.git
1
0
Code Issues Projects Releases Wiki Activity
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from 'd5ed4703d8'
${ noResults }
Web-Dev-For-Beginners/translations/id/3-terrarium/1-intro-to-html/assignment.md

4.1 KiB
Raw Blame History Escape

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 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. 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.