InternetDesain web

Cara menyisipkan iframe HTML: Contoh penggunaan

Pada awal situs Web sumber daya bangunan yang banyak digunakan frame untuk menampilkan bagian-bagian tertentu dari halaman. Tetapi dengan kedatangan versi baru dari HTML 5, segalanya berubah. Elemen markup , dan </em> usang. Menggantinya telah menjadi satu tag - <em><iframe>.</em> Bagaimana cara menambahkan html <iframe>? Contoh di bawah akan dipahami, bahkan seorang pemula dalam pemrograman. </p> <h2> Apa frame? </h2><p> Bingkai - dasar sebagian besar halaman web pertama. Jika diterjemahkan secara harfiah, kata itu berarti &quot;frame&quot; yaitu, frame adalah bagian kecil dari halaman dalam browser. Meluasnya penggunaan frame di masa lalu dapat dijelaskan oleh kualitas buruk dan tingginya biaya lalu lintas internet. Biasanya, situs itu dibagi menjadi 3-5 bagian, yang masing-masing melakukan tujuan tertentu: </p> <ul><li> &quot;Cap&quot; (frame atas halaman lebar) - Nama tampilan sumber daya; </li><li> Kiri / Kanan &quot;kaca&quot; - menu tampilan; </li><li> bingkai Tengah - menunjukkan konten situs. </li></ul><p><amp-img src="https://i23.delachieve.com/image/1dba462a7e230ecd.jpg" alt="html contoh iframe" width="580" height="435" layout="intrinsic"></amp-img></p> <p> Sebuah rincian dari halaman untuk memungkinkan reload hanya bagian dari itu ketika Anda meng-upgrade. Sebagai contoh, pengguna mengklik item menu, dan bingkai pusat yang dipompa konten baru. </p> <h2> frame modern di HTML 5 </h2><p> Mengapa saya perlu HTML <em><iframe>?</em> Contoh - untuk memasukkan konten situs pihak ketiga. Situasi klasik adalah ketika seorang pengembang web ingin menunjukkan posisi objek pada peta. Apa yang harus dilakukan? Menggambar rencana tanah dari awal? Tidak ada - ada solusi sederhana: membangun sebuah halaman Google Map elemen Maps Yandex atau 2GIS. masalah diselesaikan dalam empat langkah. </p> <ol><li> Anda perlu pergi ke situs layanan peta. </li><li> Cari objek yang diinginkan. Mengetahui alamat yang tepat, Anda dapat memasukkannya ke dalam kotak pencarian. </li><li> Gunakan &quot;Simpan dan dapatkan kode&quot; (untuk &quot;Yandex.Maps&quot;) atau &quot;Finish&quot; (Google Maps) untuk mendapatkan kode untuk menyisipkan. </li><li> Ini masih menulis tag markup yang dihasilkan pada halaman. </li></ol><p> Selain itu, Anda dapat memilih ukuran peta dan menetapkan pilihan tampilan lainnya. </p> <p><amp-img src="https://i23.delachieve.com/image/20da6f9a7e280ece.jpg" alt="html contoh iframe" width="600" height="488" layout="intrinsic"></amp-img></p> <p> Bagaimana lagi Anda dapat menggunakan HTML <em><iframe>?</em> Contoh - untuk memasukkan video dari sumber daya Youtube. Multimedia Teknologi menarik pengguna internet, sehingga konten video sangat populer. Dengan pemasangan roller pengembang menangani dengan cepat. </p> <ol><li> Ini harus di-upload ke Youtube Video sendiri atau menemukan file pihak ketiga untuk terjemahan. </li><li> Dapatkan tag dengan memilih tombol «HTML-code&quot; </li><li> Tindakan terakhir - menyisipkan <a href="https://delachieve.com/html-kode-kode-warna-html/">kode HTML</a> <iframe>. CONTOH menerima konten tag akan dibahas di bawah. </li></ol><p> Dalam kedua contoh saya menggunakan generasi kode otomatis, tetapi pengembang profesional harus mampu membuat sendiri. Pertama, itu akan memungkinkan mereka untuk memahami halaman vorstke dan memodifikasinya jika perlu. Kedua, situs ini tidak selalu menandai elemen (bahkan meskipun fakta bahwa mereka milik sumber daya eksternal), terbentuk tanpa partisipasi dari webmaster. Di sini juga muncul pengembang sangat berkualitas. </p> <p><amp-img src="https://i23.delachieve.com/image/92fab38a7e2d0ecf.jpg" alt="iframe html itu" width="680" height="450" layout="intrinsic"></amp-img></p> <h2> sintaksis </h2><p> Jadi sebelum Anda mulai halaman vorstke, iframe (html) tag harus mempertimbangkan: apa itu dan bagaimana menggunakannya. </p> <p> Pertama-tama, perlu dicatat bahwa pasangan tag. Antara pembukaan dan anggota penutupan menunjukkan konten yang akan ditampilkan di browser yang tidak mendukung elemen markup. tag dasar atribut: </p> <ul><li> Lebar (W); </li><li> height (tinggi); </li><li> src (alamat dimuat sumber daya); </li><li> menyelaraskan (proses penyelarasan); </li><li> frameborder; </li><li> allowfullscreen. </li></ul><p> Dengan demikian, untuk mendapatkan kode untuk <iframe>. HTML-contoh sepenuhnya ditunjukkan di bawah ini: </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> Tata letak meja cukup untuk mengganti alamat situs untuk yang lain dan, jika perlu, menyesuaikan ukuran 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://delachieve.com/cara-menyisipkan-iframe-html-contoh-penggunaan/"> <amp-img class="mvp-reg-img" src="https://i23.delachieve.com/image/1dba462a7e230ecd-560x315.jpg" width="560" height="315" layout="responsive"></amp-img> <amp-img class="mvp-mob-img" src="https://i23.delachieve.com/image/1dba462a7e230ecd-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://delachieve.com/cara-menyisipkan-iframe-html-contoh-penggunaan/"> <p>Cara menyisipkan iframe HTML: Contoh penggunaan</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://delachieve.com/bagaimana-untuk-mempermudah-proses-membuat-sebuah-website-membantu-editor-wysiwyg-html/"> <p>Bagaimana untuk mempermudah proses membuat sebuah website? Membantu editor WYSIWYG 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://delachieve.com/ukuran-favicon-untuk-situs-anda/"> <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://delachieve.com/ukuran-favicon-untuk-situs-anda/"> <p>Ukuran favicon untuk situs Anda</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://delachieve.com/apa-jenis-informasi-yang-ditempatkan-di-website-perusahaan/"> <p>Apa jenis informasi yang ditempatkan di website perusahaan</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://delachieve.com/cara-belajar-desain-grafis-dan-menjadi-spesialis-sangat-dibayar/"> <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://delachieve.com/cara-belajar-desain-grafis-dan-menjadi-spesialis-sangat-dibayar/"> <p>Cara belajar desain grafis dan menjadi spesialis sangat dibayar</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://delachieve.com/cara-membuat-banner-untuk-website-sendiri/"> <p>Cara membuat banner untuk website sendiri</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://delachieve.com/carboxytherapy-ulasan-perawatan-wajah-kosmetik/"> <amp-img class="mvp-reg-img" src="https://i23.delachieve.com/image/8810935262800e6e-560x315.jpg" width="560" height="315" layout="responsive"></amp-img> <amp-img class="mvp-mob-img" src="https://i23.delachieve.com/image/8810935262800e6e-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://delachieve.com/carboxytherapy-ulasan-perawatan-wajah-kosmetik/"> <p>Carboxytherapy: ulasan. perawatan wajah kosmetik</p> <h3 class="mvp-cat-bub"><span class="mvp-cat-bub">Kecantikan</span></h3> </a> </div> <!--mvp-post-more-text--> </li> <li> <div class="mvp-post-more-img left relative"> <a href="https://delachieve.com/ketika-merayakan-pesta-ulang-tahun-anton/"> <amp-img class="mvp-reg-img" src="https://i23.delachieve.com/image/2d5015867e360ecc-560x315.jpg" width="560" height="315" layout="responsive"></amp-img> <amp-img class="mvp-mob-img" src="https://i23.delachieve.com/image/2d5015867e360ecc-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://delachieve.com/ketika-merayakan-pesta-ulang-tahun-anton/"> <p>Ketika merayakan pesta ulang tahun, Anton?</p> <h3 class="mvp-cat-bub"><span class="mvp-cat-bub">Perkembangan intelektual</span></h3> </a> </div> <!--mvp-post-more-text--> </li> <li> <div class="mvp-post-more-img left relative"> <a href="https://delachieve.com/beristirahat-dengan-nyaman-memilih-yang-terbaik-hotel-di-hurghada/"> <amp-img class="mvp-reg-img" src="https://i23.delachieve.com/image/fbe45a7546950e00-560x315.jpg" width="560" height="315" layout="responsive"></amp-img> <amp-img class="mvp-mob-img" src="https://i23.delachieve.com/image/fbe45a7546950e00-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://delachieve.com/beristirahat-dengan-nyaman-memilih-yang-terbaik-hotel-di-hurghada/"> <p>Beristirahat dengan nyaman: memilih yang terbaik hotel di Hurghada</p> <h3 class="mvp-cat-bub"><span class="mvp-cat-bub">Perjalanan</span></h3> </a> </div> <!--mvp-post-more-text--> </li> <li> <div class="mvp-post-more-img left relative"> <a href="https://delachieve.com/man-berlebihan-dalam-literatur-klasik-rusia/"> <amp-img class="mvp-reg-img" src="https://i23.delachieve.com/image/11954f457e3c0ed5-560x315.jpg" width="560" height="315" layout="responsive"></amp-img> <amp-img class="mvp-mob-img" src="https://i23.delachieve.com/image/11954f457e3c0ed5-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://delachieve.com/man-berlebihan-dalam-literatur-klasik-rusia/"> <p>Man berlebihan dalam literatur. klasik Rusia</p> <h3 class="mvp-cat-bub"><span class="mvp-cat-bub">Formasi</span></h3> </a> </div> <!--mvp-post-more-text--> </li> <li> <div class="mvp-post-more-img left relative"> <a href="https://delachieve.com/siapa-barry-trotter/"> <amp-img class="mvp-reg-img" src="https://i23.delachieve.com/image/ddfb97ea7de80ec8-560x315.jpg" width="560" height="315" layout="responsive"></amp-img> <amp-img class="mvp-mob-img" src="https://i23.delachieve.com/image/ddfb97ea7de80ec8-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://delachieve.com/siapa-barry-trotter/"> <p>Siapa Barry Trotter?</p> <h3 class="mvp-cat-bub"><span class="mvp-cat-bub">Seni dan Hiburan</span></h3> </a> </div> <!--mvp-post-more-text--> </li> <li> <div class="mvp-post-more-img left relative"> <a href="https://delachieve.com/raid-array-memecahkan-masalah-dengan-membaca-menulis-kecepatan-dan-keandalan-sistem/"> <amp-img class="mvp-reg-img" src="https://i23.delachieve.com/image/c2e4f474620c0e6b-560x315.jpg" width="560" height="315" layout="responsive"></amp-img> <amp-img class="mvp-mob-img" src="https://i23.delachieve.com/image/c2e4f474620c0e6b-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://delachieve.com/raid-array-memecahkan-masalah-dengan-membaca-menulis-kecepatan-dan-keandalan-sistem/"> <p>Raid Array - memecahkan masalah dengan membaca / menulis kecepatan dan keandalan sistem</p> <h3 class="mvp-cat-bub"><span class="mvp-cat-bub">Komputer</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://delachieve.com/carbodying-mobil-dengan-tangan-anda-sendiri-dengan-bantuan-alcantara-murah-dan-efektif/"> <amp-img class="mvp-reg-img" src="https://i23.delachieve.com/image/0d1240306fee0e9b-560x315.jpg" width="560" height="315" layout="responsive"></amp-img> <amp-img class="mvp-mob-img" src="https://i23.delachieve.com/image/0d1240306fee0e9b-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://delachieve.com/carbodying-mobil-dengan-tangan-anda-sendiri-dengan-bantuan-alcantara-murah-dan-efektif/"> <p>Carbodying mobil dengan tangan Anda sendiri dengan bantuan Alcantara - murah dan efektif</p> <h3 class="mvp-cat-bub"><span class="mvp-cat-bub">Mobil</span></h3> </a> </div> <!--mvp-post-more-text--> </li> <li> <div class="mvp-post-more-img left relative"> <a href="https://delachieve.com/sudut-rak-di-kamar-mandi-ukuran-jenis-foto/"> <amp-img class="mvp-reg-img" src="https://i23.delachieve.com/image/2d541ec57dbf0ec5-560x315.jpg" width="560" height="315" layout="responsive"></amp-img> <amp-img class="mvp-mob-img" src="https://i23.delachieve.com/image/2d541ec57dbf0ec5-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://delachieve.com/sudut-rak-di-kamar-mandi-ukuran-jenis-foto/"> <p>Sudut rak di kamar mandi: ukuran, jenis, Foto</p> <h3 class="mvp-cat-bub"><span class="mvp-cat-bub">Kesederhanaan</span></h3> </a> </div> <!--mvp-post-more-text--> </li> <li> <div class="mvp-post-more-img left relative"> <a href="https://delachieve.com/apa-kekhasan-sistem-ekonomi-yang-berbeda-dimensi-sosial/"> <amp-img class="mvp-reg-img" src="https://i23.delachieve.com/image/1b74a2ae7e5a0ed2-560x315.jpg" width="560" height="315" layout="responsive"></amp-img> <amp-img class="mvp-mob-img" src="https://i23.delachieve.com/image/1b74a2ae7e5a0ed2-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://delachieve.com/apa-kekhasan-sistem-ekonomi-yang-berbeda-dimensi-sosial/"> <p>Apa kekhasan sistem ekonomi yang berbeda: dimensi sosial</p> <h3 class="mvp-cat-bub"><span class="mvp-cat-bub">Berita dan Masyarakat</span></h3> </a> </div> <!--mvp-post-more-text--> </li> <li> <div class="mvp-post-more-img left relative"> <a href="https://delachieve.com/bagaimana-menyetel-gitar-anda-untuk-pemula/"> <amp-img class="mvp-reg-img" src="https://i23.delachieve.com/image/0630ef8e6fea0e99-560x315.jpg" width="560" height="315" layout="responsive"></amp-img> <amp-img class="mvp-mob-img" src="https://i23.delachieve.com/image/0630ef8e6fea0e99-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://delachieve.com/bagaimana-menyetel-gitar-anda-untuk-pemula/"> <p>Bagaimana menyetel gitar Anda untuk pemula</p> <h3 class="mvp-cat-bub"><span class="mvp-cat-bub">Seni dan Hiburan</span></h3> </a> </div> <!--mvp-post-more-text--> </li> <li> <div class="mvp-post-more-img left relative"> <a href="https://delachieve.com/getaran-saat-idle-penyebab-dan-solusi/"> <amp-img class="mvp-reg-img" src="https://i23.delachieve.com/image/0995a44970250ea2-560x315.jpg" width="560" height="315" layout="responsive"></amp-img> <amp-img class="mvp-mob-img" src="https://i23.delachieve.com/image/0995a44970250ea2-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://delachieve.com/getaran-saat-idle-penyebab-dan-solusi/"> <p>Getaran saat idle: penyebab dan solusi</p> <h3 class="mvp-cat-bub"><span class="mvp-cat-bub">Mobil</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://delachieve.com/analog-dari-plavix/"> <p>Analog dari Plavix.</p> <h3 class="mvp-cat-bub"><span class="mvp-cat-bub">Kesehatan</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 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.417 seconds. --> <!-- Cached page generated by WP-Super-Cache on 2019-09-30 13:16:51 --> <!-- 0.001 -->