Domů › Značkovací jazyk

Značkovací jazyk

Značkovací jazyky se dělí na:

  • popisné – např. (X)HTML
  • prodedurální
  • prezentační

(X)HTML je značkovací jazyk, který je tvořen pomocí elementů (prvků, značek).

Element (prvek, značka)

Elementy nejsou webovým prohlížečem zobrazovány přímo, ale jsou interpretovány k vytvoření vizuálního obsahu.

Element je tvořen sekvencí znaků obsahující:

  • otevírací část (počáteční tag)
  • obsah – žádný, text, nebo další prvky
  • uzavírací část (koncový tag)
    • některé specifikace (verze) značkovacího jazyka uzavírací část nevyžadují – jedná se o tzv. nepárové (prázdné) elementy, kterým je např. <img>, <hr>, <br> atd.
    • pokud u párových elementů není uzavírací značka uvedena, prohlížeč si ji snaží "domyslet" např. neuzavřený blokový element uzavře, pokud je bezprostředně následován dalším blokovým elementem 
<h1>Nadpis první úrovně</h1>

Při vnořování se prvky nesmí křížit!

<h1><em></h1></em>
<h1><em></em></h1>

Element bez obsahu

Zápis elementu bez obsahu je možné zkrátit.

Např. zápis:

<hr></hr>
  • je možné v XHTML zkrátit na:
    <hr />
  • je možné v HTML zkrátit na:
    <hr>

Poznámka:
Elementy bez obsahu nemají v HTML uzavírací část!

Atributy (parametry, vlastnosti)

Atributy se dělí na:

  • obecné (globální) – mohou být použity u všech elementů např. id, class, title atd.
  • specifické (vlastní) – jsou určeny pouze pro konkrétní elementy např. href pro odkaz, src pro obrázek atd.

Slouží k upřesnění významu nebo k přiřazení vlastností prvku. Každý atribut má definovanou svoji výchozí hodnotu. Atribut se uvádí pouze u počátečního tagu.

<h1 id="nadpis1">Nadpis první úrovně</h1>
<hr class="vytisknout" />
<img src="logo.jpg" alt='Popis “našeho” obrázku' />
  • v XHTML se názvy a atributy elementů musí psát malými písmeny
  • chcete-li u hodnoty atributu použít uvozovky, uzavřete jej do apostrofů a naopak

Poznámka:
U HTML nezáleží na velikosti písmen názvů a atributů elementů. Pokud je vlastnost atributu jednoslovná (neobsahuje mezeru), nemusí se u HTML uzavírat do uvozovek, nebo apostrofů.

Komentáře

Prohlížeče komentáře ignorují. Komentáře slouží pouze autorovi k zapsání poznámek např. k lepší orientaci v kódu. V obsahu komentáře není možné použít dvě pomlčky bezprostředně za sebou (tj. konec komentáře).

<!-- komentar -->

Poznámka:
Komentáře je vhodné psát bez diakritiky.

Podmíněné komentáře

Podmíněné komentáře (Conditional Comments (en)) umožňují vkládat bloky kódu přístupné pouze pro určitou verzi prohlížeče Internet Explorer. Ostatní prohlížeče podmíněné komentáře ignoruji.

Podmíněné komentáře je možné využít např. k opravě implementačních chyb prohlížeče Internet Explorer (IE).

Syntaxe podmíněných komentářů
 Syntaxe Význam
! negace (not)
lt menší než (less than)
lte menší nebo rovno (less than or equal to)
gt větší než (greater than)
gte větší nebo rovno (greater than or equal to)
& a (and)
| nebo (or)
Skrývající (downlevel-hidden) komentáře

Příklady:

<!--[if IE]>
  Používáte Internet Explorer.
<![endif]-->

<!--[if IE 6]>
  Používáte Internet Explorer verze 6.
<![endif]-->

<!--[if lte IE 6]>
  Používáte Internet Explorer verze 6 nebo nižší.
<![endif]-->

<!--[if (gte IE 5)&(lte IE 7)]>
  Tento text se zobrazí v IE od verze 5 až po verzi 7.
<![endif]-->

<!--[if (gte IE 5)&(lte IE 7)]>
  Tento text se zobrazí v IE od verze 5 až po verzi 7.
  <![if IE 6]>
    Tento text doplní výše uvedený text, ale pouze v IE 6
    (vnořená podmínka).
  <![endif]>
<![endif]-->
Odhalující (downlevel-revealed) komentáře

U odhalujících komentářů je nutné před zobrazovaným obsahem komentář ukončit a za zobrazovaným obsahem komentář opět začít.

Příklady:

<!--[if !IE]>
  Text, ktery se nezobrazi (obycejny komentar).
  -->
    Nepoužíváte Internet Explorer.
  <!--
  Text, ktery se nezobrazi (obycejny komentar).
<![endif]-->

<!--[if !IE]> -->
  Nepoužíváte Internet Explorer.
<!-- <![endif]-->

Pro odstranění mezer (používá se např. v hlavičce dokumentu) se používá syntaxe:

<!--[if !IE]><!-->Nepoužíváte Internet Explorer.<!--<![endif]-->
<!--[if !IE]><!--><html><!--<![endif]-->