Ĉe la tagiĝo de la TTT-ejo konstruaĵo rimedoj estas vaste uzata kadrojn por montri iuj partoj de paĝoj. Sed kun la alveno de nova versio de HTML 5, ĉio ŝanĝiĝis. Eroj de la markado , kaj <![CDATA[</em> evitinda. Anstataŭante ili fariĝis ununura etikedo - <em><iframe>.</em> Kiel mi aldonas html <iframe>? La ekzemplo malsupre estos komprenita, eĉ novulo en programado. </p>
<h2> Kion kadrojn? </h2><p> Kadro - la bazo de la plej multaj el la unuaj retpaĝoj. Se tradukita laŭvorte, la vorto signifas "kadro" te, la kadro estas malgranda parto de la paĝo en la retumilo. La vasta uzo de kadroj en la pasinteco povas esti klarigita de la malriĉa kvalito kaj alta kosto de Interreto trafiko. Tipe, la ejo estis dividita en 3-5 partojn, ĉiu el kiu elfaras specifan celon: </p>
<ul><li> "Ĉapo" (la supra kadro de la paĝo larĝa) - Montru nomon de la rimedo; </li><li> Maldekstra / Dekstra "glaso" - display menuo; </li><li> Centra kadro - montrante la retejo enhavo. </li></ul><p><amp-img src="https://i23.delachieve.com/image/1dba462a7e230ecd.jpg" alt="html iframe ekzemplo" width="580" height="435" layout="intrinsic"></amp-img></p>
<p> Al rompo de la paĝoj por permesi reŝargi el nur parto de ĝi, kiam vi ĝisdatigas. Ekzemple, la uzanto klakas la menuero, kaj la centra kadro estis pumpita novan enhavon. </p>
<h2> Moderna kadrojn en HTML 5 </h2><p> Kial mi devas al HTML <em><iframe>?</em> Ekzemplo - enmeti tria retejon enhavo. La klasika situacio estas kiam desarrollador retejo volas montri la pozicio de la objekto sur la mapo. Kion fari? Desegnu plano, el nenio? Ne - estas pli simpla solvo: konstrui paĝo de Google Mapo elemento Yandex Maps aŭ 2GIS. La problemo estas solvita en kvar paŝoj. </p>
<ol><li> Vi devas iri al la retejo de ajna mapo servo. </li><li> Trovu la deziratan celon. Sciante la ĝusta adreso, vi povas eniri ĝin en la serĉo skatolo. </li><li> Uzu la "Konservi kaj akiri kodon" (por "Yandex.Maps") aŭ "Fini" (Google Maps) por akiri la kodon por enmeti. </li><li> Ĝi restas por skribi la generita HTML etikedoj en paĝo. </li></ol><p> Aldone, vi povas elekti la grandecon de la mapo kaj starigis aliajn ekrano ebloj. </p>
<p><amp-img src="https://i23.delachieve.com/image/20da6f9a7e280ece.jpg" alt="html iframe ekzemplo" width="600" height="488" layout="intrinsic"></amp-img></p>
<p> Kiom alia povas vi uzas HTML <em><iframe>?</em> Ekzemplo - enmeti videojn el Youtube rimedo. Multimedia Technologies altiri retumantoj, do la video enhavo estas tiel populara. Kun la instalado de la ellaboranto rulilo pritrakti rapide. </p>
<ol><li> Ĝi devus esti alŝutita al Youtube propran video aŭ trovi triaj dosieron por traduko. </li><li> Akiri etikedo elektante la butono «HTML-kodon" </li><li> La fina akto - enmeti <a href="https://eo.delachieve.com/html-kodo-html-koloro-kodoj/">HTML kodo</a> <iframe>. EKZEMPLO ricevis etikedo enhavo estos diskutita sube. </li></ol><p> En ambaŭ ekzemploj mi uzas la aŭtomata kodo generacio, sed profesia programistoj devus povi fari sian propran. Unue, ĝi permesos ilin al kompreni la vorstke paĝo kaj modifi ĝin se necese. Due, la retejo ne estas ĉiam markante elementoj (eĉ malgraŭ tio, ke ili apartenas al ekstera rimedo), estas formita sen la partopreno de la retestro. Ĉi tie ankaŭ aperas tre kvalifikitaj ellaboranto. </p>
<p><amp-img src="https://i23.delachieve.com/image/92fab38a7e2d0ecf.jpg" alt="iframe html ĝi" width="680" height="450" layout="intrinsic"></amp-img></p>
<h2> sintakso </h2><p> Do antaŭ ol vi komencas paĝo vorstke, iframe (html) etikedo devas konsideri: kio ĝi estas kaj kiel uzi ĝin. </p>
<p> Unue, ni notu, ke la etikedo paro. Inter la malfermo kaj fermo membro indiki la enhavon por esti montrata en retumiloj kiuj ne subtenas la markado elemento. Bazaj etikedo ecoj: </p>
<ul><li> larĝa (W); </li><li> alteco (alteco); </li><li> src (adreson ŝarĝis rimedo); </li><li> align (alineación procezo); </li><li> frameborder; </li><li> allowfullscreen. </li></ul><p> Tiel, vi ricevos kodon por <iframe>. HTML-ekzemplo plene montris sube: </p>
<p> <em><Iframe width = "560" alteco = "315" src = "https://someserver.com/" frameborder =</em> " <em>0" allowfullscreen> </ iframe></em> </p>
<p> La tablo aranĝo estas sufiĉa por anstataŭigi la adreson de la retejo al alia kaj, se necese, ĝustigi la grandecon de la kadro. </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://eo.delachieve.com/kiel-lerni-grafika-dezajno-kaj-farigis-tre-pagitaj-specialisto/">
<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://eo.delachieve.com/kiel-lerni-grafika-dezajno-kaj-farigis-tre-pagitaj-specialisto/">
<p>Kiel lerni grafika dezajno kaj fariĝis tre pagitaj specialisto</p>
<h3 class="mvp-cat-bub"><span class="mvp-cat-bub">Interreto</span></h3>
</a>
</div>
<!--mvp-post-more-text-->
</li>
<li>
<div class="mvp-post-more-img left relative">
<a href="https://eo.delachieve.com/css-koloro-ecoj-koloro-kodoj/">
<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://eo.delachieve.com/css-koloro-ecoj-koloro-kodoj/">
<p>CSS koloro ecoj. koloro kodoj</p>
<h3 class="mvp-cat-bub"><span class="mvp-cat-bub">Interreto</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://eo.delachieve.com/kiom-kostas-unu-retejon/">
<p>Kiom kostas unu retejon?</p>
<h3 class="mvp-cat-bub"><span class="mvp-cat-bub">Interreto</span></h3>
</a>
</div>
<!--mvp-post-more-text-->
</li>
<li>
<div class="mvp-post-more-img left relative">
<a href="https://eo.delachieve.com/grandeco-bildsimboleto-por-via-retejo/">
<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://eo.delachieve.com/grandeco-bildsimboleto-por-via-retejo/">
<p>Grandeco bildsimboleto por via retejo</p>
<h3 class="mvp-cat-bub"><span class="mvp-cat-bub">Interreto</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://eo.delachieve.com/kiom-kaj-kie-to-order-retejon/">
<p>Kiom Kaj Kie To Order retejon</p>
<h3 class="mvp-cat-bub"><span class="mvp-cat-bub">Interreto</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://eo.delachieve.com/kial-homoj-daure-lernu-html/">
<p>Kial homoj daŭre Lernu HTML?</p>
<h3 class="mvp-cat-bub"><span class="mvp-cat-bub">Interreto</span></h3>
</a>
</div>
<!--mvp-post-more-text-->
</li>
</ul>
</div>
<!--mvp-post-more-wrap-->
<p> </p><p> </p><p> </p><p> </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://eo.delachieve.com/kiom-da-tempo-la-terorismaj-atakoj-en-israelo-daurigos/">
<amp-img class="mvp-reg-img" src="https://i23.delachieve.com/image/b81adc417dd00ec8-560x315.jpg" width="560" height="315" layout="responsive"></amp-img>
<amp-img class="mvp-mob-img" src="https://i23.delachieve.com/image/b81adc417dd00ec8-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://eo.delachieve.com/kiom-da-tempo-la-terorismaj-atakoj-en-israelo-daurigos/">
<p>Kiom da tempo la terorismaj atakoj en Israelo daŭrigos?</p>
<h3 class="mvp-cat-bub"><span class="mvp-cat-bub">Novaĵoj kaj Socio</span></h3>
</a>
</div>
<!--mvp-post-more-text-->
</li>
<li>
<div class="mvp-post-more-img left relative">
<a href="https://eo.delachieve.com/hypoallergenic-formulo-kaj-gia-specio/">
<amp-img class="mvp-reg-img" src="https://i23.delachieve.com/image/bf1c036c6fec0e9c-560x315.jpg" width="560" height="315" layout="responsive"></amp-img>
<amp-img class="mvp-mob-img" src="https://i23.delachieve.com/image/bf1c036c6fec0e9c-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://eo.delachieve.com/hypoallergenic-formulo-kaj-gia-specio/">
<p>Hypoallergenic formulo kaj ĝia specio</p>
<h3 class="mvp-cat-bub"><span class="mvp-cat-bub">Sano</span></h3>
</a>
</div>
<!--mvp-post-more-text-->
</li>
<li>
<div class="mvp-post-more-img left relative">
<a href="https://eo.delachieve.com/kio-estas-hemangioma-kaj-kio-gi-estas-dangera-al-sano/">
<amp-img class="mvp-reg-img" src="https://i23.delachieve.com/image/2029047f6fcc0e9c-560x315.jpg" width="560" height="315" layout="responsive"></amp-img>
<amp-img class="mvp-mob-img" src="https://i23.delachieve.com/image/2029047f6fcc0e9c-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://eo.delachieve.com/kio-estas-hemangioma-kaj-kio-gi-estas-dangera-al-sano/">
<p>Kio estas hemangioma kaj kio ĝi estas danĝera al sano?</p>
<h3 class="mvp-cat-bub"><span class="mvp-cat-bub">Sano</span></h3>
</a>
</div>
<!--mvp-post-more-text-->
</li>
<li>
<div class="mvp-post-more-img left relative">
<a href="https://eo.delachieve.com/pupillary-reflekso-kaj-signoj-de-malvenko/">
<amp-img class="mvp-reg-img" src="https://i23.delachieve.com/image/87597d0070430ea5-560x315.jpg" width="560" height="315" layout="responsive"></amp-img>
<amp-img class="mvp-mob-img" src="https://i23.delachieve.com/image/87597d0070430ea5-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://eo.delachieve.com/pupillary-reflekso-kaj-signoj-de-malvenko/">
<p>Pupillary reflekso kaj signoj de malvenko</p>
<h3 class="mvp-cat-bub"><span class="mvp-cat-bub">Sano</span></h3>
</a>
</div>
<!--mvp-post-more-text-->
</li>
<li>
<div class="mvp-post-more-img left relative">
<a href="https://eo.delachieve.com/lotman-yury-nekutima-kaj-brila/">
<amp-img class="mvp-reg-img" src="https://i23.delachieve.com/image/ea3467f57e2b0ecf-560x315.jpg" width="560" height="315" layout="responsive"></amp-img>
<amp-img class="mvp-mob-img" src="https://i23.delachieve.com/image/ea3467f57e2b0ecf-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://eo.delachieve.com/lotman-yury-nekutima-kaj-brila/">
<p>Lotman Yury - nekutima kaj brila</p>
<h3 class="mvp-cat-bub"><span class="mvp-cat-bub">Artoj kaj Distro</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://eo.delachieve.com/timber-lining-krasnoyarsk-tabuloj-stipoj-alero-tabuloj/">
<p>Timber, Lining Krasnoyarsk, tabuloj, ŝtipoj, Alero tabuloj.</p>
<h3 class="mvp-cat-bub"><span class="mvp-cat-bub">Komerca</span></h3>
</a>
</div>
<!--mvp-post-more-text-->
</li>
</ul>
</div>
<!--mvp-post-more-wrap-->
<p> </p><p> </p><p> </p><p> </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://eo.delachieve.com/aeraj-specimenoj-en-la-cambro-aera-samplanta-procedo/">
<amp-img class="mvp-reg-img" src="https://i23.delachieve.com/image/b15c0a2a6ff40e99-560x315.jpg" width="560" height="315" layout="responsive"></amp-img>
<amp-img class="mvp-mob-img" src="https://i23.delachieve.com/image/b15c0a2a6ff40e99-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://eo.delachieve.com/aeraj-specimenoj-en-la-cambro-aera-samplanta-procedo/">
<p>Aeraj specimenoj en la ĉambro. Aera Samplanta Procedo</p>
<h3 class="mvp-cat-bub"><span class="mvp-cat-bub">Novaĵoj kaj Socio</span></h3>
</a>
</div>
<!--mvp-post-more-text-->
</li>
<li>
<div class="mvp-post-more-img left relative">
<a href="https://eo.delachieve.com/kiel-elekti-multivarku-iuj-rekomendoj/">
<amp-img class="mvp-reg-img" src="https://i23.delachieve.com/image/3daddaf461950e5e-560x315.jpg" width="560" height="315" layout="responsive"></amp-img>
<amp-img class="mvp-mob-img" src="https://i23.delachieve.com/image/3daddaf461950e5e-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://eo.delachieve.com/kiel-elekti-multivarku-iuj-rekomendoj/">
<p>Kiel elekti multivarku: iuj rekomendoj</p>
<h3 class="mvp-cat-bub"><span class="mvp-cat-bub">De teknologio</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://eo.delachieve.com/pladoj-de-kokino/">
<p>Pladoj de kokino</p>
<h3 class="mvp-cat-bub"><span class="mvp-cat-bub">Manĝaĵo kaj trinkaĵoj</span></h3>
</a>
</div>
<!--mvp-post-more-text-->
</li>
<li>
<div class="mvp-post-more-img left relative">
<a href="https://eo.delachieve.com/la-logantaro-de-krasnodar-la-dinamiko-de-etnoj-dungadon/">
<amp-img class="mvp-reg-img" src="https://i23.delachieve.com/image/46d940387e0f0ece-560x315.jpg" width="560" height="315" layout="responsive"></amp-img>
<amp-img class="mvp-mob-img" src="https://i23.delachieve.com/image/46d940387e0f0ece-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://eo.delachieve.com/la-logantaro-de-krasnodar-la-dinamiko-de-etnoj-dungadon/">
<p>La loĝantaro de Krasnodar: la dinamiko de etnoj, dungadon</p>
<h3 class="mvp-cat-bub"><span class="mvp-cat-bub">Novaĵoj kaj Socio</span></h3>
</a>
</div>
<!--mvp-post-more-text-->
</li>
<li>
<div class="mvp-post-more-img left relative">
<a href="https://eo.delachieve.com/pskov-pushkin-teatro-historio-repertuaro-trupo/">
<amp-img class="mvp-reg-img" src="https://i23.delachieve.com/image/67b318047e3e0ecf-560x315.jpg" width="560" height="315" layout="responsive"></amp-img>
<amp-img class="mvp-mob-img" src="https://i23.delachieve.com/image/67b318047e3e0ecf-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://eo.delachieve.com/pskov-pushkin-teatro-historio-repertuaro-trupo/">
<p>Pskov, Pushkin teatro: historio, repertuaro, trupo</p>
<h3 class="mvp-cat-bub"><span class="mvp-cat-bub">Artoj kaj Distro</span></h3>
</a>
</div>
<!--mvp-post-more-text-->
</li>
<li>
<div class="mvp-post-more-img left relative">
<a href="https://eo.delachieve.com/kiel-desegni-la-vento-esploris-kune-ekzemple-pejzago-kaj-portreto/">
<amp-img class="mvp-reg-img" src="https://i23.delachieve.com/image/f60e4be27dea0ec9-560x315.jpg" width="560" height="315" layout="responsive"></amp-img>
<amp-img class="mvp-mob-img" src="https://i23.delachieve.com/image/f60e4be27dea0ec9-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://eo.delachieve.com/kiel-desegni-la-vento-esploris-kune-ekzemple-pejzago-kaj-portreto/">
<p>Kiel desegni la vento? Esploris kune ekzemple pejzaĝo kaj portreto</p>
<h3 class="mvp-cat-bub"><span class="mvp-cat-bub">Artoj kaj Distro</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 eo.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.196 seconds. -->
<!-- Cached page generated by WP-Super-Cache on 2019-09-30 15:22:34 -->
<!-- 0.002 --> ]]>