InternetDeseño web

Como inserir iframe HTML: exemplo de utilización

Nos albores do sitio web de recursos de construción son amplamente cadros usada para mostrar certas partes de páxinas. Pero coa chegada dunha nova versión do HTML 5, todo cambiou. Elementos da reserva , e </em> obsoleta. Substitución tornouse unha única marca - <em><iframe>.</em> ¿Como engadir html <iframe>? O exemplo a seguir pode ser entendido, mesmo un novato na programación. </p> <h2> Cales son cadros? </h2><p> Marco - a base da maioría das primeiras páxinas web. Traducido literalmente, a palabra significa &quot;marco&quot;, isto é, o cadro é unha pequena parte da páxina no navegador. O uso xeneralizado de cadros no pasado pode ser explicado pola baixa calidade e alto custo do tráfico de Internet. Tipicamente, o lugar foi dividida en 3-5 partes, cada un dos cales executa unha finalidade específica: </p> <ul><li> &quot;Cap&quot; (parte superior do marco do ancho da páxina) - nome de visualización do recurso; </li><li> Esquerda / dereita &quot;vidro&quot; - menú de visualización; </li><li> marco central - amosando o contido do sitio web. </li></ul><p><amp-img src="https://i23.delachieve.com/image/1dba462a7e230ecd.jpg" alt="html exemplo iframe" width="580" height="435" layout="intrinsic"></amp-img></p> <p> A desagregación das páxinas para permitir a recarga de só parte del cando actualizar. Por exemplo, o usuario fai clic no elemento de menú, ea marco central foron bombeados novo contido. </p> <h2> cadros modernos en HTML 5 </h2><p> Por que eu teño para HTML <em><iframe>?</em> Exemplo - para inserir unha terceira contido do sitio web do partido. A situación clásica é cando un desenvolvedor web quere amosar a posición do obxecto no mapa. Que facer? Deseñar un plan de chan a partir de cero? Non - hai unha solución simple: construír unha páxina elemento Google Map Mapas Yandex ou 2GIS. O problema está resolto en catro etapas. </p> <ol><li> Ten que ir ao sitio web de calquera servizo de mapas. </li><li> Atopar o obxecto desexado. Sabendo o enderezo exacto, pode introducir-lo no cadro de busca. </li><li> Use o &quot;Gardar e obter código&quot; (a &quot;Yandex.Maps&quot;) ou &quot;Finish&quot; (Google Maps) para obter o código para inserir. </li><li> Ela segue a escribir as etiquetas de marcado xerados nunha páxina. </li></ol><p> Ademais, pode escoller o tamaño da tarxeta e establecer outras visualización opcións. </p> <p><amp-img src="https://i23.delachieve.com/image/20da6f9a7e280ece.jpg" alt="html exemplo iframe" width="600" height="488" layout="intrinsic"></amp-img></p> <p> Como máis pode usar HTML <em><iframe>?</em> Exemplo - para inserir un vídeo recurso YouTube. Tecnoloxías Multimedia atraer os usuarios de Internet, de xeito que o contido do vídeo é tan popular. Coa instalación do rolo revelador tratar rapidamente. </p> <ol><li> Debe ser cargado para YouTube propio vídeo ou atopar un ficheiro de terceiros para tradución. </li><li> Obter unha etiqueta, seleccionando o botón «HTML-code&quot; </li><li> O acto final - inserir <a href="https://gl.delachieve.com/html-codigo-codigos-de-cores-html/">código HTML</a> <iframe>. EXEMPLO recibido contido da etiqueta será discutido a continuación. </li></ol><p> En ambos os exemplos eu uso a xeración automática de código, pero os desenvolvedores profesionais deben ser capaces de facer o seu propio. En primeiro lugar, lles permitirá entender a páxina vorstke e modificalo lo se é necesario. En segundo lugar, o sitio non é sempre marcando elementos (mesmo a pesar do feito de que eles pertencen a unha ligazón externa de recursos), está formado sen a participación do webmaster. Aquí tamén parece altamente cualificado creador. </p> <p><amp-img src="https://i23.delachieve.com/image/92fab38a7e2d0ecf.jpg" alt="iframe html-lo" width="680" height="450" layout="intrinsic"></amp-img></p> <h2> sintaxe </h2><p> Polo tanto, antes de comezar páxina vorstke, iframe (HTML) etiqueta debe considerar: o que é e como usalo. </p> <p> Primeiro de todo, débese notar que o par de etiquetas. Entre a apertura eo membro de peche indicar o contido a ser exhibido en navegadores que non soportan o elemento de reserva. atributos tag básica: </p> <ul><li> ancho (ancho); </li><li> altura (altura); </li><li> src (enderezo recurso cargado); </li><li> aliñar (proceso de aliñamento); </li><li> frameBorder; </li><li> allowFullScreen. </li></ul><p> Así, para obter o código para o <iframe>. HTML exemplo totalmente demostrada a continuación: </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> O esquema da mesa é suficiente para substituír o enderezo do sitio web para calquera outro e, se é necesario, axustar o tamaño do cadro. </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://gl.delachieve.com/jquery-xanela-modal-o-que-precisa-e-como-instalar/"> <amp-img class="mvp-reg-img" src="https://i23.delachieve.com/image/b36fd1d6704f0ea3-560x315.jpg" width="560" height="315" layout="responsive"></amp-img> <amp-img class="mvp-mob-img" src="https://i23.delachieve.com/image/b36fd1d6704f0ea3-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://gl.delachieve.com/jquery-xanela-modal-o-que-precisa-e-como-instalar/"> <p>JQuery xanela modal - o que precisa e como instalar</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://gl.delachieve.com/consellos-para-principiantes-como-elixir-o-editor-html-mais-adecuado/"> <p>Consellos para principiantes: como elixir o editor html máis adecuado</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://gl.delachieve.com/os-detalles-sobre-como-facer-un-sombreiro-para-o-seu-canle-de-youtube/"> <amp-img class="mvp-reg-img" src="https://i23.delachieve.com/image/f7db8917703b0ea0-560x315.jpg" width="560" height="315" layout="responsive"></amp-img> <amp-img class="mvp-mob-img" src="https://i23.delachieve.com/image/f7db8917703b0ea0-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://gl.delachieve.com/os-detalles-sobre-como-facer-un-sombreiro-para-o-seu-canle-de-youtube/"> <p>Os detalles sobre como facer un sombreiro para o seu canle de YouTube</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://gl.delachieve.com/favicon-tamano-para-a-sua-web/"> <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://gl.delachieve.com/favicon-tamano-para-a-sua-web/"> <p>Favicon tamaño para a súa 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://gl.delachieve.com/como-facilitar-o-proceso-de-creacion-dun-sitio-web-axuda-editor-html/"> <p>Como facilitar o proceso de creación dun sitio web? Axuda editor HTML!</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://gl.delachieve.com/tecnoloxias-para-a-creacion-de-sitios-web-vision-xeral-e-as-novas-tendencias/"> <amp-img class="mvp-reg-img" src="https://i23.delachieve.com/image/956c59087e270ecf-560x315.jpg" width="560" height="315" layout="responsive"></amp-img> <amp-img class="mvp-mob-img" src="https://i23.delachieve.com/image/956c59087e270ecf-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://gl.delachieve.com/tecnoloxias-para-a-creacion-de-sitios-web-vision-xeral-e-as-novas-tendencias/"> <p>Tecnoloxías para a creación de sitios web: visión xeral e as novas tendencias</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://gl.delachieve.com/en-cantos-meses-pode-sentar-rapaza-e-se-a-facelo/"> <amp-img class="mvp-reg-img" src="https://i23.delachieve.com/image/8aa8bd2d6fc80e9b-560x315.jpg" width="560" height="315" layout="responsive"></amp-img> <amp-img class="mvp-mob-img" src="https://i23.delachieve.com/image/8aa8bd2d6fc80e9b-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://gl.delachieve.com/en-cantos-meses-pode-sentar-rapaza-e-se-a-facelo/"> <p>En cantos meses pode sentar rapaza e se a facelo?</p> <h3 class="mvp-cat-bub"><span class="mvp-cat-bub">Casa e familia</span></h3> </a> </div> <!--mvp-post-more-text--> </li> <li> <div class="mvp-post-more-img left relative"> <a href="https://gl.delachieve.com/os-detalles-sobre-cantos-gramos-nunha-culler-de-te-de-fermento-seco/"> <amp-img class="mvp-reg-img" src="https://i23.delachieve.com/image/d75e799a6f880e91-560x315.jpg" width="560" height="315" layout="responsive"></amp-img> <amp-img class="mvp-mob-img" src="https://i23.delachieve.com/image/d75e799a6f880e91-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://gl.delachieve.com/os-detalles-sobre-cantos-gramos-nunha-culler-de-te-de-fermento-seco/"> <p>Os detalles sobre cantos gramos nunha culler de té de fermento seco</p> <h3 class="mvp-cat-bub"><span class="mvp-cat-bub">Alimentos e bebidas</span></h3> </a> </div> <!--mvp-post-more-text--> </li> <li> <div class="mvp-post-more-img left relative"> <a href="https://gl.delachieve.com/que-e-un-exceso-de-autodefensa-o-artigo-do-codigo-penal/"> <amp-img class="mvp-reg-img" src="https://i23.delachieve.com/image/5524715c7e460ed3-560x315.jpg" width="560" height="315" layout="responsive"></amp-img> <amp-img class="mvp-mob-img" src="https://i23.delachieve.com/image/5524715c7e460ed3-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://gl.delachieve.com/que-e-un-exceso-de-autodefensa-o-artigo-do-codigo-penal/"> <p>¿Que é un exceso de autodefensa? O artigo do Código Penal</p> <h3 class="mvp-cat-bub"><span class="mvp-cat-bub">Lei</span></h3> </a> </div> <!--mvp-post-more-text--> </li> <li> <div class="mvp-post-more-img left relative"> <a href="https://gl.delachieve.com/carbunculo-unha-inflamacion-necrotica-purulenta-aguda-da-pel-causas-tratamento-prevencion/"> <amp-img class="mvp-reg-img" src="https://i23.delachieve.com/image/0e29cd0f7e300ed7-560x315.jpg" width="560" height="315" layout="responsive"></amp-img> <amp-img class="mvp-mob-img" src="https://i23.delachieve.com/image/0e29cd0f7e300ed7-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://gl.delachieve.com/carbunculo-unha-inflamacion-necrotica-purulenta-aguda-da-pel-causas-tratamento-prevencion/"> <p>Carbúnculo - unha inflamación Necrótica-purulenta aguda da pel: causas, tratamento, prevención</p> <h3 class="mvp-cat-bub"><span class="mvp-cat-bub">Saúde</span></h3> </a> </div> <!--mvp-post-more-text--> </li> <li> <div class="mvp-post-more-img left relative"> <a href="https://gl.delachieve.com/quen-inventou-a-pipoca-a-historia-da-invencion-e-as-propiedades/"> <amp-img class="mvp-reg-img" src="https://i23.delachieve.com/image/8995089a7e740ed1-560x315.jpg" width="560" height="315" layout="responsive"></amp-img> <amp-img class="mvp-mob-img" src="https://i23.delachieve.com/image/8995089a7e740ed1-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://gl.delachieve.com/quen-inventou-a-pipoca-a-historia-da-invencion-e-as-propiedades/"> <p>Quen inventou a pipoca: a historia da invención e as propiedades</p> <h3 class="mvp-cat-bub"><span class="mvp-cat-bub">Alimentos e bebidas</span></h3> </a> </div> <!--mvp-post-more-text--> </li> <li> <div class="mvp-post-more-img left relative"> <a href="https://gl.delachieve.com/pode-chover-actores-e-caracteristicas-de-peliculas/"> <amp-img class="mvp-reg-img" src="https://i23.delachieve.com/image/a640f57f7eab0edd-560x315.jpg" width="560" height="315" layout="responsive"></amp-img> <amp-img class="mvp-mob-img" src="https://i23.delachieve.com/image/a640f57f7eab0edd-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://gl.delachieve.com/pode-chover-actores-e-caracteristicas-de-peliculas/"> <p>&quot;Pode chover&quot;: actores e características de películas</p> <h3 class="mvp-cat-bub"><span class="mvp-cat-bub">Artes e entretementos</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://gl.delachieve.com/detalles-sobre-como-eliminar-unha-conta-en-youtube/"> <amp-img class="mvp-reg-img" src="https://i23.delachieve.com/image/7965bf9470710eaa-560x315.jpg" width="560" height="315" layout="responsive"></amp-img> <amp-img class="mvp-mob-img" src="https://i23.delachieve.com/image/7965bf9470710eaa-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://gl.delachieve.com/detalles-sobre-como-eliminar-unha-conta-en-youtube/"> <p>Detalles sobre como eliminar unha conta en YouTube</p> <h3 class="mvp-cat-bub"><span class="mvp-cat-bub">Informática</span></h3> </a> </div> <!--mvp-post-more-text--> </li> <li> <div class="mvp-post-more-img left relative"> <a href="https://gl.delachieve.com/produtos-utiles-pistacios-calorias/"> <amp-img class="mvp-reg-img" src="https://i23.delachieve.com/image/6e769f5570050e9c-560x315.jpg" width="560" height="315" layout="responsive"></amp-img> <amp-img class="mvp-mob-img" src="https://i23.delachieve.com/image/6e769f5570050e9c-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://gl.delachieve.com/produtos-utiles-pistacios-calorias/"> <p>Produtos útiles: pistácios calorías</p> <h3 class="mvp-cat-bub"><span class="mvp-cat-bub">Alimentos e bebidas</span></h3> </a> </div> <!--mvp-post-more-text--> </li> <li> <div class="mvp-post-more-img left relative"> <a href="https://gl.delachieve.com/salsa-de-tomate-para-o-inverno-a-receita-cunha-foto/"> <amp-img class="mvp-reg-img" src="https://i23.delachieve.com/image/dc1faafa7e9e0ede-560x315.jpg" width="560" height="315" layout="responsive"></amp-img> <amp-img class="mvp-mob-img" src="https://i23.delachieve.com/image/dc1faafa7e9e0ede-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://gl.delachieve.com/salsa-de-tomate-para-o-inverno-a-receita-cunha-foto/"> <p>Salsa de tomate para o inverno - a receita cunha foto</p> <h3 class="mvp-cat-bub"><span class="mvp-cat-bub">Alimentos e bebidas</span></h3> </a> </div> <!--mvp-post-more-text--> </li> <li> <div class="mvp-post-more-img left relative"> <a href="https://gl.delachieve.com/museo-nesterov-un-patrimonio-unico-da-cultura-rusa/"> <amp-img class="mvp-reg-img" src="https://i23.delachieve.com/image/9baf6ba67e4a0ed2-560x315.jpg" width="560" height="315" layout="responsive"></amp-img> <amp-img class="mvp-mob-img" src="https://i23.delachieve.com/image/9baf6ba67e4a0ed2-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://gl.delachieve.com/museo-nesterov-un-patrimonio-unico-da-cultura-rusa/"> <p>Museo Nesterov - un patrimonio único da cultura rusa</p> <h3 class="mvp-cat-bub"><span class="mvp-cat-bub">Viaxes</span></h3> </a> </div> <!--mvp-post-more-text--> </li> <li> <div class="mvp-post-more-img left relative"> <a href="https://gl.delachieve.com/o-que-acontecera-co-seu-corpo-se-todas-as-noites-beber-vino/"> <amp-img class="mvp-reg-img" src="https://i23.delachieve.com/image/a02ba125ab450f12-560x315.jpg" width="560" height="315" layout="responsive"></amp-img> <amp-img class="mvp-mob-img" src="https://i23.delachieve.com/image/a02ba125ab450f12-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://gl.delachieve.com/o-que-acontecera-co-seu-corpo-se-todas-as-noites-beber-vino/"> <p>O que acontecerá co seu corpo, se todas as noites beber viño?</p> <h3 class="mvp-cat-bub"><span class="mvp-cat-bub">Alimentos e bebidas</span></h3> </a> </div> <!--mvp-post-more-text--> </li> <li> <div class="mvp-post-more-img left relative"> <a href="https://gl.delachieve.com/o-que-deberia-saber-que-o-neno-e-de-6-anos-de-idade-estes-neno-de-6-anos-ensinar-os-nenos-de-6-anos/"> <amp-img class="mvp-reg-img" src="https://i23.delachieve.com/image/e0cb6cf170450ea4-560x315.jpg" width="560" height="315" layout="responsive"></amp-img> <amp-img class="mvp-mob-img" src="https://i23.delachieve.com/image/e0cb6cf170450ea4-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://gl.delachieve.com/o-que-deberia-saber-que-o-neno-e-de-6-anos-de-idade-estes-neno-de-6-anos-ensinar-os-nenos-de-6-anos/"> <p>O que debería saber que o neno é de 6 anos de idade? Estes neno de 6 anos. Ensinar os nenos de 6 anos</p> <h3 class="mvp-cat-bub"><span class="mvp-cat-bub">Casa e familia</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 gl.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.178 seconds. --> <!-- Cached page generated by WP-Super-Cache on 2019-09-30 16:17:44 --> <!-- 0.002 -->