|
|
<!--
|
|
|
CO_OP_TRANSLATOR_METADATA:
|
|
|
{
|
|
|
"original_hash": "5a764667bbe82aa72ac0a67f4c97ff4a",
|
|
|
"translation_date": "2025-10-03T10:06:40+00:00",
|
|
|
"source_file": "3-terrarium/1-intro-to-html/assignment.md",
|
|
|
"language_code": "fi"
|
|
|
}
|
|
|
-->
|
|
|
# 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](https://developer.mozilla.org/en-US/docs/Web/HTML/Element) 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](https://github.com/Azure/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ä. |
