Internet ja HTML

 Etusivu

Linkit ja lomake

Linkit ovat www-sivujen perusta ja niiden avulla voimme surffata sivuilta toisille. Http-protokolla perustuu linkkeihin ja se on koko internetin perusta. Linkkejä voidaan luoda eri elementteihin, kuten teksteihin, kuviin,  sähköpostiosoitteisiin, nappeihin ja vaikkapa automaattiseen sivun siirtoon.

Linkkien tekeminen html-sivulle
Linkit voidaan luoda helposti tagien- <a> ja lopetustagi- </a> avulla. Linkit aloitetaan tagilla ja kaikki elementit jotka jäävät aloitus ja lopetustagin väliin kuuluvat samaan linkkiin. Linkitykselle on myös annettava parametri-href ja sille arvo, jotta selain tietää mihin linkitys osoitetaan. Linkitys voidaan kohdistaa toiseen html-sivuun tai mihin tahansa muuhun tiedostoon. Myös kuviin, videoihin, sähköpostiin ja äänitiedostoihin voidaan tehdä suora linkki. Linkitettäviin tiedostoihin voidaan tehdä linkki suoraan tiedoston ja kansiot nimeämällä, mikäli tiedostot ovat samalla palvelinpaikalla. Jos linkitetään johonkin muuhun netissä olevaan tiedostoon, käytetään koko www-osoitetta parametreissä. Target-parametrillä saamme sivut aukeamaan määritellysti vaikka uuteen selainikkunaan.

Normaali tekstin linkitys.
<a href="sivu.htm">linkitetty teksti</a>

Linkki avautuu uuteen ikkunaan target-parametrillä.
<a href="sivu2.htm" target="_blank">toka linkki uuteen sivuun</a>

Linkitys tiedostoon.
<a href="dokumentti.doc">linkki word-dokumenttiin</a>

Linkitys kuvaan. Kuva näytetään selaimessa.
<a href="kuva.jpg">linkki kuvaan</a>

Linkitys ulkoselle sivulle koko www-osoitteen avulla.
<a href="http://www.iltalehti.fi/">linkki www-sivuun</a>

Linkitys videotiedostoon.
<a href="videotiedosto.avi">linkki videoon</a>

Kuva linkkinä. Border-parametri estää linkkikehyksen kuvassa.
<a href="sivu3.htm"><img border="0" src="kuva.jpg"></a>


Lomakekentät
Usein sivuille on tarvetta rakentaa palautelomakekenttiä, joiden avulla sivuilla kävijät voivat antaa palautetta. Joskus koodaamiseen hyödynnetään tekstikenttiä, kun sivuille tehdään jotain interaktiivista toimintaa, esimerkiksi päivitettäviä elementtejä tai hakutoimintoja. Usein koodaamiseen liittyy tekstikentät tai muut valintatoiminnot.

Lomakekentät muodostetaan <form>-tagien väliin. Näin selain tietää mitkä lomakekentän elementit otetaan mukaan toimintoon. <form>-tagit eivät näy loppukäyttäjälle, mutta ohjelma tietää mitä osaa sivusta käsitellään ja miten. Form-tageille annetaan action-parametri, jotta tiedot lähetetään viestin käsittelijälle ja joka lähettää viestin vaikka sähköpostiin. Tämän valmistusta käsittelemme myöhemmin PHP-koodauksessa.

Erilaisia kenttiä voidaan asettaa lomakealueeseen. Mallissa input-määrittää tekstirivin ja napit. Textarea on tekstialue jossa rows-määriettää rivien määrän ja cols tekstialueen pituuden merkkeinä. name-arvo lähetetään viestin mukana, jotta tiedämme mistä kentästä viestit tulevat ja voimme erottaa ne toisistaan. Input type submit ja reset ovat nappeja. Submit aktivoi alussa annetun action-toiminnan ja aloittaa viestin lähettämisen. Reset tyhjää viestikentät.

Lomake-elementit
Lomekkeisiin voidaan liittää erilaisia lomake-elementtejä tarpeen mukaan. Tärkeää on tarkistaa, että lomake-elementit tulevat form-tagien sisään.

Tekstikenttä:

<input type="text" name="teksti">

 

Tekstialue:

<textarea name="tekstialue">Eka
Toka
Kolmas</textarea>

 

Valintanappi:

<input type="radio" name="uutinen" value="lehti">Iltalehti <br>
<input type="radio" name="ruutinen" value="sanomat">Iltasanomat

Iltalehti
Iltasanomat

Valintaruutu:

<input type="checkbox" name="valinta1">maili<br>
<input type="checkbox" name="valinta2">puhelin<br>
<input type="checkbox" name="valinta3">faksi

maili
puhelin
faksi

Valintalista:

<select name="valikko">
<option value="amk">amk
<option value="kauppis">kauppis
</select>

 

Video

 
 

Aiheeseen liittyvät linkit

Internet ja historiaa
 - Lomakkeen php-koodaus
 - Yleisiä html-koodeja

Opetusmateriaalia (PDF)
 - HTML-kielen perusteita
 

 

Kysy neuvoa tai anna vinkki

 

Tiedotteet ja aikataulut

Tervetuloa kurssille!

 

Tehtävät ja palautus

HTML-sivu tehtävä

1. Valmista oma linkkisivu, johon keräät ja listaat erilaisia linkkejä eri sivustoihin, videoihin ja tiedostoihin.

2. Valmista oma palautesivu, josta kävijät voivat ottaa yhteyttä sinuun. Älä ohjelmoi vielä lomaketta lähettämään mitään. Harjoittele vain lomakekenttien tekemistä ja ulkomuotoja.

Palauta vastaukset verkkoon alla olevasta linkistä. Palauta tehtävät muistioon kirjoitettuna. Voit kirjoittaa ja muokata tehtäviä myös palautuksen jälkeen. Palautuskansio on salasanasuojattu. Saat käyttäjätiedot opettajalta. Palauta tiedosto varustettuna omalla nimelläsi muotoon:
sukunimi_etunimi.txt

» Palauta tiedosto tänne