HTML atribúty

V tejto kapitole tutoriálu k jazyku HTML si povieme, ako používať atribúty v jednotlivých HTML elementoch. Prejdeme si základné skupiny atribútov, ich syntax v jazyku HTML a najbežnejšie použitie.

• Čo sú to atribúty
• Aká je syntax atribútov v jazyku HTML
• Globálne atribúty v jazyku HTML

Čo sú to HTML atribúty?

HTML atribúty sú v podstate nastavenia (parametre), ktorými vieme upraviť správanie HTML tagov. Napríklad HTML tag a, ktorý slúži na vloženie odkazu, môže mať niekoľko parametrov pre: adresu odkazu, spôsob otvorenia odkazu (v novom okne alebo tom istom okne) textový titulok a podobne. Niektoré atribúty sú globálne (vieme ich použiť vo všetkých elementoch), niektoré sú špecifické len pre zvolenú množinu elementov či dokonca špecifické len pre jeden konkrétny element.

Syntax: ako používať atribúty v HTML tagoch

Atribút sa skladá z dvoch častí:

• názov atribútu

• hodnota atribútu (píše sa v úvodzovkách)

V ukážke nižšie použitie dvoch atribútov: prvý má názov moj_atribut a hodnotou je číslo 10, druhý má názov moj_atribut2 a hodnotou je text tvorba webu.

<div moj_atribut="10" moj_atribut2="tvorba webu" >toto je obsah elementu div</div>

Pre pomenovanie atribútov vieme použiť znaky písmen, čísiel aj podčiarnik, ale prvý znak názvu by mal byť písmeno. Hodnota atribútu uvedená v úvodzovkách môže byť takmer ľubovoľný text až na pár výnimiek. Napríklad znak úvodzovky by sme mali problém vložiť, keďže úvodzovky ohraničujú začiatok a koniec hodnoty. V takom prípade môžeme úvodzovky nahradiť za apostrofy.

<div moj_atribut="10" moj_atribut2='tvorba "webu' required>toto je obsah elementu div</div>

Teraz prejdime k praktickej ukážke užitočnejšieho HTML kódu. Nižšie vidíme formulárový prvok textarea pre vloženie textu, ktorý má niekoľko atribútov.

<textarea placeholder="vložte popis" rows="3" maxlength="15" name="popis" required></textarea>

• Atribút placeholder sa používa ako textový popis, keď nie je ešte textové pole vyplnené

• Atribút rows určuje počet riadkov

• Atribút maxlength určuje maximálny počet znakov, ktoré vieme do políčka vložiť

• Atribút name určuje názov políčka

• Atribút required označuje, že element je nutné vyplniť (nemôže ostať nevyplnený pred odoslaním formuláru). Keď je názov atribútu jedinečný (nezáleží na hodnote), môže byť atribút aj bez hodnoty. V niektorých prípadoch sa ako hodnota používa jeho názov, teda: required="required"

Na poradí atribútov nezáleží. Treba len dávať pozor, aby sa žiadny atribút (s rovnakým názvom) v rámci jedného HTML elementu neopakoval.

Globálne HTML atribúty

Ako sme si uviedli na začiatku, niektoré atribúty sú pre konkrétne HTML tagy a niektoré sa dajú použiť globálne (viac-menej všade). V tejto časti si opíšeme skupiny atribútov, ktoré sú univerzálne použiteľné pre väčšinu HTML elementov.
Napríklad atribút title slúži na to, že po prejdení kurzorom nad HTML elementom sa zobrazí text v bublinke, ktorý je uvedený ako hodnota atribútu.

<button title="TOTO JE TLAČIDLO v HTML">Prejdi na mňa kurzorom</button>

Atribút pre štýlovanie pomocou CSS

Pomocou atribútu style vieme vkladať pravidlá na štýlovanie elementu. Napríklad zmenu farby písma, zmenu pozadia okolo a pod.

<p style="color:green;background-color:black;" >Prvý odsek v HTML.</p>

Atribúty id a class

Asi najviac používané atribúty v jazyku HTML sú tieto dva:

• Atribút id, ktorý slúži ako jednoznačný identifikátor elementu. V jednom HTML dokumente sa nemôžu hodnoty atribútu id opakovať. Keď dáme nejakému elementu názov, už by sme tento názov nemali použiť pre iný element.

• Atribút class, ktorý slúži na zaradenie elementu do triedy (skupiny elementov). Rovnakú triedu môžu mať viaceré elementy. Používa sa to vtedy, keď potrebujeme identifikovať všetky elementy na stránke, ktoré patria do jednej triedy.

Na ukážke nižšie vidíme dva odseky textu, ktoré majú rovnakú triedu a každý má svoj vlastný identifikátor.

<p class="odsek" id="odsek1">Prvý odsek v HTML.</p>
<p class="odsek" id="odsek2">Druhý odsek v jazyku HTML</p>

Ako príklad využitia tried si predstavme situáciu, kedy chceme všetkým HTML elementom na celej stránke s rovnakou triedou pridať rovnaké vlastnosti (napr. žlté pozadie). Aby sme to nemuseli robiť jednotlivo, vieme tieto vlastnosti nastaviť pre triedu, a potom sa automaticky aplikujú pre všetky elementy s touto triedou.
Identifikátor zase slúži ako unikátny názov pre element. Ak chceme napríklad presmerovať používateľa na nejakú sekciu, stačí dať tejto sekcii unikátny názov a prehliadač bude vedieť, ktorú sekciu chceme použiť.
Rozlišovanie tried a identifikátorov je užitočné pre pokročilé techniky tvorby webov, ktorým sa teraz nebudeme bližšie venovať.

Ďalšie zaujímavé HTML atribúty

Pre začiatočníka sa ešte určite oplatí poznať tieto HTML atribúty:

• Atribút hidden pre skrytie elementu (aby nebol vidieť na stránke).

• Atribút lang pre nastavenie jazyka (zvyčajne sa uvádza v koreňovom elemente head).

• Atribút dir pre nastavenie smeru zarovnania textu. Môže mať hodnotu rtl (zarovnanie sprava doľava) alebo ltr (zľava doprava).

HTML atribúty pre zachytenie udalostí

Udalosť (z angl. event) v jazyku HTML predstavuje nejakú akciu, ktorá sa udiala na stránke. Napríklad kliknutie myšou, zatlačenie klávesy a podobne. V jazyku HTML vieme sledovať, či nenastane nejaká udalosť, a po tejto udalosti vykonať akciu. Typickým príkladom udalosti v HTML je kliknutie, kedy po kliknutí na element odkazu prehliadač načíta inú stránku alebo len vyskočí okno (popup).

<button onclick="alert('Toto je HTML tutoriál')">Stlač ma</button>

V jazyku HTML rozlišujeme viacero rôznych udalostí, ktoré môžu nastať. Atribúty pre sledovanie udalostí sa v jazyku HTML načínajú písmenami on, v tabuľke uvádzame niektoré z nich.

Sledovaním udalostí vieme spraviť webové stránky viac interaktívne. Ale tiež je dnes nutné dávať pozor, aby boli udalosti sledovateľné zo všetkých typov zariadení, ak je to potrebné. Napríklad na mobiloch je náročné sledovať udalosť týkajúcu sa pohybu kurzora myšou, keďže na mobile takéto ovládacie zariadenie nie je.

Vlastné dátové HTML atribúty data-*

Poslednú skupinu atribútov, ktorú si predstavíme, sú tzv. dátové atribúty. Tieto sa používajú pre uchovanie špecifických (zvyčajne vlastných) parametrov. Používa sa prefix (predpona) data- a za znak mínus môžeme doplniť vlastný názov.
Takto môžeme uchovávať ľubovoľné informácie o elemente, napríklad cenu alebo dostupnosť (ako vidíte na ukážke nižšie).

<span data-cena="10 eur" data-dostupnost="3 dni">Produkt 1</span>

Toľko na úvod o atribútoch v HTML elementoch. Teraz by ste mali chápať základný význam a použitie atribútov pri tvorbe HTML dokumentov. V ďalších častiach tutoriálu si budeme priebežne uvádzať možnosti atribútov pre ďalšie elementy.

HTML atribúty - zhrnutie tutoriálu