Internet -kurssi, www -materiaalin tuottaminen

Internet -kurssi:
WWW -materiaalin tuottaminen
Opetusmateriaalin tiivistelmä

Huom! Tämä sivusto valikolla kehystettynä. Helpottaa selaamista.

Tämä sivu sisältää pääkohdat monisivuisesta opetusmateriaalista 1 - 5. Aineistoa suositeltiin mm. HS:n Nyt -liitteessä (26.7.2002) viikon linkkinä ja linkkihakemistossa (Kotisivu suunnitteilla?). Lisäksi aineisto on huomioitu Makupalojen linkkikirjastossa (Internet-opetusmateriaalia) sekä Turun yliopiston henkilökuntakoulutuksessa.

Seuraavassa on siis tiivistelmä aineistosta, yksityiskohtaisempaan aineistoon pääset suoraan --> tästä.

Mitä "netti -sivut" ovat?

Internetissä vastaantulevat WWW -sivut ovat yleensä kirjoitettu niin sanottuna HTML -lähdekoodina, jonka selainohjelmat (esim. Internet Explorer) näyttävät luettavana sivuna kuvineen päivineen. Lähdekoodi on kuitenkin pelkkää tekstiä, joten sen voi valmistaa yksinkertaisella kirjoitusohjelmalla, vaikka muistiolla.

HTML -kieli koostuu tekstistä, jonka haluat julkaista sekä <määrittelyistä>, joka kertoo selaimelle, miten tekstin halutaan näkyvän, mistä kuvat haetaan sivulle, mitä hiirellä klikkaamalla tapahtuu jne.

Katso esimerkkisivua, jossa lopullinen selaimessa näkyvä sivu ja HTML -lähdekoodi ovat rinnakkain tarkasteltavissa. Löydätkö lähdekoodista (oikealla) lopullisessa sivussa näkyvän tekstin? Sulje lopuksi uusi ikkuna "rastista" oikeasta yläkulmasta.

Teemme nyt internetsivun muistiolla:

Sivupohja html -kielellä muistioon

<HTML>
             <HEAD>
               <TITLE>Sivun otsikko, näkyy selaimen otsikkorivillä</TITLE>
             </HEAD>
                         <BODY bgcolor="white" text="black">

                            <H1>Iso otsikko</H1>

                            <P> Sitten hiukan tekstiä</P>

                         </BODY>
</HTML>

Tehtäviä

1 Kirjoita siis yllä oleva teksti muistioon... KÄYNNISTÄ -> Ohjelmat ->Apuohjelmat ->Muistio. Voit käyttää myös MUOKKAA -> leikkaa ja liitä toimintoa, jos haluat.

2 a) Tee kansio omalle nimellesi kiintolevylle: OMA TIETOKONE -> avaa C: -asema ja valitse: TIEDOSTO -> Uusi -> Kansio. Voit nimetä nyt kansion.
2 b) Tallenna html -teksti nimellä "ekasivu.html" kansioosi. Valitse: Tiedosto -> Tallenna nimellä. Etsi C: -asema ja avaa oma kansiosi, tallenna. Sulje muistio.

3 Avaa talletettu tiedosto OMA TIETOKONE - > C: -asema -> Kansiosi -> omasivu.html. Näin näet lopputuloksen internetselaimella. Tekemäsi tiedosto on nyt tietokoneen kiintolevyllä C:, mutta voitaisiin siirtää helposti myös internettiin kaikkien nähtäväksi.

4 Kun sivusi on avattuna internetselaimessa valitse yläpalkista NÄYTÄ -> Lähde. Näin saat lähdekoodin näkyviin uudelleen. Muuta nyt jotakin kohtaa näkyviin tulevassa tekstissä. Esimerkiksi "Sitten hiukan tekstiä" paikalle oma nimesi.
Kun muutos on tehty valitse muistion yläpalkista TIEDOSTO -> Tallenna (tiedostolla oli jo nimi, joten ei tarvitse enää nimetä). Sulje muistio ja päivitä internetsivusi painamalla F5 -näppäintä (tai NÄYTÄ->Päivitä) nähdäksesi muutokset.
Päivittäminen tarkoittaa sitä, että internetselain lukee HTML -lähdekoodin uudelleen. Tämä tapahtuu vasta erikseen käskettäessä F5! Sen vuoksi ovat muutokset vasta päivittämisen jälkeen nähtävillä.

5 Voit tehdä muutoksia ja kokeiluja lisää toistamalla kohdan 4. Kokeile ainakin erikokoisia otsikoita muuttamalla numeroa pienemmäksi kohdissa <H1> ja </H1> (numeroiden tulee olla parina samat alussa ja lopussa). Voit kokeilla myös "white" ja "black" -sanojen paikalle muita värien nimiä englanniksi. Myös selaimessa näkyvää tekstiä voit huoletta muutella.

Väritettyjen elementtien selitykset

<HTML> </HTML>
HTML -tagit laitetaan aina HTML -dokumentin alkuun ja loppuun. Elementti ilmaisee selaimelle, että tiedostossa käytetään HTML-kieltä.

<HEAD> </HEAD>

<TITLE> </TITLE>
Elementillä määritellään otsikkorivin teksti. Näkyy selaimen yläpalkissa.

Leipätekstiin liittyvät elementit

<H1> </H1>, <H2> </H2,> <H3> </H3>...<H6> </H6>
Otsikon merkitseminen. Fontti eli kirjasin on automaattisesti suurempi.

<P> </P>
Kappale-elementti. Elementin sisällöksi sijoitetaan yhtenäiseksi kappaleeksi tarkoitettu teksti.

Linkin laatiminen

<A> </A>
Linkki. Linkkaaminen toimii sekä toiseen dokumenttiin että saman dokumentin toiseen kohtaan.

Esimerkki linkistä - osoite, johon mennään on merkitty keltaisella:

Sääkartta on linkki, joka kirjoitetaan:

<a href="http://129.13.102.67/wz/pics/Rtavn125.html"> Sääkartta </a>)

Myös kuva tai muu merkki voi toimia linkkinä aivan kuten sanatkin.

Laaditaan linkki edellä olevaan sivupohjaan:

Tehtäviä

6 Kun sivusi on avattuna internetselaimessa valitse jälleen yläpalkista NÄYTÄ -> Lähde. Lisää johonkin kohtaan BODY -tagien väliin teksti: <A href=" http://www.yle.fi"> Klikkaa toiselle sivulle! </A>. Katso alla olevaa mallia.
Kun muutos on tehty valitse muistion yläpalkista TIEDOSTO -> Tallenna (tiedostolla oli jo nimi, joten sitä ei tarvitse enää nimetä). Sulje muistio ja päivitä internetsivusi painamalla F5.

7 Voit tehdä linkkejä lisää toistamalla kohdan 6. Osoitteita: http://www.google.com | http://evreka.suomi24.fi/ | http://fi.soneraplaza.net/ |

8 Seuraavaksi liitetään kuva sivulle: Tee jokin kuva esimerkiksi Paintilla tai muulla piirustusohjelmalla. Ainoana rajoituksena on, että kuva tulisi voida tallentaa gif- tai jpg -muotoiseksi eli esimerkiksi omakuva.gif tai maalaus.jpg (isokuva.bmp ei siis käy). Gif- ja jpg -pakatut tiedostomuodot ovat selaimille tuttuja. Kuvatiedoston tallennusvaihtoehdot ovat tarjolla ikkunan alareunassa, kun valitset TIEDOSTO -> Tallenna. Tee kuvan tallentaminen omaan kansioosi, jotta tekemäsi html -sivu löytää kuvan helposti.

Avaa html -sivusi jälleen internetselaimessa. Valitse jälleen yläpalkista NÄYTÄ -> Lähde. Lisää johonkin kohtaan BODY -tagien väliin teksti: <IMG SRC="C:\omakansio\omakuva.gif"> . Lainausmerkkien väliin tulee siis tekemäsi kuvan nimi ja tiedostotyyppi pisteellä erotettuna. Kun muutos on tehty valitse muistion yläpalkista TIEDOSTO -> Tallenna. Sulje muistio ja päivitä internetsivusi painamalla F5.

Img src eli image source, kuvan lähde.

<HTML>
             <HEAD>
               <TITLE>Sivun otsikko, näkyy selaimen otsikkorivillä</TITLE>
             </HEAD>
                         <BODY bgcolor="white" text="black">

                            <H1>Iso otsikko</H1>

                            <P> Sitten hiukan tekstiä.

<A href=" http://www.yle.fi">

Klikkaa toiselle sivulle! </A>

<IMG SRC="C:\omakansio\omakuva.gif">

</P>

</BODY>
</HTML>

Sivun pitäisi näyttää tältä ilman kuvaa eli elementtiä <IMG SRC="C:\omakansio\omakuva.gif">.

Tekijänoikeus eli mitä sivulle voit laittaa

Tekijänoikeuden keskeiset periaatteet ovat yksinkertaiset. Tekijällä on pääsääntöisesti yksinomainen oikeus määrätä teoksesta valmistamalla siitä kappaleita ja saattamalla se yleisön saataviin. Niinpä esimerkiksi teoksen julkaiseminen vaikkapa internet -sivulla edellyttää lupaa tekijältä. Hiljainen suostumus tai kiellon puuttuminen ei riitä. Tekijänoikeuden syntymiseksi edes © (copyright) -merkkiä ei välttämättä tarvita. Teoksia ovat muun muassa tekstit, piirrokset, valokuvat, sävellykset, elokuvat ja tietokoneohjelmat.

Lyhyesti seuraavat internet -sivuihin liittyvät käsitteet:

internetselain = html -sivujen selailuun käytettävä ohjelma esim. Netscape, Explorer ja Opera. Selaimet voivat näyttää sivun eri tavoin versiosta ja valmistajasta riippuen. Jos sivu näkyy moitteettomasti yhdellä selaimella, ei ole takeita vielä siitä, että kaikki näkisivät sivusi haluamallasi tavalla.
URL = Uniform Resource Locator on tapa kertoa hyperdokumentin osoite. Se voi olla esim: http://www.palvelin.maatunnus/dokumentti.html
http = HyperText Transfer protocol tietojen siirtämiskäytäntö www -järjestelmässä. Tämä löytyy internet -osoitteen alusta.
www = WorldWideWeb on maailmanlaajuinen hypermediaverkko, "webbi". Se on internetin mahdollistama palvelu (käyttöliittymä), jonka avulla toisiinsa verkotetuissa tietokoneissa olevia dokumentteja (esim. internet-sivuja) voi selailla ja linkittää toisiinsa.
html = HyperText Markup Language on sivunkuvauskieli jolla www -sivut yleensä tehdään. HTML on alunperin tarkoitettu esittämään dokumentin rakennetta ulkoasusta välittämättä. Käskyt ovat usein koodipareja eli tageja, <> ja </>, jotka aloittavat ja päättävät tietyn määrittelyn esim. <b> tekstiä </b> lihavoi sanan "tekstiä".
Html:llä kirjoitettu tekstitiedosto näkyy selaimella avattaessa normaalina internet -sivuna ilman tageja. Esimerkki: lähdekoodi ja selaimessa näkyvä sivu.
Useimpien webbisivujen html -lähdekoodia voit tarkastella valitsemalla selaimessa Näytä (View) -> Lähde (Page source).
fontti = kirjasin, tekstissä esiintyvien kirjaimien tyyli, väri ja koko vaihtelevat. Eri fonteilla on nimiä, kuten Arial, Times New Roman tai vaikkapa Haettenschweiler.
hyperteksti = teksti, joka sisältää linkkejä eli siirtymiä. Voit jotain sanaa klikkaamalla siirtyä toiseen kohtaan tai toiselle sivulle. Näin voit saada lisätietoa vaikka moottoripyöristä. Linkki on usein alleviivattu tai merkitty muuten poikkeavasti muusta tekstistä.
linkki = hypertekstissä esiintyvä siirtymä dokumentissa tai dokumenttien välillä.
CSS = Cascading Style Sheets eli tyylimäärittelyt.
W3C = Järjestö joka johtaa nykyisin HTML-kielen suunnittelua ja määrittelee standardit. Sivusi "oikeakielisyys" voidaan tarkistaa: Kokeile.
CGI -ohjelma = Ohjelma joka ajetaan palvelinkoneella. Useimmat laskurit, vieraskirjat ja esimerkiksi palautelomakkeet on toteutettu CGI -ohjelmina. Esimerkiksi:
JavaScript = Netscapen kehittämä kieli, jonka avulla voidaan tehdä tehosteita sivuille. Vanhat selaimet (< 4.0) eivät tue Javascriptiä. Selaimista voidaan kytkeä myös javascript pois päältä. Näin tehdyt tehosteet eivät välttämättä näy kaikille. Esimerkki.

HTML -kielen elementit koostuvat tageista

Jos teksti ympäröidään <- ja >-merkeillä, käsittelee selain sen html -tagina ja toimii sen mukaisesti. Kaikki muu teksti jätetään käsittelemättä ja näkyy selainikkunassa sellaisenaan.

On olemassa kahdenlaisia elementtejä.

Elementti sisältää on aloitus- ja lopetustagin: esim. <b></b>
Elementissä on vain yksi tagi: esim. <hr><br><img> .

Jos elementti on kaksitaginen, lopetustagi on muuten samanlainen kuin aloitustagi, paitsi että siinä on kauttaviiva ennen perustagin nimeä.

<HTML> </HTML>
HTML -tagit laitetaan aina HTML -dokumentin alkuun ja loppuun. Elementti ilmaisee selaimelle, että tiedostossa käytetään HTML-kieltä.

<HEAD> </HEAD>
HEAD-tagien sisällöksi (väliin) sijoitetaan tiettyjä elementtejä, esimerkiksi TITLE, BASE, LINK jne. Elementti sijoittuu HTML-tagin jälkeen ennen BODY -tagia. Tämä ei ole kovin tärkeä osa aloittelijalle lukuunottamatta otsikkoa.

<BASE>
Määrittelee mm. kaikkien tiedostossa olevien linkkien kohdekehyksen. E
<META>
Ilmaisee tietoja sivusta sekä sen tekijästä hakuroboteille ja lähdekoodin katsojille.
<TITLE> </TITLE>
Elementillä määritellään otsikkorivin teksti. Näkyy selaimen yläpalkissa.
<STYLE> </STYLE>
STYLE -elementin sisältönä tulee olla koko dokumenttia koskevat tyylimäärittelyt.
Esim.
<STYLE TYPE="text/css">

</style>
Määrittelyn mukainen sivu.

<BODY> </BODY>
BODY-tagien väliin tulee kaikki näkyvä sisältö. Aloitustagin tarkenteilla voidaan määritellä tekstin väri ja muita tietoja. Esimerkiksi tagi <BODY BGCOLOR="gray" TEXT="black"> määrittää taustan värin harmaaksi ja tekstin mustaksi.
Muita värejä: silver, white, maroon, red, purple, teal, aqua, green, lime, olive, yellow, fuchsia, blue ja navy. Lisäksi vodaan käyttää heksadesimaalimerkintää esim. "#FFC575" (aprikoosi).

Leipätekstiin liittyvät elementit

<BASEFONT>
Määrää koko dokumentille perusfontin: tyylin, koon ja värin. Tätä käytetään, jos muuta ei ole määritelty <font> -tagilla. Esim. <basefont face="Arial" size="2" color="#FF00FF">

<FONT> </FONT>
Määrittelee käytettävän fontin koon, värin ja tyylin. Esim. <font face="Times New Roman" size="2" color="#FF00FF">

<BR>
Rivinvaihto. (BReak)

<H1> </H1>, <H2> </H2,> <H3> </H3>...<H6> </H6>
Otsikon merkitseminen. Fontti eli kirjasin on automaattisesti suurempi. H1 on suurin H6 on pienin

<P> </P>
Kappale-elementti. Elementin sisällöksi sijoitetaan yhtenäiseksi kappaleeksi tarkoitettu teksti.

<B> </B>
Lihavointi. Esim. Lihavoitu.

<I> </I>
Kursivoi elementin sisältönä olevan tekstin. Esim. kursivoitu.

<DIV ALIGN=" "> </DIV>
Tätä elementtiä käytetään usein tekstin keskittämiseen (center) ja sen asemoimiseen oikealle (right).

Esim. asemoitu oikealle.

Listoihin liittyvät elementit

<UL> </UL>

Tekee tavallisen listan, jonka alussa on pallot.

<OL> </OL>

Tekee numeroidun listan.
Tagien väliin tulee LI-elementtejä.

<LI> </LI>
Yksi listan kohta tulee aina yhden LI-elementin sisällöksi.

Taulukoihin liittyvät elementit

<TABLE> </TABLE>
Tekee taulukon. Alla on esimerkki taulukosta, jossa on kaksi riviä <TR> ja kolme solua rivillä<TD>. Esimerkin html -määrittely:

<table>

<tr>
<td>1. solu</td> <td>2. solu</td> <td>3. solu</td>
</tr>

<tr>
<td>1. solu</td> <td>2. solu</td> <td>3. solu</td>
</tr>

</table>

Ja lopputulos:

1. solu	2. solu	3. solu
1. solu	2. solu	3. solu

<TR> </TR>
TABLE-elementin sisällöksi tulee niin monta TR -elementtiä, kuin on taulukossa rivejä.

<TD> </TD>
TR-elementin sisällöksi tulee niin monta TD -elementtiä kuin on rivissä soluja. Määritellään siis samalla sarakkeet.

Muut elementit

<A> </A>
Linkki. Linkkaaminen toimii sekä toiseen dokumenttiin että saman dokumentin toiseen kohtaan.

Esimerkki linkistä:

Moottoripyörät, joka voidaan kirjoittaa (HTML: <a href="http://www.motopörssi.fi">Moottoripyörät</a>) tai
Mikä on fontti?
(HTML: <A href="http://koti.mbnet.fi/~solmu/ohje/default.htm#fontti">Mikä on fontti?</A> ja tekstiin ankkuriksi: <A name=fontti>)
Tämä linkki on viittaus tiettyyn tekstin kohtaan, vaikka samalla sivulla. Ankkuri A name= sijoitetaan haluttuun kohtaan halutulla kirjanmerkillä, tässä tapauksessa "fontti". Myös kuva tai muu merkki voi toimia linkkinä aivan kuten sanatkin.

<IMG>
Liittää kuvan html -sivulle (img src eli image source, kuvan lähde).

Esimerkiksi:

<IMG SRC="kuva.gif">

<IMG SRC="http://koti.mbnet.fi/~solmu/koulua4.jpg" WIDTH="80" HEIGHT="90" ALIGN="LEFT" ALT="Koulun pääty">

Tämä koodi liittää sivulle kuvan koulua4.jpg ja määrittelee sen leveydeksi 80 ja korkeudeksi 90 pikseliä eli kuvapistettä, asemoi kuvan vasemmalle sekä liittää kuvaan selitteen, joka tulee esiin, kun hiiri on kuvan päällä. Lopputulos:

<HR>
Luo vaakatasossa olevan viivan. Kuten yllä.

<MARQUEE> </MARQUEE>

Testaa.

Älä käytä, jos ei ole pakko. Ei näy kaikissa selaimissa.

FrontPage Expressin käytöstä

HTML -editori FrontPage Express tulee Microsoftin selainohjelman Internet Explorer 4.0:n mukana. Ohjelma tekee HTML -koodia huomaamattomasti taustalla, käyttäjä näkee periaatteessa lopputuloksen kirjoittaessaan. Lähdekoodista tulee kuitenkin usein sotkuista ja mukaan voi tulla ominaisuuksia, jotka eivät näy oikein kaikissa selaimissa. Ei ole kovin suositeltavaa rakentaa sivuja tämäntyyppisellä ohjelmalla, ymmärtämättä HTML -koodista edes perusteita. FrontPage voi ollakin parhaimmillaan mainio apuri sivujen suunnittelua helpottamaan. Viimeistely ja siistiminen on kuitenkin varauduttava tekemään aina muistiolla tai muulla tekstinkäsittelyohjelmalla lähdekoodista käsin.

Katso myös: Internet -valinnaiskurssi - Opetusmateriaalia 3

Miten mielenkiintoisen sivun saa tuottamaan?

Jos kotisivun sisältö kiinnostaa muitakin internetinkäyttäjiä, voidaan harkita mainostilan myymistä sivuille. Mainokset toimivat yleensä paitsi kaupallisina tiedotteina myös hyperlinkkeinä mainostajan sivuille. Tällaiset mainosbannerilinkit johtavat tiettyä merkittyä polkua kohteeseensa, jolloin hiiren klikkaukset ja sivujesi kautta siirtyneiden asiakkaiden toimeksiannot voidaan rekisteröidä. Tämä yksilöity rekisteröintitieto on saatavan palkkion peruste. Mainoksista voidaan tietysti maksaa myös kertakorvaus painetun median tavoin. Suomessa toimivista mainosten välittäjistä Tradedoubler lienee selkein ja yksinkertaisin vaihtoehto aloittelijalle. Alla olevasta linkistä voit pyytää lisätietoja sähköpostiisi.

Kehykset

FRAMESET-komento määrittelee kehysjaon eli html -määrittelyn, jolla saadaan useita sivuja samalle sivulle. Kehysten tavallinen käyttötapa on reunaan sijoitettava valikkosivu ja pääkehys, johon ladataan uusia sivuja valikon linkeistä. Parametrit ROWS ja COLS määräävät moneenko ja minkä kokoisiin riveihin ja sarakkeisiin sivu jaetaan. Tästä lisää: Opetusmateriaalia 4.

Musiikki internetsivulla

Äänitiedostojen tallennusmuotoja ovat internetissä yleensä midi eli Musical Instrument Digital Interface (.mid) ja wavetable eli aaltoääni (.wav). Muita www -ympäristössä mahdollisia audioformaatteja ovat .au ja .aiff sekä RealPlayer -ääni (.ra). Tästä lisää: Opetusmateriaalia 1.

Animaatiot internetsivulla

Animaatioiden tekeminen on melko helppoa siihen tarkoitettujen ohjelmien avulla. WWW Gif Animatorin tai jonkin muun ohjelman löydät esimerkiksi Tucowsin ohjelmakirjastosta. Animaatio-ohjelman ideana on vaihtaa kuvia nopeassa temmossa niin, että parhaimmillaan syntyy vaikutelma liikkeestä. Esimerkiksi Motopörssin mainosanimaatiot edustavat animaatioiden tyypillistä käyttötapaa www -ympäristössä. Tästä lisää: Opetusmateriaalia 5.

WWW -sivut omalta koneelta Internettiin

Kun sivusi alkaa näyttää valmiilta kotikoneella, on aika testata sitä Internetissä. Mitä tarvitset tähän?

Tarvitaan ensimmäiseksi palvelu, joka tarjoaa sivuille paikan. Internetyhteyden tarjoajat Sonera, Elisa, Surfeu, Mbnet ym. sisällyttävät kotisivutilan usein palvelupakettiinsa. On olemassa myös ilmaisia kotisivuntarjoajia.

Joka tapauksessa tarvitaan 1) käyttäjätunnus ja 2) salasana (kuten sähköpostissa) sekä 3) palvelintietokoneen osoite, johon sivut siirretään (esim. ftp.mbnet.fi). Tämä ei ole kuitenkaan vielä sivujesi osoite, vaan ne tulevat esimerkiksi muotoon www.palveluntarjoaja.com/tunnuksesi.
Tästä lisää: Opetusmateriaalia 5.