Cum se introduce o iframe în HTML: un exemplu de utilizare

Internetul

În zorii construirii site-ului, resursele web au folosit în mod extensiv cadre pentru a afișa anumite părți ale paginilor. Dar odată cu sosirea noii versiuni HTML 5, totul sa schimbat. Elemente de marcare <cadru>, <frameset> și <NOFRAMES> sunt considerate învechite. Înlocuirea acestora a fost o singură etichetă - <iframe>. Cum se adaugă la <iframe> html? Exemplul de mai jos va fi ușor de înțeles chiar și pentru un începător în programare.

Ce sunt cadrele?

Un cadru este baza celor mai multe dintre primele pagini web. Dacă tradus literal, cuvântul înseamnă „cadru“, care este, rama este o mică parte a paginii în browser. Utilizarea pe scară largă a cadrelor în trecut, poate fi explicată prin calitatea proastă și costul ridicat al traficului pe Internet. De regulă, site-ul a fost împărțit în 3-5 părți, fiecare realizând un anumit scop:

  • "Cap" (cadrul superior de pe lățimea paginii) - afișați numele resursei;
  • stânga / dreapta "sticlă" - ieșire din meniu;
  • cadrul central este afișarea conținutului site-ului.

Exemplu html iframe

Împărțirea paginii în părțile cărora li se permite să supraîncărcați numai o anumită parte când o actualizați. De exemplu, utilizatorul a dat clic pe un element de meniu și un conținut nou a fost descărcat în cadrul central.

Cadre moderne în HTML 5

De ce să utilizați HTML <iframe>? Un exemplu este inserarea conținutului dintr-o resursă terță parte. O situație clasică este atunci când un dezvoltator web dorește să arate poziția unui obiect pe o hartă. Ce să fac? Desenează un plan de teren de la zero? Nu - există o soluție mai simplă: de a încorpora un element al Google Map, Yandex Maps sau 2GIS pe pagină. Problema este rezolvată în patru acțiuni.

  1. Trebuie să mergeți la site-ul oricărui serviciu cartografic.
  2. Găsiți obiectul dorit. Cunoscând adresa exactă, o puteți introduce în caseta de căutare.
  3. Utilizați butonul "Salvați și primiți codul" (pentru "Yandex.Map") sau "Done" (pentru hărțile Google) pentru a obține codul de inserat.
  4. Rămâne să introduceți etichetele de marcare generate pe pagină.

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

Exemplu html iframe

Cum altfel pot folosi HTML <iframe>? Un exemplu este inserarea materialelor video din resursa Youtube. Tehnologia multimedia atrage utilizatorii de Internet, astfel încât conținutul video este atât de popular. Odată cu instalarea dezvoltatorului video se va face rapid.

  1. Ar trebui să încărcați propriul videoclip pe Youtube sau să găsiți un fișier terță parte pentru difuzare.
  2. Obțineți eticheta selectând butonul "HTML"
  3. Acțiunea finală este inserarea în codul HTML <iframe>. Un exemplu de conținut al etichetei va fi discutat mai jos.

Ambele exemple au fost utilizate automatgenerație de coduri, dar dezvoltatorii profesioniști ar trebui să poată să-l compună ei înșiși. În primul rând, le va permite să înțeleagă aspectul paginii și, dacă este necesar, să o modifice. În al doilea rând, nu întotdeauna marcarea elementelor site-ului (chiar dacă aparțin unei resurse externe) se formează fără participarea unui webmaster. Aici este calificarea înaltă a dezvoltatorului.

iframe html ce este asta

sintaxă

Deci, înainte de a începe aspectul paginii, 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 se specifică conținutul care va fi afișat în browserele care nu acceptă acest element de aspect. Principalele atribute ale etichetei:

  • lățime (lățime);
  • înălțime (înălțime);
  • src (adresa resursei încărcate);
  • alinierea (metoda de aliniere);
  • frameborder;
  • allowfullscreen.

Astfel, codul pentru <iframe> este obținut. Exemplul HTML este demonstrat pe deplin:

<iframe width = "560" height = "315" src = "https://someserver.com/" frameborder = "0" allowfullscreen> </ iframe>

În marcajul rezultat este suficient să înlocuiți adresa unui site cu oricare altul și, dacă este necesar, să corectați dimensiunile unui cadru.