Internet ja HTML

 Etusivu

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

Video

 
 

Aiheeseen liittyvät linkit

Internet ja historiaa
 - Värikoodit html-kielessä
 - Windows-fontit
 - Yleisiä html-koodeja

Opetusmateriaalia (PDF)
 - HTML-kielen perusteita
 

 

Kysy neuvoa tai anna vinkki

 

Tiedotteet ja aikataulut

Tervetuloa kurssille!

 

Tehtävät ja palautus

HTML-sivu tehtävä

1. Valmista sivu jossa kerrot itsestäsi ja harrastuksistasi. Käytä erilaisia fontteja sekä värejä. Tee sivulle otsikko. Palauta html-koodi.

Palauta vastaukset verkkoon alla olevasta linkistä. Palauta tehtävät muistioon kirjoitettuna. Voit kirjoittaa ja muokata tehtäviä myös palautuksen jälkeen. Palautuskansio on salasanasuojattu. Saat käyttäjätiedot opettajalta. Palauta tiedosto varustettuna omalla nimelläsi muotoon:
sukunimi_etunimi.txt

» Palauta tiedosto tänne