Úvod do HTML a CSS - lekce 10

Podklady ke stažení

Pokračuj se svým kódem z minulé lekce.

Nemáš-li z nějakého důvodu kód k dispozici, zde je ke stažení náš projekt ve stavu, v jakém jsme ho opustili v minulé lekci: czchts.cz/htmlcss10

Menu a skok na sekce stránky

Menu nebo navigační „rozcestník“ je součástí téměř každé stránky. Náš projekt je tvořený pouze jednou stránkou, takže rozsáhlá navigace nedává velký smysl, ale přesto do projektu přidáme jednoduché menu pod hlavičku. Jednotlivé odkazy v menu budou skákat na sekce naší stránky (O mně, Fotogalerie, Turistický průvodce, Kontakt).

Menu

Menu můžeme považovat za jednoduchý seznam odkazů. Sémanticky tedy dává smysl, vytvořit menu v HTML pomocí značek pro seznam. Obvykle používáme neseřazený seznam <ul>. Uvnitř každé položky seznamu <li> je odkaz, který povede na sekci stránky. Atribut href, kam bychom normálně napsali cílovou adresu odkazu, zatím necháme prázdný:

<ul class="menu">
 <li><a href="">O mně</a></li>
 <li><a href="">Fotogalerie</a></li>
 <li><a href="">Turistický průvodce</a></li>
 <li><a href="">Kontakt</a></li>
</ul>

ID prvku

Chceme-li skákat na jednotlivé sekce stránky, musíme je pro prohlížeč nějak identifikovat. K tomu slouží atribut id, do jehož hodnoty dáme název identifikátoru.

ID prvku musí být na stránce jedinečné. Je to „číslo občanky“ prvku, prvek jde podle něj jednoznačně identifikovat. Na stránce by nikdy nemělo být více prvků se stejným ID.

ID se může skládat pouze z malých a velkých písmen, číslic, pomlčky, podtržítka, dvojtečky a/nebo tečky. Musí začínat písmenem. Nemůžeme použít znaky s diakritikou. Nejjednodušší je držet se pravidla, kdy vše píšeme jako jedno slovo dohromady, malými písmeny.

Atribut id lze přidat k libovolnému prvku, my ho v našem projektu přidáme k jednotlivým sekcím:

<section id="omne"> … </section>

<section id="fotogalerie"> … </section>

<section id="pruvodce"> … </section>

<section id="kontakt"> … </section>

ID jako cíl odkazu

Když má prvek přidělené ID, můžeme toto ID použít jako cíl odkazu. Do atributu href odkazu napíšeme znak mřížky # následovaný identifikátorem prvku:

<a href="#omne">O mně</a>

Takto napsaný odkaz znamená „na této stránce skoč na prvek, který má identifikátor omne“. Prohlížeč posune obsah stránky v okně tak, aby prvek s daným ID byl co nejvýše na stránce.

V našem projektu to nepotřebujeme, ale skok na konkrétní ID jde použít i v případě, že máme odkaz na jinou stránku:

<a href="strana2.html#omne">O mně</a>

Takto napsaný odkaz prohlížeči řekne, že má otevřít stránku strana2.html a na ní se přesunout na prvek s id="omne".

Chceme-li skákat na různá ID v rámci aktuální stránky, neuvádíme adresu stránky (název souboru), ale pouze mřížku následovanou ID prvku.

Blokové a řádkové prvky

Každý HTML element je určitého typu - blokový, řádkový, řádkově-blokový, a další. Typ prvku určuje, jakým způsobem se prvek zobrazuje uvnitř stránky.

Blokové prvky

• zabírají na šířku celý prostor, který mají k dispozici (buď celou šířku stránky nebo celý prostor, který mají k dispozici od svého nadřazeného prvku / rodiče), výška se přizpůsobuje podle obsahu prvku (není-li nastaveno jinak)
• začínají vždy na novém řádku
• blokové prvky se v dokumentu skládají pod sebe

Příkladem blokového prvku je například nadpis <h1>, <h2>, atd., odstavec <p>, oddíl <div> nebo <section>, seznam <ul> i položka seznamu <li> a mnoho dalších.

Řádkové prvky

• v řádku zabírají pouze nezbytně nutnou šířku, dle svého obsahu
• jsou uvnitř řádku, nezačínají v dokumentu nový řádek
• na stránce se v rámci řádku skládají vedle sebe

Příkladem řádkového prvku je např. odkaz <a>, značky <em> a <strong> pro zdůraznění textu, a mnoho dalších.

Řádkovým prvků nejdou nastavit některé vlastnosti box modelu:

• nejde nastavit šířka a výška
• jde nastavit padding a margin, ale ve vertikálním směru (nahoře a dole) nefunguje „správně“ - prvek má sice nastavený padding nebo margin, ale ten neodsouvá okolní řádky textu od sebe, jak bychom očekávali.

Řádkově-blokové prvky

Existují ještě hybridní prvky, neboli prvky řádkově-blokové. Ty kombinují vlastnosti obou předchozích typů. Tj. jdou jim nastavit a správně fungují všechny vlastnosti box-modelu (šířka, výška, padding, margin), ale přitom se skládají v řádku za sebe.

Příkladem takového prvku je například značka <img> pro obrázek.

Změna typu prvku - CSS vlastnost display

Typ prvku můžeme v CSS libovolně měnit. Z prvku, který je ve výchozím stavu prohlížeče blokový, můžeme udělat prvek řádkový nebo řádkově-blokový, a naopak.

Typ prvku se mění CSS vlastností display. Vlastnost může mít hodnotu:

• block - blokový prvek
• inline - řádkový prvek
• inline-block - řádkově-blokový prvek
• none - skrytý prvek
• a další

Existuje spousta dalších hodnot pro tabulkové prvky, flexbox, css grid a další, které jsou ale mimo rozsah tohoto kurzu.

Zajímavá je hodnota none. Když prvku nastavíme display: none;, bude prvek skrytý a prohlížeč se bude chovat, jako by v dokumentu neexistoval.

Chceme-li na naší stránce udělat horizontální menu, kde jsou jednotlivé položky vedle sebe, musíme z položek seznamu (blokové prvky) udělat řádkové nebo řádkově-blokové prvky, čímž dostaneme položky na řádek vedle sebe.

li {
 display: inline-block;
}

Pseudotřídy

V předchozích lekcích jsme si ukazovali CSS třídy, které jsme k vybraným prvkům přiřazovali pomocí atributu class="trida".

Pseudotřídy prvkům nepřidáváme, existují na prvku samy od sebe ve chvíli, kdy je prvek v určitém stavu - například když nad prvek najedeme kurzorem myši, když klikneme na tlačítko, apod.

Pro tlačítka v menu jsou pro nás zajímavé tyto pseudotřídy:

• hover - prvek, nad kterým je kurzor myši
• focus - vybraný (zaostřený) prvek, ať už pomocí myši nebo klávesnice (stiskem klávesy Tab)
• active - prvek, který uživatel právě aktivuje (tj. kliká na něj, ale ještě nepustil tlačítko myši)

Pseudotřídy zapisujeme v CSS za dvojtečku hned za selektorem prvku. Chceme-li například změnit barvu pozadí odkazu, na který se najelo kurzorem myši, zapíšeme do CSS:

a {
 background-color: yellow;
}

a:hover {
 background-color: red;
}

Kód výše způsobí, že odkazy na stránce budou mít žluté pozadí. Ve chvíli, kdy na odkaz najedeme myší, změní se barva na červenou. Stejně se používají i ostatní pseudotřídy. Uvnitř CSS deklarace pak pro daný stav prvku můžeme samozřejmě změnit jakékoliv CSS vlastnosti.

Konkrétně pro odkazy jsou zajímavé ještě pseudotřídy:

• link - ještě nenavštívený odkaz
• visited - navštívený odkaz, uživatel už na cílové stránce někdy byl

Kontrolní otázky

• Pomocí jakých značek v HTML vytvoříme menu? (není to nutná podmínka, ale jde o většinovou zavedenou praxi)
• Jaké typy HTML prvků znáš? (podle způsobu, jakým se v dokumentu zobrazují)
• Jaký je rozdíl mezi řádkovým a blokovým prvkem?
• Jako CSS vlastností měníme typ prvku?
• Co je CSS pseudotřída a k čemu se používá?

‍