GWEB2 MGR. VLASTISLAV KUČERA 2. PŘEDNÁŠKA. Obsah přednášky  Prvky rozdělující obsah  article, aside, nav, section  header  footer.

Prezentace na téma: "GWEB2 MGR. VLASTISLAV KUČERA 2. PŘEDNÁŠKA. Obsah přednášky  Prvky rozdělující obsah  article, aside, nav, section  header  footer."— Transkript prezentace:

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 ( )  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  použití např. místo

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

8 Footer  definujeme obecné zápatí  zápatí celé stránky, článku, sekce, …  použití např. místo

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  - 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