HTML
HTML eli HyperText Markup Language
HTML-koodin kirjoittaminen
Ohjelmat
WWW-sivun tekemiseksi HTML-kielellä koodaamalla tarvitaan vain jokin tekstieditori. Tähän käy hyvin esim. Windowsin Muistio, jonka löytää apuohjelmista. Suosittelen, että kiinität Muistion käynnistysvalikkoon.
Tallentaminen
Tiedoston nimessä ei tule olla välilyöntejä, erikoismerkkejä, eikä skandeja ä, ö, å. Alaviivaa eli _-merkkiä voi käyttää välilyönnin tilalta. Isot ja pienet kirjaimet ovat merkitseviä. Helpoimmalla pääsee, kun käyttää aina vain pieniä kirjaimia. Tallentaessa täytyy itse kirjoittaa jokaisen nimen perään tiedostotäsmenne .html. Alla kuva tallentamisesta Windowsin muistiolla:
Ensimmäisellä kerralla tiedostoa tallentaessa käytä Tallenna nimellä -toimintoa, mutta sen jälkeen tiedostoa muokatessa riittää pelkkä tallennus vaikka käyttäen Ctrl+S.
Suosittelen, että aluksi tallenna kaikki kotisivuihin liittyvät tiedostot Työpöydälle, mistä ne on helppo löytää.
Tehdyn sivun katsominen selaimessa
Kun HTML-kielinen tiedosto on tallennettu html-pääteellä, niin sen kuvakkeena on oletusselaimeksi määritetyn selaimen kuvake (Explorer, Chrome, Firefox tms). Kun klikkaat tiedoston kuvaketta kaksoisklikkauksella se aukeaa automaattisesti selaimessa.
Voit aukaista tiedoston myös selaimesta käsin, joko siten että vedät tiedoston työpöydältä tai kansiosta selaimeen tai pikanäppäimellä Ctrl+O, jonka jälkeen valitset avattavan tiedoston.
Aina kun teet muutoksia html-tiedostoon, tallenna tiedosto uudestaan ja päivitä selaimen näyttö esim. F5-näppäimellä.
Ohjelmat
WWW-sivun tekemiseksi HTML-kielellä koodaamalla tarvitaan vain jokin tekstieditori. Tähän käy hyvin esim. Windowsin Muistio, jonka löytää apuohjelmista. Suosittelen, että kiinität Muistion käynnistysvalikkoon.
Tallentaminen
Tiedoston nimessä ei tule olla välilyöntejä, erikoismerkkejä, eikä skandeja ä, ö, å. Alaviivaa eli _-merkkiä voi käyttää välilyönnin tilalta. Isot ja pienet kirjaimet ovat merkitseviä. Helpoimmalla pääsee, kun käyttää aina vain pieniä kirjaimia. Tallentaessa täytyy itse kirjoittaa jokaisen nimen perään tiedostotäsmenne .html. Alla kuva tallentamisesta Windowsin muistiolla:
Ensimmäisellä kerralla tiedostoa tallentaessa käytä Tallenna nimellä -toimintoa, mutta sen jälkeen tiedostoa muokatessa riittää pelkkä tallennus vaikka käyttäen Ctrl+S.
Suosittelen, että aluksi tallenna kaikki kotisivuihin liittyvät tiedostot Työpöydälle, mistä ne on helppo löytää.
Tehdyn sivun katsominen selaimessa
Kun HTML-kielinen tiedosto on tallennettu html-pääteellä, niin sen kuvakkeena on oletusselaimeksi määritetyn selaimen kuvake (Explorer, Chrome, Firefox tms). Kun klikkaat tiedoston kuvaketta kaksoisklikkauksella se aukeaa automaattisesti selaimessa.
Voit aukaista tiedoston myös selaimesta käsin, joko siten että vedät tiedoston työpöydältä tai kansiosta selaimeen tai pikanäppäimellä Ctrl+O, jonka jälkeen valitset avattavan tiedoston.
Aina kun teet muutoksia html-tiedostoon, tallenna tiedosto uudestaan ja päivitä selaimen näyttö esim. F5-näppäimellä.
Html-käskyt eli tagit
HTML-käskyt eli tagit laitetaan aina < ja > merkkien väliin.
esim. <b> -käsky aloittaa tekstin lihavoinnin.
</b> -käsky puolestaa lopettaa lihavoinnin.
Lopetuskäsky on siis muuten samanlainen kuin aloituskäsky, mutta siinä on edessä /-merkki.
Html:n rivi
Tässä on <b>lihavoitua</b> tekstiä.
näyttää selaimessa tältä
Tässä on lihavoitua tekstiä.
Lähes kaikki käskyt pitää lopettaa,
poikkeuksena esim. rivinvaihto <br> ja kuvan sijoittamiseen liittyvä käsky <img src>.
esim. <b> -käsky aloittaa tekstin lihavoinnin.
</b> -käsky puolestaa lopettaa lihavoinnin.
Lopetuskäsky on siis muuten samanlainen kuin aloituskäsky, mutta siinä on edessä /-merkki.
Html:n rivi
Tässä on <b>lihavoitua</b> tekstiä.
näyttää selaimessa tältä
Tässä on lihavoitua tekstiä.
Lähes kaikki käskyt pitää lopettaa,
poikkeuksena esim. rivinvaihto <br> ja kuvan sijoittamiseen liittyvä käsky <img src>.
HTML-tiedoston perusrakenne
<!DOCTYPE html>
<htm>
<head>
<title> </title>
</head>
<body>
</body>
</html>
Avataanpa vähän yllä olevan koodin sisältöä
<!DOCTYPE html>
Tämän tulee olla aina ensimmäisenä. Tämä ei ole varsinaisesti html-kieltä, mutta se kertoo selaimelle, mitä versiota HTML-kielestä käytetään. Kyseinen merkintä kertoo, että käytössä on uusin HTML5-versio.
<html>
Tämä aloittaa varsinaisen html-kielisen osuuden tiedostossa.
<head>
Tämä aloittaa head-osion. Headin sisään kirjoitettava ei näy kotisivuilla title-kohtaa lukuunottamassa, mutta headissa annetaan selaimelle ohjeita sisällön näyttämistä varten. Siinä voidaan esim. määrittää merkistökoodaus, jotta ääkköset tai muut erikoismerkit näkyvät oikein tai ilmoittaa tyylimäärittelyt.
<title> </title>
Title-tagin sisään tuleva teksti näkyy välilehden otsikkona.
</head>
Tämä lopettaa head-osion.
<body>
Tämä aloittaa body-osion.
Nettisivuille näkyviin tuleva kirjoitetaan tähän bodyn sisään.
</body>
Tämä lopettaa body-osion.
</html>
Tämä lopettaa html-kielisen osuuden tiedostossa.
Sisältöä
Body-tagien sisään kirjoitettu teksti näkyy suoraan sivuilla.
Koodiin enterillä tehty rivinvaihto ei kuitenkaan näy sivuilla, vaan rivinvaihto pitää tehdä <br>-tagilla.
Eli jos koodisi näyttää tältä:
<body>
kissa
koira
</body>
niin sivusi näytää tältä:
kissa koira
Mutta jos kirjoitat:
<body>
kissa
<br>
koira
</body>
niin sivusi näyttää tältä
kissa
koira
Rivinvaihtotagin <br> voi kirjoittaa omalle rivilleen tai rivin perään tai rivin alkuun.
Tekstiä voi muotoilla seuraavilla tageilla:
<b>lihavoi</b>
<i>kursivoi</i>
<u>alleviivaa</u>
Näitä muotoiluja voi yhdistää esim.
Osa tästä tekstistä on <b><u>lihavoitu ja alleviivattu</u></b>ja
osa <i><u>kursivoitu ja alleviivattu</u></i>
Huomaa tagien järjestys.