2015-16 HTML, CSS

Morabito Érdi SzC Eötvös József Szakképző Iskolája 2015-16

Tartalomjegyzék HTML elemek ............................................................................................................................................................................................ 3 Címkék jelölése ..................................................................................................................................................................................... 3 Páros és páratlan címkék ...................................................................................................................................................................... 3 Egy egyszerű weboldal készítésének lépései ............................................................................................................................................ 3 Böngésző független weblapok .............................................................................................................................................................. 3 Összetett webhelyek, webáruházak készítése ..................................................................................................................................... 4 Igényfelmérés ................................................................................................................................................................................... 4 Célok megfogalmazása ..................................................................................................................................................................... 4 Eszközök megnevezése (mire van szükség a célok eléréséhez) ....................................................................................................... 4 A fejlesztési folyamat megtervezése ................................................................................................................................................ 4 Költségterv ....................................................................................................................................................................................... 4 A webhely megtervezése ................................................................................................................................................................. 4 Dokumentálás .................................................................................................................................................................................. 4 Közzététel ......................................................................................................................................................................................... 4 Hirdetések, kereső optimalizálás ..................................................................................................................................................... 4 Webhelyek akadálymentesítése ............................................................................................................................................................... 4 Látássérültek igényeinek figyelembevétele.......................................................................................................................................... 4 Végtagsérültek igényeinek figyelembevétele ....................................................................................................................................... 4 Színvak személyek igényeinek figyelembevétele ................................................................................................................................. 5 HTML oldalak felépítése............................................................................................................................................................................ 5 HTML oldalak 3 fő része: ...................................................................................................................................................................... 5 Dokumentumtípus definíció célja ......................................................................................................................................................... 5 HTML5 dokumentumtípus definíció:................................................................................................................................................ 5 A dokumentumfej (head ) ......................................................................................................................................................................... 6 A fejléc elemei ...................................................................................................................................................................................... 6 Az oldal neve......................................................................................................................................................................................... 6 A meta címkék ...................................................................................................................................................................................... 7 A karakterkészlet megadása HTML5 szabvány szerint ......................................................................................................................... 7 Link elem .......................................................................................................................................................................................... 8 Külső stíluslap használata ..................................................................................................................................................................... 8 Külső stíluslapok beillesztése ................................................................................................................................................................ 8 Belső vagy beágyazott stílusok ............................................................................................................................................................. 9 Beágyazott stílusok jellemzői ............................................................................................................................................................. 10 Médiatípusok ................................................................................................................................................................................. 10 A szöveg tagolása .................................................................................................................................................................................... 11 Bekezdések, sortörések és megjegyzések ...................................................................................................................................... 11 Címsor (heading) ................................................................................................................................................................................ 11 Karakterformázás HTML elemekkel .................................................................................................................................................... 12 Valamennyi páros címke. ............................................................................................................................................................... 12 A szöveg változásának jelzése ........................................................................................................................................................ 12 A tartalom változásának jelzése (nem csupán szövegformázás) .................................................................................................... 12 Előformázás és szövegirány beállítása ................................................................................................................................................ 13 Idézetek, címek, szerzők jelolése ................................................................................................................................................... 13 Definíciók és rövidítések jelölésére használható HTML elemek .................................................................................................... 14 Számítógépes kódok megjelenítése ............................................................................................................................................... 14 Időpont megadása HTML dokumentumban: ................................................................................................................................. 15 Linkek (hivatkozások).......................................................................................................................................................................... 15 Linkeknél használható HTML attribútumok (HTML Attributes) .......................................................................................................... 15 Külső hivatkozások ............................................................................................................................................................................. 16 Belső hivatkozások ............................................................................................................................................................................. 16 E-mail link ........................................................................................................................................................................................... 16 Számozatlan lista (unordered list ) ..................................................................................................................................................... 17 Több szintű számozatlan lista ......................................................................................................................................................... 17 Számozott lista (ordered list ) ............................................................................................................................................................. 17 Számozott lista jellemzői ................................................................................................................................................................ 18 A sorszámok típusai:....................................................................................................................................................................... 18 Több szintű számozott lista ................................................................................................................................................................ 18 Meghatározáslista .............................................................................................................................................................................. 19 Egyszerű táblázat ................................................................................................................................................................................ 19 Sor és oszlop fejlécek ..................................................................................................................................................................... 20 Táblázat címének jelölése .............................................................................................................................................................. 20 Cellák összevonása ......................................................................................................................................................................... 21

Oszlopok, oszlopcsoportok............................................................................................................................................................. 21 Táblázat tagolása ............................................................................................................................................................................ 22 Állókép beillesztése ............................................................................................................................................................................ 23 Képek beillesztése HTML dokumentumba ..................................................................................................................................... 24 Képtérképek (image map) beillesztése HTML dokumentumba ..................................................................................................... 24 Dokumentumok beágyazása .............................................................................................................................................................. 24 Az <iframe> címke .............................................................................................................................................................................. 24 Beágyazott <iframe> dokumentum jellemzői ................................................................................................................................ 25 Biztonsági beállítások ......................................................................................................................................................................... 25 Beágyazott <iframe> dokumentum biztonsági beállításai ............................................................................................................. 25 Hang videó és animáció beillesztés .................................................................................................................................................... 25 YouTube videó beágyazása iframe segítségével ............................................................................................................................ 26 HTTPS .................................................................................................................................................................................................. 26 Beágyazás object elem segítségével .............................................................................................................................................. 26 Object és param elemek ................................................................................................................................................................ 26 Tárolóelem létrehozása .................................................................................................................................................................. 27 HTML5 - Video elem ........................................................................................................................................................................... 28 HTML5 video elemben használható MIME típusok ........................................................................................................................ 28 HTML5 - Audio elem ........................................................................................................................................................................... 29 HTML oldalak szerkezete ........................................................................................................................................................................ 30 DIV - Általános tárolóelem .................................................................................................................................................................. 31 Egyoszlopos elrendezés .................................................................................................................................................................. 31 Kétoszlopos HTML elrendezés........................................................................................................................................................ 32 HTML5 tartalomfüggő tárolóelemek .............................................................................................................................................. 32 Kétoszlopos HTML5 elrendezés ..................................................................................................................................................... 33 HTML5 Speciális tárolóelem ábrákhoz ........................................................................................................................................... 33 HTML5 címsor csoportok ............................................................................................................................................................... 34 HTML5 Speciális tárolóelem ........................................................................................................................................................... 35 Általános HTML jellemzők .................................................................................................................................................................. 35 Globális HTML attribútumok (HTML Global Attributes) ................................................................................................................. 35 HTML események ............................................................................................................................................................................... 36 Ablak-események (A Body elem eseményei.) ................................................................................................................................ 36 Úrlap-események (A Form elem eseményei.) ................................................................................................................................ 37 Média-események .......................................................................................................................................................................... 37 Billentyűzet-események ................................................................................................................................................................. 37 Egér-események ............................................................................................................................................................................. 37 CSS3 stíluslapok készítése ....................................................................................................................................................................... 38 CSS (Cascading Style Sheet) ................................................................................................................................................................ 38 Színkezelés .......................................................................................................................................................................................... 38 HTML színkódok.................................................................................................................................................................................. 38 HTML alapszínek............................................................................................................................................................................. 39 Web biztos színek ........................................................................................................................................................................... 39 Átlátszóság (fedettség) ................................................................................................................................................................... 40 CSS stílusdeklaráció ............................................................................................................................................................................ 41 A stílusdeklaráció felépítése:.......................................................................................................................................................... 41 CSS megjegyzések .......................................................................................................................................................................... 41

HTML HTML elemek Címkék jelölése A HTML oldal egyes elemeit címkékkel (tag-ekkel) jelöljük, amelyeket < és > között helyezünk el. < > között minden esetben megtalálható az adott címke neve: ( ). A definiált elemektől függően tulajdonságok is megadhatók: , Erőforrások kapcsolhatók az adott elemhez: A címkenevek, tulajdonságneve és néhány kivételtől eltekintve a tulajdonságok értékei sem tartalmazhatnak magyar ékezetes karaktereket, és nem kezdődhetnek számjeggyel!

Páros és páratlan címkék Egy-egy címke a definiált elemtől függően lehet páros vagy páratlan. Páratlan pl.
soremelést helyez el az oldalon. Páros pl. … megvastagított betűk … dőlt betűk Páros címkék esetén a záró címke neve elé egy / jel kerül pl. . A páros címkéket kötelező párban használni. A záró címke elhagyása a weboldal hibás megjelenítéséhez vezethet. A páros címkék egymásba ágyazása A páros címkék egymásba ágyazhatók Helyes: … vagy .. Helytelen: … Az egymásba ágyazás több szintű is lehet:

…

Egy egyszerű weboldal készítésének lépései 1. 2. 3.

A HTML dokumentum forráslistáját egy tetszőleges szövegszerkesztőben megírjuk. Az elkészített dokumentumot egyszerű szövegként .html kiterjesztéssel elmentjük. Kedvenc fájlkezelőkben a mentett fájl nevére vagy ikonjára kattintva az alapértelmezett böngészőnkben megnyitjuk.

Ez módszer jól használható a tananyag példakódjainak kipróbálására, módosítására, de összetettebb webhelyek készítését sose s HTML kód írásánál kezdjük. Fontos! Windows Operációs rendszer használata esetén a szövegszerkesztők rendszerint a iso-8859-2 kódkészlet, míg Linux Operációs rendszer alatt UTF 8 kódkészlet használatával mentik a dokumentumot. Ezt a karakterkészlet megadásánál figyelembe kell venni!

Böngésző független weblapok A következő böngészők támogatják: Minden webfejlesztő álma, hogy weblapjai valamennyi operációs rendszeren, valamennyi böngésző program valamennyi változatán, egyformán és úgy jelenjenek meg, ahogy azt ő megtervezte. Ezt a célt meg lehet közelíteni, de elérni sosem fogjuk. Már egy egyszerű vízszintes vonal

---

is másként jelenik meg a különböző böngészőkben. A stíluslapok használatánál, de különösen az aktív tartalmak megjelenítésénél még nagyobbak a különbségek. Az egyes böngésző programok működése kisebb, nagyobb mértékben eltér a www.w3.org webhelyen közzétett internetes szabványoktól. (Tananyagunk ezekre épül. Az ismert eltéréseket jelezzük.) A szabványban leírt funkciók, elemek és jellemzők egy részét nem minden böngésző ismeri. (A tananyagban a böngészőprogramok ikonjai jelzik. Azokat, amelyek adott elemet vagy jellemzőt képesek kezelni.) Ha a teljes böngészőfüggetlenség nem is érhető el mindenképpen érdemes arra törekedni, weboldalainkat minél több látogató legyen képes használni. Ennek érdekében az elkészült weboldalainkat a mindig ellenőrizzük le a legnagyobb böngészőkben. Ha működésében vagy megjelenítésében zavaró hibát találunk, akkor az próbáljuk orvosolni.

Összetett webhelyek, webáruházak készítése Az összetett webhelyek és webáruházak készítése nem a kód elkészítésével kezdődik, és a kód elkészültével közel sem ér véget. A következő lépéseket meg lehet ugyan spórolni, de nem érdemes. Igényfelmérés  Szükség van az adott oldalra? Célok megfogalmazása  Mit szeretnénk elérni?  Kiket szeretnénk elérni? Eszközök megnevezése (mire van szükség a célok eléréséhez)  A fejlesztéshez szükséges HW és SW.  Domain név?  Tárhely (PHP?; MySQL; emal?; aldomai-ok?)  Multimédia elemek (pl. webáruház esetén a termékek fotói) A fejlesztési folyamat megtervezése  A fejlesztéshez szükséges HW és SW kiválasztása (Mit? Miét? Mennyiért?)  Domain kiválasztása (Illeszkedjen a célokhoz!)  Tárhely szolgáltató, tárhely csomag kiválasztása. (Ár? Tartalom? Megbízhatóság?)  A multimédia elemek (Készítői?; Formátumok? Mennyiség? Költségek?)  HTML, PHP; MySQL, JavaScript kódok (Készítői? Tartalom? Mennyiség? Költségek?) Költségterv  A munka várható költségei. (Megéri? Belefér a keretbe?) A webhely megtervezése  Adatbázis megtervezése (MySQL adattáblák és kapcsolataik)  Weboldalak illetve azok kapcsolatainak megtervezése. (HTML, PHP; MySQL, JavaScript kódok, könyvtárszerkezet)  A multimédia elemek részletes megtervezése (Melyik oldalra mi kerül. Tartalom? Forma?)  Kódolás, multimédia elemek elkészítése  A multimédia elemek elkészítése  HTML, PHP; MySQL, JavaScript kódok elkészítése  Tesztelés, hibakeresés és javítás Webhelyek készítésénél különösen fontos, hogy a legnagyobb böngészőkkel ellenőrizzük megjelenítésüket és működésüket! Dokumentálás  Fejlesztői dokumentáció (Lehetővé teszi a későbbi javításokat, módosításokat a fejlesztés folytatását.)  Felhasználói dokumentáció (Súgó és/vagy használati útmutató). Közzététel  A webhely közzétételével a munka koránt sem ért véget.  Még senki nem tud róla. (Sem a felhasználók, sem a keresők.)  Maradhattak benne hibák, amiket később javítani kell. Hirdetések, kereső optimalizálás  Ha a webhely már működik, akkor erről tájékoztassuk a lehetséges felhasználókat! ( hirdetések, reklámok, újságcikkek, szóbeli tájékoztatók)  A webhely megszületéséről tájékoztassuk a keresőket is (Linkek elhelyezése az interneten, Keresők webmester eszközei).

Webhelyek akadálymentesítése Látássérültek igényeinek figyelembevétele Látássérült személyek használhatnak képernyő felolvasó programot, ezért képek, animációk vagy videók használata esetén ne felejtsünk el helyettesítő szöveget megadni! A helyettesítő szöveget nem csak a felolvasó programok használják, hanem a böngészők is ezeket jelenítik meg, ha egy multimédia elemet nem sikerül betölteni.

Végtagsérültek igényeinek figyelembevétele Végtagsérült személyek lehet, hogy nem képesek egeret használni, ezért honlapunk minden részét elérhetővé kell tenni számukra csak billentyűzettel is.

Színvak személyek igényeinek figyelembevétele Színtévesztő, színvak személyek számára nem jelent plusz információt a figyelmeztető színek használata. A honlap kiemelt elemeit ezért a színeken túl egyéb módon is különböztessük meg a többitől. (pl. linkek aláhúzása, nyilacskák és/vagy megfelelő pozicionálás)

HTML oldalak felépítése Minden weboldal 3 fő részből áll.

HTML oldalak 3 fő része:   

a dokumentumtípus meghatározása, a dokumentum feje, a dokumentum törzse.

A következő 3 címke valamennyi HTML5 weboldalon megtalálható:

Név

Angol eredete

Hatás



Document type Dokumentumtípus páratlan címke. .



HTML*

A dokumentum tartalma nyitó- és záró html címke (tag) közé kerül.



Head

A dokumentumfej páros címkéje.



Body

A dokumentumtörzs páros címkéje.

*HTML = HyperText Markup Language Forráskód fej (meta-adatok...) törzs (Megjelenítendő tartalom)

Dokumentumtípus definíció célja A dokumentumtípus definíció mondja meg a böngészőnek, hogy a HTML-nek melyik verzióját fogjuk használni. Ez biztosítja számunkra, hogy a különböző gyártmányú és verziójú böngészőkben a weblapunk látványa minél inkább hasonló legyen. A dokumentumtípus definíciót mindig a HTML oldal legelején kell megadni. HTML5 dokumentumtípus definíció:

Néhány korábbi HTML verzió dokumentumtípus definíciója: HTML 4.01 Strict HTML 4.01 Transitional HTML 4.01 Frameset XHTML 1.0 Strict XHTML 1.0 Transitional

"-//W3C//DTD

XHTML

1.0

Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-

XHTML 1.0 Frameset

A dokumentumfej (head ) A fej (angolul: head ) A fej a weboldalra vonatkozó információk megadását teszi lehetővé. Ezek nem lesznek megjelenítve, de befolyásolják a tartalom megjelenítését. Lehetőség van itt külső erőforrások illesztésére (pl. CSS, Java, JavaScript, ikon …), a böngésző vagy a keresők számára szükséges információk megadására. A fejlécet a és a címkék közzé kell elhelyezni. Név

Angol eredete Hatás



Head

A dokumentumfej páros címkéje.

Forráskód meta-adatok, külső erőforrások... a megjelenítendő tartalom (szöveg, multimédia...)

A fejléc elemei A HTML weboldal fejlécében (head) használható elemek (tag-ek)

Név

Angol eredete

Hatás



Head

A HTML dokumentum feje páros címke. .

címkék közé írt szöveg jelenik meg a böngészők címsorában, a weoldalhoz tartozó fülén és a keresők találati listáján. A felhasználó a böngészőkben a kedvencek vagy a könyvjelzők közé felvett oldalak közül is nevük alapján válogathat. Legyen rövid, és utaljon az oldal tartalmára.

Név

Angol eredete Hatás

Ennek az oldalnak már neve is van, de az ékezetekkel még baj lehet.



A meta címkék A meta adatok nem jelennek meg az oldalon. A böngészők és a keresők számára nyújtanak plusz információt. A meta elem :

Név

Angol eredete

Hatás

<meta>

Meta

A böngészők és a keresők számára nyújtanak plusz információt. Páratlan címke.

A meta elem jellemzői: Név

Érték

Leírás

name

application-name; author; Megadja a metaadatok nevét. description; generator; keywords

content

szöveg

http-equiv

content-type; refresh

Meghatározza a http-equiv vagy a name jellemzőhőz társított értéket default-style; Segítségével a tartalomra és annak feldolgozására vonatkozó plussz infókat adhatunka böngészőnek. (karakterkódolás, alapértelmezett stíluslap, frissítés gyakorisága)

Kiemelkedő jelentősége van a leírásnak (description), amelyben az oldal tartalmának rövid, egy-két mondatos összefoglalását adhatjuk meg. A keresőknek segít, annak eldöntésében, hogy miről szól weboldalunk, mely kifejezésekre történő keresés esetén érdemes megjeleníteni. Sok esetben az itt megadott szöveget jelenítik meg a keresési találatok között az oldal neve, és URL-je alatt. Az már kevésbé biztos, hogy az általunk megadott keresőszavakat (keywords) figyelembe veszik a keresők. Ugyanakkor, ha sikerül azt az 5-10 szót, illetve kifejezést megadnunk, amelyekre keresve a szeretnénk a találati listák élére kerülni, az már fél siker. Nagyon fontos, hogy a weboldal neve (title), leírása (description) és keresőszavai (keywords) összhangban legyenek a tartalommal. A keresők sokszor büntetik a webmesterek átverési kisérleteit. (Amikor egy oda nem illő keresőszóra próbálják elhitetni a keresővel, hogy oldalukat adott szóra érdemes megjeleníteni a találatok között. ) Már domain nevének kiválasztásánál érdemes arra odafigyelni, hogy a választott név illeszkedjen a webhely tartalmához.

Forráskód Leírás: <meta name="description" content="Megismerkedünk a meta címkékkel">

Kulcsszavak: <meta name="keywords" content="keywords, description, author">

Szerző: <meta name="author" content="Példa Pál">

Frissítés (minden 30 másodpercben) <meta http-equiv="refresh" content="30">

A karakterkészlet megadása HTML5 szabvány szerint A karakterkészlet megadása meta címkével történik a következő módon: Forráskód <meta charset="UTF-8">

vagy <meta charset="iso-8859-2"> A példakód külön ablakban tekinthető meg: html5_charset.html A karakterkészlet megadásának elmulasztása hibás megjelenítéshez vezet(het). Magyar nyelvű weblapoknál az UTF-8 vagy az ISO 8859-2 karakterkódolást használhatjuk.

Interaktív weboldalak esetén szinkronban kell, hogy legyenek a szerkesztőprogram, az adatbázis kezelő és a böngésző karakterkódolási beállításai.

A karakterkészlet megadásának biztonságos módja Forráskód <meta http-equiv="content-type" content="text/html; charset=UTF-8">

vagy <meta http-equiv="content-type" content="text/html; charset=iso-8859-2">

Ha azt szeretnénk, hogy ékezetes karaktereinket minden böngésző helyesen jelenítse meg, akkor ezt a formát célszerű használni. Link elem A címke kapcsolatot teremt a weboldal és egy külső erőforrás (pl. stíluslap, ikon.. ) között. ( link magyarul: kapocs ) A link elem:

Név

Angol eredete

Hatás



Link

Kapcsolatot teremt a weboldal és egy külső erőforrás (pl. stíluslap, ikon.. ) között. Páratlan címke.

A link elem jellemzői: Név

Érték

Leírás

href

URL

Az erőforrás helye (URL-je)

hreflang

nyelvkód

Megadja az erőforrás nyelvét. (Magyar = hu)

media

screen; tty; tv; projection; handheld; Megadja a megjelenítő eszköz típusát. Például print; braille; aural; all; megadhatjuk, hogy egy stíluslapot a képernyőn történő megjelenítésénél vagy nyomtatásnál használjon a böngésző.

rel

alternate; archives; author; first; help; Weboldalunk és az erőforrás közötti kapcsolatot icon; index; last; license; next; pingback; adja meg. ( relation magyarul: viszony ) prefetch; prev; search; stylesheet; sidebar; tag; up;

sizes

magasság x szélesség

type

MIME típus Az erőforrás MIME típusa. pl. text/css; text/javascript; image/gif

Az erőforrás méretének meghatározása ikonok esetén. (pl. 16x16)

Forráskód <meta charset="UTF-8"> Már ikonunk is van! Mérete: 16*16 px

Külső stíluslap használata Külső stíluslapok beillesztése A stíluslapok használatával szétválik a tartalom és a forma.

A weboldalak tartalmi elemeit a HTML kód, míg a tartalom megjelenítésére vonatkozó stílusdeklarációkat a CSS kód tartalmazza egyegy külön szöveges állományban. A HTML kódot tartalmazó fájl kiterjesztése .html, a CSS kódot tárolóé .css. Különösen összetett webhelyek esetén hasznos a külső stíluslapok használata. Ekkor ugyanis csupán egyszer kell beállítanunk a webhely oldalain található HTML elemek stílusjellemzőit. Az elkészült CSS fájlt (stíluslapot) használva valamennyi weboldalon könnyen biztosítható az egységes megjelenés. Ha egy stíluselemet kívánunk később módosítani a webhely valamennyi oldalán (mai lehet több száz vagy több ezer is.) elegendő egy helyen elvégezni a változtatást.

HTML kód <meta charset="UTF-8"> Külső CSS stíluslapot használunk.

CSS kód body { font-size: 34px; text-align: center; }

Belső vagy beágyazott stílusok Név

Angol eredete

Hatás

<style>

Style

A HTML dokumentumon belüli stílusdefiníciók megadását teszi lehetővé. Páros címke.

A külső stíluslap beállításait módosíthatjuk a beágyazott stílusdefinícióval, az aktuális weboldal egyedi jellemzőinek megfelelően. Egyszerűbb weboldal esetén (pl. egy oldalas webhely) a külső stíluslapot akár el is hagyhatjuk. Összetett webhely fejlesztésekor beágyazott stílusdeklarációkkal alakítható ki a főbb oldalak megjelenése. Ekkor csak egy-egy fájlt kell megfelelően elkészíteni. Ezt követően a stílusdeklarációk külső stíluslapokba helyezhetők át. Egy HTML oldalon több < style> elem is elhelyezhető.

HTML kód ... <style> body { background-color:#d0e4fe; } A külső stíluslap beállításait módosítjuk.

CSS kód body { font-size: 34px; text-align: center; }

Beágyazott stílusok jellemzői Név

Érték

Leírás

media

screen; tty; tv; A weboldal megjelenítésére haszált eszköz típusa. Külön stíluslap készíthatő a projection; különböző eszközökhöz. (nyomtató, képerny...) handheld, print; braille; aural; all

type

text/css

A tartalom típusa.

scoped

scoped

Felhasználásával a dokumentumtörzsben is megadható stílusdeklaráció, ami a megadás helyén található elemre, és az abba közvetlenűl beágyazott elemekre vonatkozik csupán.

Médiatípusok

Név

Eszköz

all

Valamennyi eszköz

screen

Képernyő

tv

Televízió

handheld

Kézi eszközök (kis képernyős, korlátozott sávszélesség)

print

Nyomtató (nyomtatás előnézete)

projection

Projektor

tty

Karakteres kiviteli eszköz, fix szélességű karakterekkel

aural

Beszéd szintetizátor

braille

Braille média

Példa: A példában a nyomtatóra megadott stílusdefiníció, a képernyőn történő megjelenítést nem befolyásolja. HTML kód ….. <style type="text/css" media="print"> body { background-color:blue; } <style type="text/css" media="screen"> body { color:red; } A külső stíluslap beállításait módosítjuk.

CSS kód body { font-size: 34px; text-align: center; }

A szöveg tagolása Bekezdések, sortörések és megjegyzések

Név

Angol eredete

Hatás

paragraph

Bekezdések létrehozására használható páros címke.




break

A sortörés páratlan címkéje.

<wbr>

word break

Hosszú szavakba lehetővé teszi a sortörést. (Ha a szó nem fér ki egy sorban.)

---

horizontal rule

Vízszintes vonal páratlan címkéje. A vonal egy új sorba kerül, és utána is új sor következik.



-

A megjegyzés páros címkéje. A weboldalon nem jelenik meg a tartalma. A webfejlesztők emlékeztetőit tárolja.

A bekezdéseket a böngészők blokkszintű elemként kezelik. Új sorban kezdődnek és az utánuk szintén soremelés következik. Az utánuk következő elem így szintén új sorba kerül. A sortörést követő elem már új sorba kerül. A sortörés használható egy bekezdésen belül is. A megjegyzések (emlékeztetők) használata hasznos, összetett webhely és/vagy hosszú forráskód készítésénél. A jól megírt emlékeztetők megkönnyítik a webhely későbbi továbbfejlesztését, vagy az eseteleges hibák feltárását

Forráskód

Ez az első bekezdés szövege: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede.

Ez az második bekezdés szövege két sortöréssel: szöveg
szöveg szöveg szöveg szöveg szöveg szöveg szöveg
szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg

---

Ez az harmadik bekezdés előtte vonal

Címsor (heading) A

-től

-ig terjedő címsor hierarchia lehetővé teszi a tartalom strukturált közreadását. (Nyomtatott könyvek tartalomjegyzékében jól követhető, ha strukturált a felépítésük.) Sose használjuk csupán bekezdésformázásra! A legfelső szinten a

áll. A legkevésbé fontos a

. Név

Angol eredete Hatás

...

Heading

Címsorok páros címkéi.

Forráskód <meta charset="UTF-8">

Címsor

Címsor

Címsor

Címsor

1.

2. 3. 4.

Címsor 5.

Címsor 6.

Karakterformázás HTML elemekkel Egy-egy karakter, szórészlet vagy szövegrész formázására alkalmas elemek. Valamennyi páros címke.

Név

Angol eredete Hatás



Bold

Félkövér karakterek.



Italian

Dőlt karakterek.

<em>

Emphasized

Kiemelt karakterek.

<strong>

Strong

Erős kiemelés.

<small>

Small

Kis méretű karakterek.

<sup>

Superscript

Felső index.

<sub>

Subscript

Alsó index.

<s>

Strikeout

Nem érvényes áthúzott szöveg.



Underlined

Aláhúzott karakterek.

<mark>

Mark

Kiemelés.

<span>

Span

Stíluslap segítségével formázható szövegrész kijelölése.

Forráskód <meta charset="UTF-8"> <style type="text/css" > #piros { color:#990000; } Félkövér
Dőlt
<em>Kiemelt
<strong>Erős kiemelés
<small>Kis méretű szöveg
Felső index – 2<sup>n
Alsó index – U<sub>be
<s>Nem érvényes áthúzott szöveg
Aláhúzott szöveg
<mark>Szövegrész kiemelése
<span id="piros" >Stíluslap segítségével formázott
A szöveg változásának jelzése A tartalom változásának jelzése (nem csupán szövegformázás) A weboldal tartalmának változására a törölt és a helyébe beszúrt szöveg együttes megjelenítésével hívhatjuk fel a figyelmet. Az új szöveg aláhúzott a régi pedig áthúzott formában jelenik meg.

Név

Angol eredete Hatás

<del>

Delete

Törölt szöveg.



Insert

Beszúrt szöveg.

Forráskód <meta charset="UTF-8"> <del>Ez a szöveg változott erre a szövegre.

Előformázás és szövegirány beállítása Egy vagy több sor, bekezdés formázására alkalmas elemek. Valamennyi páros címke. Név

Angol eredete

Hatás

<pre>

Preformatted

Előformázott szöveg. Állandó szélességű tarakterekkel, a szőközök és soremelések megtartásával jeleníti meg a tartalmat. (Lásd. mintakódok.)



Bidirectional order

A szöveg olvasási irányánek beállítása. A szövegirányt az elem dir jellemzője adja meg rtl esetén jobbról balra ltresetén ablról jobbra.

Forráskód <pre> Az előformázott valamennyi soremelés

és

szövegben szóköz

megjelenik. A szöveg olvasási iránya 1. A szöveg olvasási iránya 2. Idézetek, címek, szerzők jelolése

Idézetek jelölésére használható HTML elemek Valamennyi páros címke. Név

Angol eredete

Hatás



Quotation

Rövid sorközi idézet. A CITE attribútum használható a forrás megnevezéséhez

Block quote

Idézetblokk. (hosszabb idézet)

Address

A dokumentum vagy adott szakasz szerzőjének elérhetősége név, e-mail cím, postai cím, telefon, honlap...



Citation

Könyv, kiadvány, cikk címe

Forráskód

Idézetek, címek, szerzők

Petőfi Sándor

PATÓ PÁL ÚR

Mint elátkozott királyfi
Túl az Óperencián,
Él magában falujában
Pató Pál úr mogorván.
Be más lenne itt az élet,
Ha egy ifjú feleség...


Közbevágott Pató Pál úr:
"Ej, ráérünk arra még!„

….. Definíciók és rövidítések jelölésére használható HTML elemek

Valamennyi páros címke. Név

Angol eredete Hatás



Abbreviation

Rövidítés, mozaikszó.



Definition

Meghatározás, definió.

Minden kifejezésre csak egyszer definiáljunk az oldalon belül! Az címke title jellemzőjének értéke buborékszövegként megjelenik. Többszavas szöveg esetén nem törhető szóközöket ( ) használva a teljes szöveg megjelenik, míg sima szóközök esetén csak az első szó. Forráskód ….

Rövidítések

AFSZ
CPU

Meghatározás

Definíció: általában egy fogalom jelentésének meghatározása.
….. Számítógépes kódok megjelenítése

Számítógépes kódok megjelenítésére használható HTML elemek Valamennyi páros címke. Név

Angol eredete

Hatás



Code

Számítógépes kódok vagy programozási nyelvek kódjainak megjelenítésére szolgál.



Variable

Változók jelölésére használhatjuk szöveges környezetben. Lehet matematikai változó vagy programkódban található változó.

<samp>

Sample

Számítógépes program kimenetének jelölésére használhatjuk.



Keyboard

Felhasználó által bevitt információt jelöl. A bemenet tipikusan billentyűzet, de nem csak az lehet. (például hangparancsok)

Forráskód ….

Billentyű kombináció

CTR+C = CTR+C

Változó

Az a változó értéke… = Az a változó értéke…

Programkód

for i:=1 to 20 writeln(i);

Egy program által megjelenített üzenet

<samp> ….loaded, skipping …. …..

Időpont megadása HTML dokumentumban:

Név

Angol eredete

Hatás



Time

Felhasználható dátumok és időpontok, a keresők és a felhasználó naptárak számára olvasható módon történő kódolására. Páros címke.

Hasznos a közzététel időpontjának, születésnapi emlékeztetők vagy ütemezett események dátumának, idejének megadásánál. Egyetlen jellemzője a datetime, amely a dátum és idő szabványos módon történő megadását teszi lehetővé. A képernyőn ez jelenik meg. TZD = Time Zone Designator = időzóna / GMT (Greenwich Mean Time) + 1

Forráskód ….

A time elem használata

1. pl:

2013. március 15.

2. pl:

Kezdés 14 órakor

3. pl:

2013. március 15 20:00

Linkek (hivatkozások) A linkek kötik össze a weblapokat, és lehetőséget teremtenek egy hosszabb oldalon található fejezetek gyors elérésére is. Egy linkre kattintva a látogatók href jellemzőnél megadott weboldalt érhetik el.

Név

Angol eredete

Hatás



Link, hivatkozás A számozatlan lista páros címkéje.

A webhelyek menüi rendszerint belső hivatkozásokat tartalmaznak. Segítségükkel a webhelyhez tartozó weboldalakat érhetjük el. Külső hivatkozások segítségével weboldalunkról elérhetővé tehetünk más webhelyeket is. A href jellemzőnél kel megadni annak az weboldalnak a címét (URL) ahová a link mutat. Ha a látogató a linkre kattint, akkor a böngésző program ezt a weboldalt fogja betölteni. A böngésző a nyitó és a záró címke között lévő tartalmat (lehet szöveg, vagy kép) fogja megjeleníteni.

Példa: Az http://informatika.gtportal.eu oldalra mutató link: Informatika tananyag Forráskód Informatika tananyag

Linkeknél használható HTML attribútumok (HTML Attributes) Név

Érték

Leírás

href

URL

Megadja a hivatkozás (ugrás) célpontját.

hreflang

Nyelv kód

Megadja a céloldal nyelvét. (pl. hu)

rel

alternate | author | bookmark | help | license | next | nofollow | noreferrer | prefetch | prev | search | tag

Megadja a forrás és a céloldal kapcsolatát.

target

_blank | _self | _parent | Megadja, hogy hol jelenjen meg a céloldal rartalma. _top | framename

A target jellemzővel meghatározhatjuk a weboldal megjelenítésének helyét/módját. Értéke lehet:    

_blank: új ablak vagy fül. _parent: a szülő-dokumentumban nyílik meg a cél-URL. _self: az eredeti ablak. (Alapértelmezett) _top: a cél-URL az ablak tetején nyílik meg

Forráskód Informatika tananyag (_blank) Informatika tananyag (_parent) Informatika tananyag (_self) Informatika tananyag (_top)

Külső hivatkozások Külső hivatkozás a www.xydomain.hu címre index.html vagy index.php Ekkor az index.html vagy az index.php oldalakat érjük el.

Külső hivatkozás a www.xydomain.hu címen található html2.html oldalra html2.html Ekkor az html2.html oldalt érjük el.

Külső hivatkozás a www.xydomain.hu címen található html2.html oldal meghatározott pontjára Egy távoli weboldalkonkrét részére ugrik Ekkor az html2.html oldal horgonnyal kijelölt részét érjük el. A céloldal URL-je végén, # jellel elválasztva megadjuk a horgonynak használt linkelem nevét.

Horgony html2.html weboldalon: Ugorj ide Ekkor az index.html vagy az index.php oldalakat érjük el.

Belső hivatkozások Belső hivatkozás az aktuális oldalunk könyvtárban lévő másik oldalra: html2.html

Belső hivatkozás az aktuális oldalunk könyvtárából nyíló alkönyvtárban lévő másik oldalra: html2.html

Belső hivatkozás az aktuális oldalunkkal a könyvtárstruktúrában azonos szinten, de másik könyvtárban lévő oldalra: html2.html A két pont (../) segítségével ekkor a könyvtárstruktúrában egy szinttel feljebb lépünk.

Belső hivatkozás megadása a web szerver gyökér könyvtárából kiindulva: html2.html A / segítségével ekkor a könyvtárstruktúrában a gyökérkönyvtárhoz jutunk.

E-mail link Ha a felhasználó rákattint a következő linkre, akkor az alapértelmezett levelezőprogram nyílik meg, és a címzett automatikusan a href jellemzőnél megadott e-mail cím lesz. Kapcsolat

Számozatlan lista (unordered list ) A lista elemei rendezett formában, de sorszámok nélkül kerülnek megjelenítésre.

Név

Angol eredete Hatás

Unordered list A számozatlan lista páros címkéje.


• 
  
  List item
  
  A listaelemek páros címkéje.
  
  Számozatlan listák stíluslap segítségével formázhatók. A felsorolásjelek képekre cserélhetők. Forráskód <meta charset="UTF-8">

  Számozatlan lista

  • Elem
  • Elem
  • Elem
  Több szintű számozatlan lista Jól használható több szintű tartalomjegyzékek készítéséhez. A belső lista mindig a külső lista egy listaelemében helyezkedik el. . <meta charset="UTF-8">

  Egymásba ágyazott számozatlan listák

  • Külső elem
    • Belső
    • Belső
    • Belső
  • Külső elem
    • Belső
    • Belső
    • Belső
  
  
  elem
elem elem

elem elem elem



Számozott lista (ordered list ) A lista elemei rendezett formában, sorszámokkal kerülnek megjelenítésre.

Név

Angol eredete Hatás




Ordered list

A számozott lista páros címkéje.


1. 
   
   List item
   
   A listaelemek páros címkéje.
   
   A számozott listák stíluslap segítségével formázhatók.
   
   <meta charset="UTF-8">

   Számozott lista

   1. Elem
   2. Elem
   3. Elem
   Számozott lista jellemzői
   
   Név
   
   Érték
   
   Leírás
   
   start
   
   szám
   
   A kezdő sorszám beállítása.
   
   type
   
   1 | a | A | i | I A sorszámok típusának beállítása.
   
   reversed
   
   reversed
   
   A csökkenő sorrend beállítása.
   
   A sorszámok típusai:
   
   type
   
   Minta
   
   Leírás
   
   1
   
   1, 2, 3, 4...
   
   Arab számok (ez az alapértelmezett)
   
   a
   
   a, b, c, d...
   
   Az abc kisbetűi
   
   A
   
   A, B, C, D.... Az abc nagybetűi.
   
   i
   
   i, ii, iii, iv...
   
   I
   
   I, II, III, IV.... Római számok nagybetűkkel.
   
   Római számok kisbetűkkel
   
   <meta charset="UTF-8">

   Csökkenő ABC

   1. Elem
   2. Elem
   3. Elem

   9-től csökkenő

   9. Elem
   10. Elem
   11. Elem

   Római számok

   1. Elem
   2. Elem
   3. Elem
   
   
   Több szintű számozott lista Jól használható több szintű tartalomjegyzékek készítéséhez. A belső lista mindig a külső lista egy listaelemében helyezkedik el.
   
   <meta charset="UTF-8">

   Egymásba ágyazott számozott listák

   1. Külső elem
      1. Belső elem
      2. Belső elem
      3. Belső elem
   2. Külső elem
      1. Belső elem
      2. Belső elem
      3. Belső elem
   
   
   Meghatározáslista Számozatlan lista (unordered list ) A lista elemei rendezett formában, de sorszámok nélkül kerülnek megjelenítésre.
   
   Név
   
   Angol eredete
   
   Hatás
   
   

   
   
   Definition list
   
   Szavakat, fogalmakat, kifejezéseket és azok meghatározását társítja egymáshoz.Páros címke.
   
   

   
   
   Definition term
   
   Definíciós kifejezés páros tartalmazza.
   
   

   
   
   Definiton description
   
   A meghatározást, a definíciót tartalmazza. Páros címke.
   
   címkéje. A
   
   meghatározandó
   
   kifejezést
   
   Számozatlan listák stíluslap segítségével formázhatók. A felsorolásjelek képekre cserélhetők. <meta charset="UTF-8">

   Meghatározás lista

   Címsor

   Az aktív dokumentum címét mutatja.

   Menüsor

   Az aktív dokumentumban használható parancsok csoportjai.

   
   
   Egyszerű táblázat Táblázat (table) A HTML táblázat tartalmaz oszlopokat, sorokat és persze adatokat. Tartalmazhat fejlécet, láblécet és megadhatjuk címét is. 1. 2. 3. 4. 5.
   
   A HTML táblázat egy sora azonos magasságú cellákat tartalmaz. A HTML táblázat minden sora azonos számú cellát tartalmaz. A HTML táblázat egy oszlopa azonos szélességű cellákat tartalmaz. A HTML táblázat minden oszlopa azonos számú cellát tartalmaz. Egy HTML táblázat során ill. egy oszlopán belül a cellák száma, a cellák egyesítésével csökkenthető.
   
   A következő 3 címke valamennyi HTML táblázatnál megtalálható:
   
   Név
   
   Angol eredete Hatás
   
   
   
   table
   
   Táblázat páros címke. .
   
   
   
   table row
   
   Táblázat egy sora páros címke.
   
   oszlop oszlop oszlop
   
   oszlop oszlop oszlop oszlop
   
   Sor és oszlop fejlécek A sorok és oszlopok fejléceit egyenként a páros címkével adhatjuk meg. Ezek stílusát külön beállíthatjuk.
   
   Név
   
   Angol eredete
   
   Hatás
   
   
   
   Coloumn group
   
   Páros címke. Segítségével a tábálzat több oszlopának stílusa egy lépésben beállítható.
   
   
   
   Coloumn
   
   Páratlan címke. Segítségével a tábálzat egy oszlopának stílusa egy lépésben beállítható.
   
   A és elemek speciális jellemzői:
   
   Név
   
   Érték Leírás
   
   span
   
   szám Megadja az egyesített oszlopok számát.
   
   A span jellemző pozitív egész szám, amely megadja az átfogott oszlopok számát.

   páros címkék között adjuk meg.

   Név

   Angol eredete Hatás

   Caption

   A

   páros címke segítségével a tábálzatnak címet adhatunk.

   A táblázat címe

   Árjegyzék

   Termékkód Megnevezése Ár XU1587 Irodai PC 2 107.500 Ft XU1583c Irodai PC 6 123.300 Ft

   Cellák összevonása

   Egymás melletti cellák összevonása Annak érdekében, hogy táblázatunk áttekinthető legyen: -

   Összevonhatunk két vagy több egy sorban egymás mellett elhelyezkedő cellát. Összevonhatunk két vagy több egy oszlopban egymás mellett (alatt, felett) elhelyezkedő cellát.

   A

   table data A táblázat cellájában lévő adat páros címke. Egyszerű táblázat 1. sor és 1. 1. sor és 2. 2. sor és 1. 2. sor és 2. kerettel Egyszerű táblázat 1. sor és 1. 1. sor és 2. 2. sor és 1. 2. sor és 2. .... keret nélkül oszlop	.......	table header A	páros címke helyett ezt használjuk a fejlcéhez tartozó adatok (cellák) jelölésénél. Sor és oszlop fejlécek 1. sor-oszlop fejléc 2. oszlop fejléc 3. oszlop fejléc 2. sor fejléc adat adat 3. sor fejléc adat adat Táblázat címének jelölése A táblázat címét nem ... , hanem
   és	elemek összevonásra szolgáló jellemzői: Név Érték Leírás rowspan rowspan Értéke megadja, hogy adott cella hány sor magas lesz. (cellák egyesítése függőlegesen - sorátfogás) colspan colspan Értéke megadja, hogy adott cella hány oszlop széles lesz (cellák egyesítése vízszintesen - oszlopátfogás) Oszlopátfogás A táblázat címe 1. sor két összevont cellája 2. sor és 1. oszlop 2. sor és 2. oszlop Sorátfogás A táblázat címe 1. oszlop két összevont cellája 1. sor és 2. oszlop 2. sor és 2. oszlop Oszlopok, oszlopcsoportok A táblázat egy vagy több oszlopa, ill. azokból képzett oszlopcsoportok definiálható, melyeket együtt kezelhetünk (pl. közös stílus). Név Angol eredete Hatás

   Osztályzatok 2013.

   	szeptember	október	november	átlag
   matek	4	5	3	4,00
   fizika	4	3	2	3,00

   Táblázat tagolása A nagyméretű táblázatokat célszerű 3 részre tagolni. Így nyomtatásnál minden oldalon olvasható lesz a táblázat fejléce és lábléce is. A táblázat részei: 1. 2. 3.
   
   fejléc, törzs, lábléc.
   
   A HTML táblázatok tagolását a következő páros címkékkel valósíthatjuk meg:
   
   Név
   
   Angol eredete
   
   Hatás
   
   
   
   table header
   
   A táblázat fejléce páros címke. Egy táblázaton belül csak egy-egy lehet, de több sort is átfoghat. Nyomtatásnál minden oldalon megjelenik.
   
   
   
   table body
   
   A táblázat törzsének páros címkéje. Egy táblázaton belül több lehet, és rendszerint több sort is átfog.
   
   
   
   table footer
   
   A táblázat lábléce páros címke. Egy táblázaton belül csak egy-egy lehet, de több sort is átfoghat. Nyomtatásnál minden oldalon megjelenik.
   
   A lábléc tartalmazhat egyszerű szöveget, vagy lehet egy táblázatsor.

   Táblázat tagolása

   
   
   

   Osztályzatok 2013.

   	szeptember	október	november
   matek	4	5	3
   fizika	4	4	5
   Csak tájékoztató jellegű adatok

   
   
   Állókép beillesztése Képek beillesztése HTML dokumentumba Név
   
   Angol eredete Hatás
   
   
   
   Image
   
   Állókép elhelyezése a weboldalon páratlan címke.
   
   Kötelező jellemzője a src (source), ami megadja a kép forrásának URL-jét. Használható képformátumok: JPEG, GIF, PNG A kép Inline elem: a sorban előtte állót követi, a sor mögötte tovább folytatódik. Blokkszintű elemmé a stíluslap segítségével tehető. Az alt jellemzővel kell megadni a képet helyettesítő szöveget, ami akkor jelenik meg, ha a kép nem elérhető. A látássérült emberek által használt felolvasó szoftverek az alt attribútum szövegét olvassák fel, így használata az oldal akadálymentesítéséhez is elengedhetetlen. A kép Inline elem: a sorban előtte állót követi, a sor mögötte tovább folytatódik. Blokkszintű elemmé a stíluslap segítségével tehető.
   
   Érdemes megadni a kép méretét. Hibás méretmegadásnál azonban a böngésző a képümket torzíthatja.
   
   Képek beillesztése HTML dokumentumba
   
   Név
   
   Érték
   
   Leírás
   
   src
   
   URL
   
   Meghatározza a kép forrásának URL-jét. (Név és útvonal.)
   
   alt
   
   szöveg
   
   A képet helyettesítő szöveg, ami akkor jelenik meg, ha a kép nem elérhető.
   
   width
   
   szám
   
   Meghatározza a kép szélességét a weboldalon.
   
   height
   
   szám
   
   Meghatározza a kép magasságát a weboldalon.
   
   usemap
   
   usemap neve Képtérképet illeszt az állóképhez.
   
   Kötelező jellemzője a src (source), ami megadja a kép forrásának URL-jét. Az alt jellemzővel kell megadni a képet helyettesítő szöveget, ami akkor jelenik meg, ha a kép nem elérhető. A látássérült emberek által használt felolvasó szoftverek az alt attribútum szövegét olvassák fel, így használata az oldal akadálymentesítéséhez is elengedhetetlen. Érdemes megadni a kép méretét. Széllességét a width, a magasságát a height jellemzővel. Ekkor ugyanis a böngészők a kép letöltése előtt is tudják folytatni az oldal megjelenítését, és nem ugrál az oldal egy-egy kép letöltésének befejezésekor. Fontos, hogy a valós méretet adjuk meg! Hibás méretnél a böngésző torzíthatja (nagyításnál, egy irányú nyújtásnál) a képet, és a számolgatás miatt lassul a megjelenítés. A title általános jellemző segítségével plusz információt adhatunk a képhez, amelyet a felhasználó akkor lát, ha az egérkurzort a kép fölé mozgatja. Ez a funkció hasznos lehet képes nyomógombok esetében is. Képtérképek (image map) beillesztése HTML dokumentumba
   
   Név
   
   Angol eredete
   
   Hatás
   
   <map>
   
   Map
   
   Képtérkép definíció. Páros címke.
   
   <area>
   
   Area
   
   Terület meghatározása és hozzárendelése. Páratlan címke.
   
   a
   
   adott
   
   területhez
   
   hivatkozás
   
   A <map> címke használata esetén kötelező a name jellemző megadása. Ennek segítségével kapcsolhatjuk a képtérképet egy állóképhez. Az <area> címke shape jellemzője megadja a terület alakját. Az alak lehet "rect" (téglalap), "circle" (kör) vagy "poly" (általános sokszög) Az <area> címke coords jellemzője megadja a geometriai alakzat koordinátáit:   
   
   rect: balfelsősarok-x, balfelsősarok-y, jobbalsósarok-x, jobbalsósarok-y circle: középont-x, középpont-y, sugár poly: x1,y1, x2,y2, ... xn,yn
   
   

   Kattintson a kiválasztott alkatrészre:

   <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">
   
   Dokumentumok beágyazása HTML oldalunkba beágyazott keret segítségével egy másik dokumentum (pl. weblap, szöveges dokumentum vagy akár multimédia ) tartalmát illeszthetjük be. Megjegyzés: akár egyszerű szöveget (txt) is beilleszthetünk. A beágyazott dokumentumot le lehet cserélni anélkül, hogy az anyaoldalt újra be kellene tölteni
   
   Az <iframe> címke Név
   
   Angol eredete
   
   Hatás
   
   <iframe>
   
   inline frame
   
   Egy másik dokumentum (pl. weblap ) tartalmának beágyazását teszi lehetővé. Páros címke..
   
   

   Ez egy beágyazott oldal:

   <iframe src="http://informatika.gtportal.eu/" height=”800" width=”600” >

   A beágyazott dokumentumot nem sikerült megjeleníteni.

   Beágyazott <iframe> dokumentum jellemzői
   
   Név
   
   Érték
   
   Leírás
   
   name
   
   szöveg
   
   A beágyazott keret egyedi nevét adhatjuk meg.
   
   src
   
   URL
   
   Megadja a dokumentum forrását.
   
   srcdoc
   
   HTML kód
   
   Ha a bongésző ismeri ezt a jellemzőt, akkor az itt megadott HTML kódot, ha nem, akkor a src jellemzőnél megadott dokumentumot jeleníti meg.
   
   sandbox
   
   "" allow-forms allow-sameorigin allow-scripts allow-topnavigation
   
   Biztonsági beállítások. Részletesen a következő oldalon tárgyaljuk.
   
   height
   
   képpont
   
   A beágyazott dokumentum megjelenítésére használt terület magassága.
   
   width
   
   képpont
   
   A beágyazott dokumentum megjelenítésére használt terület szélessége.
   
   Kötelező jellemzője a src (source), ami megadja a dokumentum forrásának URL-jét. Érdemes megadni az iframe elem méretét. Széllességét a widthwidth, a magasságát a heightheight jellemzővel. A nyitó és záró címkék közötti tartalom csak akkor jelenik meg, ha a böngésző nem támogatja az <iframe> elemet. Egyes webhelyek nem engedélyezik a keretben történő megjelenítés! A name jellemzőben megadott nevet (name) a JavaScriptek használhatják, és céként megadható a vagy

   elemek target, valamint vagy elemek formtarget jellemzőjénél.
   
   Biztonsági beállítások Beágyazott <iframe> dokumentum biztonsági beállításai sandbox jellemző segítségével extra korlátozások adhatók meg a beágyazott keret tartalom tartalmára vonatkozóan. <iframe sandbox="" ...> = Minden lehetőséget tilt <iframe sandbox="allow-same-origin" ...> = Lehetővé teszi az iframe az őt tartalmazó dokumentummal
   
   azonos helyről származó tartalmak kezelését <iframe sandbox="allow-top-navigation" ...> = Lehetővé teszi az iframe tartalmának navigációját az őt
   
   tartalmazó dokumentumban. (A beágyazott tartalom könyvjelzői (horgonyok) nem működnek.) <iframe sandbox="allow-forms" ...> = Lehetővé teszi űrlapok beküldését <iframe sandbox="allow-scripts" ...> = Lehetővé teszi parancsfájlok (scriptek) végrehajtását
   
   Az egyes lehetőségeket egymástól szóközzel felsorolva, egyszerre több engedély is megadható.
   
   Hang videó és animáció beillesztés Hang videó és animáció beillesztés HTML5 dokumentumba történhet: 1. 2. 3. 4. 5.
   
   a iframe object video audio
   
   elemek segítségével. Amit már tudunk:  
   
   A hivatkozások használat már megismertük. Megtudtuk, hogy a címke href jellemzőjénél megadott fájl kiterjesztésétől (típusától) függően a böngésző megnyitja a lejátszásához, esetenként a szerkesztéséhez szükséges programot. A beágyazott keret használatával is találkoztunk már, de ebben a fejeleztben látunk néhány példát videók beillsztésére <iframe> címke segítségével
   
   
   
   YouTube videó beágyazása iframe segítségével
   
   Korábban már láttuk, hogy beillesztett keretek segítségével egy másik weboldal tartalmát illeszthetjük Html oldalunkba. A iframe elem segítségével azonban nem csak más weboldalak tartalmát, hanem egyéb dokumentumokat (pl. txt) és multimédia elemeket is beilleszthetünk. Ha egy videót feltöltöttünk a YouTube videómegosztó portálra, akkor a beillesztéshez szükséges kódot készen kapjuk. Egyúttal takarékoskodhatunk tárhelykapacitásunkkal. Sőt a videó látogatói közül további érdeklődők érkezhetnek webhelyünkre. 1. példa:

   YouTube videó beágyazása
   
   iframe segítségével

   
   
   <iframe width="420" height="315" src="http://www.youtube.com/embed/ehJ-yB5aWJ8?rel=0" frameborder="0" allowfullscreen> Ezt a videót sajnos nem tudjuk most megnézni.
   
   HTTPS Ha egy weboldalon szükség van a fokozott adatvédelem biztosítására, mivel a felhasználók személyes adatai is továbbításra kerülnek, (pl. webáruháznál a megrendelők adatai, de hasonlóak a levelező vagy azonnali üzenetküldő szolgáltatást biztosító oldalak) akkor a http protokoll helyett https protokollt használnak. Ekkor a kliens számítógép és a webszerver közötti adatforgalom titkosított formában zajlik. Ha https protokollt használó webhelyre http protokollal elérhető tartalmak kerülnek beágyazásra, akkor a felhasználó "kevert tartalom" figyelmeztetést kap. Ennek elkerülésére biztonságos webhelyek esetén a beágyazott tartalmakat is https protokollal célszerű beágyazni. Beágyazás object elem segítségével