|
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ä.
 |
