Semanttinen merkintä ja CSS-asettelu¶

Harjoitusohjeet¶

Lataa ja pura harjoitusmalli paikalliseen hakemistoosi:

html-layout.html.zip

Tässä harjoituksessa sinun tehtäväsi on luoda yksinkertainen sivuasettelu CSS:llä. HTML koostuu semanttisista elementeistä, kuten:

header: Tämä sisältää navigointilinkit, joista tulee tehdä vaakasuora navigointipalkki.
main: Sivun pääosa, jossa on sisältöelementti sekä sisältöön liittyviä resursseja tarjoava sivupalkki.
footer: Sivun alatunniste.

CSS:n tulee määrittää elementtien sijoittelu alla olevan kuvan mukaisesti. Sisällön tyylin ei tarvitse täsmätä tarkasti (esim. reunukset, korkeudet jne.). Esimerkkikuva alla:

Note

Käytä kelluvia elementtejä (float) tehtävän toteuttamiseen. Et saa käyttää absoluuttista/kiinteää paikannusta. Älä käytä flexbox- tai grid-pohjaista ratkaisua. Älä käytä pikselipohjaisia leveyksiä; voit tehdä sivuelementin esimerkiksi 20 % leveäksi ja sisältöelementin 75 % leveäksi.

Mistä aloittaa¶

Luo uusi tyylisivu ja anna sille nimi style.css.
Avaa html-layout.html selaimessa testataksesi sitä. Huomaa, että tehtävän arvostelu tehdään alkuperäisen HTML-tiedoston avulla. Älä aseta vastaustasi riippuvaiseksi HTML-koodin muutoksista.

Tyylisivun palauttaminen Plussaan

Lataa style.css Plussaan tarkistettavaksi alla olevaan tehtävään.

Vinkkejä, jos sinulla on ongelmia automaattisen arvostelijan kanssa.

Arvostelija on melko tarkka, joten jos et saa odottamaasi arvosanaa, tarkista seuraavat asiat:

Älä käytä pikselipohjaisia leveyksiä. Arvostelija suorittaa testit alhaisella resoluutiolla, joten komponentit eivät välttämättä mahdu näytölle. Älä käytä suuria pikselipohjaisia marginaaleja, täytteitä (padding) tai reunuksia asettelun muuttamiseen. Myös tässä tapauksessa matalan resoluution tarkistusympäristö voi aiheuttaa ongelmia. CSS:n ylivuotomääritysten (overflow directives) käyttäminen voi aiheuttaa ongelmia tarkistajan selainympäristössä.

HUOM! Alkuperäisen html-tiedoston muuttaminen ei ole sallittua.

A+ esittää tässä kohdassa tehtävän palautuslomakkeen.