SAMSUNG_022024A Advertisement SAMSUNG_022024A Advertisement SAMSUNG_022024A Advertisement

Vytvárame webové stránky / 13. časť

Archív NXT
0

Š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í.

SchemaSemantik.png

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

. Ten definuje text spravidla aj s vlastným záhlavím. Vrámci tohto elementu môžete mať viac obsahu uzatvoreného elementmi artcile. Na jednoduchšie vkladanie opisu obrázka, grafu alebo iného objektu je tu element figure.


Obrázok
Poznámka: Toto je opis pod obrázkom

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.


Magazín PC REVUE


Sprievodca digitálnym svetom


Video aaudio

Video.png

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

Datum.png

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.

- na aktivovanie funkcie musí byť zápis aj velemente formulára.

Meno:
- zobrazenie textu plus formulárového prvku na vkladanie dát. Tu sme však automatické návrhy zakázali.

E-mail:
- pri tomto prvku sa zobrazia vložené texty zcache prehliadača, ale roletové menu bude obsahovať už aj e-mailové adresy na rozdiel od vstupného poľa text


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.

Pridať komentár

Mohlo by vás zaujímať

Mohlo by vás zaujímať