Cadre (Frameset, Frame, Noframes, Iframe)

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>:

  1. rows – descrie liniile în care este împărţită secţiunea frameset respectivă
  2. cols – descrie coloanele în care este împărţită secţiunea frameset respectivă
  3. frameborder - specifică dacă un cadru va afişa sau nu chenar
  4. framespacing - indicã prezenţa unui spaţiu suplimentar între cadre
  5. border - defineşte lăţimea chenarului (numai frameset-ul exterior va răspunde la valoarea acestui atribut)
  6. bordercolor - specifică culoarea chenarului, în format RGB

Exemplu: pagină cu două cadre orizontale în proporţia 20% şi 80% din înălţimea totală.


<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>

Exemplu: pagină cu două cadre vericale în proporţia 20% şi 80% din înălţimea totală.


<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>

Vizualizarea

cadre

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:

  1. src – adresa fişierului HTML sau a imaginii care se va încărca iniţial în cadru;
  2. marginheight – marginile (în pixeli sau procent) faţă de partea de sus şi cea de jos;
  3. marginwidth – marginile (în pixeli sau procent) faţă de partea din stânga şi din dreapta;
  4. noresize – vizitatorului paginii nu i se va permite să redimensioneze cadrul;
  5. name – numele cadrului;
  6. frameborder – poate lua valorile 1 (implicită), care înseamnă că acest cadru este separat de celelalte printr-un chenar, respectiv 0, care înseamnă că acest cadru nu mai este separat de celelalte printr-un chenar;
  7. bordercolor - specifică culoarea chenarului, în format RGB;
  8. scrolling – tratează afişarea barei de scroll (derulare). Poate lua trei valori:

  1. auto – valoarea implicită. Bara de scroll este prezentă numai dacă este cazul;
  2. yes – bara de scroll este totdeauna prezentă;
  3. no – bara de scroll nu va fi niciodată afişată;

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:

  1. un fişier pentru pagina iniţială, cea care defineşte scheletul paginii cu frame-uri
  2. un fişier cu cele 3 zile ale săptămânii, pe fiecare dintre ele fiind pus câte un hyperlink care va deschide traducerea numelui său în celălalt frame
  3. 3 fişiere cu traducerilor numelor zilelor în 4 limbi străine

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:

imagine

cadre

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):

imagine_cadre

Vizualizarea

cadre

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.

Exemplu: pagină cu două cadre vericale în proporţia 20% şi 80% din înălţimea totală.



<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>

Vizualizarea

cadre

Tag-ul <iframe> este un element care nu a fost prezent în primele versiuni ale limbajului HTML, ci a apărut ceva mai nou. Actualmente, folosirea sa este preferată de majoritatea celor care programează pagini web, deoarece se comportă ceva mai flexibil decât cadrele clasice. Totodată, motoarele de căutare nu indexează conţinutul paginilor cu frame-uri obişnuite, pe când cele care conţin iframe-uri sunt indexate. Prin intermediul său, este permisă crearea unui cadru în corpul unui documente HTML, cadrul care se comportă asemănător unei imagini.

Atributele lui <iframe> sunt:

  1. name – la fel ca şi la frame, acest atribut permite identificarea iframe-ului (pentru a putea comanda conţinutul său din orice link)
  2. height, width înălţimea, respectiv lăţimea. Pot fi specificate atât în pixeli, cât şi în procente, relativ la dimensiunile ferestrei browser-ului
  3. frameborder – poate lua valoarea 0 sau 1, la fel ca la elementul frame
  4. src – adresa resursei care va fi încărcată iniţial în iframe
  5. marginwidth, marginheight, scrolling – la fel ca şi la frame
  6. align – poate lua una dintre valorile left, right, top, bottom, middle, comportându-se întocmai ca şi în cazul imaginilor

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):

imagine_paginaiframe

Vizualizarea

cadre