HTML-Dokumenty se skládají z elementů, které jsou označeny tzv. značkami. Značky poznáte podle hranatých závorek. Téměř všechny HTML elementy jsou označeny úvodní a závěrečná značka. To, co je mezi tím, se nazývá oblast platnosti.
Příklad:
<h1>PSD-Tutorials.de – dein Grafik-, Web- & Lernportal</h1>
Tímto zápisem se do dokumentu zapíše nadpis první úrovně. Úvodní značka <h1> udává prohlížeči, že se jedná o takový nadpis. Závěrečná značka </h1> ukončuje nadpis. Závěrečné značky poznáte podle otevíracího hranatého závorky, následovaného lomítkem </.
Ohledně psaní názvů prvků se vynořuje otázka: Jak to vlastně je s velkými a malými písmeny? Jak již bylo popsáno, v této sérii je zaměření na HTML5. Zde můžete skutečně vybírat mezi velkými a malými písmeny. Osobně upřednostňuji konzistentní použití malých písmen a budu to také dodržovat v této sérii. Nicméně by v HTML5 měly být následující věci správné:
<h1>PSD-Tutorials.de – dein Grafik-, Web- & Lernportal</h1> <H1>PSD-Tutorials.de – dein Grafik-, Web- & Lernportal</H1> <h1>PSD-Tutorials.de – dein Grafik-, Web- & Lernportal</H1>
Elementy, které se otevřou, musejí být také zase uzavřeny. Takže pokud například použijete značku <h1>, musíte ji po ukončení definice nadpisu také zavřít </h1>. I když v HTML5 zde jsou výjimky, jako například seznamové položky a odstavce, o tom však později více.
V HTML existují také tzv. Standalone-Tags. Tyto se skládají pouze z jedné značky, ne z úvodní a koncové značky. Typickým příkladem je <br />.
To je řádek.<br /> To je druhý řádek.
Tato <br /> definuje zalomení řádku.
Meziprostorové značky se obvykle uzavírají lomítkem, i když to v HTML5 není nutné. Zde by také fungovalo následující:
<br>
Během této série se dozvíte další z těchto Standalone-Tags.
Vnořování prvků
HTML prvky je možné také vnořovat. Představte si, že chcete v rámci nadpisu zvýraznit text kurzívou. Pro kurzívní zobrazení se používá prvek i.
<h1>PSD-Tutorials.de – <i>dein Grafik-, Web- & Lernportal</i></h1>
Při vnořování dbejte na správné pořadí. Jako poslední se uzavírá prvek, který byl jako první otevřen. V tomto konkrétním případě je to tedy prvek h1.
Použití atributů
V rámci úvodních značek nebo Standalone-Tags lze definovat tzv. atributy. Tyto atributy mohou prvky vybavit dalšími vlastnostmi. V dřívějších dobách HTML byly prvkům přidělovány relativně mnoho atributů. To vycházelo z mísení struktury a designu. Například definice barev byla přímo předávána prvku HTML přes příslušný atribut. Mezitím je - samozřejmě díky CSS - možná striktní oddělení designu a struktury, což by také mělo být dodržováno. Proto je nyní používáno relativně málo atributů.
Důležitým atributem je id. Tímto atributem lze prvku HTML přidělit jedinečné jméno, kterým jej lze například oslovit pomocí CSS nebo JavaScriptu.
<h1 id="head">PSD-Tutorials.de – dein Grafik-, Web- & Lernportal</h1>
K přidělení atributu se za h1 přidá mezera. Následuje název atributu, který je obvykle malými písmeny. Za názvem atributu následuje rovnítko. V uvozovkách následuje hodnota atributu.
Prvku lze přidělit také více atributů. Takže je například běžné, že je pro prvek definován tzv. třída a ID. Zde je příklad: Přes id je nadpis jednoznačně identifikován. Třída slouží k zařazení nadpisu do konkrétní kategorie. Takto lze určit, že všechny prvky, kterým je přidělena třída blue, budou zobrazeny modrou barvou. (Více o tomto CSS- a barevném tématu pak samozřejmě později podrobně).
<h1 id="head" class="blue">PSD-Tutorials.de – tvůj grafický, webový a vzdělávací portál</h1>
Die Attribute werden in diesem Fall durch ein Leerzeichen voneinander getrennt.
Ověřte kód
Nyní jste již pochopili některá základní syntaxní pravidla. Zejména na začátku učení HTML je důležité dodržovat tato pravidla. Co si totiž člověk jednou zvykne špatně, těžko to z hlavy dostane. Proto byste měli vždy kontrolovat nebo validovat svoje HTML kódy na správnost. To však nemusíte dělat sami. Existují k tomu odpovídající online nástroje. Například naleznete takzvaný validator na adrese http://validator.w3.org/.
Nejlépe přejděte přímo na záložku Ověření pomocí přímého vstupu. Zde můžete přímo vložit kód ke kontrole přes kopírování a vkládání. Určitě si dejte pozor, abyste celý kód souboru vložili, včetně udání DOCTYPE.
Abyste otestovali validator, vložte následující do pole textu a poté klikněte na tlačítko Validovat.
<!DOCTYPE html> <html lang="de"> <head> <title>PSD-Tutorials.de</title> <meta charset="UTF-8" /> </head> <body> <h1>PSD-Tutorials.de – tvůj grafický, webový a vzdělávací portál</h1> </body> </html>
Výsledek by měl vypadat následovně:
Zde je vše v pořádku. (V těchto dvou varováních se v tomto případě nemusíte znepokojovat). Pokud se tedy zobrazí zpráva Tento dokument byl úspěšně ověřen jako HTML5!, je vše v pořádku. Jak ale vypadá situace v případě chyby? Můžete si jednoduše záměrně do syntaxe vložit chybu.
<h1 id="head">PSD-Tutorials.de – tvůj grafický, webový a vzdělávací portál</h1>
Zde bylo zapomenuto počáteční uvozovky u head. Pokud nyní necháte validovat syntaxi, chyba bude rozpoznána.
Validator následně vydá příslušnou zprávu. Přesně se tak dozvíte, kde došlo k chybnému vstupu, a můžete jej opravit. Validator vám tedy pomáhá vytvářet čistý HTML kód. Měli byste nechat vždy váš kód ověřit. Prohlížeče totiž často správně zobrazí HTML kód, i když je syntaxe chybná. V jiných prohlížečích, ve kterých vaše stránky neotestujete, se může ale situace zcela odlišovat.
