Taulukot ja kuvat
Kuvat ovat tärkeitä elementtejä kotisivuilla. Jotta voimme
asettaa kuvat siistiin järjestykseen sivuille, pitää niille
luooda taulukoita. Näin saamme kuvat ja tekstit pysymään
omilla kohdillaan sivuilla. Taulukoita käytetään myös tekstien
ja listojen järjestämiseen.
Taulukon rakentaminen sivuille
Taulukon rakentaminen aloitetaan table-tagilla. Se myös
päätetään taulukon lopussa. Tablen arvoksi voidaan antaa
reunan paksuus border-arvolla. Samoin sille voidaan määritellä
väri bordercolor-arvolla ja leveys width-arvolla.
Uusi rivi aloitetaan <tr>-tagillä ja palstat <td>-tagilla.
Palstoja aloitetaan ja päätetään niin monta kertaa kuin
palstoja halutaan taulukkoon. Lopuksi lopetetaan rivi
</tr>-tagilla. Uusi rivi aloitetaan taas <tr>-tagilla ja uusi
kierros palstoja. Kun taulukon rakentaminen on valmista,
päätetään taulukko table-päättötagilla. Palstojen td-tagien
eli solujen sisään voidaan myös antaa sisällön
sijaintiparametri align. Antamalla tälle center-arvo saamme
sisällön sijoittumaan keskelle solussa. Sarakkeen sisään
td-tagien väliin voimme kirjoittaa tekstiä tai liittää kuvia.

Kuvat html-koodissa
Sivuille voidaan asettaa kuvia haluttu määrä ja määritellyssä
koossa. Kuva asetetaan haluttuun paikkaan tagillä <img> Jotta
selain osaa asettaa oikean kuvan, pitää se määritellä
src-parametrilla. Jos kuva on samassa kansiossa, riittää
pelkkä kuvan nimi päätteellä. Käytettäviä muotoja netissä ovat
jpg, gif ja bmp eli muodot joita voidaan katsella selaimella
ilman ylimääräisiä ohjelmia. Kuvien nimissä pitäisi välttää
äöå-kirjaimia, erikoismerkkejä, välilyöntejä sekä
SUURAAKKOSIA. Näitä ei jotkut palvelimet osaa käsitellä ja
kuvat eivät välttämättä näy.
Muita parametrejä joilla voidaan kuvaa määritellä ovat border
eli reunaviivat, width eli leveys pikseleinä ja height eli
korkeus pikseleinä. Align-parametrin avulla voidaan määritellä
kuvan sijainti suhteessa muuhun sisältöön, esimerkiksi
tekstiin.
Jos kuva ei ole samassa kansiossa sivun kanssa, voidaan sille
määritellä koko polku kenoviivoilla erotettuna. Jos pitää
mennä takaisin kansiorakenteessa, käytetään ../ merkintää.
Osoitteena voidaan käyttää myös kokonaista www-osoitetta.
Siirtäessä kuvia palvelimelle pitää varmistaa, että siellä
käytetään samaa kansiorakennetta kuin koodissa on määritelty.
Muistakaa lähettää myös kuvat palvelimelle. Jos kuva ei näy,
tarkista että koodissa on sama nimi kuin kuvalla ja pääte
täsmää. Varmista että kuva on polun määrittelemässä paikassa.
Kuvan html- liitäntäesimerkkejä
Kuva jolla on 1 pikseliä leveä reunus,
100pikeliä leveä/korkea ja sijoitus oikealla.
<img src="kuva_nimi.jpg" border="1" width="100" height="100"
align="right">
Kuva samassa kansiossa.
<img src="kuva_nimi.jpg">
Kuva kuvat-kansiossa.
<img src="kuvat/kuva_nimi.jpg">
Kuva kuvat-kansiossa joka on yhtä kansiota
ylemmässä kansiossa.
<img src="../kuvat/kuva_nimi.jpg">
Kuva, joka sijaitsee jossain muualla verkossa.
<img
src="http://www.ekurssit.net/kurssit/images/html-web.gif">
|