HTML sivun perusrakenne
HTML5 -sivun perusrakenne on seuraava:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Sivun otsikko, näkyy esim. välilehden nimessä</title>
</head>
<body>
</body>
</html>
Sivun aloittaa aina komento <!doctype html>, jossa selaimelle kerrotaan että sivu tulee tulkita html -kielisenä. Sen jälkeen alkaa sivu komennolla <html>. Ko. komento pitää myös lopettaa viimeisellä rivillä komennolla </html>.
Itse sivu jaetaan kahteen osaan, <head> ja <body>. <head> -osassa on ennen sivun näyttämistä latautuva tieto, esim. käytettävä merkistö (yllä UTF-8), mahdolliset tyylimääritykset (CSS) ja etukäteen ladatut javascript -koodit ja kuvat. Sen lisäksi siellä on <title> komento. <body> osassa on sivun näkyvä osuus, eli varsinainen sisältö. <head> -osa tulee lopettaa komennolla </head> ennen <body> -osan aloitusta, joka puolestaan lopetetaan komennolla </body>. Tämä komento sijoitetaan juuri ennen koko html-sivun lopettavaa </html> -komentoa.
<title> komentoon tulee sivun otsikko. Se näkyy esim. selaimen välilehden nimessä. Myös <title> komento pitää lopettaa </title> -komennolla.
Jos lisäämme yllä olevaa koodiin tekstiä <body> osaan esim. seuraavasti.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Validia Ammattiopisto</title>
</head>
<body>
<h1>Mahdollisuuksien talossa tavoitteista totta – ammatti, työ ja toimiva arki</h1>
<p>Validia Ammattiopisto tarjoaa ammatillista erityisopetusta sekä valmentavaa koulutusta. Oppilaitos tuottaa lisäksi ammatilliseen erityisopetukseen liittyviä kehittämis-, ohjaus- ja tukipalveluita.</p>
<a href="http://www.invalidiliitto.fi/portal/">Tästä </a> Invalidiliiton sivuille.
</body>
</html>
<h1> -komento aloittaa otsikon (suurin otsikkotaso) <p> on kappaletekstin (leipäteksti) komento ja viimeisenä on <a> -komento jolla luodaan linkki toiseen sivustoon (Invalidiliitto). Näistä komennoista lisää myöhemmin. Nyt olemme tehneet ensimmäisen html-sivun. Nykymittapuun mukaan se näyttää kovin vaatimattomalta. Voit katsoa sivun tästä -linkistä.
