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">