Nauč sa HTML od základov – 7. diel: HTML5 a nové prvky

Reklama

V siedmej časti nášho seriálu o HTML sa zameriame na HTML5, najnovšiu verziu jazyka HTML. HTML5 priniesol mnoho vylepšení a nových funkcií, ktoré uľahčujú štruktúrovanie stránok, zlepšujú prístupnosť a interaktivitu a podporujú multimediálny obsah bez potreby externých pluginov (napríklad Flash). Prejdeme si niektoré z najdôležitejších prvkov, ktoré HTML5 ponúka.

Nové semantické značky v HTML5

Jednou z hlavných zmien, ktoré HTML5 priniesol, je zavedenie semantických značiek. Tieto nové značky poskytujú lepšiu štruktúru a jasnejšie definujú rôzne časti webovej stránky, čím zlepšujú prístupnosť a čitateľnosť pre vyhľadávače a prehliadače.

Semantické značky:

• <header>: Používa sa na definovanie hlavičky stránky alebo sekcie. Obsahuje logo, navigáciu alebo úvodné informácie.

  <header>
    <h1>Názov stránky</h1>
    <nav>
      <ul>
        <li><a href="index.html">Domov</a></li>
        <li><a href="kontakt.html">Kontakt</a></li>
      </ul>
    </nav>
  </header>

• <nav>: Táto značka špecifikuje navigačné odkazy. Pomáha používateľom a vyhľadávačom rozpoznať hlavné navigačné prvky.

  <nav>
    <ul>
      <li><a href="o-nas.html">O nás</a></li>
      <li><a href="sluzby.html">Služby</a></li>
      <li><a href="kontakt.html">Kontakt</a></li>
    </ul>
  </nav>

• <article>: Definuje samostatný, nezávislý obsah. Používa sa najčastejšie pre blogové príspevky, správy alebo iný obsah, ktorý môže existovať aj mimo kontextu stránky.

  <article>
    <h2>Názov článku</h2>
    <p>Toto je obsah článku.</p>
  </article>

• <section>: Používa sa na logické oddelenie sekcií stránky. Každá sekcia môže obsahovať viacero článkov alebo iný obsah.

  <section>
    <h2>Sekcia stránky</h2>
    <p>Obsah tejto sekcie.</p>
  </section>

• <footer>: Definuje pätu stránky alebo sekcie. Zvyčajne obsahuje odkazy na autorské práva, kontaktné údaje alebo ďalšie odkazy.

  <footer>
    <p>&copy; 2024 Moja webová stránka</p>
  </footer>

• <aside>: Používa sa pre vedľajší obsah, ako sú reklamy, vedľajšie poznámky alebo dodatočné informácie, ktoré súvisia s hlavnou časťou stránky, ale nie sú jej hlavným obsahom.

  <aside>
    <h3>Vedľajší obsah</h3>
    <p>Ďalšie informácie k článku.</p>
  </aside>

Multimediálne prvky v HTML5

HTML5 zjednodušuje prácu s multimédiami. Pred HTML5 bolo nutné používať externé pluginy ako Flash na prehrávanie videí alebo zvukových súborov. Teraz môžete pridať videá a zvuky priamo pomocou vstavaných značiek.

Pridanie videa:

Značka <video> umožňuje vložiť video priamo do stránky a pridávať ovládacie prvky na prehrávanie, pozastavenie a úpravu hlasitosti.

<video controls>
  <source src="video.mp4" type="video/mp4">
  Váš prehliadač nepodporuje prehrávanie videí.
</video>

• controls: Pridáva ovládacie prvky na prehrávanie videa.
• <source>: Určuje cestu k video súboru a jeho formát.

Pridanie zvuku:

Podobne ako pre video, HTML5 ponúka aj značku <audio>, ktorá slúži na prehrávanie zvukových súborov.

<audio controls>
  <source src="zvuk.mp3" type="audio/mpeg">
  Váš prehliadač nepodporuje prehrávanie zvukových súborov.
</audio>

Nové formulárové prvky v HTML5

HTML5 tiež priniesol nové typy vstupných polí, ktoré uľahčujú prácu s formulármi. Tieto nové prvky pomáhajú zjednodušiť zber údajov a zlepšujú používateľský zážitok tým, že prehliadače môžu vykonávať automatickú validáciu.

Nové typy vstupných polí:

• <input type="date">: Umožňuje používateľom vybrať dátum pomocou vstavaného kalendára.

  <label for="datum">Vyberte dátum:</label>
  <input type="date" id="datum" name="datum">

• <input type="range">: Umožňuje používateľom vybrať hodnotu z rozsahu pomocou posuvníka.

  <label for="objem">Hlasitosť:</label>
  <input type="range" id="objem" name="objem" min="0" max="100">

• <input type="email">: Špeciálne pole na zadanie e-mailovej adresy s automatickou validáciou.

  <label for="email">E-mail:</label>
  <input type="email" id="email" name="email">

• <input type="url">: Pole na zadanie URL adresy.

  <label for="web">Vaša webová stránka:</label>
  <input type="url" id="web" name="web">

• <input type="color">: Umožňuje používateľom vybrať farbu pomocou farebného výberu.

  <label for="farba">Vyberte farbu:</label>
  <input type="color" id="farba" name="farba">

Canvas a SVG – Práca s grafikou v HTML5

HTML5 zaviedol aj podporu pre vektorovú grafiku a kreslenie priamo na webovú stránku. To znamená, že môžete vytvárať interaktívnu grafiku bez použitia externých nástrojov.

Canvas:

Značka <canvas> umožňuje kresliť grafiku, ako sú grafy, hry alebo animácie, priamo na stránku pomocou JavaScriptu.

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas>

SVG (Scalable Vector Graphics):

<svg> je značkovací jazyk pre vytváranie vektorovej grafiky. SVG je výborné pre vytváranie log, ikon alebo grafov, pretože je možné ho škálovať bez straty kvality.

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>

Úloha pre vás

Vytvorte HTML stránku, ktorá bude obsahovať:

• Semantické značky: použite <header>, <nav>, <article>, <footer>.
• Multimediálny obsah: vložte video alebo zvukový súbor.
• Nové typy vstupných polí: pridajte pole pre dátum, e-mail a farbu.
• Prvok <canvas> alebo <svg> pre vytvorenie jednoduchého grafického prvku.

Prvky Canvas a SVG (pokračovanie)

V predchádzajúcej časti sme hovorili o <canvas> a <svg> ako o nových grafických prvkoch v HTML5. Tieto prvky umožňujú kreslenie a vytváranie grafiky priamo na webovej stránke bez potreby externých nástrojov.

Príklad kreslenia na <canvas>:

Pomocou JavaScriptu môžete kresliť na element <canvas>. Toto je jednoduchý príklad:

<canvas id="mojePlatno" width="200" height="200" style="border:1px solid black;"></canvas>

<script>
  var platno = document.getElementById("mojePlatno");
  var ctx = platno.getContext("2d");
  ctx.fillStyle = "red";
  ctx.fillRect(20, 20, 150, 100);
</script>

Tento skript vytvorí na plátne červený obdĺžnik. Využívanie plátna je veľmi užitočné pri vytváraní dynamickej grafiky, napríklad hier, grafov alebo vizuálnych efektov.

Príklad s SVG:

Na rozdiel od <canvas>, ktorý používa JavaScript na vykreslenie grafiky, <svg> používa vektorové formy, ktoré sú zadefinované priamo v HTML kóde. Tu je príklad, ako vytvoriť jednoduchý červený kruh:

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>

V tomto príklade je kruh vytvorený pomocou vektorovej grafiky, ktorá je plne škálovateľná bez straty kvality.

Webové úložisko (Web Storage)

HTML5 prináša aj nové možnosti ukladania dát na strane klienta pomocou Local Storage a Session Storage, ktoré nahradili zastarané cookies. Tieto nové možnosti umožňujú ukladať údaje v prehliadači používateľa, čo je ideálne pre offline aplikácie a lepšie používateľské rozhrania.

Local Storage:

Local Storage umožňuje ukladať údaje na strane klienta, ktoré zostanú uložené aj po zatvorení prehliadača. Príklad ukladania a načítania údajov:

<script>
  // Uloženie údajov
  localStorage.setItem("meno", "Janko");

  // Načítanie údajov
  document.getElementById("vypisMeno").innerHTML = localStorage.getItem("meno");
</script>

<p id="vypisMeno"></p>

Session Storage:

Na rozdiel od Local Storage, Session Storage ukladá údaje len po dobu trvania relácie prehliadača. Po zatvorení prehliadača sú údaje odstránené.

<script>
  // Uloženie údajov pre reláciu
  sessionStorage.setItem("navstevnik", "Eva");

  // Načítanie údajov
  document.getElementById("vypisNavstevnik").innerHTML = sessionStorage.getItem("navstevnik");
</script>

<p id="vypisNavstevnik"></p>

Geolokácia

HTML5 umožňuje získať geografickú polohu používateľa pomocou Geolocation API. Táto funkcia je užitočná napríklad pre navigačné aplikácie alebo personalizované služby na základe polohy používateľa.

Príklad použitia Geolokácie:

<script>
  function ziskajPolohu() {
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(zobrazPolohu);
    } else {
      alert("Geolokácia nie je podporovaná vo vašom prehliadači.");
    }
  }

  function zobrazPolohu(pozicia) {
    document.getElementById("vypisPoloha").innerHTML =
    "Zemepisná šírka: " + pozicia.coords.latitude +
    "<br>Zemepisná dĺžka: " + pozicia.coords.longitude;
  }
</script>

<button onclick="ziskajPolohu()">Zisti moju polohu</button>
<p id="vypisPoloha"></p>

Offline aplikácie

HTML5 podporuje aj offline režim, čo znamená, že aplikácie môžu fungovať aj bez pripojenia na internet pomocou Application Cache alebo Service Workers. Toto je ideálne pre mobilné aplikácie, ktoré môžu ukladať údaje lokálne a synchronizovať ich, keď sa pripojenie obnoví.

Úloha pre vás

Na základe toho, čo ste sa naučili v tejto časti, vytvorte HTML stránku, ktorá bude obsahovať:

• <canvas> alebo <svg> prvok pre jednoduchú grafiku.
• Prvky pre ukladanie údajov do Local Storage alebo Session Storage.
• Geolokačnú funkciu, ktorá zistí a zobrazí polohu používateľa.

Záver 7. časti

V tomto dieli sme sa venovali novým prvkom HTML5, ktoré vám umožnia lepšie štruktúrovať stránku, pracovať s multimédiami, grafikou, a zlepšiť interaktivitu aplikácií. HTML5 prináša mnohé výhody, ktoré umožňujú vytvárať modernejšie a funkčne bohatšie webové stránky bez potreby externých nástrojov alebo pluginov.

Pokračujte v seriáli:

• 8. diel: Základy CSS pre HTML – Naučte sa, ako štýlovať a formátovať svoje HTML stránky pomocou CSS.

Reklama