C týden
Tento týden až 80% sleva na e-learning týkající se jazyka C
50 % bodů zdarma na online výuku díky naší Slevové akci!

Lekce 4 - Rozložení stránky v HTML II. část

V minulé lekci, Rozložení stránky v HTML (layout), jsme si ukázali HTML 5 layout webové stránky, který bychom měli dodržovat.

Vítejte u dalšího dílu, kde si probereme další HTML 5 tagy a ukážeme si jejich použití.

<main>

V minulé lekci jsme rozebírali hlavní strukturu stránky. Jako další HTML element, který k layoutu patří je <main>. Vše v tomto tagu by mělo být unikátní. Jako příklad si uvedeme ITnetwork. ITnetwork má na webu sekce, které se opakují (hlavička, zápatí, navigace...), nic z toho by v tagu <main> nemělo být. Co by ale v něm být mělo je každý článek, ten je totiž na síti unikátní.

Tag by měl být na stránce pouze jeden a neměl by být potomkem tagů <article>, <aside>, <footer>, <header> a nebo <nav>, které známe z minulého dílu.

Tag <main> můžeme využít například takto:

<main>
  <article>
    <h1>Základy HTML 5</h1>
    <p>Jazyk HTML je základem pro tvorbu webů. Sám o sobě je velmi jednoduchý a všechny webové stránky ho využívají. Složitější weby HTML míchají s několika dalšími jazyky, některé z nich si v seriálu také ukážeme.</p>
  </article>
</main>

Kromě optimalizace pro případné indexování stránek nemá tag význam, bez stylu vypadá stránka takto:

Tag <main>
main.html

<time>

Další si uvedeme tag <time>. Tento tag nic extra nedělá a nikdy jsem ho ani na stránce v kódu neviděl. Tento tag může však zajistit lepší indexaci naší stránky, protože stroj tento čas zpracuje bez námahy a chápe ho. Kromě lepší indexace to může využít nějaký upomínkovač, který bude vyhledávat tyto tagy.

Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!

Ukážeme si pár příkladu pro formátování tohoto tagu:

<p>25. narozeniny budu mít <time datetime="2022-07-10">10. července</time>.</p>

<p>Koncert od skupiny Queen bude ve <time datetime="20:00">20:00</time>. Budou hrát přes <time datetime="PT2H30M">2h 30m</time>.</p>

V prohlížeči nic extra neuvidíme, jak jsem zmínil již výše, jde pouze pro usnadnění pochopení času pro boty:

Tag <time>
time.html

<summary> a <details>

Tyto tagy spolu navzájem souvisejí. Tag <summary> v HTML 5 označuje titulek sekce s detaily, kdy se po kliknutí na něj ukážou detaily. Používá se v tagu <details> a měl by být shrnutím skrytých detailů.

Tag <details> se v HTML 5 používá k označení zmíněných podrobnějších informací, které jsou skryty a uživatel je může zobrazit. Tag <details> může mít atribut open. Atribut je typu boolean a pokud je uveden, zobrazí se sekce <details> otevřená. Jako příklad si uvedeme krátký kód:

<img src="/images/713/html/assets/ntb.png" alt="Ultrabook ASUS ZENBOOK" style="width: 150px; float: left" />
<details open>
        <summary>Ultrabook ASUS ZENBOOK</summary>
        <p>
                Ultra mobilní notebook v hliníkovém kabátě v neuvěřitelně tenkém provedení.
                Osmijádrový procesor Intel Core i7-7700HQ (2.8GHz); 8GB operační paměti DDR4 (2666MHz);
                13.3" HD LED displej; grafika Intel HD Graphics; 64GB SSD + 500GB HDD; rozhraní:
                Bluetooth, Wi-Fi, kamera, USB 3.0; operační systém Windows Home Premium x64
        </p>
</details>

V prohlížeči se nám zobrazí již rozbalený detail:

Atribut open
detail-open.html

Můžeme také nastylovat onu šipku. Jako příklad zde uvedu pouze znak + pro rozbalení a znak - pro zabalení. HTML je stejné až na atribut open u tagu <details>, CSS vypadá takto:

details[open] > summary:before {
    content: "- ";
}
details > summary:before {
    content: "+ ";
}
details > summary::-webkit-details-marker {
    display: none;
}

Prohlížeč zobrazí pouze titulek a po rozkliknutí se zobrazí další obsah elementu <details>:

Nastylovaný detail
detail.html

<figure> a <figcaption>

Tag <figure> označuje ilustraci a jedná se o jeden z nejméně pochopených tagů. Vlastností ilustrace je, že se týká článku. Ilustrace může být obrázek, fotografie, diagram, graf apod. Nemusí to však být jen obrázek, ilustrovat obsah článku může i tabulka nebo zdrojový kód. Element je chápán jako samostatný a je z hlavního obsahu odkazován. Pokud ho přesuneme do jiného bloku, nenaruší se tok dokumentu.

Častou chybou je, že si lidé myslí, že tag <figure> je každý obrázek na webu. Element je ovšem určen k doplnění hlavního obsahu.

S <figure> je úzce svázán tag <figcaption>, který nastavuje popisek. Ukážeme si příklad použití těchto dvou elementů:

<p>
        Kos černý (Turdus merula) je pták žijící v celé Evropě a v jižní Asii, byl introdukován i do
        Austrálie a na Nový Zéland. Díky své přizpůsobivosti se adaptoval na život v blízkosti člověka a
        úspěšně žije a hnízdí i v těsném sousedství lidských sídel. Samci jsou nepřehlédnutelní svým
        charakteristickým černým peřím a žlutým zobákem, upozorňují na sebe také melodickým zpěvem.
</p>

<figure>
  <img src="/images/713/html/assets/kos-cerny.jpg" alt="Kos Černý"
  width="320" />
  <figcaption>Kos Černý na plotě</figcaption>
</figure>

Využijeme i trochu CSS:

figcaption {
   font-style: italic;
   color: darkgray;
}

Ve výsledku budeme mít tuto webovou stránku:

Tag <figure>
figure.html

Snad byl alespoň tento tag užitečný, můžeme tak bez JavaScriptu mít rozbalovací podrobnosti. Využít to můžeme i v testech, kde do detailů dáme například celé řešení příkladu.

V další lekci, Seznamy v HTML, si ukážeme tagy k tvorbě seznamu, mezi které patří <datalist>, <ul>, <li>, <ol>, <dd>, <dt>, <dl> a dále atributy reversed, start, type a value.


 

Předchozí článek
Rozložení stránky v HTML (layout)
Všechny články v sekci
HTML5
Článek pro vás napsal Samuel Hél
Avatar
Jak se ti líbí článek?
3 hlasů
Autor se věnuje hlavně programování, nejvíce z oblasti webových technologií, dělá občasné video edity ze svých dovolených. Má rád memes a svou gf
Aktivity (2)

 

 

Komentáře

Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zatím nikdo nevložil komentář - buď první!