XHTML-perusteita - Luento 9
- Luentotaltiointi
- Dokumenttityypeistä
- WWW-sivujen tekeminen
- Hyvän XHTML-dokumentin runko
- Dokumentin perusrakenne
- XHTML:n elementit
- Lohkotason elementit
- Erilaiset listat
- Taulukot
- Korvattavat elementit
- Tekstitason elementit
- Dokumentin otsikkotietoihin sijoitettavat elementit
- Yleisimmät virheet XHTML-dokumentissa
- XHTML-dokumentin tuottamisen vaiheet
Luennolla käsitellään XHTML-dokumentin rakenteen määrittämistä peruselementtien avulla.
Luentotaltiointi
- tyovaline09.wmv 57M
- tyovaline09.mp3 29M
- tyovaline09.avi 189M
Dokumenttityypeistä
- Wordin tallentamaa tiedostoa pystyy yleensä tulkitsemaan vain ohjelma itse
- Word tekee tiedostoon merkintöjä
- Rakenteen merkitsemiseksi
- Ulkoasun määrittämiseksi
- Automaattisia kenttiä varten
- WWW-sivua voivat tulkita useat erilaiset selaimet (esim. graafiset selaimet, kännykkäselaimet, ääniselaimet, tekstiselaimet jne.)
- On oltava yhteisiä pelisääntöjä miten WWW-dokumentteja kirjoitetaan.
- On keskityttävä sisällön jälkeen rakenteen merkitsemiseen ja vasta sitten ulkoasuun.
- WWW-sivu on pelkkää tekstiä
- Rakenteen merkinnät on kirjoitettava itse
- Merkintöjen kirjoittamisessa tarkat säännöt, jonka määrittää dokumenttityyppi
Kuka määrittää miten sivuja tehdään?
Standardeista lyhyesti
-
- HTML (HyperText Markup Language)
- HTML on WWW:ssä käytettävien hypertekstidokumenttien rakenteen määrittelyyn tehty kieli.
WWW-sivujen tekeminen
WWW-sivujen tekemisessä voidaan erottaa samat vaiheet kuin tekstinkäsittelydokumentin tekemisessä. Nämä vaiheet ovat:
- Sisällön tuottaminen
- Rakenteen merkitseminen
- Ulkoasun määrittäminen
Editorit
WWW-sivuja voidaan tuottaa niihin erikoistuneilla ohjelmilla, jotka näyttävät suoraan miltä sivu näyttää selaimessa. Valitettavasti monet näistä ohjelmista tuottavat sivuja, jotka ovat tulkittavissa vain yhdellä selaimella. Siksi onkin yleensä järkevämpää tuottaa itse selaimien ymmärtämää lähdekoodia.
Graafisia WYSIWYG (What You See Is What You Get) -editoreita (esim. Frontpage ja Dreamweaver) on syytä välttää, koska XHTML ei millään tavalla kiinnitä dokumentin ulkoasua vaan ainoastaan rakenteen. Graafisia editoreitakin voi käyttää kunhan ymmärtää mitä on tekemässä
Helppokäyttöisiä XHTML-editoreja on vielä melko vähän.
- Amaya - vapaa, monipuolinen
- XetorjEdit - monipuolinen, mutta käytettävyydessä parantamista
- HTML-kit - vaatii muutaman asetuksen säätöä XHTML:ää varten
Rakenteen merkitseminen
XHTML-dokumentti on tekstiä, jossa merkitään dokumentin rakenne elementeillä, jotka kirjoitetaan <>-merkkien väliin. Esim. <title>.
Elementeillä on aina aloitus ja lopetus joiden välissä on varsinainen elementin sisältö. esim.
<title>Tietokone ja tietoverkot työvälineenä</title>
<title> on aloituselementti.
</title> on lopetuselementti. Lopetuselementissä on aina /
-merkki
Jos elementillä ei ole sisältöä niin lopetuselementti voidaan lyhentää suoraan aloituselementtiin: <br />
Elementtien välillä ja tekstin keskellä saa olla vapaasti välilyöntejä tai rivinvaihtoja.
Tavallisimmista XHTML-elementeistä löytyy dokumentti opettelun tueksi.
http://appro.mit.jyu.fi/doc/www/xhtml/
Ominaisuudet eli attribuutit
Elementeillä voi olla ominaisuuksia eli attribuutteja, jotka määrittelevät
jotakin elementtiin liittyviä asioita. Esim. hyperlinkin kohde määritellään
a
-elementtiin tulevalla href
-attribuutilla:
<a href="http://www.jyu.fi/">Jyväskylän yliopisto</a>
Dokumentin on oltava hyvin muodostettu
Tuotetun dokumentin pitää olla hyvin muodostettu (engl. well-formed), ettei selaimien tarvitse tehdä tulkitsemisessa arvailuja. Eri elementit eivät siis saa mennä keskenään ristiin eikä lopetusosia saa unohtaa.
Väärin
<p>Tuotetun <strong>dokumentin pitää olla
hyvin muodostettu
(<em>engl. well-formed</em>).</p></strong>
Oikein
<p>Tuotetun <strong>dokumentin pitää olla
hyvin muodostettu
(<em>engl. well-formed</em>)</strong>.</p>
Dokumentin pitää olla validi
Dokumentin pitää olla myös validi (engl. valid) eli sen rakenne pitää olla jonkin dokumenttityypin mukainen. Dokumenttityyppi määrää mitä elementtejä voi käyttää, mitkä elementit saavat sijaita minkäkin elementtien sisällä ja mitä attribuutteja kuuluu millekin elementille jne.
XHTML 1.0 strict
XHTML 1.1 on uusin W3C:n XHTML-suositus mutta eroaa XHTML 1.0 strictistä lähinnä vain modulaarisuutensa takia. Käytämme tällä kurssilla XHTML 1.0 strictiä
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
XHTML-dokumenttien tarkistamiseen eli validointiin on olemassa ns. HTML-validaattoreita.
Pelkillä www-selaimilla testaamiseen ei voi luottaa koska ne yrittävät hiljaisuudessa ohittaa käyttäjän tekemät virheet jonka tuloksena virheellinen dokumentti toimii kuun asennosta, auringonpilkuista ja käytetystä selaimesta riippuen ehkä joskus tai ei koskaan.
Hyvän XHTML-dokumentin runko
<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fi" >
<head>
<title>Tähän sivun otsikko</title>
<link href="tahan_tyylintiedoston_nimi.css" rel="StyleSheet" type="text/css" />
</head>
<body>
<h1>Tähän pääotsikko</h1>
<p>Tähän tekstiä...</p>
</body>
</html>
- xml-elementti kertoo käytetyn XML-standardin version. encoding-ominaisuus (engl. attribute) määrittelee käytetyn merkistön. iso-8859-1 tai iso-8859-15 ( €-merkki mukana) on pohjoismaissa käytettävä merkistö.
- DOCTYPE-elementti kertoo käytetyn dokumenttityypin.
- head-elementti sisältää kaiken dokumenttiin liittyvän metatiedon.
- title-elementti sisältää jonkin hyvin dokumenttia kuvaavan otsikon. Otsikon pitää olla järkevä vaikka se otettaisiin erilleen koko dokumentista.
- body-elementti sisältää kaiken varsinaisen WWW-sivulla näkyvän ja dokumentin runkoon kuuluvan informaation.
- h1-elementti on korkeimman otsikkotason elementti. Jokaisella sivulla pitäisi aina olla vain ja ainoastaan yksi h1-elementti, joka kertoo koko dokumentin pääotsikon.
- p-elementti merkitsee tekstikappaleen.
Amayassa uuden dokumentin voi aloittaa valinnalla File | New | XHTML Document. Valitse sopiva tallennushakemisto, anna tiedostonimeksi index.html ja dokumenttityypiksi XHTML Strict.
Dokumentin perusrakenne
Seuraavassa kuvassa on esitettynä dokumentin perusrakenne. Perusrakenteesta kannattaa huomata seuraavat asiat:
- Dokumentissa kuuluu yleensä olla yksi ensimmäisen tason otsikko.
- Otsikkotasojen pitää edetä loogisesti (ensimmäinen taso, jonka alla toinen taso).
- Jokaisen otsikon jälkeen tulisi olla tekstikappale (ei heti toista otsikkoa).
Amaya:ssa dokumentin rakenteen saa näkyviin View | Show structure.
XHTML:n elementit
Seuraavassa kaaviossa pyritään selventämään XHTML-elementtien suhdetta toisiinsa XHTML 1.1:ssä. Kaaviosta puuttuu hyvin
paljon elementtejä ja kaavio ei ilmaise täysin elementtien välisiä riippuvuuksia.
Lohkotason elementit
Lohkotason elementtejä voi sijoittaa suoraan body-elementin sisään.
Useimmat lohkotason elementit voivat sisältää joko pelkkää tekstiä tai merkkitason elementtejä.
Otsikkoelementit - (h1 - h6)
<h1>Ensimmäisen tason otsikko</h1> <p>Tämä on tekstikappale</p> <h2>Toisen Tason otsikko</h2> <p>Tämä on tekstikappale</p>
Amayassa otsikon saa valitsemalla kappaleen F2-painikkeella ja valitsemalla työkalupalkista H1, H2 tai H3.
Tekstikappale - p
<p> Tämä on tekstikappale </p> <p> Tämä on tekstikappale </p>
Amayassa kappaleesta saa tavallisen tekstikappaleen F2-painikkeella ja valikosta valinnalla XHTML | Paragraph (p).
Erilaiset listat
Listat ovat myös lohkotason elementtejä. Listojen sisään voi sijoittaa sekä merkkitason elementtejä että toisia lohkotason elementtejä
Amayassa listat saa maalaamalla halutut kappaleet ja valitsemalla työkalupalkista Bulleted List tai Numbered List. Tällöin kappaleista tulee listakohtia. Sisemmän listan saa luotua menemällä jonkin listakohdan loppuun, painamalla enteriä ja valitsemalla työkalupalkista uudelleen listarakenteen. Sisemmästä listasta pääsee ulompaan listaan painamalla useamman kerran enteriä.
Seuraavassa on esimerkkien avulla käsitelty järjestämätön ja järjestetty lista sekä määritelmälista.
Järjestämätön lista - ul
- Järjestämättömän listan ensimmäinen alkio
- Järjestämättömän listan toinen alkio
- Järjestämättömän listan kolmas alkio
- Järjestämättömän listan neljäs alkio
<ul> <li>Järjestämättömän listan ensimmäinen alkio</li> <li>Järjestämättömän listan toinen alkio</li> <li>Järjestämättömän listan kolmas alkio</li> <li>Järjestämättömän listan neljäs alkio</li> </ul>
Järjestetty lista - ol
- Järjestetyn listan ensimmäinen alkio
- Järjestetyn listan toinen alkio
- Järjestetyn listan kolmas alkio
- Järjestetyn listan neljäs alkio
<ol> <li>Järjestetyn listan ensimmäinen alkio</li> <li>Järjestetyn listan toinen alkio</li> <li>Järjestetyn listan kolmas alkio</li> <li>Järjestetyn listan neljäs alkio</li> </ol>
Sisäkkäiset listat
- Järjestetyn listan ensimmäinen alkio
- Järjestämättömän listan ensimmäinen alkio
- Järjestämättömän listan toinen alkio
- Järjestetyn listan ensimmäinen alkio
- Järjestetyn listan toinen alkio
- Järjestämättömän listan kolmas alkio
- Järjestetyn listan toinen alkio
- Järjestetyn listan kolmas alkio
- Järjestämättömän listan ensimmäinen alkio
- Järjestämättömän listan toinen alkio
- Järjestämättömän listan kolmas alkio
- Järjestämättömän listan ensimmäinen alkio
- Järjestämättömän listan toinen alkio
- Järjestämättömän listan neljäs alkio
<ol> <li>Järjestetyn listan ensimmäinen alkio <ul> <li>Järjestämättömän listan ensimmäinen alkio</li> <li>Järjestämättömän listan toinen alkio <ol> <li>Järjestetyn listan ensimmäinen alkio</li> <li>Järjestetyn listan toinen alkio</li> </ol> </li> <li>Järjestämättömän listan kolmas alkio</li> </ul> </li> <li>Järjestetyn listan toinen alkio</li> <li>Järjestetyn listan kolmas alkio <ul> <li>Järjestämättömän listan ensimmäinen alkio</li> <li>Järjestämättömän listan toinen alkio</li> <li>Järjestämättömän listan kolmas alkio <ul> <li>Järjestämättömän listan ensimmäinen alkio</li> <li>Järjestämättömän listan toinen alkio</li> </ul> </li> <li>Järjestämättömän listan neljäs alkio</li> </ul> </li> </ol>
Taulukot
- table-elementti muodostaa taulukon
- tr-elementti aloittaa uuden rivin taulukossa
- th-elementti määrittelee rivi- tai sarakeotsikon
- td-elementti määrittelee taulukon solun
Amayassa taulukon saa luotua tekemällä tyhjän kappaleen ja valitsemalla työkalupalkista Table-painikkeen. Taulukon solujen ominaisuuksia voi muokata valikosta XHTML | Table
Taulukoita rakennettaessa kannattaa huomata seuraavia asioita:
- Taulukkoon laitetaan ainoastaan taulukkomuodossa olevaa dataa.
- Taulukoilla ei saa taittaa sivua!
Seuraavassa yksinkertainen esimerkki taulukosta, jossa on neljä riviä ja kaksi saraketta.
Esimmäisen sarakkeen otsikko | Toisen sarakkeen otsikko |
---|---|
1. rivin 1. solu | 1. rivin 2. solu |
2. rivin 1. solu | 2. rivin 2. solu |
3. rivin 1. solu | 3. rivin 2. solu |
<table summary="Tekstikuvaus taulukon sisällöstä"> <caption>Taulukkoon liittyvä otsikko</caption> <tr> <th>Esimmäisen sarakkeen otsikko</th> <th>Toisen sarakkeen otsikko</th> </tr> <tr> <td>1. rivin 1. solu</td> <td>1. rivin 2. solu</td> </tr> <tr> <td>2. rivin 1. solu</td> <td>2. rivin 2. solu</td> </tr> <tr> <td>3. rivin 1. solu</td> <td>3. rivin 2. solu</td> </tr> </table>
Ensimmäinen otsikko | Toinen otsikko | Kolmas otsikko |
---|---|---|
1. rivin 1. | 1. rivin 2. | 1. rivin 3. |
2. rivin 1. | 2. rivin 2. | 2. rivin 3. |
3. rivin 1. | 3. rivin 2. | 3. rivin 3. |
4. rivin 1. solu kolmen sarakkeen alueelle | ||
5. rivin 1. | 5. rivin 2.kahdella riville | 5. rivin 3. |
6. rivin 1. | 6. rivin 3. |
<table summary="tekstikuvaus taulukon tarkoituksesta ja sisällöstä" > <tr> <th>Ensimmäinen otsikko</th> <th>Toinen otsikko</th> <th>Kolmas otsikko</th> </tr> <tr> <td>1. rivin 1.</td> <td>1. rivin 2.</td> <td>1. rivin 3.</td> </tr> <tr> <td>2. rivin 1.</td> <td>2. rivin 2.</td> <td>2. rivin 3.</td> </tr> <tr> <td>3. rivin 1.</td> <td>3. rivin 2.</td> <td>3. rivin 3.</td> </tr> <tr> <td colspan="3">4. rivin 1. joka laajenee kolmen sarakkeen alueelle</td> </tr> <tr> <td>5. rivin 1.</td> <td rowspan="2">5. rivin 2. kahdella riville</td> <td>5. rivin 3.</td> </tr> <tr> <td>6. rivin 1.</td> <td>6. rivin 3.</td> </tr> </table>
Korvattavat elementit
Korvattavia elementtejä voidaan sijoittaa lohko- tai tekstitason elementtien sisään.
img - Kuva
- src-attribuutin määrittelemä kuva ilmestyy img-elementin paikalle dokumenttiin.
- img-elementti pitää sijoittaa aina jonkin kappaletason elementin (p, li, h1, h2 jne) sisään.
- img-elementille ei ole normaalia lopetuselementtiä joten se pitää korvata lisäämällä aivan elementin loppuun välilyönti ja /-merkki.
Seuraavassa esimerkki img-elementin käytöstä.
Käytettävä kuva voi sijaita millä tahansa www-palvelimella jos kuvan osoitteeksi kirjoitetaan kokonainen URI:
<p>
<img src="http://appro.mit.jyu.fi/images/appro2_p.png" alt=" " title="Appro-logo" />
</p>
Useimmiten kuvat sijaitsevat samalla palvelimella ja samassa kansiossa kuin xhtml-dokumenttikin. Tällöin on järkevintä käyttää suhteellista osoitusta kuvaan:
<p>
<img src="appro2.png" alt=" " title="Appro-logo" />
</p>
Amayassa samassa hakemistossa olevan kuvan saa helposti lisätty työkalupalkin Image-painikkeella.
Kuvalle pitää keksiä korvaava tekstikuvaus alt
-attribuutin arvoksi.
alt
-attribuutin sisältö näytetään jos kuvaa ei pystytä esittämään.
<p>
<img
src="http://hazor.iki.fi/2002/jotunheimen/tommi/thumbs/DSCN4283-H%E4m%E4h%E4kki.jpg"
alt="Hämähäkki lämmittelee auringossa rinkan päällä"
title="Hämähäkki lämmittelee auringossa" />
</p>
br - pakotettu rivinvaihto
-
br - pakotettu rivinvaihto. br-elementillä ei saa yrittää tehdä
tyhjää tilaa (vrt. ylimääräiset rivinvaihdot tekstinkäsittelyssä).
<address> yliopistonopettaja <a href="mailto:tommi.j.lahtonen@jyu.fi">Tommi Lahtonen</a><br /> Sähköposti: <a href="mailto:tommi.j.lahtonen@jyu.fi">tommi.j.lahtonen@jyu.fi</a><br /> Kotisivu: <URL: <a href="http://hazor.iki.fi/">http://hazor.iki.fi/</a>><br /> Työhuone: AgC431.2<br /> Puhelin: (014) 260 2746<br /> Fax: (014) 260 2731</address>
- br-elementillä ei myöskään ole normaalia lopetuselementtiä vaan se korvataan laittamalla aivan elementin loppuun välilyönti ja /-merkki. vrt. img.
Tekstitason elementit
Seuraavaan on kerätty listaksi tekstitason elementit.
- a-elementillä voidaan toteuttaa hypertekstilinkki joko toiseen dokumenttiin tai sitten saman dokumentin toiseen kohtaan.
Osoitteessa ei saa käyttää ääkkösiä tai
välilyöntejä
-
Absoluuttinen osoite
Absoluuttisella osoitteella oleva linkki kurssin kotisivulle<p>Absoluuttisella osoitteella oleva linkki kurssin <a title="Tietoverkot työvälineenä kurssin kotisivu" href="http://appro.mit.jyu.fi/2001/syksy/tietoverkot/">kotisivulle</a></p>
Absoluuttisessa osoitteessa on aina mukana http://
Suhteellinen osoite
Suhteellisella osoitteella oleva linkki samassa hakemistossa olevaan pannupizza.html-dokumenttiin<p> Täältä löydät ohjeen miten tehdään <a href="pannupizza.html">pannupizza</a>.</p>
Suhteellinen osoite viittaa samalla palvelimella oleviin tiedostoihin.
- Amayassa linkkejä voi luoda maalaamalla haluttu linkkiteksti ja sen jälkeen valitsemalla Links | Create or change link.
-
- strong - erittäin tärkeät asiat
- em - tärkeät asiat
Tässä on pitkä kappale tekstiä jossa jotkin sanat ovat tärkeitä, toiset sanat ovat erittäin tärkeitä.
<p> Tässä on pitkä kappale tekstiä jossa jotkin sanat ovat <em>tärkeitä</em>, toiset sanat ovat <strong>erittäin tärkeitä</strong>. </p>
Amayassa tärkeitä asioita voi korostaa maalaamalla tekstistä sanoja ja valitsemalla työkalupalkista painikkeen Emphasis ja Strong.
Dokumentin otsikkotietoihin sijoitettavat elementit
Linkkielementti - link
- link-elementti saa esiintyä vain head-elementin sisällä.
- link-elementille määritellään dokumentin suhde muihin dokumentteihin
<link
rel="StyleSheet"
href="http://appro.mit.jyu.fi/appro2003.css"
type="text/css"
/>
Amayassa esimerkiksi tyylitiedoston linkitys onnistuu valinnalla Style | Link...
Yleisimmät virheet XHTML-dokumentissa
- Elementit väärässä järjestyksessä.
- Kappaletason elementti tekstitason elementin sisällä.
- Väärin kirjoitettu dokumenttityyppi.
- Attribuuttien arvot ilman lainausmerkkejä.
- Elementtien ja attribuuttien nimet pitää kirjoittaa pienellä.
- Epätyhjät elementit pitää lopettaa lopetuselementillä <p> .. </p>
- Tyhjät elementit pitää lopettaa kauttaviivalla <img .. />
XHTML-dokumentin tuottamisen vaiheet
- Kirjoita dokumentin sisältö
- Määrittele dokumentin rakenne
- Validoi dokumentti
- Virallinen validaattori löytyy osoitteesta http://validator.w3.org/
- Harjoitustöitä voi tarkistaa myös Harkkapoliisilla.
- Testaa dokumentti jollakin selaimella
- Määrittele dokumentin ulkoasu (CSS)
- Validoi CSS
- Testaa ulkoasu selaimilla
- Siirrä dokumentti WWW-palvelimelle
XHTML-dokumentin kirjoittamiseen voi käyttää haluamaansa tekstieditoria (esim. Notepad) tai jotakin erityisesti XML:n kirjoittamiseen kehitettyä editoria (esim. HTML-Kit).
WWW-sivun julkaisu JYU:ssä
Katso mallivideo oikeasta laidasta. Näin saat siirrettyä WWW-sivun ja oheistiedostot verkkoon Jyväskylän yliopistossa (kotikoneelta tai mikroluokassa):
- Aktivoi WWW-hakemistosi salasana.jyu.fi-palvelun kautta.
- Siirry osoitteeseen https://salasana.jyu.fi.
- Klikkaa Salasanan vaihto, tunnuksen tietojen päivitys. Kirjaudu järjestelmään annetuilla Tietohallintokeskuksen tunnuksilla.
- Napauta painiketta Activate WWW ja anna salasanasi. Lopuksi napauta Logout-painiketta.
- Yliopiston mikroluokissa aktivoitu WWW-tila pitäisi näkyä myös W-asemana.
- Tila tarvitsee aktivoida vain kerran, eli jatkossa voit ohittaa tämän kohdan.
- Tarkempia tietoja kts. THK:n WWW-tilan aktivoimisen ohje
- Hae SSH Secure Shell -ohjelmisto omalle koneellesi.
- Ohjelma löytyy mikroluokista valmiiksi asennettuna.
- Ohjelman saa esimerkiksi osoitteesta http://www.dartmouth.edu/comp/resources/downloads/win/connect/secureshell.html.
- Valitse käynnistysvalikosta Start | All Programs | SSH Secure Shell | Secure Shell Client.
- Valitse File | Connect... ja kirjoita tiedot:
- Host Name: jalava.cc.jyu.fi
- User Name: käyttäjätunnus (yliopiston sähköpostiosoitteen alkuosa ennen @-merkkiä)
- Jos yhteys ei toimi, niin aktivoi käyttöoikeus jalava.cc.jyu.fi-koneeseen.
- Palaa takaisin salasana.jyu.fi:hin, kirjaudu sisään ja napauta painiketta Activate UNIX.
- Jos ruudussa on painike Deactivate UNIX, niin se tarkoittaa, että sinulla pitäisi olla oikeus päästä jalava.cc.jyu.fi-koneelle.
- Eräs harvinainen ongelma voi olla se, että yrität päästä koneelle jostain yliopiston ulkopuolisesta verkosta, jossa ns. Reverse DNS -palvelu ei ole kunnossa. Tämän toimivuutta voi testata osoitteessa http://www.cc.jyu.fi/misc/dns-testi.php.
- Unix-käyttö tarvitsee aktivoida vain kerran, eli jatkossa voit ohittaa tämän kohdan.
- Tarkempia tietoja kts. THK:n suorakäyttöohje
- Linkitä WWW-tilasi kotihakemistoosi kirjoittamalla komento:
ln -s /wwwhome$HOME/html $HOME/html
- Jos sinulla on tiedostojensiirtoikkuna auki komentorivin sijaan, niin UNIX-komentorivin saa auki valinnalla Window | New Terminal.
- Linkitys tarvitsee tehdä vain kerran, eli jatkossa voit ohittaa tämän kohdan.
- Katso tarkemmat ohjeet THK:n users.jyu.fi-ohjeesta.
- Valitse valikosta Window | New File Transfer, niin saat SSH File Transfer -tiedostonsiirtoikkunan auki.
- Valitse vasemmasta laidasta My Computer ja etsi hakemisto (esim. hakemisto harkka), jonne olet tallentanut .html, .css, .zip ja kuvatiedostot. Tuplanapauta oikeasta laidasta html-hakemistoa.
- Raahaa vasemmasta laidasta haluttu hakemisto (esim. harkka) oikealle puolelle (html-hakemiston sisälle).
- Kokeile nettiselaimella osoitetta: http://users.jyu.fi/~omatunnus/harkka/
- omatunnus = käyttäjätunnuksesi
- harkka = siirretyn hakemiston nimi
- Jos hakemistossa on WWW-sivu nimellä index.html, niin se näytetään automaattisesti hakemistosta. Muutoin WWW-selain näyttää tiedostolistauksen hakemistosta.
Käyttäjien kommentit