Cod cadru. Iframe și Frame - ce sunt acestea și cum să folosiți cel mai bine cadrele în HTML

Element

Rame

Ce face

Principala diferență între

În marcajul de mai sus, este suficient să înlocuiți adresa site-ului cu oricare alta și, dacă este necesar, să ajustați dimensiunea cadrului.

Cadrele sunt elemente HTML care vă permit să împărțiți o fereastră de browser web în mai multe ferestre independente, fiecare dintre acestea putând încărca un document HTML separat. Fiecare astfel de fereastră (cadru) poate avea propriile bare de defilare și poate funcționa independent de alte ferestre independente sau, dimpotrivă, poate controla conținutul acestora. Acestea pot fi folosite pentru a organiza un meniu care se află constant într-o fereastră, în timp ce informațiile în sine sunt situate într-o altă fereastră. Utilizatorii pot accesa meniul în orice moment, fără a fi nevoie să se întoarcă la pagina anterioară pentru a selecta un alt element de meniu. Utilizarea cadrelor vă permite să „fixați” imagini sau alte elemente statice ale interfeței în fereastra browserului, în timp ce restul paginii se derulează în cadrul.
Cu toate acestea, merită remarcat faptul că în zilele noastre cadrele sunt considerate un instrument învechit, iar site-urile cu cadre sunt acum considerate nedemne, deoarece webmasterii profesioniști nu folosesc niciodată cadre în proiectele lor. Cadrele au o serie de probleme notorii. Ele încurcă motoarele de căutare, de exemplu, pentru că paginile care conțin conținutul nu au legătură cu alte documente. Dacă doriți să primiți vizitatori de la motoarele de căutare, uita de rame. Este imposibil ca un utilizator să plaseze o pagină care îi place în secțiunea de marcaje a browserului, deoarece cadrele ascund adresa paginii pe care se află și arată întotdeauna doar adresa site-ului web. Din acest motiv, creează probleme pentru browsere atunci când urmăresc istoricul și, de asemenea, nu sunt foarte adaptabile la diferite dimensiuni de ecran și dispozitive mobile.
În ciuda faptului că proiectele cu rame se regăsesc în world wide web din ce în ce mai rar, învățarea HTML ar fi incompletă fără acoperirea subiectului cadrelor. Ramele, împreună cu dezavantajele lor, au și unele avantaje care nu ne permit să respingem această tehnologie ca fiind nepromițătoare.

Crearea cadrelor

Structura unui document HTML cu cadre este foarte asemănătoare ca aspect cu formatul unui document HTML obișnuit. Ca și într-un document HTML obișnuit, tot codul este plasat între etichetele împerecheate Şi , și în recipient sunt localizate anteturile. Principala diferență dintre un document cu cadre și un document HTML obișnuit este că un document cu cadre în loc de o etichetă eticheta asociată este aplicată (din setul de cadre englezesc - un set de cadre).
Următorul exemplu arată structura unui document HTML cu cadre:

Exemplu: Structura documentului HTML cu cadre

• Încearcă singur »

În exemplul de mai sus, pagina conține trei zone, fiecare dintre acestea fiind inițial încărcată cu documente HTML frame_top.html, frame_left.html și frame_right.html. Pe lângă documentele HTML, un cadru poate conține și elemente grafice. Pentru a face acest lucru, trebuie să specificați adresa imaginii corespunzătoare în atribut src, De exemplu src="image.gif". Vă rugăm să rețineți că elementul folosit fără etichetă de închidere.
În interiorul recipientului poate conține doar etichete sau alt set de rame acoperite de etichete Şi .
Etichetă are urmatoarele atribute:

• rânduri— descrie cum să împărțiți o pagină în rânduri:
• cols— descrie modul în care o pagină este împărțită în coloane:

În sensul atributelor rânduriŞi cols Este necesar să indicați nu numărul de rânduri sau coloane, ci lățimea și înălțimea cadrelor. Toate valorile din listă sunt separate prin virgule. Dimensiunile pot fi specificate în unități absolute (pixeli) sau procente:

• cols="20%, 80%"— fereastra browserului este împărțită în două coloane folosind atributul cols, coloana din stânga ocupă 20%, iar cea din dreapta 80% din fereastra browserului.
• rows="100, *" Fereastra browserului este împărțită în două ferestre orizontale folosind atributul rânduri, fereastra de sus ocupă 100 de pixeli, iar fereastra de jos ocupă spațiul rămas specificat de simbolul asterisc.

După cum se poate vedea din acest exemplu, containerul cu atribut rânduri mai întâi creează două cadre orizontale și înlocuiește al doilea cadru cu altul care împarte cadrul orizontal de jos în două coloane folosind atributul cols, coloana din stânga ocupă 20%, iar cea din dreapta 80% din fereastra browserului.
Dacă browserul nu acceptă cadre, fereastra va afișa textul situat între etichete </b>Şi <b> . Totul dintre etichete </b>Şi <b> , este ignorat de browserele care acceptă cadre. Astfel, dezvoltatorul trebuie să scrie cod care să dubleze conținutul cadrelor prin alte mijloace și să plaseze acest cod într-un container </b>, atunci toți utilizatorii pot vedea pagina sa web. <br>După cum sa menționat deja, o etichetă neîmperecheată este utilizată pentru a insera un cadru separat într-un document <b><frame> </b>. Atribut <b>src</b> specifică documentul care ar trebui să fie afișat în cadrul acestui cadru, de exemplu: <frame src="frame_top.html">. Dacă atributul <b>src</b> lipsește, este afișat un cadru gol.</p> <h2>Chenarele sau spațiul dintre cadre</h2> <p>În mod implicit, browserul afișează o chenar linie gri, de obicei 3D, între cadre pe care vizitatorii o pot folosi pentru a ajusta dimensiunea cadrului. <br>Chenarul cadrului poate fi manipulat ca orice alt element cadru. Există mai multe atribute ale elementelor pentru aceasta <b><frameset> </b>, permițându-vă să personalizați limitele cadrului. Grosimea liniei de frontieră este determinată de atribut <b>frontieră</b>. Valoarea implicită a grosimii marginii este cinci. <br>Pentru a ascunde chenarul unui cadru, trebuie fie să setați valoarea lățimii marginii la zero, fie să setați valoarea „nu” sau „0” pentru atribut <b>chenarul cadru</b>. Atribut <b>chenarul cadru</b> nu poate lua decât două sensuri opuse. Dacă valoarea atributului <b>chenarul cadru</b> este egal cu „da” sau „1”, atunci va fi afișat chenarul cadrului, iar dacă „0” sau „nu”, atunci nu. Vă rugăm să rețineți că valorile atributelor <b>chenarul cadru</b> variaza pentru <a href="https://ermake.ru/ro/kak-vklyuchit-cookies-v-raznyh-brauzerah-chto-takoe-faily-i-kak-ustanovit/">browsere diferite</a>. Pentru a rezolva această problemă, utilizați atributul de două ori <b>chenarul cadru</b>, iar pentru unele browsere trebuie să adăugați și atributul <b>spațierea cadrelor</b> cu valoarea "0":</p><p> <frameset frameborder="0" framespacing="0" frameborder="no" border="0"> </p><p>În exemplul următor, eliminăm chenarul dintre cadre:</p> <h3>Exemplu: eliminarea chenarului dintre cadre</h3> <ul><li>Încearcă singur »</li> </ul><table><tr><td style="width: 10px;background-color:green;color: white;">frame_left</td> <td style="width: 90%;background-color:lime;color: white;">frame_right</td> </tr></table><p> <!DOCTYPE html> <html><br><head><br><meta charset="UTF-8"> <title>Rame fără margini</title> </head> <frameset cols="100,*" frameborder="0" framespacing="0" frameborder="no" border="0"> <frame src="frame_left.html" name=" frame_left" > <frame src="frame_right.html" name="frame_right" > </frameset> </html></p> <p>Dacă eliminați chenarul dintre cadre, vizitatorii nu vor putea redimensiona cadrul în browser. De asemenea, puteți împiedica redimensionarea cadrului prin păstrarea chenarelor folosind atributul <b>noresize</b>:</p><p> <frame src="frame_left.html" noresize> </p><p>Folosind atributul <b>culoarea chenarului</b> Puteți schimba culoarea chenarului cadrului, trebuie doar să specificați codul sau numele de culoare rezervată corespunzător. <br>Mai jos este un exemplu de pagină HTML care conține atributele de control al chenarului cadru descrise mai sus: culoarea chenarului este roșie, dimensiunea cadrului superior nu poate fi modificată:</p> <h3>Exemplu: Frame Border Control</h3> <ul><li>Încearcă singur »</li> </ul><table style="border-collapse:collapse;"><tr><td style="border-bottom: 4px solid red;background-color:blue;color: white;" colspan="2">frame_top</td> </tr><tr><td style="border-right: 4px solid red;width: 20%;background-color:green;color: white;">frame_left</td> <td style="width: 80%;background-color:lime;color: white;">frame_right</td> </tr></table><p> <!DOCTYPE html> <html><br><head><br><meta charset="UTF-8"> <title>Gestionarea frontierei cadru</title> </head> <frameset rows="150, *" border="10" bordercolor="red" frameborder="1" frameborder="yes"> <frame src="frame_top.html" noresize> <frameset cols="20%, 80%"> <frame src="frame_left.html"> <frame src="frame_right.html"> </frameset> </frameset> </html></p> <p>Dacă doriți să poziționați pagina afișată în interiorul cadrului mai aproape de marginile sale sau, dimpotrivă, să o îndepărtați mai departe, modificați atributele <b>înălțimea marginii</b>Şi <b>lățimea marginii</b> etichetă <b><frame> </b>. Atribut <b>înălțimea marginii</b> definește umplutura dintre conținutul cadrului și marginile sale de sus și de jos. Sintaxă:</p><p> <frame marginheight="число"> </p><p>Atribut <b>lățimea marginii</b> definește umplutura dintre conținutul cadrului și marginile din dreapta și din stânga acestuia. Sintaxă:</p><p> <frame marginwidth="число"> </p><p>Această linie html, de exemplu, poziționează pagina afișată aproape de chenarul cadrului:</p> <p>Dacă pagina afișează o bară de derulare pe care nu o doriți, puteți rezolva problema specificând atributul <b>defilare</b>="nu" în etichetă <b><frame> </b>. Dar rețineți că dacă cadrul nu este suficient de mare pentru a afișa întregul conținut al paginii, atunci vizitatorul nu va avea cum să deruleze pagina afișată.</p> <h2>Legături în interiorul cadrelor</h2> <p>Urmărirea unui link într-un document HTML obișnuit se efectuează după cum urmează: faceți clic pe link și documentul curent este înlocuit cu unul nou în fereastra curentă sau într-o nouă fereastră de browser. Când utilizați cadre, schema de încărcare a documentelor HTML diferă de cea obișnuită, iar principala diferență este capacitatea de a încărca un document HTML într-un cadru dintr-un alt cadru. <br>Pentru a încărca un document într-un cadru specific, utilizați atributul <b>ţintă</b> etichetă <b><a> </b>. Ca valoare de atribut <b>ţintă</b> se folosește numele cadrului în care va fi încărcat documentul specificat de atribut <b>nume</b> etichetă <b><frame> </b>. De asemenea, merită remarcat faptul că numele cadrului trebuie să înceapă fie cu un număr, fie cu o literă latină. Următoarele nume sunt folosite ca nume rezervate:</p> <p>Pentru link-urile externe, ar trebui să setați atributul target fie la _top, fie la _blank pentru a vă asigura că proiectele terță parte nu apar în cadrele dvs., ci mai degrabă umple toată fereastra browserului.</p> <p>Următorul exemplu arată un document HTML în care cadrul din dreapta încarcă o pagină dintr-un link plasat în cadrul de sus. Link către documentul care se va deschide în cadrul din dreapta:</p><p> <a href="http://www.google.com" target="frame_right">Google</a> </p><p>Cadrul din dreapta primește un nume <i>frame_right</i>:</p><p> <frame src="frame_right.html" name="frame_right"> </p><p>Pentru a încărca un document într-un cadru specificat, utilizați construcția <i>target="frame_right"</i>, așa cum se arată în exemplu:</p> <h3>Exemplu: Link către un alt cadru</h3> <ul><li>Încearcă singur »</li> </ul><p> <!DOCTYPE html> <html><br><head><br><meta charset="UTF-8"> <title>Link către un alt cadru</title> </head> <frameset rows="100, *"> <frame src="frame_topic.html"> <frameset cols="20%, 80%"> <frame src="frame_left.html"> <frame src="frame_right.html" name="frame_right"> </frameset> <noframes> <p>Browserul dvs. nu afișează cadre</p>