2.4 TEHTÄVÄ 4: Ensimmäinen web-sivu

Tehdään ensimmäinen web-sivusi. Tehdään se ensin lokaalisti eli paikallisesti. Tällöin luot sen paikalliselle kovalevylle eli samalle koneelle, minkä kanssa nyt työskentelet. Kun tiedosto on paikallisella levyllä, on siihen helppo ja nopea tehdä niin kauan muutoksia, että olet sivuun tyytyväinen tai se muutoin tulee valmiiksi.

Myöhemmin tulet siirtämään sen www-kotisivutilaasi, jotta muutkin (erityisesti kurssin ohjaaja) pääsevät näkemään mitä olet saanut aikaiseksi. Tästä syystä tiedostojen nimien tulee olla tismalleen sellaisia kuin tehtävän ohjeissa annetaan.

Ohjeet

  1. Luo tavallinen tyhjä tekstitiedosto (text, ASCII - ei doc, rtf tai muu muotoiltu tekstiformaatti) ja anna sille nimeksi sivu_1.html ja tallenna se paikalliselle levylle, esimerkiksi työpöydälle tai temp-hakemistoon (c:\temp). Koululla kannattaa tosin käyttää Z-asemaa, kotona vaikka Omat tiedostot-hakemistoa, valitse itse mutta joka tapauksessa pistä tarkasti mieleen mihin ko. tiedoston tallensit - tarvitset sitä vielä. Voit käyttää samaa paikkaa muissakin harjoituksissa.
  2. Kirjoita siihen seuraava sisältö (älä välitä jos et vielä osaa kaikkea koodia, uudet asiat käydään läpi ihan kohta): 
    <html>
<head>
<title>Otsikko: ensimmäinen sivuni</title> 
</head>
<body>
<font size="4">Ensimmäinen HTML-sivuni!</font><br> 

Hieno kun mikä!<br><hr>
Osaan kirjoittaa <em>kursiivina</em> tai <strong>lihavoituna</strong>
<br><hr>

<strong><em>Tai molempina yhtäaikaa<em></strong><br>
<hr><tt>...ja tässä oli kaikki tällä kertaa...</tt>

</body>
<html>

    Jo näin lyhyt ja yksinkertainen koodi saattaa näyttää epäselvältä, joten suosittelen että otat heti käyttöön selkeän koodin kirjoittamisen säännöt: jäsentelyn ja sisennykset.

    Jäsentely tarkoittaa, että yhteen asiaan tai kokonaisuuteen liittyvät rivit ovat yhdessä, ja kokonaisuuksien välissä on yksi tai useampia rivivälejä. Näin pitkästäkin koodista löytää helposti sen alueen, jonka haluaa.

    Sisennyksellä voi vielä vähän enemmän selkeyttää koodia.

    <html>

<head>
	<title>Otsikko: ensimmäinen sivuni</title> 
</head>

<body>
	<font size="4">Ensimmäinen HTML-sivuni!</font><br> 
	Hieno kun mikä!<br>

	<hr>
	Osaan kirjoittaa <em>kursiivina</em> tai <strong>lihavoituna</strong><br>
	<hr>

	<strong><em>Tai molempina yhtäaikaa<em></strong><br>
	<hr>
	<tt>...ja tässä oli kaikki tällä kertaa...</tt>
</body>
</html>

    Usko pois että tällä kurssilla pidemmälle edetessämme koodin selkeydestä tulee hyvinkin oleellinen juttu, joten se kannattaa opetella jo nyt. Lisäksi jos törmään harjoitusten yhteydessä kovin epäselkeään koodiin niin en suostu sitä lukemaan vaan pyydään opiskelijaa siistimään koodin ennen tehtävän palauttamista ja hyväksymistä.

    Kirjoita sivu selkeästi jaoteltuna ja tallenna sivu.

  3. Ai niin, nuo ä-kirjaimet pitää kaikki muuttaa &auml; -koodeiksi. Saat sen helpoiten tehtyä tekstieditorisi Korvaa-komennolla (Replace). Näin saat korvattua kaikki ä:t &auml;-koodilla kerralla, oli niitä kirjaimia tekstissä 3 tai 3000.

    Jos sivulla olisi myös ö-kirjaimia, pitäisi tuo replace-homma tehdä vielä toiseen kertaan niitä varten. Mutta kun niitä ei ole niin ei tartte tehdä :-)

    Tallenna sivu uudestaan.

  4. Tarkista selaimella että miltä sivu näyttää. Avaa siis selain ja valitse selaimen Tiedosto-valikosta komento Avaa (Open) (Tiedosto -> Avaa, File -> Open), ja etsi sitten juuri tallentamasi tiedosto ja avaa se.

    Jos tiedosto näyttää erilaiselta kuin sen pitäisi, olet todennäköisesti kirjoittanut jonkun tagin väärin tai sieltä puuttuu joku lopputunniste. Tarkista koodi vielä kertaalleen ja tallenna tekemäsi muutokset. Tämän jälkeen lataa sivu uudelleen (nyt riittää että painat F5/Reload).

  5. Kopioi (älä siirrä) tiedosto web-kotihakemistoosi. Jos olet koulun koneella, voit kopioida tiedoston suoraan siihen public_html -hakemistoon, joka aiemmin luotiin. Muussa tapauksessa joudut käyttämään FTP-ohjelmaa tai vastaavaa (käyty läpi tehtävässä 1).

    Kirjoita tämän jälkeen web-selaimen osoitekenttään seuraava URL

    http://www2.stadia.fi/˜<tunnuksesi>/sivu_1.html

    Jos kaikki on mennyt niin kuin pitääkin niin olet nyt saanut selaimeesi itse tekemäsi web-sivun suoraan Internetistä. Jos annat tämän sivun URL-osoitteen kaverillesi, hän pääsee myös katsomaan tuota samaa sivua mistä tahansa Internetiin kytketystä tietokoneesta.

  6. Nyt huomaa, että sinulla on KAKSI versiota tästä web-sivusta: yksi lokaali ja toinen palvelimella. Tee nyt jokin muutos lokaaliin versioon, esim. lisää loppuun 

    	<hr>
	<tt>...ja tässä oli kaikki tällä kertaa...</tt>
	<br>

	&copy; 2005 <oma nimesi, esim. Purtsi Parviainen>
</body>
<html>
    Tallenna.
  7. Avaa selaimessa sekä lokaali versio että netissä oleva versio.
  8. Huomaat, että ne ovat erilaisia. Jos haluat päivittää verkossa olevan version, sinun täytyy jokaisen muutoksen jälkeen kopioida lokaali versio uudelleen web-kotihakemistoosi. Tee se nyt.
  9. Nyt kohdassa 6 tekemäsi muutos näkyy myös Internetissä.

    HUOM! Joskus nuo muutokset eivät tule heti näkyviin, sillä nettiselain toimii siten, että se ENSIN tallentaa kaikki lataamansa tiedostot paikallisen tietokoneen kovalevylle ns. välimuistiin (cache).

    Tutkitaanpa tätä ilmiötä vähän tarkemmin. Alla olevassa kuvassa näkyy sama web-sivu kolmessa eri paikassa:

    1. tallennettuna paikalliselle kovalevylle (vasemmanpuolimmaisin)
    2. tallennettuna palvelimelle (oikeanpuolimmaisin)
    3. tallennettuna selaimen välimuistiin

    cachet

    Kun luet jotain web-sivua niin selain kopioi tiedostot (HTML-tiedoston, kuvat etc) paikalliselle kovalevylle tuohon välimuistiin. Ladattuaan kaikki tarvittavat tiedostot selain kasaa sivun ja saatuaan sen valmiiksi, sivu tulee näkyviin tietokoneen näytölle.

    Kun selain sitten huomaa, että käyttäjä haluaa ladata sivun, joka juuri hiljattain on jo noudettu ja löytyy siten tästä paikallisessa koneessa sijaitsevasta välimuistista (cache), niin selain käyttääkin sitä paikallista versiota eikä käy hakemassa sivua netin uumenista. Näinhän selaaminen yleisesti ottaen nopeutuu, kun tiedostoa ei tarvitse hakea netin yli vaan paikalliselta kovalevyltä.

    Jos näin käy eli että tekemäsi muutos ei tule näkyviin, vaikka olet siirtänyt muutetun tiedoston palvelimelle, niin paina F5 (Päivitä sivu, Refresh) tai Ctrl-F5 (Macissa Omppu-F5), jotta selain käy hakemassa sivun sieltä netistä eikä käytä paikallista kopiota siitä.

    Noita välimuisteja saattaa olla myös matkan varrella eli Web-palvelimen ja oman tietokoneesi välissä, ja tällöin voi myös käydä niin että tekemäsi muutos ei näy muutamaan minuuttiin vaikka painatkin Päivitä-nappia.

  10. Jos käytit koulun konetta, siivoa jälkesi poista paikalliselta koneelta kaikki tallentamasi tiedostot ja hakemistot.
Vinkki

Jokaisen muutoksen jälkeen tiedosto täytyy tallettaa, jotta muokkaus näkyy selaimessa. Jos käytät FTP:tä niin muista että tämän lisäksi sinun täytyy joka kerta viedä muokattu tiedosto palvelimelle, jotta muutokset näkyisivät kaikille Internetin käyttäjille.

Nyt kun vasta harjoitellaan niin voit käyttää web-sivua myös paikallisesti (lokaalisti), eli voit avata sen suoraan omalta kovalevyltäsi selaimeesi, ja näin sinun ei tarvitse käyttää verkkoa lainkaan näitä harjoituksia tehdessäsi. Vasta kun saat harjoituksen kokonaan valmiiksi, sinun tätyy laittaa se tuonne palvelimelle, jotta ohjaaj voi käydä tarkistamassa että olet tehnyt vaadittavat tehtävät.