InternetWeb design

Kako vstaviti HTML iframe: Primer uporabe

Ob zori na spletnem mestu so gradbeni sredstva pogosto uporabljajo okvirje za prikaz določenih delov strani. Toda s prihodom nove različice HTML 5, se je vse spremenilo. Elementi označevalni , in </em> opuščena. njihovo zamenjavo je postala enotna oznaka - <em><iframe>.</em> Kako dodam html <iframe>? Spodnji primer bo razumel, tudi novice programiranja. </p> <h2> Kaj so okvirji? </h2><p> Okvir - osnova večine prvih spletnih straneh. Če je prevedena dobesedno, beseda pomeni &quot;frame&quot;, da je okvir je majhen del strani v brskalniku. Široka uporaba okvirjev v preteklosti je mogoče razložiti z slabe kakovosti in visokih stroškov internetnega prometa. Značilno je, da je bilo območje razdeljeno na 3-5 dele, od katerih vsak opravlja določen namen: </p> <ul><li> &quot;Cap&quot; (zgornji okvir širine strani) - Zaslon ime vira; </li><li> Levo / desno &quot;steklo&quot; - meni prikaz; </li><li> Srednja okvir - prikazuje vsebino spletnega mesta. </li></ul><p><amp-img src="https://i23.delachieve.com/image/1dba462a7e230ecd.jpg" alt="html iframe Primer" width="580" height="435" layout="intrinsic"></amp-img></p> <p> Razčlenitev strani, da se omogoči ponovno naložiti samo del njega, ko nadgradite. Na primer, uporabnik klikne na element menija, in osrednji okvir so črpali nove vsebine. </p> <h2> Moderni okvirji v HTML 5 </h2><p> Zakaj moram HTML <em><iframe>?</em> Primer - vstaviti vsebino tretje stranke. Klasična situacija je pri spletni razvijalec želi pokazati položaj objekta na zemljevidu. Kaj storiti? Nariši tloris iz nič? Ne - je enostavnejša rešitev: zgraditi strani Google Map element Yandex Maps ali 2GIS. Problem je rešen v štirih korakih. </p> <ol><li> Moraš iti na mestu koli zemljevid storitev. </li><li> Poiščite želeni predmet. Poznavanje točen naslov, ga lahko vnesete v iskalno polje. </li><li> Uporabite &quot;Shrani in dobili kodo&quot; (za &quot;Yandex.Maps&quot;) ali &quot;Finish&quot; (Google Maps), da bi dobili kodo za vstavljanje. </li><li> To je še vedno, da napišete ustvarjenih označevalne oznake na strani. </li></ol><p> Poleg tega lahko izberete velikost zemljevida in nastaviti druge možnosti prikaza. </p> <p><amp-img src="https://i23.delachieve.com/image/20da6f9a7e280ece.jpg" alt="html iframe Primer" width="600" height="488" layout="intrinsic"></amp-img></p> <p> Kako bi sicer lahko uporabite HTML <em><iframe>?</em> Primer - vstaviti video posnetkov iz Youtube virov. Multimedijske tehnologije privabiti uporabnike interneta, tako da je video vsebin je tako priljubljen. Z vgradnjo valja razvijalca ročaj hitro. </p> <ol><li> Prav tako je treba naložiti na Youtube lastno video ali najti datoteko tretjih oseb za prevajanje. </li><li> Pridobite oznako z izbiro gumba «HTML-kodo&quot; </li><li> Končno dejanje - vstavite <a href="https://sl.delachieve.com/html-kodo-html-barvne-oznake/">HTML kodo</a> <iframe>. Primer prejela vsebine tag bo obravnavana v nadaljevanju. </li></ol><p> V obeh primerih sem uporabiti avtomatsko generiranje kode, ampak strokovne razvijalci bi morali imeti možnost, da se sam. Najprej bo to omogočilo, da razumejo stran vorstke in ga spremeniti, če je potrebno. Drugič, stran ni vedno označevanje elementov (celo kljub temu, da ji pripadajo na zunanji vir), ki je nastala brez sodelovanja webmaster. Tu se pojavi tudi visoko kvalificiran razvijalec. </p> <p><amp-img src="https://i23.delachieve.com/image/92fab38a7e2d0ecf.jpg" alt="iframe ga html" width="680" height="450" layout="intrinsic"></amp-img></p> <h2> sintaksa </h2><p> Torej, preden začnete strani vorstke, mora iframe (html) tag razmisli: kaj je in kako jo uporabljati. </p> <p> Najprej je treba opozoriti, da oznak par. Med začetnim in končnim član navedbo vsebine, ki bodo prikazani v brskalnikih, ki ne podpirajo označevalni element. Osnovni tag atributi: </p> <ul><li> širina (W); </li><li> višina (višina); </li><li> src (naslov naložen virov); </li><li> uskladiti (postopek poravnave); </li><li> frameborder; </li><li> allowfullscreen. </li></ul><p> Tako, da bi dobili kodo za <iframe>. HTML primer v celoti dokazana spodaj: </p> <p> <em><Širina iframe = &quot;560&quot; height = &quot;315&quot; src = &quot;https://someserver.com/&quot; frameborder =</em> &quot; <em>0&quot; allowfullscreen> </ iframe></em> </p> <p> Postavitev miza je dovolj zamenjati naslov spletne strani, da katera koli druga, in, če je potrebno, prilagodite velikost okvirja. </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://sl.delachieve.com/velikost-favicon-za-vaso-spletno-stran/"> <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://sl.delachieve.com/velikost-favicon-za-vaso-spletno-stran/"> <p>Velikost favicon za vašo spletno stran</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://sl.delachieve.com/koliko-je-spletna-stran/"> <p>Koliko je spletna stran?</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://sl.delachieve.com/krusne-drobtine-na-spletni-strani-kaj-so-za-navigacijske-krusnih-drobtin/"> <amp-img class="mvp-reg-img" src="https://i23.delachieve.com/image/8d4ea085702c0ea2-560x315.jpg" width="560" height="315" layout="responsive"></amp-img> <amp-img class="mvp-mob-img" src="https://i23.delachieve.com/image/8d4ea085702c0ea2-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://sl.delachieve.com/krusne-drobtine-na-spletni-strani-kaj-so-za-navigacijske-krusnih-drobtin/"> <p>&quot;Krušne drobtine&quot; na spletni strani: kaj so za? Navigacijske &quot;krušnih drobtin&quot;</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://sl.delachieve.com/css-okviri-za-odzivno-oblikovanje/"> <amp-img class="mvp-reg-img" src="https://i23.delachieve.com/image/236ed6537e2d0ece-560x315.jpg" width="560" height="315" layout="responsive"></amp-img> <amp-img class="mvp-mob-img" src="https://i23.delachieve.com/image/236ed6537e2d0ece-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://sl.delachieve.com/css-okviri-za-odzivno-oblikovanje/"> <p>CSS-okviri za odzivno oblikovanje</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://sl.delachieve.com/lastnosti-png-formata-vloga-in-razloge-za-priljubljenost/"> <amp-img class="mvp-reg-img" src="https://i23.delachieve.com/image/442b5f7461900e5b-560x315.jpg" width="560" height="315" layout="responsive"></amp-img> <amp-img class="mvp-mob-img" src="https://i23.delachieve.com/image/442b5f7461900e5b-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://sl.delachieve.com/lastnosti-png-formata-vloga-in-razloge-za-priljubljenost/"> <p>Lastnosti PNG formata, vloga in razloge za priljubljenost</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://sl.delachieve.com/pravilno-oblikovanje-spletne-strani-kljuc-do-uspeha/"> <amp-img class="mvp-reg-img" src="https://i23.delachieve.com/image/e3a19d7553d50e2c-560x315.jpg" width="560" height="315" layout="responsive"></amp-img> <amp-img class="mvp-mob-img" src="https://i23.delachieve.com/image/e3a19d7553d50e2c-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://sl.delachieve.com/pravilno-oblikovanje-spletne-strani-kljuc-do-uspeha/"> <p>Pravilno oblikovanje spletne strani - ključ do uspeha</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"> </div> <!--mvp-post-more-img--> <div class="mvp-post-more-text left relative"> <a href="https://sl.delachieve.com/kaj-pa-ce-si-se-potil-veliko/"> <p>Kaj pa, če si se potil veliko?</p> <h3 class="mvp-cat-bub"><span class="mvp-cat-bub">Zdravje</span></h3> </a> </div> <!--mvp-post-more-text--> </li> <li> <div class="mvp-post-more-img left relative"> <a href="https://sl.delachieve.com/hladilnik-vestel-funkcije-in-pregledi/"> <amp-img class="mvp-reg-img" src="https://i23.delachieve.com/image/8a2133e77ea10edb-560x315.jpg" width="560" height="315" layout="responsive"></amp-img> <amp-img class="mvp-mob-img" src="https://i23.delachieve.com/image/8a2133e77ea10edb-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://sl.delachieve.com/hladilnik-vestel-funkcije-in-pregledi/"> <p>Hladilnik &quot;Vestel&quot;: Funkcije in pregledi</p> <h3 class="mvp-cat-bub"><span class="mvp-cat-bub">Domačnost</span></h3> </a> </div> <!--mvp-post-more-text--> </li> <li> <div class="mvp-post-more-img left relative"> <a href="https://sl.delachieve.com/tasha-stroga-biografija-kariera-in-osebno-zivljenje/"> <amp-img class="mvp-reg-img" src="https://i23.delachieve.com/image/808bead270690ea7-560x315.jpg" width="560" height="315" layout="responsive"></amp-img> <amp-img class="mvp-mob-img" src="https://i23.delachieve.com/image/808bead270690ea7-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://sl.delachieve.com/tasha-stroga-biografija-kariera-in-osebno-zivljenje/"> <p>Tasha Stroga: biografija, kariera in osebno življenje</p> <h3 class="mvp-cat-bub"><span class="mvp-cat-bub">Umetnost in zabava</span></h3> </a> </div> <!--mvp-post-more-text--> </li> <li> <div class="mvp-post-more-img left relative"> <a href="https://sl.delachieve.com/osnove-krajinskega-oblikovanja-slogi-in-pravila-potrditve-stran/"> <amp-img class="mvp-reg-img" src="https://i23.delachieve.com/image/5d7fd92d7e790ed9-560x315.jpg" width="560" height="315" layout="responsive"></amp-img> <amp-img class="mvp-mob-img" src="https://i23.delachieve.com/image/5d7fd92d7e790ed9-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://sl.delachieve.com/osnove-krajinskega-oblikovanja-slogi-in-pravila-potrditve-stran/"> <p>Osnove krajinskega oblikovanja: Slogi in pravila potrditve stran</p> <h3 class="mvp-cat-bub"><span class="mvp-cat-bub">Domačnost</span></h3> </a> </div> <!--mvp-post-more-text--> </li> <li> <div class="mvp-post-more-img left relative"> <a href="https://sl.delachieve.com/eratostenovo-sito-v-programiranju/"> <amp-img class="mvp-reg-img" src="https://i23.delachieve.com/image/abc4779270750ea5-560x315.jpg" width="560" height="315" layout="responsive"></amp-img> <amp-img class="mvp-mob-img" src="https://i23.delachieve.com/image/abc4779270750ea5-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://sl.delachieve.com/eratostenovo-sito-v-programiranju/"> <p>Eratostenovo sito v programiranju</p> <h3 class="mvp-cat-bub"><span class="mvp-cat-bub">Računalniki</span></h3> </a> </div> <!--mvp-post-more-text--> </li> <li> <div class="mvp-post-more-img left relative"> <a href="https://sl.delachieve.com/kako-posaditi-srobota-nekaj-nasvetov/"> <amp-img class="mvp-reg-img" src="https://i23.delachieve.com/image/7ffa82fc626c0e70-560x315.jpg" width="560" height="315" layout="responsive"></amp-img> <amp-img class="mvp-mob-img" src="https://i23.delachieve.com/image/7ffa82fc626c0e70-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://sl.delachieve.com/kako-posaditi-srobota-nekaj-nasvetov/"> <p>Kako posaditi srobota? Nekaj nasvetov</p> <h3 class="mvp-cat-bub"><span class="mvp-cat-bub">Domačnost</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://sl.delachieve.com/giovanna-antonelli-giovanna-antonelli-zivljenjepis-in-filmografijo-igralka-fotografije/"> <amp-img class="mvp-reg-img" src="https://i23.delachieve.com/image/1ef85a3f6f980e95-560x315.jpg" width="560" height="315" layout="responsive"></amp-img> <amp-img class="mvp-mob-img" src="https://i23.delachieve.com/image/1ef85a3f6f980e95-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://sl.delachieve.com/giovanna-antonelli-giovanna-antonelli-zivljenjepis-in-filmografijo-igralka-fotografije/"> <p>Giovanna Antonelli (Giovanna Antonelli): življenjepis in filmografijo igralka (fotografije)</p> <h3 class="mvp-cat-bub"><span class="mvp-cat-bub">Umetnost in zabava</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://sl.delachieve.com/kako-omogociti-piskotke-v-priljubljenih-brskalnikov/"> <p>Kako omogočiti piškotke v priljubljenih brskalnikov</p> <h3 class="mvp-cat-bub"><span class="mvp-cat-bub">Računalniki</span></h3> </a> </div> <!--mvp-post-more-text--> </li> <li> <div class="mvp-post-more-img left relative"> <a href="https://sl.delachieve.com/igra-prehod-stalker-jasno-nebo-cold-blood-fripley/"> <amp-img class="mvp-reg-img" src="https://i23.delachieve.com/image/1f0400eb70090ea1-560x315.jpg" width="560" height="315" layout="responsive"></amp-img> <amp-img class="mvp-mob-img" src="https://i23.delachieve.com/image/1f0400eb70090ea1-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://sl.delachieve.com/igra-prehod-stalker-jasno-nebo-cold-blood-fripley/"> <p>Igra prehod. &quot;STALKER: Jasno nebo - Cold Blood&quot;: fripley</p> <h3 class="mvp-cat-bub"><span class="mvp-cat-bub">Računalniki</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://sl.delachieve.com/kaj-pa-ce-je-bil-bel-izcedek-iz-noznice-pri-zenskah/"> <p>Kaj pa, če je bil bel izcedek iz nožnice pri ženskah?</p> <h3 class="mvp-cat-bub"><span class="mvp-cat-bub">Zdravje</span></h3> </a> </div> <!--mvp-post-more-text--> </li> <li> <div class="mvp-post-more-img left relative"> <a href="https://sl.delachieve.com/kaksna-bi-morala-biti-visina-ograje-med-sosednjimi-dele-zakona/"> <amp-img class="mvp-reg-img" src="https://i23.delachieve.com/image/b61072347ec10edc-560x315.jpg" width="560" height="315" layout="responsive"></amp-img> <amp-img class="mvp-mob-img" src="https://i23.delachieve.com/image/b61072347ec10edc-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://sl.delachieve.com/kaksna-bi-morala-biti-visina-ograje-med-sosednjimi-dele-zakona/"> <p>Kakšna bi morala biti višina ograje med sosednjimi dele zakona?</p> <h3 class="mvp-cat-bub"><span class="mvp-cat-bub">Pravo</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://sl.delachieve.com/industrija-goriva/"> <p>Industrija goriva</p> <h3 class="mvp-cat-bub"><span class="mvp-cat-bub">Poslovni</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 sl.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.101 seconds. --> <!-- Cached page generated by WP-Super-Cache on 2019-10-01 01:05:19 --> <!-- 0.001 -->