Ako na to prakticky

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

HTML5_logo_vyrez.jpg Štan­dard HTML5 sa pos­tup­ne ujal v no­vých ver­ziách pre­hlia­da­čov, a tak tre­ba uká­zať je­ho mož­nos­ti. Vďa­ka no­vým ta­gom (ele­men­tom) to­tiž vý­raz­ne zjed­no­du­ší­te tvor­bu strá­nok a pri­dá­va­nie ele­men­tov bu­de kom­pa­ti­bil­né aj bez ďal­ších plu­gi­nov.

Naj­zná­mej­ší pr­vok je vy­kres­ľo­va­nie gra­fi­ky pros­tred­níc­tvom vlas­tné­ho API, pod­po­ra preh­rá­va­nia vi­dea bez pot­re­by mať flash, tvor­ba ap­li­ká­cií fun­gu­jú­ca aj bez pri­po­je­nia k inter­ne­tu a množ­stvo ta­gov de­fi­nu­jú­cich vzhľad pr­vkov na strán­ke a jej roz­lo­že­nie. No­vé fun­kcie a mož­nos­ti sú za­lo­že­né na CSS, Do­cu­ment Ob­ject Mo­de­li a Ja­vaS­crip­te.

Zá­kla­dy

Špe­ci­fi­ko­va­nie do­ku­men­tu HTML5 v kó­de je veľ­mi jed­no­du­ché. Naj­mä ak po­rov­ná­va­me zá­pis kó­du z pre­doš­lých ver­zií.

<!DOC­TY­PE html>

SchemaSemantik.png

Sché­ma sé­man­tic­kých ele­men­tov HTML5

Pri tvor­be do­ku­men­tu mô­že­te vy­užiť štruk­tú­ro­va­nie cez sé­man­tic­ké ele­men­ty. Te­da cez ta­ké, kto­ré jas­ne ho­vo­ria o tom, aký ob­sah zob­ra­zu­jú. Je­den z nich je aj <sec­tion>. Ten de­fi­nu­je text spra­vid­la aj s vlas­tným zá­hla­vím. V rám­ci toh­to ele­men­tu mô­že­te mať viac ob­sa­hu uzat­vo­re­né­ho ele­men­tmi ar­tci­le. Na jed­no­duch­šie vkla­da­nie opi­su ob­ráz­ka, gra­fu ale­bo iné­ho ob­jek­tu je tu ele­ment fi­gu­re.

<fi­gu­re>
<img src="ob­ra­zok.jpg" alt="Ob­rá­zok" width="640" height="480">
<fig­cap­tion>Poz­nám­ka: To­to je opis pod ob­ráz­kom</fig­cap­tion>
</fi­gu­re>

HTML5 po no­vom roz­ši­ru­je mož­nos­ti niek­to­rých ele­men­tov. Nap­rík­lad pá­ro­vý ele­ment na vy­tvo­re­nie hyper­texto­vé­ho od­ka­zu mô­že mať vno­re­né ďal­šie, všet­ky po­tom bu­dú ob­sa­ho­vať od­kaz na de­fi­no­va­nú ad­re­su URL.

<a href="http://www.pcre­vue.sk" tar­get="_blank" href­lang="sk">
<h3>Ma­ga­zín PC RE­VUE</h3>
<p>Sprie­vod­ca di­gi­tál­nym sve­tom</p>
</a>

Vi­deo a audio

Video.png

In­teg­ro­va­nie vi­dea na strán­ku s ak­tív­ny­mi pr­vka­mi ov­lá­da­nia

Vlo­žiť vi­deo na strán­ku je veľ­mi jed­no­du­ché a v tom­to prí­pa­de má­me v kó­de vlo­že­né všet­ky tri pod­po­ro­va­né for­má­ty. Ten­to kód je rie­še­ním kom­pa­ti­bi­li­ty me­dzi sta­rý­mi ver­zia­mi pre­hlia­da­čov. Spus­tí pr­vý pod­po­ro­va­ný for­mát.

<vi­deo width="640" height="480" con­trols autop­lay loop>
<sour­ce src="mo­vie.mp4" ty­pe="vi­deo/mp4">
<sour­ce src="mo­vie.ogg" ty­pe="vi­deo/ogg">
<sour­ce src="mo­vie.webm" ty­pe="vi­deo/webm">
Váš pre­hlia­dač ne­pod­po­ru­je ten­to ele­ment!
</vi­deo>

Ako vid­no, da­jú sa pou­žiť aj ďal­šie vlas­tnos­ti. Tie ur­ču­jú sprá­va­nie sa vi­dea a vi­di­teľ­nosť pr­vkov po je­ho na­čí­ta­ní. Pr­vá z nich je con­trols, zob­ra­zu­je ov­lá­da­cie pr­vky. Vy­ne­cha­ním tej­to vlas­tnos­ti sa zob­ra­zí vi­deo bez zob­ra­ze­ných ov­lá­da­cích pr­vkov. Mož­no však zob­ra­ziť, ako aj po­zas­ta­viť ale­bo za­sta­viť vi­deo cez po­nu­ku z je­ho kon­texto­vé­ho me­nu. Tak­to zob­ra­ze­né pr­vky sa bu­dú po od­íde­ní my­ši z ob­ra­zu skrý­vať. Ďalej je tu vlas­tnosť loop, kto­rá ur­ču­je auto­ma­tic­ké opa­ko­va­nie vi­dea, vlas­tnosť autop­lay za­čne je­ho preh­rá­va­nie po na­čí­ta­ní strán­ky.

Na rov­na­kom prin­cí­pe fun­gu­je aj vkla­da­nie audia. Zá­pis je tak­mer iden­tic­ký a ta­kis­to sú pod­po­ro­va­né tri ty­py sú­bo­rov – MP3, WAV, OGG.

<audio con­trols>
<sour­ce src="hud­ba.ogg" ty­pe="audio/mpeg">
</audio>

Ov­lá­da­cie pr­vky mô­žu vy­ze­rať v pre­hlia­da­čoch rôz­ne. V Chro­me je pri vi­deu ov­lá­da­nie ta­ké, ako vi­dí­te na ob­ráz­ku, vo Fi­re­foxe sa ov­lá­da­nie spus­tí vo zvis­lom po­suv­ní­ku.

Vstup­né pr­vky

Datum.png

Vstup­né po­le na vý­ber dá­tu­mu

No­vé pr­vky, kto­ré roz­hod­ne sto­ja za zmien­ku a zjed­no­du­šu­jú ich im­ple­men­tá­ciu do kó­du, sú vstup­né po­lia pre rôz­ne ty­py vý­be­ro­vých uda­los­tí.

<in­put ty­pe="co­lor" na­me="far­ba"> - tla­čid­lo na vý­ber vlas­tnej far­by. Pod­ľa vý­be­ru sa me­ní aj far­ba na tla­čid­le.

<in­put ty­pe="da­te" na­me="da­tum"> - po­le na vy­bra­tie vlas­tné­ho dá­tu­mu. Exis­tu­je nie­koľ­ko ďal­ších po­dob­ných ty­pov. Nap­rík­lad month, kto­rý zob­ra­zu­je me­siac a rok, ale­bo typ da­te­ti­me ob­sa­hu­jú­ci v po­li aj voľ­bu ho­dín a mi­nút.

<in­put ty­pe="num­ber" na­me="cis­lo" va­lue=“500“ min="1" max="10000" step=“10“> - vý­ber čís­la s mož­nos­ťou de­fi­no­vať ďal­šie vlas­tnos­ti pri je­ho de­fi­no­va­ní. Vlas­tnosť va­lue ur­ču­je štan­dar­dnú hod­no­tu po na­čí­ta­ní strán­ky, nas­le­du­je de­fi­no­va­nie mi­ni­mál­nej a maximál­nej hod­no­ty a kro­ky pri zme­ne.

For­mu­lá­ro­vé pr­vky

Me­dzi no­vin­ky, kto­ré na strán­kach vy­uži­je­te, pat­rí aj pod­po­ra fun­kcie auto­com­ple­te s vlas­tný­mi hod­no­ta­mi. Ten­to kód ob­sa­hu­je vstup­né po­le, v kto­rom sa po klik­nu­tí doň my­šou zob­ra­zí ro­le­to­vé me­nu s vpí­sa­ný­mi po­lož­ka­mi.

<in­put list="me­sia­ce" na­me="mes">
<da­ta­list id="me­sia­ce">
<op­tion va­lue="ja­nuar">
<op­tion va­lue="feb­ruar">
<op­tion va­lue="ma­rec">
</da­ta­list>

Fun­kciu na do­kon­čo­va­nie mô­že­te vy­užiť aj z vop­red za­da­ných hod­nôt v po­liach inter­ne­to­vých strá­nok. Nas­le­du­jú­ca ukáž­ka zob­ra­zu­je štan­dar­dné po­lia na zá­pis me­na a e-mai­lo­vej ad­re­sy.

<form auto­com­ple­te="on"> - na ak­ti­vo­va­nie fun­kcie mu­sí byť zá­pis aj v ele­men­te for­mu­lá­ra.

Me­no:<in­put ty­pe="text" na­me="me­no" auto­com­ple­te="off"><br> - zob­ra­ze­nie textu plus for­mu­lá­ro­vé­ho pr­vku na vkla­da­nie dát. Tu sme však auto­ma­tic­ké návr­hy za­ká­za­li.

E-mail: <in­put ty­pe="email" na­me="email" auto­com­ple­te="on"><br> - pri tom­to pr­vku sa zob­ra­zia vlo­že­né tex­ty z ca­che pre­hlia­da­ča, ale ro­le­to­vé me­nu bu­de ob­sa­ho­vať už aj e-mai­lo­vé ad­re­sy na roz­diel od vstup­né­ho po­ľa text

<in­put ty­pe="sub­mit">
</form>

No­vin­kou je mož­nosť auto­ma­tic­ké­ho ozna­če­nia ak­tív­ne­ho pr­vku cez boo­lov­ský at­ri­bút auto­com­plet. Sta­čí ho vpí­sať do ele­men­tu pr­vky, na kto­rý chce­me umies­tniť kur­zor ale­bo ozna­čiť tla­čid­lo po na­čí­ta­ní strán­ky. For­mu­lá­ro­vé pr­vky ne­mu­sia byť ne­vyh­nut­ne pod se­bou ale­bo v jed­nej ob­las­ti na strán­ke. Po­koj­ne ich mô­že­te pou­žiť kde­koľ­vek s od­ka­zo­va­ním na fun­kciu vy­bra­né­ho for­mu­lá­ra. Tu je však pos­tup eš­te jed­no­duch­ší, keď­že naň sta­čí jed­no­du­cho od­ká­zať pri­da­ním vlas­tnos­ti form - <in­put ty­pe="email" na­me="email" auto­com­ple­te="on" form=“for­mu­lar“>.

Ďal­šia z bež­ne vy­uží­va­ných fun­kcií je vý­ber via­ce­rých sú­bo­rov na­raz. Na to slú­ži boo­lov­ská vlas­tnosť mul­tip­le. Sta­čí ju vpí­sať do ele­men­tu fi­le ale­bo email. Fun­gu­je len s tý­mi­to vstup­ný­mi po­ľa­mi. Na mno­hých strán­kach vi­dieť na­mies­to kla­sic­ké­ho opi­su po­ľa je­ho text pria­mo v po­li, kto­rý po vpí­sa­ní vlas­tné­ho zmiz­ne.

<in­put ty­pe="text" na­me="me­no" pla­ce­hol­der="Va­še me­no">. Pla­ce­hol­der at­ri­bút fun­gu­je so vstup­ný­mi typ­mi text, search, url, tel, email, a password. Ak ne­ja­ké po­le tre­ba vy­pl­niť, sta­čí doň vpí­sať vlas­tnosť required. Po klik­nu­tí na tla­čid­lo sa zob­ra­zí upo­zor­ne­nie, že to­to po­le je pot­reb­né vy­pl­niť.

Na bu­dú­ce

HTML5 sa dá veľ­mi dob­re vy­uží­vať na tvor­bu webo­vých ap­li­ká­cií, a to aj pre mo­bil­né za­ria­de­nia. Uká­že­me vám nás­tro­je a to, ako vy­užiť mož­nos­ti no­vé­ho štan­dar­du pri návr­hu prog­ra­mov.

Zdroj: PCR 8/2013



Ohodnoťte článok:
   
 

24 hodín

týždeň

mesiac

Najnovšie články

AMD pred­sta­vu­je nás­led­ní­ka Tri­ni­ty: pro­ce­so­ry Ri­chland
Mnoho ľudí hovorí o tom, ako je na tom spoločnosť AMD zle, pretože nedokáže konkurovať Intelu v oblasti najvýkonnejších procesorov. Lenže my si dovolíme nesúhlasiť, AMD je podľa nás v súčasnosti na nenápadnom vzostupe. čítať »
 
Práv­nik ra­dí: Os­lo­vo­va­nie zá­kaz­ní­kov elek­tro­nic­kou poš­tou
Elektronická pošta predstavuje lacný, aj keď nie veľmi efektívny spôsob oslovovania možných záujemcov o tovary a služby rôzneho druhu. Zrejme už každý sa stretol vo svojom priečinku s prichádzajúcou elektronickou poštou so správami, ktoré mu ponúkajú čokoľvek od zázračných piluliek na zväčšenie niektorých častí tela po pneumatiky či knihy. čítať »
 
Vi­rus­lab: Opäť raz hes­lá: Ako ich uro­biť bez­peč­ný­mi a za­pa­mä­tať si ich
Heslá sú s nami na každom kroku, je ich toľko, že sa vyrábajú špeciálne aplikácie alebo zariadenia na ich ukladanie. čítať »
 
Špor­tu­je­me s mo­bi­lom
Telefóny už v minulosti ponúkali možnosť využitia pri športe. Nemáme teraz na mysli ich odolnosť, ale funkcionalitu v podobe krokomera. Pred pár rokmi išlo o bežné telefóny, ktoré mohli mať na pozadí spustenú aplikáciu na počítanie krokov a zaznamenávať vaše aktivity. čítať »
 
20 ro­kov PC RE­VUE
S odstupom času si pri tejto výročnej rekapitulácii spomínam na rôzne momenty, zážitky a situácie, ktoré sme v PC REVUE za tých 20 rokov spoločne prežili čítať »
 
Vy­tvá­ra­me webo­vé strán­ky / 13. časť
Štandard HTML5 sa postupne ujal v nových verziách prehliadačov, a tak treba ukázať jeho možnosti. Vďaka novým tagom (elementom) totiž výrazne zjednodušíte tvorbu stránok a pridávanie elementov bude kompatibilné aj bez ďalších pluginov.  čítať »
 
ASUS B400A / 1. časť
Crash testy sú veľmi populárne u našich čitateľov, pretože jasne prezentujú, kam až siahajú hranice testovaných zariadení. Tento mesiac sme si vybrali ultrabook ASUS B400A (niekedy označený aj ako BU400A), ktorý je určený predovšetkým na nasadenie v biznise. čítať »
 
Naj­nov­šie let­né no­te­boo­ky
Leto je v plnom prúde, čo ilustruje aj náš výber notebookových noviniek. Hráči majú možnosť siahnuť po nadupanom stroji Acer Aspire V3. Rovnaký výrobca prináša aj unikátny stroj Aspire R7 s patentovaným kĺbom Ezel. čítať »
 
 
 
  Zdieľaj cez Facebook Zdieľaj cez Google+ Zdieľaj cez Twitter Zdieľaj cez LinkedIn Správy z RSS Správy na smartfóne Správy cez newsletter