InternetDisseny web

Com inserir HTML iframe: exemple d'utilització

En els albors del lloc web de recursos de construcció són àmpliament utilitzats marcs per mostrar certes parts de les pàgines. No obstant això, amb l'arribada d'una nova versió d'HTML 5, tot va canviar. Elements de la markup , i </em> obsoleta. La seva substitució s&#39;ha convertit en una sola etiqueta - <em><iframe>.</em> Com puc afegir HTML <iframe>? El següent exemple s&#39;entendrà, fins i tot un principiant en la programació. </p> <h2> Quins són els marcs? </h2><p> Marc - la base de la major part de les primeres pàgines web. Si es tradueix literalment, la paraula significa &quot;marc&quot;, és a dir, el marc és una petita part de la pàgina al navegador. L&#39;ús generalitzat de marcs en el passat s&#39;explica per la mala qualitat i alt cost del tràfic d&#39;Internet. Típicament, el lloc es divideix en 3-5 parts, cadascuna de les quals realitza un propòsit específic: </p> <ul><li> &quot;Cap&quot; (el marc superior de l&#39;amplada de la pàgina) - Display nom del recurs; </li><li> Esquerra / Dreta &quot;vidre&quot; - menú de la pantalla; </li><li> marc central - que mostra el contingut del lloc. </li></ul><p><amp-img src="https://i23.delachieve.com/image/1dba462a7e230ecd.jpg" alt="html exemple iframe" width="580" height="435" layout="intrinsic"></amp-img></p> <p> Un desglossament de les pàgines per permetre la recàrrega de només una part d&#39;ella quan s&#39;actualitza. Per exemple, l&#39;usuari fa clic a l&#39;element de menú, i el marc central es van bombar nou contingut. </p> <h2> marcs moderns en HTML 5 </h2><p> Per què necessito a HTML <em><iframe>?</em> Exemple - per inserir una tercera part del contingut del lloc. La situació clàssica és quan un desenvolupador web vol mostrar la posició de l&#39;objecte en el mapa. Què fer? Dibuixeu planta des de zero? No - no és una solució més simple: construir una pàgina de Google Map element de Yandex Maps o 2GIS. El problema es resol en quatre passos. </p> <ol><li> Has d&#39;anar al lloc de qualsevol servei de mapes. </li><li> Trobar l&#39;objecte desitjat. Coneixent l&#39;adreça exacta, pot escriure a la caixa de cerca. </li><li> Utilitzeu l&#39;opció &quot;Guardar i obtenir el codi&quot; (per &quot;Yandex.Maps&quot;) o &quot;Finalitzar&quot; (Google Maps) per obtenir el codi per inserir. </li><li> Queda per escriure les etiquetes de marcat generats en una pàgina. </li></ol><p> A més, es pot triar la mida del mapa i establir altres opcions de visualització. </p> <p><amp-img src="https://i23.delachieve.com/image/20da6f9a7e280ece.jpg" alt="html exemple iframe" width="600" height="488" layout="intrinsic"></amp-img></p> <p> Com pot vostè utilitzar HTML <em><iframe>?</em> Exemple - per inserir vídeos de Youtube de recursos. Tecnologies multimèdia atraure els usuaris d&#39;Internet, de manera que el contingut de vídeo és tan popular. Amb la instal·lació del corró revelador gestionar ràpidament. </p> <ol><li> Ha de ser pujat a Youtube propi vídeo o buscar un arxiu de tercers per a la traducció. </li><li> Obtenir una etiqueta seleccionant el botó «codi HTML&quot; </li><li> L&#39;acte final - inserir <a href="https://ca.delachieve.com/de-codi-html-codis-de-color-html/">codi HTML</a> <iframe>. Exemple rebut contingut de l&#39;etiqueta es discutirà a continuació. </li></ol><p> En tots dos exemples utilitzo la generació automàtica de codi, però els desenvolupadors professional ha de ser capaç de fer el seu propi. En primer lloc, se&#39;ls permetrà comprendre la pàgina vorstke i modificar-lo si cal. En segon lloc, el lloc no està marcant sempre els elements (fins i tot malgrat el fet que pertanyen a un recurs extern), es forma sense la participació de la webmaster. Aquí també apareix desenvolupador altament qualificat. </p> <p><amp-img src="https://i23.delachieve.com/image/92fab38a7e2d0ecf.jpg" alt="HTML iframe es" width="680" height="450" layout="intrinsic"></amp-img></p> <h2> sintaxi </h2><p> Així que abans de començar la pàgina vorstke, etiqueta iframe (html) ha de tenir en compte: què és i com usar-lo. </p> <p> En primer lloc, cal assenyalar que el parell d&#39;etiquetes. Entre l&#39;obertura i el tancament de membre d&#39;indicar el contingut que es mostrarà en els navegadors que no suporten l&#39;element marcat. Atributs de codi bàsica: </p> <ul><li> amplada (W); </li><li> alçada (alçada); </li><li> src (direcció de recursos carregat); </li><li> alinear (procés d&#39;alineació); </li><li> frameborder; </li><li> allowfullscreen. </li></ul><p> Per tant, per obtenir el codi per al <iframe>. HTML-exemple demostra plenament a continuació: </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> El disseny de la taula és suficient per reemplaçar l&#39;adreça del lloc a qualsevol altre i, si cal, ajustar la mida del marc. </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://ca.delachieve.com/dissenyador-de-pagines-web-que-es-on-aprendre-dun-dissenyador-de-pagines-web/"> <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://ca.delachieve.com/dissenyador-de-pagines-web-que-es-on-aprendre-dun-dissenyador-de-pagines-web/"> <p>Dissenyador de pàgines web - què és? On aprendre d&#39;un dissenyador de pàgines 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://ca.delachieve.com/propietats-de-color-css-codis-de-color/"> <amp-img class="mvp-reg-img" src="https://i23.delachieve.com/image/690bcf177ecb0edf-560x315.jpg" width="560" height="315" layout="responsive"></amp-img> <amp-img class="mvp-mob-img" src="https://i23.delachieve.com/image/690bcf177ecb0edf-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://ca.delachieve.com/propietats-de-color-css-codis-de-color/"> <p>Propietats de color CSS. codis de color</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://ca.delachieve.com/el-que-necessita-saber-per-crear-un-lloc-web/"> <p>El que necessita saber per crear un lloc 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"> </div> <!--mvp-post-more-img--> <div class="mvp-post-more-text left relative"> <a href="https://ca.delachieve.com/quant-costa-un-lloc-web/"> <p>Quant costa un lloc 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"> </div> <!--mvp-post-more-img--> <div class="mvp-post-more-text left relative"> <a href="https://ca.delachieve.com/que-determina-el-cost-de-la-creacio-del-lloc/"> <p>Què determina el cost de la creació del lloc</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://ca.delachieve.com/bootstrap-que-es-twitter-bootstrap-disseny-i-creacio-de-llocs/"> <amp-img class="mvp-reg-img" src="https://i23.delachieve.com/image/b3f5a875705f0ea3-560x315.jpg" width="560" height="315" layout="responsive"></amp-img> <amp-img class="mvp-mob-img" src="https://i23.delachieve.com/image/b3f5a875705f0ea3-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://ca.delachieve.com/bootstrap-que-es-twitter-bootstrap-disseny-i-creacio-de-llocs/"> <p>Bootstrap - Què és? Twitter Bootstrap - disseny i creació de llocs</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://ca.delachieve.com/esmalt-dungles-amb-un-imant-la-nova-creacio-de-la-industria-de-la-bellesa/"> <amp-img class="mvp-reg-img" src="https://i23.delachieve.com/image/367dcd5462150e6d-560x315.jpg" width="560" height="315" layout="responsive"></amp-img> <amp-img class="mvp-mob-img" src="https://i23.delachieve.com/image/367dcd5462150e6d-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://ca.delachieve.com/esmalt-dungles-amb-un-imant-la-nova-creacio-de-la-industria-de-la-bellesa/"> <p>Esmalt d&#39;ungles amb un imant - la nova creació de la indústria de la bellesa</p> <h3 class="mvp-cat-bub"><span class="mvp-cat-bub">Bellesa</span></h3> </a> </div> <!--mvp-post-more-text--> </li> <li> <div class="mvp-post-more-img left relative"> <a href="https://ca.delachieve.com/sagrada-familia-de-barcelona-es-increible/"> <amp-img class="mvp-reg-img" src="https://i23.delachieve.com/image/31f6dde1700a0e9f-560x315.jpg" width="560" height="315" layout="responsive"></amp-img> <amp-img class="mvp-mob-img" src="https://i23.delachieve.com/image/31f6dde1700a0e9f-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://ca.delachieve.com/sagrada-familia-de-barcelona-es-increible/"> <p>Sagrada Família de Barcelona és increïble</p> <h3 class="mvp-cat-bub"><span class="mvp-cat-bub">De viatge</span></h3> </a> </div> <!--mvp-post-more-text--> </li> <li> <div class="mvp-post-more-img left relative"> <a href="https://ca.delachieve.com/que-es-un-pare-roques/"> <amp-img class="mvp-reg-img" src="https://i23.delachieve.com/image/afea627770560ea8-560x315.jpg" width="560" height="315" layout="responsive"></amp-img> <amp-img class="mvp-mob-img" src="https://i23.delachieve.com/image/afea627770560ea8-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://ca.delachieve.com/que-es-un-pare-roques/"> <p>Què és un pare roques</p> <h3 class="mvp-cat-bub"><span class="mvp-cat-bub">Notícies i societat</span></h3> </a> </div> <!--mvp-post-more-text--> </li> <li> <div class="mvp-post-more-img left relative"> <a href="https://ca.delachieve.com/solzhenitsyn-obra-arxipelag-gulag-resum/"> <amp-img class="mvp-reg-img" src="https://i23.delachieve.com/image/aedf4fb4622e0e71-560x315.jpg" width="560" height="315" layout="responsive"></amp-img> <amp-img class="mvp-mob-img" src="https://i23.delachieve.com/image/aedf4fb4622e0e71-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://ca.delachieve.com/solzhenitsyn-obra-arxipelag-gulag-resum/"> <p>Solzhenitsyn obra &quot;Arxipèlag Gulag&quot;. resum</p> <h3 class="mvp-cat-bub"><span class="mvp-cat-bub">Arts i entreteniment</span></h3> </a> </div> <!--mvp-post-more-text--> </li> <li> <div class="mvp-post-more-img left relative"> <a href="https://ca.delachieve.com/comedies-de-nadal-que-es-veuen-en-les-vacances-dhivern/"> <amp-img class="mvp-reg-img" src="https://i23.delachieve.com/image/183031586fa20e92-560x315.jpg" width="560" height="315" layout="responsive"></amp-img> <amp-img class="mvp-mob-img" src="https://i23.delachieve.com/image/183031586fa20e92-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://ca.delachieve.com/comedies-de-nadal-que-es-veuen-en-les-vacances-dhivern/"> <p>Comèdies de Nadal que es veuen en les vacances d&#39;hivern?</p> <h3 class="mvp-cat-bub"><span class="mvp-cat-bub">Arts i entreteniment</span></h3> </a> </div> <!--mvp-post-more-text--> </li> <li> <div class="mvp-post-more-img left relative"> <a href="https://ca.delachieve.com/top-cereals-per-a-gossos-consells-de-veterinaris/"> <amp-img class="mvp-reg-img" src="https://i23.delachieve.com/image/51ac2cb57f3d0eea-560x315.jpg" width="560" height="315" layout="responsive"></amp-img> <amp-img class="mvp-mob-img" src="https://i23.delachieve.com/image/51ac2cb57f3d0eea-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://ca.delachieve.com/top-cereals-per-a-gossos-consells-de-veterinaris/"> <p>Top cereals per a gossos: consells de veterinaris</p> <h3 class="mvp-cat-bub"><span class="mvp-cat-bub">Llar i Família</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://ca.delachieve.com/neu-artificial-amb-les-seves-mans/"> <amp-img class="mvp-reg-img" src="https://i23.delachieve.com/image/209916b4619f0e61-560x315.jpg" width="560" height="315" layout="responsive"></amp-img> <amp-img class="mvp-mob-img" src="https://i23.delachieve.com/image/209916b4619f0e61-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://ca.delachieve.com/neu-artificial-amb-les-seves-mans/"> <p>Neu artificial amb les seves mans</p> <h3 class="mvp-cat-bub"><span class="mvp-cat-bub">Senzillesa</span></h3> </a> </div> <!--mvp-post-more-text--> </li> <li> <div class="mvp-post-more-img left relative"> <a href="https://ca.delachieve.com/com-endurir-el-metall-a-la-llar/"> <amp-img class="mvp-reg-img" src="https://i23.delachieve.com/image/f8da90697e820edb-560x315.jpg" width="560" height="315" layout="responsive"></amp-img> <amp-img class="mvp-mob-img" src="https://i23.delachieve.com/image/f8da90697e820edb-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://ca.delachieve.com/com-endurir-el-metall-a-la-llar/"> <p>Com endurir el metall a la llar?</p> <h3 class="mvp-cat-bub"><span class="mvp-cat-bub">Senzillesa</span></h3> </a> </div> <!--mvp-post-more-text--> </li> <li> <div class="mvp-post-more-img left relative"> <a href="https://ca.delachieve.com/intocables-a-lindia-descripcio-historia-i-interessants-fets/"> <amp-img class="mvp-reg-img" src="https://i23.delachieve.com/image/a103dc637e760ed5-560x315.jpg" width="560" height="315" layout="responsive"></amp-img> <amp-img class="mvp-mob-img" src="https://i23.delachieve.com/image/a103dc637e760ed5-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://ca.delachieve.com/intocables-a-lindia-descripcio-historia-i-interessants-fets/"> <p>Intocables a l&#39;Índia: descripció, història i interessants fets</p> <h3 class="mvp-cat-bub"><span class="mvp-cat-bub">Notícies i societat</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://ca.delachieve.com/electrica-i-fabricacio/"> <p>Elèctrica i fabricació</p> <h3 class="mvp-cat-bub"><span class="mvp-cat-bub">Negocis</span></h3> </a> </div> <!--mvp-post-more-text--> </li> <li> <div class="mvp-post-more-img left relative"> <a href="https://ca.delachieve.com/com-mantenir-els-joves-significa-laura-pastilles-ajuda-a-les-dones/"> <amp-img class="mvp-reg-img" src="https://i23.delachieve.com/image/4b2f0c0770220ea1-560x315.jpg" width="560" height="315" layout="responsive"></amp-img> <amp-img class="mvp-mob-img" src="https://i23.delachieve.com/image/4b2f0c0770220ea1-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://ca.delachieve.com/com-mantenir-els-joves-significa-laura-pastilles-ajuda-a-les-dones/"> <p>Com mantenir els joves? Significa &quot;Laura&quot; (pastilles) ajuda a les dones</p> <h3 class="mvp-cat-bub"><span class="mvp-cat-bub">Salut</span></h3> </a> </div> <!--mvp-post-more-text--> </li> <li> <div class="mvp-post-more-img left relative"> <a href="https://ca.delachieve.com/valencia-de-tungste-propietats-i-aplicacio-de-tungste/"> <amp-img class="mvp-reg-img" src="https://i23.delachieve.com/image/dab8a6517e5d0ed1-560x315.jpg" width="560" height="315" layout="responsive"></amp-img> <amp-img class="mvp-mob-img" src="https://i23.delachieve.com/image/dab8a6517e5d0ed1-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://ca.delachieve.com/valencia-de-tungste-propietats-i-aplicacio-de-tungste/"> <p>València de tungstè. Propietats i aplicació de tungstè</p> <h3 class="mvp-cat-bub"><span class="mvp-cat-bub">Formació</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 ca.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 3.244 seconds. --> <!-- Cached page generated by WP-Super-Cache on 2019-09-30 14:28:12 --> <!-- 0.002 -->