Cadrele în HTML sunt o modalitate de a împărți fereastra browserului în mai multe secțiuni, fiecare dintre acestea putând încărca și afișa un document HTML diferit. În acest articol vom vedea exemple practice de cadre în HTML.

Deși utilizarea sa a scăzut în ultimii ani datorită adoptării unor tehnici mai moderne și mai flexibile, precum CSS și JavaScript, mai poate fi găsit pe unele site-uri web, în ​​special pe cele create în anii 1990 și începutul anilor 1990. cea din 2000.

Cum funcționează cadrele sau cadrele în HTML?

Ramele sunt formate din două elemente:

1. Setul de cadru: Elementul este folosit pentru a împărți fereastra browserului în secțiuni dreptunghiulare, fiecare dintre acestea putând încărca propriul document HTML.

instagram story viewer

2. rame: Elementul este folosit în cadrul unui pentru a defini fiecare dintre secțiunile individuale. Și trimite să apeleze un alt document care este încărcat în cadrul setului de cadre.

• Urmărește cu: Exemple iFrame

Cum se creează cadre în HTML

Pentru a crea un document HTML cu cadre, urmați doi pași foarte simpli:

1. Creați un document HTML care definește structura cadrelor folosind elementul. De exemplu:

Fișierul 1: frameset.html

2. Creați unul sau mai multe documente HTML pentru a fi încărcate în cadrul cadrelor.

Fișierul 2: frame1.html

Acesta este Cadrul 1

Fișierul 3: frame2.html

Acesta este Cadrul 2

Atributele cadru în HTML

Unele dintre cele mai importante atribute ale elementului sunt:

• defilare: Acest atribut este folosit pentru a controla aspectul barelor de defilare din cadru. Poate avea valorile „auto”, „da” sau „nu”.

• noresize: Acest atribut este folosit pentru a împiedica utilizatorul să redimensioneze cadrul.

• yam: Acest atribut este folosit pentru a da un nume cadrului, care poate fi util pentru referirea cadrului în link-uri și scripturi.

• src: Acest atribut este folosit pentru a specifica adresa URL a documentului HTML care urmează să fie încărcat în cadru.

• chenarul cadru: Acest atribut specifică dacă cadrele ar trebui să aibă margini sau nu. Valorile posibile sunt „1” (pentru a afișa margini) sau „0” (pentru a nu afișa margini). De exemplu, .

• frontieră: Acest atribut definește lățimea marginii dintre cadre în pixeli. De exemplu, va crea o chenar de 5px între cadre.

• spațierea cadrelor: Acest atribut este similar cu frontieră. De asemenea, definește spațiul dintre cadre în pixeli. De exemplu, va stabili un decalaj de 10px între cadre.

• culoarea chenarului: Acest atribut vă permite să schimbați culoarea chenarului cadrelor. Poate fi specificată orice culoare validă. De exemplu, va face roșu chenarul ramelor.

Exemplu de utilizare:

Cum se face legătura cu un anumit cadru

Putem deschide un link într-un cadru specific folosind atributul ţintă În etichetă. Valoarea a ţintă ar trebui să fie același cu numele cadrului (yam atributul de ). De exemplu:

în menu.html
Pagina 1
Pagina 2

În acest caz, făcând clic pe link-urile „Pagina 1” sau „Pagina 2” din cadrul meniului va încărca pagina corespunzătoare în cadrul „conținut”.

Cum se sparg ramele

Dacă doriți ca un link să deschidă o pagină în afara setului de cadre (adică să înlocuiți întregul set de cadre), puteți utiliza valoarea specială _top pentru atribut ţintă. De exemplu:

în menu.html
ieși din cadre

Când faceți clic pe „Ieșire din cadre”, browserul va încărca „pageOutofFrames.html” în fereastra completă, înlocuind setul de cadre.

Exemplu de împărțire a ecranului în două coloane cu cadre

Acest exemplu împarte ecranul în două coloane de dimensiuni egale. Fiecare coloană încarcă o pagină HTML diferită.

Exemplu de creare a unei bare laterale de navigare cu cadre

Acest exemplu creează o bară laterală care ocupă 25% din ecran și este folosită pentru navigare. Restul ecranului este folosit pentru a afișa conținutul principal.

Exemplu de împărțire a ecranului în rânduri și coloane

Acest exemplu mai complex împarte ecranul în patru părți egale. Fiecare secțiune încarcă o pagină HTML diferită.

Exemplu de navigare de sus cu cadre HTML

Creați un fișier care definește două cadre pe rând. Cele două fișiere pe care le definește sunt: ​​unul pentru navigare (care ocupă 20% din lățimea ferestrei) și unul pentru conținutul principal (care ocupă restul lățimii ferestrei).

Apoi, ar trebui să creați fișierele „navigation.html” și „content.html”. De exemplu, „navigation.html” ar putea arăta astfel:

Pagina 1

Pagina 2

Pagina 3


Și „content.html” ar putea fi ceva de genul acesta:

Bine ati venit pe site-ul nostru!

Aici va merge conținutul paginii selectate în navigare.

În acest caz, când faceți clic pe un link din „navigation.html”, pagina corespunzătoare este încărcată în cadrul „conținut”.