HTML-Dokumenty sa skladajú z prvkov, ktoré sú označené tzv. značkami. Značky rozpoznáte podľa ostrých zátvoriek. Takmer všetky HTML prvky sú označené začiatočnou a ukončovacou značkou. To, čo je medzi nimi, sa nazýva rozsah platnosti.
Príklad:
<h1>PSD-Tutorials.de – tvoj grafický, webový a vzdelávací portál</h1>
Takouto syntaxou sa do dokumentu zapíše nadpis prvého poriadku. Počiatočná značka <h1> oznámi prehliadaču, že ide o taký nadpis. Ukončovacia značka </h1> ukončuje nadpis. Ukončovacie značky spoznáte podľa otvorených ostrých zátvoriek, nasledovaných lomítkom </.
Otázka sa vynára v súvislosti so spôsobom zápisu názvov prvkov: Ako je to vlastne s veľkými a malými písmenami? Ako už bolo opísané, táto séria sa zameriava na HTML5. Môžete tu skutočne vybrať medzi veľkými a malými písmenami. Osobne preferujem konzistentné používanie malých písmen a tak to budem riešiť aj v tejto sérii. Zásadne by však po HTML5 boli nasledovné veci správne:
<h1>PSD-Tutorials.de – tvoj grafický, webový a vzdelávací portál</h1> <H1>PSD-Tutorials.de – tvoj grafický, webový a vzdelávací portál</H1> <h1>PSD-Tutorials.de – tvoj grafický, webový a vzdelávací portál</H1>
Prvky, ktoré sa otvoria, musia byť aj zatvorené. Ak zadáte značku <h1>, musíte ju zatvoriť po skončení definície nadpisu </h1>. Aj keď v HTML5 existujú výnimky, ako napríklad vyhlásenia zoznamov a odseky, o tom však viac neskôr.
V HTML sú tiež tzv. samostatné značky. Tieto sa skladajú len z jednej značky, nie z počiatočnej a ukončovacej značky. Typickým príkladom je <br />.
Toto je riadok. <br /> Toto je ďalší riadok.
Táto <br /> definuje zalomenie riadku.
Takéto prázdne značky sa obvykle uzatvárajú pomocou lomítka, aj keď to v HTML5 nie je nevyhnutne potrebné. Tu by šlo aj toto:
<br>
Behom tejto série sa ešte naučíte ďalšie takéto samostatné značky.
Vnorené prvky
HTML prvky je možné tiež vnárať. Predstavte si, že chcete v rámci nadpisu zvýrazniť časť kurzívou. Na kurzívne zobrazenie sa použije prvek i.
<h1>PSD-Tutorials.de – <i>tvoj grafický, webový a vzdelávací portál</i></h1>
Pri vnorení dbajte na správne poradie. Nakoniec sa uzatvára posledný prvek, ktorý bol otvorený ako prvý. V tomto prípade je to prvek h1.
Používanie atribútov
V rámci začiatočných značiek alebo samostatných značiek je možné definovať tzv. atribúty. Tieto atribúty môžu prvkom priradiť ďalšie vlastnosti. V minulosti sa prvkom priradzovalo pomerne veľa atribútov. To bolo jednoducho spôsobené zmiešaním štruktúry a dizajnu. Tak sa napríklad definície farieb priamo přiřadzovali HTML prvkom pomocou príslušného atribútu. Vďaka CSS je v súčasnosti možné striktne oddelenie dizajnu od štruktúry, čo by sa malo dodržiavať. Z tohto dôvodu sa však používa oveľa menej atribútov.
Dôležitým atribútom je id. Tento atribút umožňuje jedinečné identifikovanie HTML prvku, ktorý je potom možné napríklad získať pomocou CSS alebo JavaScriptu.
<h1 id="head">PSD-Tutorials.de – tvoj grafický, webový a vzdelávací portál</h1>
Na priradenie atribútu sa pridá za h1 medzera. Nasleduje názov atribútu, ktorý je obvykle s malými písmenami. Za názvom atribútu nasleduje rovnítko. Attributová hodnota je zadaná v úvodzovkách.
Prvku je možné priradiť aj viacero atribútov. Je bežné, že jednému prvku sú definované atribúty triedy a ID. Ukážka: Pomocou id je nadpis jednoznačne identifikovaný. Trieda je naopak určená na zaradenie nadpisu do určitej kategórie. Tak je možné určiť, že všetky prvky s triedou blue budú zobrazené v modrej farbe. (O tomto CSS a téme farieb sa samozrejme neskôr podrobnejšie hovorí).
<h1 id="head" class="blue">PSD-Tutorials.de – tvoj grafický, webový a vzdelávací portál</h1>
Die Attribute werden in diesem Fall durch ein Leerzeichen voneinander getrennt.
Kód validovať
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 grafický, webový a vzdelávací portál</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 grafický, webový a vzdelávací portál</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.
