Využitie HTML5 je síce vmnohých smeroch výrazne zjednodušené, no neznamená to úplnú benevolenciu pri zadávaní kódu používateľom. Ukážeme si niektoré triky, ktoré sa vám pri tvorbe webov zídu, apridáme niekoľko zaujímavých tipov.

Na úvod hneď jeden kozmetický. Pri verzii XHTML bolo treba striktne dodržiavať uzatváranie elementov. Tu to nie je potrebné, atak element p (odsek) nemusíte uzavrieť lomkou ašpicatou zátvorkou. Kód teda môže vyzerať napríklad takto:

Nejaký text

. Ako vidno, netreba atribúty dávať ani do úvodzoviek.

Definovanie typov

Prehliadač bez námietok akceptuje definovanie typov atribútov pri používaní skriptov aodkazov, no vHTML5 to nie je nevyhnutné, atak definovanie skriptu odteraz môže vyzerať takto:

Editovateľný obsah

Nové prehliadače majú funkciu na editovanie obsahu priamo na stránke apritom netreba použiť žiadny skriptovací jazyk. Postačí použitie nového atribútu contenteditable tak, ako to ukazuje náš príklad. Všimnite si, že parameter true nie je v úvodzovkách aodrážka li takisto nevyžaduje ukončenie. Vprehliadači sa vytvorí špeciálne pole, ktoré umožní vytvárať ďalšie odrážky stextovým obsahom, mazať ich alebo upravovať. Platí to aj pre nadpis zoznamu.

Zoznam

• Január


• Február
  

Zobrazenie upraviteľného obsahu vprehliadači Chrome

Načítanie videa

Naposledy sme vám ukázali, ako jednoducho vnoriť video na stránku, navyše sdefinovaním ovládacích prvkov. Rýchlejšie spustenie videa nastavíte zápisom Video sa začne načítať po zobrazení stránky. Keď sa ho používateľ rozhodne spustiť, bude ho mať pripravené alebo aspoň časť jeho obsahu načítanú vopred anemusí pri pomalšom spojení čakať. Tento spôsob zjasných dôvodov nefunguje, ak je nastavená vlastnosť autoplay.

Označenie textu

Na zvýraznenie textu žltou farbou je vnovej špecifikácii HTML element mark. Zápisom

MagazínPC REVUE

spôsobí zvýraznenie názvu nášho magazínu.

Rezervácia entít

Spracovanie špeciálnych znakov, ako je úvodzovka, apostrof, ampersand (&) ašpicaté zátvorky, má garantovaný každý prehliadač bez rozdielu. Ide ošpeciálne znaky, ktoré sú zastúpené pri tvorbe kódu. Otázka teda znie, ako sa vyrovnať so zápisom textu vsúbore. Používať špeciálne ISO entity znakov alebo nie? Vminulosti bol správnou voľbou akýkoľvek znak, ktorý mal svoju entitu (pevná medzera, teda non-breaking space -  ), zapísať cez svoj názov alebo kód. To je však za nami avo všeobecnosti sa odporúča používať kódovanie textu UTF-8. Pri takomto kódovaní nebudete mať problém so správnym interpretovaním špeciálnych znakov.

Cache

Je úplne bežné, že prehliadač „kešuje“ obsah stránky vrátane obrázkov, skriptov, ale aj súborov CSS. Vbežnej praxi nie je so súbormi aobsahom stránky problém, pretože prehliadač kontroluje zmenu týchto súborov avprípade novšej verzie ich načíta anepoužije tie zo svojej cache na pevnom disku počítača. Sú však prípady, keď treba prikázať prehliadaču, aby stránku neukladal do vyrovnávacej pamäte. Určuje sa to zápisom:

Kódovanie URL

Bežne sa stretávame so zástupnými znakmi vadresnom riadku prehliadača. Stáva sa to najmä vtedy, ak názov súboru obsahuje medzeru, napríklad novy html_subor.html. Zápis potom vyzerá takto: novy%20html_subor.html. Tento spôsob sa chápe ako nie bezpečný na zápis vURL. Vyhnúť by ste sa mali aj ostatným znakom, našťastie operačné systémy nepovolia podobné rizikové znaky zadať už pri vkladaní názvu súboru. Všpecifikácii HTML existuje veľké množstvo zástupných hodnôt pre rôzne znaky, ktoré nie sú obsiahnuté vsústave ASCII bezpečných znakov. Nie je teda problém vnázvoch používať mäkčene arôzne netlačiteľné znaky, no ak môžete, vyhnite sa im.

Nepoužívané elementy a atribúty

Od verzie HTML5 dochádza vďaka novej sémantike dokumentu ahierarchie textov kvypusteniu niektorých elementov aich atribútov. Patria medzi ne napríklad acronym, applet, center, dir, strike ainé. Interpretáciu týchto tzv. prekonaných elementov je lepšie riešiť zápisom CSS na dosiahnutie potrebného formátovania textu. Vprípade atribútov je situácia iná. Až vyše päťdesiat ich bolo úplne vynechaných zo špecifikácie. Napríklad bgcolor zelementov tablet, body ainých. Ak si nie ste istí, odporúčame overiť jednotlivé atribúty na internete v špecifikáciách W3C. Vyhnete sa tak nekompatibilite stránky.

Google Fonts

Samostatný tip máme aj pri použití webových fontov, nezávislých od platformy anainštalovaných písiem vpočítači. Tie sa totiž voperačných systémoch Microsoft Windows, OS X aLinux líšia. Máme na mysli menej štandardné písma. Spoužitím webových fontov ste sa možno už stretli. Hojne sú zastúpené všablónach CSS vzorových návrhov stránky, ktoré sú dostupné na internete na stránkach pre webových dizajnérov.

Na adrese www.google.com/fonts nájdete dostupné fonty ajednoducho ich cez prilinkovanie súboru CSS použijete na svojich stránkach. Najprv si treba na stránke vybrať konkrétny typ písma. Pri každom znich je zobrazený počet variantov, najčastejšie ide orôzne varianty písma. Kliknutím na tlačidlo so šípkou doprava (Quick-use) sa zobrazia detaily písma sukazovateľom náročnosti záťaže načítania stránky. Pri písmach, kde je na výber viac variantov, môžete vybrať všetky typy azároveň sledovať náročnosť načítania na grafickom ukazovateli. Tretí krok je najpodstatnejší aobsahuje kód vnoreného CSS. Pomocou atribútov sa vriadku objavia aj hodnoty ďalších variantov písma, ak ich je zvolených viac. Vzásade nejde onič zložité, vždy je tojeden riadok kódu. Vygenerovaný zápis vyzerá takto:

. Hodnoty 400, 900 a700 sú varianty písma. Zápisom CSS sa dá ich vzhľad aj ďalej upravovať rovnako ako pri použití lokálnych fontov. Napríklad:

font-family: 'Cinzel Decorative', cursive;

Výber písma vGoogle Fonts