Transcript HTML tag
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 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-origin prí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 href potom 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 2 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 <img src="carouge.svg" alt="Erb zobrazuje leva, ktorí sedí pred stromom."> @MP/TMS 2012 3 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 4 HTML <iframe> tag <iframe seamless sandbox srcdoc="<p>Môžete to vidieť na <a href="/gallery?mode=cover& amp;page=1">v mojej galérii</a>."></iframe> <nav><iframe seamless src="nav.include.html"></iframe></n av> @MP/TMS 2012 5 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í <embed src="catgame.swf"> @MP/TMS 2012 6 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 7 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: <object type="application/x-shockwave-flash"> <param name="movie" value="http://video.example.com/library/watch.swf"> <param name="allowfullscreen" value="true"> <param name="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 8 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" autoplay controls>alternatívny text</video></p> @MP/TMS 2012 9 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 controls src="horse.ogg"></audio> @MP/TMS 2012 10 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 11 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 12 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 13 HTML <track> tag <video src="brave.webm"> <track kind="subtitles" src="brave.en.vtt" srclang="en" label="English"> <track kind="captions" src="brave.en.hoh.vtt" srclang="en" label="English for the Hard of Hearing"> <track kind="subtitles" src="brave.fr.vtt" srclang="fr" lang="fr" label="Français"> <track kind="subtitles" src="brave.de.vtt" srclang="de" lang="de" label="Deutsch"> </video> @MP/TMS 2012 14 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 15 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 16 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útr shape @MP/TMS 2012 17 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 18 Obrázková mapa <p> Prosím vyberte si tvar: <img src="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."> <map name="shapes"> <area shape=rect coords="50,50,100,100"> <!– diera v červenom štvorci--> <area shape=rect coords="25,25,125,125" href="red.html" alt="Červený štvorec."> <area shape=circle coords="200,75,50" href="green.html" alt="Zelený kruh."> <area shape=poly coords="325,25,262,125,388,125" href="blue.html" alt="Modrý trojuholník."> <area shape=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 19