Tee oma web-sivu, osa 4


Artikkelisarjan viimeisessä osassa tutustutaan taulukoiden sekä kehyksien käyttöön kotisivulla. Lisäksi näytetään, miten voit tehdä esimerkiksi palautelomakkeen kotisivuillesi.

Taulukko

Taulukkoa voi käyttää kotisivulla tietojen esittämiseen taulukkomuodossa tai vaihtoehtoisesti koko sivun sisällön voi laittaa taulukkoon, jolloin tietojen asetelmointi juuri halutulla tavalla on helppoa. Taulukoita voi olla myös useita sisäkkäin.

<TABLE> </TABLE>
Määrittelee taulukon alkamisen ja päättymisen. TABLE -tagissa voi käyttää seuraavia määritteitä:

  • BORDER=arvo , taulukon reunaviivan leveys pikseleinä.
  • CELLSPACING=arvo , taulukon solujen etäisyys pikseleinä toisiinsa nähden.
  • CELLPADDING=arvo , taulukon solujen sisällön ja kehyksen välinen etäisyys pikseleinä.
  • WIDTH=arvo , taulukon leveys joko pikseleinä tai prosentteina.

<TR> </TR>
Määrittelee taulukkorivin alkamisen ja päättymisen. TR -tagissa voi käyttää seuraavia määritteitä:

  • ALIGN="arvo" , tekstin vaakasuuntainen asetelmointi soluissa. Arvona voi olla joko LEFT (vasemmassa laidassa), CENTER (keskitetty) tai RIGHT (oikeassa laidassa). Koskee kaikkia taulukkorivin soluja ellei niissä ole omaa määritystä.
  • VALIGN="arvo" , tekstin pystysuuntainen asetelmointi soluissa. Arvona voi olla joko TOP (ylälaidassa), MIDDLE (keskitetty) tai BOTTOM (alalaidassa). Koskee kaikkia taulukkorivin soluja ellei niissä ole omaa määritystä.

<TD> </TD>
Taulukon solu. Teksti on oletusarvoisesti vasemmassa laidassa. TD -tagissa voi käyttää seuraavia määritteitä:

  • ALIGN="arvo" , tekstin vaakasuuntainen asetelmointi soluissa. Arvona voi olla joko LEFT (vasemmassa laidassa), CENTER (keskitetty) tai RIGHT (oikeassa laidassa). Koskee vain kyseistä solua.
  • VALIGN="arvo" , tekstin pystysuuntainen asetelmointi soluissa. Arvona voi olla joko TOP (ylälaidassa), MIDDLE (keskitetty) tai BOTTOM (alalaidassa). Koskee vain kyseistä solua.
  • NOWRAP , määrittelee, ettei solun sisältöä rivitetä.
  • COLSPAN=arvo , määrittelee, montako vaakasuuntaista taulukon solua yhdistetään yhdeksi soluksi.
  • ROWSPAN=arvo , määrittelee, montako pystysuuntaista taulukon solua yhdistetään yhdeksi soluksi.
  • WIDTH=arvo , solun leveys joko pikseleinä tai prosentteina taulukon koko leveydestä.
Mikäli taulukkoon tehdään tyhjä solu, on soluun hyvä laittaa joko non breaking space -tagi (<TD>&nbsp;</TD>) tai BR -tagi (<TD><BR></TD>), jotta kyseisen solun ulkomuoto vastaa muita soluja.

<TH> </TH>
Taulukon otsikkosolu. Muuten täysin sama kuin TD -tagi paitsi teksti on lihavoitua ja oletusarvoisesti keskitetty. TH -tagissa käytetään samoja määritteitä kuin TD - tagissa.

<CAPTION> </CAPTION>
Taulukon otsikko. Ei saa sijaita TR - tai TD -tagien sisällä.

Esimerkkejä:
<TABLE>
<TR> <TD>Solu1</TD> <TD>Solu2</TD> </TR>
<TR> <TD>Solu3</TD> <TD>Solu4</TD> </TR>
</TABLE>

Dokumentissa:
Solu1Solu2
Solu3Solu4

<TABLE BORDER = 5 CELLSPACING = 4 CELLPADDING = 8>
<TR> <TD>Solu1</TD> <TD>Solu2</TD> </TR>
<TR> <TD>Solu3</TD> <TD>Solu4</TD> </TR>
</TABLE>

Dokumentissa:
Solu1Solu2
Solu3Solu4

<TABLE BORDER = 5 CELLSPACING = 4 CELLPADDING = 8>
<TR> <TD COLSPAN = 2>Solu1 leveänä</TD> </TR>
<TR> <TD>Solu2</TD> <TH>Solu3 (otsikkosolu)</TH> </TR>
</TABLE>

Dokumentissa:
Solu1 leveänä
Solu2Solu3 (otsikkosolu)




Kehykset

Kehyksillä voi tehdä sivuston, jossa osa sivusta pysyy jatkuvasti samana (esimerkiksi linkit) ja toinen osa vaihtuu valintojen mukaan. Koska vanhemmat selaimet eivät tue kehyksiä, on sivuista tehtävä myös "No Frame" - versio. Kehyksiin ladattavat sivut ovat rakenteeltaan täysin normaaleja HTML -sivuja.

Kehyksin varustetun sivuston perusrakenne on seuraava:

<HTML> <HEAD> <TITLE>Otsikko</TITLE> </HEAD>
<FRAMESET>          <- Kehysmäärittelyt alkavat.
<FRAME>             <- Ensimmäinen kehys.
<FRAME>             <- Toinen kehys.
</FRAMESET>         <- Kehysmäärittelyt päättyvät.
<NOFRAMES>          <- "No Frame" - osa alkaa.
<BODY>
Tähän tulee sivu, joka näytetään käyttäjälle, jonka selain ei tue kehyksiä.
</BODY>
</NOFRAMES>         <- "No Frame" - osan päättyminen.
</HTML>
<FRAMESET> </FRAMESET>
Määrittelee kehyksien määrittelyjen alkamisen ja päättymisen. FRAMESET -tagissa voi käyttää seuraavia määritteitä:
  • ROWS = "arvo" , Vaakasuuntaisten kehyksien korkeudet pikseleinä, suhteellisena tai vapaasti määrittyvinä. Vaakasuuntaisia kehyksiä tulee sivulle yhtä monta kuin ROWS -määritteessä on määritelty. Mikäli ROWS -määrittely puuttuu, tulee kuvaruudulle yksi vaakasuuntainen kehys.
  • COLS = "arvo" , pystysuuntaisten kehyksien leveydet. Toiminta sama kuin ROWS -määritteessä.
Arvona voi käyttää seuraavia arvoja:
  • xxx , numero (esim. 200) määrittelee kiinteän leveyden tai korkeuden.
  • xx% , prosenttiarvo (esim. 20%) määrittelee leveyden tai korkeuden sivun kokonaiskoosta.
  • * , määrittää leveyden tai korkeuden määräytymään vapaasti.
Esimerkkejä:
<FRAMESET COLS="200,*">
Määrittelee kaksi pystykehystä, joista ensimmäinen (vasemmanpuoleinen) on 200 pikseliä leveä ja toinen kehys saa loput käytettävissä olevasta tilasta.

<FRAMESET ROWS="100,*,100">
Määrittelee kolme kehystä, joista ylin ja alin ovat korkeudeltaan 100 pikseliä ja keskellä oleva kehys saa loput käytettävissä olevasta tilasta.

<FRAME>
Määrittelee kehyksiin tulevat sivut. FRAME -tageja tulee olla yhtä monta kuin FRAMESET -tagissa on määritelty kehyksiä. FRAME -tagissa voi käyttää seuraavia määritteitä:

  • SRC="url" , kehykseen tuleva HTML sivu.
  • NAME="window_name" , kehyksen nimi. Tarvitaan, jotta kehykseen voidaan ohjata latautumaan uusia sivuja. Voidaan myös jättää pois, mikäli kyseisen kehyksen sisältöä ei ole tarvetta muuttaa.
  • MARGINWIDTH="arvo" , kehyksen marginaalit leveyssuunnassa pikseleinä.
  • MARGINHEIGHT="arvo" , kehyksen marginaalit korkeussuunnassa pikseleinä.
  • SCROLLING="arvo" , kehyksen vierityspalkit. Arvoina voi olla "Yes" jolloin vierityspalkit on näkyvillä koko ajan, "No" jolloin vierityspalkkeja ei näytetä tai "Auto" jolloin vierityspalkit näytetään mikäli se on tarpeen.
  • NORESIZE , määritteellä estetään käyttäjää muuttamasta kehysten kokoja.
Esimerkkejä:
<FRAME SRC = "ekasivu.htm" MARGINWIDTH="20" MARGINHEIGHT="20" NORESIZE>
Kehykseen latautuu sivu "ekasivu.htm" ja kehyksen marginaalit ovat 20 pikseliä. Käyttäjä ei voi muuttaa kehyksen kokoa.

<FRAME SRC="tokasivu.htm" NAME="kohde">
Kehykseen latautuu sivu "tokasivu.htm" . Kehyksen nimi on "kohde".

<TARGET>
Tagilla ohjataan sivujen latautumista käyttäjän painaessa kehyksellisten sivujen linkkejä. Tagilla voi määritellä sivun aukeamaan halutun nimiseen kehykseen. TARGET -tagissa voi käyttää myös seuraavia kiinteitä määritteitä:

  • <A HREF="sivu.htm" TARGET="_blank">...</A> , ohjaa sivun latautumaan aina uuteen ikkunaan.
  • <A HREF="sivu.htm" TARGET="_self">...</A> , ohjaa sivun latautumaan samaan kehykseen linkin kanssa.
  • <A HREF="sivu.htm" TARGET="_parent">...</A> , ohjaa sivun latautumaan FRAMESET:in seuraavaan kehykseen paitsi mikäli sitä ei ole, toimii samoin kuin "_self"
  • <A HREF="sivu.htm" TARGET="_top">...</A> , ohjaa sivun latautumaan koko kuvaruudulle. Käytetään mm. silloin, kun linkitetään muiden sivuja omille kehyksellisille sivuille.
Esimerkkejä:
<A HREF="sivu.htm" TARGET="kohde">...</A> Sivu nimeltään "sivu.htm" aukeaa kehykseen jonka nimi on "kohde".

<BASE TARGET="kohde"> Sijoitetaan HTML-dokumentin HEAD -tagien sisään. Ohjaa kaikki linkkien sivut aukeamaan "kohde" - nimiseen kehykseen, ellei linkin yhteydessä toisin määritellä.




Lomakkeet

Lomakkeilla voi tehdä esimerkiksi palaute - tai tilauslomakkeen. Lomakkeiden käsittely tapahtuu palveluntarjoajan koneella sijaitsevalla skriptillä (apuohjelmalla), joka lähettää käsitellyt tiedot käyttäjälle emailina.

<FORM METHOD="lähetystapa" ACTION="skripti"> </FORM>
FORM -tagilla määritellään lomakeosan alkaminen HTML -sivulla sekä lähetystapaan liittyvät tiedot. Tagiin tulee seuraavat kaksi määritettä jotka molemmat ovat pakollisia:

  • METHOD = "lähetystapa" , lomakkeen lähetystapa. Vaihtoehtoina on "POST" ja "GET". Oikea lähetystapa tulee kysyä palveluntarjoajalta.
  • ACTION = "skripti" , määrittelee palveluntarjoajan koneella sijaitsevan apuohjelman, joka suorittaa lomakkeen käsittelyn sekä tietojen jatkolähetyksen käyttäjälle. Skriptin määrittely kysyttävä palveluntarjoajalta.

<FORM> - ja </FORM> -tagien väliin tulee varsinaiset syöttökentät. Vaihtoehtoina on seuraavat:

<INPUT>
Yleisin lomaketagi, jolla on useita eri vaihtoehtoja. Tagissa voi käyttää seuraavia määrittelyjä:

  • TYPE = "tyyppi" , input - kentän tyyppi. Oletuksena TEXT. Vaihtoehtoina voi olla
    • TEXT , tekstikenttä
    • PASSWORD , salasanakenttä, johon syötetyt merkit näytetään tähtinä.
    • RADIO , valintapainike. Vain yksi samanniminen voi olla kerrallaan valittuna.
    • CHECKBOX , valintaruutu. Useita samannimisiä voi olla valittuna.
    • HIDDEN , piilokenttä, jota ei näytetä käyttäjälle. Tarvitaan, mikäli lomakkeen täytyy välittää jotain perustietoja sitä käsittelevälle apuohjelmalle.
    • RESET , tyhjennyspainike, jolla käyttäjä voi tyhjentää syöttämänsä tiedot lomakkeelta.
    • SUBMIT , lähetyspainike, jolla lomakkeen tietojen lähetys tapahtuu.
  • NAME = "kentän nimi" , kyseisen syöttökentän nimi. Pakollinen muissa kuin RESET - ja SUBMIT - tyypeissä.
  • VALUE = "teksti" , määrittää syöttökentässä valmiiksi näytettävän tekstin. RESET - ja SUBMIT - tyypeissä määrittää painikkeessa näytettävän tekstin.
  • CHECKED , checkbox ja radio - tyyppien yhteydessä määrittää kyseisen kentän valmiiksi valituksi (oletus).
  • SIZE = arvo , TEXT -tyypin kentän pituus merkkeinä.
  • MAXLENGTH = arvo , TEXT -tyypin kentän maksimipituus, eli suurin määrä merkkejä, mitä käyttäjä voi tekstiruutuun syöttää.

<SELECT> <OPTION> </OPTION> <OPTION> </OPTION> ... </SELECT>
Valintalista josta käyttäjä voi valita haluamansa vaihtoehdon. OPTION -tagin määritteenä on "VALUE" jolla määritellään palvelimelle muuttujanimen yhteydessä lähetettävä tieto. SELECT -tagin määritteitä ovat:

  • NAME = "muutujanimi" , lomakkeen käsittelevälle apuohjelmalle välitettävä muuttujan nimi
  • SIZE = "arvo" , montako vaihtoehtoa näytetään kerrallaan käyttäjälle.
  • MULTIPLE , sallii käyttäjän valita kerralla useita vaihtoehtoja

<TEXTAREA> </TEXTAREA>
Tekstialue, jonka koon voi määritellä ja johon käyttäjä voi vapaasti kirjoittaa pitkänkin viestin. Määritteitä ovat:

  • NAME = "muutujanimi" , lomakkeen käsittelevälle apuohjelmalle välitettävä muuttujanimi
  • COLS = arvo , tekstialueen leveys merkkeinä
  • ROWS = arvo , tekstialueen korkeus riveinä

Esimerkkilomake (lomakkeen lähetys ei ole toiminnassa):
<FORM METHOD="POST" ACTION="LOMAKEKÄSITTELIJÄN_OSOITE">
Viesti<BR>
<TEXTAREA NAME="viesti" ROWS=4 COLS=55></TEXTAREA>
<P>
Radionapit:<BR>
Valitse 1<INPUT TYPE="RADIO" NAME="radio" VALUE="1">
Valitse 2<INPUT TYPE="RADIO" NAME="radio" VALUE="2">
Valitse 3<INPUT TYPE="RADIO" NAME="radio" VALUE="3">
<P>
Nimi<BR>
<INPUT TYPE="TEXT" NAME="nimi" SIZE=60>
<P>
Osoite<BR>
<INPUT TYPE="TEXT" NAME="osoite" SIZE=60>
<P>
Postinro ja - paikka<BR>
<INPUT TYPE="TEXT" NAME="posti" SIZE=40>
<P>
<SELECT NAME = "valikko" SIZE=2>
<OPTION VALUE="val1">Valintavaihtoehto 1</option>
<OPTION VALUE="val2">Valintavaihtoehto 2</option>
<OPTION VALUE="val3">Valintavaihtoehto 3</option>
<OPTION VALUE="val4">Valintavaihtoehto 4</option>
</SELECT>
<P>
<INPUT TYPE="submit" VALUE="Lähetä lomake">
<INPUT TYPE="reset" VALUE="Tyhjennä lomake">
</FORM>

Dokumentissa:

Viesti

Radionapit:
Valitse 1 Valitse 2 Valitse 3

Nimi

Osoite

Postinro ja - paikka

MARKO HAKALA
27.2.1998

Katso edelliset osat Verkkouutisten arkistosta:

AJASSA -SIVULLE