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 afiseaza textul oblic?
<strong> <pre> <em>
<p>Cursuri, Jocuri, Anime: <em>www.MarPlo.net</em></p>
Care proprietate CSS defineste spatiul dintre continutul elementului si bordura lui?
margin padding position
h3 {
  padding: 2px 0.2em;
}
Clic pe metoda ce returneaza primul element indicat de selectorii specificati.
getElementsByName() querySelector() querySelectorAll()
// preia primul Div cu class="cls", si afiseaza continutul
var elm = document.querySelector("div.cls");
alert(elm.innerHTML);
Indicati variabila PHP ce contine datele din formular trimise cu method="post".
$_SESSION $_GET $_POST
if(isset($_POST["field"])) {
  echo $_POST["field"];
}
Indicati pronumele corespunzator celui din paranteza in propozitia: "(Noi) speak english".
I They We
We speak english.
- Noi vorbim engleza.
Indicati pronumele corespunzator celui din paranteza in propozitia: "(Noi) hablamos español".
Ellos Vosotros Nosotros
Nosotros hablamos español.
- Noi vorbim spaniola.
Lucrul cu mai multe cadre

Last accessed pages

  1. Numere cardinale 1-10 (881)
  2. Baze de date SQL 2 (601)
  3. Cursuri limba engleza gratuite si lectii online (13661)
  4. Notiuni fundamentale despre bazele de date SQL (2600)
  5. CSS3 - Background proprietati noi (256)

Popular pages this month

  1. Gramatica limbii engleze - Prezentare Generala (1939)
  2. Creare si editare pagini HTML (1110)
  3. Cursuri si Tutoriale: Spaniola, Engleza, HTML, CSS, Php-Mysql, JavaScript, Ajax (1033)
  4. Curs HTML gratuit Tutoriale HTML5 (949)
  5. Coduri pt culori (778)