InternetWeb Tasarım

HTML iframe eklemek için: Kullanım örneği

Web sitesinin şafağında oluşturma kaynakları yaygın sayfaların bazı bölümlerini görüntülemek için çerçeve kullanılır. Ama HTML 5 yeni bir sürümü gelişi ile her şey değişti. belirteç <çerçeve>, <çerçeve> ve </em> kaldırıldı unsurları. Onları değiştirilmesi tek bir etiket haline gelmiştir - <em><iframe>.</em> Nasıl html <iframe> eklerim? Aşağıdaki örnek, programlamada hatta bir acemi anlaşılacaktır. </p> <h2> çerçeveler nelerdir? </h2><p> Çerçeve - ilk web sayfalarının çoğu temeli. anlamıyla tercüme Eğer kelime &quot;çerçeve&quot;, çerçeve tarayıcıda sayfanın küçük bir parçası olduğu anlamına gelir. Geçmişte kare yaygın kullanımı kalitesiz ve Internet trafiğinin yüksek maliyeti ile açıklanabilir. Tipik olarak, site özel bir amacı yerine getirir, her biri 3-5 parçaya ayrılmıştır: </p> <ul><li> &quot;Cap&quot; (sayfa genişliğinin üst çerçeve) - kaynağın Görünen adı; </li><li> Sol / Sağ &quot;cam&quot; - ekran menüsü; </li><li> Orta çerçeve - Sitenizin içeriğini gösteren. </li></ul><p><amp-img src="https://i23.delachieve.com/image/1dba462a7e230ecd.jpg" alt="html iframe Örnek" width="580" height="435" layout="intrinsic"></amp-img></p> <p> sayfalarının dökümü sen yükseltirken bunun sadece bir kısmının yeniden izin vermek. Örneğin, kullanıcı menü öğesini tıklar ve merkezi çerçeve yeni içerik pompalanır bulundu. </p> <h2> HTML 5 Modern çerçeveler </h2><p> Neden <em><iframe></em> HTML <em>gerekiyor?</em> Örnek - Üçüncü şahıs site içeriğini eklemek için. Bir web geliştirici harita üzerinde nesnenin konumunu göstermek istediğinde klasik bir durumdur. Ne yapmalı? Sıfırdan zemin planını çizin? Hayır - daha basit bir çözüm vardır: Bir sayfa Google Harita elemanı Yandex Haritalar veya 2GIS kurmak. Sorun dört adımda çözülür. </p> <ol><li> Herhangi harita hizmetinin sitesine gitmek gerekir. </li><li> İstenen nesneyi bulun. Tam adresi bilerek, arama kutusuna girebilirsiniz. </li><li> Kod eklemek için olsun ya da &quot;Son&quot; (Google Maps) ( &quot;Yandex.Maps&quot; için) &quot;Kaydet ve almak kodu&quot; kullanın. </li><li> Bu bir sayfasında oluşturulan biçimlendirme etiketleri yazmaya devam etmektedir. </li></ol><p> Ayrıca, haritanın boyutunu seçmek ve diğer görüntü seçeneklerini ayarlayabilirsiniz. </p> <p><amp-img src="https://i23.delachieve.com/image/20da6f9a7e280ece.jpg" alt="html iframe Örnek" width="600" height="488" layout="intrinsic"></amp-img></p> <p> Başka nasıl HTML <em><iframe> kullanabilirim?</em> Örnek - Youtube kaynaktan videoları eklemek için. Multimedya Teknolojileri İnternet kullanıcıları çekmek, bu nedenle video içeriğinin popüler. geliştirici silindirin kurulumu ile hızla işlemek. </p> <ol><li> Bu Youtube kendi video yükledi veya çeviri için bir üçüncü taraf dosyayı bulmak gerekir. </li><li> düğme «HTML kodu&quot; seçerek bir etiket alın </li><li> Son sahne - insert <a href="https://tr.delachieve.com/html-kodu-html-renk-kodlari/">HTML kodunu</a> <iframe>. Örnek etiket muhtevası aşağıda tartışılacaktır aldı. </li></ol><p> Her iki örnekte de ben otomatik kod üretimi kullanabilirsiniz, ancak profesyonel geliştiriciler kendi yapmak mümkün olmalıdır. İlk olarak, onları vorstke sayfasını anlamak ve gerekirse değiştirmek için izin verecektir. İkinci olarak, site her zaman (hatta onlar harici bir kaynağa ait olmasına rağmen), webmaster katılımı olmadan oluşur elemanları işaretleme değildir. Burada da yüksek nitelikli geliştirici görünür. </p> <p><amp-img src="https://i23.delachieve.com/image/92fab38a7e2d0ecf.jpg" alt="iframe bunu html" width="680" height="450" layout="intrinsic"></amp-img></p> <h2> sözdizimi </h2><p> Eğer sayfa vorstke başlamadan önce Yani, iframe (html) etiketi göz önüne almalıyız: ne olduğunu ve nasıl kullanılacağını ne. </p> <p> Her şeyden önce, bu etiket çiftinin unutulmamalıdır. açılış ve kapanış üyesi Arasında biçimlendirme elemanı desteklemeyen tarayıcılarda görüntülenecek içerik gösterir. Temel etiket niteliklerini: </p> <ul><li> genişliği (W); </li><li> yükseklik (boy); </li><li> src (adres yüklü kaynak); </li><li> (Ayar işlemi) hizalamak; </li><li> frameborder; </li><li> allowfullscreen. </li></ul><p> Böylece, <iframe> için kodu almak için. HTML örnek olarak aşağıda gösterilmiştir: </p> <p> <em><Iframe genişliği = &quot;560&quot; yükseklik = &quot;315&quot; src = &quot;https://someserver.com/&quot; frameborder =</em> &quot; <em>0&quot; allowfullscreen> </ iframe></em> </p> <p> Tablo düzeni çerçevesinin boyutunu ayarlamak gerektiğinde, başka bir sitenin adresini değiştirmek ve etmek için yeterlidir. </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://tr.delachieve.com/jquery-kalici-penceresi-yuekleme-ihtiyac-ve-hangi/"> <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://tr.delachieve.com/jquery-kalici-penceresi-yuekleme-ihtiyac-ve-hangi/"> <p>JQuery kalıcı penceresi - yükleme ihtiyaç ve hangi</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://tr.delachieve.com/web-sitesinde-ekmek-kirintisi-bunlar-ne-icin-navigasyon-ekmek-kirintilari/"> <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://tr.delachieve.com/web-sitesinde-ekmek-kirintisi-bunlar-ne-icin-navigasyon-ekmek-kirintilari/"> <p>Web sitesinde &quot;Ekmek kırıntısı&quot;: bunlar ne için? Navigasyon &quot;Ekmek Kırıntıları&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://tr.delachieve.com/duyarli-tasarima-yoenelik-css-cerceveler/"> <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://tr.delachieve.com/duyarli-tasarima-yoenelik-css-cerceveler/"> <p>Duyarlı tasarıma yönelik CSS çerçeveler</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://tr.delachieve.com/ne-site-olusturmanin-maliyetini-belirler/"> <p>Ne site oluşturmanın maliyetini belirler</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://tr.delachieve.com/sitenin-uygun-tasarim-basarinin-anahtari/"> <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://tr.delachieve.com/sitenin-uygun-tasarim-basarinin-anahtari/"> <p>Sitenin Uygun tasarım - başarının anahtarı</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://tr.delachieve.com/web-studio-sitelerinin-olusturulmasi-ve-tanitimi-icin-reytinge-hizmetleri-yorumlar/"> <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://tr.delachieve.com/web-studio-sitelerinin-olusturulmasi-ve-tanitimi-icin-reytinge-hizmetleri-yorumlar/"> <p>Web Studio: sitelerinin oluşturulması ve tanıtımı için reytinge hizmetleri, yorumlar</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://tr.delachieve.com/karti-icin-guevenlik-kodu-nedir-nasil-visa-karti-guevenlik-kodunu-kullanmak/"> <amp-img class="mvp-reg-img" src="https://i23.delachieve.com/image/ec0ef1f861d50e66-560x315.jpg" width="560" height="315" layout="responsive"></amp-img> <amp-img class="mvp-mob-img" src="https://i23.delachieve.com/image/ec0ef1f861d50e66-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://tr.delachieve.com/karti-icin-guevenlik-kodu-nedir-nasil-visa-karti-guevenlik-kodunu-kullanmak/"> <p>Kartı için güvenlik kodu nedir? Nasıl Visa kartı güvenlik kodunu kullanmak?</p> <h3 class="mvp-cat-bub"><span class="mvp-cat-bub">Mali</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://tr.delachieve.com/hiv-ve-nasil-muecadele-nedir/"> <p>HIV ve nasıl mücadele nedir?</p> <h3 class="mvp-cat-bub"><span class="mvp-cat-bub">Sağlık</span></h3> </a> </div> <!--mvp-post-more-text--> </li> <li> <div class="mvp-post-more-img left relative"> <a href="https://tr.delachieve.com/isin-gezici-niteligi-avantajlari-ve-dezavantajlari/"> <amp-img class="mvp-reg-img" src="https://i23.delachieve.com/image/d8a57ecc61a70e60-560x315.jpg" width="560" height="315" layout="responsive"></amp-img> <amp-img class="mvp-mob-img" src="https://i23.delachieve.com/image/d8a57ecc61a70e60-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://tr.delachieve.com/isin-gezici-niteligi-avantajlari-ve-dezavantajlari/"> <p>Işin Gezici niteliği: avantajları ve dezavantajları</p> <h3 class="mvp-cat-bub"><span class="mvp-cat-bub">Kariyer</span></h3> </a> </div> <!--mvp-post-more-text--> </li> <li> <div class="mvp-post-more-img left relative"> <a href="https://tr.delachieve.com/neden-ihtiyacimiz-var-ve-tirnak-makasi-nasil-secilecegi/"> <amp-img class="mvp-reg-img" src="https://i23.delachieve.com/image/b2cae8327e170ecc-560x315.jpg" width="560" height="315" layout="responsive"></amp-img> <amp-img class="mvp-mob-img" src="https://i23.delachieve.com/image/b2cae8327e170ecc-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://tr.delachieve.com/neden-ihtiyacimiz-var-ve-tirnak-makasi-nasil-secilecegi/"> <p>Neden ihtiyacımız var ve tırnak makası nasıl seçileceği</p> <h3 class="mvp-cat-bub"><span class="mvp-cat-bub">Güzellik</span></h3> </a> </div> <!--mvp-post-more-text--> </li> <li> <div class="mvp-post-more-img left relative"> <a href="https://tr.delachieve.com/sentetik-motor-yagi-rolf-muesteri-yorumlari/"> <amp-img class="mvp-reg-img" src="https://i23.delachieve.com/image/57b70b677e2e0ed3-560x315.jpg" width="560" height="315" layout="responsive"></amp-img> <amp-img class="mvp-mob-img" src="https://i23.delachieve.com/image/57b70b677e2e0ed3-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://tr.delachieve.com/sentetik-motor-yagi-rolf-muesteri-yorumlari/"> <p>Sentetik motor yağı, &quot;Rolf&quot;: Müşteri yorumları</p> <h3 class="mvp-cat-bub"><span class="mvp-cat-bub">Otomobil</span></h3> </a> </div> <!--mvp-post-more-text--> </li> <li> <div class="mvp-post-more-img left relative"> <a href="https://tr.delachieve.com/nasil-isinlanma-maynkraft-yapmak-ve-ne-bunlar-icin/"> <amp-img class="mvp-reg-img" src="https://i23.delachieve.com/image/c11df15d700a0ea1-560x315.jpg" width="560" height="315" layout="responsive"></amp-img> <amp-img class="mvp-mob-img" src="https://i23.delachieve.com/image/c11df15d700a0ea1-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://tr.delachieve.com/nasil-isinlanma-maynkraft-yapmak-ve-ne-bunlar-icin/"> <p>Nasıl ışınlanma &quot;Maynkraft&quot; yapmak ve ne bunlar için?</p> <h3 class="mvp-cat-bub"><span class="mvp-cat-bub">Bilgisayarlar</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://tr.delachieve.com/scs-tibbin-anlami-nedir-glukokortikosteroid-preparatlarinin-etkileri-ve-etkileri/"> <amp-img class="mvp-reg-img" src="https://i23.delachieve.com/image/429c4df76f910e96-560x315.jpg" width="560" height="315" layout="responsive"></amp-img> <amp-img class="mvp-mob-img" src="https://i23.delachieve.com/image/429c4df76f910e96-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://tr.delachieve.com/scs-tibbin-anlami-nedir-glukokortikosteroid-preparatlarinin-etkileri-ve-etkileri/"> <p>SCS - tıbbın anlamı nedir? Glukokortikosteroid preparatlarının etkileri ve etkileri</p> <h3 class="mvp-cat-bub"><span class="mvp-cat-bub">Sağlık</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://tr.delachieve.com/biber-dolmasi-peynir-ve-biber-vejetaryen/"> <p>Biber dolması peynir ve biber Vejetaryen</p> <h3 class="mvp-cat-bub"><span class="mvp-cat-bub">Gıda ve içecek</span></h3> </a> </div> <!--mvp-post-more-text--> </li> <li> <div class="mvp-post-more-img left relative"> <a href="https://tr.delachieve.com/vladimir-adi-ve-oezellikleri-deger-adi-vladimir-koekeni/"> <amp-img class="mvp-reg-img" src="https://i23.delachieve.com/image/a3969d0a704e0ea3-560x315.jpg" width="560" height="315" layout="responsive"></amp-img> <amp-img class="mvp-mob-img" src="https://i23.delachieve.com/image/a3969d0a704e0ea3-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://tr.delachieve.com/vladimir-adi-ve-oezellikleri-deger-adi-vladimir-koekeni/"> <p>Vladimir: adı ve özellikleri değer. adı Vladimir Kökeni</p> <h3 class="mvp-cat-bub"><span class="mvp-cat-bub">Entelektüel gelişimi</span></h3> </a> </div> <!--mvp-post-more-text--> </li> <li> <div class="mvp-post-more-img left relative"> <a href="https://tr.delachieve.com/kelime-nishtyak-en-yaygin-anlami-nedir/"> <amp-img class="mvp-reg-img" src="https://i23.delachieve.com/image/e4167319702c0ea3-560x315.jpg" width="560" height="315" layout="responsive"></amp-img> <amp-img class="mvp-mob-img" src="https://i23.delachieve.com/image/e4167319702c0ea3-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://tr.delachieve.com/kelime-nishtyak-en-yaygin-anlami-nedir/"> <p>Kelime &quot;nishtyak&quot; en yaygın anlamı nedir?</p> <h3 class="mvp-cat-bub"><span class="mvp-cat-bub">Formasyon</span></h3> </a> </div> <!--mvp-post-more-text--> </li> <li> <div class="mvp-post-more-img left relative"> <a href="https://tr.delachieve.com/bir-araba-satin-alirken-vergiden-vazgecme-bir-araba-satin-alirken-vergi-indirimi-nasil-yapilir/"> <amp-img class="mvp-reg-img" src="https://i23.delachieve.com/image/d61da35b7df70eca-560x315.jpg" width="560" height="315" layout="responsive"></amp-img> <amp-img class="mvp-mob-img" src="https://i23.delachieve.com/image/d61da35b7df70eca-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://tr.delachieve.com/bir-araba-satin-alirken-vergiden-vazgecme-bir-araba-satin-alirken-vergi-indirimi-nasil-yapilir/"> <p>Bir araba satın alırken vergiden vazgeçme. Bir araba satın alırken vergi indirimi nasıl yapılır?</p> <h3 class="mvp-cat-bub"><span class="mvp-cat-bub">Mali</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://tr.delachieve.com/nasil-wordde-icindekiler-tablosu-yapilir/"> <p>Nasıl Word&#39;de içindekiler tablosu yapılır?</p> <h3 class="mvp-cat-bub"><span class="mvp-cat-bub">Bilgisayarlar</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 tr.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.146 seconds. --> <!-- Cached page generated by WP-Super-Cache on 2019-10-01 02:26:38 --> <!-- 0.002 -->