Čo sa naučíte v tomto HTML5 tutoriále:
Vytvoriť HTML5 webstránku z existujúcej xHTML šablóny, čiže prekonvertovať existujúce xHTML elementy na HTML5
Čo vám tento tutoriál neposkytne:
Vysvetlenie a použitie všetkých zatiaľ dostupných nových tagov. Tento tutoriál obsahuje rýchly základný prehľad, ktorý vás nakopne k používaniu HTML5 už dnes.
Čo potrebujete:
- Na tento pokus je treba mať prichystanú hotovú a validnú xHTML strict webstránku
- Potrebujete vedieť trošku kódovať v xHTML
- Odvahu používať otvorenú technológiu, ktorú prehliadače ešte nedokážu naplno využiť, ktorá sa naplno vyvíja a môže sa ešte výrazne zmeniť
Čo získate:
- Podporíte aktívne rodiaci sa jazyk HTML5
- Vaša stránka bude cross-browser kompatibilná - aj staré prehliadače ako IE6 ju budú vedieť správne zobraziť
Ak vám prekáža, že sa kompatibilita dosiahne použitím javascriptu, nečítajte ďalej a zostaňte pri starom, pretože tu progres ešte potrebuje trochu pomôcť.
1 Povolíme podporu HTML5 tagov pre IE6 a IE7. Tieto nové elementy totiž dané prehliadače nemajú implicitne nijako oštýlované.
<!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
Tento kúsok kódu spustí html5 shiv z Google code repositára pre všetky verzie IE.
2 Blokové elementy potrebujú byť vyrenderované v štýle display: block, aby sa správali, tak ako majú. Do CSS súboru pridáme:
article, aside, dialog, footer, header, section, footer, nav, figure {
display: block;
}
3 Nový DOCTYPE a kódovanie znakov môžeme zapísať omnoho jednoduchšie, viacero atribútov bolo vyradených:
<!DOCTYPE html>
<html lang="sk" dir="ltr">
<head>
<meta charset="utf-8" />
<title>Webdizajn Blog</title>
4 Používanie nových tagov
Už nikdy nemusíme nehorázne zneužívať <div> element. Máme tu nové, sémantickejšie tagy. Vyberám rýchly a jednoduchý prehľad, ktorý nám pomôže zoznámiť sa s hlavnými novými elementami:
- <header> - hlavička, ktorá slúži na umiestnenie privítacích lôg a sloganov a navigácie
- <nav> - navigácia
<header>
<h1><a href="#">Moje logo</a></h1>
<nav><ul>
<li class="active"><a href="#">Úvodná stránka</a></li>
<li><a href="#">Portfolio</a></li>
</ul></nav>
</header>
- <footer> - pätička na príbuzné linky, informácie o autorovi a copyright
© 2009 Woofer Dog Corporation
</footer>
- <article> - článok
<article>
<p>Lorem ipsum</p><p>Dolorsit amet...</p>
</article>
- <section> - sekcia (blok) dokumentu, mala by vždy mať nadpis
<section>
<h1>Nadpis sekcie</h1>
Zvyšok obsahu sekcie
</section>
- <time> - dátum
<p>Konferencia sa koná <time datetime="2010-12-12">nasledujúci utorok</time>.</p>
V zozname je mnoho ďalších tagov, ako napríklad video či audio, canvas alebo nové typy polí formulárov. O mnohých z nich si porozprávame v ďalších HTML5 tutoriáloch.
Komentáre
Poslať nový komentár