Načrtovanje in razvoj spletnih aplikacij

HTML sintaksa

Spletna stran je sestavljena iz več elementov različnih vrst, kot so odstavki, slike, tabele, seznami ali posebej oblikovano besedilo.

Za opis elementov v jeziku HTML zadošča, da elemnte opremimo s posebnimi oznakami. Oznake ločimo od običajnega besedila po tem, da so zapisane med znakoma manjše (<) in večje (>).

Opisane elemente pa si ogledamo s programi, ki jih imenujemo spletni brskalniki (angl. Web Browsers), ki berejo ukaze v jeziku HTML in glede na to prikazujejo vsebino.

HTML oznake

HTML je sestavljen iz oznak, ki jim rečemo tudi značke. Opis vsakega elementa je v splošnem sestavljen iz treh delov: iz začetne značke, vsebine in končne značke. Začetna in končna značka se pričneta z znakom <, končata z znakom >, vmes pa je zapisano ime elementa. V končni znački je pred imenom še znak /. Začetna in zaključna značka omejujeta območje vsebine elementa.

<imeOznake> element strani </imeOznake>

V HTML ločimo dve osnovni vrsti oznak:

Samostojne oznake, imenovane tudi prazne (angl. Blank Tags). Te oznake imajo samo začetni del in nimajo vsebine. Ker pa morajo po HTML 5 standardu biti vse oznake zaključne, te oznake zaključimo tako, da za imenom oznake dodamo presledek in desno poševnico. Zgled tovrstnih oznak:
  • oznaka za prehod v novo vrsto: <br />
  • oznaka za vodoravno črto: <hr />
  • oznaka za vstavljanje slike: <img />
Oznake, ki nastopajo v parih, imenovane tudi vsebniki (angl. Containers). Pri teh oznakah velja pravilo, da se končna oznaka od začetne vedno razlikuje po dodatni poševni črti (angl. Forward Slash). Zgled para oznak:
  • oznaka za izpis odstavka: <p>To je odstavek besedila.</p>

Klasični HTML v oznakah ne razlikuje med malimi in velikimi črkami, torej lahko imena elementov, imena njihovih lastnosti in tudi same vrednosti pišemo z malimi črkami, velikimi črkami ali pa celo kombinirano. Z nepremišljeno uporabo malih in velikih črk bomo dokumentu naredili več škode kot koristi, zato je najbolje, da v celi datoteki uporabljamo en sam način.

Ker pa HTML 5 zahteva zapis kode izključno samo z malimi znaki, konzorcij W3C priporoča uporabo samo malih znakov.

Dodatne lastnosti HTML oznak (atributi)

Večina oznak pozna dodatna pojasnila ali lastnosti. Zapišemo jih znotraj začetne oznake, tako da za imenom oznake dodamo presledek, zatem pa zapišemo lastnost v obliki:

<imeOznake lastnost="vrednostLastnosti"> element strani </imeOznake>

Pri tem vrednost lastnosti zapišemo med dvojnima narekovajema. V primeru da v vrednosti nastopajo dvojni narekovaji, uporabimo enojne narekovaje. Zgled samostojne oznake s parametri:

<img src="moja_slika.gif" width="100" height="100" />

Primer uporabe enojnih narekovajev:

<img src="slika.gif" alt='Ta slika "prinaša" smeh'/>

Če ima ukaz več parametrov, njihov vrstni red ni pomemben.

Primer HTML dokumenta

Koda HTML dokumenta, ki jo zapišemo v urejevalniku:

<!DOCTYPE html>
<html>
<head>
   <title>Ime strani</title>
</head>
<body>
   <h1>Prvi naslov</h1>
   <p>Prvi odstavek besedila.</p>
</body>
</html>

Če si primer ogledamo podrobneje, oznake pomenijo:

  • Oznaka <!DOCTYPE html> je deklaracija, ki definira tip dokumenta
  • Tekst med <html> in </html> opiše spletno stran
  • Tekst med <head> in </head> določa glavo spletne strani, v kateri opišemo dokument
  • Tekst med <title> in </title> je naslov spletne strani, ki se prikaže v naslovni vrstici brskalnika in na zavihku
  • Tekst med <body> in </body> je vsebina spletne strani, ki jo prikaže brskalnik
  • Tekst med <h1> in </h1> je prikazan kot glavni naslov
  • Tekst med <p> in </p> je prikazan kot odstavek

Ko spletno stran zaženemo v brskalniku, le ta izpiše:

Prvi naslov

Prvi odstavek besedila.

Po vski spremembi kode v urejevalniku, moramo pred ogledom spletne strani v brskalniku, datoteko shraniti in jo zatem v brskalniku ponovno naložiti.