Iframe și Frame - ce sunt acestea și cum să utilizați cel mai bine cadrele în Html. Specificați calea în atributul Src al elementului Frame

Bună ziua, dragi cititori ai blogului. Astăzi vom vorbi despre cadrele în HTML. Este clar că vom începe de la început, și anume cu ce fel de animal este acesta. De asemenea, vom vorbi despre prezentul (Frame) și viitorul (Iframe) acestor elemente în versiunea actuală a limbajului de marcare hipertext și în noul standard HTML 5 cu .

La finalul articolului, după descriere detaliată procesul de creare a cadrelor încorporate și structura lor clasică în cod HTML (folosit deja rar), vom aborda problema relevanței construirii unui site pe ele și, de asemenea, vom discuta moduri posibile aplicarea lor în perioada actuală de timp folosind exemplul blogului meu.

Ce este asta? Se pare că pot fi utilizate nu numai pe site-uri web, ci și în orice aplicație pentru programe, dar diferă prin faptul că fereastra unei pagini web sau a unei aplicații va fi împărțită în mai multe zone, în fiecare dintre acestea fiind încărcat un document separat. . Mai mult, aceste zone ale cadrului se comportă independent unele de altele.

Probabil cel mai evident exemplu de utilizare a acestora, pe care aproape toți l-ați întâlnit, sunt așa-numitele fișiere de ajutor pe care le au multe programe instalate pe computer.

Fișierul cu meniul de ajutor este încărcat în fereastra din stânga, iar documentul corespunzător elementului de meniu selectat este afișat în fereastra din dreapta. Este de remarcat faptul că această structură vă permite să nu reîncărcați fișierul cu meniul în fereastra din stânga atunci când deschideți un document nou în cel din dreapta. Acesta este tocmai principalul avantaj al folosirii cadrelor în HTML.

De fapt, chiar numele acestor elemente ar trebui interpretat ca o fereastră independentă. Cu ajutorul cadrelor, avem posibilitatea de a împărți o fereastră mare în mai multe fragmente, care la rândul lor pot servi drept receptori pentru documente separate, independente unele de altele (pagini, texte, imagini, videoclipuri etc.).

Cum se creează o structură de cadru în limbajul de marcare hipertext? Dacă vorbim despre standardul Html 4.01 (conform clasificării), care este principalul la momentul actual, atunci sunt folosite trei elemente pentru aceasta - Frame, Frameset și Noframes.

Dacă vorbim despre standardul Html 5 (viitorul nostru, dintre care unele elemente sunt deja suportate de multe browsere), atunci nu vor mai exista etichete Frame, Frameset și Noframes, precum și structura clasică a cadrelor în schimb; o singură etichetă Iframe (cadru încorporat) , despre care vom vorbi la început, apoi ne vom îndrepta atenția către schema clasică din versiunea 4.01, care este de fapt utilizată acum.

Iframe, spre deosebire de clasicele discutate mai jos, nu necesită înlocuirea etichetei Body cu etichete Frameset. Aceste. această etichetă poate fi inserată în pagini obișnuite, de exemplu, în interiorul unui paragraf sau oriunde altundeva. În esență, acest element este foarte asemănător cu eticheta Img pe care am luat-o în considerare deja.

Este un element inline cu conținut înlocuit, deoarece se comportă exact ca un element inline, dar afișează conținut străin în interiorul acestuia. continut extern. Există doar patru astfel de elemente în limbajul HTML - Img, Iframe, Object și Embed. Prin urmare, eroul nostru implică prezența unui fișier extern care va fi încărcat într-o zonă a cărei dimensiune este setată folosind atributele acestei etichete.

Că. Un Iframe este un element colector în care este încărcat un obiect extern (cum ar fi un videoclip). Și pentru a indica calea către acest fișier, care ar trebui să fie încărcat pe pagină, utilizați atributul special Src. Dar, spre deosebire de Img, elementul Iframe este împerecheat, adică. Există și o etichetă de închidere:

Acest exemplu arată rezultatul pe o pagină video Youtube folosind un Iframe. Pentru a limita zona cadrului (ferestrei) în care va fi încărcat fișier extern, există atribute Lățime și Înălțime, ale căror valori sunt specificate în pixeli:

Aceste. această etichetă creează o zonă în care este încărcat un obiect extern (nu contează dacă este de pe site-ul tău sau dintr-o altă resursă). Lățimea și înălțimea zonei sunt specificate folosind Width and Height, iar atributul Src specifică calea către acest obiect.

Elementul Iframe a moștenit toate aceste atribute de la etichete inline similare cu conținut înlocuit (cum ar fi imaginea deja menționată mai sus). Ei bine, el a luat și atributele Hspace și Vspace din imagini, care vă permit să setați indentările de la marginile cadrului până la textul care se înfășoară în jurul acestuia.

De asemenea, este semnificativ faptul că alinierea cadrului încorporat se realizează exact în același mod cum am putut vedea când studiem imaginile în Html - . Același Align, dar pentru eticheta Iframe cu posibile valori de Jos, Sus, Mijloc, Stânga și Dreapta.

Dar acest element a preluat și câteva atribute de la eticheta Frame din structura clasică a cadrului, despre care vom vorbi în detaliu mai jos în text. Aceste atribute includ Nume, a cărui valoare poate fi folosită ca valoare, astfel încât documentul de care aveți nevoie atunci când faceți clic pe un link să se deschidă în fereastra acestui cadru (citiți mai multe mai jos).

De asemenea, în Iframe, atributul Frameborder a migrat din eticheta Frame, care are doar două valori - fie 0 (cadru din jurul cadrului nu este afișat), fie 1 (cadru este vizibil). Valoarea implicită este Frameborder=1, deci pentru a o elimina va trebui să introduceți Frameborder="0":

Atributul Scrolling a fost, de asemenea, transferat de la Frame la acest element, care are o valoare implicită de Auto - barele de defilare din cadru vor apărea după cum este necesar atunci când conținutul este mai mare decât dimensiunea ferestrei destinată să-l afișeze.

Ei bine, atributele Marginwidth și Marginheight s-au mutat și din elementul Frame. Ele vor fi discutate în detaliu mai jos în text, dar pe scurt - vă permit să setați indentarea în lățime și înălțime de la marginile cadrului până la conținutul care este plasat în acesta.

După cum am menționat deja, un exemplu clar de utilizare a unui Iframe este:

Prin inserarea unui Iframe direct într-o pagină web, veți primi o ieșire a unui videoclip de pe YouTube. Concluzionăm că acest element este o încrucișare între elementele inline cu conținut înlocuit și, de fapt, cadrele clasice, despre care vom discuta acum.

Deci, crearea unei structuri clasice de cadru începe cu faptul că scrieți în codul HTML în loc de etichetele Body de deschidere și închidere, care de obicei ar trebui să fie prezente în orice document, înlocuindu-l cu un container bazat pe elemente Frameset.

Punctul fundamental este că elementul Body nu poate fi utilizat în acest caz - fie Body (pentru un document obișnuit) fie Frameset (când se creează o structură de cadru de document):

Fiecare cadru pe care îl creăm în interiorul celui principal este creat folosind un element Cadru separat. Această etichetă este unică și în ea setăm calea către documentul care va fi încărcat în această fereastră.

Al treilea element la care nu am atins încă este Noframes. Este asociat și vă permite să scrieți un text în interior, care va fi procesat de browser și afișat pe pagină web numai dacă același browser (sau alt dispozitiv de afișare) nu acceptă cadre. Acest lucru se poate întâmpla, de exemplu, dacă utilizați un browser pentru dispozitive mobile.

De obicei, Noframes adaugă nu numai informații despre situația actuală cu imposibilitatea procesării structurii cadrului, dar adaugă și posibilitatea de a merge la alte pagini, unde puteți continua să lucrați fără a le folosi. Este greu să spui altceva despre el, așa că hai să continuăm.

Se pare că elementul Frameset, folosit în locul etichetei Body, ocupă tot spațiul alocat zonei de vizualizare, iar cadrele vor fi create în interiorul acestei zone folosind elemente individuale Cadru. În acest sens, se pune întrebarea - cum să împărțiți zona de vizualizare între ferestre separate sau, cu alte cuvinte, cum să setați dimensiunea fiecăreia dintre ele.

Acest lucru se face prin adăugarea atributelor corespunzătoare elementului Frameset. Sunt două dintre ele - Cols și Rows. Cols setează împărțirea unei ferestre mari în cadre sau coloane verticale, iar Rows vă permite să o împărțiți în ferestre ori rânduri orizontale.

Valorile pentru Cols și Rows ale etichetei Html Frameset sunt numere separate prin virgule (fără spații). Aceste numere stabilesc proporțiile ferestrelor pe care dorim să le obținem ca rezultat. Prin urmare, indiferent câte numere separate prin virgulă sunt scrise în coloane sau rânduri, rezultatul va fi numărul de cadre pe care le avem.

De exemplu, folosind această notație vom obține trei coloane verticale a căror lățime va corespunde proporțiilor 2:5:3.

Deoarece am setat proporțiile pentru trei cadre, va trebui să includem trei elemente Frame între etichetele Frameset de deschidere și de închidere, cel puțin fără a specifica atribute suplimentare:

Ca rezultat, structura noastră de cadru, constând din trei ferestre goale, va arăta astfel:

În acest exemplu, setăm dimensiunile ferestrei (Frame) folosind procente, care sunt luate din lățimea zonei de vizualizare (acesta este cazul când se utilizează Cols) sau din înălțimea acesteia (Rânduri). La schimbarea ferestrei de vizualizare, relația procentuală dintre dimensiunile cadrelor va fi menținută. Dar în loc de procente, puteți folosi și pur și simplu numere care vor însemna. Aici, cred, nici nu ar trebui să apară dificultăți de înțelegere.

Dar există și o opțiune destul de neobișnuită în desemnările dimensiunilor, care arată ca un asterisc „*”. Mai mult, poate fi fie doar „*”, fie un asterisc cu un număr în față, de exemplu, „3*”. Un lucru inteligent care seamănă foarte mult cu procentele și înseamnă că împărțim spațiul pentru Cadru proporțional.

Să ne uităm la un exemplu. Acum să alegem să împărțim fereastra în rânduri orizontale folosind Rows:

Ce înseamnă această intrare? Întreaga zonă de vizionare disponibilă pe verticală va fi împărțită în trei linii. Înălțimea primului va fi luată la 200 de pixeli, a doua - la 500, dar a treia linie va ocupa tot spațiul rămas în înălțime, deoarece „*” a fost folosit ca dimensiune.

Ceea ce este de remarcat este că valorile „*” și „1*” înseamnă același lucru - împărțim tot spațiul rămas într-unul singur și dăm această parte acestui cadru (ei bine, adică tot spațiul rămas).

Dar uite ce se întâmplă dacă folosești valoarea „*” cu un număr pentru a împărți proporțional:

Care crezi că vor fi dimensiunile Cadrei în acest caz? Este clar că a doua linie va avea cu siguranță o înălțime de 100 de pixeli. Dar cum va fi împărțit spațiul rămas în înălțime între al treilea și primul rând?

Este destul de ușor de calculat - doar adăugați patru (4*) la doi (2*) și împărțiți la acest numitor (rețineți fracțiile din programa școlară) doi și patru. Aceste. obținem că prima coloană cu un cadru va ocupa o treime din spațiul rămas în înălțime, iar a treia coloană va ocupa două treimi. Sau, cu alte cuvinte, al treilea va fi de două ori mai mare decât primul:

Puteți utiliza toate cele trei moduri de a dimensiona ferestrele cadru într-un singur atribut, de exemplu:

Ca urmare, vom obține prima coloană Frame cu o lățime de zece procente din întreaga suprafață disponibilă, a doua - 100 de pixeli, iar restul de trei vor avea o lățime în proporții de patru, trei și două nouăzeci din spațiul de lățime rămas. Deci totul este simplu și clar.

Dacă doriți să împărțiți fereastra principală nu numai în cadre orizontale și verticale, ci, de exemplu, în combinațiile acestora, atunci puteți utiliza structura imbricată a elementelor Frameset separat pentru coloane și separat pentru rânduri. De exemplu, pentru a obține structura afișată în captura de ecran de mai jos, este suficient să utilizați următoarea construcție:

Aceste. mai întâi împărțim cu "frameset cols="20%,80%"" totul spatiu disponibilîn două coloane pe verticală și setați conținutul coloanei din dreapta cu eticheta „cadru”, dar în loc să adăugăm un element „cadru” pentru coloana din stânga, deschidem un nou „rânduri frameset = „10%,*””.

Și cu ajutorul acesteia împărțim coloana din dreapta în două linii cu cadre, al căror conținut este setat folosind două etichete „cadru”, după care închidem ambele containere „set de cadru”. Totul este simplu și logic.

Dar am vorbit cu toții despre elementul Frameset și atributele sale Cols și Rows, cu ajutorul cărora formăm structura și le stabilim dimensiunile. Acum să ne dăm seama cum să afișam documentele necesare în cadrele necesare și cum să configurați interacțiunea dintre ferestrele lor.

Deci, cum gestionăm aspectul? ferestre create? Toate acestea sunt conținute în atributele etichetei Frame. Primul care merită menționat este Src. L-am întâlnit deja în tag Img când ne-am uitat la inserarea imaginilor în codul HTML. Esența sa nu s-a schimbat și încă vă permite să specificați calea către documentul care ar trebui să fie încărcat în cadru.

Calea către document în Src poate fi specificată ca . Căile relative sunt de obicei folosite pentru un document care se află pe propria resursă, dar veți avea nevoie de căi absolute atunci când doriți să încărcați un document dintr-un alt site într-o fereastră cadru.

Dacă atributul Src nu este specificat, indicând calea către documentul solicitat, apoi un document gol va fi încărcat în fereastră. Personal, am făcut odată un lucru similar pentru blogul meu (ca element suplimentar de navigare) și, în același timp, am creat un folder separat pentru acesta pe serverul de găzduire și am plasat acolo nu doar un fișier HTML cu o structură de cadru (pe care l-am numit index). .html), dar și toate încărcate în diverse ferestre de documente, precum și fișiere imagine care au fost folosite ca fundal.

Prin urmare, mi-a fost mai ușor să folosesc linkuri relative în atributul Src al etichetei Frame:

Ceea ce este de remarcat este că dacă înlocuiți toate linkurile date în acest cod de la relativ la absolut (cum ar fi https://site/navigator/joomla.html) și deschideți acest fișier într-un browser, atunci documentele specificate în Frame vor fi încărcate de pe serverul meu și veți vedea o imagine similară în browser. Mai mult, nu contează unde va fi localizat fișierul tău cu structura de cadru (index.html) - pe computer sau pe găzduire.

În exemplul prezentat în figură, o pagină cu un anumit meniu, care este un meniu obișnuit, este încărcată în fereastra din cadrul din stânga. Dar ceea ce contează nu este modul în care este format meniul, ci ce se întâmplă după ce faceți clic pe oricare dintre linkurile acestuia.

Dacă faceți acest lucru, atunci totul se va întâmpla exact așa cum ar trebui - documentul se va deschide în fereastra din dreapta jos. Dar pentru asta a trebuit să folosesc un mic truc, deoarece în versiunea implicită documentul se deschidea pe toată dimensiunea ferestrei, înlocuind structura cadrului, de care nu aveam deloc nevoie, deoarece meniul de navigare din cadrele din stânga și din partea de sus a dispărut.

Deci, când am vorbit despre hyperlinkuri, am menționat atributul etichetei „A” ca Target=_blank. Îți amintești pentru ce este? Este corect să deschideți documentul legat într-o fereastră nouă. În mod implicit, ar trebui să se deschidă în aceeași fereastră, ceea ce este echivalent cu target="_self".

Dar capacitățile lui Target nu se opresc aici. Se pare că îi puteți adăuga o valoare sub forma unui nume de cadru, care este specificat anterior în atributul special Name al etichetei Frame. Apoi documentul prin acest link nu se va deschide în aceeași fereastră, ocupând tot spațiul său, ci în Cadrul pe care l-ați specificat. Este clar? Dacă nu în totalitate, atunci va deveni clar acum când vom analiza exemplul.

Deci, să revenim la exemplul nostru prezentat în figura de mai sus. Trebuie să deschidem pagini folosind link-uri din fereastra din stânga în cadrul din dreapta jos (mare). Prin urmare, mai întâi trebuie să dați un nume acestei ferestre mari folosind atributul Name din eticheta Frame.

L-au făcut și l-au numit „ktona”. Acum puteți deschide în siguranță fișierul care este încărcat ca meniu în fereastra din stânga și puteți adăuga atributul Target="ktona" la toate etichetele A din el:

Istoria Joomla și a componentei VirtueMart

Bineînțeles, folosind instrumentul de căutare și înlocuire, nu va fi dificil să îl punem jos pentru toate hyperlinkurile, dar de ce să încărcăm codul inutil când avem o oportunitate grozavă de a folosi eticheta specială Base, despre care am menționat-o deja în același articol despre hyperlinkuri, când au vorbit despre utilizarea Target blank.

Este suficient doar să plasați elementul target="ktona" de bază între etichetele Head de deschidere și de închidere și toate linkurile din codul HTML al acestui document vor deschide pagini noi în cadrul specificat numit "ktona":

Apropo, dacă luăm în considerare instrumentul meu odată existent ca exemplu, atunci trebuie totuși să ne asigurăm că toate linkurile din fereastra orizontală de sus își deschid paginile în cadrul vertical din stânga, care servește drept meniu din stânga. Ce trebuie făcut pentru asta?

Ei bine, mai întâi, trebuie să dai un nume cadrului vertical din stânga:

Și în fișierul care este încărcat în fereastra de sus (gor.html), trebuie să adăugați elementul target="gor" de bază:

Asta e, acum am făcut totul bine. Toate documentele care urmează legăturile din cadrul de sus se deschid în fereastra din stânga, iar toate linkurile din acesta vor deschide documentele în cadrul central și cel mai mare. După părerea mea, totul este simplu și logic.

Să vedem acum ce atribute în afară de Src și Name pot fi folosite în eticheta Frame pentru a personaliza aspectul cadrelor. Să începem cu Scrolling. Folosind-o, putem configura separat afișarea barelor de defilare pentru fiecare fereastră a structurii dvs. de cadre.

Derularea are o valoare implicită Auto - browserul va decide automat, în funcție de dimensiunea documentului încărcat în cadru, dacă să afișeze sau nu o bară de defilare. Dacă documentul nu se încadrează complet în fereastră, va apărea o bară de defilare, care vă va permite să vedeți totul până la sfârșit.

De asemenea, puteți utiliza valorile Da (barele de defilare din fereastră vor fi întotdeauna afișate, chiar dacă documentul se încadrează complet în el) și Nu (barele de defilare nu vor apărea deloc, chiar dacă o parte a documentului nu se potrivește) ca valori pentru derulare.

În instrumentul meu odată existent, am folosit valoarea implicită a Auto și barele de defilare din cadre au apărut după cum era necesar:

Următorul atribut al etichetei Frame, Noresize, este un singur atribut (nu are valori). Înregistrându-l, veți interzice astfel modificarea dimensiunii sale, care se face implicit prin simpla glisare a marginii cadrelor cu mouse-ul.

Când mutați cursorul mouse-ului la margine, veți vedea că cursorul se va transforma într-o săgeată cu două capete și acum, făcând clic pe butonul din stânga mouse-ul, puteți muta chenarul după cum doriți. Noresize impune o interdicție asupra acestei intenții (când mutați cursorul mouse-ului la marginea ferestrelor, nu veți mai vedea săgeata bidirecțională).

Un alt atribut vizual este Frameborder. Folosind-o, puteți specifica dacă să desenați un cadru (chenar) între cadre sau nu. Frameborder poate avea doar două valori posibile - fie 0 (nu desenați un cadru), fie 1 (arată o chenar). Valoarea implicită, desigur, este 1.

Există o subtilitate. Dacă doriți să eliminați chenarul vizibil, atunci va trebui să adăugați Frameborder=0 la toate etichetele Frame ale cadrelor între care doriți să eliminați chenarele vizibile.

Ei bine, mai trebuie să luăm în considerare câteva atribute ale etichetei Frame - Marginwidth și Marginheight, care setează marginile în lățime (dreapta și stânga) și înălțimea (sus și jos) de la marginile ferestrei până la conținutul încărcat în ea. (numărul înseamnă numărul de pixeli ai marjei):

Să vedem care este dezavantajul fundamental al structurilor clasice, care în esență pune capăt utilizării lor la crearea unui site web. Constă în faptul că este imposibil să-i urmărești starea folosind această structură de cadru.

Structurile complexe pot avea mii de stări diferite (variante de documente deschise în ferestre cadru diferite), dar adresa URL a acestei structuri nu se schimbă. Din această cauză, va fi imposibil să utilizați marcajele browserului sau să trimiteți link-uri către paginile care vă plac altor utilizatori. De ce?

Pentru că adresa rămâne neschimbată chiar și atunci când o deschideți din marcajele browserului sau dintr-un e-mail e-mail, veți obține o pagină cu starea de pornire a structurii cadrului și nu starea pe care doriți să o salvați.

Deși, desigur, această problemă poate fi rezolvată, dar nu cu instrumente HTML, ci cu ajutorul unui server (de exemplu, Php) sau al limbajelor de programare client (JavaScript), iar aceste soluții nu vor fi sută la sută eficiente. Astfel de soluții, de fapt, vă permit să adăugați date suplimentare despre starea sa actuală la adresa URL a structurii cadrului, dar acest lucru nu este ușor de făcut, iar fiabilitatea nu va fi absolută.

Acesta este primul dezavantaj al folosirii cadrelor pentru a crea site-uri web și este foarte semnificativ, dar există un alt dezavantaj uriaș. Motoarele de căutare, desigur, au învățat de mult să le indexeze și să extragă din ele adresele acelor documente care sunt încărcate în ferestrele lor. Problema este alta.

Când un utilizator trece de la rezultatele căutării Yandex sau Google pe site-ul dvs. web construit pe baza unei structuri de cadre, se va deschide doar documentul care a fost încărcat într-unul dintre cadre, și nu întreaga structură. Înțelegi despre ce vorbesc?

Utilizatorul va vedea documentul și nu va vedea navigarea pe site-ul dvs., deoarece acesta va fi protejat în alte ferestre, iar acestea sunt încărcate doar ca parte a întregii structuri.

Ca urmare, un site construit pe cadre devine pur și simplu inutilizabil. Deși, din nou, există soluții la această problemă bazate pe scripturi de server, atunci când se va efectua o redirecționare de la adresele documentelor individuale către o structură de cadru situată în în starea potrivită, dar din nou acest lucru este foarte dificil și nu întotdeauna de încredere.

În general, concluzia poate fi trasă fără ambiguitate - nu este nevoie să creați site-uri web pe cadre. Dar ele sunt folosite în mod constant pentru a crea ajutor pentru diverse aplicații și pot fi utile în alte lucruri mici.

De exemplu, am creat o structură de cadru, pe care am numit-o „Navigator” (acum a fost eliminată temporar) și care a devenit un fel de meniu extern extins pentru blogul meu, care, mi se pare, ar trebui să simplifice lucrul cu resursa și, prin urmare, îmbunătățirea „no prostii” au o influență foarte, foarte puternică asupra promovării site-ului.

Dar, totuși, pentru a evita orice probleme cu motoarele de căutare, am închis toată această structură de cadru și am adăugat, pentru orice eventualitate, la toate fișiere HTML Metaetichetă Rodots cu interzicerea indexării lor:

JOOMLA

Dar toate aceste restricții se aplică numai structurilor de pe etichetele Frame și Frameset, iar cadrele încorporate pe etichetele Iframe nu au dezavantaje vizibile și pot și chiar ar trebui folosite în proiectele dvs., cel puțin pentru inserarea videoclipurilor din YouTube.

Mult succes pentru tine! Ne vedem curând pe paginile site-ului blogului

S-ar putea să fiți interesat

Directivele de comentariu și Doctype în codul HTML, precum și conceptul de elemente bloc și inline (etichete)
Embed and object - Etichete HTML pentru afișarea conținutului media (video, flash, audio) pe paginile web
Img - Etichetă HTML pentru inserarea unei imagini (Src), alinierea și înfășurarea textului în jurul acesteia (aliniere), precum și setarea unui fundal (fundal)
Ce este limbajul de marcare hipertext HTML și cum să vizualizați o listă cu toate etichetele în validatorul W3C Select, Option, Textarea, Label, Fieldset, Legend - tags Formulare HTML liste derulante și câmp de text
Liste în cod HTML - etichete UL, OL, LI și DL
Font (față, dimensiune și culoare), etichete Blockquote și Pre - formatare de text moștenită în HTML pur (fără folosind CSS)
Cum sunt setate culorile în codul Html și CSS, selecția nuanțelor RGB în tabele, ieșirea Yandex și alte programe

În zorii creării site-ului web, resursele web foloseau pe scară largă cadrele pentru a afișa părți individuale ale paginilor. Dar odată cu apariția noii versiuni de HTML 5, totul s-a schimbat. Elemente de marcare și sunt depreciate. Au fost înlocuite cu o singură etichetă - . Cum se adaugă la html? Exemplul de mai jos va fi clar chiar și pentru un începător în programare.

Cadrul este baza majorității primelor pagini web. Dacă este tradus literal, acest cuvânt înseamnă „cadru”, adică un cadru este o mică parte a unei pagini dintr-un browser. Utilizarea pe scară largă a cadrelor în trecut poate fi explicată prin calitatea scăzută și costul ridicat al traficului de internet. De regulă, site-ul a fost împărțit în 3-5 părți, fiecare dintre acestea având un scop specific:

• „header” (cadru de sus de-a lungul lățimii paginii) - afișează numele resursei;
• „sticlă” stânga/dreapta - afișaj meniu;
• Cadrul central este o afișare a conținutului site-ului.

Împărțirea paginii în părți a făcut posibilă supraîncărcarea doar a unei anumite părți la actualizarea acesteia. De exemplu, utilizatorul a făcut clic pe un element de meniu și conținut nou a fost descărcat în cadrul central.

De ce este necesar în HTML? Un exemplu este inserarea de conținut dintr-o resursă terță parte. Situația clasică este atunci când un dezvoltator web dorește să arate locația unui obiect pe o hartă. Ce ar trebuii să fac? Desenați un plan de site de la zero? Nu - există o soluție mai simplă: încorporați un element Google Map, Yandex Maps sau 2GIS în pagină. Problema este rezolvată în patru pași.

În plus, puteți selecta dimensiunea hărții și puteți configura alte opțiuni de afișare.

Cum altfel îl poți folosi în HTML?? Un exemplu este inserarea materialelor video din resursa Youtube. Tehnologiile multimedia atrag utilizatorii de internet, motiv pentru care conținutul video este atât de popular. Dezvoltatorul se va ocupa rapid de instalarea videoclipului.

Ambele exemple au folosit generarea automată a codului, dar dezvoltatorii profesioniști ar trebui să fie capabili să scrie codul ei înșiși. În primul rând, acest lucru le va permite să înțeleagă aspectul paginii și, dacă este necesar, să o modifice. În al doilea rând, marcarea elementelor site-ului (chiar dacă aparțin unei resurse externe) nu se formează întotdeauna fără participarea webmasterului. Aici intră în joc calificările înalte ale dezvoltatorului.

Deci, înainte de a începe să așezați pagina, trebuie să luați în considerare eticheta iframe (html): ce este și cum să o utilizați corect.

În primul rând, trebuie remarcat faptul că eticheta este asociată. Între elementele de deschidere și de închidere indicați conținutul care va fi afișat în browserele care nu acceptă acest element de marcare. Principalele atribute ale etichetei:

• latime(latime);
• înălțime (înălțime);
• src (adresa resursei descărcate);
• alinierea (metoda de aliniere);
• chenar cadru;
• ecran complet permis.

Astfel, codul pentru . Exemplul HTML este demonstrat în întregime mai jos:

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

Verificarea unui site pentru viruși adesea nu detectează inserările iframe, care pot include link-uri către site-uri dubioase, dar noua versiune Pluginul antivirus WP le va indica.

Inserările iframe în sine nu sunt cod rău intenționat, așa că adesea nu sunt detectate de serviciile online care scanează un site pentru viruși. Folosind inserții Iframe, sunt adesea încărcate fișiere care pot fi localizate pe o resursă externă. De exemplu, această metodă poate fi folosită pentru a încărca un videoclip pe site-ul dvs. de pe You Tube. Dar foarte des, inserțiile iframe sunt folosite de atacatori pentru a încărca fișiere cu conținut suspect pe site-ul web al victimei.

Am scris deja că am întâlnit în mod repetat site-uri evident infectate, dar verificarea acestora pe resursa antivirus-alarm.ru folosind baze de date ale dezvoltatorilor de antivirus de vârf nu a scos la iveală nimic suspect. O verificare pe 2ip.ru a indicat prezența unor inserții iframe suspecte, dar fără a indica un loc anume în cod unde ar putea fi găsite. De asemenea, nu a indicat dacă aceste inserții au fost benefice sau rău intenționate.

Dar odată cu eliberarea ultima versiune Cu pluginul WP, situația s-a schimbat. Potrivit dezvoltatorului, acest plugin arată acum inserții iframe. Și tu însuți vei putea determina dacă sunt dăunătoare sau nu. Știind cum arată o inserare iframe:

Dacă pluginul îl detectează, pe baza adresei cărei resursă este indicată în acest insert, este ușor de determinat dacă este util sau dăunător.

Spre deosebire de antivirusurile pentru computere, care ele însele găsesc și elimină coduri rău intenționate, majoritatea antivirusurilor pentru site, cum ar fi AntiVirus, găsesc doar coduri suspecte din punctul lor de vedere. Decizia de a-l elimina și eliminarea în sine sunt luate de utilizator. Mai mult, pentru începătorii care nu sunt familiarizați cu PHP, doar pluginul TAC, conceput pentru a testa tema, va ajuta cu adevărat. Știu un singur plugin care nu numai că găsește, dar și elimină codul prost. Din păcate, acest plugin are o caracteristică neplăcută. Dacă nu poate face față infecției de pe site, atunci blochează accesul la site fără a cere permisiunea.

Prin urmare, nu ar trebui să instalați pluginuri antivirus dacă nu se întâmplă nimic suspect pe site-ul dvs. Pentru a efectua o verificare preventivă a unui site web pentru viruși, este mai înțelept să utilizați serviciile online menționate mai sus. Numai după ce a fost identificat ceva suspect pe aceste servicii, puteți apela la pluginuri care vă pot ajuta să specificați locația cod rău intenționat. Din nou, nu toată lumea are calificările pentru asta. Începătorilor le va fi mai ușor să caute ajutor de la personalul tehnic. suport pentru gazduire.

Cea mai mare parte a site-urilor se infectează după ce computerul proprietarului este infectat. Drept urmare, datele de conectare și parola de administrator sunt furate. panouri sau de la hosting. Și doar o mică parte se infectează ca urmare a hackingului. Prin urmare, cea mai importantă măsură pentru a proteja site-ul este menținerea securității computerului dvs. Nu uitați că computerul trebuie să aibă și un bun .

Am făcut un analog instrument Google Marcator webmaster. Permiteți-mi să vă reamintesc că Marker este un instrument din contul Google Webmaster care vă permite să adnotați paginile Open Graph cu etichete. Pentru a face acest lucru, pur și simplu selectați o bucată de text de pe pagină cu mouse-ul și indicați că acesta este titlul și aceasta este evaluarea. Pagina ta este apoi încărcată într-un Iframe din contul webmasterului.

Acum, Google, după ce a întâlnit o pagină similară pe site-ul dvs., știe deja ce fel de conținut este publicat pe ea și cum să îl analizeze frumos în esența sa (articol, produs, videoclip...)

Aveam nevoie de funcționalități similare. Sarcina părea simplă și exclusiv partea clientului. Cu toate acestea, în practică, soluția se află la intersecția dintre client și server (programatorii JS „puri” pot să nu știe nimic despre diverse servere proxy și să ia mult timp pentru a aborda proiectul). Cu toate acestea, nu am găsit un articol pe Internet care să descrie întreaga tehnologie de la început până la sfârșit. De asemenea, aș dori să-i mulțumesc utilizatorului BeLove și agenților noștri de securitate pentru ajutor.

În cazul nostru, am dorit ca webmasterul să poată obține convenabil (făcând clic cu mouse-ul) valoarea xPath pentru anumite elemente de pe pagina sa.

Cu toate acestea:

Mai exact, valoarea allow-same-origin (sau mai degrabă, absența sa) spune doar că iframe-ul ar trebui să fie întotdeauna considerat încărcat dintr-un domeniu străin (de exemplu, nu puteți trimite o solicitare AJAX către domeniul documentului părinte dintr-un astfel de domeniu). un cadru)

Să acordăm atenție atributului src al elementului iframe: src="https://wmthighlighter.googleusercontent.com/webmasters/data-highlighter/RenderFrame/007....." - pagina noastră este încărcată în panoul de administrare din domeniul Google. În plus, este și mai grav: chiar și scripturile și imaginile din documentul sursă sunt rulate printr-un proxy. Toate src, href... sunt înlocuite în html cu cele proxy. Ceva de genul asta:

Toate resursele pe care le utilizează pagina dvs. sunt stocate și pe serverele proxy Google. Iată-l pe al nostru de exemplu.

Asigurați-vă că determinați codarea paginii (prin răspunsul http sau setul de caractere în html) - proxy-ul nostru trebuie să răspundă în aceeași codificare ca și pagina pe care am încărcat-o. Vom defini, de asemenea, tipul de conținut pentru orice eventualitate, deși este clar că primim pagina în text/html și o vom returna în același mod.
final String url = request.getParameter("url");
cerere finală HttpGetApache = HttpGet nou (url);

Am ajuns, ne-am spart propria soluție, ocolind restricțiile interdomeniale. Acum nu putem accesa din nou conținutul iframe.

Continuând să găsesc o soluție de la Google, am deschis pagina noastră difuzată printr-un proxy într-o fereastră separată

Și am observat o eroare ciudată în consolă.
CrossPageChannel: Nu se poate conecta, obiectul fereastră de la egal la egal nu setat.
A devenit clar că organizarea totul era mai complicată decât simpla încărcare a unei pagini într-un iframe de pe domeniul tău. Paginile comunică între ele. În consecință, ne îndreptăm către window.postMessage

Iată un exemplu de proxy pagina de start Habr cu script încorporat:
http://highlighter.indexisto.com/?md5=6ec7rdHxUfRkrFy55jrJQA==&url=http%3A%2F%2Fhabrahabr.ru&expires=1390468360

Am pus nginx în fața proxy-ului, acesta ascultă portul 80 și eliminăm proxy-ul în sine pe alt port. Închidem toate celelalte porturi, cu excepția celor 80 de la lumea exterioară.

Acum să facem ca proxy-ul să funcționeze numai prin panoul de administrare. În momentul în care webmasterul introduce URL-ul site-ului său, alergăm rapid la server unde generăm un hash md5 din TimeStamp curent + 1 oră, URL-ul propriu-zis și super-secretul când:
final String md5Me = timeStampExpires + urlEncoded + "SUPERSECRET";
final MessageDigest md = MessageDigest.getInstance("MD5");
md.reset();
md.update(md5Me.getBytes("UTF-8"));

Cod șir = Base64.encodeBase64String(md.digest());
cod = code.replaceAll("/", "_");

cod = code.replaceAll("\\+","-");

De asemenea, rețineți că în cod primim șirul md5 nu ca hex obișnuit, ci în codificarea base64, plus în md5 rezultat facem înlocuiri ciudate ale caracterelor slash și plus cu litere de subliniere și liniuțe.

Și Java oferă baza canonică64.

După ce am primit un răspuns de la un server cu md5 securizat în panoul nostru de administrare, încercăm să încărcăm următoarea adresă URL în iframe:

highlighter.indexisto.com/?md5=Dr4u2Yeb3NrBQLgyDAFrHg==&url=http%3A%2F%2Fhabrahabr.ru&expires=1389791582

Acum configuram modulul nginx HttpSecureLinkModule. Acest modul verifică md5-ul tuturor parametrilor care au venit la el (aceeași cheie secretă este înregistrată în modul ca și în servletul de administrare), verifică dacă legătura a fost analizată și doar în acest caz trimite cererea către servletul nostru proxy. .

Acum nimeni nu poate folosi proxy-ul nostru din afara panoului de administrare și, de asemenea, nu poate insera o imagine solicitată pe serverul nostru oriunde - oricum va muri într-o oră.

Asta e, oameni buni, Google a mers mult mai departe cu instrumentul său de marcare Pentru a identifica clar un element pe o pagină, trebuie să marcați același element (de exemplu, titlul unui articol) pe mai multe pagini de același tip. că puteți construi xpath cu mai multă precizie și eliminați diferite ID-uri, cum ar fi „post-2334”, care, evident, vor funcționa doar pe o singură pagină, deocamdată, xpath trebuie corectat manual pentru a obține un rezultat acceptabil.

Element

În vremurile proaste ale designului web, existau multe elemente care au ruinat viața fiecărui dezvoltator. Au fost aproape întotdeauna o abordare proastă a designului. Din fericire, elementul a fost depreciat în HTML5. Dar sau „cadru inline” este încă disponibil. Va fi depreciat în următoarea versiune? Poate ar trebui să o evităm? Există mai multe utilizări valide ale acestui element la crearea unei pagini HTML. Dar trebuie să înțelegeți ce este și cum funcționează pentru a evita greșelile.

Ambele elemente vă permit să creați un document HTML separat. Un link către conținutul documentului la care face referire pagina web curentă este specificat în atributul src.

. . . . . .

Principala diferență între și este că impune regula conform căreia documentul HTML are prioritate. Conținutul este afișat în interiorul unui element care face parte din documentul curent. Ca exemplu, luați în considerare acest videoclip încorporat preluat de pe YouTube:

Videoclipul se află în mod clar pe pagina HTML și nu într-un panou separat. element a spart această paradigmă și a permis documentului să exercite controlul asupra ferestrei browserului, împărțind-o în mai multe panouri mici (cadre), fiecare dintre ele afișând un document separat. Toate celelalte diferențe dintre și decurg din această diferență de bază.

Într-o zi s-ar putea să vă confruntați cu sarcina de a actualiza un site web vechi care a fost construit folosind cadre. De asemenea, este posibil să doriți să utilizați un aspect cu lățime fixă ​​pentru a recrea același coșmar de panouri și praguri independente. Dar nu veți putea folosi atributul target pentru a deschide o legătură într-un cadru separat. Puteți începe să căutați soluții JavaScript. Te rog, nu face asta.

Există mai multe cazuri de utilizare valide pentru Creare HTML pagini:

• încorporarea de conținut media terță parte;
• încorporarea propriului conținut media printr-un document multiplatform;
• exemple de cod de încorporare;
• încorporarea „applet-urilor” terță parte ca forme de plată.

Iată câteva cazuri de utilizare teribile:

• galerie foto;
• forum sau chat.

Dacă trebuie să încorporați documente HTML independente, preexistente în cel actual, utilizați . Dacă construiți totul de la zero, nu există niciun motiv să împărțiți designul paginii în mai multe documente separate. Mai ales dacă nu sunt de fapt piese independente de conținut.

Această publicație este o traducere a articolului „”, pregătită de echipa prietenoasă a proiectului