InternetWeb Design

Hoe kan ik HTML iframe te voegen: voorbeeld van het gebruik

Aan het begin van de website bouwen middelen worden op grote schaal gebruikt frames om bepaalde delen van de pagina's weer te geven. Maar met de komst van een nieuwe versie van HTML 5, veranderde alles. Elementen van de markup , en </em> afgekeurd. ze te vervangen is uitgegroeid tot een enkele tag - <em><iframe>.</em> Hoe voeg ik html <iframe>? Het onderstaande voorbeeld zal duidelijk zijn, zelfs een beginner in de programmering. </p> <h2> Wat zijn frames? </h2><p> Frame - de basis van de meeste van de eerste webpagina&#39;s. Als letterlijk vertaald, betekent het woord &quot;kader&quot; dat wil zeggen, het frame is een klein deel van de pagina in de browser. Het wijdverbreide gebruik van frames in het verleden kan worden verklaard door de slechte kwaliteit en de hoge kosten van het internetverkeer. Kenmerkend werd de site verdeeld in 3-5 delen, die elk een specifiek doel vervult: </p> <ul><li> &quot;Cap&quot; (de bovenste frame van de pagina breedte) - naam Weergave van de hulpbronnen; </li><li> Left / Right &quot;glas&quot; - scherm menu; </li><li> Centrale frame - toont de inhoud van de site. </li></ul><p><amp-img src="https://i23.delachieve.com/image/1dba462a7e230ecd.jpg" alt="html iframe voorbeeld" width="580" height="435" layout="intrinsic"></amp-img></p> <p> Een uitsplitsing van de pagina&#39;s om het herladen van slechts een deel van het wanneer u een upgrade uitvoert. Bijvoorbeeld, de gebruiker klikt op het menu-item, en het centrale frame werden gepompt nieuwe inhoud. </p> <h2> Modern frames in HTML 5 </h2><p> Waarom moet ik naar HTML <em><iframe>?</em> Voorbeeld - een inhoud van derden website in te voegen. De klassieke situatie is wanneer een web developer wil de positie van het object op de kaart te tonen. Wat te doen? Teken grondplan van de grond af? Nee - er is een eenvoudiger oplossing: bouw een pagina Google Map element Yandex Maps of 2GIS. Het probleem wordt opgelost in vier stappen. </p> <ol><li> Je moet naar de site van elke map service. </li><li> Zoek de gewenste object. Het kennen van de exacte adres, kunt u deze opgeven in het zoekvak. </li><li> Gebruik de &quot;Opslaan en code ophalen&quot; (voor &quot;Yandex.Maps&quot;) of &quot;Finish&quot; (Google Maps) om de code in te voegen. </li><li> Het blijft aan de gegenereerde markuptags schrijven op een pagina. </li></ol><p> Daarnaast kunt u de grootte van de map te kiezen en andere weergave-opties. </p> <p><amp-img src="https://i23.delachieve.com/image/20da6f9a7e280ece.jpg" alt="html iframe voorbeeld" width="600" height="488" layout="intrinsic"></amp-img></p> <p> Hoe kun je anders HTML <em><iframe> gebruiken?</em> Voorbeeld - om video&#39;s van Youtube resource in te voegen. Multimedia Technologies trekken internetgebruikers, zodat de video-inhoud zo populair is. Met de installatie van de ontwikkelaar roller verwerken snel. </p> <ol><li> Het moet worden geüpload naar YouTube eigen video of het vinden van een third-party-bestand voor de vertaling. </li><li> Hier krijg je een tag door de knop «HTML-code&quot; </li><li> De laatste act - invoegen <a href="https://nl.delachieve.com/html-code-html-kleurcodes/">HTML-code</a> <iframe>. Voorbeeld ontvangen taginhoud hieronder zal worden besproken. </li></ol><p> In beide voorbeelden gebruik ik de automatische codegeneratie, maar professionele ontwikkelaars moet in staat zijn om zijn eigen te maken. Ten eerste, zal het hen in staat stellen om de vorstke pagina te begrijpen en indien nodig aan te passen. Ten tweede, is de site niet altijd markering elementen (zelfs ondanks het feit dat zij deel uitmaken van een externe bron) wordt gevormd zonder de deelname van de webmaster. Hier blijkt ook hooggekwalificeerde ontwikkelaar. </p> <p><amp-img src="https://i23.delachieve.com/image/92fab38a7e2d0ecf.jpg" alt="iframe html is" width="680" height="450" layout="intrinsic"></amp-img></p> <h2> syntaxis </h2><p> Dus voordat je pagina vorstke begint, moet iframe (html) tag overwegen: wat het is en hoe het te gebruiken. </p> <p> In de eerste plaats dient te worden opgemerkt dat de tag paar. Tussen de begin- en sluitorgaan geven de inhoud voor weergave in browsers die niet ondersteunen de markering element. Basic tag attributen: </p> <ul><li> breedte (W); </li><li> lengte (hoogte); </li><li> src (adres geladen resource); </li><li> lijn (uitlijnproces); </li><li> frameborder; </li><li> allowfullscreen. </li></ul><p> Dus, om de code voor de <iframe> krijgen. HTML-voorbeeld hieronder volledig aangetoond: </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> De tafel lay-out is voldoende om het adres van de site te vervangen door een andere en, indien nodig, de grootte van het frame. </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://nl.delachieve.com/jquery-modaal-venster-wat-je-nodig-hebt-en-hoe-te-installeren/"> <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://nl.delachieve.com/jquery-modaal-venster-wat-je-nodig-hebt-en-hoe-te-installeren/"> <p>JQuery modaal venster - wat je nodig hebt en hoe te installeren</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://nl.delachieve.com/wat-is-een-banner-een-inside-view-en-de-geschiedenis-van-het-ontstaan-ervan/"> <amp-img class="mvp-reg-img" src="https://i23.delachieve.com/image/2a8c751262480e6e-560x315.jpg" width="560" height="315" layout="responsive"></amp-img> <amp-img class="mvp-mob-img" src="https://i23.delachieve.com/image/2a8c751262480e6e-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://nl.delachieve.com/wat-is-een-banner-een-inside-view-en-de-geschiedenis-van-het-ontstaan-ervan/"> <p>Wat is een banner - een inside view en de geschiedenis van het ontstaan ervan</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://nl.delachieve.com/css-frameworks-voor-responsive-design/"> <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://nl.delachieve.com/css-frameworks-voor-responsive-design/"> <p>CSS-frameworks voor responsive design</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://nl.delachieve.com/web-studio-rating-diensten-voor-de-creatie-en-de-promotie-van-sites-beoordelingen/"> <amp-img class="mvp-reg-img" src="https://i23.delachieve.com/image/04b4d8947dc50ec8-560x315.jpg" width="560" height="315" layout="responsive"></amp-img> <amp-img class="mvp-mob-img" src="https://i23.delachieve.com/image/04b4d8947dc50ec8-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://nl.delachieve.com/web-studio-rating-diensten-voor-de-creatie-en-de-promotie-van-sites-beoordelingen/"> <p>Web Studio: rating diensten voor de creatie en de promotie van sites, beoordelingen</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://nl.delachieve.com/png-formaat-functies-de-toepassing-en-de-redenen-voor-de-populariteit/"> <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://nl.delachieve.com/png-formaat-functies-de-toepassing-en-de-redenen-voor-de-populariteit/"> <p>PNG-formaat functies, de toepassing en de redenen voor de populariteit</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://nl.delachieve.com/technologieen-voor-het-ontwerpen-van-websites-overzicht-en-nieuwe-trends/"> <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://nl.delachieve.com/technologieen-voor-het-ontwerpen-van-websites-overzicht-en-nieuwe-trends/"> <p>Technologieën voor het ontwerpen van websites: overzicht en nieuwe trends</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://nl.delachieve.com/khvalynsk-cave-monnik-hoe-er-te-komen-fotos-en-reviews/"> <amp-img class="mvp-reg-img" src="https://i23.delachieve.com/image/209e71717e260ecc-560x315.jpg" width="560" height="315" layout="responsive"></amp-img> <amp-img class="mvp-mob-img" src="https://i23.delachieve.com/image/209e71717e260ecc-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://nl.delachieve.com/khvalynsk-cave-monnik-hoe-er-te-komen-fotos-en-reviews/"> <p>Khvalynsk, &quot;Cave monnik&quot;: hoe er te komen? Foto&#39;s en reviews</p> <h3 class="mvp-cat-bub"><span class="mvp-cat-bub">Reizend</span></h3> </a> </div> <!--mvp-post-more-text--> </li> <li> <div class="mvp-post-more-img left relative"> <a href="https://nl.delachieve.com/poni-royale-reviews-en-beschrijvingen-van-magische-ponys/"> <amp-img class="mvp-reg-img" src="https://i23.delachieve.com/image/213b320b7e550ecf-560x315.jpg" width="560" height="315" layout="responsive"></amp-img> <amp-img class="mvp-mob-img" src="https://i23.delachieve.com/image/213b320b7e550ecf-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://nl.delachieve.com/poni-royale-reviews-en-beschrijvingen-van-magische-ponys/"> <p>Poni Royale: reviews en beschrijvingen van magische pony&#39;s</p> <h3 class="mvp-cat-bub"><span class="mvp-cat-bub">Thuis en Familie</span></h3> </a> </div> <!--mvp-post-more-text--> </li> <li> <div class="mvp-post-more-img left relative"> <a href="https://nl.delachieve.com/vaccinaties-honden-door-leeftijd-een-lijst-van-de-jaarlijkse-vaccinaties/"> <amp-img class="mvp-reg-img" src="https://i23.delachieve.com/image/bcf9288570ef0ead-560x315.jpg" width="560" height="315" layout="responsive"></amp-img> <amp-img class="mvp-mob-img" src="https://i23.delachieve.com/image/bcf9288570ef0ead-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://nl.delachieve.com/vaccinaties-honden-door-leeftijd-een-lijst-van-de-jaarlijkse-vaccinaties/"> <p>Vaccinaties honden door leeftijd: Een lijst van de jaarlijkse vaccinaties</p> <h3 class="mvp-cat-bub"><span class="mvp-cat-bub">Thuis en Familie</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://nl.delachieve.com/hypoplasie-van-de-testes-en-cryptorchisme/"> <p>Hypoplasie van de testes en cryptorchisme</p> <h3 class="mvp-cat-bub"><span class="mvp-cat-bub">Gezondheid</span></h3> </a> </div> <!--mvp-post-more-text--> </li> <li> <div class="mvp-post-more-img left relative"> <a href="https://nl.delachieve.com/wat-is-anders-dan-de-crossover-suv-nuttige-artikelen/"> <amp-img class="mvp-reg-img" src="https://i23.delachieve.com/image/eda5e520700a0e9d-560x315.jpg" width="560" height="315" layout="responsive"></amp-img> <amp-img class="mvp-mob-img" src="https://i23.delachieve.com/image/eda5e520700a0e9d-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://nl.delachieve.com/wat-is-anders-dan-de-crossover-suv-nuttige-artikelen/"> <p>Wat is anders dan de crossover SUV? nuttige artikelen</p> <h3 class="mvp-cat-bub"><span class="mvp-cat-bub">Cars</span></h3> </a> </div> <!--mvp-post-more-text--> </li> <li> <div class="mvp-post-more-img left relative"> <a href="https://nl.delachieve.com/hoe-kan-geintegreerde-klassen-uit-te-voeren-in-de-eerste-jongere-groep-van-kleuterschool/"> <amp-img class="mvp-reg-img" src="https://i23.delachieve.com/image/c36c4ab1707b0ea5-560x315.jpg" width="560" height="315" layout="responsive"></amp-img> <amp-img class="mvp-mob-img" src="https://i23.delachieve.com/image/c36c4ab1707b0ea5-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://nl.delachieve.com/hoe-kan-geintegreerde-klassen-uit-te-voeren-in-de-eerste-jongere-groep-van-kleuterschool/"> <p>Hoe kan geïntegreerde klassen uit te voeren in de eerste jongere groep van kleuterschool?</p> <h3 class="mvp-cat-bub"><span class="mvp-cat-bub">Thuis en Familie</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://nl.delachieve.com/probeer-te-achterhalen-wanneer-om-tulpen-te-planten-in-siberie/"> <amp-img class="mvp-reg-img" src="https://i23.delachieve.com/image/7ba52820701d0ea3-560x315.jpg" width="560" height="315" layout="responsive"></amp-img> <amp-img class="mvp-mob-img" src="https://i23.delachieve.com/image/7ba52820701d0ea3-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://nl.delachieve.com/probeer-te-achterhalen-wanneer-om-tulpen-te-planten-in-siberie/"> <p>Probeer te achterhalen wanneer om tulpen te planten in Siberië?</p> <h3 class="mvp-cat-bub"><span class="mvp-cat-bub">Huislijkheid</span></h3> </a> </div> <!--mvp-post-more-text--> </li> <li> <div class="mvp-post-more-img left relative"> <a href="https://nl.delachieve.com/glycolyse-het-en-de-basis-van-glucose-oxidatie/"> <amp-img class="mvp-reg-img" src="https://i23.delachieve.com/image/6b16f88e7e9b0ed8-560x315.jpg" width="560" height="315" layout="responsive"></amp-img> <amp-img class="mvp-mob-img" src="https://i23.delachieve.com/image/6b16f88e7e9b0ed8-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://nl.delachieve.com/glycolyse-het-en-de-basis-van-glucose-oxidatie/"> <p>Glycolyse - het ... En de basis van glucose oxidatie</p> <h3 class="mvp-cat-bub"><span class="mvp-cat-bub">Formatie</span></h3> </a> </div> <!--mvp-post-more-text--> </li> <li> <div class="mvp-post-more-img left relative"> <a href="https://nl.delachieve.com/diamond-facial-cleansing-wat-voor-soort-procedure/"> <amp-img class="mvp-reg-img" src="https://i23.delachieve.com/image/a260df2054d00e45-560x315.jpg" width="560" height="315" layout="responsive"></amp-img> <amp-img class="mvp-mob-img" src="https://i23.delachieve.com/image/a260df2054d00e45-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://nl.delachieve.com/diamond-facial-cleansing-wat-voor-soort-procedure/"> <p>Diamond Facial Cleansing: wat voor soort procedure</p> <h3 class="mvp-cat-bub"><span class="mvp-cat-bub">Gezondheid</span></h3> </a> </div> <!--mvp-post-more-text--> </li> <li> <div class="mvp-post-more-img left relative"> <a href="https://nl.delachieve.com/actrice-linda-fiorentino-biografie-filmografie-persoonlijke-leven/"> <amp-img class="mvp-reg-img" src="https://i23.delachieve.com/image/90749cd37e4f0ecf-560x315.jpg" width="560" height="315" layout="responsive"></amp-img> <amp-img class="mvp-mob-img" src="https://i23.delachieve.com/image/90749cd37e4f0ecf-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://nl.delachieve.com/actrice-linda-fiorentino-biografie-filmografie-persoonlijke-leven/"> <p>Actrice Linda Fiorentino: biografie, filmografie, persoonlijke leven</p> <h3 class="mvp-cat-bub"><span class="mvp-cat-bub">Arts and Entertainment</span></h3> </a> </div> <!--mvp-post-more-text--> </li> <li> <div class="mvp-post-more-img left relative"> <a href="https://nl.delachieve.com/hoe-de-dooier-van-het-eiwit-te-scheiden-een-vraag-vele-antwoorden/"> <amp-img class="mvp-reg-img" src="https://i23.delachieve.com/image/271e33f061f50e67-560x315.jpg" width="560" height="315" layout="responsive"></amp-img> <amp-img class="mvp-mob-img" src="https://i23.delachieve.com/image/271e33f061f50e67-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://nl.delachieve.com/hoe-de-dooier-van-het-eiwit-te-scheiden-een-vraag-vele-antwoorden/"> <p>Hoe de dooier van het eiwit te scheiden? Een vraag - vele antwoorden!</p> <h3 class="mvp-cat-bub"><span class="mvp-cat-bub">Voedsel en dranken</span></h3> </a> </div> <!--mvp-post-more-text--> </li> <li> <div class="mvp-post-more-img left relative"> <a href="https://nl.delachieve.com/hoe-de-play-market-updaten/"> <amp-img class="mvp-reg-img" src="https://i23.delachieve.com/image/bff6db667e440ece-560x315.jpg" width="560" height="315" layout="responsive"></amp-img> <amp-img class="mvp-mob-img" src="https://i23.delachieve.com/image/bff6db667e440ece-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://nl.delachieve.com/hoe-de-play-market-updaten/"> <p>Hoe de Play Market updaten?</p> <h3 class="mvp-cat-bub"><span class="mvp-cat-bub">Computers</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 nl.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.153 seconds. --> <!-- Cached page generated by WP-Super-Cache on 2019-09-30 13:26:16 --> <!-- 0.001 -->