InternetWeb design

Cum se introduce HTML iframe: exemplu de utilizare

La începutul site-ul Web resurse de construcție sunt utilizate pe scară largă cadre pentru a afișa anumite părți ale paginilor. Dar, odată cu sosirea unei noi versiuni de HTML 5, totul sa schimbat. Elemente de marcare , si </em> depășit. Înlocuirea acestora a devenit o singură etichetă - <em><iframe>.</em> Cum pot adăuga HTML <iframe>? Exemplul de mai jos va fi înțeles, chiar și un novice în programare. </p> <h2> Ce sunt cadre? </h2><p> Frame - baza de cele 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 obicei, site-ul a fost împărțit în 3-5 părți, fiecare dintre care îndeplinește un anumit scop: </p> <ul><li> „Cap“ (rama superioară a lățimii paginii) - numele afișat al resursei; </li><li> Stânga / dreapta „sticlă“ - meniul de afișare; </li><li> Cadru central - arată conținutul site-ului. </li></ul><p><amp-img src="https://i23.delachieve.com/image/1dba462a7e230ecd.jpg" alt="html exemplu iframe" width="580" height="435" layout="intrinsic"></amp-img></p> <p> O defalcare a paginilor, pentru a permite reîncărcarea de doar o parte din ea, atunci când upgrade. De exemplu, utilizatorul face clic pe elementul de meniu, iar rama centrală au pompat conținut nou. </p> <h2> rame moderne în HTML 5 </h2><p> De ce am nevoie pentru a HTML <em><iframe>?</em> Exemplul - pentru a insera un conținut de site terță parte. Situația clasică este atunci când un dezvoltator de web vrea să arate poziția obiectului pe hartă. Ce să fac? Desenați planul de la sol de la zero? Nu - există o soluție mai simplă: a construi o pagină Google Map element de Yandex Maps sau 2GIS. Problema este rezolvată în patru etape. </p> <ol><li> Trebuie să mergi la site-ul oricărui serviciu hartă. </li><li> Găsiți obiectul dorit. Știind adresa exactă, o puteți introduce în caseta de căutare. </li><li> Utilizați „Salvați și obțineți codul“ (pentru „Yandex.Maps“) sau „Finish“ (Google Maps) pentru a obține codul pentru a insera. </li><li> Rămâne să scrie etichetele de markup generate pe o pagină. </li></ol><p> În plus, puteți alege dimensiunea hărții și setați alte opțiuni de afișare. </p> <p><amp-img src="https://i23.delachieve.com/image/20da6f9a7e280ece.jpg" alt="html exemplu iframe" width="600" height="488" layout="intrinsic"></amp-img></p> <p> Cum altfel se poate folosi HTML <em><iframe>?</em> Exemplu - pentru a insera video din resurse Youtube. Tehnologii Multimedia atrage utilizatorii de Internet, astfel încât conținutul video este atât de popular. Odată cu instalarea rolei de dezvoltator mâner rapid. </p> <ol><li> Ar trebui să fie încărcat pe YouTube videoclipuri proprii sau a găsi un fișier de terță parte pentru traducere. </li><li> Ia-o etichetă prin selectarea butonului «codul HTML“ </li><li> Actul final - se introduce <a href="https://ro.delachieve.com/html-cod-codurile-de-culoare-html/">codul HTML</a> <iframe>. EXEMPLU primit conținut tag-ul va fi discutat mai jos. </li></ol><p> În ambele exemple am folosi generarea automată a codului, dar dezvoltatorii profesioniști ar trebui să poată să facă propria lui. În primul rând, aceasta le va permite să înțeleagă pagina vorstke și modificați-l dacă este necesar. În al doilea rând, site-ul nu marchează întotdeauna elemente (chiar și în ciuda faptului că ele aparțin unei resurse externe), este formată fără participarea webmaster. Aici apare, de asemenea, dezvoltator de înaltă calificare. </p> <p><amp-img src="https://i23.delachieve.com/image/92fab38a7e2d0ecf.jpg" alt="iframe-l html" width="680" height="450" layout="intrinsic"></amp-img></p> <h2> sintaxă </h2><p> Deci, înainte de a începe pagina vorstke, iframe (HTML) tag-ul trebuie să ia în considerare: ce este și cum să-l folosească. </p> <p> În primul rând, trebuie remarcat faptul că perechea de etichete. Între deschidere și elementul de închidere indică conținutul care urmează să fie afișat în browserele care nu acceptă elementul de marcare. tag-ul de bază atribute: </p> <ul><li> lățime (W); </li><li> înălțime (înălțime); </li><li> src (adresa de resurse încărcate); </li><li> alinierea (procesul de aliniere); </li><li> frameborder; </li><li> allowfullscreen. </li></ul><p> Astfel, pentru a obține codul pentru <iframe>. HTML exemplu pe deplin demonstrat de mai jos: </p> <p> <em><Iframe width = &quot;560&quot; height = &quot;315&quot; src = &quot;https://someserver.com/&quot; frameborder =</em> &quot; <em>0&quot; allowfullscreen> </ iframe></em> </p> <p> Planul mesei este suficientă pentru a înlocui adresa site-ului pentru orice alta și, dacă este necesar, reglați dimensiunea cadrului. </p> </div> <!--mvp-content-main--> </div> <!--mvp-content-body-top--> </div> <!--mvp-content-body--> </div> <!--mvp-content-wrap--> </div> <!--mvp-post-content--> </div> <!--mvp-post-main--> <div id="mvp-post-more-wrap" class="left relative"> <h4 class="mvp-post-header"> <span class="mvp-post-header">Similar articles</span> </h4> <ul class="mvp-post-more-list left relative"> <li> <div class="mvp-post-more-img left relative"> <a href="https://ro.delachieve.com/cum-se-introduce-html-iframe-exemplu-de-utilizare/"> <amp-img class="mvp-reg-img" src="https://i23.delachieve.com/image/1dba462a7e230ecd-560x315.jpg" width="560" height="315" layout="responsive"></amp-img> <amp-img class="mvp-mob-img" src="https://i23.delachieve.com/image/1dba462a7e230ecd-80x80.jpg" width="80" height="80" layout="responsive"></amp-img> </a> </div> <!--mvp-post-more-img--> <div class="mvp-post-more-text left relative"> <a href="https://ro.delachieve.com/cum-se-introduce-html-iframe-exemplu-de-utilizare/"> <p>Cum se introduce HTML iframe: exemplu de utilizare</p> <h3 class="mvp-cat-bub"><span class="mvp-cat-bub">Internet</span></h3> </a> </div> <!--mvp-post-more-text--> </li> <li> <div class="mvp-post-more-img left relative"> <a href="https://ro.delachieve.com/favicon-dimensiune-pentru-site-ul-dvs/"> <amp-img class="mvp-reg-img" src="https://i23.delachieve.com/image/f9f0b8527e6f0ed5-560x315.jpg" width="560" height="315" layout="responsive"></amp-img> <amp-img class="mvp-mob-img" src="https://i23.delachieve.com/image/f9f0b8527e6f0ed5-80x80.jpg" width="80" height="80" layout="responsive"></amp-img> </a> </div> <!--mvp-post-more-img--> <div class="mvp-post-more-text left relative"> <a href="https://ro.delachieve.com/favicon-dimensiune-pentru-site-ul-dvs/"> <p>Favicon Dimensiune pentru site-ul dvs.</p> <h3 class="mvp-cat-bub"><span class="mvp-cat-bub">Internet</span></h3> </a> </div> <!--mvp-post-more-text--> </li> <li> <div class="mvp-post-more-img left relative"> <a href="https://ro.delachieve.com/cum-este-butonul-pentru-site-ul/"> <amp-img class="mvp-reg-img" src="https://i23.delachieve.com/image/c7f69517547d0e3a-560x315.jpg" width="560" height="315" layout="responsive"></amp-img> <amp-img class="mvp-mob-img" src="https://i23.delachieve.com/image/c7f69517547d0e3a-80x80.jpg" width="80" height="80" layout="responsive"></amp-img> </a> </div> <!--mvp-post-more-img--> <div class="mvp-post-more-text left relative"> <a href="https://ro.delachieve.com/cum-este-butonul-pentru-site-ul/"> <p>Cum este butonul pentru site-ul?</p> <h3 class="mvp-cat-bub"><span class="mvp-cat-bub">Internet</span></h3> </a> </div> <!--mvp-post-more-text--> </li> <li> <div class="mvp-post-more-img left relative"> </div> <!--mvp-post-more-img--> <div class="mvp-post-more-text left relative"> <a href="https://ro.delachieve.com/cat-de-mult-este-un-site-web/"> <p>Cât de mult este un site web?</p> <h3 class="mvp-cat-bub"><span class="mvp-cat-bub">Internet</span></h3> </a> </div> <!--mvp-post-more-text--> </li> <li> <div class="mvp-post-more-img left relative"> <a href="https://ro.delachieve.com/web-designer-ce-este-in-cazul-in-care-pentru-a-invata-de-la-un-web-designer/"> <amp-img class="mvp-reg-img" src="https://i23.delachieve.com/image/1c52f5837e240eca-560x315.jpg" width="560" height="315" layout="responsive"></amp-img> <amp-img class="mvp-mob-img" src="https://i23.delachieve.com/image/1c52f5837e240eca-80x80.jpg" width="80" height="80" layout="responsive"></amp-img> </a> </div> <!--mvp-post-more-img--> <div class="mvp-post-more-text left relative"> <a href="https://ro.delachieve.com/web-designer-ce-este-in-cazul-in-care-pentru-a-invata-de-la-un-web-designer/"> <p>Web designer - ce este? În cazul în care pentru a învăța de la un web designer?</p> <h3 class="mvp-cat-bub"><span class="mvp-cat-bub">Internet</span></h3> </a> </div> <!--mvp-post-more-text--> </li> <li> <div class="mvp-post-more-img left relative"> <a href="https://ro.delachieve.com/cum-de-a-invata-design-grafic-si-sa-devina-un-specialist-extrem-de-platit/"> <amp-img class="mvp-reg-img" src="https://i23.delachieve.com/image/747b8c3261950e60-560x315.jpg" width="560" height="315" layout="responsive"></amp-img> <amp-img class="mvp-mob-img" src="https://i23.delachieve.com/image/747b8c3261950e60-80x80.jpg" width="80" height="80" layout="responsive"></amp-img> </a> </div> <!--mvp-post-more-img--> <div class="mvp-post-more-text left relative"> <a href="https://ro.delachieve.com/cum-de-a-invata-design-grafic-si-sa-devina-un-specialist-extrem-de-platit/"> <p>Cum de a învăța design grafic și să devină un specialist extrem de plătit</p> <h3 class="mvp-cat-bub"><span class="mvp-cat-bub">Internet</span></h3> </a> </div> <!--mvp-post-more-text--> </li> </ul> </div> <!--mvp-post-more-wrap--> <p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p> <div id="mvp-post-more-wrap" class="left relative"> <h4 class="mvp-post-header"> <span class="mvp-post-header">Trending Now</span> </h4> <ul class="mvp-post-more-list left relative"> <li> <div class="mvp-post-more-img left relative"> <a href="https://ro.delachieve.com/cum-sa-faci-o-cheie-master-pentru-incuietori-diferite/"> <amp-img class="mvp-reg-img" src="https://i23.delachieve.com/image/c7508ddf6fa90e97-560x315.jpg" width="560" height="315" layout="responsive"></amp-img> <amp-img class="mvp-mob-img" src="https://i23.delachieve.com/image/c7508ddf6fa90e97-80x80.jpg" width="80" height="80" layout="responsive"></amp-img> </a> </div> <!--mvp-post-more-img--> <div class="mvp-post-more-text left relative"> <a href="https://ro.delachieve.com/cum-sa-faci-o-cheie-master-pentru-incuietori-diferite/"> <p>Cum sa faci o cheie master pentru încuietori diferite</p> <h3 class="mvp-cat-bub"><span class="mvp-cat-bub">Pasiune</span></h3> </a> </div> <!--mvp-post-more-text--> </li> <li> <div class="mvp-post-more-img left relative"> <a href="https://ro.delachieve.com/militantii-stat-islamic-organizatie-terorista-islamista/"> <amp-img class="mvp-reg-img" src="https://i23.delachieve.com/image/974e7f9570180e9f-560x315.jpg" width="560" height="315" layout="responsive"></amp-img> <amp-img class="mvp-mob-img" src="https://i23.delachieve.com/image/974e7f9570180e9f-80x80.jpg" width="80" height="80" layout="responsive"></amp-img> </a> </div> <!--mvp-post-more-img--> <div class="mvp-post-more-text left relative"> <a href="https://ro.delachieve.com/militantii-stat-islamic-organizatie-terorista-islamista/"> <p>Militanții „stat islamic.“ organizație teroristă islamistă</p> <h3 class="mvp-cat-bub"><span class="mvp-cat-bub">Noutăți și Societate</span></h3> </a> </div> <!--mvp-post-more-text--> </li> <li> <div class="mvp-post-more-img left relative"> <a href="https://ro.delachieve.com/deck-magician-la-hearthstone-pentru-incepatori-si-jucatori-cu-experienta/"> <amp-img class="mvp-reg-img" src="https://i23.delachieve.com/image/67c3f31e7e690ed9-560x315.jpg" width="560" height="315" layout="responsive"></amp-img> <amp-img class="mvp-mob-img" src="https://i23.delachieve.com/image/67c3f31e7e690ed9-80x80.jpg" width="80" height="80" layout="responsive"></amp-img> </a> </div> <!--mvp-post-more-img--> <div class="mvp-post-more-text left relative"> <a href="https://ro.delachieve.com/deck-magician-la-hearthstone-pentru-incepatori-si-jucatori-cu-experienta/"> <p>Deck Magician la Hearthstone pentru începători și jucători cu experiență</p> <h3 class="mvp-cat-bub"><span class="mvp-cat-bub">Calculatoare</span></h3> </a> </div> <!--mvp-post-more-text--> </li> <li> <div class="mvp-post-more-img left relative"> <a href="https://ro.delachieve.com/cum-sa-creasca-un-trandafir-din-buchet-sau-de-a-salva-frumusetea-pentru-totdeauna/"> <amp-img class="mvp-reg-img" src="https://i23.delachieve.com/image/aa5eb44c62390e6a-560x315.jpg" width="560" height="315" layout="responsive"></amp-img> <amp-img class="mvp-mob-img" src="https://i23.delachieve.com/image/aa5eb44c62390e6a-80x80.jpg" width="80" height="80" layout="responsive"></amp-img> </a> </div> <!--mvp-post-more-img--> <div class="mvp-post-more-text left relative"> <a href="https://ro.delachieve.com/cum-sa-creasca-un-trandafir-din-buchet-sau-de-a-salva-frumusetea-pentru-totdeauna/"> <p>Cum să crească un trandafir din buchet, sau de a salva frumusețea pentru totdeauna</p> <h3 class="mvp-cat-bub"><span class="mvp-cat-bub">Lipsă de farmec</span></h3> </a> </div> <!--mvp-post-more-text--> </li> <li> <div class="mvp-post-more-img left relative"> <a href="https://ro.delachieve.com/turnul-ostankino-ostankino-tower-o-punte-de-observatie-ostankino-tv-tower/"> <amp-img class="mvp-reg-img" src="https://i23.delachieve.com/image/7c8c5bdf6fe70e99-560x315.jpg" width="560" height="315" layout="responsive"></amp-img> <amp-img class="mvp-mob-img" src="https://i23.delachieve.com/image/7c8c5bdf6fe70e99-80x80.jpg" width="80" height="80" layout="responsive"></amp-img> </a> </div> <!--mvp-post-more-img--> <div class="mvp-post-more-text left relative"> <a href="https://ro.delachieve.com/turnul-ostankino-ostankino-tower-o-punte-de-observatie-ostankino-tv-tower/"> <p>Turnul Ostankino. Ostankino Tower: o punte de observație. Ostankino TV Tower</p> <h3 class="mvp-cat-bub"><span class="mvp-cat-bub">Călător</span></h3> </a> </div> <!--mvp-post-more-text--> </li> <li> <div class="mvp-post-more-img left relative"> <a href="https://ro.delachieve.com/multivarka-lumme-lu-1446-comentarii-descrieri-caietul-de-sarcini/"> <amp-img class="mvp-reg-img" src="https://i23.delachieve.com/image/bb1814037ef10edb-560x315.jpg" width="560" height="315" layout="responsive"></amp-img> <amp-img class="mvp-mob-img" src="https://i23.delachieve.com/image/bb1814037ef10edb-80x80.jpg" width="80" height="80" layout="responsive"></amp-img> </a> </div> <!--mvp-post-more-img--> <div class="mvp-post-more-text left relative"> <a href="https://ro.delachieve.com/multivarka-lumme-lu-1446-comentarii-descrieri-caietul-de-sarcini/"> <p>Multivarka Lumme LU-1446: comentarii, descrieri, caietul de sarcini</p> <h3 class="mvp-cat-bub"><span class="mvp-cat-bub">Lipsă de farmec</span></h3> </a> </div> <!--mvp-post-more-text--> </li> </ul> </div> <!--mvp-post-more-wrap--> <p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p> <div id="mvp-post-more-wrap" class="left relative"> <h4 class="mvp-post-header" style="margin-top:40px;"> <span class="mvp-post-header">Newest</span> </h4> <ul class="mvp-post-more-list left relative"> <li> <div class="mvp-post-more-img left relative"> <a href="https://ro.delachieve.com/berastau-valentin-dmitrievich-biografie-si-cariera/"> <amp-img class="mvp-reg-img" src="https://i23.delachieve.com/image/3d061ffa7e4a0ed2-560x315.jpg" width="560" height="315" layout="responsive"></amp-img> <amp-img class="mvp-mob-img" src="https://i23.delachieve.com/image/3d061ffa7e4a0ed2-80x80.jpg" width="80" height="80" layout="responsive"></amp-img> </a> </div> <!--mvp-post-more-img--> <div class="mvp-post-more-text left relative"> <a href="https://ro.delachieve.com/berastau-valentin-dmitrievich-biografie-si-cariera/"> <p>Berastau Valentin Dmitrievich: biografie si cariera</p> <h3 class="mvp-cat-bub"><span class="mvp-cat-bub">Publicații și articole de scris</span></h3> </a> </div> <!--mvp-post-more-text--> </li> <li> <div class="mvp-post-more-img left relative"> <a href="https://ro.delachieve.com/ca-tele2-pentru-a-afla-echilibrul-cum-pot-afla-soldul-abonatului-tele2/"> <amp-img class="mvp-reg-img" src="https://i23.delachieve.com/image/6639173f70200e9f-560x315.jpg" width="560" height="315" layout="responsive"></amp-img> <amp-img class="mvp-mob-img" src="https://i23.delachieve.com/image/6639173f70200e9f-80x80.jpg" width="80" height="80" layout="responsive"></amp-img> </a> </div> <!--mvp-post-more-img--> <div class="mvp-post-more-text left relative"> <a href="https://ro.delachieve.com/ca-tele2-pentru-a-afla-echilibrul-cum-pot-afla-soldul-abonatului-tele2/"> <p>Ca „Tele2“ pentru a afla echilibrul? Cum pot afla soldul abonatului „Tele2“?</p> <h3 class="mvp-cat-bub"><span class="mvp-cat-bub">Tehnologiei</span></h3> </a> </div> <!--mvp-post-more-text--> </li> <li> <div class="mvp-post-more-img left relative"> <a href="https://ro.delachieve.com/slabire-abdomen-lenjerie-de-corp-si-solduri-specificatii/"> <amp-img class="mvp-reg-img" src="https://i23.delachieve.com/image/fbed54a362340e70-560x315.jpg" width="560" height="315" layout="responsive"></amp-img> <amp-img class="mvp-mob-img" src="https://i23.delachieve.com/image/fbed54a362340e70-80x80.jpg" width="80" height="80" layout="responsive"></amp-img> </a> </div> <!--mvp-post-more-img--> <div class="mvp-post-more-text left relative"> <a href="https://ro.delachieve.com/slabire-abdomen-lenjerie-de-corp-si-solduri-specificatii/"> <p>Slăbire abdomen lenjerie de corp și șolduri: Specificații</p> <h3 class="mvp-cat-bub"><span class="mvp-cat-bub">Modă</span></h3> </a> </div> <!--mvp-post-more-text--> </li> <li> <div class="mvp-post-more-img left relative"> <a href="https://ro.delachieve.com/cele-mai-bune-baruri-din-yaroslavl/"> <amp-img class="mvp-reg-img" src="https://i23.delachieve.com/image/f5bcb2457e480ed3-560x315.jpg" width="560" height="315" layout="responsive"></amp-img> <amp-img class="mvp-mob-img" src="https://i23.delachieve.com/image/f5bcb2457e480ed3-80x80.jpg" width="80" height="80" layout="responsive"></amp-img> </a> </div> <!--mvp-post-more-img--> <div class="mvp-post-more-text left relative"> <a href="https://ro.delachieve.com/cele-mai-bune-baruri-din-yaroslavl/"> <p>Cele mai bune baruri din Yaroslavl</p> <h3 class="mvp-cat-bub"><span class="mvp-cat-bub">Alimente și băuturi</span></h3> </a> </div> <!--mvp-post-more-text--> </li> <li> <div class="mvp-post-more-img left relative"> <a href="https://ro.delachieve.com/zone-de-pe-litoral-chilia-odihna-si-comentarii/"> <amp-img class="mvp-reg-img" src="https://i23.delachieve.com/image/8390656d62790e75-560x315.jpg" width="560" height="315" layout="responsive"></amp-img> <amp-img class="mvp-mob-img" src="https://i23.delachieve.com/image/8390656d62790e75-80x80.jpg" width="80" height="80" layout="responsive"></amp-img> </a> </div> <!--mvp-post-more-img--> <div class="mvp-post-more-text left relative"> <a href="https://ro.delachieve.com/zone-de-pe-litoral-chilia-odihna-si-comentarii/"> <p>Zone de pe litoral Chilia: odihna si comentarii</p> <h3 class="mvp-cat-bub"><span class="mvp-cat-bub">Călător</span></h3> </a> </div> <!--mvp-post-more-text--> </li> <li> <div class="mvp-post-more-img left relative"> <a href="https://ro.delachieve.com/volkswagen-california-calatorie-auto/"> <amp-img class="mvp-reg-img" src="https://i23.delachieve.com/image/b89f607454de0e41-560x315.jpg" width="560" height="315" layout="responsive"></amp-img> <amp-img class="mvp-mob-img" src="https://i23.delachieve.com/image/b89f607454de0e41-80x80.jpg" width="80" height="80" layout="responsive"></amp-img> </a> </div> <!--mvp-post-more-img--> <div class="mvp-post-more-text left relative"> <a href="https://ro.delachieve.com/volkswagen-california-calatorie-auto/"> <p>Volkswagen California - călătorie auto</p> <h3 class="mvp-cat-bub"><span class="mvp-cat-bub">Mașini</span></h3> </a> </div> <!--mvp-post-more-text--> </li> </ul> </div> <!--mvp-post-more-wrap--> </div> <!--mvp-main-box--> </div> <!--mvp-article-cont--> </article> <!--mvp-article-wrap--> </div> <!--mvp-main-body-wrap--> <footer id="mvp-foot-wrap" class="left relative"> <div id="mvp-foot-bot" class="left relative"> <div class="mvp-main-box"> <div id="mvp-foot-copy" class="left relative"> <p>Copyright © 2018 ro.delachieve.com. Theme powered by WordPress.</p> </div> <!--mvp-foot-copy--> </div> <!--mvp-main-box--> </div> <!--mvp-foot-bot--> </footer> </div> <!--mvp-site-main--> </div> <!--mvp-site-wall--> </div> <!--mvp-site--> <div id="statcounter"> <amp-pixel src="https://c.statcounter.com/11999667/0/cc03a949/1/"> </amp-pixel> </div> </body> </html> <!-- Dynamic page generated in 1.143 seconds. --> <!-- Cached page generated by WP-Super-Cache on 2019-10-01 00:29:58 --> <!-- 0.001 -->