Työväline tehtävät viikko 2: HTML(5) ja CSS

HUOM! TÄRKEÄÄÄ!!!

Kurssin toisen viikon tehtävät. Ne ovat luonteeltaan keveämpiä kuin ekan viikon tehtävät. TEE TEHTÄVÄ CSFS kotihakemistoon. Pääset CSFS-kotihakemistoon viime viikon symbolisen linkin kautta tai kirjautumalla jollekin etäpalvelimista tunnus@cs käyttäjällä. ssh -l tunnus@cs shell.cs.helsinki.fi

Työvälineessä tehdään HTML5-standardin mukaiset sivut. HTML5 on ihana ja toimii nykyisin jopa mobiiliselaimissa.

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:

Tiedostopääte .html→.xhtml (tai .htaccess "AddType application/xhtml+xml .html")
<!doctype html> → <!DOCTYPE html> (tai ei doctypea ollenkaan)
<html lang="fi"> → <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fi">
(X)HTML5-validaattori: http://html5.validator.nu/

HTML5:n tärkeät uutuudet (lyhyesti tai pitkästi):

Uudet rakenne-elementit: section article aside nav. Ei enää divejä!
Uudet multimedia- ja grafiikkaelementit: video audio canvas svg.
Tyhjät elementit saavat sisältää tai olla sisältämättä "/" ennen ">":

<img src="kissahevonen.jpg" alt="kissa vai hevonen?" />

Mutta niille ei saa laittaa lopputagia: </img>.

Materiaalia

HTML Dogin tutoriaalit (HTML ja CSS) ovat lupsakoita ja perusteellisia. Suositellaan selattavaksi sivuja tehdessä! Tutoriaaleissa tehdään XHTML-sivuja, mutta ne on helppo soveltaa HTML5-sivuiksi (korvaa alun pitkä DOCTYPE lyhyellä HTML5-doctypellä).
Erityisesti HTML5:n uudet ominaisuudet: Dive into HTML5, HTML5 Doctor.
W3-konsortion sivuilta löydät alkuperäiset, kattavat standardit: HTML5 ja CSS(3).
Validoi sivusi! HTML5-validaattori (myös W3:n validaattori käy), CSS-validaattori.

Huomiot

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 Chrome/Chromiumia tai Firefoxia.

[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 Dogen 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

index.html-tiedoston pois tieltä:
- cd ~/public_html
- mv index.html vanha_index.html
public_html -hakemiston hakemistolistauksen näkyviin internetiin:
- chmod a+r . (huomaa piste)

OBS. tätä ei todnäk tarvitse tehdä uusille public_html -hakemistoille.

Siirry päätteessä public_html -hakemistoon ja komenna vanha tuttu ls -la. Pohdi onko tiedosto-oikeudet riittävät laitoksen www-palvelimelle. WWW-palvelin kuuluu ryhmään o(thers). Tutoriaali aiheesta. Asiaan palataan vielä kolmannella viikolla.

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: http://html5.validator.nu. Korjaa virheet! Ääkkösten aiheuttaman virhe korjataan seuraavassa tehtävässä.

[ääkköset]

Tee tämä tehtävä vaikka ääkköset toimisivatkin suoraan.

Laita ääkköset toimimaan ja niin että itse tiedät mistä on kyse.

Lisää eka.html:ään ääkkösiä jos ei jo ole. Voit myös lisätä läpällä erikoismerkkejä. Tallenna.
Katso mikä eka.html:n merkistökoodaus on.
- gedit näyttää koodauksen, kun hoveroit hiirtä tiedoston tabin päällä
- päätteessä komento file näyttää tiedoston tyypin ja koodauksen:
  
  tunnus@melkinkari:~/public_html$ file -i *
  
  eka.html: text/html; charset=utf-8
- ihana curl raportoi www-palvelimen ilmoittaman koodauksen (otsake Content-Type):
  
  curl -I http://www.cs.helsinki.fi/u/tunnus/eka.html
- www-selain raportoi tunnistamansa merkistökoodauksen, ainakin Firefox: View > Character Encoding
Näkyykö ääkköset www-selaimessa oikein?

Tällä kurssilla ja maailmassa muutenkin käytetään UTF-8 -merkistökoodausta. Ainakin gedit tallentaa oletuksena näin. Sen sijaan HTTP-protokolla määrittelee oletuskoodaukseksi vanhan ISO-8859-1, ja tämän johdosta pitää määritellä että käytämmekin utf-kasia.
Korjaa ääkköset toimimaan.

Ääkköset voi korjata kahdella tavalla:
1. .htaccess, jonka voi laittaa vaikka hakemistoon ~/public_html, jolloin se pätee kaikkiin html-dokumentteihisi laitoksen www-palvelimella
2. meta charset, joka täytyy laittaa jokaiseen html-dokumenttiin erikseen
3. (oikeasti on myös lisää vaihtoehtoja)

[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 pörhyliäisestä kissasta. Muista antaa kuvalle pakollinen alt-attribuutti. Jos ei ole omaa kuvaa, käytä Flickriä tai vaikka Googlen kuvahakua. SVG-muotoisen kuva on kiva lisä.

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ä sivun otsikko on suoraan bodyn alla, mahdolliset loput h1-otsikot on yhden section-elementin sisällä, h2-otsikot kahden section-elementin sisällä j n e . Muista taas sisentää. Siis näin:

<h1>DOGEN MAAILMANVALLOITUSSIVU</h1>

<section>
  <h1>…</h1>
  …

  <section>
    <h2>…</h2>
      …
  </section>

  … 
</section>

Muuttuiko mikään selaimessa? Onko html-koodi nyt parempi/huonompi? Validoi!

Katso myös HTML5 outlinerilla, että otsikkorakenne on oikein.

Ps. mahdollisesti article-elementti on tilanteeseen sopivampi kuin section.

[html-section-h1]

Nyt kun jaoit dokumentin osioihin sisäkkäisin section-elementein, tehdään ihana automaattista dokumenttien generointia tukeva muutos: vaihda kaikki otsikot h1-elementeiksi.

Section-elementtien pitäisi pitää huoli siitä, että otsikkorakenne/hierarkia on oikein. Tarkista outlinerilla HTML5.

Mutta! Nyt aiempi CSS-tyyli h1-otsikoille meni rikki, koska kaikki otsikot ovat h1. Korjaa CSS-tyylit niin, että ainoastaan ensimmäinen (uloin) h1-otsikko saa alareunaviivan.

[html-footer]

Lisää sivun loppuun (section-elementtien ulkopuolelle) footer-elementti (alatunniste), jonka sisällöksi "❤ DOGEN työväline-sivu 2015 ❤" 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 myöhemmin tehtävän [http-ssi] ohessa!

[inspector]

Avaa Chromen/Chromiumin web inspector ja/tai asenna Firefoxiin mainio Firebug-lisäosa. Chrome: Jakoavain→Tools→Developer Tools. Tai ctrl + shift + i, tai F12. 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. En voi tarpeeksi kehua miten mahtava työkalu inspector/Firebug on! Se on mahtava!

[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/ponikokoelmani/islanninhevoseni/pokemon-korttini/jättimäiset robottini/tähtien sota -figuurini kuvineen." Validoi.

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

[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ää pseudo-html:nä noin tältä:

section.

h1. Pörhyliäiset kissat tms. sinua kiinnostava aihe

img.

p. Tällä sivulla lisää pörheitä kissoja nimineen ja kuvineen! Tsuippaduippa! Teksti jatkuu vailla päämäärää, lalalalalalalala. Älä käytä lorem ipsumia, se saa ohjaajat kiukkuiseksi. img. 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!

Ps. validoi!

[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, heppasivulle tai blogiisi. Jotta linkki on kiinnostava, sen on syytä viedä johonkin itse tuottamaasi sisältöön, tai vaihtoehtoisesti vaikeasti löydettävällä esoteeriselle herkkusivustolle.

voit myös antaa tiedostoille merkitykselliset nimet eka/toka sijaan.

[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. Helpoin tapa ladata kamaa internetistä kun tiedät URLin, on päätteessä wget tai curl.

[html-table]

Lisää vielä toka.html:ään taulukko (table), jossa luettelet listaamiesi kissojen/robottien/eläinten/figuurien ominaisuudet: pituus, paino, väri, erikoisase, millaista ääntä pitää, odotettu elinikä, vaarallinen kyllä/ei, elinympäristö (aavikko, metsä, suo, kaupunki), karvaisuusaste jne.

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.

[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) sivuston 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.

Ps. jos tarkistat tämän tehtävän jälkeen HTML5 outlinerilla otsikkorakenteen, on ilmestynyt mystinen untitled section. Mistä on kyse?

[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. Alla muokattuna siten, että nav-alkuiset id:t on korvattu classeilla.

Lisää jokaisen sivun (eka.html, toka.html) body-elementtiin id-attribuutti, jossa sivun nimi: <body id="eka">
Lisää sitten nav.html:ään jokaiseen a-elementtiin class-attribuutti samalla nimellä ("eka", "toka").
Lopuksi lisää tyylit.css:ään CSS-valitsimet, jotka täsmäävät kaikkiin (a-)elementteihin, joiden class-attribuutti on sama kuin body-elementin id-attribuutti
```
#eka .eka, ... {
  ... (tähän niitä korostuksia, ainakin lihavointi)
}
```

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. vanhoissa mobiiliselaimessa, joissa JavaScriptiä ei ole.

Kopioi seuraava valmis+toimiva JavaScript-koodi sivustollesi sinne minne se kuuluu. Omaan .js-tiedostoon laittaminen on suositeltavaa.

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: http://blogs.helsinki.fi.

[html-video]

Lisää sivustoosi HTML5 video-elementti. Linkistä löytyy suora esimerkki. Laita video-elementtiin kontrollit, jotta voit play/pause/fullscreen.

Voit tuottaa videotiedoston itse tai etsiä internetistä. Esim. YouTubesta saa kopioitua videoita puolistandardissa webm-muodossa asentamalla selaimeen esim. YouTube Video Download -lisäosan. Videoiden latailu ei välttämättä ole YouTube käyttöehtojen mukaista toimintaa.

Videon julkaisuun pätee sama juttu kuin kuvien julkaisuun, eli sinulla täytyy olla julkaisulupa. Kyllä, verkkosivun tekeminen internetiin on julkaisemista. Tervetuloa yliopistoon!

Kun ihmettelet miksei video toimi selaimessa, tarkista eri selainten formaattituki. Laitoksen Chromiumissa ja Firefoxissa toimii webm.

BOOM. Alla ylimääräistä pohdintaa videon tuottamisesta.

Noniin! Jos innostuit (JA KUKA EI OIS INNOSTUNUT???), tässä ehdotuksia oman videon tuottamiseen. Ubuntulla kaikki vaihtoehdot tuottaa ogv-videoita, jotka toimivat Chromessa ja Firefoxissa.

Videokamera ja editointiohjelma
1. Ubuntu: PiTiVi
2. OS X: iMovie
3. Windows Live Movie Maker
Web-kamera, tallenna video esim.
1. Ubuntu: Cheese
2. OS X: iMovie (Photo Booth ei taida osata videota)
3. Windows: jotain tulee varmaan mukana?
Screencast, eli tallenna tietokoneen "näytön" tapahtumia
1. Ubuntu: recordmydesktop (laitoksella valmiina terminaalissa)
2. OS X: QuickTime Player
3. Windows: ehkä ilmainen & vapaa CamStudio?

Tarjoa videosi ainakin mp4- ja ogv/webm-muodoissa, niin ]toimii lähes kaikissa selaimissa](http://en.wikipedia.org/wiki/HTML5_video#Browser_support). FFmpeg ja MEncoder hoitaa formaattimuunnokset (varauksin). Esim:

mp4→ogv: ffmpeg -i in.mp4 -acodec libvorbis out.ogv

Oletuksena ffmpeg tekee surkeaa laatua videon bittinopeutena 200 k/s. Haluat ehkä määritellä bittinopeudet (lähdevideon mukaan), esim: -vb 2000k -ab 200k
ogv→mp4: mencoder in.ogv -of lavf -lavfopts format=mp4 -ovc x264 -oac faac -o out.mp4

(mencoder osaa vähemmän kohdeformaatteja)
→webm: ffmpeg -i in.xxx out.webm

Surkea oletuslaatu & bittinopeusjutut pätee yhä.

FFmpeg ja MEncoder osaavat myös kaiken mahdollisen muun videoiden prosessointiin liittyvän. Hyödyllisiä tässäkin tehtävässä on videotiedoston resoluution ja/tai bittinopeuden muuttaminen (yleensä pienentäminen). Ks. vaikkapa tutoriaali aloittelijoille.

Graafinen videon pakkaus/muunnos?

Windows? Miro VideoConverter.
OS X? MPEG Streamclip, ffmpegX tai Miro.
Ubuntu? Transmageddon.

Ps. DVD:n rippauskseen ihana HandBrake!

Tehtävät loppui. Ennen kuin huudat ohjaajan tarkastamaan tehtävät:

Tarkista sisennys. Tietojenkäsittelijä sisentää aina kaiken piste.
Validoi sivusi. Ponit eivät hyväksy epävalidia koodia.
Tarkista käyttämiesi kuvien / videoiden julkaisuluvat! (Google image search ei ole lähde)
Myös otsikkorakenne kannattaa tarkistaa. KIITOS!

Korvaavat tehtävät

Seuraavilla tehtävillä voit korvata jonkin toisen tämän viikon tehtävän, tehtäviä ei lasketa kurssin viikottaiseen maksimipistemäärään. Tekemällä molemmat tehtävät voit siis korvata kaksi tehtävää tältä viikolta.

[http-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:

Kaikille sivuille joilla käytät SSI #include -komentoa (eka.html, toka.html, kolmas.html …), pitää lisätä suoritusoikeus sinulle:

chmod u+x eka.html

Lisää include-komento ja x-oikeudet myös toka.html:lle sekä mahdollisille muille sivustosi sivuille.

Jos ei toimi, jatka seuraavasti:

Vaihda {eka,toka,…}.html tiedostopäätteeksi .shtml. Toimiiko?

Jos ei toimi, lisää hakemistoon tiedosto .htaccess sisällöllä:

  `AddHandler server-parsed .shtml`

Jos ei edelleenkään toimi, tarkista x-oikeudet ja raportoi ohjaajalle.

, mutta www-palvelin tulkitsee #-alkuiset kommentit SSI-komennoiksi, jos html-tiedostolla on suoritusoikeus (u+x). Tästä seuraa, että SSI-komennot toimivat vain www-palvelimen kautta; jos avaat html-tiedoston suoraan selaimeen (tiedostojärjestelmästä), SSI ei toimi.

[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: www.cs.helsinki.fi
(2x enter)

Siistiäkö? No on! Näin www-selain hakee sivut. Nyt voit tehdä oman www-selaimen!

Ps. oikeasti jos haluat hakea http-sivuja komentorivillä, käytä curlia tai wgetiä.

Tietokone työvälineenä

Etusivu
Ohjeet
Paja
Tehtävät
- Viikko 1
- Viikko 2
- Viikko 3
- Viikko 4
TVT-Ajokortti

Computing Tools for CS studies

Home
[Instructions](In English)
Exercises
- Week 1
- Week 2
- Week 3
- Week 4

Provide feedback

Saved searches

Use saved searches to filter your results more quickly