Načrtovanje in razvoj spletnih aplikacij

HTML ogrodje

Vsebino spletne strani opišemo z elementom <html>. To je osnovni oz. korenski element, ki vsebuje vse ostalo. Njegova vsebina je sestavljena iz glave (<head>) in telesa (<body>).

V glavi opišemo dokument. Z elementom <title> moramo določiti naslov, ki se prikaže v naslovni vrstici brskalnika in na zavihku (če brskalnik uporablja zavihke). Drugi elementi, ki jih tudi lahko uporabimo v glavi, so <base>, <meta>, <link>, <style> in <script>. Kar napišemo v glavi, v oknu brskalnika ni vidno.

V telesu napišemo vse, kar želimo, da brskalnik prikaže v svojem oknu. Običajno tu opišemo besedilo, slike, tabele, sezname in druge elemente, ki sestavljajo spletno stran.

Ogrodje HTML5

Predpisano splošno obliko dokumenta HTML5 določajo v predpisanem zaporedju zapisane naslednje oznake:

<!DOCTYPE html>
<html>
<head>
   <title>Ogrodje</title>
   <meta charset="UTF-8">
</head>
<body>
   ... vsebina strani ...
</body>
</html>

Vsak pravilno zapisan dokument je omejen s parom značk <html> in </html>. Bolj pregledno je, če ju zapišemo v prvi in zadnji vrstici dokumenta, čeprav to ni nujno. Navsezadnje je lahko ves dokument zapisan v eni sami vrstici.

Del, ki je zapisan med paroma značk <head> in </html>, je pravzaprav glava, ki se posreduje v odgovor strežnika (angl. Server Response). Znotraj glave lahko zapišemo več metainformacij, ki se posredujejo v glavi odgovora. Vsak dokument mora biti poimenovan. Njegovo ime zapišemo med par značk <tile> in </title>.

Sama vsebina dokumenta je zaprta med oznaki <body> in </body>. Ta vsebina se prikaže znotraj pregledovalnika. Praktično vsi brskalniki prikazujejo besedilo v kateri od standardnih kodnih strani, ki ne vsebuje slovenskih znakov. S preprosto oznako, ki jo dodamo glavi, lahko vsilimo interpretacijo po standardu UTF-8, ki pozna šumnike.

Struktura HTML5 strani

Vizualni prikaz strukture HTML5 strani:

<!DOCTYPE html>
<html>
<head>
<title> Naslov strani </title>
<meta charset="UTF-8">
</head>
<body>
<h1> Glavni naslov strani </h1>
<p> Odstavek besedila </p>
<p> Še en odstavek besedila </p>
</body>
</html>

Struktura XHTML strani

Splošna oblika dokumenta XHTML je precej bolj zapletena:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   <title></title>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
   ... vsebina strani ...
</body>
</html>

Več o deklaracijah HTML dokumentov si lahko ogledate w3schools.com.