1 / 19

Vložený obsah

Vložený obsah. Telematické služby Ing. Marián Pecko, PhD. 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

kay
Download Presentation

Vložený obsah

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  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

More Related