Vulpes - oppaita ja apuja web-toteutukseen

HTML-dokumentti koostuu elementeistä, tyylimääritteistä, kuvista ja teksteistä. Tässä luvussa käsittelememme html-dokumentin perusrakenteen, mitä dokumenttiin täytyy ehdottomasti laittaa. Esimerkeissä merkkaamme HTML 4.01 Strict spesifikaatiolla.

DOCTYPE-elementti: Dokumentin ensimmäiselle riville tulee laittaa DOCTYPE-elementti.
HTML-elementti: Doctype-elementin jälkeen tulee html-elementti.
HEAD-elementti: Head-elementti tulee html-elementin sisään.
TITLE-elementti: Head-elementin sisään tulee title-elementti.
BODY-elementti: Sivujen sisältö tulee body-elementin sisään.

DOCTYPE-elementti

Dokumentin ensimmäiselle riville tulee laittaa DOCTYPE-elementti (xhtml:ssä ensimmäiselle riville voidaan laittaa xml-määritys). Elementti kertoo selaimelle mitä koodia sen tulee tulkita. Elementti on pakollinen ja oltava siis jokaisessa html-dokumentissä. Elementti täytyy olla täysin oikein kirjoitettu, siinä ei saa olla kirjoitusvirheitä. Isot- ja pienetkirjaimet täytyvät olla oikein. On myös hieman toisistaan eroavia elementtejä, eikä väärää elementtiä pidä laittaa väärään dokumenttiin.

Alla lista uusimmista HTML-dokumentin DOCTYPE-elementeistä, sekä XHTML-dokumentin elementeistä. Mitä sinun tulee käyttää dokumentissäsi, riippuu siitä, kuinka sivusi merkkaat. Jos olet vasta opiskelemassa HTML kieltä, niin suosittelen aloittamaan jollakin transitional spesifikaatiolla. Jos taas olet kokeneempi ja välität web-standardeista, niin käytä strict spesifikaatioita, tai XHTML 1.1 spesifikaatiota.

HTML 4.01-Strict

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

HTML 4.01-Transitional

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

HTML 4.01-Frameset

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

XHTML 1.0-Strict

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

XHTML 1.0-Transitional

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

XHTML 1.0-Frameset

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

XHTML 1.1-DTD

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
   "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

HTML-elementti

DOCTYPE-elementin jälkeen tulee HTML-elementti (XHTML:ssä tulee laittaa nimiavaruus). Elementin sisälle tulee kaikki muut elementit ja määritykset.

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

<html>
>/html>

HEAD-elementti.

Seuraavaksi tulee laittaa HEAD-elementti, joka laitetaan HTML-elementin sisään, aivan kuten kaikki muukin tästä eteenpäin.

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

<html>
	<head>
	</head>
</html>

TITLE-elementti.

HEAD-elementin sisään tulee TITLE-elementti. Elementin sisään kirjoitetaan sivujen otsikko. Titlen teksti näkyy selaimen tietopalkissa, eli palkissa, jossa näkyy mm. selaimen nimi.

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

<html>
	<head>
		<title>Sivujen otsikko</title>
	</head>
</html>

BODY-elementti

Seuraavaksi tulee BODY-elementti. Varsinaiset sivut tulevat tämän tagin sisään.

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

<html>
	<head>
		<title>Sivujen otsikko</title>
	</head>

	<body>

	</body>
</html>

Vulpes:

Sekalaista:

Oppaat:

Vulpes IRC-kanava avattu: #vulpes@quakenet.org