Giters

tvorimweb-2021-praha-jaro / lekce_07

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Tvořím web A–Z: lekce 7

jaro 2021, Praha

27. dubna 2021

Sémantické značky

Značky vol podle toho, co daná část HTML dokumentu představuje: bude to běžný text, poznámka pod čarou, seznam, článek, navigace atd.?

Nikdy nepoužívej značku podle toho, jak vypadá. Vzhled řeš pomocí CSS, nikoli HTML.

Rozdíl mezi article a section

note:

article

  • samostatná část stránky (úryvek článku ve výpise, výrobek v e-shopu apod.)
  • má svůj ekvivalent v podobě samostatné stránky (viz výše uvedené: celý článek, detail výrobku atd.)

section

  • zjednodušeně: tam, kde se nedá použít article, ale přesto máme vymezenou část stránky (shrnutí článku, popis kategorie ve výpisu zboží)

note:

  • Když v takovém případě použijete div není to hrubá chyba, ale snížíte přístupnost stránky pro ty, co jsou odkázáni na strojové čtení.
  • původně byly se section širší plány, ale bohužel se neujaly. Šlo o to, že section by určovala úroveň nadpisů, ale nikdy to žádný prohlížeč plně neimplementoval. To se někdy děje.

Kdy použít div (případně span)?

Pokud potřebuješ do HTML přidat prvek, abys dosáhla kýženého stylu, například chceš vytvořit flexboxový kontejner, přidej div.

Pro řádkové prvky bez významu, použij span.

Pár značek pro začátek

Pro začátek se držte doporučení z Marksheet.io (mimochodem výborný zdroj pro začátky s HTML/CSS: stručný a přehledný a v angličtině):

Máte na výběr asi stovku HTML elementů. To je dost. Dá to fušku procházet celý jejich seznam, abyste vybraly tu správnou značku. Takže si to nekomplikujte a nemarněte čas výběrem vhodné značky pro ten který kousek stránky. Pro začátek po stačí, když si osvojíte tyto značky (a postupně se seznámíte s dalšími):

Structure Text Inline
main
header
h1
h2
h3
nav
footer
article
section 		p
ul
ol
li
blockquote 		a
strong
em
q
abbr
small

note:

HTML se pořád vyvíjí

Přesto sledujte dění a mějte oči otevřené. HTML vám toho dává k dispozici mnohem víc, než jen nadpisy, odkazy a odstavce.

Prvek details Něco, co byste dříve nevytvořily bez užití JavaScriptu, nabízí nyní HTML v základu. 
<details>
    <summary>Prvek <code>details</code></summary>
    Něco, co byste dříve nevytvořily bez užití JavaScriptu, nabízí nyní HTML v základu.
</details>

Obrázkové pozadí

Vlastnost background-image

article {
    background-image: url('cesta/k/obrazku.jpg');
}

Vlastnost background-repeat

article {
    background-repeat: no-repeat;
}

note:

  • ve výchozím nastavení se obrázky na pozadí opakují (je-li pro ně místo)

Vlastnost background-size

article {
    background-size: cover; /* roztáhne se přes celou plochu prvku */
    background-size: contain; /* zobrazí se tak, aby byl vidět celý */
    background-size: 100px 200px; /* zobrazí se přesně na pixel */
    background-size: 100% auto; /* zobrazí se přesně na pixel */
}

note:

  • U cover a contain se zachovává poměr stran obrázku.
  • U číselných hodnot hrozí deformace. Vyhneš se tomu, pokud nastavíš jeden z rozměrů na auto.
  • Další informace na VzhůruDolů.cz

Vlastnost background-position

article {
    background-position: left top;
    background-position: 25% center;
    background-position: 25px 150px;
    background-position: center;
}

note:

  • souřadnice jako při pozicování prvků, navíc lze zadat center

Lineární gradient

Zápis gradientu

article {
    background-image: linear-gradient(white, black);
}

note:

Několikanásobné pozadí v CSS

.dlazdice {
    background-image:
        url('img/pravy-horni.png'),
        url('img/levy-dolni.png');
    background-position:
        right top,
        left bottom;
    background-repeat:
        no-repat,
        no-repeat;
}

note:

  • Pořadím v kódu určuješ vrstvení na stránce. První obrázek na pozadí, bude nejvýše, a dojde-li k překryvu, překryje ostatní.

HTML entity

Snad všechny myslitelné znaky (písmena, číslice, klikyháky, emotikony) se dají v HTML vyjádřit kódem, tzv. entitou. Například š lze zapsat jako &scaron;. S tím, že HTML entita vždy začíná & a končí ;. Mezi nimi je buď pojmenovaná entita, jako v příkladě výše, nebo číselný kód. Pozor, na velikosti písmen záleží (&scaron; = š, &Scaron; = Š).

Dnes, když je kódování UTF-8 plně rozšířeno, ztrácejí entity na významu. Většinu písmen a symbolů stačí zapsat prostým znakem. Z entit nám pak zůstává nejčastěji nezalomitelná (pevná mezera) &nbsp; (Non-Breaking SPace). Tu bychom například v českých textech měli používat vždy za jednopísmennými předložkami: <q>v&nbsp;řece</q>. Nebo mezi číslem a jednotkou: <q>80&nbsp;kg</q>.

Pozor, entitou vždy zapisujeme, tzv. escapujeme řídicí znaky (které mají v HTML zvláštní význam):

&gt; = >
&lt; = <
&amp; = &

Entitu musíme například použít, když chceme vypsat &lt; ve smyslu větší než. Nepoužití entity mate prohlížeč, který vidí začátek otevírací značky.

Nově se entity vracejí na scénu v podobě populárních emoji, např. &#128567; = 😷

note:

About

Languages

Language:HTML 64.3%Language:CSS 35.7%