HTML: důležité tagy, CSS

2024-09-12

Co jsme dnes dělali?

img tag
- V rámci accessibility¹ používáme alt atribut
  - Pomáhá lidem se zrakovým postižením a těm, kteří používají čtečku displeje
  - Píšeme do něj co, co by člověk viděl na obrázku
- src atribut může být i odkaz na obrázek z internetu
Korektní struktura HTML stránky
- <!DOCTYPE html> jako první řádek souboru, říká nám, co za verzi HTML používáme (v tomto případě html znamená verze 5)
- Základní metadata v hlavičce
  - <meta charset="utf-8"> prohlížeči říká, že má na encoding textu použít standard UTF-8
    - V porovnání s ASCII má mnohem více znaků (a ne jen 128, z čehož jich 30 vůbec nejsou znaky).
  - <meta name="viewport" content="width=device-width, initial-scale=1"> prohlížeči říká, pokud zobrazuje obsah na nějakém zařízení, má vzít jako základní šířku šířku tzv. viewportu (to je to místo, kam se vykresluje stránka). Také říká, že má tato šířka být nastavena jako 100 % šířky stránky (tedy to, co se vám zobrazí bez přibližování).
div element
- Univerzální kontejner pro jakékoli použití
- Nenese žádný sémantický význam (což může být jak žádoucí, tak naopak)
- Je to blokový element
Další tagy jako br, strong, em, a a jejich často používané atributy
Blokový vs inline element
- inline elementy se nezalamují v textu, "tečou" s textem
- blokové elementy se zalomí, zaberou 100 % rodiče
Formuláře
- Top-level element form
- Do něj lze vkládat input elementy, které určují, co do nich má uživatel napsat
- label inputy dále specifikují (ale jen esteticky), co to je za input
  - Jsou to jen nápovědy pro uživatele
  - Musí se s příslušným inputem nějak spojit
    - Buď že se input vloží do label
    - Nebo použítí id atributu na input a for atributu na label.
Základ CSS
- Kaskádové styly
  - Kaskáda podle specificity (priority) selektorů
- Selektor je nějaké pravidlo, které působí na určité elementy na stránce
- Příklady selektorů
  - volí všechny elementy, které jsou typu h3 a nastaví textu, který je v nich, zelenou barvu
```
h3 {
  color: #0f0;
}
```
  - volí všechny elementy, které jsou typu h2 nebo h3 a nastaví textu, který je v nich, zelenou barvu
```
h2,
h3 {
  color: #0f0;
}
```
  - volí všechny elementy, které mají nastavenou třídu zelena a nastaví textu, který je v nich, zelenou barvu
```
.zelena {
  color: #0f0;
}
```
  - volí všechny elementy p, které mají nastavenou třídu zelena a nastaví textu, který je v nich, zelenou barvu
```
p.zelena {
  color: #0f0;
}
```
- Třída se nastavuje atributem class a může se nastavit stejná třída pro více elementů
- Příklad priority selektorů
  - Máme takovéto CSS:
```
h2,
h3 {
  color: pink;
}

h3.zelena {
  color: green;
}
```
  - Pokud máme element <h3 class="zelena">zeleny text</h3>, bude mít text zelenou barvu, protože druhý selektor je víc specifický.

Úlohy

Dodělejte formulář, který na kterém jsme začali pracovat na semináři. Po dokončení pushněte do vašeho repozitáře. Odkaz na formulář zde