|
Html ja kotisivu
Internetti on laaja käsite ja sen käyttömahdollisuudet ovat
monet. Yksi tapa hyödyntää internetin rajatonta maailmaa on
luoda kotisivut. Nykyään käytössä on erilaisia tietokantoja ja
ohjelmia jotka rakentavat sivut palvelimella ja lähettävät ne
vierailijalle hänen tarpeisiin muokattuna. Ohjelmat ja
tietokannat ovat usein arvokkaita ja vaikeasti asennettavia,
joten niiden hy ödyntämiseen
tarvitaan paljon resursseja. Näitä ei kuitenkaan aina ole
järkevää käyttää. Yleensä yksinkertaisemman tiedon
esittämiseen riittää html-koodi, jonka avulla voi rakentaa
hienoja esityksiä nopeasti ja pienellä resurssilla.
Kotisivulla informaation levittäminen julisuuteen on halpa ja
helppo tapa. Oikeilla tiedoilla oikeassa paketissa sivuille
sadaan nopeasti vierailijoita.
Kotisivuilla surffatessa käymme usein html-koodilla
rakennetuissa kotisivuissa. Koodi toimii siten, että
sivuosoitetta pyytäessä joko kirjoittamalla osoite tai linkkiä
klikkaamalla, palvelin lähettää koodin koneellemme ja selain
rakentaa koodin perusteella sivun ja tulostaa sen näytölle.
Kuvat, äänet ja videot lähetetään ohessa ja selain asettaa ne
koodin avulla oikeaan paikkaan. Jotta voimme rakentaa sivun
itse, on meidän osattava kirjoittaa html-koodia. Tarvitsemme
myös hieman kuvankäsittelytaitoa. Sivuja voidaan rakentaa
kotisivujen teko-ohjelmilla eli editoreilla, mutta html-koodin
osaaminen on silti tärkeää.
Html-koodi jakautuu kahteen elementtiin, head ja body. Koodin
kirjoittaminen aloitetaan html-tageista. Merkkien <> sisään
kirjoitetaan tagi, eli käsky joka halutaan sivulla tapahtuvan.
Jotkut käskyt määräävät alueen jolla tapahtuma suoritetaan.
Siksi ne on myös päätettävä. Lopetuksessa tagin nimen eteen
tulee kenoviiva /. Näin myös html-dokumentti aloitetaan <html>
tagilla ja päätetään </html> lopputagilla. Näin selain tietää
mistä html-kieli alkaa ja osaa käsitellä sitä.
Seuraavaksi aloitetaan head-elementit, eli kirjoitetaan head
aloitus ja päätös-tagit. Tämän osion sisään tulee sivun
perustietoa, kuten esimerkiksi sivun otsikko, joka näkyy
selaimen otsakkeessa ja valintapalkissa. Tämä määritellään
title-tageilla.
Body-elementtiin tulee kaikki sivulla näkyvät osat. Näitä ovat
tekstit, kuvat, taulukot, jne. Body osio päätetään myös ennen
html-lopputageja.
Body-tagin arvoksi voidaan määritellä eri värejä tai taustoja
jotka näkyvät. Tällöin body-tagin sisään säädetään tagille
arvo. Taustavärin saa kirjoittamalla arvoksi
bgcolor="värikoodi". Taustakuvan saa arvolla
background="kuva.jpg". Värit voi antaa suoraan värin nimenä
englanniksi, esim red tai blue. Värin voi myös ilmoittaa
värikoodeina. Näitä ovat esimerkiksi:
#003399
#6600CC
#990099
#993333
#CC6600
#999966
#669900
#FFFF66
#666666
#FF3300
#99FFCC
#FF99FF
#006666
#006600
Tekstit ja muotoilu
Body-osioon voidaan kirjoittaa suoraan tekstiä. Kaikki tekstit
tulostuu samassa järjestyksessä sivulle kuin ne ovat
html-koodissa. Html-koodissa tehdään rivinvaihtoja vain koodin
tekemiseksi selvemmäksi. Jotta sadaan sivulle tekstiin
rivinvaihto, tapahtuu se <br>-tagilla. Näitä voidaan laittaa
useampi peräkkäin.
Tekstiä voidaan muokata <font>-tagilla. Se päätetään
</font>-tagilla, jotta selain tietää kuinka pitkään tekstiä
muokataan. Font-tagille voidaan antaa arvoja, joiden avulla
selain tietää muuttaa kirjaimia.
size = tekstikoko (suurempi numero, suurempi fontti)
face = fontti (käytä windows-fontteja, esim Verdana,
Arial, Ms
Sans serif, Courier)
color = väri (Samat koodit kuin taustoissa)
Lopuksi päätetään body-osio ja html-osio. Tallenna tiedosto
index.html-muotoon. Index on se tiedosto joka kansiosta
näytetään automaattisesti. Näin vierailijan ei tarvitse
kirjoittaa html-dokumentin nimeä osoiteriviin. Jos haluat
katsoa sivua selaimella, avaa tiedosto kaksoisnapsauttamalla
tai valitsemalla selain hiiren oikealla näppäimellä.
HTML-koodia ei tarvitse siirtää nettiin katsoaksesi sitä. Jos
haluat myöhemmin muokata tiedostoa, löydät täältä myös
muistion, jolla tiedoston voi avata. Jos haluat sivut nettiin,
avaa FTP-ohjelma ja siirrä tiedosto palvelimelle.
Harjoitus-sivu pitäisi näyttää tältä. Jos sivulla näkyy
koodeja tai ylimääräisiä tekstejä, on virhe yleensä jossain
tagissa tai kulmasulkeissa. Tarkista myös lainausmerkit
arvojen ympäriltä.
 |
