Úvod do HTML5

HTML predstavuje značkový jazyk slúžiaci najmä na tvorbu webových stránok. HTML je tvorené skupinou tagov (<>, </>), ktoré spolu definujú štruktúru webovej stránky.

HTML si prešlo dlhou fázou vývoja a možno je tu dlhšie, ako niektorí z vás, ktorí práve čítajú tento tutoriál. :)

Viac než len webové stránky

S príchodom HTML 5 je možné využívať HTML nielen na tvorbu webových stránok.

1. Môžeme vytvoriť offline aplikácie bez internetového pripojenia
2. Perzistetné úložisko dát pomocou HTML5 Local Storage
3. Pracovať s geolokačnými dátami
4. Vykreslovať 3D grafiku, objekty a animácie
5. Vytvárať multiplatformové mobilné aplikácie
6. ...

Ako vlastne vytvorím z HTML webovú stránku?

Vo chvíľi keď sa načíta naša webová stránka, náš prehliadač vytvorí Document Object Model (skrátene DOM) webstránky.

DOM štruktúra je tvorená elementami, ktoré majú medzi sebou rôzne vzťahy. Môžeme sa na ňu pozerať ako na rodokmeň, no namiesto členov rodiny sa na jednotlivých vetvách nachádzajú konkrétne HTML elementy.

Vzťahy medzi elementami

Rovnako ako v rodine máme vzťahy medzi rodičom a dieťatom, súrodencami, prarodičmi, tak v HTML elementy pracujú na rovnakom princípe.

HTML elementy na rovnakej úrovni sú označované ako siblings (súrodenci).

HTML elementy vnorené do seba sú označované ako parent a child, pričom child môže mať jedného parenta a zároveň môže byť parentom pre child na úrovni nižšie. (Presne ako v rodokmeni).

Práca s elementami HTML

Každý element je v HTML reprezentovaný ako objekt (pod objektom si predstav napríklad tlačítko na odoslanie formuláru).

Element môže obsahovať atribúty (napríklad atribút href) a konkrétne hodnoty (napríklad "Ahoj").

Na čo mi je to dobré?

Vďaka HTML DOM môžeme jednoducho získať, meniť, pridať, vymazať jednotlivé HTML elementy. Jednoducho k elementom pristupovať, meniť ich hodnoty alebo s nimi pracovať.

Upozornenie: V rámci DOM štruktúry nie je možné pristupovať k elementom zdola nahor, čiže z child elementu k parent elementu.

Triedy a identifikátory

Každý HTML element môže obsahovať triedu (class) alebo jednoznačný identifikátor (id).

Triedy

Triedy sa vytvárajú pomocou premennej class a následne názov triedy.

<div class="moja-trieda"></div>

Identifikátory

Identifikátory sa vytvárajú pomocou premennej id a následne názov identifikátoru.

<div id="moj-identifikator"></div>

Tip: Je dobrým zvykom definovať v rámci celej webovej stránky iba jeden hlavný identifikátor pre väčšie celky alebo sekcie. V ostatných prípadoch využívať triedy.

Úloha

1. Zisti, v ktorom priečinku sa nachádzaš pomocou príkazu pwd (Linux, Mac OS X) alebo cd (Windows).
2. Naviguj sa do priečinku htmlkurz2016, ak v ňom aktuálne nie si.
3. V ňom si vytvor testovací html súbor s názvom test.html (pamätáš si príkaz na vytváranie súborov?).
4. Otvor súbor v editore, ktorý si si nainštaloval/a.
5. Do súboru zadaj nasledovnú HTML štruktúru.

   <div>
    <ul>
      <li>Test 1</li>
      <li>Test 2</li>
      <li><a href="#">Test 3</a></li>
      <li>Test 4</li>
    </ul>
   </div>
   

6. Ulož súbor test.html.
7. Otvor súbor test.html v ľubovoľnom webovom prehliadači.
8. Pokračuj cvičením nižšie.

Cvičenie

1. Ktoré HTML elementy sú podľa teba rodičmi v našej DOM štruktúre?
2. Ktoré HTML elementy sú podľa teba deťmi v našej DOM štruktúre?
3. Ktoré HTML elementy sú podľa teba súrodencami v našej DOM štruktúre?
4. Vypíš HTML atribúty
5. Vypíš HTML hodnoty
6. Priraď k ľubovoľnému HTML elementu triedu
7. Priraď k ľubovoľnému HTML elementu identifikátor
8. Môže mať podľa teba jeden HTML element viacero tried súčasne?
9. Môže mať podľa teba jeden HTML element triedu aj identifikátor súčasne?

Upozornenie: Videl/a si v príkladoch vyššie, že každý HTML element začína <> a následne končí </>. Je dôležité aby každý element bol správne uzavretý na správnom mieste.

Tip: Počas programovania je dobrým zvykom hneď po vytvorení elementu ho na riadku nižšie hneď uzavrieť. Už vieme, že počas písania kódu na to nezabudneme a nemusíme sa k tomu spätne vracať.