XHTML ja CSS - Pääteohjaus 1

Perehdy ensin seuraaviin materiaaleihin:

Voit käyttää myös seuraavia dokumentteja apunasi:

Jos olet aiheen suhteen aivan kuutamolla niin voit aloittaa myös vanhan WWW-julkaiseminen-kurssin demotehtävillä, jotka ovat hieman helpompia:

Jos tämän sivun tehtävät tuntuvat helpoilta niin voit hypätä suoraan vaativampiin tehtäviin.

Mallivideot

Alkuvalmistelut

Ellei sinulla näy vielä W-asemaa, niin käy aktivoimassa users.jyu.fi-tilasi salasana.jyu.fi-palvelussa.

Mozilla Firefox -laajennukset

Asennetaan ensin Mozilla Firefox -selaimeen muutama erittäin hyödyllinen laajennus jos niitä ei jo ole valmiina:

Laajennuksen asennus toimii seuraavasti:

  1. Mene laajennuksen asennussivulle.
  2. Napauta Install Now ja sama myös esiin tulevasta ikkunasta.
  3. Käynnistä Mozilla Firefox uudelleen.
  4. Laajennus löytyy yleensä joko Tools-valikosta, View | Toolbars -valikosta tai alalaidan statuspalkista.

Editori

Nämä demotehtävät voi tehdä haluamallaan WWW-sivueditorilla esim. Notepad++. Nämä kaikki ohjelmat löytyvät Agoran mikroluokista. Notepad++:aan kannattaa asentaa myös xml tools -plugin.

Merkistö

Dokumentin merkistönä on käytettävä UTF-8-merkistöä. Varmista, että skandinaaviset merkit näkyvät oikein sekä Firefoxilla että Chromella. Jos eivät näy niin luo W:-asemalle samaan kansioon sivustosi kanssa .htaccess-tiedosto (piste on olennainen osa tiedoston nimeä) ja kirjoita sinne rivit:

AddCharset UTF-8 .html
AddCharset UTF-8 .js
AddCharset UTF-8 .css

WWW-lomake

Trend Coffee kyselylomake

Napauttamalla saat esiin isomman kuvan.

Kuvitteellinen kahvilayritys haluaisi tehdä nettisivuilleen pienimuotoisen kyselylomakkeen, jolla he voisivat kartoittaa asiakkaiden maku- ja kokemusmaailmaa. Kävijöiltä halutaan kerätä tietoja seuraavasti:

Kyselylomakkeen tiedot

Lomakkeen rakenne

  1. Aloita tyhjä XHTML Strict-dokumentti aloitusohjeiden avulla. Käytä pohjakoodina tätä: 
    <?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fi" >
  <head>

    <title>Tähän sivun otsikko</title>
  </head>

  <body>
    <h1>Tähän pääotsikko</h1>

    <p>Tähän tekstiä...</p>
  </body>

</html>
    Tai voit tehdä myös HTML5-version: 
    <!DOCTYPE html>
<html>
  <head>
  <meta charset="UTF-8">
  
    <title>Tähän sivun otsikko</title>
  </head>

  <body>
    <h1>Tähän pääotsikko</h1>

    <p>Tähän tekstiä...</p>
  </body>

</html>
    Laita link-elementti viittaamaan kahvila.css:ään ja luo tätä varten uusi tyhjä tiedosto. Tallenna tiedostot W:\sovellukset\demo1-hakemistoon.
  2. Muuta otsikko mallikuvan mukaiseksi. Lisää form-elementti, jonka action-attribuuttiin voit laittaa toistaiseksi esimerkiksi skriptin http://appro.mit.jyu.fi/cgi-bin/view.cgi. Kumpi method-attribuutin arvoista sopii tällaiselle lomakkeelle, get vai post?
  3. Lisää kaksi fieldset- ja legend-elementtiparia. Laita kuvan mukaiset otsikot.
  4. Lisää ensimmäiseen ryhmään kappale (p) ja sen sisään sähköpostin otsikko (label) ja tekstikenttä (input type="text"). Anna tekstinkentälle tarvittavat ominaisuudet id, name ja size. Kytke label tekstikenttään for-ominaisuudella. Katsasta muutokset selaimesta, kokeile napauttaa kentän otsikkoa: siirtyykö kursori tekstikenttään?
  5. Lisää toinen kappale, jonka sisään label ja select.
    • Lisää ikävaihtoehdot option-elementillä.
    • Määrää kullekkin option-elementille jokin järkevä value-arvo.
    • Anna oletusvaihtoehdolle selected="selected".
  6. Validoi XHTML (esim. Web Developer Toolbar | Tools | Validate HTML tai IDE-ympäristön omilla validointitoiminnoilla). Jos virheitä tuli, niin tarkista merkkien koodaus, erityisesti < on merkittävä &lt; ja > on merkittävä entiteetillä &gt;.
  7. Lisää jälkimmäisen fieldset-elementin sisälle kaksi uutta fieldset-elementtiä. Laita näiden sisälle legend-elementit, joissa kuvan mukaiset tekstit.
  8. Lisää näistä ensimmäiseen suosikkijuoman valintavaihtoehdot. Kapseloi kukin vaihtoehto p-elementin sisälle. Merkitse otsikot label-elementeillä. Lisää valintaruudut (input type="checkbox") ja anna tarvittavat ominaisuudet id, name ja value. Huomaa, että name voi olla sama kaikille valintaruuduille. Lisää oletusvaihtoehdolle ominaisuus checked="checked". Kytke label-elementit input-elementteihin.
  9. Lisää näistä toiseen yksi kappale ja sen sisään kuvan mukainen label. Lisää select-elementti ja anna sille ominaisuudet id, name, size ja multiple. Lisää select-elementin sisälle musiikkivaihtoehdot (8 kpl). Merkitse nämä option-elementeilla ja keksi niille value-ominaisuuteen arvot. Esim. <option value="foo">foo</option>. Lisää oletusvaihtoehdot selected="selected" -ominaisuuksilla.
  10. Validoi dokumenttisi. Jos saat virheilmoituksen, niin kyse voi olla & -merkistä, joka pitää koodata entiteetillä &amp;
  11. Ryhmittele valintavaihtoehdot kolmeen ryhmään optgroup-elementillä. Ryhmän otsikko merkitään label-ominaisuuteen.
  12. Lisää toisen fieldset-elementin jälkeen lähetä-painike. Tämä onnistuu input type="submit" -elementillä, jolla on ominaisuudet name ja value.

Merkistö

Varmista, että skandinaaviset merkit näkyvät oikein sekä Firefoxilla että Chromella.

Varmista, että dokumenttisi käyttää UTF-8-merkistöä. Jos käytät editorina HTML-kitiä niin UTF-8-merkistön kanssa voi tulla ongelmia. Notepad++ hallitsee eri merkistöt hyvin. Jos kirjoitat XHTML-dokumenttityypillä niin sinun pitää oikean merkistön varmistamiseksi lisätä samaan kansioon, missä dokumenttisi sijaitsee, .htaccess-niminen tiedosto jossa lukee: 

AddCharset UTF-8 .html

.htaccess-tiedosto muuttaa www-palvelimen asetuksia siten, että se jakaa .html-päätteiset tiedostot oletuksena UTF-8-merkistöllä.

Jos kirjoitat HTML5:sta niin riittää jos lisäät dokumenttisi head-osaan määrityksen:

<meta charset="UTF-8" />

Myös HTML5-dokumenttien yhteydessä kannattaa tehdä sama .htaccess-tiedosto kuin edellä.

Lomakkeen ulkoasu

Muotoillaan CSS:llä lomakesivujen ulkoasua. CSS:ää on helppo muotoilla Web Developer Toolbarin CSS | Edit CSS -valinnalla, joka näyttää muutokset lähes reaaliaikaisesti. Muista aina aika ajoin tallentaa muutokset tiedostoon kahvila.css.

  1. Tallenna taustakuvio samaan hakemistoon lomakkeen kanssa ja määrittele lomakkeelle toistuva taustakuviointi body-lohkolle viittaamalla siihen CSS:ssä. Vaihda fontiksi Trebuchet MS, kakkosvaihtoehtona Arial ja kolmas mikä tahansa päätteetön fontti.
  2. Vaihda option-elementtien kirjasimeksi Courier New, Prestige tai joku muu tasavälinen fontti.
  3. Keskitä h1.
  4. Poista p-elementiltä ylä- ja alamarginaali.
  5. Lihavoi kaikkien legend-elementtien tekstit.
  6. Poista sisemmiltä fieldset-elementeiltä reunaviiva. Tarvitset myös selektoria, jolla voidaan valita fieldset-elementin sisällä oleva fieldset.
  7. Lisää sopivat värimääritykset lomakkeen eri ryhmiin (esim. #ffeeff ja #fffcff ).
  8. Tasataan valintavaihtoehdot samalle tasalle. Lisää seuraavat rivit: 
    .tasa label {
  width: 5em;
  float: left;
  clear: left;
}
    • .tasa label viittaa label-elementtiin, joka on jonkun elementin sisällä, jonka class-ominaisuuden arvo on tasa.
    • float-ominaisuudella otsikot saadaan liu'utettua vasempaan laitaan, jolloin muut elementit tulevat otsikon perään.
    • clear-ominaisuudella voidaan estää kahden otsikon asettuminen vierekkäin, jolloin seuraava otsikko rivittyy edellisen alapuolelle.
  9. Merkitse nyt XHTML-dokumentissa class="tasa" -ominaisuudella p-elementti, jonka sisällä on ikävalinta, ja fieldset-elementti, jonka sisällä on suosikkijuomavalinta.

CSS-asemointia

Trend Coffee -sivun sommittelu

Napauttamalla saat esiin isomman kuvan.

Asemoidaan lomake vielä keskelle sivua ja lisätään viereen navigointipalkki ja ylätunniste.

  1. Kapseloi h1-otsikko div-lohkon sisään ja anna tällä lohkolle id-arvoksi header. Jos kirjoitat HTML5-dokumenttia niin käytä div-elementin sijaan header-elementtiä.
  2. Luo tämän jälkeen yleinen lohko (dive-elementti, jos xhtml-dokumentti ja nav-elementti jos HTML5-dokumentti) , jonka id="navbar". Lisää tämän sisälle lista (ul), jossa listakohtina (li) ovat kuvasta löydettävät linkit (Palautekysely-kohtaan ei tarvitse tehdä linkkiä). Linkkien ei tarvitsee johtaa mihinkään.
  3. Kapseloi lomake-elementti yleisen lohkon sisälle ja anna tälle ominaisuus id="content". Käytä xhtml-dokumentissa div-elementtiä ja HTML5-dokumentissa section-elementtiä.
  4. Kapseloi navbar- ja content-lohkot vielä yhden div-elementin sisälle ja anna tälle ominaisuus id="container".
  5. Lähdetään muokkaamaan CSS:ää. Laita container ja header-lohkojen kooksi 65% body-lohkon koosta. Kun CSS-koodissa viittaat johonkin lohkoon sen id-elementin perusteella niin käytä merkintää #id. Laita ominaisuus margin: auto; jolloin lohkon pitäisi mennä keskelle ruutua.
  6. Laita navbar- ja content-lohkoille arvo float:left;, jolloin niiden pitäisi liukua vierekkäin. Laita navbar-lohkon kooksi 20% container-lohkon koosta ja content-lohkon kooksi 75%.
  7. Lisää navbar-lohkolle sama taustanväri kuin fieldsetille.
  8. Nyt navbar-lohkon tausta pitäisi saada jatkumaan vielä yhtä pitkäksi kuin lomakkeen. Käytetään artikkelin One True Layout kikkaa CSS3:sta odotellessa:
    • Laita navbar-lohkolle 
      padding-bottom: 1000em;
margin-bottom: -1000em;
    • Laita container-lohkolle ominaisuus overflow: hidden;
  9. Tehdään vielä hienosäätöjä navigointipalkille:
    • Siirrä lohkoa hieman alaspäin margin-top-ominaisuuden avulla.
    • Tee hieman tyhjää tilaa oikealle margin-right-ominaisuuden avulla.
    • Lisää yhden pikselin kokoinen harmaa reunus.
  10. Keskitään navbar-lohkon sisällä oleva linkkilista ja poistetaan listamerkit:
    • Valitse sopivalla selektorilla navbar-lohkon sisällä oleva ul. Poista tältä paddingit ja marginaalit.
    • Määrää leveydeksi 6em.
    • Laita automaattiset marginaalit.
    • Valitse navbar-lohkon sisällä olevat li-elementit. Poista näiltä listamerkki list-style-type-ominaisuudella.
  11. Tallenna muutokset. Validoi CSS (esim. Web Developer Toolbarista valinnalla Tools | Validate CSS) ja korjaa tarvittaessa. Testaa selaimella. Kokeile muuttaa ikkunan ja tekstin kokoa.

Sivun asemointi CSS:llä käyttäen float-ominaisuutta

Esimerkkikuva float-asemoinnista

Tässä tehtävässä on tarkoitus tehdä vaiheittain oikealla näkyvän kuvan kaltainen sivun asemointi käyttäen hyväksi CSS:n float-ominaisuutta.

  1. Aloita tekemällä tyhjä HTML5-sivu, jossa on standardin mukainen HTML5-dokumentin rakenne. Anna dokumentin nimeksi float.html. Tallenna W-asemallesi.
  2. Määritä dokumentti käyttämään float.css-nimistä tyylitiedostoa samasta kansiosta, missä float.html-tiedostokin sijaitsee.
  3. Lisää dokumenttiin seuraavan nimiset section, header, footer, ja nav-lohkot. Laita nimi lohkon class-attribuutin arvoksi) ja niihin sisältöä (tekstiä) esimerkiksi mallikuvan mukaisesti. Sisältölohkossa (main-elementti) kannattaa käyttää p-elementtiä kappalejakoon. Navigointilohkoissa käytä ul- ja li-elementtejä rivittämään linkkitekstit omille riveilleen. Lohkojen järjestys XHTML-koodissa tulee olla seuraavan listan kaltainen.
    • ylatunniste (sisältää ylätunnisteen sisällön), header
    • vasennavi (sisältää vasemman navigointipalkin sisällön), nav
    • sisalto (sisältää sivun varsinaisen sisällön), main
    • oikeanavi (sisältää oikean navigointipalkin sisällön), nav
    • alatunniste (sisältää alatunnisteen sisällön), footer
  4. Voit lisätä sivulle vielä title-elementin, jonka teksti voi olla esimerkiksi Asettelu float-ominaisuuden avulla.
  5. Luo tyhjä tyylitiedosto nimelle float.css.
  6. Tee tyylitiedostoon vastaavan nimiset luokat, jotka annoit eri lohkoille.
  7. Muotoillaan ensin ylatunniste-luokkaa. Laita luokalle taustaväriksi #FFFF99 ja leveydeksi 98%. Täyte (padding) tulee olla ylhäällä ja alhaalla 0.5em. Vasemmalla ja oikealla täytteen tulee olla 1% (näin viedään kokonaisuudessaan koko selainikkunan leveys). Marginaalit (margin) kannattaa nollata varmuuden vuoksi.
  8. Muotoillaan seuraavaksi vasenta navigointipalkkia (vasennavi). Se on tarkoitus liu'uttaa selainikkunan vasempaan reunaan, joten laita float-arvoksi left. Taustaväriksi laita #99CCFF ja leveydeksi 23%. Täyte (padding) tulee olla ylhäällä ja alhaalla 0.5em. Vasemmalla ja oikealla täytteen tulee olla 1% (näin viedään kokonaisuudessaan 25% selainikkunan leveydestä). Marginaalit (margin) kannattaa nollata varmuuden vuoksi.
  9. Muotoillaan seuraavaksi sisalto-luokkaa. Luokka on tarkoitus liu'uttaa vasemman navigointilohkon viereen, joten laita sillekin float-arvoksi left. Taustaväriksi laita #CCCCFF ja leveydeksi 48%. Täyte (padding) tulee olla ylhäällä ja alhaalla 0.5em. Vasemmalla ja oikealla täytteen tulee olla 1% (näin viedään kokonaisuudessaan 50% selainikkunan leveydestä). Marginaalit (margin) kannattaa nollata varmuuden vuoksi.
  10. Muotoile seuraavaksi oikeanavi-luokka kuten vasennavi-luokka. Ainoastaan taustaväriä tarvitsee muuttaa. Laita taustaväriksi #FF99CC. Huomaa, että oikea navigointipalkkikin siis tulee liu'uttaa vasempaan reunaan, jotta kaikki kolme lohkoa saadaan rinnakkain. Yhteensä lohkot vievät koko selainikkunan verran (100%) tilaa leveyssuunnassa.
  11. Muotoile lopuksi alatunniste-luokka kuten ylatunniste-luokka. Muuta taustavärin arvoksi #66FF99. Lisäksi laita luokalle clear-ominaisuus, jonka arvo laita siten, että luokan kummallekaan puolelle ei saa tulla muita lohkoja.

Testaus

Nyt sivusi pitäisi olla suunnilleen mallikuvan kaltainen. Validoi tuottamasi HTML5- ja CSS-koodit ja korjaa mahdolliset virheet. Testaa sivua eri selaimilla. Kokeile muotoilla CSS-tiedostoa esimerkiksi siten, että vasen- ja oikea navigointipalkki veisivät kumpikin tilaa 33% ja sisältöosuudelle jäisi loput 34%. Voit myös kokeilla muuttaa esimerkiksi ylä- tai alatunnisteen korkeutta. Kokeile myös muuttaa selainikkunan kokoa, niin näet skaalautuuko sivu hyvin.

Sivun asemointi CSS:llä käyttäen position:fixed-arvoa

Esimerkkikuva position:fixed-asemoinnista

Tässä tehtävässä on tarkoitus tehdä vaiheittain oikealla näkyvän kuvan kaltainen sivun asemointi käyttäen hyväksi CSS:n position:fixed-arvoa. Ylä- ja alatunniste sekä molemmat navigointipalkit on asemoitu kiinteästi selainikkunaan, eli sivun varsinainen sisältö näkyy "kehyksien" sisällä ja siinä voi liikkua selainikkunan vierityspalkkien avulla.

  1. Tallenna edellisessä tehtävässä tekemäsi HTML5-tiedosto nimelle fixed.html.
  2. Voit muuttaa lohkojen järjestyksen siten, että tärkeimmät tiedot ovat HTML-tiedostossa ylimpänä (esimerkiksi sisalto-lohko ylimmäksi). position:fixed-arvoa käytettäessä lohkojen järjestyksellä ei ole merkitystä, joten järjestys kannattaa miettiä "tärkeysjärjestykseksi" esimerkiksi ruudunlukijoita (voivat lukea sivua ylhäältä alas) ja erikoisempia ympäristöjä varten
  3. Muuta dokumentti käyttämään fixed.css-nimistä tyylitiedostoa samasta sijainnista, missä fixed.html-tiedostokin sijaitsee (tyylitiedosto tehdään myöhemmin tässä tehtävässä).
  4. Voit muuttaa vielä title-elementin arvoksi esimerkiksi Asettelu position:fixed-arvon avulla.
  5. Muita muutoksia ei tarvitse tehdä - lohkojen nimet, sisällöt yms. saavat pysyä entisellään.
  6. Tallenna edellisessä tehtävässä tekemäsi CSS-tiedosto nimelle fixed.css.
  7. Muokataan ensin ylatunniste-luokkaa. Kaikki jo olemassa olevat arvot saavat jäädä luokkaan. Lisää luokalle position-ominaisuus ja anna sen arvoksi fixed. Sijoita lohko alkamaan selainikkunan vasemmasta yläkulmasta (anna sopivat top- ja left-arvot). Anna lohkolle korkeudeksi 3em. Lisää vielä z-index-ominaisuus ja laita sille riittävän suuri arvo, joka pitää elementin päällimmäisenä.
  8. Muokataan seuraavaksi alatunniste-luokkaa. clear-ominaisuuden voit poistaa, muut jo olemassa olevat arvot saavat jäädä. Määritä luokalle position:fixed-arvo siten, että lohko alkaa näytön vasemmasta alareunasta. Anna lohkolle korkeudeksi 3em. Määritä myös z-index-arvo, jonka tulee olla positiivinen, mutta pienempi kuin ylatunniste-luokalla.
  9. Seuraavaksi muotoillaan vasennavi-luokkaa. Poista luokalta float-ominaisuus ja muuta leveydeksi 15%. Lisää luokalle position:fixed-ominaisuus siten, että top-arvo on 4em ja left-arvo 0%. Näin lohko alkaa heti ylätunnisteen alareunasta. Määritä luokan korkeudeksi 100%.
  10. Tee oikeanavi-luokkaan samat muutokset kuin vasennavi-luokkaan sillä muutoksella, että luokka alkaa näytön oikeasta reunasta (pystysuunnassa edelleen ylätunnisteen alareunasta).
  11. Määritä CSS-tyylitiedostoon body-elementille seuraavat ominaisuudet: kaikkien reunojen täyte (padding) 0.5em, marginaali (margin) ylhäällä ja alhaalla 4em sekä marginaali vasemmalla ja oikealla 17%. Näin body-elementin sisältö asettuu navigointien sekä ylä- ja alatunnisteiden väliin ilman, että tarvitsee käyttää erillistä luokkaa sisällölle.
  12. sisalto-tyyliä ei pitäisi ollenkaan tarvita mutta voit myös muokata sitä niin, että se toimii yhteen muiden tyylien kanssa

Testaus

Nyt sivusi pitäisi olla suunnilleen mallikuvan kaltainen. Validoi tuottamasi HTML5- ja CSS-koodit ja korjaa mahdolliset virheet. Testaa sivua eri selaimilla. Kokeile muotoilla CSS-tiedostoa esimerkiksi siten, että vasen- ja oikea navigointipalkki veisivät kumpikin tilaa 25% ja sisältöosuudelle jäisi loput 50%. Voit myös kokeilla muuttaa esimerkiksi ylä- tai alatunnisteen korkeutta. Kokeile myös muuttaa selainikkunan kokoa, niin näet skaalautuuko sivu hyvin.

HUOM! Nyt harjoituksena tehty asemointi, missä kaikki neljä laitalohkoa kiinnitetään näyttöön EI ole yleensä järkevä, sillä näyttöön kiinnittäminen vie turhan paljon tilaa sivun varsinaiselta sisällöltä etenkin pienemmillä näytöillä. Järkevämpää olisi siis kiinnittää näyttöön esimerkiksi vain joko vasemman laidan tai oikean laidan lohko ja lisäksi joko ylätunniste tai alatunniste. Muut lohkot voisi laittaa vierimään sivun mukana, jolloin ne eivät vie niin paljon tilaa sivun varsinaiselta sisällöltä.

Kokeile muuttaa position:fixed-asetuksen tilalle position: absolute. Miten sivun toiminta muuttuu?

Mediakyselyt

Muuta mediakyselyjen avulla edellä viimeiseksi tekemääsi sivua siten, että jos käytetyn selaimen ikkunan koko on kapeampi kuin 800 pikseliä niin sivunavigoinnit sijoitetaankin peräkkäin sivun sisällön perään eikä enää sivulle.

Lisätehtäviä

Käyttäjien kommentit

Kommentoi Lisää kommentti
Kurssimateriaalien käyttäminen kaupallisiin tarkoituksiin tai opetusmateriaalina ilman lupaa on ehdottomasti kielletty!
http://appro.mit.jyu.fi/web-sovellukset/ohjaus/ohjaus1/
© 2017-01-17 09:02:40
Informaatioteknologia - Jyväskylän yliopiston informaatioteknologian tiedekunta