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

4.1 KiB
Raw Blame History Escape

HTML-harjoitustehtävä: Luo blogin mallisivu

Tavoite

Suunnittele ja koodaa käsin HTML-rakenne henkilökohtaisen blogin etusivulle. Tämä harjoitus auttaa sinua harjoittelemaan semanttista HTML:ää, layoutin suunnittelua ja koodin organisointia.

Ohjeet

  1. Suunnittele blogisi mallisivu

    • Tee luonnos blogisi etusivusta. Sisällytä keskeiset osiot, kuten yläosa, navigointi, pääsisältö, sivupalkki ja alatunniste.
    • Voit käyttää paperia ja skannata luonnoksen tai hyödyntää digitaalisia työkaluja (esim. Figma, Adobe XD, Canva tai jopa PowerPoint).

  2. Tunnista HTML-elementit

    • Listaa HTML-elementit, joita aiot käyttää kussakin osiossa (esim. <header>, <nav>, <main>, <article>, <aside>, <footer>, <section>, <h1>–<h6>, <p>, <img>, <ul>, <li>, <a> jne.).

  3. Kirjoita HTML-koodi

    • Koodaa käsin HTML luonnoksesi pohjalta. Keskity semanttiseen rakenteeseen ja parhaisiin käytäntöihin.
    • Sisällytä vähintään 10 erilaista HTML-elementtiä.
    • Lisää kommentteja valintojesi ja rakenteen selittämiseksi.

  4. Palauta työsi

    • Lataa luonnoksesi/mallisivusi ja HTML-tiedostosi.
    • Halutessasi kirjoita lyhyt pohdinta (2–3 lausetta) suunnittelupäätöksistäsi.

Arviointikriteerit

Kriteeri Erinomainen Riittävä Parannettavaa
Visuaalinen luonnos Selkeä, yksityiskohtainen luonnos, jossa osiot on nimetty ja layout on huolellisesti suunniteltu Perusluonnos, jossa on joitakin nimettyjä osioita Vähäinen tai epäselvä luonnos; osioiden nimet puuttuvat
HTML-elementit Käyttää 10+ semanttista HTML-elementtiä; osoittaa ymmärrystä rakenteesta ja parhaista käytännöistä Käyttää 5–9 HTML-elementtiä; jonkin verran semanttista rakennetta Käyttää alle 5 elementtiä; semanttinen rakenne puuttuu
Koodin laatu Hyvin organisoitu, luettava koodi kommentteineen; noudattaa HTML-standardeja Enimmäkseen organisoitu koodi; vähän kommentteja Sekava koodi; kommentit puuttuvat
Pohdinta Oivaltava pohdinta suunnittelupäätöksistä ja haasteista Peruspohdinta Ei pohdintaa tai se ei ole relevantti

Vinkkejä

  • Käytä semanttisia HTML-tageja paremman saavutettavuuden ja hakukoneoptimoinnin vuoksi.
  • Organisoi koodisi sisennyksillä ja kommenteilla.
  • Katso MDN HTML Elements Reference saadaksesi lisätietoa.
  • Mieti, miten layoutiasi voisi laajentaa tai muokata tulevissa tehtävissä.

Vastuuvapauslauseke:
Tämä asiakirja on käännetty käyttämällä tekoälypohjaista käännöspalvelua Co-op Translator. Vaikka pyrimme tarkkuuteen, huomioithan, että automaattiset käännökset voivat sisältää virheitä tai epätarkkuuksia. Alkuperäinen asiakirja sen alkuperäisellä kielellä tulisi pitää ensisijaisena lähteenä. Kriittisen tiedon osalta suositellaan ammattimaista ihmiskäännöstä. Emme ole vastuussa väärinkäsityksistä tai virhetulkinnoista, jotka johtuvat tämän käännöksen käytöstä.