# HTML-harjoitustehtävä: Blogimallin rakentaminen ## Oppimistavoitteet Käytä HTML-osaamistasi suunnittelemalla ja koodaamalla blogin etusivun rakenne. Tämä käytännön tehtävä vahvistaa semanttisen HTML:n käsitteitä, saavutettavuuden parhaita käytäntöjä ja ammattimaisia koodauskäytäntöjä, joita tarvitset verkkokehityksen urallasi. **Tehtävän suorittamalla:** - Harjoittelet verkkosivuston ulkoasun suunnittelua ennen koodaamista - Käytät semanttisia HTML-elementtejä tarkoituksenmukaisesti - Luot saavutettavaa ja hyvin jäsenneltyä merkkausta - Kehität ammattimaisia koodauskäytäntöjä kommenttien ja organisoinnin avulla ## Projektivaatimukset ### Osa 1: Suunnittelun suunnittelu (visuaalinen mallinnus) **Luo visuaalinen mallinnus blogisi etusivusta, joka sisältää:** - Otsikko, jossa sivuston nimi ja navigaatio - Pääsisältöalue, jossa vähintään 2-3 blogipostauksen esikatselua - Sivupalkki, jossa lisätietoja (esittelyosio, viimeisimmät postaukset, kategoriat) - Alatunniste, jossa yhteystiedot tai linkit **Mallinnusvaihtoehdot:** - **Käsin piirretty luonnos**: Käytä paperia ja kynää, ja valokuvaa tai skannaa suunnitelmasi - **Digitaaliset työkalut**: Figma, Adobe XD, Canva, PowerPoint tai mikä tahansa piirto-ohjelma - **Wireframe-työkalut**: Balsamiq, MockFlow tai vastaavat wireframe-ohjelmistot **Merkitse mallinnuksen osiot** HTML-elementeillä, joita aiot käyttää (esim. "Otsikko - `

`", "Blogipostaukset - `

`"). ### Osa 2: HTML-elementtien suunnittelu **Laadi lista, joka yhdistää mallinnuksen jokaisen osion tiettyihin HTML-elementteihin:** ``` Example: - Site Header →

- Main Navigation →