Valikko:

Dokumentin rakenne

HTML-dokumentti alkaa kertomalla selaimelle, että tämä dokumentti sisältää html-kieltä eli <!doctype html>.

Tämän jälkeen varsinainen html-koodi alkaa tagilla <html> ja loppuu </html> tagiin. Näiden väliin tulee aluksi otsikko-osa, joka on vapaaehtoinen, mutta kuitenkin suositeltava. Sen aloittaa tagi <head> ja lopettaa tagi </head>. Näiden väliin voidaan kirjoittaa dokumentin nimi tagien <title> ja </title> väliin, joka useimmiten tulee näkyviin selainikkunan otsikkoriville.

Dokumentin varsinainen runko-osa kirjoitetaan tagien <body> ja </body> väliin. Näiden kahden väliin kirjoitettu tulee näkyviin käyttäjälle selainikkunassa. 

<!doctype html>
<html>

<head> 
<title>
	Dokumentin otsikko
</title>
</head>


<body>

	Tässä on dokumentin selainikkunassa näkyvä osa.

</body>

</html>
Esimerkki nettisivuna

Doctype

Sivun alussa ennen <html> -tagia on myös yleensä alla olevan tyyppinen rivi:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Tämä rivi kertoo selaimelle mm. mitä html-kielen versiota käytetään ja kuinka tiukasti käytät virallista html-määrityksiä. Sivusi toimii myös ilman tätä riviä. Suositeltavaa kuitenkin on, että kirjoitat dokumentin alkuun vähintään tekstin:
<!doctype html>

Lisätietoja:
http://www.w3schools.com/tags/tag_doctype.asp

Head-osion meta-tiedot

Skandinaavinen merkistö
Skandinaavinen merkistö ts. ä,ö,å -merkkien näkyvyys ei välttämättä ole aina oletuksena päällä http-palvelimilla. Tämä voidaan korjata laittamalla dokumentin head osioon rivi:

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
Esimerkki skandeilla ja ilman skandeja.

Muita metatietoja

<meta name="keywords" content="sivustosi avainsanat pilkuilla erotettuina" />
Kirjoitetaan tärkeysjärjestykseen hakukoneille tarkoitettuja sanoja.

<meta name="description" content="kuvausteksti" />
Hakukoneiden käytettämä kuvausteksti sivustasi.

<meta name="Author" content="nimesi" />
Sivun tekijä

<meta http-equiv="content-language" content="fi" />
Kertoo hakukoneelle sivun kielen.

<meta http-equiv="refresh" content="10;URL=http://www.joku-osoite.fi" />
Vaihtaa sivua 10s kuluttua automaattisesti kohteeseen http://www.joku-osoite.fi

Tämän dokumentin rakenne voisi olla siis myös seuraavassa tarkemmassa muodossa. 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="content-language" content="fi" />
<meta name="keywords" content="html,html-dokumentti,html-dokumentin rakenne" />
<meta name="description" content="Sivulla kuvataan html-dokumentin rakenne" /> 
<meta name="Author" content="Matti Meikäläinen" /> 
<meta http-equiv="refresh" content="10;URL=http://www.helsinki.fi" />  

<title>
	Dokumentin otsikko
</title>
</head>


<body>

	Tässä on dokumentin selainikkunassa näkyvä osa.

</body>

</html>
Esimerkki nettisivuna

Tehtävä:

Kopio Notepadiin tai muuhun vastaavaan kirjoitusohjelmaan sivun rakenne, tallenna dokumentti html-muotoon ja kokeile lisätä body-osaan tekstiä.

Ohje löytyy videona täältä.