Tietokoneiden näyttöjä, joissa näkyy kuvaa automaatiolaboratorion laitteistosta. Monitoreiden takana näkyy sama laitteisto kuin kuvissa.

timohei.net / Opintojaksot / Aiemmin pitämäni opintojaksot / Internet-sovelluskehitys / 1. jakso: HTML, CSS / CSS-tehtävät /
Osa A: Missä CSS-tyylit voidaan määritellä?

Lue ensin alla olevat tehtävät. Silmäile sitten WWW-ohjelmointi Trainer Kit -kirjasta tyylisivuja käsittelevä luku 9 ja pistä merkille tehtäviin liittyvät kohdat. Tee sitten tehtävät käyttäen kirjaa hyväksi.


Kirjan luvun "9.1.3.1 Tyylitiedoston määrittäminen dokumenttiin" esimerkissä on painovirhe! Kirjassa esitetään tyylitiedoston liittäminen tapahtuvaksi seuraavanlaisella LINK-tagilla:

<LINK href="URL" rel="stylesheet" type="type/css">

kun oikea muoto kirjoitetaan:

<LINK href="URL" rel="stylesheet" type="text/css">

Sivujen CSS-rakenteen oikeellisuuden voi tarkistaa CSS Validator -sivun avulla.

Tehtävät

  1. Luo kullekin sivulle sama sisältö samanlaisilla muotoiluilla. Käytä testimuotoiluna vaikkapa H1-tason otsikon värin asettamista vihreäksi: H1 {golor: green}. Mitään muuta sisältöä ei tarvitse sivulle luoda, kuin tuo testaamasi muotoilun kohde (esimerkissäni siis H1-otsikko). Vain tyylimäärittelyiden sijainnit siis eroavat tiedostoissa toisistaan. Luo kutakin tyylimäärittelytapaa varten omat sivunsa hakemistoon css-kokeilut:
    • A_css_inline.html
    • A_css_otsikossa.html
    • A_css_eri_tiedostossa.html
  2. Vertaa muotoilujen näkymistä eri selaimilla!

Jätä sivu palvelimelle tarkistettavakseni.

Linkkejä

Päivitetty 28.8.2022

<<  Edellinen
(2) Hakemistorakenne
Sivu 3/7Seuraava >>
(4) Osa B: Fonttien ja sivun määrittelyä
© Timo Heikkinen | timo piste heikkinen at oamk piste fi