Használható képformátumok
A HTML szabvány a JPG, PNG és a GIF szabványú képeket jeleníti meg. Minden más szabványt esetleg megjelenít egy böngésző, de nem lehetünk biztosak benne. Melyek ezeknek a képformátumoknak a tulajdonságai?
| Tulajdonság | GIF | JPG | PNG |
| Tömörített | igen | igen | igen |
| Veszteséges tömörítés | igen | ||
| 16 millió szín (RGB) | igen | igen | |
| csak 256 szín | igen | ||
| Áttetsző háttér lehetséges | igen | igen | |
| A tömörítés mértékét lehet szabályozni | igen | ||
| Mozgó képek tárolhatók benne | igen |
Képek beillesztése
A fenti képet az <img> tag segítségével lehet megjeleníteni, amelynek a paraméterei az alábbiak:
<img alt="Pöttyös Túrórudi képe" title="Pöttyös Túrórudi képe" height="122" src="http://www.fzolee.hu/fw/files/pottyos_1.jpg" width="400" />
- alt: Alternatív szöveg. Amikor lassan jeleníti meg a képet a böngésző, akkor először az itt található szöveg jelenik meg.
- src: Itt kell megadni a kép elérhetőaségét a szerveren. ennek a részleteire később kitérünk.
- Ha a paraméter http://www.fzolee.hu/...... módon kezdődik, akkor az internet valamelyik szerverén lévő képet használunk
- Ha a paraméter a /fw/files/pottyos_1.jpg akkor a weboldalt kiszolgáló szerveren a webszerver gyökérkönyvtárától számítjuk a kép elérési útvonalát.
- Ha a paraméter: files/pottyos_1.jpg, akkor a szerveren az éppen aktuális könyvtártól számítjuk a kép elérési útvonalát.
- height: A kép magassága, hogyha át akarjuk méretezni képpontban megadva
- width: A kép szélessége képpontban megadva, ha át akarjuk méreteztetni a böngészővel.
- Ha nem adunk szélesség és magasság paramétert, akkor a böngésző a képet eredeti méretében jeleníti meg.
- Ha csak az egyik vagy a másik méretet adjuk meg, akkor a böngésző a hiányzó méretet arányosan változtatja
- Ha a két méret a kép eredeti arányának nem felel meg, akkor a megjelenő kép torz lesz
- title: Segítségével egy kis buborlkban megjelenik a kép címe, ha megállunk az egérrel.
A HTML 5 bevezetett még egy TAG-et: <figure>
Segítségével a HTML oldalba képet, grafikont és egyéb téglalap alakú területet definiálhatunk, amit a <figcaption> tag segítségével címkézhetünk is, mint a fenti példában
<figure class="image">
<figcaption>Képfelirat</figcaption>
<img alt="Pöttyös Túrórudi képe" height="118" src="http://www.fzolee.hu/fw/files/pottyos_1.jpg" width="387" />
</figure>
Ha egy képre kattinva át szeretnénk vinni a böngészőt egy további oldalra, akkor azt így lehet:
Vagyis az <IMG> tag köré kell tenni egy <A> azaz link tag-et.
<figure class="image">
<a href="https://hu.wikipedia.org/wiki/T%C3%BAr%C3%B3_Rudi">
<img alt="Pöttyös Túrórudi képe" height="118" src="http://www.fzolee.hu/fw/files/pottyos_1.jpg" title="Pöttyös Túrórudi képe" width="387" />
</a>
<figcaption>Képfelirat</figcaption>
</figure>
Új lehetőség: a változó képernyőszélességek esetén más és más fájlt tölt le a böngésző
<picture>
<source media="(min-width:650px)" srcset="kisvirag.jpg">
<source media="(min-width:465px)" srcset="kisebbvirag.jpg">
<img src="virag.jpg" alt="Virág" style="width:auto;">
</picture>
Kép térképek használata
Akkor használunk ilyet, ha egy kép részleteire kattintva más és más helyre szeretnénk vinni a böngészőt.
<h2>Kattintson a kiválasztott alkatrészre:</h2>
<img src="alaplap.jpg" usemap="#map_name">
<map name=" map_name">
<area shape="rect" coords="0,0,82,126" alt="Processzor" href="processzor.htm">
<area shape="rect" coords="55,65,282,326" alt="Memória" href="memoria.htm">
….
<area shape="circle" coords="124,58,8" alt="Akkumulátor" href="akku.htm">
</map>
(Ez a példa innen származik http://webfejlesztes.gtportal.eu/index.php?f0=1_kepek_03)
Nem gyakori a kép térképek használata.
Filmek, videok, hangok beillesztése
Aa multimédiás tartalmak beillesztése HTML oldalakba a HTML 5-ben egyszerűbbé vált. Mivel szükséges még régebbi változatokat is ismerni, ezért a régebbi technikával kezdjük:
IFRAME-ek
Az iframe egy beágyazott keret, amely egy másik html oldal vagy tartalmat jelenít meg.
<iframe width="420" height="315"
src="https://www.youtube.com/embed/tgbNymZ7vqY?autoplay=1&mute=1">
</iframe>
Youtube videok esetén a link végére lehet helyezni az alábbi paramétereket:
- mute=1 - nem lesz hangja a videonak
- autoplay=1 - automatikusan elindul a lejátszás
- loop=1 - automatikusan a végtelenségig játszik a video (loop=0 esetén leáll)
- controls=0 - a Youtube vezérlők eltűnnek
Flash videók JAVA appletek, ACtiveX, PDF, beágyazása OBJECT kóddal
Az <OBJECT> tag speciális, több funkciós tag, ezért használata körülményes. Mivel az Adobe Flash-t lassan már a böngészőkből száműzik, ezért csak a használatának a módját írom le, de nem hozok példát.
<object id="presentation" width="409" height="322"
type="application/x-shockwave-flash"
data="gorog_1.swf">
<param name="allowScriptAccess" value="sameDomain">
<param name="movie" value="gorog_1.swf">
<param name="quality" value="best">
<param name="bgcolor" value="#000000">
<param name="allowFullScreen" value="true">
<param name="play" value="true">
</object>
HTML5 video elem használata
Ez a video nem minden böngészőben jelenik meg. Például a Firefox 47 nem jeleníti meg a videot, de a Chrome igen.
<video height="240px" width="320px" controls>
<source src="http://www.fzolee.hu/fw/files/webfejlesztes/kulcsok.mp4" type="video/mp4" />
</video>
A HTML5 az mp4, az ogg és a WebM típusú videokat hajlandó megjeleníteni.
Ha a HTML 5-ben megadott vezérlőket is szeretnénk megjeleníteni, akkor egy kicsit még játszani kell a kóddal:
Használható paraméterek
- height="1234px": a film területének szélessége
- width="1234px": a film területének magassága
- controls: Jelenjenek meg a vezérlők (play, pause gombok)
- source="" - Különböző formátumú videók jelenhetnek meg a böngésző képességeitől függően
- track: különböző típusú szövegek jelenjenek meg képaláírásként... (WebVTT formátumban: .vtt fájlok tartalmaznak ilyet)
formátumok és mime típusok:
- ogg: video/ogg
- WebM: video/webm
- mp4: video/mp4
Ha hangokat akarunk beilleszteni, akkor az ogg és az mp3 formátumok között választhatunk.
<audio src="http://www.fzolee.hu/fw/files/webfejlesztes/hetvegi_nap.mp3" preload="auto" controls autoplay loop>
</audio>
Két paramétert tudunk átadni a lejátszónak, amelyek nem kötelezőek!
- preload="auto", preload="none", preload=''metadata" - A file egyes paramétereit a böngésző előre letölti.
- controls: A HTML-ben megadott vezérlők jelennek meg az oldalon
- autoplay: amikor az oldalra tévedünk, akkor lejátsza a böngésző a zenei fájlt.
- loop: Segítségével újra és újra lejátsza a zenei fájlt a böngésző.