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 HTML-dokumentin?

HTML5-sivun pohja

<!DOCTYPE html>
<html lang="fi">
<head>
<meta charset="iso-8859-1">
<link href="tyyli.css" rel="StyleSheet" type="text/css">
<title>Sivun otsikko</title>
</head>
<body>
...Sivun sisältö tänne...
</body>
</html>

HUOM! Yllä olevassa esimerkissä merkistö voisi olla vaihtoehtoisesti utf-8 (valinta riippuu mm. käytettävän editorin asetuksista). Jos taas validaattori herjaa merkistöstä, vaikka dokumentti olisi luotu käyttäen esimerkissä käytettyä iso-8859-1-merkistöä, vaihda merkistö muotoon windows-1252.

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>

Tällä hetkellä WWW-sivuja on järkevintä tehdä HTML5-kuvauskielellä, joka on tulevaisuutta ja jonka kehitystyö sai suosituksen aseman (Recommendation) syksyllä 2014. HTML5 kehitettiin korvaamaan vanhentunut HTML4 sekä XHTML. HTML5-kielessä on pyritty yhdistämään HTML:n ja XHTML:n hyvät puolet. Uusimpien selainten tuki HTML5:lle on jo hyvä.

Perusperiaatteet molemmissa kuvauskielissä (HTML5 ja XHTML) ovat samat; HTML5 toki tuo mukanaan sellaisia ominaisuuksia, joita XHTML:ssä ei ole. HTML5:sen mukanaan tuomia uusia ominaisuuksia käydään läpi seuraavalla luennolla. Jos on tottunut tekemään WWW-sivuja XHTML-kielellä, ei siitä ole pakko luopua; tällöin ei vain pysty hyödyntämään HTML5-kielen mukana tulleita uusia ominaisuuksia.

Tällä luentosivulla kaikki esimerkit ovat sekä validia HTML5:sta että XHTML:ää.

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.

HUOM! HTML5 tuo hyviä lisäominaisuuksia lomakkeisiin. Niitä käydään läpi seuraavalla luennolla.

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">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" 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 (tai muulta vastaavalta ohjesivulta) löytyy. Näiden tietojen perusteella voimme tehdä oman hakulomakkeen ja laittaa sen käsittelijän osoittamaan hakukoneen ohjelmaan.

Googlen Hakuoperaattorit-sivulta löytyy, 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öytyy myös, että parametri q on hakutermi. Parametrilla as_q voidaan lisätä myös muita hakutermejä. Referenssidokumentteja tutkimalla löytyy myös parametrit ie (hakutermien merkistökoodaus), oe (hakutulosten merkistökoodaus) ja hl (Googlen käyttöliittymän kieli). Näiden perusteella voidaan tehdä lomake, 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 voi tehdä indeksoinnin esimerkiksi muutaman 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 Lisää 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/>
2016-11-02 16:16:47
Informaatioteknologia - Jyväskylän yliopiston informaatioteknologian tiedekunta