A HTML-ben a keretek segítségével a böngészőablak több részre osztható, amelyek mindegyike más-más HTML-dokumentumot tölthet be és jeleníthet meg. Ebben a cikkben gyakorlati példákat fogunk látni a HTML-beli keretekre.

Bár használata az elmúlt években visszaesett a korszerűbb és rugalmasabb technikák, mint például a CSS ill A JavaScript még mindig megtalálható egyes webhelyeken, különösen azokon, amelyeket az 1990-es években és a 90-es évek elején hoztak létre. hogy a 2000.

Hogyan működnek a keretek vagy keretek a HTML-ben?

A keretek két elemből állnak:

1. Frameset: Az elem A böngészőablak téglalap alakú részekre osztható, amelyek mindegyike saját HTML dokumentumot tölthet be.

instagram story viewer

2. keretek: Az elem belül használják a az egyes szakaszok meghatározásához. És elküldi, hogy hívjon egy másik dokumentumot, amely a keretkészletbe van betöltve.

• Kövesse a következővel: iFrame példák

Hogyan készítsünk kereteket HTML-ben

Ha kereteket tartalmazó HTML-dokumentumot szeretne létrehozni, kövessen két nagyon egyszerű lépést:

1. Hozzon létre egy HTML dokumentumot, amely meghatározza a keretek szerkezetét az elem használatával. Például:

1. fájl: frameset.html

2. Hozzon létre egy vagy több HTML-dokumentumot, amelyeket a kereteken belül kell betölteni.

2. fájl: frame1.html

Ez az 1. keret

3. fájl: frame2.html

Ez a 2. keret

Keretattribútumok a HTML-ben

Néhány a legfontosabb elemattribútumok közül vannak:

• görgetés: Ez az attribútum a görgetősávok keretben való megjelenésének szabályozására szolgál. Ennek értékei lehetnek "auto", "yes" vagy "no".

• noresize: Ez az attribútum arra szolgál, hogy megakadályozza, hogy a felhasználó átméretezze a keretet.

• jamgyökér: Ez az attribútum arra szolgál, hogy nevet adjon a keretnek, ami hasznos lehet a keretre hivatkozásokban és szkriptekben.

• src: Ez az attribútum a keretbe betöltendő HTML-dokumentum URL-címének megadására szolgál.

• keretszegély: Ez az attribútum határozza meg, hogy a kereteknek rendelkezniük kell-e szegéllyel vagy sem. A lehetséges értékek az "1" (a szegélyek megjelenítéséhez) vagy a "0" (ha nem mutatnak szegélyeket). Például, .

• határ: Ez az attribútum határozza meg a keretek közötti szegély szélességét pixelben. Például, 5 képpontos szegélyt hoz létre a keretek között.

• kerettávolság: Ez az attribútum hasonló ehhez: határ. A képkockák közötti távolságot is meghatározza pixelben. Például, 10 képpontos rést állít be a képkockák között.

• szegélyszín: Ez az attribútum lehetővé teszi a keretek szegélyszínének megváltoztatását. Bármilyen érvényes szín megadható. Például, piros lesz a keretek szegélye.

Használati példa:

Hogyan lehet linkelni egy adott kerethez

Az attribútum segítségével egy hivatkozást megnyithatunk egy adott keretben cél A címkében. Az értéke cél meg kell egyeznie a keret nevével (jamgyökér attribútuma ). Például:

a menu.html-ben
1 oldal
2. oldal

Ebben az esetben a menükeretben található "1. oldal" vagy "2. oldal" hivatkozásokra kattintva betöltődik a megfelelő oldal a "tartalom" keretben.

Hogyan lehet megtörni a kereteket

Ha azt szeretné, hogy egy hivatkozás a keretkészleten kívüli oldalt nyisson meg (azaz a teljes keretkészletet lecserélje), használhatja a speciális értéket _top az attribútumhoz cél. Például:

a menu.html-ben
kilép a keretekből

Ha rákattint a „Kilépés a keretekből”, a böngésző betölti a „pageOutofFrames.html” fájlt a teljes ablakban, lecserélve a keretkészletet.

Példa a képernyő két oszlopra osztására keretekkel

Ez a példa a képernyőt két egyenlő méretű oszlopra osztja. Minden oszlop más-más HTML oldalt tölt be.

Példa keretes navigációs oldalsáv létrehozására

Ez a példa egy oldalsávot hoz létre, amely a képernyő 25%-át foglalja el, és navigációra szolgál. A képernyő többi része a fő tartalom megjelenítésére szolgál.

Példa a képernyő felosztására sorokra és oszlopokra

Ez a bonyolultabb példa a képernyőt négy egyenlő részre osztja. Minden szakasz más-más HTML-oldalt tölt be.

Példa felső navigációra HTML-keretekkel

Hozzon létre egy fájlt, amely két képkockát határoz meg egymás után. Az általa meghatározott két fájl a következő: az egyik a navigációhoz (amely az ablak szélességének 20%-át foglalja el), a másik pedig a fő tartalomhoz (amely az ablak szélességének többi részét foglalja el).

Ezután létre kell hoznia a "navigation.html" és a "content.html" fájlokat. Például a "navigation.html" így nézhet ki:

1 oldal

2. oldal

3. oldal


A "content.html" pedig valami ilyesmi lehet:

Üdvözöljük weboldalunkon!

Ide kerül a navigációban kiválasztott oldal tartalma.

Ebben az esetben, ha rákattint egy hivatkozásra a "navigation.html"-ben, a megfelelő oldal betöltődik a "tartalom" keretbe.