KMI/WEB - cvičení 2

HyperText Markup Language (HTML)

HTML (HyperText Markup Language) je značkovací jazyk, který definuje obsah a sémantiku webových stránek. HTML obsahuje značky, známé i jako tagy, pomocí kterých lze zapisovat HTML elementy. Ty se dělí na dvě skupiny: elementy a prázdné elementy (můžeme se setkat i s názvy párové a nepárové elementy). Připomeňme si syntaxi elementu:

<img src="obrazek.jpg" alt="Ukázkový obrázek" >

A syntaxi prázdného elementu:

<p>Toto je souvislý text.</p>

Některé HTML značky mohou mít atributy, což jsou dodatečné informace nebo vlastnosti elementu. Jazyk HTML také umožňuje vytvářet vlastní atributy, které jsou pojmenované prefixem data-. Ty mohou být užitečné především při tvorbě interaktivních webů.

Některé elementy mohou obsahovat jiné elementy. Tím vzniká vztah rodič–potomek. Tuto hierarchickou strukturu si lze velmi pěkně představit jako strom. Je důležité dávat pozor na správné uzavírání značek: značku, která byla otevřena jako poslední, uzavíráme jako první.

Každý HTML element má svůj vlastní význam a určuje sémantiku webové stránky. Je proto důležité vybírat správné elementy s ohledem na jejich význam. Člověk může často význam obsahu odhadnout z jeho vzhledu, ale stroj nikoli. Správná sémantika je zásadní například pro asistivní technologie, jako jsou čtečky pro nevidomé, které by jinak viděly stránku jen jako neuspořádaný text.

Základní struktura webové stránky

Základní struktura webové stránky vypadá následovně:

<!DOCTYPE html>
<html lang="cs">
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
    </body>
</html>

Jedná se prázdnou webovou stránku s prázdným elementem body. Tuto stránku lze v prostředí VS Code snadno vytvořit. Stačí vytvořit nový HTML soubor (soubor s příponou .html), napsat ! a zmáčknout tabulátor. Do této kostry můžeme nyní postupně doplňovat další HTML elementy a začít tak tvořit obsah webové stránky.

Cascading Style Sheets (CSS)

Přestože HTML elementy mají výchozí vizualizaci, která je popsána standardem, mohou se v různých prohlížečích zobrazovat různě. K vizualizaci webové stránky slouží technologie CSS. Je důležité uvědomit si oddělení funkcionality. Zatímto HTML určuje sémantiku a obsah stránky, CSS určuje barvy, fonty, rozložení a další vizuální vlastnosti.

Selektory

CSS se skládá ze sady pravidel. Každé pravidlo se skládá ze selektoru a deklaračního bloku. Pomocí selektoru vybíráme element jazyka HTML na webové stránce a v deklaračním bloku říkáme, co se má s tímto elementem stát. Deklarační blok se skládá z deklarací a každá deklarace se skládá z vlastnosti a hodnoty. Elementu tedy nastavíme vlastnosti na hodnoty, které jsou v deklaračním bloku uvedeny. Připomeňme si strukturu CSS pravidla:

h1 {
  color: blue;
}

Existuje několik typů selektorů. Postupně si ukážeme ty nejzákladnější.

Element selektor

Element selektor (můžete se také setkat s názvem tag name selector nebo type selector) vybírá HTML elementy podle jejich názvu. Pokud například napíšeme následující pravidlo, všechny elementy h1 na stránce budou červené.

h1 {
  color: red;
}

Class selektor

Class selektory vybírají HTML elementy podle atributu class. Tato pravidla začínají tečkou.

.subtitle {
  color: black;
}

Velmi podobně můžeme vybrat element na základě jejich atributu id. Místo tečky napíšeme #. Pamatujme ale na to, že konkrétní ID může být na stránce použito pouze jednou a že každý HTML element může mít nejvýše jedno ID.

Univerzální selektor

Jedná se o selektor, který vybere všechny HTML elementy. Je uvozen *.

* {
  margin: 0;
}

Selektor podle kontextu elementu

Tento selektor umožňuje vybrat HTML elementy, které jsou umístěné uvnitř jiného elementu.

p span {
  color: red;
}

Selektor přímého potomka

Pomocí tohoto selektoru můžeme vybrat přímého potomka určitého HTML elementu. Tento selektor vytvoříme pomocí znaku >. Následující selektor vybere všechny přímé potomky elementu article, které jsou element p.

article > p { color: red; }

Selektory podle předchůdce / sourozence

Tyto selektory umožňují vybrat HTML element podle jejich vztahu k jiným elementům v DOM. Rozlišujeme dva typy předchůdců: přímé a obecné.

Přímý předchůzce je element, který se v HTML nachází ihned před uvažovaným elementem na stejné úrovni. Tento selektor vytvoříme pomocí znaku +. Pokud například napíšeme následující selektor, vybereme element p (pouze jeden), jehož přímým předchůdcem (sousedem) je element h1.

h1 + p { color: red; }

Obecný předchůdce je element, který se v HTML nachází někde před uvažovaným elementem na stejné úrovni, nemusí být hned za ním. Tento selektor vytvoříme pomocí znaku ~. Pokud napíšeme následující selektor, vybereme všechny elementy p, které mají předchůdce element h1.

h1 ~ p { color: red; }

Pseudo-elementy a pseudo-třídy

Dalšími užitečnými selektory jsou selektory, které vybírají pseudo-elementy a pseudo-třídy. Pseudo-element je taková část stránky, která není označena žádným HTML elementem, ale chováme se k ní jako kdyby byla. Používají se například pro první písmeno v textu, nebo pro vložení obsahu před či za element.

p::first-letter { color: red; }

Pseudo-třída popisuje stav nebo pozici existujícího elementu. Používá se tehdy, když chceme element stylovat pouze v určité situaci, nebo podle jeho pozice. Následující příklad ukazuje změnu barvy elementu a po najetí kurzorem (situace).

a:hover { color: blue; }

Oproti tomu tento výběr nastaví barvu elementu p, který je prvním elementem mezi svými sourozenci (pozice).

p:first-child { color: blue; }

Jednotky v CSS

V CSS používáme jednotky k určení velikostí textu, odsazení, šířek nebo výšek prvků. Obecně je dělíme na absolutní (nemění se) a relativní (mění se v závislosti na podmínkách). Mezi nejpoužívanější patří jednotky px, em a rem. Každá z nich se chová trochu jinak a hodí se pro jiný účel.

px - pixely

Jednotka px je absolutní jednotka a představuje tedy pevnou velikost. Její hodnota se nemění podle okolí ani vlastností jiných elementů. Hodí se zejména tehdy, když chceme použít přesně daný rozměr, například u ohraničení, ikon nebo drobných detailů.

em - relativní k rodiči

Jednotka em je relativní vůči velikosti písma rodičovského elementu. Pokud se změní velikost textu u rodiče, změní se i hodnota em. Používá se tam, kde chceme, aby se velikosti automaticky přizpůsobovaly kontextu.

rem – relativní ke kořeni dokumentu

Jednotka rem je relativní vůči velikosti písma kořenového elementu html, nikoli rodiče. Hodí se například pro globální nastavení typografie nebo responzivní design.

CSS proměnné (custom properties)

CSS umožňuje vytvářet vlastní proměnné, které slouží k opakovanému používání hodnot (např. barvy, velikosti, mezery). K její definici se používá prefix -- a k použití poté funkce var(). Proměnné zvyšují přehlednost a udržovatelnost kódu.


:root {
  --hlavni-barva: blue;
  --mezera: 16px;
}

h1 {
  color: var(--hlavni-barva);
}

p {
  margin-bottom: var(--mezera);
}

Propojení HTML a CSS

V zásadě máme tři možnosti, jak propojit HTML kód s CSS styly. Vhodnost použití závisí od dané situace.

Externí CSS

V tomto případě je CSS uloženo v samostatném souboru (nebo souborech) s příponou .css. K HTML kódu jej připojíme pomocí elementu link v hlavičce webové stránky. Tento způsob se hodí pro většinu webových stránek, jelikož jasně odděluje obsah a vizualizaci webové stránky.

<head>
    <meta charset="utf-8">
    <title>Ukázka vložení externího CSS</title>
    <link rel="stylesheet" href="style.css">
</head>

Vnořené CSS

V případě vnořeného CSS zapisujeme jednotlivá CSS pravidla přímo do webové stránky do elementu style. Ten je nutné umístit buď do elementu head nebo body. Tento způsob je vhodné použít pouze pro malé ukázky, jelikož se kód může velmi rychle stát nepřehledným.

<head>
    <meta charset="utf-8">
    <title>Ukázka vnořeného CSS</title>
    <style>
      h1 {
        color: blue;
      }
    </style>
</head>

Inline CSS

Jedná se o způsob, kdy obsah deklaračního bloku CSS pravidla zapisujeme do atributu style. Tento způsob je velmi nepřehledný a je lepší ho vůbec nepoužívat.

<h1 style="color: blue;">Nadpis</h1>

Základy HTML a CSS