HTML dokumenti sestavljajo elementi, ki so označeni s t. i. oznakami. Oznake prepoznate po kotnih oklepajih. Skoraj vsi elementi HTML so označeni z uvodno in zaključno oznako. Tisto, kar je vmes, imenujemo območje veljavnosti.
Na primer:
<h1>PSD-Tutorials.de – tvoje grafično, spletno in učno središče</h1>
S to sintakso je v dokument zapisan naslov prvega reda. Uvodna oznaka <h1> sporoči brskalniku, da gre za takšen naslov. Zaključna oznaka </h1> zaključi naslov. Zaključne oznake prepoznate po odpiranju kotne oklepaje, za njimi je poševnica </.
Na sam zapis imen elementov se pojavi vprašanje: Kaj pa velika in mala začetnica? Kot že omenjeno, je v tej seriji poudarek na HTML5. Tu lahko resnično izbirate med veliko in malo začetnico. Osebno pa izbiram dosledno rabo male začetnice, kar bom storil tudi v tej seriji. Načeloma bi po HTML5 bile naslednje stvari pravilne:
<h1>PSD-Tutorials.de – tvoje grafično, spletno in učno središče</h1> <H1>PSD-Tutorials.de – tvoje grafično, spletno in učno središče</H1> <h1>PSD-Tutorials.de – tvoje grafično, spletno in učno središče</H1>
Elemente, ki jih odprete, je treba tudi zapreti. Če uporabite <h1>, ga morate po koncu določitve naslova znova zapreti z </h1>. Čeprav obstajajo v HTML5 tukaj tudi izjeme, kot na primer vnosne postavke in odstavki, več o tem pozneje.
V HTML obstajajo tudi t. i. samostojne oznake. Te sestavljajo le eno oznako, ne pa začetne in končne oznake. Tipičen primer tega je <br />.
To je vrstica.<br /> To je druga vrstica.
Ta <br /> določa prelom vrstice.
Takšne prazne oznake običajno zaključimo z uporabo poševnice, čeprav to v HTML5 ni nujno potrebno. Tudi to bi bilo mogoče narediti:
<br>
V tej seriji boste še spoznali več teh samostojnih oznak.
Elementi gnezditi
Elemente HTML lahko tudi gnezdite. Predstavljajte si, da želite znotraj naslova poudariti del besedila. Za prikaz krepkega teksta se uporablja element i.
<h1>PSD-Tutorials.de – <i>tvoje grafično, spletno in učno središče</i></h1>
Pri gnezdjenju bodite pozorni na pravilno vrstni red. Zadnji je treba zapreti tisti element, ki je bil najprej odprt. V tem primeru je to element h1.
Uporaba atributov
V odpirajoče oznake ali samostojne oznake se lahko določijo t. i. atributi. Ti atributi elementom lahko dodelijo dodatne lastnosti. V prejšnjih časih HTML je bilo elementom dodeljenih razmeroma veliko atributov, kar je preprosto posledica mešanja med strukturo in oblikovanjem. Na primer so bile določbe o barvah neposredno dodeljene HTML elementu prek ustrezne oznake. Medtem je – seveda tudi zaradi CSS – mogoča stroga ločitev med oblikovanjem in strukturo, ki jo je treba upoštevati. Zato je uporaba atributov relativno omejena.
Pomemben atribut je id. Prek tega atributa se elementu dodeli enolično ime, prek katerega ga je na primer mogoče nasloviti prek CSS-a ali JavaScripta.
<h1 id="head">PSD-Tutorials.de – tvoje grafično, spletno in učno središče</h1>
Za dodelitev atributa dodate za h1 presledek. V atributnem imenu je običajno uporabljena mala začetnica. Za imenom atributa sledi enačaj. V narekovajih je nato vrednost atributa.
Elementu lahko dodelite tudi več atributov. Na primer, za element je povsem običajno, da dodelite tako imenovano razred in ID. Tudi za to je primer: Prek id je naslov določen enolično. Razred pa je namenjen temu, da se naslov razvrsti v določeno kategorijo. Tako lahko določite, da se vsi elementi z dodeljenim razredom modra prikažejo v modri barvi. (Več o tem CSS in barvne tematike bo seveda kasneje podrobneje).
<h1 id="head" class="blue">PSD-Tutorials.de – tvoj grafični, spletni in izobraževalni portal</h1>
Die Attribute werden in diesem Fall durch ein Leerzeichen voneinander getrennt.
Preverjanje kode
Einige grundlegende Syntaxregeln habt ihr nun bereits kennengelernt. Gerade am Anfang, wenn man HTML lernt, ist es wichtig, sich an diese Regeln zu halten. Was man sich nämlich einmal falsch angewöhnt hat, kriegt man nur schwer wieder aus dem Kopf. Ihr solltet daher euren HTML-Code immer auf Richtigkeit überprüfen bzw. validieren (lassen). Das müsst ihr natürlich nicht selbst machen. Hierfür gibt es entsprechende Online-Tools. Einen sogenannten Validator findet ihr beispielsweise unter http://validator.w3.org/.
Am besten wechselt ihr dort direkt in das Register Validate by direct Input. Hier kann man den zu überprüfenden HTML-Code direkt per Copy & Paste einfügen. Achtet unbedingt darauf, den kompletten Code der Datei einzufügen, also auch die DOCTYPE-Angabe.
Fügt, um den Validator zu testen, Folgendes in das Textfeld ein und klickt anschließend auf die Validate-Schaltfläche.
<!DOCTYPE html> <html lang="de"> <head> <title>PSD-Tutorials.de</title> <meta charset="UTF-8" /> </head> <body> <h1>PSD-Tutorials.de – tvoj grafični, spletni in izobraževalni portal</h1> </body> </html>
Das Ergebnis sollte folgendermaßen aussehen:
Hier ist alles in Ordnung. (An den zwei Warnungen müsst ihr euch in diesem Fall nicht stören). Erscheint also die Meldung This document was successfully checked as HTML5!, ist tatsächlich alles in Ordnung. Wie stellt sich das Ganze aber im Fehlerfall dar? Dazu könnt ihr einfach mal absichtlich einen Fehler in die Syntax einbauen.
<h1 id=head">PSD-Tutorials.de – tvoj grafični, spletni in izobraževalni portal</h1>
Hier wurde das einleitende Anführungszeichen bei head vergessen. Lässt man die Syntax jetzt noch einmal validieren, wird der Fehler erkannt.
Der Validator gibt daraufhin eine entsprechende Meldung aus. Was genau schiefgelaufen ist, kann man im unteren Fensterbereich ablesen.
Hier ist dann auch sehr schön beschrieben, was eigentlich der Fehler ist.
Line 8, Column 12: " in an unquoted attribute value. Probable causes: Attributes running together or a URL query string in an unquoted attribute value.
<h1 id="head" >PSD-Tutorials.de</h1>
Ihr seht also direkt, in welcher Zeile eine fehlerhafte Eingabe erfolgte, und könnt diese korrigieren. Somit hilft euch der Validator also dabei, sauberen HTML-Code zu erstellen. Ihr solltet euren Code immer validieren lassen. Denn die Browser zeigen HTML-Code oftmals korrekt an, obwohl die Syntax fehlerhaft ist. In anderen Browsern, in denen ihr eure Seiten aber nicht testet, kann das hingegen ganz anders aussehen.
