WEB-tulokset, Kauhajoen Karhun esimerkki
Viimeksi muutettu 2.1.2022/JTu
Taustaa
Tässä ohjeessa käyn läpi, miten tein äitini kasvattajaseuran
Kauhajoen Karhun nettitulossivujen määritysten ensimmäisen version.
Voit soveltaa ohjetta myös oman seurasi sivuihin ja muuttaa värimaailmaa oman seuran väreihin.
Sivujen tekemiseen meni vain murto-osa tämän ohjeen kirjoittamiseen verrattuna. Räätälöinti
on helppoa mutta saa siihen aikaakin kulumaan, kun oikein haluaa hifistellä.
Katsotaan, miten KaKan ajanotto-tiimi jatkojalostaa esimerkkiä.
|
HTML-tulosteissa tiedostoa ei tarvitse valita ennakkoon, ExTime kysyy
tulostuksen alkaessa tiedoston nimen. Tiedostosta voidaan tehdä myös
yhtä sarjaa koskeva vakioniminen, vakionimi muodostuu kisan
vuosiluvusta, kisan kalenterinumerosta ja sarjan lyhenteestä.
Perus-HTML on paperitulosteen näköinen web-sivu, kun taas valinnainen
on se, jonka värit, logot, urheilijatiedot ja niiden sarakejärjestyksen voi itse valita.
Valinnaisenkin voi tulostaa joko sarjojen kilpailujärjestyksen mukaan tai itse päätetyssä järjestyksessä.
HTML-tulosteet voi tulostuksen jälkeen avata selaimessa ja sitten tulostaa kirjoittimelle.
|
|
Tämän ohjeen alkuun
Tulosliuskan määritykset
|
Menun toiminnon alakohta
avaa uuden ikkunan, jonka avulla rakennetaan HTML-tulostuksen Layout.
HTML-tiedoston rakenteesta on enemmän tarinaa tämän linkin osoittamassa paikassa.
Tässä ikkunassa valitaan listaan tulevat tiedot (listasta ), niiden järjestys, mahdollisesti leveys ja myös
koko tulostuksen oletusfontti ja kehyksen viivan paksuus.
Jos listauksen Header-tiedostossa on annettu taulukolle jokin tietty leveys, voidaan myös
urheilijataulukolle antaa se sama leveys.
Lisäksi tässä annetaan tulosten alkuun tuleva header-tiedoston nimi, tulosten loppuun tuleva footer-lohkon nimi ja
tuloksissa käytettävän tyylitiedoston nimi. Alempana kerron näistä lohkoista lisää esimerkkien kera.
Kentän sijoitus vasen/oikealaitaisesti tai keskelle,
samoin kuin puuttuvan arvon näkyminen joko nollana tai viivana valitaan napilla
.
Jos sijoitusta ei ole, kilpailija on vielä matkalla. Poisjääneet ja keskeyttäneet näkyvät FIS:n mukaisella
koodituksella (DNS = Did Not Start, jne).
Tuloksiin mukaan tulevat poikkeavat urheilijat määritellään
välilehdellä .
Ja tässä siis näkyy kuvan määrittelyillä tehty valinnainen html-tuloste.
|
|
|
Jokaista saraketta voidaan säätää tarkemmin. -napilla avautuu kentän, siis sarakkeen ulkoasun määrittämisen ikkuna.
Sen avulla voi pitkän kentän nimen lyhentää, esimerkissä Ero voittajaan on lyhennetty kolmeen kirjaimeen Ero.
Lisäksi kyseinen sarake tulostetaan sarakkeen oikeaan reunaan.
Vastaavalla tavalla ruotsalaisella pohjanmaalla saadaan tulosten kieleksi ruotsi kirjoittamalla -kenttään samma på svenska.
Tällä näytöllä laitan myös SM-kisojen lähtölistoihin puuttuvien FIS-pisteiden paikalle viivan (-) rastimalla kohdat ja
.
Ikkunan saa nopeasti auki tuplaklikkaamalla -ikkunassa tiedon nimeä.
|
|
Ohjeen alkuun
Tiedostoon lisättävät html-koodipalat, header ja footer
Oma ulkoasu tehdään lisäämällä tulostiedoston alkuun oma lohko, header. Se on tavallinen tekstitiedosto, jonka sisältö
on HTML-koodia. Pienellä perehtymisellä voi esimerkin HTML-koodia helposti muuttaa oman seuran mieltymyksiä vastaavan
ulkoasun saamiseksi.
Sama pätee tiedostoon loppuun tulevalle lohkolle, footterille. Se on oiva paikka
tukijoiden logoille ja kaupallisille tiedotteille (lue: linkit sponsorien omille sivuille).
Tulostiedoston alkuun lisätään vielä tyylien määrittelyn lohko. Se on taas HTML-standardin mukainen tyylien (CSS) määrittely,
jonka on noudatettava tiettyä syntaksia. Aivan erinomainen paikka perehtymiseen ja opiskeluun on netistä löytyvä
W3schools sivusto, jossa on sekä HTML että CSS määrittelyt (englanniksi) lukuisten esimerkkien
avulla selitetty.
Tämän ohjeen alkuun
Esimerkki headerista ja footerista
Ensin listaus header-lohkoon tarkoitetun tiedoston sisällöstä, siis se kuvan kauhajoki_header.txt tiedoston sisältö, ja miten sen
muistio-ohjelma näyttää. Itse käytän Notepad++ ohjelmaa, suosittelen.
Alussa näkyvät rivinumerot eivät kuulu tiedoston sisältöön, niitä käytän alempana selityksessä viittauksiin.
01:<table width="1000px">
02:<tr>
03: <td width="200px"><img src="https://kauhajoenkarhuhiihto.sporttisaitti.com/@Bin/284594/Logot%20kaupunki%20ja%20karhu.PNG" width="200"></td>
04: <td width="500px" align='center'>
05: <h1>$KISA$</h1>
06: <h2>Sotkan hiihtostadion, Kauhajoki</h2>
07: <h3>Tulokset</h3>
08: <p align="center">
09: Julkaistu $TANAAN$ $NYT$
10: </p>
11: </td>
12: <td width="300px">
13: <img src="https://kauhajoenkarhuhiihto.sporttisaitti.com/@Bin/284594/Logot%20kaupunki%20ja%20karhu.PNG" width="300">
14: </td>
15:</tr>
16:</table>
Ja sitten tiedoston sisältö ja merkitys rivi riviltä.
Rivillä yksi aloitetaan taulukko (<table>), jonka leveys on 1000 pixeliä (width="1000px"). Taulukon määritys päättyy riviin 16.
Taulukossa on vain yksi rivi, joka jakaantuu kolmeen sarakkeeseen.
Taulukon rivin määritys alkaa rivillä 2 ja se päättyy riviin 15, se on siis (<tr>) ja (</tr>)-tagien välissä.
Taulukon rivi siis jakaantuu kolmeen sarakkeeseen, kukin omien (<td>) ja (</td>)-tagien välissä.
Ensimmäisellä sarakkeella on kaupungin ja Karhun yhteinen logo, joka toistuu myös kolmannella, eli oikeanpuoleisella sarakkeella. Logoista lisää footterin yhteydessä.
Ainoa ero on, että oikean puoleisin sarake on 100 pixeliä leveämpi kuin vasemman puoleisin sarake.
Vasen sarake määritetään siis rivillä 3 ja oikea sarake riveillä 12-14. Kuten esimerkistä käy ilmi, rivijaotuksella ei ole niin suurta merkitystä,
sen sijaan kulmasulkuja pitää olla oikea määrä ja jokaisella siis alku- ja loppukulma.
Samoin lainausmerkkejä pitää olla oikea määrä ja oikeissa paikoissa. Lainausmerkit voivat olla tuplia (") tai yksinkertaisia ('), mutta parien pitää täsmätä.
Logoissa itse kyllä suosin tapaa, jossa kaupungin ja seuran logot olisivat erilliset. Näinhän teen esim. SM-kisoissa seuran ja Hiihtoliiton logojen kanssa.
Mutta en pääse Kauhajoen palvelimen sisään.
Riveillä 4 - 11 kuvataan sitten keskimmäisen sarakkeen sisältö, sarakkeen leveys on 500 pixeliä, eli puolet koko leveydestä.
Ylimälle riville (rivin 5 sisältö) tulostuu kilpailun nimi sellaisena kuin se on ExTimen kisatiedostoon talletettu, $-merkkien välissä oleva KISA-sana
korvautuu aina siis kisan nimellä, joten header-lohkoon ei itse tarvitse vaihtaa uuden kilpailun nimeä.
Riveillä 6 ja 7 on sitten vakio sisältö, ja kuten rivillä 4 oli määritetty (align='center'), jokainen keskimmäisen sarakkeen rivi keskitetään sarakkeen keskelle.
H1-tagien välinen teksti tulostuu astetta isommalla fontilla kuin H2-tagien välissä oleva ja se vastaavasti taas isommalla fontilla kuin H3-tagien välissä oleva teksti.
Riveillä 8 - 10 on kappaleen (p) määritys, joka siis tulostetaan myös keskelle saraketta.
Tulosteessa näkyy sitten Julkaistu 2.1.2022 19:20, jos tulostus tehtiin 2.1.2022 kello 19:20.
Sanat (makrot) $TANAAN$ ja $NYT$ korvautuvat siis tulostushetken päivämäärällä ja kelloajalla, vastaavasti. Lähtölistoissa voisi myös käyttää makroa $PVM$, sen paikalle tulostuu kisan pitopäiväys.
Ja sitten sivun alaosaan tuleva footer-lohkon tiedosto samalla tavalla.
01:<table width='1000px'>
02:<tr>
03: <td width='250px'><img src='https://kauhajoenkarhuhiihto.sporttisaitti.com/@Bin/284361/Atria.jpeg' width='250'></td>
04: <td width='250px'><img src='https://kauhajoenkarhuhiihto.sporttisaitti.com/@Bin/284472/Kometos%20MV.jpeg' width='250'></td>
05: <td width='250px'><img src='https://kauhajoenkarhuhiihto.sporttisaitti.com/@Bin/284363/Poppi.jpeg' width='250'></td>
06: <td width='250px'><img src='https://kauhajoenkarhuhiihto.sporttisaitti.com/@Bin/284460/Laatuleipurit%20kahvila.jpeg' width='250'></td>
07:</tr>
08:<tr>
09: <td width='250px'><img src='https://kauhajoenkarhuhiihto.sporttisaitti.com/@Bin/284496/Mets%c3%a4palvelut%20Hautala.jpeg' width='250'></td>
10: <td width='250px'><img src='https://kauhajoenkarhuhiihto.sporttisaitti.com/@Bin/284508/Hiushuone%20N%c3%a4rv%c3%a4.jpeg' width='250'></td>
11: <td width='250px'><img src='https://kauhajoenkarhuhiihto.sporttisaitti.com/@Bin/284520/Taksipalvelu%20Rahikka.jpeg' width='250'></td>
12: <td width='250px'><img src='https://kauhajoenkarhuhiihto.sporttisaitti.com/@Bin/284484/Peterco.jpeg' width='250'></td>
13:</tr>
14:</table>
Tiedosto sisältää samoin taulukon, nyt taulukossa on kaksi riviä ja kummallakin rivillä on 4 saraketta, jokainen 250 pixeliä leveä.
Jokaisessa taulukon solussa on yksi logo, eli kuva. Kuvasta annetaan sen tarkka sijaintipaikka, URL, tagilla (<img>, määre
alkaa src= (source) ja itse URL on lainausmerkkien välissä. Esimerkissä on yksinkertaiset lainausmerkit.
Logojen sijainti, URL, pitää olla jokin muu kuin oman koneen kuvakansio. Omalle koneelle kun en minä ainakaan satunnaista selailijaa päästä.
Tämän ohjeen alkuun
Tyylitiedosto, CSS
Ja samaa kaava toistuu, ensin tiedoston sisältö ja sitten mitä se tarkoittaa, ihan kuin katekismuksessa.
01:<STYLE TYPE="text/css">
02:<!--
03:a:link { font-family:"Helvetica" ;font-size:13px;color:#153b97 }
04:a:hover { background-color:#cbd6f4 }
05:table { border-spacing:1px}
06:table TR.PARITON:hover { background-color: #337ab7; color: #fff }
07:table TR.PARILLINEN:hover { background-color: #337ab7; color: #fff }
08:table TR.DNS:hover { background-color: #e7e7e7; color: #000 }
09:table TR.DSQ:hover { background-color: #e7e7e7; color: #000 }
10:table TR.DNF:hover { background-color: #e7e7e7; color: #000 }
11:table TR.ULK:hover { background-color: #e7e7e7; color: #000 }
12:th, td { padding: 4px ; }
13:th { text-align:left;font-family:"Helvetica" ;font-size:14px; font-weight:bold ;color:#ff0000; border-bottom: #337ab7 1px solid; }
14:TR.JURY { background-color:#DCDCDC; text-align:left;font-family:"Helvetica" ;font-size:12px; font-weight:bold ;color:#000; border-bottom: #337ab7 1px solid; }
15:TR.PARITON { background-color:#FFFFFF; font-size:90%; line-height:19px; padding-right: 0.5em; width: 24px; height: 27px}
16:TR.PARILLINEN { background-color:#E9E9E9; font-size:90%; line-height:19px; padding-right: 0.5em; width: 24px; height: 27px}
17:TR.SARJA { background-color:#000000; color:#ff0000; font-weight:bold; font-size:16px; line-height:26px; font-family:"Helvetica"; }
18:TR.MAINOS { background-color:LightGreen; width: 90%; font-size:90% ; text-align:center; line-height:19px }
19:TR.DNS { background-color:#FFFFCC; font-size:90%; line-height:19px; padding-right: 0.5em; width: 24px; height: 27px}
20:TR.DSQ { background-color:#FFFF44; font-size:90%; line-height:19px; padding-right: 0.5em; width: 24px; height: 27px}
21:TR.DNF { background-color:#FFFF88; font-size:90%; line-height:19px; padding-right: 0.5em; width: 24px; height: 27px}
22:TR.LPD { background-color:#E0FFFF; font-size:90%; line-height:19px; padding-right: 0.5em; width: 24px; height: 27px}
23:TR.ULK { background-color:#FFFFAA; font-size:90%; line-height:19px; padding-right: 0.5em; width: 24px; height: 27px}
24:TR.EIT { background-color:#FFFFB3; font-size:90%; line-height:19px; padding-right: 0.5em; width: 24px; height: 27px}
25:TR.VARO { background-color:#FF0000; font-size:90%; line-height:19px; padding-right: 0.5em}
26:TR.SUMMA { background-color:#CCCCFF; font-size:90%; line-height:19px; padding-right: 0.5em}
27:.PARITON { background-color:#DDEEB5; font-size:26px }
28:.PARILLINEN { background-color:#FFFFFF; font-size:26px }
29:.SARJA { background-color:#000000; color:#ff0000; font-size:16px }
30:TR.SARJALUETTELO { font-family:"Helvetica"; background-color:#ffffff; font-size:14px; color:#000000; margin-top: 5px; padding-top: 5px; border-top:#337ab7 1px solid;padding-left: 3px;}
31:.SARJALUETTELO { font-family:"Helvetica"; background-color:#ffffff; font-size:14px; color:#000000; margin-top: 5px; padding-top: 5px; border-top:#337ab7 1px solid;padding-left: 3px;}
32:.SUMMA { background-color:#CCCCFF; font-size:14px; line-height:16px; padding-right: 0.5em}
33:.MAINOS { background-color:LightGreen; width: 90%; font-size:16px ; text-align:center; line-height:18px }
34:.VARO { background-color:#FF0000; font-size:16px; line-height:22px; padding-right: 0.5em}
35:.DNS { background-color:#FFFFCC }
36:.DSQ { background-color:#FF8888 }
37:.DNF { background-color:#88FF88 }
38:.CSP { background-color:#EF00C1 }
39:.LPD { background-color:#E0FFFF }
40:.ULK { background-color:#F5F5DC }
41:.EIT { background-color:#FFFFB3 }
42:.logo { color: #FFFFFF; background-color:Green; text-align:center; font-size:10px; font-weight:bold ;}
43://-->
44:</STYLE>
Valtaosa tiedoston riveistä kuvaa miten urheilijan rivi tulostuu eri tilanteissa, normaali tulos, keskeyttänyt,
kilpailun ulkopuolinen, hylätty, jne. Jokaisesta näistä on kaksi määritystä, sekä taulukkoa että ilman taulukkoa
oleville listauksille. PARITON ja PARILLINEN määreet koskevat normaalin tulostuksen rivejä, joka toinen rivi tulostuu
eri värillä. (hover)-sana määritteissä astuu voimaan, kun hiiren osoitin siirretään rivin päälle.
Tässä käyn vain otsikoita koskevat määritykset läpi, muut on helposti pääteltävistä niistä.
Valitsin Kauhajoen Karhun tulostuksiin otsikon taustan väriksi saman värin millä Karhun pää on, mustan,
määreellä (background-color:#000000;).
Tämä on rivillä 17, ilman taulukkotulostusta taas rivillä 29.
Mustalle taustalle tulostuu teksti karhun kielen värillä eli punaisella, sen määre on (color:#FF0000;).
Sama määre on myös rivillä 13, joka koskee yleisesti kaikkia sarakeotsikoita, niissä ExTime käyttää tagia (th).
Rohkeata kokeilua, netin yleistä HTML-opastusta kannattaa käyttää hyväksi,
tämä viittaamani CSS osio on varsinkin erinomainen harjoituksineen.
Sieltä löytyy mm. värien tarkat koodaukset.
Ja tutkikaa ExTimellä tehtyjä tulosteita, pankaa parhaat käytännöt kiertämään.
Sivun lähdekoodin saa näkyviin esimerkiksi Chrome-selaimella hiiren oikean napin avulla (View page source). Esimerkiksi
Pakilan Vedon sivun tulosteissa näkyy taidokasta tyylitiedoston käyttöä. Siitä vain tyylitiedosto leikepöydälle ja omaan käyttöön.
Ja lisää ohjeita löytyy mm. online-tulostuksen ohjeista
sarakkeisiin täältä ja
mainoksiin täältä.
Mitä tästä lyhyestä ohjeesta puuttui tai oli huonosti sanottu ?
Kommentoi.
Takaisin ExTimen ohjeiden sivulle