Moi! Tässä dokumentissa on kurssin tokat tehtävät. Ne ovat luonteeltaan keveämpiä. Tehtävät tehdään pajassa/muualla, mutta tehtävät pitää näyttää pajassa pajaohjaajalle joka merkitsee ne tehdyiksi. Niitä ei voi palauttaa etänä ilman pätevää syytä.
[tehtävän-nimi] Nämäkin tehtävät on numeroinnin sijaan nimetty, ja nimellä tehtäviin voi yksikäsitteisesti viitata (sekä käyttää selaimen haku-toimintoa).
Uutuus: Työvälineessä tehdään HTML5-standardin mukaiset sivut. HTML5 ei varsinaisesti ole valmis, mutta ei se koskaan tulekaan valmiiksi vaan selainvalmistajat ovat hiljalleen lisänneet selaimiinsa HTML5-ominaisuuksia. Sitä voi jo aivan mainiosti käyttää, sillä on enimmäkseen taaksepäin yhteensopiva vanhojen selaimien kanssa.
Mutta: Työvälineessä ei enää tehdä XHTML-standardin mukaista sivustoa. Tästä seuraa, että (HTML5-) sivut kelpaavat helpommin ja lähes virheellisinä validaattorille. Tästä edelleen seuraa, että saatat alkaa tehdä sekavasti rakennettuja sivuja, koska validaattori ei pakota siisteyteen. Ei hätää, ohjaaja pakottaa! Sivujen HTML-koodin tulee olla järkevästi ryhmitettyä ja sisennettyä.
Halutessasi voit tehdä sivusi XHTML5-standardilla. Tällöin tarvitset seuraavat muutokset:
HTML5:n tärkeät uutuudet lyhyesti (tai pitkästi):
Kaikille uusille tiedostoille, joita lisäät public_html -hakemistoon, pitää lisätä lukuoikeudet (a+r). Hakemistoille läpikulkuoikeus (a+x) ja jos haluat tiedostolistauksen internetiin, myös luku (a+r). Jos ei toimi internet-selaimessa (tulee forbidden), syy on lähes aina puuttuvat oikeudet!
HTML-tehtävät rakentuvat enimmäkseen edellisten (HTML-tehtävien) päälle, joten ne kannattaa tehdä n. järjestyksessä. Tietenkin nokkelana opiskelijana huomaat, kun tehtäväpolku vaihtaa ulottuvuutta, ja hyödynnät ulottuvuusepäjatkumon jos nykyinen tehtävä tympii. Onnea matkaan!
Voit testata sivuja haluamallasi selaimella. Suosittelemme Firefoxia tai Chrome/Chromiumia.
[html-eka] Kopioi seuraava sivujesi rungoksi. Talleta kotihakemistosi public_html -hakemistoon nimellä eka.html. Käytä haluamaasi tekstieditoria, suositus on gedit.
<html>
<head>
<title>Mun sivu</title>
</head>
<body>
Tervetuloa Sampu-monin maailmanvalloitussivulle! Voit kirjoittaa tähän mitä itse haluat, ei tarvitse sokkona kopioida tehtävänannon tekstiä (tämä on yliopisto)!
</body>
</html>
Voit myöhemmin vaihtaa pääsivun tiedoston nimeksi index.html, jolloin se näkyy alla annetulla osoitteella suoraan internetiin hakemistolistauksen sijaan, mutta tässä vaiheessa on toivottavaa että internet-selaimella näkee public_html -hakemistosi hakemistolistauksen.
[html-chmod] Laita eka.html näkymään internetiin: http://cs.helsinki.fi/u/tunnus (tunnus on sinun käyttäjätunnuksesi). Tämä tehtiin jo tehtävässä [public_html]!
Paitsi: lisänä [public_html] -tehtävään, haluamme
Ja sitten vielä eka.html:lle lukuoikeudet www-palvelinta varten:
chmod a+r eka.html
Siirry selaimella osoitteeseen http://cs.helsinki.fi/u/tunnus (korvaa tunnus). Pitäisi näkyä hakemistolistaus, jossa eka.html.
[html-h1] Lisää eka.html:ään h1-otsikko, toinen tekstikappale ja tekstikappaleet p-elementtien sisään.
[html-indent] Sisennä HTML-koodi. Tietojenkäsittelijän pitää aina sisentää, ihan kaikki! Eli näin:
<html>
<head>
<title>Mun sivu</title>
</head>
<body>
<h1>…</h1>
<p>…</p>
…
[html-doctype] Lisää eka.html:ään DOCTYPE, joka kertoo sivun olevan HTML5-standardia.
Validoi: html5.validator.nu. Korjaa virheet! Ääkkösten aiheuttaman virhe korjataan seuraavassa tehtävässä.
[ääkköset] Näkyykö ääkköset oikein? Todennäköisesti ei näy, johtuen siitä että laitoksen www-palvelin edelleen legacy-syistä raportoi html-sivujen merkistökoodauksen olevan ISO-8859-1, vaikka maailma on viime vuosina vaihtanut UTF-8:iin.
[html-list] Lisää eka.html:ään HTML-lista, jossa kerrot miksi opiskelet tietojenkäsittelytiedettä. Lisää listaa ennen h2-otsikko "Miksi opiskelen tietojenkäsittelytiedettä?" tms.
[html-img] Lisää sivulle kuva (jättimäisestä robotista). Muista antaa kuvalle pakollinen alt-attribuutti. Jos ei ole omaa kuvaa, käytä Flickeriä tai vaikka Googlen kuvahakua.
Mutta! Molemmista löytyy haku (advanced search) Creative Commons -lisensoiduille kuville. Käytä sivullasi vain kuvia, joiden lisenssi sallii (epäkaupallisen) uudelleenkäytön! Usein tällöin vaaditaan attribuutio, eli kuvan alkuperäisen lähteen/tekijän ilmoittaminen. Tällaiseksi riittää linkki sivulle, josta kuva alunperin on peräisin. Yliopistolla sinun odotetaan osaavan tällaiset asiat!
[css] Lisää eka.html:n head-elementin sisään seuraava style-elementti (oikein sisennettynä):
<style type="text/css">
body {
font-family: Helvetica, Arial, sans-serif;
background-color: #efc;
margin-left: 4em;
margin-right: 20%;
}
h1 {
border-bottom: thin solid gray;
}
</style>
[css-p] Lisää sivun ensimmäiseen p-elementtiin class-attribuutti:
<p class="ingressi">…</p>
Sekä vastaava CSS-valitsin. Löytyy HTML dogin "CSS Intermediate" -osiosta! Aseta ingressi kursivoiduksi. Voit toki muutenkin muutella tyylejä kuten haluat.
[html-section] Nyt seuraa HTML5:n isoimpia uutuuksia. Rakennetta (dokumenttitasoja) ei enää tehdä pelkästään h1…h6 -elementeillä, vaan uusilla rakenne-elementeillä. Ks. Mozilla-devin mainio artikkeli.
Sivullasi pitäisi olla ennestään ainakin yksi h1- ja h2-otsikko. Lisää sivulle section-elementtejä siten, että h1-otsikko on yhden section-elementin sisällä, ja h2-otsikko kahden section-elementin sisällä. Muista taas sisentää. Siis näin:
<section>
<h1>…</h1>
…
<section>
<h2>…</h2>
…
</section>
</section>
Muuttuiko mikään selaimessa? Onko html-koodi nyt parempi/huonompi? Validoi!
[html-footer] Lisää sivun loppuun (section-elementtien ulkopuolelle) footer-elementti (alatunniste), jonka sisällöksi "Tämä oli Samulin Työväline-sivu 2011" tms. Ks. footer- ja muiden elementtien merkitys.
[html-time] Lisää footer-elementtiin "viimeksi muokattu" time-elementti ja siihen sekä päiväys että kellonaika.
Tämän voi myös automatisoida ja voit tehdä sen vaikka tehtävän [ssi] ohessa!
[inspector] Avaa Chromen/Chromiumin web inspector ja/tai asenna Firefoxiin mainio Firebug-lisäosa. Chrome: Jakoavain→Tools→Developer Tools. Inspectorin saa molemmissa (kaikissa) selaimissa näkyviin myös oikea-klikkaamalla mitä tahansa sivun osaa ja "Inspect Element".
Valitse inspektorista h1-elementti ja vaihda sen css-ominaisuuksista alareuna (border-bottom) pois päältä. Reunaviivan pitäisi kadota selaimessa näkyvästä dokumentista välittömästi!
Inspektorilla on kätsy tehdä nopeita testejä/muutoksia html-koodiin, css-tyyleihin kuin myös javascriptiinkin.
[html-toka] Tee uusi (tyhjä) HTML-tiedosto: toka.html. Kopioi nykyinen eka.html pohjaksi. Poista vanha sisältö (kaikki body-elementin sisällä oleva). Lisää tilalle vaikkapa: "Tällä sivulla listaan ja kuvailen kissani/matokompostin matoni/islanninhevoseni/jättimäiset robottini/tähtien sota -figuurini kuvineen." Validoi.
OBS. toka.html:lle pitää jälleen antaa tarvittavat lukuoikeudet, jotta se tulee näkyviin internetiin. Ks. tehtävä [html-chmod].
[css-link] Huomasit, että samat CSS-tyylit ovat nyt molemmissa HTML-tiedostoissa? Ei oo kivaa, tietojenkäsittelijä ei ylläpidä duplikaatteja.
Tee uusi tiedosto: tyylit.css. Poista style-elementti (alkutagista <style> lopputagiin </style>) molemmista HTML-tiedostoista ja siirrä style-elementin sisältö (alku- ja lopputagin välissä olevat rivit) tiedostoon tyylit.css. Linkitä tyylit.css molempiin HTML-tiedostoihin:
<link rel="stylesheet" type="text/css" href="tyylit.css" />
Myös tyylit.css tarvitsee lukuoikeudet. Tarkista että CSS-tyylit toimivat edelleen, molemmissa HTML-tiedostoissa. Validoi.
[html-stuff] Lisää toka.html:ään rutosti tekstiä. Otsikko, tekstikappaleita, listoja, copy-pastea, päivän fiiliksiä. Sekä kaksi kuvaa. Toinen sivun (tekstin) alkuun, toinen puoleenväliin. Näyttää n. tältä (pseudo-html):
H1. Jättimäiset robotit tms. sinua kiinnostava aihe
(kuva 1)
p. Tällä sivulla lisää jättimäisiä robotteja nimineen ja kuvineen! Tsuippaduippa! Teksti jatkuu vailla päämäärää, lalalalalalalala. Älä käytä lorem ipsumia, se saa ohjaajat kiukkuiseksi. (kuva 2) Teksti jatkuu. Tarvitset vielä pikkiriikkisen tekstiä, jotta se täyttää koko selainikkunan. Sen on syytä täyttää koko selainikkuna, jotta seuraava tehtävä onnistuu. Onnea matkaan!
[css-float] Laita kuvat kellumaan! Lisää img-elementteihin CSS-luokkia seuraavasti. Ensimmäiseen kuvaan <img class="vasen" … /> ja toiseen kuvaan <img class="oikea" … />.
Lisää vastaavat CSS-valitsimet tyylit.css:ään. Sitten kuvat kellumaan (float)!
Kelluta vasen-luokkaiset vasemmalle ja oikea-luokkaiset oikealle. Jos menee oikein, teksti rullaa kuvien välissä ja jatkuu automaattisesti kuvan alle. (Jos rullaa liian lähellä kuvaa, laita enemmän marginaalia. Kuvalle vai tekstille?)
[html-a] Linkitä eka.html→toka.html, eli lisää eka.html:ään a-elementti, joka vie toka.html:ään. Käytä suhteellisia URL-osoitteita (eli pelkkiä tiedostonimiä, kun tiedostot ovat samassa hakemistossa).
Lisää samalla (toinen) linkki lempparisivustollesi, vaikka galtsuprofiiliisi ja heppasivulle. Tai jopa blogiisi. Jotta linkki on kiinnostava, sen on syytä viedä johonkin itse tuottamaasi sisältöön, tai vaihtoehtoisesti vaikeasti löydettävällä esoteeriselle herkkusivustolle.
[html-kuvat] Kopioi/siirrä eka.html:n viittaama kuva (internetistä) paikalliseen public_html -hakemistoosi, alihakemistoon nimeltä kuvat. Vaihda html-koodin kuva viittaamaan paikalliseen kopioon. Tarkista että toimii. Muista lisätä uudelle hakemistolle ja kuvalle tarvittavat oikeudet!
[html-table] Lisää vielä toka.html:ään taulukko (table), jossa luettelet listaamiesi robottien/eläinten/figuurien ominaisuudet: pituus, paino, väri, erikoisase, millaista ääntä pitää, odotettu elinikä, vaarallinen kyllä/ei, elinympäristö (aavikko, metsä, suo, kaupunki).
Taulukot ovat hyödyllisiä taulukoitavalle datalle. Ne eivät ole hyödyllisiä ulkoasun asemointiin. Taulukkodatan tunnistaa siitä, että kullekin sarakkeelle (ja riville) keksii otsakkeen. Tässä otsakkeet ovat yllä luetellut roboeläin-ominaisuudet. Laita otsakkeet th-elementteihin.
[http-telnet] Hupitehtävä: lataa eka.html laitoksen internetistä telnet-ohjelmalla.
Komenna seuraava päätteessä. Pitää olla nopea, tai laitoksen www-palvelin katkaisee yhteyden, joten copy-pastea telnet-komennon jälkeen syötettävät kaksi riviä tekstieditoriin, korvaa tunnus ja kopioi leikepöydälle. Tilaisuuden tullen pastea päätteeseen!
telnet cs.helsinki.fi 80
GET /u/tunnus/eka.html HTTP/1.1
Host: cs.helsinki.fi
(2x enter)
Siistiäkö? No on! Näin www-selain hakee sivut. Nyt voit tehdä oman www-selaimen!
[html-nav] Lisää eka.html:n alkuun (body-elementin ensimmäiseksi sisällöksi) nav-elementti ("navigaatiopalkki"), ja sen sisällöksi linkit (a-elementit) sisuston muille sivuille (eka.html, toka.html). Eli näin:
<nav>
<a ...>Eka sivu</a>
<a ...>Toka sivu</a>
</nav>
Lisää myös nav-elementille css-tyylit niin, että nav-elementillä on hieman tummempi tausta (kuin body-elementillä) ja hieman paddingia, jotta tummennetun taustan reuna on sopusuhtainen. Bonus: poista nav-elementiltä marginaalit niin, että se alkaa heti sivun vasemmasta yläreunasta.
[html-ssi] Seuraavaksi haluamme navigointilinkit myös toka.html:ään, mutta! Ei oo mitään järkeä ylläpitää samaa sisältöä usealla sivulla. Kun lisäät uuden sivun sivustoon (kolmas.html), joudut päivittämään kaikki vanhat sivut. Sivun lisäyksen kuuluu olla O(1), ei O(n).
Teemme tempun. Siirrä nav-elementti (sisältöineen) uuteen tiedostoon nav.html. Lisää eka.html:ään kohtaan, jossa nav-elementti oli, seuraava rivi:
<!--#include virtual="nav.html"-->
Lisää nav.html:lle lukuoikeudet kuten aiemminkin. Lisäksi kaikille sivuille joilla käytät SSI #include -komentoa (eka.html, toka.html), pitää lisätä suoritusoikeus sinulle:
chmod u+x eka.html
Lisää include-komento ja x-oikeudet myös toka.html:lle.
<!-- normaalisti tämä on HTML-kommentti, jota selain ei renderöi näkyviin -->, mutta www-palvelin tulkitsee #-alkuiset kommentit SSI-komennoiksi, jos html-tiedostolla on suoritusoikeus (u+x).
[css-nav] Lopuksi viimeistelemme tekemäsi navigaatiolinkit. Peruskäyttöliittymäopit sanoo, että valitun (nykyisen) sivun navigaatiolinkin tulee olla korostettu, jotta sivuston vierailija tietää missä on.
Jos nav-elementti olisi kopioituna kaikille sivuston sivuille (eikä eriytettynä nav.html:ään), korostuksen voisi lisätä helpommin mutta työläämmin jokaiselle sivulle erikseen. Korostuksen voisi tehdä myös SSI-komennoilla, muttei järkevästi, koska SSI sisältää ainoastaan ehtolauseen (if), ei toistolausetta (for). SSI ei siis ole Turing-täydellinen.
Teemme ovelan CSS-tempun:
Nyt uuden sivun lisäys (kolmas.html, …) on yhä vakioaikainen operaatio, mutta sivun lisäämisen nav.html:ään lisäksi vaatii yllä tehdyt kolme erillistä muokkausta.
[javascript-nav] Käyttöliittymäopit sanovat myös, että valittu navigaatiolinkki ei saa olla linkki. Tämä ei ole yhtä vakavaa kuin valitun korostus, joten teemme linkin poiston läpällä JavaScriptillä. Tällöin se ei toimi esim. monessa mobiiliselaimessa, joissa JavaScriptiä ei ole.
Kopioi seuraava valmis+toimiva JavaScript-koodi sivustollesi sinne minne se kuuluu (linkki vaihdettu 7.10.).
document.addEventListener("DOMContentLoaded", function() {
// dokumentin KAIKKI a-elementit
linkit = document.getElementsByTagName("a");
for (var a = 0; a < linkit.length; a++) {
if (document.location.href.match(linkit[a].href)) {
// a-elementti ilman href-attribuuttia on validi
linkit[a].removeAttribute("href");
}
}
}, false);
Testaa että toimii. Tarkista myös Chromen web inspectorin/Firefoxin firebugin console-välilehdeltä, ettei tule JavaScript-virheitä!
Bonus: jos innostuit, vaihda valitun navigaatiolinkin korostus (tehtävä [css-nav]) JavaScriptin hoidettavaksi. Helppo lisätä yllä olevaan koodiin!
Oikeasti sivustoja (ainakin isompia) tehdään template-pohjaisilla sisällönhallintajärjestelmillä (CMS), kuten Wordpress. Tällöin valittujen linkkien korostuksesta ja muista tärkeistä mutta pienistä asioista ei tarvitse itse huolehtia. Yliopisto tarjoaa kaikille (myös opiskelijoille) Wordpress-pohjaisen blogijärjestelmän: blogs.helsinki.fi.
Taulukkolaskentatehtävät voit tehdä haluamallasi taulukkolaskentaohjelmalla. Suositus on Google Docs. Muita: LibreOffice, Microsoft Office, Apple Numbers.
Taulukkolaskentafunktioiden toiminta on enimmäkseen sama eri ohjelmissa, joten voit usein soveltaa internetistä löytyvää OpenOffice/Excel -ohjetta myös Googleen (ja toisin päin).
Google: http://docs.google.com/support/
OpenOffice: http://wiki.services.openoffice.org/wiki/Documentation
LibreOffice: http://www.libreoffice.org/get-help/documentation/
Vinkkikokoelma: http://openoffice.blogs.com/
Google Docsin funktiolistaa kannattaa pitää koko ajan esillä.
[taulukko-alku] Viitteitä ja solujen kopiointia.
Taulukkolaskennan kaavat aloitetaan yhtäsuurikuin-merkillä (=). Kaavoissa viitataan muihin soluihin soluviitteillä: B2 (yksi solu), B2:B10 (1-ulotteinen taulukko), B2:D10 (2-ulotteinen taulukko).
Viittaukset ovat oletuksena suhteellisia: jos kopioit kaavan viereiseen soluun, viittaus kasvaa vastaavasti yhdellä. Absoluuttisia viittauksia saa dollarimerkillä ($): $B2 (sarake B ei muutu kaavaa kopioitaessa), B$2 (rivi 2 ei muutu kaavaa kopioitaessa) tai $B$2.
Käynnistä Google Docs (tai valitsemasi muu taulukkolaskentasovellus). Tee uusi taulukkolaskentadokumentti (spreadsheet). Lämmittele seuraavilla operaatioilla. Jos osaat jo, voit skipata.
[taulukko-verirahat 1/4] Matti ja Sampe ovat seikkailleet Berliinissä. Tutustu oheiseen muistivihkosta kopioituun kahden kaverin verirahalistaan:
What? Matti-Sampe
ab-lippu 2,1
Wombats kalja -2,8
Sushi 9
8mm tequila -2
Yesterday 2,8
Taxi -4,5
Aamiainen 11,5
Pumpattava octo -7,5
Sampe maksaa: 4,30 €
Listassa Matin maksamat huvit ovat plussaa, Sampen maksamat miinusta. Kun oletetaan, että kumpikin on osallistunut hupeihin tasan (puolet+puolet), saadaan tasaussumma kaavalla sum(ostokset)/2.
Laajenna lista kolmen tai useamman kaverin tasauslistaksi! Nyt positiivinen/negatiivinen -avaruuden binääriulottuvuus ei riitä, vaan tarvitaan lisää logiikkaa.
Luo aiempaan Google-taulukkolaskentadokumenttiin uusi taulu (sheet) alareunan painikkeilla. Kopioi sinne ylläoleva lista. Pelkkä What-sarake riittää.
[taulukko-verirahat 2/4] Laita Sampe omaan sarakkeeseensa. Lisää myös kolmas ja neljäs henkilö (heille nimeksi mielikuvitusystäväsi).
Poista kaikki numerot. Lisää seuraavat kaksi:
Vaihda B-sarakkeessa olevan summan "4,30 €" tilalle toimiva summakaava: "=sum(B2:B10)". Summaksi pitäisi tulla 2.
Kopioi kaava muiden henkilöiden sarakkeisiin (solun oikean alakulman pienestä laatikosta raahaamalla). Pitäisi tulla "2 2 0 0".
[taulukko-verirahat 3/4] Lisää seuraavat kaavat:
OBS: koska tavoitekeskiarvo on vain yhdessä solussa, siihen on viitattava absoluuttisella soluviitteellä, jotta maksettavaa-kaavan voi kopioida muille henkilöille automaattisesti. Jos tavoitekeskiarvo on solussa F12, absoluuttinen viite siihen on "$F$12".
[taulukko-verirahat 4/4] Nyt jo keksit: kunkin henkilön yli/alijäämä on suoraan se, paljonko henkilön maksama summa eroaa tavoitekeskiarvosta.
Lisää jokaiselle "maksettavaa" -kaava, joka kertoo erotuksen tavoitekeskiarvosta. Pitäisi näyttää n. tältä:
What? | Matti | Sampe | Eero | Peke | |
ab-lippu | 2 | ||||
Wombats kalja | 2 | ||||
Sushi | |||||
8mm tequila | |||||
Yesterday | |||||
Taxi | |||||
Hostelli | |||||
Aamiainen | |||||
Pumpattava octo | |||||
TOT | 2 | 2 | 0 | 0 | 4 |
/4 | 1 | ||||
maksettavaa | -1 | -1 | 1 | 1 |
Nyt (vata nyt) voit lisätä lisää lukuja listaan. Tarkista aina lisäyksen jälkeen, että kaavat toimivat oikein. Erityisesti: kaikkien henkilöiden maksettavaa-lukujen summa pitäisi olla nolla (0)!
Valmis! Tämä taulukko ei ota kantaa siihen, kenelle kukin henkilö maksaa velkansa. Mahdollinen prosessi voisi olla, että ensin kaikki velkaa olevat maksavat yhteiseen rahakasaan, ja sitten kaikki rahaa vailla olevat ottavat yhteisestä kasasta sen verran, kuin heille kuuluu. Lisäksi yhä oletetaan, että kaikki henkilöt ovat osallistuneet ostoksiin tasasuhteessa, mikä ei varmasti kaikkien hupiostosten kohdalla toteudu.
[taulukko-opsu 1/4] Tehdään pieni opintosuunnitelma-historia. Näyttää lopuksi n. tältä. Kuvassa on suoritettu syksyllä 2011 kurssit Työväline ja TVT-ajokortti, sekä keväällä 2012 kurssi JTKT.
kurssi | op | x | syksy 2011 | kevät 2010 | kesä 2012 | ... | |
Työväline | 1 | 1 | x | ||||
TVT-ajokortti | 3 | 1 | x | ||||
JTKT | 6 | 1 | x | ||||
Ohpe | 5 | 0 | |||||
Ohja | 4 | 0 | |||||
... | 0 | 0 | |||||
TOTAL (op) | 10 | /19 | 3 | 4 | 6 | 0 |
Tee aiempaan taulukkolaskentadokumenttiisi uusi taulu (sheet). Syötä/kopioi ylläoleva.
Kavenna liian leveitä sarakkeita, ainakin op- ja x-sarakkeita, joiden sisältö tulee aina olemaan enintään kolme merkkiä.
[taulukko-opsu 2/4] Laita x-sarakkeeseen (op- ja syksy 2011 -sarakkeiden välissä) kaava, joka laskee kurssin suoritusten lukumäärän, eli kyseisen kurssin riviä oikealle päin mentäessä tulevat x-kirjaimet. Funktio counta on ratkaisu (voit laskea myös muut kirjaimet/numerot kuin x:t, kunhan tyhjiä ei lasketa). Käytännössä siis x-sarakkeen arvo on aina 0 tai 1.
Vaihda koko x-sarakkeen tekstin väriksi harmaa, koska se on luonteeltaan apusarake.
[taulukko-opsu 3/4] Laita TOTAL-riville kaavat, jotka laskevat seuraavaa:
[taulukko-opsu 4/4] Itse asiassa, kun yllä laitettiin syksy-kevät-kesä -sarakkeiden TOTAL-riville x-merkintöjen summa (eli montako kurssia suoritettiin kyseisenä lukukautena), niin kiinnostavampaa on suoritettujen opintopisteiden määrä!
Vaihda syksy-kevät-kesä -sarakkeden TOTAL-riville kyseisenä lukukautena suoritettujen opintopisteiden määrä. Menee samoin sumif-kaavana kuin yllä suoritettujen opintopisteiden yhteismäärä, mutta jotta voit kopioida kaavaa kaikkiin (tuleviinkin) lukukausisarakkeisiin, tarvitset absoluuttisen soluviitteen op-sarakkeeseen.
Wordiin ja muhin tavanomaisiin tekstinkäsittelyohjelmiin kyllästyneille on olemassa myös toinen vaihtoehto: LaTeX. Siinä missä HTML on koodarin tapa tehdä nettisivuja, LaTeX on koodarin (ja tieteentekijän) tapa tehdä dokumentteja.
Erityisesti matematiikan kirjoittamiseen se soveltuu hyvin, mutta sillä on myös erittäin helppo toteuttaa tieteellisen kirjoittamisen perusasiat: automaattinen sivunumerointi, sisällysluettelo, kansilehti ja lähdeluettelo. Näihin kaikkiin on LaTeXissa hyvin yksinkertaiset käskyt, joiden kanssa ei tarvitse miettiä juurikaan.
Vastapainoksi joidenkin asioiden tekeminen LaTeXilla on vaikeampaa. Esimerkiksi kuvien täsmällinen sijoittelu vaatii harjoittelua, eikä kielen kaikkia hienouksia opi aivan yhdessä illassa.
Hyvä lähdeteos aiheeseen on mm. Timo Hellgrenin suomentama pitkänpuoleinen johdatus LaTeX:n käyttöön. Wikibooksin LaTeX-oppaat kelpaavat myös hyvin opetteluun ja referenssiksi.
Jos haluat opetella LaTeXin käyttöä enemmänkin, niin kannattaa etsiytyä matematiikan laitoksen LaTeX-kurssille, joka järjestettäneen jälleen ensi vuoden keväällä.
Laitoksen Ubuntuissa LaTeX on valmiina, ja sen saa myös Windowsille / OS X:lle: http://www.latex-project.org/ftp.html
[latex-pohja] Luo kotihakemistoosi (mielellään uuteen hakemistoon) oma.tex-niminen tiedosto ja kopioi siihen seuraava LaTeX-dokumenttipohja:
\documentclass[a4paper, 12pt, finnish]{article}
\usepackage{babel}
\usepackage[utf8]{inputenc}
\usepackage[T1]{fontenc}
\title{\LaTeX-esimerkki}
\author{Tarmo Tavaramerkki}
\date{21.9.2011}
\begin{document}
\maketitle
\LaTeX{} on \textbf{ladontajärjestelmä}, joka rakentuu \TeX{}-järjestelmän päälle. Se huolehtii automaattisesti esimerkiksi rivin- ja sivunjaosta, kuvien ja taulukoiden asettelusta, dokumentin sisäisistä viittauksista ja sisällysluettelosta. Erityisesti \LaTeX{} soveltuu \textit{matemaattisen} materiaalin julkaisuun:
% Tämä on kommentti, eikä näy lopullisessa dokumentissa.
\end{document}
Käännä tämän jälkeen dokumenttisi pdf-tiedostoksi komentamalla terminaalissa:
pdflatex oma.tex
Kääntäjä suoltaa ilmoille aika suuren kasan kaikennäköistä informaatiota. Jos käännös onnistui, pitäisi hakemistoon ilmestyä oma.pdf, jonka pitäisi olla melko samannäköinen kuin mallitiedosto.
[latex-section] Lisää dokumenttiin lisää tekstiä ja tee siihen kappaleita käyttämällä \section-komentoa. Komento ottaa parametrina vastaan kappaleen otsikon tyyliin:
\section{Johdanto}
Lisää myös dokumenttiisi sisällysluettelo käyttämällä komentoa \tableofcontents heti
\maketitle:n jälkeen. Voit halutessasi erotella sisällysluettelon omalle sivulleen käyttämällä komentoa \newpage.
Käännä dokumenttisi uudestaan. Saatat joutua kääntämään sen toisen kerran, ennen kuin sisällysluettelo päivittyy kunnolla. LaTeX on tässä hieman kankea.
[latex-math] Lisää dokumenttiisi matemaattisia kaavoja. Vaikka toisen asteen yhtälön ratkaisukaava. Jotta saisit matematiikan toimimaan tarvitset dokumentin alkuun uuden komennon: \usepackage{amsmath}
Tämä komento ottaa käyttöön perusmatematiikan tarvitsemat LaTeX-komponentit. Tämän jälkeen voit kirjoittaa matemaattisia lausekkeita joko tavallisen tekstin sisään käyttämällä \(- ja \)-komentoja:
Tavallista tekstiä ja yhtälö \( y = x^2 \), joka kuvaa paraabelia.
tai omalle rivilleen \[- ja \]-komennoilla: \[ E = mc^2 \]
[latex-graphicx] Lisää vielä dokumenttiisi kuvia. Kuvien käyttäminen ja sijoittelu on LaTeXilla astetta hankalampaa. Alkuun pääsee ottamalla usepackagella käyttöön paketin graphicx.
Tämän jälkeen voit käyttää komentoa \includegraphics{tiedostonimi} kuvatiedoston liittämiseksi dokumenttiisi. Tiedostonimen pitää olla ilman tiedostopäätettä. LaTeX osaa silloin etsiä kuvatiedostoja ainakin jpg-, png- ja pdf-formaateissa. Kokeile myös liittää kuvillesi kuvatekstejä ja kelluttaa niitä.