Okvirji v HTML so način razdelitve okna brskalnika na več odsekov, od katerih lahko vsak naloži in prikaže drug dokument HTML. V tem članku si bomo ogledali praktične primere okvirjev v HTML.

Čeprav se je njegova uporaba v zadnjih letih zmanjšala zaradi sprejetja sodobnejših in prilagodljivejših tehnik, kot sta CSS in JavaScript, je še vedno mogoče najti na nekaterih spletnih mestih, zlasti na tistih, ki so bila ustvarjena v devetdesetih in zgodnjih devetdesetih letih prejšnjega stoletja. tisto iz leta 2000.

Kako okvirji ali okvirji delujejo v HTML?

Okvirji so sestavljeni iz dveh elementov:

1. Frameset: Element se uporablja za razdelitev okna brskalnika na pravokotne odseke, od katerih lahko vsak naloži svoj dokument HTML.

instagram story viewer

2. okvirji: Element se uporablja znotraj a za določitev vsakega posameznega odseka. In na klic pošlje neki drug dokument, ki je naložen znotraj nabora okvirjev.

• Sledi z: Primeri iFrame

Kako narediti okvirje v HTML

Če želite ustvariti dokument HTML z okvirji, sledite dvema zelo preprostima korakoma:

1. Ustvarite dokument HTML, ki definira strukturo okvirjev z uporabo elementa. Na primer:

Datoteka 1: frameset.html

2. Ustvarite enega ali več dokumentov HTML, ki bodo naloženi znotraj okvirjev.

Datoteka 2: frame1.html

To je okvir 1

Datoteka 3: frame2.html

To je okvir 2

Atributi okvirja v HTML

Nekaj ​​najpomembnejših lastnosti elementov so:

• pomikanje: Ta atribut se uporablja za nadzor videza drsnih trakov v okvirju. Lahko ima vrednosti "samodejno", "da" ali "ne".

• noresize: Ta atribut se uporablja, da uporabniku prepreči spreminjanje velikosti okvirja.

• jam: Ta atribut se uporablja za dajanje imena okvirju, ki je lahko koristen za sklicevanje na okvir v povezavah in skriptih.

• src: Ta atribut se uporablja za podajanje URL-ja dokumenta HTML, ki se naloži v okvir.

• obroba okvirja: Ta atribut določa, ali naj imajo okvirji obrobe ali ne. Možni vrednosti sta "1" (za prikaz obrob) ali "0" (za prikaz brez obrob). na primer .

• meja: Ta atribut določa širino meje med okvirji v slikovnih pikah. na primer bo med okvirjema ustvaril rob 5px.

• razmik med okvirji: Ta atribut je podoben meja. Določa tudi razmik med okvirji v slikovnih pikah. na primer med okvirjema nastavi razmik 10 slikovnih pik.

• barva obrobe: ta atribut vam omogoča spreminjanje barve obrobe okvirjev. Določite lahko katero koli veljavno barvo. na primer bo obroba okvirjev rdeča.

Primer uporabe:

Kako se povezati z določenim okvirjem

Z atributom lahko naredimo, da se povezava odpre v določenem okvirju tarča V nalepki. Vrednost tarča mora biti enako imenu okvirja (jam atribut od ). Na primer:

v menu.html
stran 1
stran 2

V tem primeru boste s klikom na povezavo »Stran 1« ali »Stran 2« v okviru menija naložili ustrezno stran v okvir »vsebine«.

Kako zlomiti okvirje

Če želite, da povezava odpre stran zunaj nabora okvirjev (tj. zamenja celoten nabor okvirjev), lahko uporabite posebno vrednost _top za atribut tarča. Na primer:

v menu.html
izstopiti iz okvirjev

Ko kliknete »Izhod iz okvirjev«, bo brskalnik naložil »pageOutofFrames.html« v celotno okno in nadomestil nabor okvirjev.

Primer razdelitve zaslona na dva stolpca z okvirji

Ta primer razdeli zaslon na dva enako velika stolpca. Vsak stolpec naloži drugo stran HTML.

Primer ustvarjanja navigacijske stranske vrstice z okvirji

Ta primer ustvari stransko vrstico, ki zavzame 25 % zaslona in se uporablja za navigacijo. Preostali del zaslona se uporablja za prikaz glavne vsebine.

Primer razdelitve zaslona na vrstice in stolpce

Ta bolj zapleten primer razdeli zaslon na štiri enake dele. Vsak razdelek naloži drugo stran HTML.

Primer zgornje navigacije z okvirji HTML

Ustvarite datoteko, ki definira dva okvirja v vrsti. Dve datoteki, ki ju definira, sta: ena za navigacijo (ki zavzema 20 % širine okna) in ena za glavno vsebino (ki zavzema preostanek širine okna).

Nato bi morali ustvariti datoteki "navigation.html" in "content.html". Na primer, "navigation.html" je lahko videti takole:

stran 1

stran 2

stran 3


In "content.html" bi lahko bil nekaj takega:

Dobrodošli na naši spletni strani!

Tukaj bo vsebina strani, izbrane v navigaciji.

V tem primeru, ko kliknete povezavo v "navigation.html", se ustrezna stran naloži v okvir "content".