Tredun ohjelmistokehittäjien kurssimateriaaleja
Tee HTML-dokumentti, jossa esitellään yksi valtio. Kerro siitä perustiedot esim. nimi, viralliset kielet, asukasmäärä, pinta-ala, rahayksikkö, lippu, BKT, viisi suurinta kaupunkia, kuvailevaa tekstiä luonnosta tms. Käytä muotoiluun erilaisia otsikkotyyppejä, kappaleita, listoja, taulukkoa, linkkejä, kuvia jne. Älä muotoile dokumentin ulkonäköä vielä vaan keskity vain sen sisältöön. CSS-määrittelyt tehdään erikseen myöhemmin.
Ryhmittele edellinen harjoituksen osat div-tagien avulla loogisiksi osiksi. Anna osille niiden tarkoitusta kuvaavat id:t, esim. header, info, nature, cities etc.
Tässä vaiheessa aja HTML-validaattori koodillesi. Se löytyy täältä (lataa koodi sivulle, aja validointi ja korjaa HTML:ää niin kauan, että se menee läpi). Kun HTML-on kunnossa jatka tehtävään 3.
Tee sivullesi CSS-tiedosto ja muotoile se niin, että eri osiot erottuvat sivulla omissa laatikoissaan (käytä flex-boxia). Lisää värejä, fontteja, katso ohjeita CSS-demo 1:stä.
Tee samanlainen sivu parille muullekin maalle (pidä rakenne ja CSS-muotoilu samana). Tee ul-tagin avulla linkkilista, jonka kautta sivujen välillä voi liikkua. Kopioi se kaikkien kolmen sivun header-div:iin, katso ohjeita CSS-demo 1:stä.