Název projektu Číslo projektu Název školy Autor Název šablony Název DUMu Stupeň a typ vzdělávání Vzdělávací oblast Vzdělávací obor Tematický okruh Inovace výuky prostřednictvím šablon pro SŠ CZ.1.07/1.5.00/34.0748 Gymnázium Jana Pivečky a Střední odborná škola Slavičín Ing. Alois Kužela III/2 - Inovace a zkvalitnění výuky prostřednictvím ICT VY_32_INOVACE_G2_IVT_02_12 Gymnaziální vzdělávání Informatika a Informační a komunikační technologie Informatika Informatika Cílová skupina Anotace Vybavení, pomůcky Žák 16-19 let Prezentace poskytuje návod na vytvoření WEBu a jeho zveřejnění s využitím publikačního systému na internetu. PC, interaktivní tabule Datum 15. 4. 2013 Klíčová slova HTML5, WEB, publikační systém www.zlinskedumy.cz
Tvorba webu
HTML5 HTML5 je nová verze značkovacího jazyka používaná pro strukturování a prezentování obsahu na webu Mezi nové vlastnosti HTML5 patří například: schopnost přehrávání multimediálního obsahu tvorba aplikací, které jsou schopny pracovat i bez připojení k internetu Další výhodou jsou zjednodušené tagy
Porovnání zápisu HTML4 a HTML5 V HTML5 je nová specifikace typu dokumentu: Stačí nám pouze: <!DOCTYPE html> Oproti dřívějšímu: <! DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN > Jazyk dokumentu a kódování se zapíše také mnohem snadněji: Zápis v HTML5: <meta charset= UTF-8 > V předchozích verzích byl zápis reprezentován takto: <meta http-equiv= Content-Type content= text/html; charset=utf-8 >
Struktura HTML dokumentu (kostra) <!DOCTYPE html> //specifikace typu dokumentu <html lang= cs dir= ltr > //jazyk a směr textu (ltr - left to right) <head> //Hlavička <meta charset= UTF-8 > //Znaková sada (Kódování) <title>moje stránka</title> //Titulek stránky <body> //Tělo stránky (zde je obsah stránky) </body> //Zakončení těla </html> //Zakončení html dokumentu
Tělo stránky <body></body> Tělo stránky lze následně dělit na: <header></header> //hlavička obsahuje nadpis, logo či menu <nav></nav> //Navigace (menu) <article> //Nezávislá část stránky(článek, komenty) <section></section> //část stránky (kapitola) </article> <aside></aside> //Poznámky atd. <footer></footer> //Patička (Autor stránky, copyright) </body>
Multimédia v HTML5 HTML5 obsahuje také možnost vkládání multimediálního obsahu aniž by bylo nutností použít přehrávač na platformě flash. K vložení multimediálního obsahu slouží tagy <video> a <audio>. Tag <source> definuje zdroj a alternativní verze videa, pokud je definováno více formátů videa prohlížeč si vybere podporovaný formát. <track> slouží pro vložení stopy audia či videa.
Příklad vkládání audia a videa v HTML5 <video> <source src= moje_video.mp4 type= video/mp4 > </video> <audio> <source src= song.amr type= audio/amr > <source src= song.mp3 type= audio/mp3 > <source src= song.ogg type= audio/ogg > </audio>
Rozšířené možnosti formuláře Formuláře se vytváří tagem <input> stejně jako v předchozích verzích HTML, ale parametr type, je rozšířen o další možnosti: Time, week, month, date zadání času, týdne, měsíce, nebo datumu Email zadání emailové adresy včetně ověření formátu Url zadání adresy url Tel pole pro telefonní číslo včetně ověření Range výběr číselné hodnoty z intervalu, který je nastaven hodnotami min a max. Color výběr barvy včetně převodu do textového formátu
Příklad vytvoření rozbalovací nabídky <input list = Značka auta > <datalist id= Značka auta > <option value= BMW > <option value= Audi > <option value= Škoda > <option value= Mercedes > </datalist>
Canvas Mezi nové funkce patří také prvek <canvas>, který umí interpretovat vektorovou grafiku. Lze do něj kreslit i pomocí skriptů. Příklad aplikace prvku canvas.
Canvas Příklad javascriptu pro vykreslení barevného přechodu do prvku canvas.
Canvas Výsledný Barevný přechod vykreslený pomocí javascriptu.
Publikační systém K tvorbě webových stránek lze s výhodou použít také publikační systém: Tvorba webových stránek za pomoci redakčního systému vyžaduje minimální nebo žádné znalosti programování či skriptování Redakční systém je jiný název pro publikační systém Ve většině případů se jedná o webovou aplikaci Mezi nejoblíbenější systémy patří WordPress, Drupal, Joomla Některé hostingy mají již integrovaný publikační systém, mezi tyto hostingy patří například estranky.cz, nebo blog.cz
Užitečné odkazy Videa s tutoriály HTML5: http://www.youtube.com/watch?v=mp0f0ztplec&list=pl081ac329706b2953 Seznam free hostingů: http://www.hostingy.cz/hosting-zdarma.html Web projektu PsPad: http://www.pspad.com/
Zdroje Web 1. NEUVEDEN. Wikipedie, otevřená encyklopedie [online]. [cit. 2. 4. 2013]. Dostupný na WWW: http://cs.wikipedia.org 2. NEUVEDEN. HTML5 [online]. [cit. 15. 4. 2013]. Dostupný na WWW: https://cs.wikipedia.org/wiki/html5 3. NEUVEDEN. Systém pro správu obsahu [online]. [cit. 17.3.2014]. Dostupný na WWW: https://cs.wikipedia.org/wiki/publika%c4%8dn%c3%ad_syst%c3%a9m Obrázky 1) NEUVEDEN. HTML5 [online]. [cit. 15. 4. 2013]. Dostupný na WWW: https://commons.wikimedia.org/wiki/file:html5_badge.svg