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 'cf2cc32760'
${ noResults }
Web-Dev-For-Beginners/translations/tl/3-terrarium/1-intro-to-html/assignment.md

4.3 KiB
Raw Blame History Escape

HTML Practice Assignment: Gumawa ng Mockup ng Blog

Layunin

Magdisenyo at mano-manong gumawa ng istruktura ng HTML para sa homepage ng personal na blog. Ang ehersisyong ito ay makakatulong sa iyo na magpraktis ng semantic HTML, pagpaplano ng layout, at organisasyon ng code.

Mga Instruksyon

  1. Disenyo ng Mockup ng Iyong Blog

    • Gumuhit ng visual na mockup ng homepage ng iyong blog. Isama ang mga pangunahing seksyon tulad ng header, navigation, pangunahing nilalaman, sidebar, at footer.
    • Maaari kang gumamit ng papel at i-scan ang iyong sketch, o gumamit ng mga digital na tool (hal., Figma, Adobe XD, Canva, o kahit PowerPoint).

  2. Tukuyin ang mga Elemento ng HTML

    • Maglista ng mga elemento ng HTML na balak mong gamitin para sa bawat seksyon (hal., <header>, <nav>, <main>, <article>, <aside>, <footer>, <section>, <h1>–<h6>, <p>, <img>, <ul>, <li>, <a>, atbp.).

  3. Isulat ang HTML Markup

    • Mano-manong isulat ang HTML para sa iyong mockup. Mag-focus sa semantic na istruktura at pinakamahusay na mga praktis.
    • Isama ang hindi bababa sa 10 natatanging elemento ng HTML.
    • Magdagdag ng mga komento upang ipaliwanag ang iyong mga pagpipilian at istruktura.

  4. I-submit ang Iyong Gawa

    • I-upload ang iyong sketch/mockup at ang iyong HTML file.
    • Opsyonal, magbigay ng maikling repleksyon (2–3 pangungusap) tungkol sa iyong mga desisyon sa disenyo.

Rubric

Pamantayan Natatangi Katanggap-tanggap Kailangan ng Pagpapabuti
Visual Mockup Malinaw, detalyadong mockup na may label na mga seksyon at maingat na layout Pangunahing mockup na may ilang label na seksyon Minimal o hindi malinaw na mockup; kulang sa mga label ng seksyon
Mga Elemento ng HTML Gumagamit ng 10+ semantic na elemento ng HTML; nagpapakita ng pag-unawa sa istruktura at pinakamahusay na mga praktis Gumagamit ng 5–9 elemento ng HTML; may ilang semantic na istruktura Gumagamit ng mas kaunti sa 5 elemento; kulang sa semantic na istruktura
Kalidad ng Code Maayos na organisado, nababasang code na may mga komento; sumusunod sa mga pamantayan ng HTML Karamihan ay organisadong code; kaunting mga komento Hindi organisadong code; kulang sa mga komento
Repleksyon Malalim na repleksyon sa mga desisyon sa disenyo at mga hamon Pangunahing repleksyon Walang repleksyon o kulang sa kaugnayan

Mga Tip

  • Gumamit ng semantic na mga tag ng HTML para sa mas mahusay na accessibility at SEO.
  • Ayusin ang iyong code gamit ang tamang indentation at mga komento.
  • Bisitahin ang MDN HTML Elements Reference para sa gabay.
  • Isipin kung paano maaaring palawakin o i-style ang iyong layout sa mga susunod na gawain.

Paunawa:
Ang dokumentong ito ay isinalin gamit ang AI translation service na Co-op Translator. Bagama't sinisikap naming maging tumpak, pakitandaan na ang mga awtomatikong pagsasalin ay maaaring maglaman ng mga pagkakamali o hindi pagkakatugma. Ang orihinal na dokumento sa orihinal nitong wika ang dapat ituring na opisyal na sanggunian. Para sa mahalagang impormasyon, inirerekomenda ang propesyonal na pagsasalin ng tao. Hindi kami mananagot sa anumang hindi pagkakaunawaan o maling interpretasyon na dulot ng paggamit ng pagsasaling ito.