HTML-ohjelmointi
HTML-sivu
HTML on lyhenne sanoista Hypertext Markup Language. HTML-sivu näkyy Internetissä WWW-verkkoselaimella ja sivu voi sisältää tekstiä, hyperlinkkejä, kuvia, videoita ja ääntä. HTML WWW-sivun koodi kirjoitetaan tekstitiedostoon, jonka tiedostotunnus on html tai htm. Tiedostonimi siis voi olla esimerkiksi "testi.html". Jokaisella HTML-tiedostolla on oltava tietynlainen perusrakenne ja omien tiedostojen perusrakenne voi olla esimerkiksi alla oleva:
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>oma nimi</title>
5 </head>
6 <body>
7 Oma koodi tähän
8 </body>
9 </html>
1. rivi kertoo minkätyyppinen tiedosto on kyseessä ja nyt on HTML. Toinen vaihtoehto olisi käyttää XML-koodia.
2. rivin teksti <html> aloittaa HTML-koodin ja viimeisen 9. rivin </html> lopettaa HTML-koodin. HTML-koodissa aloitusta yleensä seuraa lopetus kuten näkyy riveillä 2 - 9.
3. rivin kohtaan <head> voit kirjoittaa esimerkiksi title-otsikkotekstin, joka näkyy WWW-sivun otsikkona verkkoselaimen välilehdessä. Otsikko kannattaa tehdä aina ja siihen voit kirjoittaa esimerkiksi oman nimen, jotta opettajan on helpompi tunnistaa tekijä.
6. Kohtaan <body> kirjoitetaan oma HTML-koodi, joka näkyy Internetissä WWW-sivuna verkkoselaimella.
Oman testi.html tiedoston sisältö voisi olla esimerkiksi alla oleva:
<!DOCTYPE html>
<html>
<head>
<title>Karin testi</title>
</head>
<body>
<h1>Hello World!</h1>
<p>Tässä testailen. <strong>Tämä kohta on lihavoituna!</strong> Tässä taas normaalia tekstiä.</p>
<img src="koirakuva.jpg">
</body>
</html>
HTML-koodissa käytetään alla olevan luettelon mukaista merkintätapaa:
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>oma nimi</title>
5 </head>
6 <body>
7 Oma koodi tähän
8 </body>
9 </html>
1. rivi kertoo minkätyyppinen tiedosto on kyseessä ja nyt on HTML. Toinen vaihtoehto olisi käyttää XML-koodia.
2. rivin teksti <html> aloittaa HTML-koodin ja viimeisen 9. rivin </html> lopettaa HTML-koodin. HTML-koodissa aloitusta yleensä seuraa lopetus kuten näkyy riveillä 2 - 9.
3. rivin kohtaan <head> voit kirjoittaa esimerkiksi title-otsikkotekstin, joka näkyy WWW-sivun otsikkona verkkoselaimen välilehdessä. Otsikko kannattaa tehdä aina ja siihen voit kirjoittaa esimerkiksi oman nimen, jotta opettajan on helpompi tunnistaa tekijä.
6. Kohtaan <body> kirjoitetaan oma HTML-koodi, joka näkyy Internetissä WWW-sivuna verkkoselaimella.
Oman testi.html tiedoston sisältö voisi olla esimerkiksi alla oleva:
<!DOCTYPE html>
<html>
<head>
<title>Karin testi</title>
</head>
<body>
<h1>Hello World!</h1>
<p>Tässä testailen. <strong>Tämä kohta on lihavoituna!</strong> Tässä taas normaalia tekstiä.</p>
<img src="koirakuva.jpg">
</body>
</html>
HTML-koodissa käytetään alla olevan luettelon mukaista merkintätapaa:
HTML-tagit
<h1>Otsikko</h1> Otsikko alla olevalle tekstille tai kuville
<p>Tekstiä</p> Normaali tekstikappale, joka tulee otsikon alapuolelle
<br> Rivinvaihto, jos teet esimerkiksi linkkilistan. Tämä on helpoin vaihtoehto.
<ul> UL on listatagi ja tätä voit käyttää linkkilistan tai muun listan tekemiseen. Käyttöohje on w3school-sivulla.
<strong>Tekstiä</strong> Tekstin lihavointi, tämän voi kirjoittaa <p> merkinnän sisään
<a href>Hyperlinkki toiselle WWW-sivulle</a>
Tarkalleen näin:
<a href="https://verkko-osoite">Linkkitekstin nimi</a> Tämä avaa linkin senhetkiseen välilehteen
<a target="_blank" href="https://verkko-osoite">Linkkitekstin nimi</a> Tämä avaa linkin uuteen välilehteen
<img src="kuvan tiedostonimi"> Kuvan lisääminen WWW-sivulle. Kuvan tiedostokoolla on iso merkitys, joten kannattaa käyttää JPG-kuvia.
<img src="kuvan tiedostonimi" width="500"> Jos haluat kuvan tietyn levyiseksi, koko tulee kohtaan 500.
<div id="nimi"></div>
Tämän sisällä olevan alueen koon, värin, sijainnin, ääriviivan ja tekstin ulkonäön voi määritellä CSS-tiedostossa. Tämän alueen sisällä olevaa tekstiä voi muokata myös JS-tiedoston koodilla.
<button id="nimi" onclick="JSFunktionNimi()">Nappiteksti</button>
Näin tehdään klikattava nappi, jonka sijainnin ja koon voi määritellä CSS-tiedostossa. Nappia klikattaessa suoritetaan JS-tiedostossa oleva funktio. Funktio voi muokata esimerkiksi "div id" kohdassa mainittua aluetta.
Kaikki HTML tagit ja tarkemmat ohjeet löytyvät WWW-sivulta HTML Reference (w3schools.com)
<p>Tekstiä</p> Normaali tekstikappale, joka tulee otsikon alapuolelle
<br> Rivinvaihto, jos teet esimerkiksi linkkilistan. Tämä on helpoin vaihtoehto.
<ul> UL on listatagi ja tätä voit käyttää linkkilistan tai muun listan tekemiseen. Käyttöohje on w3school-sivulla.
<strong>Tekstiä</strong> Tekstin lihavointi, tämän voi kirjoittaa <p> merkinnän sisään
<a href>Hyperlinkki toiselle WWW-sivulle</a>
Tarkalleen näin:
<a href="https://verkko-osoite">Linkkitekstin nimi</a> Tämä avaa linkin senhetkiseen välilehteen
<a target="_blank" href="https://verkko-osoite">Linkkitekstin nimi</a> Tämä avaa linkin uuteen välilehteen
<img src="kuvan tiedostonimi"> Kuvan lisääminen WWW-sivulle. Kuvan tiedostokoolla on iso merkitys, joten kannattaa käyttää JPG-kuvia.
<img src="kuvan tiedostonimi" width="500"> Jos haluat kuvan tietyn levyiseksi, koko tulee kohtaan 500.
<div id="nimi"></div>
Tämän sisällä olevan alueen koon, värin, sijainnin, ääriviivan ja tekstin ulkonäön voi määritellä CSS-tiedostossa. Tämän alueen sisällä olevaa tekstiä voi muokata myös JS-tiedoston koodilla.
<button id="nimi" onclick="JSFunktionNimi()">Nappiteksti</button>
Näin tehdään klikattava nappi, jonka sijainnin ja koon voi määritellä CSS-tiedostossa. Nappia klikattaessa suoritetaan JS-tiedostossa oleva funktio. Funktio voi muokata esimerkiksi "div id" kohdassa mainittua aluetta.
Kaikki HTML tagit ja tarkemmat ohjeet löytyvät WWW-sivulta HTML Reference (w3schools.com)
HTML ja suomalaiset merkit Ä ja Ö
Oletuksena HTML-tiedostoon ei ehkä voi kirjoittaa kirjaimia Ä ja Ö, koska oletuksena ne eivät ehkä ole käytössä. HTML-kodiin saa suomenkielen ja ääkköset lisäämällä muutaman lisäkoodirivin, jotka näkyvät alla olevassa koodissa riveillä 2 ja 4:
1 <!DOCTYPE html>
2 <html lang="fi">
3 <head>
4 <meta charset="UTF-8" />
5 <title>Testisivu</title>
6 </head>
7 <body>
8 </body>
9 </html>
Jos jättää pois rivin 4, silloin Ä ja Ö saattavat näkyä sotkuna verkoselaimessa. Lisäksi kuvat eivät ehkä näy ollenkaan, jos tiedostonimessä on Ä tai Ö ja rivi 4 puttuu. Varminta on, kun koodaukseen liittyvissä tiedostoissa et käytä ollenkaan ääkkösiä tiedostonimissä: ei html-, ei css-, ei js- eikä kuvatiedostoissa.
1 <!DOCTYPE html>
2 <html lang="fi">
3 <head>
4 <meta charset="UTF-8" />
5 <title>Testisivu</title>
6 </head>
7 <body>
8 </body>
9 </html>
Jos jättää pois rivin 4, silloin Ä ja Ö saattavat näkyä sotkuna verkoselaimessa. Lisäksi kuvat eivät ehkä näy ollenkaan, jos tiedostonimessä on Ä tai Ö ja rivi 4 puttuu. Varminta on, kun koodaukseen liittyvissä tiedostoissa et käytä ollenkaan ääkkösiä tiedostonimissä: ei html-, ei css-, ei js- eikä kuvatiedostoissa.
CSS-tiedosto
CSS-tiedosto on tyylitiedosto, jolla muokataan oman HTML WWW-sivun ulkonäköä.
CSS-tiedoston käyttöönotto HTML-koodissa:
CSS-tiedosto on tekstitiedosto tiedostotunnuksella css ja se otetaan HTML-koodissa käyttöön lisäämällä <head> tagien sisälle yksi rivi koodia, josta on esimerkki alla rivillä 5:
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>Karin testi</title>
5 <link href="karintyylit.css" rel="StyleSheet" type="text/css" media="all" />
6 </head>
7 <body>
8 </body>
9 </html>
CSS-tiedoston sisältö:
CSS-tiedostossa ensimmäisenä määritellään "body", jossa määritellään esimerkiksi normaalin tekstin fontin tyyli ja koko sekä taustaväri. Alla esimerkki:
body
{
font-family: Arial;
font-size: 12pt;
text-align: left;
background-color: rgb(191, 236, 249);
}
Ylhäällä taustavärin määrittelee kohta rgb(...), jonka kolme lukua on RGB-värikoodi. Esimerkiksi RGB(191, 236, 249) on vaaleansininen. Värien RGB-kooodit löydät verkkosivulta Colors RGB (w3schools.com).
CSS-tiedostolla voi myös määritellä HTML-koodissa olevien alueiden ja nappien sijainnin, koon, värin, ääriviiivan, tekstin ulkoasun, jne. Alla olevilla CSS-tiedostossa voi määritellä esimerkiksi HTML-koodin aikatekstialueen ja painonapin sijainnin sekä muita ominaisuuksia.
#aikaTXT
{
position: absolute;
background-color: white;
left: 5px;
top: 600px;
width: 300px;
height: 100px;
border: 1px solid black;
}
#aikaNappi
{
position: absolute;
left: 5px;
top: 710px;
}
CSS-tiedostolla voi muokata useita muitakin ulkonäköasioita ja niistä lisää WWW-sivulla CSS Tutorial (w3schools.com).
CSS-tiedoston käyttöönotto HTML-koodissa:
CSS-tiedosto on tekstitiedosto tiedostotunnuksella css ja se otetaan HTML-koodissa käyttöön lisäämällä <head> tagien sisälle yksi rivi koodia, josta on esimerkki alla rivillä 5:
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>Karin testi</title>
5 <link href="karintyylit.css" rel="StyleSheet" type="text/css" media="all" />
6 </head>
7 <body>
8 </body>
9 </html>
CSS-tiedoston sisältö:
CSS-tiedostossa ensimmäisenä määritellään "body", jossa määritellään esimerkiksi normaalin tekstin fontin tyyli ja koko sekä taustaväri. Alla esimerkki:
body
{
font-family: Arial;
font-size: 12pt;
text-align: left;
background-color: rgb(191, 236, 249);
}
Ylhäällä taustavärin määrittelee kohta rgb(...), jonka kolme lukua on RGB-värikoodi. Esimerkiksi RGB(191, 236, 249) on vaaleansininen. Värien RGB-kooodit löydät verkkosivulta Colors RGB (w3schools.com).
CSS-tiedostolla voi myös määritellä HTML-koodissa olevien alueiden ja nappien sijainnin, koon, värin, ääriviiivan, tekstin ulkoasun, jne. Alla olevilla CSS-tiedostossa voi määritellä esimerkiksi HTML-koodin aikatekstialueen ja painonapin sijainnin sekä muita ominaisuuksia.
#aikaTXT
{
position: absolute;
background-color: white;
left: 5px;
top: 600px;
width: 300px;
height: 100px;
border: 1px solid black;
}
#aikaNappi
{
position: absolute;
left: 5px;
top: 710px;
}
CSS-tiedostolla voi muokata useita muitakin ulkonäköasioita ja niistä lisää WWW-sivulla CSS Tutorial (w3schools.com).
JS-tiedosto (JavaScript)
JS on lyhenne sanasta JavaScript, joka on eri ohjelmointikieli kuin "Java". HTML, CSS ja JS usein käytetään samanaikaisesti WWW-sivua ohjelmoitaessa.
Tee ohjelmointikansioosi uusi tyhjä tiedosto nimellä "oma.js". Ota tiedosto käyttöön lisäämällä HTML-tiedostosi HEAD-lohkoon rivi:
<script src="oma.js"></script>
JS-tiedoston funktio tehdään näin:
function aika()
{
var testiLuku = 0;
var testiTXT = "Hei";
var aikaNyt = new Date();
var tunnit = aikaNyt.getHours();
var minuutit = ...
testiLuku = 2;
testiLuku = testiLuku + 1;
if(tunnit > 14)
{
document.getElementById('aikaTXT').innerHTML = 'Nyt kotiin: ' + tunnit + ":" + minuutit;
}
else if(tunnit > 11)
{
document.getElementById('aikaTXT').innerHTML = 'Nyt on iltapäivä: ' + tunnit + ":" + minuutit;
}
else if(tunnit < 12)
{
document.getElementById('aikaTXT').innerHTML = 'Nyt on aamu: ' + tunnit + ":" + minuutit;
}
}
Funktion koodin selitys:
Funtion nimi voi olla haluamasi. Funktion sisällä muuttujia luodaan komennolla "var", jonka jälkeen kirjoitetaan muuttujan nimi. Muuttujaan voi sijoittaa tekstiä sekä lukuja. JS automaattisesti huomaa onko muuttujassa luku vai tekstiä, luvuilla voi tehdä matemaattisia laskutoimituksia kuten aika() esimerkin testiLuku muuttujalla tehdään. Muuttujien sisällön voi tulostaa JS-koodilla näytölle haluttuun kohtaan ID-nimen avulla aika() esimerkin komennolla document.getElementById(...).innerHTML.
IF-ehtolauseella voi valita mitä tehdään eri tilanteissa ja jos mukana on IF ELSE, se tarkoittaa että vaihtoehdoista vain yksi valitaan ja vaihtoehtoja testataan ylhäältä alaspäin järjestyksessä.
Date objektin avulla saa haettua senhetkiseen aikaan liittyviä asioita. Kaikki Daten funktiot löytyy WWW-sivulta JavaScript Date Reference (w3schools.com)
Tee ohjelmointikansioosi uusi tyhjä tiedosto nimellä "oma.js". Ota tiedosto käyttöön lisäämällä HTML-tiedostosi HEAD-lohkoon rivi:
<script src="oma.js"></script>
JS-tiedoston funktio tehdään näin:
function aika()
{
var testiLuku = 0;
var testiTXT = "Hei";
var aikaNyt = new Date();
var tunnit = aikaNyt.getHours();
var minuutit = ...
testiLuku = 2;
testiLuku = testiLuku + 1;
if(tunnit > 14)
{
document.getElementById('aikaTXT').innerHTML = 'Nyt kotiin: ' + tunnit + ":" + minuutit;
}
else if(tunnit > 11)
{
document.getElementById('aikaTXT').innerHTML = 'Nyt on iltapäivä: ' + tunnit + ":" + minuutit;
}
else if(tunnit < 12)
{
document.getElementById('aikaTXT').innerHTML = 'Nyt on aamu: ' + tunnit + ":" + minuutit;
}
}
Funktion koodin selitys:
Funtion nimi voi olla haluamasi. Funktion sisällä muuttujia luodaan komennolla "var", jonka jälkeen kirjoitetaan muuttujan nimi. Muuttujaan voi sijoittaa tekstiä sekä lukuja. JS automaattisesti huomaa onko muuttujassa luku vai tekstiä, luvuilla voi tehdä matemaattisia laskutoimituksia kuten aika() esimerkin testiLuku muuttujalla tehdään. Muuttujien sisällön voi tulostaa JS-koodilla näytölle haluttuun kohtaan ID-nimen avulla aika() esimerkin komennolla document.getElementById(...).innerHTML.
IF-ehtolauseella voi valita mitä tehdään eri tilanteissa ja jos mukana on IF ELSE, se tarkoittaa että vaihtoehdoista vain yksi valitaan ja vaihtoehtoja testataan ylhäältä alaspäin järjestyksessä.
Date objektin avulla saa haettua senhetkiseen aikaan liittyviä asioita. Kaikki Daten funktiot löytyy WWW-sivulta JavaScript Date Reference (w3schools.com)