WWW-sivustojen ja WWW-lomakkeiden luominen - Luento 2

Luennon aiheina ovat WWW-sivuston (HTML-puoli, tärkeimmät elementit) sekä WWW-lomakkeiden luominen.

Luentotaltiointi

Ongelmia videon katselussa?

Peruselementtien kertaus

Miten luon XHTML-dokumentin?

XHTML-sivun pohja

<?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>
  <link href="tyyli.css" rel="StyleSheet" type="text/css" />
  <title>Sivun otsikko</title>
</head>
<body>
  ...Sivun sisältö tänne...
</body>
</html>

Hakemistorakenne

Esimerkkihakemistorakenne

Miten voidaan luoda kokonainen sivusto?

Hyperlinkit - a

a-elementillä voidaan toteuttaa hypertekstilinkki joko toiseen dokumenttiin tai sitten saman dokumentin toiseen kohtaan. a-elementti pitää sijoittaa jonkun lohkotason elementin sisälle.

Uusia lohkotason elementtejä

Lohkotason elementeillä merkitään tyypillisesti pidempiä tekstiosioita, kuten kappaleita, listoja ja taulukoita. Lohkotason elementin sisällä saa olla tai ei saa olla toisia lohkotason elementtejä riippuen elementistä.

Osoite - address

address-elementillä merkitään dokumentin tekijän yhteystiedot. Elementillä ei siis merkitä muita kuin dokumentin tekijän yhteystietoja.

Esimerkkikoodi:

<address>
  <a href="http://www.ekonoja.net">Antti Ekonoja</a>
  (<a href="mailto:antti.j.ekonoja@jyu.fi">antti.j.ekonoja@jyu.fi</a>)
  <URL: <a href="http://www.ekonoja.net">http://www.ekonoja.net</a>>
</address>

Muotoilematon teksti - pre

pre-elementillä merkitään tekstilohkot, joissa on välttämätöntä säilyttää tekstin alkuperäinen kirjoitusasu. Elementtiä käytetään esimerkiksi ohjelmakoodilistauksissa.

Esimerkkikoodi (CSS-koodi) tietystä navigointipalkista:

<pre>
.navbar {
  border-style: solid;
  border-width: 1px;
  background-color: yellow;
  color: black;
  text-align: center;
  font-weight: bold;
  width: 100%;
  height: 2em;
  padding: 0.5em;
  position: fixed;
  top: 0%;
  left: 0%;
}
</pre>

Yleinen lohko - div

div-elementti on yleinen lohkotason elementti, jota käytetään merkitsemään erilaisia lohkoja. Esimerkiksi CSS-tyylejä käytettäessä div-elementtiä käytetään, jos ei löydetä vastaavaa kappaletason elementtiä. Seuraavassa esimerkissä on nähtävillä tällä sivulla olevan navigointipalkin lähdekoodi:

<div id="navbartop" class="navbartop">    
  <ul>
     <li><a accesskey="l" title="Luennot (ALT-l)" href="../../luennot/">Luennot</a></li>
     <li><a accesskey="d" title="Demot (ALT-d)" href="../../demot/">Demot</a></li>
     <li><a accesskey="o" title="Oppimistehtävät (ALT-o)" href="../../oppimistehtavat/">Oppimistehtävät</a></li>
  </ul>
</div>

Määritelmälista - dl

Esimerkki määritelmälistasta:

CSS
Cascading Style Sheets
XHTML
eXtensible Hypertext Markup Language
<dl>
<dt>CSS</dt>
<dd>Cascading Style Sheets</dd>

<dt>XHTML</dt>
<dd>eXtensible Hypertext Markup Language</dd>
</dl>

Uusia tekstitason elementtejä

Tekstitason elementeillä ilmaistaan lyhyiden tekstin osien rakennetta. Tekstitason elementit sijaitsevat lohkotason elementtien sisällä.

Määritelmät

Esimerkit

Muotoilut

WWW-lomakkeen tekeminen

Lomakelohko sijoitetaan body-elementin sisään form-elementillä:

<form action="http://palvelin/kasittelijaohjelma" method="post">
...
</form>

Lomakkeita tehdessä kannattaa pitäytyä pelkistetyissä, yksinkertaisissa muodoissa, eikä alkaa liikaa kikkailemaan elementeillä. Seuraavassa kuvassa on nähtävillä yleisimmät lomakkeella käytettävät elementit sekä input-elementin erilaiset tyypit. Seuraavassa käydään esimerkkien avulla tarkemmin läpi lomake-elementtejä ja niiden toimintaa.

Lomake-elementtien esittely

Lomake-elementit esimerkkeineen
ElementtiKoodiEsimerkki
Kentän otsikko ja tekstikenttä
<label for="lempinimi" accesskey="L">
Lempinimi: </label>
<input id="lempinimi" type="text" name="nick"
 maxlength="11" size="20" value="Kutsumanimi" 
 title="Anna lempinimi, jota käytät palvelussa" />
Salasana
<label for="salasana">Salasana: </label>
<input id="salasana" type="password" 
 name="passwd" value="" />
Valintaruutu
<label for="kissa">Kissa</label>
<input id="kissa" type="checkbox" 
 name="lemmikit" value="kissa"
 checked="checked" /><br />
<label for="koira">Koira</label>
<input id="koira" type="checkbox" 
 name="lemmikit" value="koira" />
Valintanappi
<label for="mies">Mies</label>
<input id="mies" type="radio" 
 name="sukupuoli" value="mies" /><br />
<label for="nainen">Nainen</label>
<input id="nainen" type="radio" 
 name="sukupuoli" value="nainen"
 checked="checked" />
Tekstialue 
<label for="txtalue">Vapaat kommentit:</label>
<textarea id="txtalue" name="kommentti" 
 rows="5" cols="20">Sana on vapaa...</textarea>
Valintalista ryhmittelyillä 
<label for="ruokapaikat">Ruokailupaikkani</label>
<select id="ruokapaikat" name="ruokap">
<optgroup label="Pizza">
<option value="kotipizza">Kotipizza</option>
<option value="rax">Rax</option>
<option value="rosso" 
 selected="selected">Rosso</option>
</optgroup>
<optgroup label="Burger">
<option value="mcd">McDonald's</option>
<option value="hese" 
 selected="selected">Hesburger</option>
</optgroup>
</select>

Lomake-elementtien ryhmittely
<fieldset>
<legend>Valintoja</legend>
<input type="text" name="testi" />
</fieldset>
Valintoja
Kuva-painike
<input type="image" src="laheta.png" name="laheta"
 value="klikattukuvaa" alt="[Lähetä]"
 title="Lähettää lomakkeen tiedot" />

Tiedosto-painike 
<label for="filerequest">Valitse tiedosto:</label>
<input type="file" id="filerequest" 
name="siirrettava_tiedosto"
accept="application/rtf" />

Piilokenttä
<input type="hidden" name="ohjaus"
 value="lomake8" />
Lähetä-painike
<input type="submit" name="laheta"
 value="Lähetä tiedot" />
Tyhjennä-painike
<input type="reset" name="tyhjenna"
 value="Tyhjennä lomake" />

label - kentän otsikko

input - text, radio, checkbox, hidden ja submit

input-elementin avulla lomakkeelle saadaan toteutettua useita erilaisia lomakekenttiä. Muuttamalla elementin type-attribuutin arvoa saadaan elementistä tehtyä seuraavassa lyhyesti esiteltäviä lomakekenttiä.

Muutamia muita input-elementin attribuutteja

select - valintalista

select-elementtiä käytetään erilaisten valintalistojen tekemiseen. Valintalistoilla saadaan määriteltyä vaihtoehtoisia valintoja tai pystytään valitsemaan useampi asia kerralla. option-elementtien sisälle määritellään valintalistaan liittyvät valinnat. Valintalistojen käytöllä saavutetaan seuraavia hyviä ja huonoja puolia:

Valintalistaan liittyviä attribuutteja

textarea - tekstialue

Seuraavassa muutamia textarea-elementin attribuutteja

button - yleispainike

Seuraavassa esimerkissä liitetään submit-painikkeen yhteyteen kuva. 

<button name="laheta" type="submit">
<img src="kuva.jpg" alt="Lähetä" />
</button>

fieldset ja legend - lomakkeen rakenne

Lomakkeen rakennetta voidaan selkeyttää fieldset- ja legend-elementtien avulla.

Hakulomake omalle sivulle Googlea hyödyntäen

Sivustohaun toteuttaminen vaatii melko hyvää ohjelmointitaitoa. Voimme kuitenkin käyttää hakukoneiden tarjoamia rajapintoja hakulomakkeen tekemiseksi. Tarvitsemme hakupalvelun, joka antaa rajoittaa haun omille sivuillemme. Lähtökohtana voimme tutkia, mitä parametreja osoiteriviltä löytyy tai millainen lomake hakukoneen Advanced search -sivulta löytyy. Näiden tietojen perusteella voimme tehdä oman hakulomakkeen ja laittaa sen käsittelijän osoittamaan hakukoneen ohjelmaan.

Googlen Operators and more search help -sivulta löydämme, että jos hakutermissä on site:, niin tällä voi rajoittaa Googlen hakua WWW-osoitteen mukaan.

Search Protocol Reference ja Googlen webbikäyttöliittymän ja haun kielikoodit -sivuilta löydämme myös, että parametri q on hakutermi. Parametrilla as_q voidaan lisätä myös muita hakutermejä. Referenssidokumentteja tutkimalla löydämme myös parametrit ie (hakutermien merkistökoodaus), oe (hakutulosten merkistökoodaus) ja hl (Googlen käyttöliittymän kieli). Näiden perusteella teemme lomakkeen, joka rajoittuu kurssisivustolle:

<form action="http://www.google.com/search" method="get">
<fieldset>
<legend>Haku</legend>
<input type="hidden" name="ie" value="iso-8859-1" />
<input type="hidden" name="oe" value="iso-8859-1" />
<input type="hidden" name="hl" value="fi" />
<input type="hidden" name="as_q" value="site:appro.mit.jyu.fi/opetusteknologia" />
<p><label for="hakusana">Hae kurssisivuilta</label>
<input type="text" size="20" id="hakusana" name="q" value="" /></p>
<p><input type="submit" value="Hae" /></p>
</fieldset>
</form>

Omille sivuille tehtävissä hauissa käy joskus niin, että Google ei löydä yhtään hakutulosta millään hakusanalla. Tähän syynä on se, että Google ei ole vielä indeksoinut sivuasi tietokantaansa. Automaattinen indeksointi vaatii sen, että joltain jo indeksoidulta sivulta on linkki sivullesi. Google tekee indeksoinnin yleensä noin kerran viikossa, eli ihan heti uudet sivut eivät Googlen avulla löydy mitenkään.

Hyödyllisiä laajennuksia ja aputyökaluja

Seuraavista Firefoxin laajennuksista on huomattavasti hyötyä WWW-sivujen ylläpidossa:

Laajennoksien lisäksi kannattaa muistaa hyödyntää seuraavia W3C:n aputyökaluja:

Käyttäjien kommentit

Kommentoi tätä sivua Lisää uusi kommentti
Kurssimateriaalien käyttäminen kaupallisiin tarkoituksiin tai opetusmateriaalina ilman lupaa on ehdottomasti kielletty!
http://appro.mit.jyu.fi/opetusteknologia/luennot/luento2/
© Antti Ekonoja (antti.j.ekonoja@jyu.fi) <http://users.jyu.fi/~anjoekon/>
Tommi Lahtonen (tommi.j.lahtonen@jyu.fi) <http://hazor.iki.fi/>
2012-03-21 14:46:17
Informaatioteknologia - Jyväskylän yliopiston informaatioteknologian tiedekunta