3. Oppitunti - Kuvia sivulle
1. Valitse haluamasi kuvat. Rajaa ne sopivan kokoisiksi (esim. Irfanview-ohjelmaa käyttäen) ja tallenna ne samaan kansioon sivusi kanssa. Webissä kuvien mittayksikkönä käytetään pikseliä. Yksi pikseli on ruudulla näkyvä kuvapiste.
Webbisivulle lisättävien kuvien tulee olla gif-, jpg-, tai png - muodossa. Nämä ovat niinsanottuja bittikarttakuvia, jotka on pakattu tiettyä menetelmää käyttäen. Yleensä digikameran kuvat ovat jpg-muodossa. Kokeilukäyttöön voit kuitenkin ladata seuraavat esimerkkikuvat:
(klikkaa hiiren oikeanpuolimmaisella näppäimellä, valitse Save as... ja tallenna kuvat samaan kansioon muiden tiedostojen kanssa)
2. Kopioi seuraava koodi sivullesi kohtaan johon haluat kuvan laittaa (kirjoita omakuva-tekstin kohdalle lisättävän kuvan nimi)
<img src="omakuva.jpg" width="100" height="103" border="0" alt="minun kuvani"/>
Kuten huomat, tägi loppuu /-merkkiin, joten se sisältää oman lopetuselementin. Tässä tapauksessa erillistä lopetuselementtiä siis ei tarvita. Edellisiin tägeihin verrattuna img on hieman monimutkaisempi, sillä se sisältää määritteitä. Ensimmäinen määrite on src, joka kertoo mikä kuva sivulle ladataan. Mikäli kuva on jossain muussa kansiossa, täytyy tähän kirjoittaa koko polku, esim. omasivu/alakansio/omakuva.jpg.
Width ja height määrittelevät kuvan koon. Nämä eivät ole välttämättä pakollisia, mikäli kuvasi on jo valmiiksi rajattu sopivan kokoiseksi. Border-määrite kertoo tuleeko kuvan ympärille kehystä. Esimerkissä arvo on "0", eli mitään kehystä ei ole, mutta esimerkiksi arvo "2" piirtää kuvan ympärille kahden pikselin paksuisen rajan. Alt- teksti näytetään kuvan sijasta. Voit kokeilla tätä vaikka kirjoittamalla scr-kohtaan väärän nimen. Huomaat että Kuvan kohdalla lukee "minun kuvani".
3. Lisää kaikki kuvat edellä mainitulla tavalla. Tallenna ja esikatsele.
Nyt kaikki sisältö on sivulla. Sivut alkavat olla jo periaatteessa valmiit. Vain mausteet puuttuvat. Näitä mausteita kutsutaan css-tyyleiksi. Seuraavat artikkelit kertovat kuinka saada sivut näyttämään hyvältä.
« Edellinen: Sisältöä sivuille - Seuraava: Tyylitiedostot »
