Vytvárame webové stránky / 13. časť
Štandard HTML5 sa postupne ujal vnových verziách
prehliadačov, atak treba ukázať jeho možnosti. Vďaka novým tagom (elementom)
totiž výrazne zjednodušíte tvorbu stránok apridávanie elementov bude
kompatibilné aj bez ďalších pluginov.
Najznámejší prvok je vykresľovanie grafiky prostredníctvom vlastného API, podpora prehrávania videa bez potreby mať flash, tvorba aplikácií fungujúca aj bez pripojenia kinternetu amnožstvo tagov definujúcich vzhľad prvkov na stránke ajej rozloženie. Nové funkcie amožnosti sú založené na CSS, Document Object Modeli aJavaScripte.
Základy
Špecifikovanie dokumentu HTML5 vkóde je veľmi jednoduché. Najmä ak porovnávame zápis kódu zpredošlých verzií.
Schéma sémantických elementov HTML5
Pri tvorbe dokumentu môžete využiť štruktúrovanie cez
sémantické elementy. Teda cez také, ktoré jasne hovoria otom, aký obsah
zobrazujú. Jeden znich je aj
HTML5 po novom rozširuje možnosti niektorých elementov. Napríklad párový element na vytvorenie hypertextového odkazu môže mať vnorené ďalšie, všetky potom budú obsahovať odkaz na definovanú adresu URL.
Sprievodca
digitálnym svetomMagazín
PC REVUE
Video aaudio
Integrovanie videa na stránku saktívnymi prvkami ovládania
Vložiť video na stránku je veľmi jednoduché avtomto prípade máme vkóde vložené všetky tri podporované formáty. Tento kód je riešením kompatibility medzi starými verziami prehliadačov. Spustí prvý podporovaný formát.
Ako vidno, dajú sa použiť aj ďalšie vlastnosti. Tie určujú správanie sa videa aviditeľnosť prvkov po jeho načítaní. Prvá z nich je controls, zobrazuje ovládacie prvky. Vynechaním tejto vlastnosti sa zobrazí video bez zobrazených ovládacích prvkov. Možno však zobraziť, ako aj pozastaviť alebo zastaviť video cez ponuku zjeho kontextového menu. Takto zobrazené prvky sa budú po odídení myši zobrazu skrývať. Ďalej je tu vlastnosť loop, ktorá určuje automatické opakovanie videa,vlastnosť autoplay začne jeho prehrávanie po načítaní stránky.
Na rovnakom princípe funguje aj vkladanie audia. Zápis je takmer identický atakisto sú podporované tri typy súborov – MP3, WAV, OGG.
Ovládacie prvky môžu vyzerať vprehliadačoch rôzne. VChrome je pri videu ovládanie také, ako vidíte na obrázku, vo Firefoxe sa ovládanie spustí vo zvislom posuvníku.
Vstupné prvky
Vstupné pole na výber dátumu
Nové prvky, ktoré rozhodne stoja za zmienku azjednodušujú ich implementáciu do kódu, sú vstupné polia pre rôzne typy výberových udalostí.
- tlačidlo na výber vlastnej farby. Podľa výberu sa mení aj farba na tlačidle.
- pole na vybratie vlastného dátumu. Existuje niekoľko ďalších podobných typov. Napríklad month, ktorý zobrazuje mesiac arok, alebo typ datetime obsahujúci vpoli aj voľbu hodín aminút.
- výber čísla smožnosťou definovať ďalšie vlastnosti pri jeho definovaní. Vlastnosť value určuje štandardnú hodnotu po načítaní stránky, nasleduje definovanie minimálnej a maximálnej hodnoty akroky pri zmene.
Formulárové prvky
Medzi novinky, ktoré na stránkach využijete, patrí aj podpora funkcie autocomplete svlastnými hodnotami. Tento kód obsahuje vstupné pole, vktorom sa po kliknutí doň myšou zobrazí roletové menu svpísanými položkami.
Funkciu na dokončovanie môžete využiť aj zvopred zadaných hodnôt vpoliach internetových stránok. Nasledujúca ukážka zobrazuje štandardné polia na zápis mena ae-mailovej adresy.
Novinkou je možnosť automatického označenia aktívneho prvku cez boolovský atribút autocomplet. Stačí ho vpísať do elementu prvky, na ktorý chceme umiestniť kurzor alebo označiť tlačidlo po načítaní stránky. Formulárové prvky nemusia byť nevyhnutne pod sebou alebo vjednej oblasti na stránke. Pokojne ich môžete použiť kdekoľvek sodkazovaním na funkciu vybraného formulára. Tu je však postup ešte jednoduchší, keďže naň stačí jednoducho odkázať pridaním vlastnosti form - .
Ďalšia zbežne využívaných funkcií je výber viacerých súborov naraz. Na to slúži boolovská vlastnosť multiple. Stačí ju vpísať do elementu file alebo email. Funguje len stýmito vstupnými poľami. Na mnohých stránkach vidieť namiesto klasického opisu poľa jeho text priamo vpoli, ktorý po vpísaní vlastného zmizne.
. Placeholder atribút funguje so vstupnými typmi text, search, url, tel, email, apassword. Ak nejaké pole treba vyplniť, stačí doň vpísať vlastnosť required. Po kliknutí na tlačidlo sa zobrazí upozornenie, že toto pole je potrebné vyplniť.
Na budúce
HTML5 sa dá veľmi dobre využívať na tvorbu webových aplikácií, ato aj pre mobilné zariadenia. Ukážeme vám nástroje ato, ako využiť možnosti nového štandardu pri návrhu programov.
