<!--
CO_OP_TRANSLATOR_METADATA:
{
  "original_hash": "5a764667bbe82aa72ac0a67f4c97ff4a",
  "translation_date": "2025-10-11T12:00:26+00:00",
  "source_file": "3-terrarium/1-intro-to-html/assignment.md",
  "language_code": "et"
}
-->
# HTML-i harjutusülesanne: Blogi maketi loomine

## Eesmärk

Kavanda ja kodeeri käsitsi isikliku blogi avalehe HTML-struktuur. See harjutus aitab sul praktiseerida semantilist HTML-i, paigutuse planeerimist ja koodi organiseerimist.

## Juhised

1. **Kavanda oma blogi makett**
   - Joonista visuaalne makett oma blogi avalehe jaoks. Lisa peamised sektsioonid, nagu päis, navigeerimine, põhisisu, külgriba ja jalus.
   - Võid kasutada paberit ja skaneerida oma visandi või kasutada digitaalseid tööriistu (nt Figma, Adobe XD, Canva või isegi PowerPoint).

2. **Määra HTML-elemendid**
   - Koosta nimekiri HTML-elementidest, mida plaanid kasutada igas sektsioonis (nt `<header>`, `<nav>`, `<main>`, `<article>`, `<aside>`, `<footer>`, `<section>`, `<h1>`–`<h6>`, `<p>`, `<img>`, `<ul>`, `<li>`, `<a>` jne).

3. **Kirjuta HTML-märgendid**
   - Kodeeri käsitsi HTML oma maketi jaoks. Keskendu semantilisele struktuurile ja parimatele praktikatele.
   - Lisa vähemalt 10 erinevat HTML-elementi.
   - Lisa kommentaare, et selgitada oma valikuid ja struktuuri.

4. **Esita oma töö**
   - Laadi üles oma visand/makett ja HTML-fail.
   - Soovi korral kirjuta lühike refleksioon (2–3 lauset) oma disainiotsuste kohta.

## Hindamiskriteeriumid

| Kriteerium       | Silmapaistev                                                                               | Piisav                                                                          | Vajab parandamist                                                               |
|------------------|--------------------------------------------------------------------------------------------|---------------------------------------------------------------------------------|---------------------------------------------------------------------------------|
| Visuaalne makett | Selge, detailne makett koos märgistatud sektsioonide ja läbimõeldud paigutusega            | Põhiline makett, kus mõned sektsioonid on märgistatud                          | Minimaalne või ebaselge makett; puuduvad sektsioonide märgistused               |
| HTML-elemendid   | Kasutab 10+ semantilist HTML-elementi; näitab struktuuri ja parimate praktikate mõistmist  | Kasutab 5–9 HTML-elementi; mõningane semantiline struktuur                     | Kasutab vähem kui 5 elementi; puudub semantiline struktuur                      |
| Koodi kvaliteet  | Hästi organiseeritud, loetav kood koos kommentaaridega; järgib HTML-i standardeid          | Enamasti organiseeritud kood; vähe kommentaare                                 | Ebaorganiseeritud kood; kommentaarid puuduvad                                  |
| Refleksioon      | Läbimõeldud refleksioon disainiotsuste ja väljakutsete kohta                               | Põhiline refleksioon                                                           | Puudub refleksioon või see ei ole asjakohane                                    |

## Näpunäited

- Kasuta semantilisi HTML-märgendeid parema ligipääsetavuse ja SEO jaoks.
- Organiseeri oma kood taande ja kommentaaridega.
- Vaata [MDN HTML Elementide viidet](https://developer.mozilla.org/en-US/docs/Web/HTML/Element) juhiste saamiseks.
- Mõtle, kuidas sinu paigutust saaks tulevastes ülesannetes laiendada või kujundada.

---

**Lahtiütlus**:  
See dokument on tõlgitud AI tõlketeenuse [Co-op Translator](https://github.com/Azure/co-op-translator) abil. Kuigi püüame tagada täpsust, palume arvestada, et automaatsed tõlked võivad sisaldada vigu või ebatäpsusi. Algne dokument selle algses keeles tuleks pidada autoriteetseks allikaks. Olulise teabe puhul soovitame kasutada professionaalset inimtõlget. Me ei vastuta selle tõlke kasutamisest tulenevate arusaamatuste või valesti tõlgenduste eest.