3. Z čeho se internetová stránka skládá

Základním stavebním kamenem webové stránky jsou HTML soubory. Jsou to soubory ve speciálním formátu a s příponou .html. Obsah tohoto souboru je v prostém textu. Jak tedy webový prohlížeč pozná, jak webovou stránku zobrazit?

Jazyk HTML

HTML (HyperText Markup Language) je speciální značkovací jazyk, který nám umožňuje specifikovat pro prohlížeč, která část naší stránky je nadpis, kde je odstavec, obrázek, odkaz, či další prvky.

Webové stránky se neskládají pouze z textu, ale obsahují také navigaci, záhlaví a zápatí stránky, odkazy a obrázky, seznamy a mnoho dalšího. A přesně k tomu nám HTML slouží.

O webových stránkách můžeme přemýšlet jako o kostkách Lego. Jsou to jednotlivé bloky, ze kterých budeme stavět. Jednotlivým kostkám se říká elementy.

<element>

Jak je vidět, element je obklopen ostrými závorkami: otevření a zavření <>. To umožňuje prohlížeči pochopit, že se jedná o HTML tag, který má patřičně zobrazit.

Elementy jsou ve většině případů párové, tj. mají otevírací a ukončovací část. Ukončovací část vždy obsahuje před názvem elementu lomítko /, tj.

<element>Obsah elementu</element>

Jednotlivé HTML prvky mohou být zpravidla vnořovány do sebe, například:

<element>
  Rodičovský element
  <element>
    Vnořený element - dítě
  </element>
</element>

Do nepárových elementů už ze své podstaty nejde vnořovat jiný element. Tyto elementy také nemají žádný uzavírací prvek, nevyužívají zpětné lomítko, příklad - vykreslení vodorovné čáry:

<hr>

HTML elementy mohou obsahovat také atributy. Mnohdy by samotný element bez atributů byl k ničemu. Zápis atributů se provádí takto:

<element atribut="hodnota">Atribut u párového prvku</element>

<element atribut="hodnota">- Atribut u nepárového prvku

Pro každý HTML tag (element) jsou normou přesně specifikovány atributy, které je možné použít.

Info: Ostré závorky píšeme na české klávesnici (Windows) pomocí:
< - [Pravý ALT] + [,] 
> - [Pravý ALT] + [.]

Oddělení obsahu a vzhledu

Před tím, než se pustíme do psaní HTML stránek, je nutné zmínit velice důležité pravidlo, které se vztahuje na webové vývojáře, a to je oddělení obsahu a prezentace.

Již jsme si řekli, že jazyk HTML používáme k popisu webového obsahu. Neobsahuje žádné informace o tom, jak by měly stránky vypadat. Každý prohlížeč má v sobě zabudovanou definici pro zobrazení výchozích prvků, jako jsou odstavce a nadpisy a podobně, ale takové stránky by nebyly pěkné. Musíme je tedy obléci do něčeho hezčího. A k tomu nám slouží kaskádové styly, neboli CSS.

Zápis CSS kódu je možný na třech místech:

1. Přímo do HTML elementu pomocí atributu style:

   <div style="color:red;">Element bloku</div>
   

   Ale toto není běžná praxe, protože by se poté kód stránky stal nepřehledným, a složitým pro úpravy.
2. Je možné zapisovat CSS kód do těla souboru mezi elementy:

   <style>
   ...
   css kód
   ...
   </style>
   

3. Psaní do samostatných souborů s příponou .css a zahrnutí těchto soubroů do HTML stránky. Jak se toto provádí se dozvíte později.

Jazyk CSS

Jazyk CSS se od zápisu HTML výrazně liší. HTML nám umožňuje vytvářet obsah (strukturu) stránky, zatímco pomocí CSS zapisujeme pravidla, která popisují, jak se které prvky (elementy) mají zobrazovat.

Syntaxe CSS využívá selektory pro vybrání prvku stránky, které chceme dát určitý vzhled. Selektor následuje složenou závorkou a poté pravidly pro zobrazení elementu. Ukončen je zavírací složenou závorkou:

selektor {
  vlastnost: hodnota;
}

neboli:

p {
  color: blue;
}

V tomto případě se text v elementu p - odstavec (paragraph) - bude zobrazovat modrou barvou.