032.3 Lecke 1
Tanúsítvány: |
Web Development Essentials |
---|---|
Verzió: |
1.0 |
Témakör: |
032 A HTML-dokumentum jelölései |
Fejezet: |
032.3 HTML referenciák és beágyazott erőforrások |
Lecke: |
1/1 |
Bevezetés
A modern weboldalak ritkán állnak csak szövegből. Sok más típusú tartalmat tartalmazhatnak, képeket, hangokat, videókat és akár más HTML-dokumentumokat. A HTML-dokumentumok a külső tartalmakkal együtt tartalmazhatnak más dokumentumokra mutató linkeket, ami egyszerűbbé teszi az internet böngészésének élményét.
Beágyazott tartalom
Az interneten lehet fájlokat cserélni HTML-ben írt weboldalak nélkül is, de akkor miért a HTML-t választották a weboldalak formátumának, miért nem a PDF-et vagy bármely más szöveges formátumot? Ennek az egyik fontos oka az, hogy a HTML a multimédiás erőforrásokat külön fájlokban tárolja. Egy olyan környezetben, mint az internet, ahol az információk gyakran feleslegesek és különböző helyeken tároljuk őket, fontos, hogy elkerüljük a szükségtelen adatátvitelt. Legtöbbször a weboldalak új verziói ugyanazokat a képeket és egyéb fájlokat használják, mint az előző verziók, így a böngésző a korábban letöltött fájlokat használhatja, ahelyett, hogy újra lemásolná őket. Ezenfelül a fájlok elkülönítve tárolása megkönnyíti a multimédiás tartalmak testreszabását a kliens olyan tulajdonságainak, mint például lokációnak, képernyőméretnek, sávszélességnek megfelelően.
Képek
A beágyazott tartalom leggyakoribb típusa a szöveget kísérő kép. A képeket külön tároljuk és a HTML-fájlban az <img>
taggel hivatkozunk rájuk:
<img src="logo.png">
Az <img>
tagnek nincs lezáró tagje. Az src
property jelöli a képfájl forrását. Ebben a példában a képfájl, a logo.png
ugyanabban a mappában kell, hogy legyen, mint a HTML-fájl, különben a böngésző nem tudja megjeleníteni. Forrásként adhatunk meg relatív útvonalakat is, így a kép elérési útját megadhatjuk pont jelöléssel (dot notation) is:
<img src="../logo.png">
A két pont azt jelzi, hogy a kép a szülőmappában található ahhoz a mappához képest, ahol a HTML-fájl van. Ha a ../logo.png
fájlnevet egy olyan HTML-fájlban használjuk, aminek a linkje http://example.com/library/periodicals/index.html
, a böngésző a képfájlt a http://example.com/library/logo.png
címen fogja keresni.
A dot notáció akkor is működik, ha a HTML-fájl nem tényleges fájl a fájlrendszerben; a böngésző útvonalként értelmezi az URL-t, de a HTTP-szerver dolga eldönteni, hogy az útvonal egy fájlra mutat-e vagy egy dinamikusan létrehozott tartalomra. A domain és a megfelelő elérési útvonal automatikusan hozzáadódik a szerverhez szóló kérésekhez, ha a HTML-fájl egy HTTP-kérésből származik. Hasonlóképpen, a böngésző megnyitja a megfelelő képet, ha a HTML-fájlt közvetlenül a helyi fájlrendszerből nyitották meg.
A perjellel (/
) kezdődő forrásokat abszolút útvonalként kezeljük. Az abszolút útvonalak a képek teljes elérési útját tartalmazzák, így a HTML-dokumentum lokációjától függetlenül működnek. Ha a képfájl egy másik szerveren van, például ha Content Delivery Network (CDN) van használatban, a domain nevet is meg kell adnunk.
Note
|
A Content Delivery Network-ök földrajzilag elosztott szerverekből állnak, amelyek statikus tartalmat tárolnak más weboldalakhoz. Segítenek a nagy látogatottságú oldalak teljesítményének és elérhetőségének javításában. |
Ha a képet nem lehet betölteni, a böngésző az alt
attribútumban levő szöveget jeleníti meg. Például:
<img src="logo.png" alt="A cég logója">
Az alt
hozzáférhetőség szempontjából is fontos. A szöveges (text-only) böngészők és a képernyőfelolvasók a kép leírásaként használják.
Képtípusok
A böngészők az összes népszerű képformátumot meg tudják jeleníteni, mint például JPEG, PNG, GIF, és SVG. A képek mérete a betöltődéskor kerül azonosításra, de előre is definiálhatók a width
(szélesség) és height
(magasság) attribútumokkal:
<img src="logo.png" alt="A cég logója" width="300" height="100">
A méretek megadásának oka az <img>
tag esetén az, hogy elkerüljük az elrendezés (layout) megtörését, amikor a kép betöltődése túl sokáig tart vagy egyáltalán nem történik meg. A width
és height
attribútumok használata megváltoztatja a kép eredeti dimenzióit és ez nem kívánt eredményekhez vezethet:
-
A képek torzulnak, ha az eredeti méret kisebb, mint az új vagy ha az új képarány eltér az eredetitől.
-
A nagy képek kicsinyítése extra sávszélességet igényel, ami hosszabb töltődési időt eredményez.
Az SVG az egyetlen formátum, amire ezek nincsenek hatással, mivel minden grafikus információja a méretezéshez alkalmas numerikus koordinátákban van tárolva és dimenziói nem befolyásolják a fájl méretét (ezért Scalable Vector Graphics). SVG-ben egy téglalap rajzolásához például csak annak pozíciójára, az oldalak méreteire és a színekre van szükségünk. Minden egyes pixel értéke dinamikusan jelenik meg. Valójában az SVG-képek hasonlóak a HTML-fájlokhoz, abban az értelemben, hogy grafikai elemeket a szöveges fájl címkéi határozzák meg. Az SVG-fájlok éles szélű rajzok, például grafikonok vagy diagramok.
Az ezeknek a feltételeknek nem megfelelő képeket bittérképként (bitmap) kell tárolni. A vektoralapú képformátumokkal ellentétben a bittérképek a kép minden pixelére vonatkozó színt tárolnak. A kép egyes pixeleihez tartozó színértékek tárolása nagy mennyiségű adatot generál, ezért a bitképeket általában tömörített formában tárolják, ezek például JPEG, PNG vagy GIF.
A JPEG formátum fényképekhez ajánlott, mivel a tömörítő algoritmusa jó eredményeket hoz árnyalatok és elmosódott háttér esetén. Azokhoz a képekhez, ahol a szolidabb színek az uralkodók, a PNG formátum a megfelelőbb, ezért a PNG formátumot kell választani, ha egy vektorképet bittérképpé akarunk konvertálni.
A GIF formátum kínálja a leggyengébb képminőséget az összes népszerű bittérkép-formátum közül. Ennek ellenére még mindig széles körben használatos, mert támogatja az animációkat. Sok weboldal GIF-fájlokat használ a rövid videók megjelenítéséhez, de vannak jobb módszerek az ilyen tartalom megjelenítéséhez.
Audió és videó
A HTML-dokumentumoz audio- és videotartalmak nagyjából ugyanúgy hozzáadhatók, mint a képek. Nem meglepő módon a hangok hozzáadásához az <audio>
, videók hozzáadásához a <video>
tag használható. Egyértelmű, hogy a csak szöveges böngészők nem képesek multimédiás tartalmak lejátszására, így az <audio>
és <video>
tagek zárótagjai előtt tárolják a nem megjeleníthető elem szöveges jelzését. Például:
<audio controls src="/media/recording.mp3">
<p>A <em>recording.mp3</em> fájlt nem lehet lejátszani</p>
</audio>
Ha a böngésző nem támogatja az <audio>
taget, a “A recording.mp3 fájlt nem lehet lejátszani” szöveg jelenik meg helyette. Az </audio>
vagy a </video>
zárótagek használata lehetővé teszi, hogy a weboldal bonyolultabb alternatív tartalmat jelenítsen meg, mint az <img>
tag alt
attribútuma.
Az <audio>
és a <video>
tagek src
attribútuma ugyanúgy működik, mint az <img>
tag esetén, de itt megadható élő közvetítésre mutató link is. A böngésző gondoskodik a tartalom puffereléséről, dekódolásáról és megjelenítéséről is. A controls
attribútum jeleníti meg a lejátszó vezérlőgombjait. Enélkül a látogató nem tudja szüneteltetni, visszatekerni vagy más módon irányítani a lejátszást.
Generikus tartalom
Hasonlóan egy kép beszúrásához, egy HTML-dokumentum is beágyazható egy másik HTML-dokumentumba az <iframe>
tag használatával:
<iframe name="viewer" src="gallery.html">
<p>Nem támogatott böngésző</p>
</iframe>
Az egyszerű, szöveges böngészők nem támogatják az <iframe>
taget és helyette a beleírt szöveget jelenítik meg. Akárcsak a multimédiás tagek esetén, az src
attribútum adja meg a beágyazott dokumentum forrását. A width
és height
attribútumokkal megváltoztathatjuk az iframe
elem alapértelmezett méreteit.
A name
attribútummal hivatkozhatunk az iframe-re és megváltoztathatjuk a beágyazott dokumentumot. Enélkül az attribútum nélkül a beágyazott dokumentum nem változtatható meg. Az anchor
elem segítségével egy más helyen levő dokumentumot tölthetünk be az iframe-be az aktuális böngészőablak helyett.
Hivatkozások
Az általában linknek (hivatkozásnak) nevezett elem technikai elnevezése az anchor, ezért <a>
a tagje. A link egy másik lokációra vezet, ami egy bármilyen, böngésző által támogatott cím lehet. A lokációt a href
(hyperlink reference) attribútummal adhatjuk meg:
<a href="contact.html">Elérhetőség</a>
A címet megadhatjuk relatív vagy abszolút útvonalként is, ahogy azt a beágyazott tartalmaknál már láttuk. Csak a közbezárt szöveg (pl., Elérhetőség
) látható a látogatók számára, alapértelmezés szerint általában kék, aláhúzott, kattintható szövegként, de a link fölött bármilyen más látható tartalom megjeleníthető, például kép:
<a href="contact.html"><img src="contact.png" alt="Elérhetőség"></a>
A címhez speciális prefixeket is megadhatunk, amivel jelezzük a böngészőnek, hogyan nyissa meg. Ha a link például egy e-mail címre mutat, a href
attribútumnak tartalmaznia kell a mailto:
előtagot:
<a href="mailto:info@lpi.org">E-mail cím</a>
A tel:
prefix telefonszámot jelez, ez különösen hasznos azon felhasználók számára, akik mobileszközről nyitották meg az oldalt:
<a href="tel:+123456789">Telefonszám</a>
Ha a linkre kattintanak, a böngésző megnyitja a célcím tartalmát a társított alkalmazással.
A linkeket leggyakrabban más weboldalak betöltéséhez használjuk. Alapértelmezés szerint a böngésző az aktuális HTML-dokumentum helyén nyitja meg az új cím tartalmát. Ezt a tulajdonságot a target
attribútummal változtathatjuk meg. A _blank
például azt jelzi a böngészőnek, hogy a címet új ablakban vagy fülön nyissa meg, a beállításoktól függően:
<a href="contact.html" target="_blank">Elérhetőség</a>
A _self
az alapértelmezett, ha a target
nincs megadva. Ez okozza azt, hogy a hivatkozott dokumentum jelenik meg az aktuális dokumentum helyén.
Egyéb típusú cél az <iframe>
elem esetén adható meg. Ha a hivatkozott dokumentumot egy <iframe>
elemen belül szeretnék megjeleníteni, a target
attribútumnak az iframe elem nevére kell mutatnia:
<p><a href="gallery.html" target="viewer">Képgaléria</a></p>
<iframe name="viewer" width="800" height="600">
<p>Nem támogatott böngésző</p>
</iframe>
Az iframe elem külön böngészőablakként működik, így az iframe-ben levő dokumentumból betöltött linkek csak az iframe tartalmát cserélik le. Ezt a viselkedést a belső dokumentumban levő linkek target
attribútumával változtathatjuk meg. Belső dokumentumban használva a _parent
a hivatkozott lokációra cseréli le az <iframe>
taget tartalmazó szülődokumentumot. Például a beágyazott gallery.html
dokumentum tartalmazhat egy olyan linket, ami a szülődokumentumban tölti be magát:
<p><a href="gallery.html" target="_parent">Megnyitás szülődokumentumként</a></p>
Az <iframe>
tag esetén a HTML-dokumentumok a beágyazás különböző szintjeit teszik lehetővé. Ha egy belső dokumentum linkjében használjuk a _top
célt, a hivatkozott cím le fogja cserélni a megnyitott oldalt a böngészőben, függetlenül attól, hogy a megfelelő <iframe>
közvetlen szülője-e vagy őse a láncban.
Dokumentumon belüli lokációk
A HTML-dokumentum címe tartalmazhat egy fragmentet, amivel egy, a dokumentumon belül levő forrást azonosíthatunk. Ez a fragment, amit URL anchor (URL-horgony) néven is ismerünk, egy kettőskereszt (#
) után megadott sztring az URL végén. Például a History
szó az anchor a
https://en.wikipedia.org/wiki/Internet#History
URL-ben.
Ha az URL-ben van anchor, a böngésző a hozzá tartozó elemhez görget a dokumentumban: ez az az elem, amely id
attribútuma ugyanaz, mint az anchor az URL-ben. A megadott URL esetén (https://en.wikipedia.org/wiki/Internet#History
), a böngésző a “History” szekcióra görget. Az oldal HTML-kódját megvizsgálva kiderül, hogy a szekció címéhez tartozik a megfelelő id
attribútum:
<span class="mw-headline" id="History">Történelem</span>
Az URL anchor az <a>
tag href
attribútumában használható, akár külső oldalra, akár az aktuális oldalon belüli lokációra mutat. Ez utóbbi esetben elég csak a kettőskereszt az URL-fragmenttel, ahogy a <a href="#History">Történelem</a>
esetén.
Warning
|
Az |
Testreszabhatjuk, hogy a böngésző hogyan kezelje az URL anchorokat. Lehetőségünk van például olyan JavaScript függvényt írni, ami figyeli a hashchange eseményt és meghatározott akciót indít el, például egy animációt vagy egy HTTP-kérést. Érdemes megjegyezni, hogy az URL-fragmentet sosem küldi el a URL-el együtt a szervernek, ezért a HTTP-szerver nem tudja azonosítóként használni.
Gyakorló feladatok
-
A
http://www.lpi.org/articles/linux/index.html
címen elérhető HTML-dokumentumban van egy<img>
tag, amelysrc
atrribútuma a../logo.png
képre mutat. Mi ennek a képnek a teljes abszolút útvonala? -
Nevezzünk meg két okot, amiért az
alt
attribútum fontos az<img>
tagek esetén! -
Melyik képformátum biztosít jó képminőséget és kis fájlméretet, homályos pontokkal, sok színnel és árnyalattal rendelkező fényképek esetén?
-
Melyik HTML tag segítségével lehet videót beágyazni egy HTML-dokumentumba, csak szabványos HTML-funkciók használatával anélkül, hogy olyan külső szolgáltatót használnánk, mint például a Youtube?
Gondolkodtató feladatok
-
Tételezzük fel, hogy HTML-dokumentumban szerepel a
<a href="pic1.jpeg">Első kép</a>
hivatkozás és az<iframe name="gallery"></iframe>
iframe elem. Hogyan módosíthatjuk úgy a link tagjét, hogy a kép, amire mutat, a linkre való kattintás után az adott iframe belsejében jelenjen meg? -
Mi történik, ha a felhasználó egy linkre kattint egy iframe-n belüli dokumentumban és a link target attribútuma
_self
? -
Azt tapasztaljuk, hogy a HTML-oldalunk második szekciójának linkje nem működik. Mi okozhatja ezt a problémát?
Összefoglalás
Ez a lecke lefedi, hogy adhatunk képeket és egyéb multimédiás tartalmat az oldalunkhoz a megfelelő HTML tagek használatával. Ezenfelül megtanulhattuk, hogyan használhatók a hivatkozások más dokumentumok betöltésére és az oldalakon belüli konkrét helyekre való mutatásra. Ez a lecke a következő fogalmakat és eljárásokat veszi át:
-
Az
<img>
tag és fő attribútumai:src
és`alt`. -
Relatív és abszolút URL-útvonalak.
-
Népszerű webes képformátumok és karakterisztikájuk.
-
Az
<audio>
és<video>
multimédiás tagek. -
Hogyan ágyazhatunk be dokumentumokat az <iframe> tag segítségével.
-
Az
<a>
hiperhivatkozás tag, ahref
attribútuma és speciális célpontjai. -
URL-fragmentek, hash anchorok használata.
Válaszok a gyakorló feladatokra
-
A
http://www.lpi.org/articles/linux/index.html
címen elérhető HTML-dokumentumban van egy<img>
tag, amelysrc
atrribútuma a../logo.png
képre mutat. Mi ennek a képnek a teljes abszolút útvonala?http://www.lpi.org/articles/logo.png
-
Nevezzünk meg két okot, amiért az
alt
attribútum fontos az<img>
tagek esetén!A szöveges böngészők a hiányzó kép leírását jelenítik meg. A képernyőfelolvasók az
alt
attribútumot használják a kép leírásához. -
Melyik képformátum biztosít jó képminőséget és kis fájlméretet, homályos pontokkal, sok színnel és árnyalattal rendelkező fényképek esetén?
A JPEG formátum.
-
Melyik HTML tag segítségével lehet videót beágyazni egy HTML-dokumentumba, csak szabványos HTML-funkciók használatával anélkül, hogy olyan külső szolgáltatót használnánk, mint a Youtube?
A
<video>
tag.
Válaszok a gondolkodtató feladatokra
-
Tételezzük fel, hogy HTML-dokumentumban szerepel a
<a href="pic1.jpeg">First picture</a>
hivatkozás és az<iframe name="gallery"></iframe>
iframe elem. Hogyan módosíthatjuk úgy a link tagjét, hogy a kép, amire mutat, a linkre való kattintás után az adott iframe belsejében jelenjen meg?Az
a
tagtarget
attribútumának használatával:<a href="pic1.jpeg" target="gallery">Első kép</a>
. -
Mi történik, ha a felhasználó egy olyan linkre kattint egy iframe-n belüli dokumentumban és a link target attribútuma
_self
?A dokumentum ugyanazon iframe-n belül tölt be, ami az alapértelmezett viselkedés.
-
Azt tapasztaljuk, hogy a HTML-oldalunk második szekciójának linkje nem működik. Mi okozhatja ezt a problémát?
A hash-jel utáni URL-fragment nem egyezik meg a második szekció elemének
id
attribútumával, vagy az elemid
attribútuma nincs megadva.