Cadrele, sau frame-uri, sunt folosite pentru impartirea ferestrei browser-ului astfel incat sa fie afisate mai multe pagini in aceeasi fereastra de browser.
Un frame (cadru) este o parte din suprafata ferestrei browserului.
Fiecare frame prezinta în interior un document propriu (in general un document HTML). De exemplu puteti creea doua cadre intr-o fereastra, in primul cadru puteti incarca un document HTML (ex. doc1.htm) iar in al doilea cadru un alt document HTML, de la alta adresa (ex. doc2.htm)
Dupa cum puteti vedea in imaginea de mai jos.

Exemplu cadre HTML

Pentru crearea de frame-uri se pot folosi urmatoarele etichete HTML:

1. Configurarea cadrelor

Pentru inceput se adauga un element <FRAMESET> ... </FRAMESET> in interiorul documentului HTML, în sectiunea HEAD.
<FRAMESET> determina cat din spaţiul ferestrei este atribuit fiecărui cadru, folosind atributele ROWS sau COLS care impart ecranul in Linii sau Coloane.
Acesta va conţine elemente <FRAME>, cate unul pentru fiecare divizare a ferestrei din browser.


        ROWS
        COLS
Alte atribute ale elementului <FRAMESET>
Elementul <FRAME>
Mai jos puteti vedea cum poate fi creata o pagina HTML care sa contina doua cadre, cel din stânga ocupând 23% din spatiul paginii iar cel din dreapta 77%
<HTML>
<HEAD>
<TITLE> TITLU PAGINII </TITLE>
</HEAD>
<FRAMESET COLS="23%,77%">
<FRAME SRC="doc1.htm" NAME="left" SROLLING="NO">
<FRAME SRC="doc2.htm" NAME="right" SROLLING="YES">
</FRAMESET>
<BODY>
</BODY>
</HTML>

De asemenea se poate crea un design de cadre cu o combinatie de linii si coloane.
In acest caz, un al doilea element "<FRAMESET>" va fi scris in locul elementului "<FRAME>" care descrie a doua linie. Al doilea element <FRAMESET> va divide spatiul ramas in doua coloane. Pentru aceasta, al doilea element "<FRAMESET>" trebuie urmat de inca doua elemente "<FRAME>"
- Pentru o mai buna intelegere puteti studia exemplu de mai jos, care creaza o pagina ce contine trei cadre:
<HTML>
<HEAD>
<TITLE> TITLU PAGINII </TITLE>
</HEAD>
<FRAMESET COLS="120,*">
<FRAME SRC="baner.htm">
<FRAMESET COLS="120,*">
<FRAME SRC="Meniu.htm" NAME="meniu">
<FRAME SRC="Continut.htm" NAME="date">
</FRAMESET>
</FRAMESET>
<BODY>
</BODY>
</HTML>

2. Atributul target

Cand sunt create link-uri care sunt folosite pentru a deschide pagini in cadre, este nevoie de specificarea unui atribut in eticheta de link "<a>" numit target, acesta spune browser-ului in ce cadru sa deschida pagina.
Atributul target foloseste ca valoare textul din atributul NAME al elementului FRAME in care se va deschide noua pagina.
De exemplu, daca avem un link in Meniu.htm care vrem sa deschidă pagina Doc3.htm in spaţiul in care se afla celalat cadru, de exemplu Continut.htm; codul HTML pentru link va arata astfel in Meniu.htm:

- daca nu se specifica atributul TARGET , pagina se va deschide in cadrul curent
- atributul TARGET trebuie sa aiba acelasi nume specificat in codul HTML, ca si atributul NAME din FRAME-ul in care se doreste afisarea paginii.

Special Target:

3. Adaugarea cadrelor iframe

Pentru crearea unui cadru cu "<iframe>" puteti folosi, ca exemplu, urmatoarea sintaxa (aceasta se adauca in sectiunea BODY, in locul unde doriti sa apara frame-ul):

- Unde "iframe" este elementul principal care indica adaugarea unui frame in pagina.
- "url_pagina" e adresa paginii care va fi incarcata in iframe, "width" si "height" reprezinta lungimea respectiv inaltimea cadrului (exprimata in procente sau pixeli), "scrolling" reprezinta permisiunea de derulare a paginii din cadru (yes sau no), "frameborder" specifica daca va fi sau nu afisata o margine (bordura) pentru cadru (1=da, 0=nu), iar "nume_frame" este numele cadrului (necesar pentru atributul "TARGET" in link-uri sau cand frame-ul este folosit de JavaScript).

Un Test simplu in fiecare zi

HTML
CSS
JavaScript
PHP-MySQL
Engleza
Spaniola
Care tag HTML5 adauga o aplicatie externa (SWF, PDF) in pagina web?
<mark> <embed> <canvas>
<embed src="flash_game.swf" width="450" height="350" />
Ce pseudo-element adauga un anume stil la prima linie de text din element?
:first-letter :before :first-line
#id:first-line {
  font-weight: bold;
  color: blue;
}
Clic pe proprietatea obiectului window care preia sau seteaza adresa URL a paginii curente.
window.location window.self window.status
var url = window.location;
alert(url);
Indicati functia PHP care preia continutul unui fisier sau pagina si-l adauga intr-un sir.
fopen() file_put_contents() file_get_contents()
$homepage = file_get_contents("http://www.marplo.net/");
echo $homepage;
Care din urmatoarele perechi de numere sunt in ordine unul dupa altu?
seven - eight ten - six three - five
This fruit has seven or eight seeds.
- Acest fruct are sapte sau opt seminte.
Care din urmatoarele perechi de numere sunt in ordine unul dupa altu?
diez - seis siete - ocho tres - cinco
Esta fruta tiene siete u ocho semillas.
- Acest fruct are sapte sau opt seminte.
Lucrul cu mai multe cadre

Last accessed pages

  1. Zuma Deluxe (4155)
  2. Subjunctiv trecut - imperfect (4)
  3. Trecut perfect si Trecutul perfect continuu - Present perfect and Continuous (2823)
  4. Trecut perfect - Exercitii si teste incepatori (356)
  5. Baze de date SQL 2 (143)

Popular pages this month

  1. Bubbles3 (3095)
  2. Gramatica limbii engleze - Prezentare Generala (2931)
  3. Prezentul simplu si continuu - Present Tense Simple and Continuous (2164)
  4. Butterfly Kyodai (2012)
  5. Trecutul simplu si continuu - Past Tense Simple and Continuous (1827)