Utilizarea frame-urilor permite ca, în cadrul aceleiaşi ferestre ale browser-ului să fie afişate simultan mai multe documente HTML (sau alte resurse).
Tag-ul <frameset> are rolul de a împărţi fereastra în mai multe cadre. În fişierul HTML, el înlocuieşte tag-ul <body>. Iată câteva atribute ale lui <frameset>:
<html> <head> <title>Exemplu 1 </title> </head> <frameset rows ="20%,80%" bordercolor ="red" frameborder ="yes" framespacing ="10" border ="10"> <frame src="exemplu_cadru1.html"> <frame src="exemplu_cadru2.html"> </frameset> </html> |
<html> <head> <title>Exemplu 2 </title> </head> <frameset cols ="20%,80%" bordercolor ="red" frameborder ="yes" framespacing ="10" border ="10"> <frame src="exemplu_cadru1.html"> <frame src="exemplu_cadru2.html"> </frameset> </html> |
Fiecare tag <frameset> ...</frameset> trebuie ca, după definirea aspectului (cu ajutorul unuia dintre atributele cols sau rows) să conţină descrierile fiecăruia dintre cadrele definite.
Acest lucru se face cu ajutorul tag-ului <frame> prin intermediul atributelor:
Deschiderea unei pagini într-un anumit cadu, prin intermediul ancorelor, se poate specifica prin folosirea atributului target=”nume cadru” imediat după folosirea atributului href în cadrul tag-ului <a href=”...”>.
Iată un exemplu prin care definim o pagină cu două frame-uri verticale. Frame-ul din stânga va conţine numele a 3 zile ale săptămânii (pe limba română). Accesarea fiecăruia va produce deschiderea în frame-ul drept a unei pagini care va conţine traducerea numelui zilei respective în 4 limbi.
În total vom avea de construit 5 fişiere:
Pagina iniţială (paginaframes.html):
Codul html |
<html> <head> <title>pagina cu frames </title> </head> <frameset cols ="30%,*"> <frame name="stinga" src="zile.html" noresize frameborder="20" bordercolor="blue" scrolling ="yes" marginwidth="100" marginheigh="50"> <frame name="dreapta" src="luni.html" marginwidth="100" marginheigh="50"> </frameset> <noframes> Browser-ul tau nu este capabil sa afiseze pagini cu frame-uri </noframes> </html> |
De remarcat faptul că această fişier HTML nu conţine decât scheletul cadrelor, ele urmând a fi populate iniţial, după cum remarcaţi din codul sursă, cu fişierele zile.html pentru primul cadru (cel din stânga) respectiv cu fişierul luni.html pentru cel de-al doilea cadru.
Observaţi modul în care au fost definite cadrele în cadrul tag-ului frameset cols="30%,*".
Acest lucru semnifică prezenţa a două cadre verticale (coloane) dintre care primul va ocupa 30% din lăţimea ferestrei, iar al doilea restul (lucru semnificat de caracterul * care închide şirul de definiţie al cadrelor).
De asemenea, atributul noresize în cadrul primului tag frame împiedică redimensionarea cadrelor de către utilizator.
În cazul în care acest atribut nu ar fi fost prezent, utilizatorul, printr-un simplu „drag and drop” ar fi putut trage bara care separa cele două frame-uri, dându-i orice poziţie ar fi dorit.
Dacă încărcăm în browser-ul de internet documentul creat în acest stadiu, fără ca pe disc să existe vreunul dintre celelalte patru fişiere planificate, am obţine următorul rezultat:
Acesta era şi de aşteptat, de altfel, deoarece el demonstrează existenţa frame-urilor şi lipsa conţinutului.
Iată şi conţinutul celorlalte fişiere, pe care le vom pune în acelaşi director cu documentul de mai sus.
Codul html | Rezultatul |
<html> <head> <title>zile </title> </head> <body> <a href="luni.html" target="dreapta">Luni</a> <a href="marti.html" target="dreapta">Marti</a> <a href="miercuri.html" target="dreapta">Miercuri</a> </body> </html> |
către pagina "zile.html" |
De remarcat modul în care am realizat link-urile asupra celor 3 cuvinte: folosind şi atributul target în cadrul ancorei (<a ...>) am specificat browser-ului, ca paginile respective să fie deschise în cadrul frame-ului al cărui nume apare după target.
Fişierul luni.html
Codul html | Rezultatul |
<html> <head> <title>luni </title> </head> <body> <h2>Luni</h2> FR: Lundi IT: Lunedi GE: Montag EN: Monday </body> </html> |
către pagina "luni.html" |
Fişierul marti.html
Codul html | Rezultatul |
<html> <head> <title>marti </title> </head> <body> <h2>Marti</h2> FR: Mardi IT: Martedi GE: Dienstag EN: Tuesday </body> </html> |
către pagina "marti.html" |
Fişierul miercuri.html
Codul html | Rezultatul |
<html> <head> <title>miercuri</title> </head> <body> <h2>Miercuri</h2> FR: Mercredi IT: Mercoledi GE: Mittwoch EN: Wednesday </body> </html> |
către pagina "miercuri.html" |
Iată cum arată vizualizarea finală în browser (după crearea celor 4 fişiere de mai sus):
Evident, la efectuarea unui click asupra legăturilor (luni, marti, miercuri) din partea stângă, se va produce deschiderea paginii corespunzătoare în frame-ul drept.
Tag-ul<noframes>reprezintă alternativa (codul HTML) care va fi afişată în browserele care nu suportă cadre. Browserele care pot afisa cadre vor ignora acest marcaj.
În situaţia în care browserul folosit nu suportă pagini care conţin cadre, imaginea afişată va fi goală.
Pentru a evita acest lucru vom introduce un mesaj încadrat de <body> şi </body> între etichetele <noframes> şi </noframes> prin care informăm vizitatorul ă foloseşte un browser care nu suportă cadre.
<html> <head> <title>Exemplu 2 </title> </head> <frameset cols ="20%,80%" bordercolor ="red" frameborder ="yes" framespacing ="10" border ="10"> <noframes> <body> Browserul folosit nu suporta cadre </body> </noframes> <frame src="exemplu_cadru1.html"> <frame src="exemplu_cadru2.html"> </frameset> </html> |
Atributele lui <iframe> sunt:
Iată reluarea aceleiaşi idei structurale ca şi la aplicaţia de dinainte (cu frame-uri clasice) însă folosind un element de tipul iframe.
Fişierele luni.html, marti.html respectiv miercuri.html le păstrăm nemodificate. Practic, mai creăm doar un singur fişier HTML, cu conţinutul următor şi avem grijă să copiem în acelaşi director şi cele 3 fişiere de mai sus (pagina_iframe.html):
Codul html |
<html> <head> <title>pagina iframe </title> </head> <body> <iframe name="cadru" align="left" marginwidth="10" marginheight="30" scrolling="yes" frameborder="10" width="140" height="160" src="luni.html"> </iframe> <a href="luni.html" target="cadru">Luni</a> <a href="marti.html" target="cadru">Marti</a> <a href="miercuri.html" target="cadru">Miercuri</a> </body> </html> |
Iată cum arată vizualizarea finală în browser (după crearea celor 4 fişiere de mai sus):