Demo 2 - Dokumentin rakenne ja ulkoasu

Näissä demoissa rakennamme useammasta dokumentista muodostuvan sivukokonaisuuden, rakennamme sivuille järkevän navigointilinkistön ja määrittelemme koko sivustolle yhtenäisen ulkomuodon CSS:n avulla.

Dokumenttien linkitys

1. Aukaise kurssimoniste sivulta 71. Luodaan seuraavaksi viisi XHTML-dokumenttia monisteen kappaleiden perusteella.
   
2. Luo uusi XHTML-dokumentti johon sijoitat kaiken kappaleessa 4.10.1 Arvojen oikeinkirjoittaminen olevat tekstit ja esimerkit. Älä kirjoita käsin tekstejä vaan kopioi ne leikepöydän avulla! Käytä avuksesi HTML-kitin Tags-valikosta löytyviä pikanäppäimiä. Erityisen kätevä on valinta Enclose with Tag (ALT+INS), jolla saa valittuna olevan tekstialueen halutun elementin sisään.
   • Ota dokumentin pohjaksi edellisissä demoissa ollut mallipohja
   • Määrittele Arvojen oikeinkirjoittaminen XHTML-dokumentin pääotsikoksi (h1)
   • määrittele kappaleet p-elementeillä
   • Sijoita koodiesimerkit pre-elementtien sisään.
   • Merkitse monisteessa kappaleiden sisällä olevat lihavoidut sanat code-elementillä.
   • Talleta dokumentti nimellä oikeinkirjoitus.html hakemistoon U:\tietoverkot\demot2\.
   • Tarkista dokumentin oikeellisuus Tidylla (F9) ja Lehtorilla. Korjaa mahdolliset virheet.
   • Luo vastaavalla tavalla XHTML-dokumentit monisteen kappaleista 4.10.2 Pituuden ilmoittaminen, 4.10.3 Prosentin ilmoittaminen ja 4.10.4 Värien ilmoittaminen
3. Luo vielä yksi uusi XHTML-dokumentti johon kirjoitat 4.10 Tyyleissä käytettävät arvot ja ominaisuudet-kappaleen yleisen osan. Lisää samaan dokumenttiin selkeä linkkilista (ol) aiemmin luomiisi dokumentteihin. Talleta tämä dokumentti nimellä index.html.
   
4. Lisää jokaisen alidokumentin alkuun navigointilinkit joilla pääsee helposti siirtymään dokumentista toiseen (vrt. tämän sivun ylä- ja alalaidan linkit). Sijoita linkit div-elementin sisään. Voit käyttää apunasi seuraavaa esimerkkiä:

   <div class="navbar">
   <a href="eka.html">Ekan otsikko</a> | 
   <a href="toka.html">Tokan otsikko</a> | 
   <a href="kolmas.html">Kolmannen otsikko</a>
   </div>

5. Testaa navigointilinkkien toimivuus.
6. Lisää jokaisen dokumentin loppuun tieto dokumentin ylläpitäjästä ja siitä milloin dokumenttia on viimeksi päivitetty (vrt. tämän dokumentin alalaita). Voit käyttää seuraavaa esimerkkiä apunasi:

   <address>
           <a title="Sivun ylläpitäjä" 
              href="http://www.jyu.fi/%7ekäyttäjätunnus/">Matti Meikäläinen</a>
           (<a title="Sivun ylläpitäjän sähköpostiosoite"
               href="mailto:tunnus@st.jyu.fi">tunnus@st.jyu.fi</a>)
           <strong>2000-09-18</strong>
   </address>

   Usein on hyvä tulosteita silmälläpitäen laittaa näkyviin myös dokumentin URL ja sivun ylläpitäjän kotisivun URL. Päivitysajankohdasta riittää useimmiten tiedoksi pelkkä päivämäärä.

Dokumentin ulkoasun määrittäminen CSS:llä

1. Avaa HTML-Kitiin tyhjä CSS-dokumentti valinnalla File | New | Style Sheets | Blank Style Sheet. Kopio CSS-dokumentin sisälle osoitteesta <URL: http://www.mit.jyu.fi/opetus/appro/2000/syksy/tietoverkot/demot/demo2/css.html> löytyvä CSS-dokumentin pohja. Pohjaan on määritelty valmiiksi tyylit, joiden asetuksia joudut muuttamaan seuraavien tehtävien mukaisesti. Tallenna dokumentti hakemistoon U:\tietoverkot\demo2\ nimellä demo2.css.
2. Seuraavissa tehtävissä dokumentteja kannattaa katsella Internet Explorer -selaimella, koska tyylien tuki on hieman parempaa Internet Explorerissa kuin Netscapessa.
3. Lisää jokaisen edellä tekemäsi XHTML-dokumentin HEAD-elementin sisään LINK-elementti , jolla linkität tekemäsi CSS-tiedoston jokaiseen dokumenttiin. Link-elementtin sisään tulee seuraavat tiedot.

   <link href="demo2.css" rel="stylesheet" type="text/css" />
   

4. Muuta tyylitiedostoa seuraavien ohjeiden mukaan:
   • Määrittele kirjasinperheen arvoksi body-tyylille Verdana, sans-serif
   • Määrittele kirjasinperheen arvoksi code-tyylille Courier, monospace
   • Määrittele kaikille tyyleille haluamasi taustaväri ja väri. Anna aluksi kaikille tyyleille hieman toisistaan eroavat värimääritykset, niin näet miten elementit todellisuudessa käyttäytyvät.
   • Määrittele marginaalit (ylä-, ala- ja sivumarginaalit) seuraavasti:
     • h1-tyylille 1em
     • h2-tyylille 1em
     • h3-tyylille 1em
     • p-tyylille 1em
     • pre-tyylille 2em
   • Määrittele pre-tyylille reunus thin-reunus.
   • Määrittele .navbar-tyylille medium-reunus. Määrittele .navbar-tyylille keskitys ja 1.5em -kokoiset marginaalit.
   • Määrittele code-tyylille lihavointi. Tyylillä on tarkoitus korostaa tekstin seasta HTML-elementtien nimet ja arvot.
   • Määrittele kaikilta linkeiltä alleviivaus pois. Alleviivauksen voi poistaa text-decoration-ominaisuuden avulla. Huomaa kuitenkin, että sivujen käytettävyyden vuoksi linkin alleviivaus olisi pidettävä mukana. Seuraavassa kuitenkin linkille määrittelään värit, joiden vuoksi ne ainakin erottuvat.
     • Muuta linkki-tyylien värit seuraaviksi a:link-tyyli siniseksi, a:visited-tyyli punaiseksi ja a:active-tyyli harmaaksi.
   • Käy katsomassa sivua myös Netscape-selaimella. Mitä erojaa huomaat tyylien välillä Internet Explorerin ja Netscapen välillä?
5. Kopioi kaikki luomasi dokumentit FTP:llä WWW-palvelimelle. Tee näitä dokumentteja varten uusi hakemisto (www/tietoverkot/demo2/). Sivuston osoitteeksi tulee siis <URL: http://www.jyu.fi/%7Etunnus/tietoverkot/demo2/>.
6. Validoi jokainen dokumentti yksitellen Lehtorilla tai kaikki dokumentit kerralla WDG:n HTML Validatorilla (ruksi kohtaan Validate entire site). Korjaa mahdolliset virheet.
7. Validoi myös luomasi CSS-tiedosto W3C:n CSS-validaattorilla. Korjaa mahdolliset virheet.

Lisätehtävä

Tee värien ilmoittavista koskevan dokumentin loppuun seuraava taulukko. Taulukkoon on tehty 16 perusvärin määritystä tyylitiedoston avulla. Tee vastaava taulukko käyttäen taulukon soluille (td) ID-määrittelyä. Määrittele tyylitiedostoon ID-määrittelyä vastaavat tyylit, joiden avulla voidaan muuttaa taulukon solujen ominaisuuksia. Seuraavassa lista värimääritysten lisäksi määriteltävistä ominaisuuksista.

• Määritä solujen sisältä keskitetyksi.
• Määritä solujen taustaväri sellaiseksi, että taulukon sisältö erottuu taustasta.
• Määritä taulu keskelle selainikkunaa. Joudut laittamaan taulukon div-elementin sisälle, joten tee div-elementille aliluokka .center, johon voit määrittää keskityksen.