Navigointi, CSS-perusteita
Demo 2

Harjoitellaan ensimmäiseksi navigoinnin luomista useasta sivusta koostuvaan kokonaisuuteen.

1. Jos et vielä saanut tehtyä kokonaan ensimmäisen demon varsinaisia tehtäviä niin tee ne loppuun ennen näiden tehtävien jatkamista.
2. Luodaan kuvitteellinen kotisivusto, joka koostuu kolmesta sivusta:
   • Etusivu, joka sisältää lyhyen kuvauksen, yhteystiedot, valokuvan ja linkit muille sivuille.
   • Opiskelusivu, jolta löytyy oma lukujärjestys.
   • Linkkisivu, jonne sijoitetaan suosikkilinkit.
3. Aloita html-kitillä uusi dokumentti. Ota käyttöön sama pohjakoodi kuin edellisissä demoissa. Kirjoita ensimmäisenä sivuston etusivu, jolle tulevat seuraavat asiat:
   • Laita title-elementin sisällöksi oma nimesi
   • Sivun pääotsikoksi tulee myös oma nimesi
   • Kirjoita lyhyt parin lauseen kuvaus itsestäsi. Kerro mitä opiskelet ja harrastat.
   • Laita väliotsikoksi Yhteystiedot ja kirjoita sen jälkeen osoitteesi, puhelinnumerosi ja sähköpostiosoitteesi.
     • Yhteystiedot saat jaettua siististi omille riveilleen br-elementin avulla. Esim.

       <p>
       Tommi Lahtonen<br />
       AgC431.2<br />
       2746<br />
       </p>

     • Tee sähköpostiosoitteestasi mailto-linkki. esim.

       <a href="mailto:tommi.j.lahtonen@jyu.fi">tommi.j.lahtonen@jyu.fi</a>

   • Yhteystietojen perään lisää uusi kappale (p) ja sijoita siihen valokuva (img). Käytä jotakin esimerkkikuvista. Tallenna haluamasi kuva U:/tietoverkot/demo2/-hakemistoon.
     • Lisää tekstikappaleen sisään img-elementti, johon liität seuraavat ominaisuudet:
       • src-ominaisuus määrittää näytettävän kuvan osoitteen tai pelkän nimen, jos kuva sijaitsee samassa hakemistorakenteessa dokumentin kanssa. esim. <img src="kuva.jpg" alt="Tommi Lahtonen luennoi tietoverkot työvälineenä kurssilla" title="Luento 1" />
       • alt-ominaisuus kertoo kuvan sisällön niille, jotka eivät lataa kuvia tai joiden selain ei osaa näyttää kuvia. esim.<img src="kuva.jpg" alt="Tommi Lahtonen luennoi tietoverkot työvälineenä kurssilla" title="Luento 1" />
       • title-ominaisuus kertoo kuvan otsikon, joka voidaan näyttää vihjetekstinä vietäessä hiiri kuvan päälle. esim.<img src="kuva.jpg" alt="Tommi Lahtonen luennoi tietoverkot työvälineenä kurssilla" title="Luento 1" />
     • Kirjoita dokumenttiin liittämällesi kuvalle järkevät title- ja alt-tekstit.
   • Kuvan jälkeen kirjoita uusi väliotsikko Lisätietoja minusta. Luo tämän otsikon alle järjestämätön lista (ul), johon tulee kaksi riviä Opiskelu ja Linkit.
   • Aivan dokumentin loppuun kirjoita vielä tiedot sivun ylläpitäjästä ja sivun päivitysajankohdasta seuraavan esimerkin mukaan:

     <address>
     <a title="Sivun ylläpitäjä" href="http://www.cc.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 12:47</strong>
     </address>

   • Tallenna dokumenttisi U:/tietoverkot/demo2/-hakemistoon nimellä index.html. index.html on useimmissa www-palvelimissa (Apache) oletustiedosto, joka palautetaan pyydettäessä tiettyä hakemistoa.
   • Validoi dokumentti ja korjaa mahdolliset virheet. Testaa sivun toimivuus selaimella.
4. Aloita uusi dokumentti. Käytä aina uusissa dokumenteissa samaa pohjakoodia.
   • Tallenna dokumentti index.html-nimellä U:\tietoverkot\demo2\opiskelu\-kansioon. Ole tarkkana että tallennat oikeaan kansioon. Älä tallenna vahingossa aiemmin tekemäsi dokumentin päälle.
   • Kirjoita tähän dokumenttiin viikkolukujärjestyksesi taulukkomuodossa. Esimerkkiä voit katsoa esimerkiksi kuvassa olevasta taulukosta. Huomaa, että kuvassa ei ole kurssin lukujärjestys! Taulukkojen määrittelystä voit katsoa esimerkkejä luentosivulta.
     
   • Keksi dokumentille myös järkevä pääotsikko ja title.
   • Tallenna, validoi, korjaa virheet ja testaa selaimella.
5. Aloita taas uusi dokumentti. Tee nyt dokumentti jossa on järjestämättömässä listassa (ul) pari suosikkilinkkiäsi.
   • Jos et keksi muita linkkejä niin laita linkki kurssin kotisivulle ja Jyväskylän yliopiston sivulle.
   • Keksi dokumentille hyvä pääotsikko ja title.
   • Tallenna järkevällä nimellä eli nimellä linkit.html.
6. Palaa demo2-hakemiston editoimaan index.html-tiedostoa. Muuta sivun loppuun kirjoittamassasi listassa olevat tekstit linkeiksi niitä vastaaviin dokumentteihin. Tallenna ja testaa selaimella linkkien toiminta.
7. Siirry muokkaamaan linkit.html-tiedostoa. Lisää dokumentin alkuun ennen pääotsikkoa navigointilinkistö div-elementin sisään sijoitettuna. Seuraavassa lyhyt esimerkki navigointilinkistön tekemisestä:

   <div>
   <ul>
   <li><a href="opiskelu/">Opiskelu</a></li>
   <li><a href="linkit.html">Linkit</a></li>
   </ul>
   </div>

   • Lisää linkit demo2-hakemiston index.html-dokumentista muihin tekemiisi dokumentteihin. Laita sivulle sekä navigointilinkit (div), että linkit leipätekstin seassa olevasta listasta.
   • Tallenna ja testaa.
   • Lisää dokumentin loppuun tiedot sivun ylläpitäjästä ja sivun päivitysajasta.
8. Lisää navigointilinkit ja ylläpitäjä/päivitystiedot myös opiskelu-kansion index.html-dokumenttiin. Varmista, että navigointilinkit toimivat. Joudut hieman muuttamaan niitä ;)

Cascading Style Sheets (CSS) -perusteet

1. Aloita html-kitillä uusi dokumentti valinnalla File|New Document. Kopioi dokumentin pohjaksi css-pohja. Tallenna dokumentti U:\tietoverkot\demo2\-hakemistoon demo2.css-nimellä.
2. Lisää jokaisen edellä tekemäsi XHTML-dokumentin head-elementin sisään link-elementti , jolla linkität tekemäsi CSS-tiedoston jokaiseen dokumenttiin. Link-elementin sisään tulevat seuraavat tiedot.

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

3. CSS-kielellä voidaan määritellä oletusulkoasu halutuille xhtml-elementeille. Voidaan luoda myös uusia tyylimäärityksiä joita voi ottaa xhtml-dokumentissa käyttöön halutessaan. Esimerkkejä CSS-määrityksistä löytyy kurssimonisteesta ja luentosivulta.
4. Määritellään ensimmäiseksi dokumentissa käytettävä kirjasin. Lisää body-elementille kirjasinmääritys seuraavasti:

   body {
     font-family: Verdana, Arial, "Trebuchet MS", sans-serif;
   }

   Verdana, Arial ja "Trebuchet MS" ovat käytettävien kirjasimien nimiä. Listasta ensimmäisenä löytyvää kirjasinta käytetään sivulla. WWW-sivun tekijä ei voi tietää mitä kirjasimia on asennettuna kunkin selaajan koneelle joten on pakko antaa useita vaihtoehtoja. sans-serif tarkoittaa päätteetöntä kirjasinperhettä josta poimitaan käyttöön jokin kirjasin jos mitään muuta kirjasinta ei ole käytettävissä.

5. Tallenna CSS-tiedosto ja kokeile selaimella WWW-dokumenttiesi ulkoasua. Voit vaihdella kirjasimien järjestystä ja kokeilla miten sivun ulkoasu muuttuu.
6. Määritellään seuraavaksi sivun marginaali. Lisää body-elementille määrittelyt:

   margin-left: 2%;
   margin-right: 2%;
   margin-top: 1%;
   margin-bottom: 1%;

   Määritellään siis koko sivun vasemmaksi ja oikeaksi marginaaliksi 2% sivun koosta. Ylä- ja alamarginaaliksi määritellään 1% sivun koosta.

   Tallenna ja testaa sivun ulkonäön muuttuminen selaimelle.

7. Määritellään lisää marginaaleja. Nyt h1-, h2-, ja p-elementeille. Lisää näille kaikille seuraava määritys:

   margin-left: 1em;
   margin-right: 1em;
   margin-top: 1.5em;
   margin-bottom: 1.5em;

   em-yksikkö suhteuttaa koon määrityksen selaimen oletusfontin kokoon.

   Tallenna ja testaa selaimella. Muuta marginaalimääritykset mieleisiksesi.

8. Määritellään seuraavaksi sivustolla käytetylle navigointipalkille erottuva ulkoasu. Lisätään .navbar-tyyliin reunus seuraavalla tavalla:

   border-style: solid;
   border-width: thin;
   border-color: #000000;

   .navbar-tyyli ei ole vielä missään käytössä, joten käy muuttamassa opiskelu- ja linkkidokumenttien navigointilinkkien määrityksiä seuraavaksi:

   <div class="navbar">

   Määritellään div-elementti käyttämään navbar-nimistä tyyliä.

   Kokeile sivujen toimintaa selaimella.

9. Navigointipalkille voidaan määritellä myös taustaväri. Aina taustaväriä määriteltäessä pitää muistaa määritellä myös tekstin väri:

    background-color: #EEEECC; 
    color: #FFFFFF; 

   Värien määritteleminen RGB-koodeina on selitetty esim. WDG:n sivulla.

10. Määritellään lista näyttämään navigointipalkin sisällä muulta kuin perinteiseltä listalta. Lisää seuraava uusi tyylimäärittely:

    .navbar ul li {
    	display: inline; 
    }

    Ylläoleva määrittely on voimassa .navbar-tyylin sisällä olevan ul-listan li-elementteihin eli kyseessä on ns. asiayhteyden mukaan määräytyvä tyyli.

    display-ominaisuudella muutetaan lista ulkoasultaan tavalliseksi tekstitason (inline) elementiksi.

    Tallenna ja kokeile.

11. Siistitään edelleen navbarissa olevan linkkilistan ulkoasua seuraavilla lisäyksillä edellä määriteltyyn tyyliin:

    border-left: 1px solid black; /* lisätään linkkien väliin pieni pystysuora palkki */
    margin-left: 0.5em;  
    padding-left: 0.5em;

12. Vielä pieneksi kauneusvirheeksi jää vasemmanpuolimmaisen linkin viereen tuleva turha palkki. Se voidaan piilottaa seuraavalla määrityksellä:

    .navbar ul li:first-child {
            border-left: 0;
    }

    first-child-määritys ei välttämättä toimi jokaisessa selaimessa. Testaa sivujasi Mozillalla, Operalla sekä Internet Explorerilla. Yritä keksiä vaihtoehtoinen tapa tehdä sama asia jokaisella selaimella toimivaksi. Kokeile.

13. Validoi CSS-tiedostosi HTML-kitin Actions barin Online-välilehdeltä löytyvällä CSSCheckUP-ohjelmalla tai W3C CSS Validatorilla. Korjaa mahdolliset virheet ja varoitukset.