GWEB2

1. GWEB2 Mgr. Vlastislav Kučera 2. přednáška

2. Obsah přednášky • Prvky rozdělující obsah • article, aside, nav, section • header • footer

3. Section • specifikace dle HTML5: • section reprezentuje obecnou část dokumentu. Seskupuje související obsah, typicky s vlastní hlavičkou • neměl by se používat jako obecný kontejner (<div>) • použití: kapitoly, stránky rozdělené kartami, … • section může obsahovat další section

4. Article • specifikace dle HTML5: • article představuje samostatný celek v dokumentu, stránce, … • mělo by se jednat o nezávislý opětovně použitelný obsah • př.: • novinové články, příspěvky v diskuzích, příspěvky na blogu, … • article může být vložen do jiného article

5. Nav • označení části stránky s navigačními odkazy • použití: jen pro nejdůležitější skupinu odkazů, ne pro všechny typy odkazů • např. odkaz v textu neoznačíme <nav> • použití např. místo <div id="navigace(nav, navigation)">

6. Aside • část stránky okrajově související s obsahem stránky • lze jej od hlavního obsahu oddělit • např.: postranní panel • použití: citace, blok s odkazy na související články, reklama,

7. Header • definuje obecné záhlaví • záhlaví celého webu, záhlaví článku, sekce,… • nelze vnořit: • footer do header • header do header • header do footer • použití např. místo <div id="header(head, zahlavi)">

8. Footer • definujeme obecné zápatí • zápatí celé stránky, článku, sekce, … • použití např. místo <div id="footer(pata, paticka)">

9. Address • párová značka • pro definování/vložení kontaktních údajů na autora, lidi, společnost, která má s danou stránkou nebo částí něco společného

10. Důležitý text • strong • důležitý text • em • méně důležitý text • b • v HTML5 – část textu, která má upoutat pozornost, avšak bez důrazu • klíčové slovo v dokumentu • i • v HTML5 – část textu vyjadřující názor, postoj nebo se jiným způsobem liší od okolního textu • technický termín, výraz z cizího jazyka, …

11. Zkratky • HTML4 • abbr • acronym • HTML5 • abbr

12. Tag U • HTML do verze 4 včetně: • podtržený text • HTML5: • označení záměrně nesprávného textu

13. Odkazy • HTML do verze 4 včetně: • odkaz směl obsahovat jen text, obrázek. Obecně obsah nebo řádkové tagy • HTML5: • mohou obsahovat prakticky jakýkoliv obsah: odstavce, seznamy, .. • nesmí obsahovat interaktivní obsah: jiné odkazy, audio, video, části formulářů, …

14. Vložení multimediálního obsahu - video • <video> - párová značka • parametry: • src – adresa souboru s videem • width – šířka prvku • height – výška prvku • Controls – zobrazení nativních ovládacích prvků • autoplay – automatické spuštění videa po načtení stránky. Pokud možno, nepoužívat • loop – opakování • preload – přednačítání • auto – video a další data se začne načítat před samotným přehrávání • none – video a další data se nesmí načítat před samotným přehráváním • metadata – metadata (rozměry, doba trvání, …) se načítají před přehráváním

15. Vložení multimediálního obsahu - audio • podobně jako video • podporované formáty: • audio • waw – všechny prohlížeče • mp3 – Safari, Chrome, IE9+ • ogg/Vorbis – Firefox, Opera do 12.16, Chrome • video • mp4 – IE9+, Safari a Chrome • webm – Chrome, Firefox, IE9+ a Opera do 12.16 • ogg – Opera do 12.16, Chrome, Firefox

16. Vložení více formátů videa/audia <videowidth="375"height="280" Controls> <sourcesrc="priklad.mp4" type='video/mp4; codecs="mp4a.40.2" '> <sourcesrc="priklad.webm" type='video/webm; codecs="vp8, vorbis" '> <sourcesrc="priklad.ogv" type='video/ogg; codecs="theora, vorbis" '> </video>