TKK / Tietoliikennelaboratorio / HFT / S-72.040 Ihminen ja tietoloiiikennetekniikka / Materiaali / Tietokoneharjoitus
Harjoitustyösivu tehdään
jonkun ryhmän jäsenen omaan kotihakemistoon. Sivulla
tulee olla kaikkien ryhmän jäsenten nimet ja opiskelijanumerot
sekä kurssin nimi ja koodi (S-72.040 Ihminen ja tietoliikennetekniikka).
Sekä ryhmän yhteiset tuotokset (raportit vaiheista)
sekä yksilötyönä kirjoitetut referaatit linkitetään
tälle sivulle. Referaatin jokainen siis julkaisee mieluiten
omalla kotisivullaan. Ennen referaatin DL:ia lähetetään
kurssitunnukselle [s72040@list.hut.fi] ryhmän kotisivun osoite.
HTML-dokumentit sijoitetaan oman kotihakemiston public_html alihakemistoon.
Tätä alihakemistoa ei voi luoda tavanomaisella komennolla
"mkdir public_html" vaan kyseisen hakemiston luo komento
"use www". Kaikki dokumentit, joita omaan public_html-hakemistoosi
talletat ovat kaikkien nähtävillä selaimen kautta.
Oman kotisivusi osoite on http://www.hut.fi/~kayttajatunnus. Hakemistoon
public_html kannattaa tehdä kurssia varten vielä oma
alihakemisto, vaikkapa "040". Tämä alihakemisto
tehdään normaalilla tavalla, eli "mkdir 040".
Selvennykseksi vielä kuva hakemistopuusta:
Jotta kotisivut olisivat kaikkien nähtävillä, täytyy vielä antaa komento "chmod -R o+rx ~/public_html".
Jos haluaa kotisivunsa näkymään TKK:n kotisivuluettelossa (http://www.hut.fi/Kotisivut), täytyy komentotulkissa ajaa käsky "publish-www". Jos haluat poistaa sivusi luettelosta, aja komento "remove-www". (Muutos näkyy seuraavana päivänä luettelossa).
WWW:ssä näkyvät sivut on kirjoitettu HTML-kielellä, joka on ns. sivunkuvauskieli. HTML:n varsinainen tehtävä on kuvata dokumentin rakenne (otsikot, väliotsikot, listat...), ei niinkään ulkoasua. HTML-kielen avulla ei voi tehdä kovin näyttävää ulkoasua sivulleen, koska eri selaimet näyttävät saman sivun hieman eri tavalla. Esimerkiksi Lynx osaa näyttää vain tekstit, kun taas Netscape Navigator näyttää kuvia ja animaatioita.
HTML -tiedosto on tekstitiedosto, eli se kirjoitetaan tekstieditorilla, vaikkapa emacsilla tai picolla. Kieli koostuu HTML-koodeista eli tägeistä (engl. tag), joiden tarkoitus on kuvata dokumentin elementit. Kaikki koodit kirjoitetaan < ja > -merkkien sisään. Useimmat tägeistä toimivat pareina, jolloin varsinainen teksti jää koodiparin väliin. Ensimmäinen määrittely kertoo, mistä koodin vaikutus alkaa ja jälkimmäinen kertoo, mihin vaikutus loppuu. Jälkimmäinen siis sulkee koodin ja se merkitään </koodin_nimi>. Esim. <H1>Otsikko</H1>. Jotkin koodit toimivat yksinään, esimerkiksi rivinvaihto <BR>.
Aivan tiedoston alussa täytyy avata tägi <HTML>, tämä tägi suljetaan vastaavasti tiedoston lopussa. Tämän jälkeen tiedostoon kirjoitetaan osio <HEAD> eli otsake. HEAD-koodien väliin sijoitetaan yleistietoja tekstistä, esimerkiksi koodeja TITLE, META sekä LINK. Näistä TITLE -koodi on tärkein, sillä se kertoo dokumentin nimen, joka on yleensä koko ajan selaimen näytöllä. Sivun varsinainen sisältö kirjoitetaan BODY -tägien väliin. HTML -dokumentin alkuosa voi siis näyttää tältä:
<HTML>
<HEAD>
<TITLE>Dokumentin otsikko</TITLE>
</HEAD>
<BODY>
... dokumentin varsinainen teksti
</BODY>
</HTML>
Koodiin voi laittaa myös määreitä.
Esimerkiksi BODY -tägin avulla voi määrittää
mm. sivun taustavärin, tekstin värin, sekä linkkien
ja seurattujen linkkien värin. Värit syötetään
heksadesimaalisessa muodossa, esim "#334455".
BODY -tägi näyttää tältä, kun sille
on annettu joitain määreitä:
<BODY BGCOLOR="#FFFFFF" TEXT="#008000" LINK="#0000FF"> ... </BODY>
BGCOLOR kertoo taustan värin, TEXT
tekstin värin, LINK linkin värin, VLINK seuratun linkin
värin ja ALINK aktiivisen linkin värin. (Valkoinen=#FFFFFF,
vihreä=#008000, sininen=#0000FF).
[Muutamia värikoodeja]
Sivun varsinainen sisältö koostuu useista osista, joita ovat esimerkiksi otsikot, kappaleet, listat ja taulukot. Osat voivat sisältää toisia osia. Esimerkiksi kappaleen sisään voi laittaa taulukon ja taulukon sisään voi laittaa listan. Osien sisällä tekstin muotoiluun käytetään tekstitason muotoiluja. Kun käytetään sisäkkäisiä koodeja, on muistettava, että on hyvän tavan mukaista sulkea viimeisenä se koodi, joka avattiin ensin.
Leipätekstiä kirjoitettaessa
on huomattava, että selainikkunassa ei näy editorilla
tehdyt
rivinvaihdot. Niinpä rivinvaihdot on ilmaistava <BR>-koodilla.
Eritasoisia otsikoita tehdään
HTML-kielessä H1 - H6 -koodeilla. Isoin otsikko, pääotsikko
kirjoitetaan tägien <H1> ja </H1> väliin,
seuraava otsikko suuruusjärjestyksessä tägien <H2>
-väliin jne. Koodi <H6> määrittelee pienimmän
mahdollisen otsikon.Otsikon ulkoasu määräytyy selaimen
mukaan, joten on turha tavoitella
tietyn näköistä ja kokoista otsikkoa.Valitse otsikkotaso
otsikon tehtävän mukaan. Otsikon voi tasata keskelle
tai oikeaan tai vasenpaan laitaan ALIGN -määreen avulla.
Esimerkiksi koodi
<H1 ALIGN=CENTER>1-tason otsikko
</H1> määrittelee ison otsikon keskelle sivua
kun taas koodi
<H2 ALIGN=RIGHT>2-tason otsikko</H2> määrittelee
vähän pienemmän otsikon sivun oikeaan laitaan.
ALIGN=CENTER -määreen sijasta
voi käyttää myös <CENTER>-koodia. Esimerkiksi
<CENTER><H1>Otsikko</H1></CENTER>.
Tekstissä olevia yksittäsiä sanoja saa korostettua lihavoinnilla, eli <b> -koodien avulla. Kurssiivin saa aikaan <i> -koodien avulla.
Linkki tehdään koodilla <A HREF="URL"> </A>.
Esimerkiksi <A HREF="http://www.hut.fi">TKK</A> tekee linkin, jota klikkaamalla pääsee TKK:n pääsivulle. HREF-attribuutilla siis määritellään se sivu, jonne tekstiä klikkaamalla halutaan päästä ja koodien välissä näkyy itse linkkisana.
NAME-attribuutilla voi nimetä kohtia dokumentista. Esimerkiksi
<A NAME="Johdanto">Johdanto</A>
nimeää kohdan johdannoksi.
Samassa dokumentissa voi tällöin olla linkki <A HREF="#Johdanto">Johdantoon</A>,
jonka valitsemalla pääsee johdantoon.
Kuvan lisääminen sivulle onnistuu IMG-koodilla. SRC-atribuutti kertoo kuvan sijainnin.
Esimekiksi
<IMG SRC="http://">
Jokaisen IMG-koodin olisi hyvä sisältää SRC-attribuutin
lisäksi ALT, HEIGHT ja WIDTH -attribuutit.
ALT-attribuutti määrittelee tekstin, joka näytetään,
jos kuvaa ei syystä tai toisesta pystytä näyttämään
selaimessa. Tekstin pitäisi kuvata mahdollisimman hyvin kuvan
sisältö.
HEIGHT ja WIDTH -attribuutit kertovat
kuvan korkeuden ja leveyden. Tämä tieto on tärkeää
graafisille selaimille, jotta ne osaavat varata kuville oikean
kokoisen tilan ennen kuin kuva on haettu
palvelimelta.
UL-koodilla saa aikaan järjestämättömän listan, jossa LI-koodilla määritetyt kohdat erotetaan toisistaan.
Esimerkiksi lista
<UL>
<LI>Ensimmäinen kohta</LI>
<LI>Toinen kohta</LI>
</UL>
Muista sulkea koodit oikeassa järjestyksessä, eli ensin <LI> -koodi, sitten <UL> -koodi.