4. diel - Rozloženie stránky v HTML II. časť

V minulej lekcii, Základná štruktúra HTML druhýkrát , sme pokračovali so štruktúrou HTML dokumentu. Ukážeme si tagy <script>, <style>, <link>, <base> a <body>.

Vitajte u ďalšieho dielu, kde si preberieme ďalšie HTML 5 tagy a ukážeme si ich použitia.

`<main>`

V minulej lekcii sme rozoberali hlavnej štruktúru stránky. Ako ďalšie HTML element, ktorý k layoutu patrí je <main>. Všetko v tomto tagu by malo byť unikátne. Ako príklad si uvedieme ITnetwork. ITnetwork má na webe sekcie, ktoré sa opakujú (hlavička, zápätie, navigácia ...), nič z toho by v tagu <main> nemalo byť. Čo by však v ňom byť malo je každý článok, ten je totiž na sieti unikátne.

Tag by mal byť na stránke iba jeden a nemal by byť potomkom tagov <article>, <aside>, <footer>, <header> a alebo <nav>, ktoré poznáme z minulého dielu.

Tag <main> môžeme využiť naprí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>

Okrem optimalizácie pre prípadné indexovanie stránok nemá tag význam, bez štýlu vyzerá stránka takto:

Tag <main>

main.html

`<time>`

Ďalšie si uvedieme tag <time>. Tento tag nič extra nerobí a nikdy som ho ani na stránke v kóde nevidel. Tento tag môže však zabezpečiť lepšiu indexáciu našej stránky, pretože stroj tento čas spracuje bez námahy a chápe ho. Okrem lepšej indexácia to môže využiť nejaký upomínkovač, ktorý bude vyhľadávať tieto tagy.

Ukážeme si pár príkladu pre formátovanie tohto 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 prehliadači nič extra neuvidíme, ako som spomenul už vyššie, ide iba pre uľahčenie pochopenie času pre topánky:

Tag <time>

time.html

`<summary>` a `<details>`

Tieto tagy spolu navzájom súvisia. Tag <summary> v HTML 5 označuje titulok sekcie s detailmi, kedy sa po kliknutí naň ukážu detaily. Používa sa v tagu <details> a mal by byť zhrnutím skrytých detailov.

Tag <details> sa v HTML 5 používa na označenie spomínaných podrobnejších informácií, ktoré sú skryté a užívateľ ich môže zobraziť. Tag <details> môže mať atribút open. Atribút je boolean a pokiaľ je označený, zobrazí sa sekcie <details> otvorená. Ako príklad si uvedieme krátky 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 prehliadači sa nám zobrazí už rozbalený detail:

Atribut open

detail-open.html

Môžeme tiež nastylovať onú šípku. Ako príklad tu uvediem iba znak + pre rozbalenie a znak - pre zabalenie. HTML je rovnaké až na atribút open pri tagu <details>, CSS vyzerá takto:

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

Prehliadač zobrazí len titulok a po rozkliknutí sa zobrazí ďalší obsah elementu <details>:

Nastylovaný detail

detail.html

`<figure>` a `<figcaption>`

Tag <figure> označuje ilustráciu a jedná sa o jeden z najmenej pochopených tagov. Vlastnosťou ilustrácie je, že sa týka článku. Ilustrácie môže byť obrázok, fotografie, diagram, graf apod. Nemusí to však byť len obrázok, ilustrovať obsah článku môže aj tabuľka alebo zdrojový kód. Element je chápaný ako samostatný a je z hlavného obsahu odvoláva. Pokiaľ ho presunieme do iného bloku, nenaruší sa tok dokumentu.

Častou chybou je, že si ľudia myslia, že tag <figure> je každý obrázok na webe. Element je však určený na doplnenie hlavného obsahu.

S <figure> je úzko zviazaný tag <figcaption>, ktorý nastavuje popisok. Ukážeme si príklad použitia týchto dvoch elementov:

<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 aj trochu CSS:

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

Vo výsledku budeme mať túto webovú stránku:

Tag <figure>

figure.html

Snáď bol aspoň tento tag užitočný, môžeme tak bez JavaScriptu mať rozbaľovacej podrobnosti. Využiť to môžeme aj v testoch, kde do detailov dáme napríklad celé riešenie príkladu.

V ďalšej lekcii, Zoznamy v HTML , si ukážeme tagy k tvorbe zoznamu, medzi ktoré patria <datalist>, <ul>, <li>, <ol>, <dd>, <dt>, <dl> a ďalej atribúty reversed, start, type a value.

Článok pre vás napísal Samuel Hél

Užívateľské hodnotenie:

Ešte nikto nehodnotil, buď prvý!

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, svou gf a elektroniku

Aktivity

4. diel - Rozloženie stránky v HTML II. časť

<main>

<time>

<summary> a <details>

<figure> a <figcaption>

`<main>`

`<time>`

`<summary>` a `<details>`

`<figure>` a `<figcaption>`