Šifra okvira. Iframe i Frame - šta su to i kako najbolje koristiti okvire u HTML-u

Element

Okviri

Šta radi

Glavna razlika između

U gornjoj oznaci, dovoljno je zamijeniti adresu stranice bilo kojom drugom i, ako je potrebno, prilagoditi veličinu okvira.

Okviri su HTML elementi koji vam omogućavaju da podijelite prozor web pretraživača u nekoliko nezavisnih prozora, od kojih svaki može učitati poseban HTML dokument. Svaki takav prozor (okvir) može imati svoje trake za pomicanje i funkcionirati neovisno o drugim nezavisnim prozorima ili, naprotiv, kontrolirati njihov sadržaj. Mogu se koristiti za organizovanje menija koji se stalno nalazi u jednom prozoru, dok se same informacije nalaze u drugom prozoru. Korisnici mogu pristupiti meniju u bilo koje vrijeme bez potrebe da se vraćaju prethodna stranica da odaberete drugu stavku menija. Korišćenje okvira vam omogućava da „zakačite“ slike ili druge elemente statičnog interfejsa u prozor pretraživača dok se ostatak stranice pomera unutar okvira.
Međutim, vrijedno je napomenuti da se ovih dana okviri smatraju zastarjelim alatom, a stranice s okvirima sada se smatraju nedostojanstvenim, budući da profesionalni webmasteri nikada ne koriste okvire u svojim projektima. Okviri imaju niz ozloglašenih problema. Oni zbunjuju pretraživače, na primjer, jer stranice koje sadrže sadržaj ne povezuju na druge dokumente. Ako želite primati posjetitelje iz tražilice, zaboravi na okvire. Nemoguće je da korisnik postavi stranicu koja mu se sviđa u sekciji markera pretraživača, jer okviri skrivaju adresu stranice na kojoj se nalazi i uvijek prikazuju samo adresu web stranice. Iz tog razloga stvaraju probleme pretraživačima prilikom praćenja historije, a također nisu baš prilagodljivi različitim veličinama ekrana i mobilnim uređajima.
Unatoč činjenici da se projekti s okvirima nalaze u svjetske mreže sve ređe, učenje HTML-a bi bilo nepotpuno bez pokrivanja teme okvira. Okviri, uz svoje nedostatke, imaju i neke prednosti koje nam ne dozvoljavaju da ovu tehnologiju odbacimo kao neperspektivnu.

Kreiranje okvira

Struktura HTML dokumenta sa okvirima je po izgledu vrlo slična formatu običnog HTML dokumenta. Kao iu običnom HTML dokumentu, sav kod se postavlja između uparenih oznaka I , i u kontejneru zaglavlja se nalaze. Glavna razlika između dokumenta sa okvirima i običnog HTML dokumenta je u tome što je dokument sa okvirima umesto oznake primijenjena je uparena oznaka (od engleskog frame set - set okvira).
Sljedeći primjer pokazuje strukturu HTML dokumenta s okvirima:

Primjer: HTML struktura dokumenta sa okvirima

• Probajte sami »

U gornjem primjeru, stranica sadrži tri oblasti, od kojih je svaka inicijalno učitana HTML dokumentima frame_top.html, frame_left.html i frame_right.html. Pored HTML dokumenata, okvir može sadržavati i grafiku. Da biste to učinili, morate navesti adresu odgovarajuće slike u atributu src, Na primjer src="image.gif". Imajte na umu da element koristi se bez završne oznake.
Unutar kontejnera može sadržavati samo oznake ili drugi set okvira prekrivenih oznakama I .
Tag ima sljedeće atribute:

• redova— opisuje kako podijeliti stranicu u redove:
• cols— opisuje kako je stranica podijeljena u kolone:

U značenju atributa redova I cols Neophodno je navesti ne broj redova ili kolona, ​​već širinu i visinu okvira. Sve vrijednosti na listi su odvojene zarezima. Dimenzije se mogu specificirati u apsolutnim jedinicama (pikseli) ili procentima:

• cols="20%, 80%"— prozor pretraživača je podijeljen u dvije kolone pomoću atributa cols, lijeva kolona zauzima 20%, a desna 80% prozora pretraživača.
• rows="100, *" Prozor pretraživača je podijeljen na dva horizontalna prozora pomoću atributa redova, gornji prozor zauzima 100 piksela, a donji prozor zauzima preostali prostor naveden simbolom zvjezdice.

Kao što se može vidjeti iz ovog primjera, kontejner sa atributom redova prvo kreira dva horizontalna okvira, a drugi okvir zamjenjuje drugim koji dijeli donji horizontalni okvir u dvije kolone koristeći atribut cols, lijeva kolona zauzima 20%, a desna 80% prozora pretraživača.
Ako pretraživač ne podržava okvire, prozor će prikazati tekst koji se nalazi između oznaka </b> I <b> . Sve između oznaka </b> I <b> , zanemaruju pretraživači koji podržavaju okvire. Prema tome, programer treba da napiše kod koji duplira sadržaj okvira na drugi način i da ovaj kod stavi u kontejner </b>, tada svi korisnici mogu vidjeti njegovu web stranicu. <br>Kao što je već napomenuto, neuparena oznaka se koristi za umetanje zasebnog okvira u dokument <b><frame> </b>. Atribut <b>src</b> specificira dokument koji bi trebao biti prikazan unutar ovog okvira, na primjer: <frame src="frame_top.html">. If attribute <b>src</b> nedostaje, prikazuje se prazan okvir.</p> <h2>Ivice ili razmak između okvira</h2> <p>Prema zadanim postavkama, pretraživač prikazuje sivu, obično 3D linijsku granicu između okvira koju posjetitelji mogu koristiti za podešavanje veličine okvira. <br>Granicom okvira može se manipulirati kao i svaki drugi element okvira. Za to postoji nekoliko atributa elementa <b><frameset> </b>, što vam omogućava da prilagodite granice okvira. Debljina granične linije određena je atributom <b>granica</b>. Zadana vrijednost debljine ivice je pet. <br>Da biste sakrili ivicu okvira, morate ili postaviti vrijednost širine ivice na nulu ili postaviti vrijednost "ne" ili "0" na atribut <b>frameborder</b>. Atribut <b>frameborder</b> može imati samo dva suprotna značenja. Ako vrijednost atributa <b>frameborder</b> je jednako “da” ili “1”, tada će se prikazati granica okvira, a ako je “0” ili “ne”, onda ne. Imajte na umu da vrijednosti atributa <b>frameborder</b> varirati za <a href="https://ermake.ru/bs/kak-vklyuchit-cookies-v-raznyh-brauzerah-chto-takoe-faily-i-kak-ustanovit/">različitim pretraživačima</a>. Da biste riješili ovaj problem, koristite atribut dvaput <b>frameborder</b>, a za neke pretraživače morate dodati i atribut <b>razmak između okvira</b> sa vrijednošću "0":</p><p> <frameset frameborder="0" framespacing="0" frameborder="no" border="0"> </p><p>U sljedećem primjeru uklanjamo granicu između okvira:</p> <h3>Primjer: Uklanjanje granice između okvira</h3> <ul><li>Probajte sami »</li> </ul><table><tr><td style="width: 10px;background-color:green;color: white;">frame_left</td> <td style="width: 90%;background-color:lime;color: white;">frame_right</td> </tr></table><p> <!DOCTYPE html> <html><br><head><br><meta charset="UTF-8"> <title>Okviri bez ivica</title> </head> <frameset cols="100,*" frameborder="0" framespacing="0" frameborder="no" border="0"> <frame src="frame_left.html" name=" frame_left" > <frame src="frame_right.html" name="frame_right" > </frameset> </html></p> <p>Ako uklonite granicu između okvira, posjetitelji neće moći promijeniti veličinu okvira u pretraživaču. Također možete spriječiti promjenu veličine okvira tako što ćete sačuvati ivice pomoću atributa <b>noresize</b>:</p><p> <frame src="frame_left.html" noresize> </p><p>Korištenje atributa <b>bordercolor</b> Možete promijeniti boju ivice okvira, samo trebate navesti kod ili odgovarajuće rezervirano ime boje. <br>Ispod je primjer HTML stranice koja sadrži gore opisane atribute kontrole okvira: boja obruba je crvena, veličina gornjeg okvira se ne može promijeniti:</p> <h3>Primjer: Kontrola granica okvira</h3> <ul><li>Probajte sami »</li> </ul><table style="border-collapse:collapse;"><tr><td style="border-bottom: 4px solid red;background-color:blue;color: white;" colspan="2">frame_top</td> </tr><tr><td style="border-right: 4px solid red;width: 20%;background-color:green;color: white;">frame_left</td> <td style="width: 80%;background-color:lime;color: white;">frame_right</td> </tr></table><p> <!DOCTYPE html> <html><br><head><br><meta charset="UTF-8"> <title>Upravljanje okvirnim granicama</title> </head> <frameset rows="150, *" border="10" bordercolor="red" frameborder="1" frameborder="yes"> <frame src="frame_top.html" noresize> <frameset cols="20%, 80%"> <frame src="frame_left.html"> <frame src="frame_right.html"> </frameset> </frameset> </html></p> <p>Ako želite stranicu prikazanu unutar okvira pozicionirati bliže njegovim granicama ili je, obrnuto, pomaknuti dalje, promijenite atribute <b>marginheight</b> I <b>marginwidth</b> tag <b><frame> </b>. Atribut <b>marginheight</b> definira padding između sadržaja okvira i njegovih gornjih i donjih granica. sintaksa:</p><p> <frame marginheight="число"> </p><p>Atribut <b>marginwidth</b> definira padding između sadržaja okvira i njegove desne i lijeve ivice. sintaksa:</p><p> <frame marginwidth="число"> </p><p>Ova html linija, na primjer, pozicionira prikazanu stranicu blizu ivice okvira:</p> <p>Ako stranica prikazuje traku za pomicanje koju ne želite, problem možete riješiti navođenjem atributa <b>skrolovanje</b>="ne" u oznaci <b><frame> </b>. Ali imajte na umu da ako okvir nije dovoljno velik da prikaže cijeli sadržaj stranice, posjetitelj neće imati načina da skroluje prikazanu stranicu.</p> <h2>Veze unutar okvira</h2> <p>Praćenje veze u običnom HTML dokumentu vrši se na sledeći način: kliknite na vezu i trenutni dokument se zamenjuje novim u trenutnom ili u novom prozoru pretraživača. Kada koristite okvire, shema učitavanja HTML dokumenata razlikuje se od uobičajene, a glavna razlika je mogućnost učitavanja HTML dokumenta u jedan okvir iz drugog okvira. <br>Da biste učitali dokument u određeni okvir, koristite atribut <b>cilj</b> tag <b><a> </b>. Kao vrijednost atributa <b>cilj</b> koristi se naziv okvira u koji će se učitati dokument specificiran atributom <b>ime</b> tag <b><frame> </b>. Također je vrijedno napomenuti da naziv okvira mora početi ili brojem ili latiničnim slovom. Sljedeća imena se koriste kao rezervirana imena:</p> <p>Za vanjske veze, trebali biste postaviti ciljni atribut na _top ili _blank kako biste osigurali da se projekti trećih strana ne pojavljuju u vašim okvirima, već da popune cijeli prozor pretraživača.</p> <p>Sljedeći primjer prikazuje HTML dokument u kojem desni okvir učitava stranicu sa veze postavljene u gornji okvir. Link do dokumenta koji će se otvoriti u desnom okviru:</p><p> <a href="http://www.google.com" target="frame_right">Google</a> </p><p>Desnom okviru je dato ime <i>frame_right</i>:</p><p> <frame src="frame_right.html" name="frame_right"> </p><p>Da biste učitali dokument u određeni okvir, koristite konstrukciju <i>target="frame_right"</i>, kao što je prikazano u primjeru:</p> <h3>Primjer: Veza na drugi okvir</h3> <ul><li>Probajte sami »</li> </ul><p> <!DOCTYPE html> <html><br><head><br><meta charset="UTF-8"> <title>Veza na drugi okvir</title> </head> <frameset rows="100, *"> <frame src="frame_topic.html"> <frameset cols="20%, 80%"> <frame src="frame_left.html"> <frame src="frame_right.html" name="frame_right"> </frameset> <noframes> <p>Vaš pretraživač ne prikazuje okvire</p>