Demo 2
Navigointi, WWW-sivun julkaiseminen ja CSS-perusteita

English-version is also available.

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. Vinkkejä img-elementistä löytyy demo 1:en lisätehtävistä. Tallenna käyttämäsi kuva U:/tietoverkot/demo2/-hakemistoon.
   • 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 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.
   • Kirjoita tähän dokumenttiin viikkolukujärjestyksesi taulukkomuodossa. Taulukkojen määrittelystä voit katsoa esimerkkejä luentosivulta.
     
   • Keksi dokumentille myös järkevä pääotsikko ja title.
   • Tallenna dokumentti opiskelu.html-nimellä.
   • 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ä.
6. Palaa editoimaan index.html-tiedostoa. Muuta sivun loppuun kirjoittamassasi listassa olevat tekstit linkeiksi niitä vastaaviin dokumentteihin. Tallenna ja testaa selaimella linkkien toiminta.
7. Siirry muokkaamaan opiskelu.html-tiedostoa. Lisää dokumentin alkuun ennen pääotsikkoa navigointilinkistö div-elementin sisään sijoitettuna. Esim.

   
   <div>
   <a href="luennot/">Luennot</a> |
   <a href="demot/">Demot</a> |
   <a href="harkka/">Harjoitustyö</a> |
   <a href="moniste/">Moniste</a> | 
   <a href="aikataulu.html">Aikataulu</a> | 
   </div>
   

   • Tee linkit index.html-dokumenttiin ja linkkidokumenttiisi.
   • Erota linkit toisistaan esim. |-merkillä (linkki1 | linkki2 | linkki3) tai laittamalla jokainen linkkisana []-merkkien sisään ([linkki1] [linkki2] [linkki3]).
   • Tallenna ja testaa.
   • Lisää dokumentin loppuun tiedot sivun ylläpitäjästä ja sivun päivitysajasta. Vrt. index.html.
8. Lisää navigointilinkit ja ylläpitäjä/päivitystiedot myös linkkidokumenttiin.

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" />

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 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 vielä linkkiefektit:

    a:link

    Määrittelee linkin normaalin ulkoasun

    a:visited

    Määrittelee käydyn linkin ulkoasun

    a:hover

    Määrittelee linkin ulkoasun silloin, kun hiiren kohdistin on linkin päällä.

    a:active

    Määrittelee aktiivisen linkin ulkoasun

    Muihin linkkimäärityksiin ei välttämättä tarvi eikä aina kannatakaan koskea, mutta hover-efekti on usein hyvä määritellä esim. näin:

    
    a:hover {
     color: white;
     background-color: #993399; 
    }
    

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

WWW-sivun julkaiseminen

Opetellaan kopioimaan WWW-sivu WWW-palvelimelle kaikkien nähtäväksi.

1. Ota SSH-yhteys johonkin ATK-keskuksen Unix-koneeseen (silmu,itu,verso,kanto tai tukki).
2. Anna komento makewww, joka luo kotihakemistoosi www-alihakemiston, joka on samalla linkki WWW-palvelimeen. Kaikki dokumentit, jotka sijoitat www-hakemistoon näkyvät nyt maailmalle.
3. Siirry www-hakemistoon (cd www) ja luo sinne uusi hakemisto demotehtäviä varten: mkdir tietoverkot.
4. Kotisivusi osoite on:

   http://www.cc.jyu.fi/~tunnus/

   esim. http://www.cc.jyu.fi/~tjlahton/. Voit käyttää myös muotoja:
   • http://www.st.jyu.fi/~tunnus/
   • http://www.cc.jyu.fi/%7Etunnus/
   • http://www.st.jyu.fi/%7Etunnus/

   Valitse näistä yksi ja käytä aina tätä samaa ilmoittaessasi osoitettasi ystävillesi.

   Jos et nyt vielä halua itsellesi kotisivua niin voit piilottaa palvelimelle siirrettävät demotehtävät tekemällä itsellesi tyhjän kotisivun. Tyhjän sivun luominen onnistuu helpoiten kirjoittamalla www-hakemistossa komento:

   touch index.html

5. Usein sivuston kopioiminen tapahtuu jollakin FTP-ohjelmalla, mutta tätä tulisi välttää koska FTP-yhteyttä ei ole suojattu. Käytä ainoastaan komentorivipohjaista SCP2-komentoa tai graafista SFTP:tä. Saat nyt valita kummalla haluat tehdä tiedostojen kopioinnin. Tarkemmin näiden ohjelmien käyttäminen on opeteltu jo tietotekniikan propedeuttisella kurssilla.

Secure File Transfer Client (SFTP)

SSH:n Secure File Transfer on windows-ohjelma jolla voidaan turvallisesti kopioida SSH2-protokollaa tukevien koneiden välillä tiedostoja.

1. Käynnistä SSH Secure File Transter valinnalla Start|Programs|Secure Shell SSH|Secure File Transfer Client
2. Paina enteriä niin ohjelma kysyy mihin koneeseen otetaan yhteys. Ota yhteys johonkin atk-keskuksen unix-koneeseen johon sinulla on käyttäjätunnus (silmu, itu, verso, kanto tai tukki).
3. Kopioidaan äsken tekemäsi sivusto WWW-palvelimelle
   • Valitse vasemmassa laidassa olevasta listasta www-hakemisto ja edelleen sen alta tietoverkot-hakemisto.

     Uusia hakemistoja voi luoda valinnalla Operation|New Folder.

   • Valitse Operation|Upload
   • Valitse näytölle aukeavassa ikkunassa U:\tietoverkot\demo2-hakemisto, joka halutaan kokonaisuudessaan kopioida www-palvelimelle.
   • Kopiointi alkaa, kun valitset Upload
   • SFTP:n saat kotikoneellesi SSH2-paketin mukana.

SCP2

SCP2 on komentoriviltä toimiva Secure File Transfer Clientiä vastaava ohjelma tiedostojen turvalliseen kopiointiin koneiden välillä.

1. Aukaise Command Prompt
2. Siirry U:\tietoverkot\-hakemistoon.
3. Kopioidaan koko demo2-hakemisto www-palvelimelle kirjoittamalla:

   
   scp -r demo2 tunnus@kone.st.jyu.fi:www/tietoverkot/
   

   Ylläoleva rivi kopioi demo2-hakemiston ja kaikki sen alla olevat hakemistot ja tiedostot www-palvelimelle. -r-parametri käskee siirtää kaikki alihakemistot tiedostoineen.

4. SCP:n saat kotikoneellesi joko SSH2-paketin mukana tai ottamalla Putty SCP:n.

Nyt voit kokeilla sivujen toimintaa WWW-palvelimella. Siirry selaimella osoitteeseen:

http://www.cc.jyu.fi/~tunnus/tietoverkot/demo2

Jos selain valittaa, että sivua ei saa lukea (Access Denied) niin varmista Unixissa, että kaikilla käyttäjällä on lukuoikeus kaikkiin tiedostoihin. Tiedostojen oikeuksia muutettiin chmod-komennolla, jonka käyttäminen opeteltiin propedeuttisella kurssilla. Ohje chmod-komennosta löytyvät myös Tietotekniikan selviytymisoppaasta.

Validoi koko tekemäsi sivusto WDG:n HTML Validatorilla. Mene osoitteeseen <http://www.htmlhelp.com/tools/validator/> ja anna validaattorille sivustosi osoite sekä ruksaa päälle kohta Validate entire site.

Lisätehtävä

1. Luo oma CSS-tiedosto ensimmäisissä demoissa tekemääsi dokumenttia varten. Yritä saada dokumenttisi näyttämään samanlaiselta, kuin alkuperäinen Jukka Korpelan artikkeli. Vinkkejä ja apua löydät luentosivulta.
   • Joudut määrittelemään dokumentille taustakuvan tai -värin.
   • Otsikoilla on oma taustavärinsä.
   • pääotsikko on keskitetty.
   • pre-elementillä on myös oma taustavärinsä ja reunus.
   • Aivan dokumentin lopussa on kappale, joka on poikkeavasti muotoiltu.
2. Tee uusi dokumentti johon sijoitat seuraavanlaisen taulukon. 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.

   aqua	black	blue	fuchsia
   gray	green	lime	maroon
   navy	olive	purple	red
   silver	teal	white	yellow