HTML

HTML eli HyperText Markup Language

2015-05-06T14:13:57+03:00

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

Html-käskyt eli tagit

2015-05-06T14:17:56+03:00

HTML-käskyt eli tagit laitetaan aina < ja > merkkien väliin.
esim. -käsky aloittaa tekstin lihavoinnin.
 -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 lihavoitua tekstiä.
näyttää selaimessa tältä
Tässä on lihavoitua tekstiä.

Lähes kaikki käskyt pitää lopettaa,
poikkeuksena esim. rivinvaihto ja kuvan sijoittamiseen liittyvä käsky <img src>.

HTML-tiedoston perusrakenne

2015-05-06T14:19:29+03:00

<!DOCTYPE html>

<htm>

<head>

<title> </title>

</head>

<body>

</body>

</html>

Avataanpa vähän yllä olevan koodin sisältöä

2015-05-06T15:34:58+03:00

<!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öä

2015-05-06T15:39:09+03:00

Body-tagien sisään kirjoitettu teksti näkyy suoraan sivuilla.
Koodiin enterillä tehty rivinvaihto ei kuitenkaan näy sivuilla, vaan rivinvaihto pitää tehdä -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
 
koira
</body>

niin sivusi näyttää tältä
kissa
koira

Rivinvaihtotagin voi kirjoittaa omalle rivilleen tai rivin perään tai rivin alkuun.

Tekstiä voi muotoilla seuraavilla tageilla:
lihavoi
kursivoi
alleviivaa

Näitä muotoiluja voi yhdistää esim.
Osa tästä tekstistä on lihavoitu ja alleviivattuja
osa kursivoitu ja alleviivattu
Huomaa tagien järjestys.