Leckék menü
CSS - intermediate - Lecke száma 13
Külső tartalom beágyazása egy weboldalba
Miről szól ez a lecke?
Ebben a leckében meg fogjuk tanulni, hogyan dobjunk fel egy weboldalt beépíthető tartalommal más weboldalakról. Az Interneten sok lehetőséget találhatunk a munkánk megkönnyítésére, programozásra, formázásra és biztonsági kérdésekre fordított időt megspórolva.

Új HTML címke:
<iframe> - ezt a címkét fogjuk arra használni, hogy külső tartalmakat beágyazzunk a weboldalba. Nem mi fogjuk megírni őket, az oldalakon, amelyek felkínálják a beágyazható tartalmakat, általában van lehetőség kimásolni a kódot.

Példa a Google térképek használatára:


Ha meg akarsz osztani egy helyszínt a weboldaladon, rajzolhatsz egy térképet, de nem szükséges. Használhatod a Google térkép szolgáltatását, amint a fenti kép illusztrálja. Egyéb személyre szabási lehetőségeket is találhatsz a Google oldalon.

Példa YouTube videó beszúrására:


Ha egy videót szeretnél beépíteni a weboldaladba, felmásolhatod a webszerveredre, de ez megnövekedett forgalmat és költséget jelenthet számodra vagy feltöltheted egy videó megosztó oldalra és beágyazhatod az oldaladra. Ez utóbbi esetben a videó egy, a weboldaladétól különböző szerveren fut.



Ha közösségi oldalakról szeretnél beágyazni bővítményt, az illető oldalon kell rákeresni a kód generálás módjára. Több mód is lehet rá, itt ugyancsak az <iframe>-es változatot szúrtuk be. Szükség van egy hivatkozásra, arra a Facebook oldalra, amelyet kedvelni szeretnénk. A fenti példában a LIFT project oldalát használtuk.

Kiegészítések:

  • A fenti példák esetén nem szükséges bejelentkezzünk az oldalakra, több lehetőségünk van, ha regisztrált felhasználók vagyunk. Letölthetsz programkódokat, személyreszabott opciókkal egészíthetjük ki a kódot, statisztikákat és egyéb erőforrásokat érhetünk el az oldalakon.
  • Van lehetőség külső űrlapok használatára is. HTML űrlapokkal adatbázisokra és az adatokat feldolgozó programokra van szükségünk. Külső űrlapok használatának az az előnye, hogy az adatunk egy táblázatba kerül, amelyet egy fájlba letölthetünk és táblázatkezelő programmal feldolgozhatunk. Űrlapkészítéshez és beszúráshoz szükséges regisztrálni a külső weboldalra (pl. Google).
  • Beállíthatsz egy Egyéni Keresőmotort, ha egy kereső dobozt szeretnél hozzáadni a weboldaladhoz – az oldalon belüli kereséshez. Ehhez egy Google fiókra lesz szükséged illetve a weboldal címére is, azaz fel kell másolni egy webszerverre.
Feladatok
1. Nyissa meg a tips.html elemet, és adjon hozzá egy Google Mapp-et a lábléc felett (az utolsó bekezdés után a tartalom div). Adjon hozzá egy második szintű címet a szöveghez, "Where I live", majd keress London -t, és beágyazza a térképet.
Tekintsd meg az eredményt
2. Nyissa meg a toplangs.html és beágyaz egy videót a code.org YouTube csatornából. A videó az SVG mellett jelenik meg grafikusan tartalmazza:
  • A videó átméretezése, ha nem illik, megváltoztatva a szélesség attribútumok értékét;
Tekintsd meg az eredményt
3. Adjon hozzá egy hasonló gombot és egy második szintű címet a a projektünkhöz hasonlóan, a Code n 'Social a index.html , a galéria felett. A gomb megnyomásával a felhasználó szeretne a Coden Social Facebook oldalát ( https://www.facebook.com/Codensocial /). Az iframe-ben is módosítsa a magasságot 40-re.
Tekintsd meg az eredményt
Kérdőív
1. Milyen hátrányokkal jár, ha YouTube videót helyez el a weboldalán?
2. Melyik egy nem létező beágyazható Facebook ikon?
3. Melyik tulajdonság nem használható a <iframe> tag-gel?
4. Miért adjon hozzá egyéni keresőmotort a weboldalához?
Exclamation mark Ez az oldal sütiket használ. Ha folytatod böngészést, elfogadod azok használatát! Elfogadom