Vložený obsah

1. Vložený obsah Telematické služby Ing. Marián Pecko, PhD.

2. HTML <img> tag • predstavuje obrázok • nepoužíva sa pre layout; nemal by sa používať pre zobrazenie priesvitných obrázkov • atribúty • globálne • alt – poskytuje slovný ekvivalent pre tých, ktorý nemôžu spracovávať obrázky, alebo ktorí majú vypnuté obrázky, musí byť zadaný (môže byť prázdny) • src – URL obrázku, musí byť zadaný • crossorigin – povoľuje obrázkom zo stránok tretích strán, ktoré povoľujú cross-originprístup, aby sa použili s canvas; • hodnoty - anonymous, use-credentials • usemap – obrázok bol prepojený s obrázkovou mapou • ismap – bool atribút; keď je prvok img potomkom prvku a s atribútom hrefpotom prvok poskytuje prístup k obrázkovej mape na strane servera • width, height – šírka a výška; používateľskí agenti predpokladajú ich použitie ako pomôcku pri renderovaní @MP/TMS 2012

3. HTML <img> tag • obrázky môžu byť • statické bitmapy – napr. PNG, GIF, JPEG • jednostránkové vektorové dokumenty – PDF, XML súbor s SVG ako nadradeným prvkom • animované bitmapy – APNG, animované GIF • animovaná vektorová grafika – XML súbor s SVG ako nadradeným prvkom, ktorý používa SMIL animáciu <imgsrc="carouge.svg" alt="Erbzobrazujeleva, ktorísedípred stromom."> @MP/TMS 2012

4. HTML <iframe> tag • predstavuje vnorený kontext na prehliadanie • ak sú zadané atribúty src a srcdoc potom srcdoc má prioritu • i keď je párový tag, nemá obsah • atribúty • globálne • src – URL stránky, ktorá obsahuje vnorený kontext • srcdoc – obsah stránky, ktorá obsahuje vnorený kontext • name – meno vnoreného kontextu, alebo prázdna hodnota • sandbox – povoľuje súbor osobitných obmedzení na obsah v prvku iframe. Hodnota je súbor medzerou oddelených znakov -> allow-forms, allow-popups, allow-same-origin, allow-scripts, and allow-top-navigation. • seamless – bool atribút; prehliadaný kontext sa renderuje takým spôsobom ako by bol súčasťou dokumentu • width, height – šírka a výška; používateľskí agenti predpokladajú ich použitie ako pomôcku pri renderovaní @MP/TMS 2012

5. HTML <iframe> tag <iframe seamless sandbox srcdoc="<p>Môžete to vidieť na <a href=&quot;/gallery?mode=cover&amp;amp;page=1&quot;>v mojej galérii</a>."></iframe> <nav><iframe seamless src="nav.include.html"></iframe></nav> @MP/TMS 2012

6. HTML <embed> tag • predstavuje bod integrácie pre externú (nie HTML) aplikáciu alebo interaktívny obsah • atribúty • globálne • src – URL vkladaného zdroja • type – MIME typ • width, height – šírka a výška; používateľskí agenti predpokladajú ich použitie ako pomôcku pri renderovaní <embedsrc="catgame.swf"> @MP/TMS 2012

7. HTML <object> tag • môže prezentovať externý zdroj, s ktorým, v závislosti od typu zdroja, sa bude zaobchádzať ako s obrázkom, ako s vnoreným kontextom, alebo ako s externým zdrojom, ktorý je spracovávaný pluginom • musí byť prítomný atribút data alebo type • atribúty • globálne • data – URL zdroja • type – typ zdroja, MIME typ • typemustmatch – bool atribút; udáva, že sa zdroj zadaný v data použije len vtedy keď súhlasí s type • name - meno vnoreného kontextu • usemap – ak prvok reprezentuje obrázok, potom obrázok bol prepojený s obrázkovou mapou • form – explicitne priraďuje prvok k formuláru • width, height – šírka a výška; používateľskí agenti predpokladajú ich použitie ako pomôcku pri renderovaní <figure> <object data="clock.html"></object> <figcaption>Moje HTML hodinky</figcaption> </figure> @MP/TMS 2012

8. HTML <param> tag • definuje parametre pre plugin vyvolaný prvkom object • atribúty name a value musia byť prítomné • atribúty • globálne • name – názov parametra • value – hodnota parametra <p>Pozrite sa na moje video: <objecttype="application/x-shockwave-flash"> <paramname="movie"value="http://video.example.com/library/watch.swf"> <paramname="allowfullscreen"value="true"> <paramname="flashvars"value="http://video.example.com/vids/315981"> <video controls src="http://video.example.com/vids/315981"> <a href="http://video.example.com/vids/315981">Pozrieť video</a>. </video> </object> </p> @MP/TMS 2012

9. HTML <video> tag • používa sa na prehrávanie videa alebo filmov a audio súborov s titulkami • obsah prvku sa zobrazuje iba v tých používateľských agentoch, ktoré nepodporujú tento prvok • atribúty • globálne • crossorigin - povoľuje obrázkom zo stránok tretích strán, ktoré povoľujú cross-origin prístup, aby sa použili s canvas; • hodnoty - anonymous, use-credentials • poster – URL obrázku, ktorý sa zobrazuje pokým nie sú video dáta dostupné, alebo pokým sa nezačne prehrávať video • width, height – šírka a výška; používateľskí agenti predpokladajú ich použitie ako pomôcku pri renderovaní <p><video src="tgif.vid" autoplaycontrols>alternatívny text</video></p> @MP/TMS 2012

10. HTML <audio> tag • predstavuje zvuk alebo audio stream • obsah prvku sa zobrazuje iba v tých používateľských agentoch, ktoré nepodporujú tento prvok • atribúty • globálne • crossorigin - povoľuje obrázkom zo stránok tretích strán, ktoré povoľujú cross-origin prístup, aby sa použili s canvas; • hodnoty - anonymous, use-credentials <audio controlssrc="horse.ogg"></audio> @MP/TMS 2012

11. Atribúty spoločné pre mediálne prvky • src – URL zdroja videa • preload – ako si autor myslí, že má byť video nahrané pri načítaní stránky; hodnoty: • none – prehliadač má nahrať celé video keď sa nahráva stránka • metadata – prehliadač má nahrať len metadáta keď sa nahráva stránka • auto – prehliadač nemá nahrať video keď sa stránka nahráva • autoplay – bool hodnota; používateľský agent automaticky začne prehrávať zdroj • mediagroup – prepája viaceré mediálne prvky spolu aby vytvoril mediálny ovládač; hodnota je text; mediálne prvky s rovnakou hodnotou sú automaticky prepojené • loop – bool atribút; mediálny prvok sa pretočí na začiatok po dosiahnutí konca • muted – bool atribút; predvolený stav výstupu zvuku • controls – bool atribút; naznačuje, že autor neposkytol skriptovací ovládač a chce aby používateľký agent použil vlastnú sadu ovládačov @MP/TMS 2012

12. HTML <source> tag • umožňuje autorovi definovať viacené alternatívy mediálnych zdrojov pre mediálne prvky • atribúty • globálne • src – URL mediálneho zdroja; musí byť daný • type – typ mediálneho zdroja, MIME typ; dodatočný parameter codecs definuje typ kódovania • media – typ média, na ktorom sa má video prehrať <video controls autoplay> <source src='video.mp4' type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'> <source src='video.ogv' type='video/ogg; codecs="theora, vorbis"'> ... </video> @MP/TMS 2012

13. HTML <track> tag • umožňuje autorovi explicitne definovať externé časované textové stopy pre mediálne prvky • atribúty • globálne • kind – predvolene je subtitles • subtitles – preklad alebo prepis dialógu, keď je zvuk zle zrozumiteľný • captions – preklad alebo prepis dialógu, zvukové efekty ai. keď nie je zvuk • description – textový popis častí videa; prezentuje sa ako audio • chapters – názvy kapitol • metadata – stopy pre použitie zo skriptu • src – URL textových dát; povinný • srclang – jazyk textových dát; povinný ak atribút kind má hodnotu subtitiles • label – názov stopy zobrazujúci sa používateľom • default – definuje predvolenú stopu; musí byť iba jedna @MP/TMS 2012

14. HTML <track> tag <video src="brave.webm"> <trackkind="subtitles" src="brave.en.vtt" srclang="en" label="English"> <trackkind="captions" src="brave.en.hoh.vtt" srclang="en" label="EnglishfortheHardofHearing"> <trackkind="subtitles" src="brave.fr.vtt" srclang="fr" lang="fr" label="Français"> <trackkind="subtitles" src="brave.de.vtt" srclang="de" lang="de" label="Deutsch"> </video> @MP/TMS 2012

15. HTML <canvas> tag • poskytuje skripty s plátnom závislým na rozlíšení, ktoré môže byť použité na vykreslenie grafov, hernej grafiky, umenia alebo iných vizuálnych obrázkov • atribúty • globálne • width, height – kontrolujú veľkosť vykresľovaného priestoru @MP/TMS 2012

16. HTML <map> tag • v spojení s prvkami area ako potomkami, definuje obrázkovú mapu • ak je daný atribút id, musí mať hodnotu rovnakú ako atribút name • atribúty • globálne • name – zadáva meno mapy, aby sa na ňu dalo odkazovať; musí byť prítomný a nesmie byť prázdny @MP/TMS 2012

17. HTML <area> tag • predstavuje buď hypertextový odkaz s dákym textom a tomu zodpovedajúcu oblasť v obrázkovej mape, alebo mŕtvu oblasť v obrázkovej mape • ak má atribút href, potom predstavuje hypertextový odkaz a musí obsahovať atribút alt • atribúty shape a coords definujú oblasť • atribúty • globálne • alt – text hypertextového odkazu • coords– udáva koordináty tvaru popísaného v atribútrshape @MP/TMS 2012

18. HTML <area> tag • shape – ak hodnota chýba, potom je rect. Hodnoty (v zátvorkách je uvedená hodnota atribútu coords): • circle (vzdialenosť stredu zľava, zhora, priemer) • poly (minimálne šesť čísiel, párny počet, každá dvojica prestavuje súradnice dané vzdialenosťou zľava a zhora) • rect (4 čísla pričom prvé musí byť menšie ako tretie a druhé menšie ako štvrté – vzdialenosť od ľavej hrany obrázku k ľavej hrane obdĺžniku, od hornej hrany obrázku k hornej hrane obdĺžniku, od ľavej hrany obrázku k pravej hrane obdĺžnika, od hornej hrany obrázku k dolnej hrane obdĺžnika) • atribúty rovnaké ako pri odkazoch – href, target, rel, media, hreflang, type @MP/TMS 2012

19. Obrázková mapa <p> Prosím vyberte si tvar: <imgsrc="shapes.png" usemap="#shapes" alt=„Sú k dispozícii 4 tvary: červený štvorec so štvorcovou dierou, zelený kruh, modrý trojuholník, a žltá štvorcípa hviezda."> <mapname="shapes"> <areashape=rect coords="50,50,100,100"> <!– diera v červenom štvorci--> <areashape=rect coords="25,25,125,125" href="red.html" alt="Červený štvorec."> <areashape=circle coords="200,75,50" href="green.html" alt="Zelený kruh."> <areashape=poly coords="325,25,262,125,388,125" href="blue.html" alt="Modrý trojuholník."> <areashape=poly coords="450,25,435,60,400,75,435,90,450,125,465,90,500,75,465,60"href="yellow.html" alt="Žltá hviezda."> </map> </p> @MP/TMS 2012