Okviri u HTML-u način su dijeljenja prozora preglednika u više odjeljaka, od kojih svaki može učitati i prikazati drugačiji HTML dokument. U ovom ćemo članku vidjeti praktične primjere okvira u HTML-u.

Iako je njegova upotreba opala posljednjih godina zbog usvajanja modernijih i fleksibilnijih tehnika, kao što su CSS i JavaScript, još uvijek se može pronaći na nekim web-mjestima, posebice onima stvorenima 1990-ih i početkom 1990-ih. onaj iz 2000.

Kako okviri ili okviri funkcioniraju u HTML-u?

Okviri se sastoje od dva elementa:

1. Skup okvira: Element koristi se za podjelu prozora preglednika u pravokutne dijelove, od kojih svaki može učitati vlastiti HTML dokument.

2. okviri: Element koristi se unutar a za definiranje svakog od pojedinačnih odjeljaka. I šalje na poziv neki drugi dokument koji je učitan unutar skupa okvira.

   instagram story viewer

• Slijedite s: iFrame primjeri

Kako napraviti okvire u HTML-u

Za izradu HTML dokumenta s okvirima slijedite dva vrlo jednostavna koraka:

1. Izradite HTML dokument koji definira strukturu okvira pomoću elementa. Na primjer:

Datoteka 1: frameset.html

2. Napravite jedan ili više HTML dokumenata koji će se učitavati unutar okvira.

Datoteka 2: frame1.html

Ovo je okvir 1

Datoteka 3: frame2.html

Ovo je okvir 2

Atributi okvira u HTML-u

Neki od najvažnijih atributa elementa su:

• listanje: Ovaj se atribut koristi za kontrolu izgleda traka za pomicanje u okviru. Može imati vrijednosti "auto", "yes" ili "no".

• noresize: Ovaj se atribut koristi za sprječavanje korisnika da promijeni veličinu okvira.

• jam: Ovaj se atribut koristi za davanje naziva okviru, što može biti korisno za referenciranje okvira u vezama i skriptama.

• src: Ovaj se atribut koristi za određivanje URL-a HTML dokumenta koji se učitava u okviru.

• granica okvira: Ovaj atribut određuje trebaju li okviri imati obrube ili ne. Moguće vrijednosti su "1" (za prikaz granica) ili "0" (za prikaz bez granica). Na primjer, .

• granica: Ovaj atribut definira širinu granice između okvira u pikselima. Na primjer, stvorit će granicu od 5 px između okvira.

• razmak okvira: Ovaj atribut je sličan granica. Također definira razmak između okvira u pikselima. Na primjer, postavit će razmak od 10px između okvira.

• boja obruba: Ovaj atribut omogućuje promjenu boje obruba okvira. Može se navesti bilo koja važeća boja. Na primjer, učinit će rub okvira crvenim.

Primjer upotrebe:

Kako se povezati s određenim okvirom

Pomoću atributa vezu možemo otvoriti u određenom okviru cilj U naljepnici. Vrijednost cilj treba biti isti kao naziv okvira (jam atribut od ). Na primjer:

u menu.html
Stranica 1
stranica 2

U tom slučaju, klikom na poveznice "Stranica 1" ili "Stranica 2" u okviru izbornika učitat će se odgovarajuća stranica u okviru "sadržaja".

Kako razbiti okvire

Ako želite da poveznica otvori stranicu izvan skupa okvira (tj. zamijeni cijeli skup okvira), možete koristiti posebnu vrijednost _vrh za atribut cilj. Na primjer:

u menu.html
izaći iz okvira

Kada kliknete "Izlaz iz okvira", preglednik će učitati "pageOutofFrames.html" u cijelom prozoru, zamjenjujući skup okvira.

Primjer podjele ekrana u dva stupca s okvirima

Ovaj primjer dijeli zaslon u dva stupca jednake veličine. Svaki stupac učitava drugu HTML stranicu.

Primjer za izradu navigacijske bočne trake s okvirima

Ovaj primjer stvara bočnu traku koja zauzima 25% zaslona i koristi se za navigaciju. Ostatak zaslona koristi se za prikaz glavnog sadržaja.

Primjer podjele zaslona na retke i stupce

Ovaj složeniji primjer dijeli zaslon na četiri jednaka dijela. Svaki odjeljak učitava drugu HTML stranicu.

Primjer gornje navigacije s HTML okvirima

Napravite datoteku koja definira dva okvira u nizu. Dvije datoteke koje definira su: jedna za navigaciju (koja zauzima 20% širine prozora) i jedna za glavni sadržaj (koja zauzima ostatak širine prozora).

Zatim biste trebali izraditi datoteke "navigation.html" i "content.html". Na primjer, "navigation.html" može izgledati ovako:

Stranica 1

stranica 2

stranica 3


A "content.html" bi mogao biti nešto poput ovoga:

Dobrodošli na našu web stranicu!

Ovdje će ići sadržaj stranice odabrane u navigaciji.

U ovom slučaju, kada kliknete vezu u "navigation.html", odgovarajuća stranica se učitava u okviru "content".