Fail iframe ialah halaman html teks. Iframe dan Frame - apakah itu dan cara terbaik untuk menggunakan bingkai dalam Html

unsur

Bingkai

Apa yang ia lakukan

Perbezaan utama antara

Dalam penanda di atas, sudah cukup untuk menggantikan alamat tapak dengan yang lain dan, jika perlu, laraskan saiz bingkai.

Bingkai ialah elemen HTML yang membolehkan anda membahagikan tetingkap pelayar web kepada beberapa tetingkap bebas, setiap satunya boleh memuatkan dokumen HTML yang berasingan. Setiap tetingkap (bingkai) sedemikian boleh mempunyai bar skrol sendiri dan berfungsi secara bebas daripada tetingkap bebas lain atau, sebaliknya, mengawal kandungannya. Ia boleh digunakan untuk mengatur menu yang sentiasa terletak dalam satu tetingkap, manakala maklumat itu sendiri terletak di tetingkap lain. Pengguna boleh mengakses menu pada bila-bila masa dan tidak perlu kembali ke halaman sebelumnya untuk memilih item menu yang lain. Menggunakan bingkai membolehkan anda "menyemat" imej atau elemen antara muka statik lain pada tetingkap penyemak imbas manakala halaman yang lain menatal dalam bingkai.
Walau bagaimanapun, perlu diingat bahawa pada masa ini bingkai dianggap sebagai alat yang sudah lapuk, dan tapak dengan bingkai kini dianggap tidak bermaruah, kerana juruweb profesional tidak pernah menggunakan bingkai dalam projek mereka. Bingkai mempunyai beberapa masalah yang terkenal. Mereka mengelirukan enjin carian, sebagai contoh, kerana halaman yang mengandungi kandungan tidak memaut ke dokumen lain. Jika anda ingin mendapatkan pelawat dari enjin carian, lupakan tentang bingkai. Adalah mustahil bagi pengguna untuk meletakkan halaman yang dia suka dalam bahagian penanda halaman penyemak imbas, kerana bingkai menyembunyikan alamat halaman di mana dia berada dan sentiasa menunjukkan alamat tapak web sahaja. Atas sebab ini, mereka mencipta masalah untuk penyemak imbas semasa menjejak sejarah, dan mereka juga tidak begitu mudah menyesuaikan diri dengan saiz skrin dan peranti mudah alih yang berbeza.
Walaupun projek dengan bingkai semakin jarang berlaku di World Wide Web, pembelajaran HTML akan menjadi tidak lengkap tanpa mengambil kira topik bingkai. Bingkai, bersama-sama dengan kelemahannya, juga mempunyai beberapa kelebihan yang tidak membenarkan kami menolak teknologi ini sebagai tidak menjanjikan.

Mencipta Bingkai

Struktur dokumen HTML dengan bingkai sangat serupa dalam penampilan dengan format dokumen HTML biasa. Seperti dalam dokumen HTML biasa, semua kod diletakkan di antara tag berpasangan Dan , dan dalam bekas pengepala terletak. Perbezaan utama antara dokumen dengan bingkai dan dokumen HTML biasa ialah dokumen dengan bingkai dan bukannya tag teg berpasangan digunakan (dari set bingkai Inggeris - satu set bingkai).
Contoh berikut menunjukkan struktur dokumen HTML dengan bingkai:

Contoh: Struktur Dokumen HTML dengan Bingkai

  • Cubalah sendiri"
bingkai_atas
bingkai_kiri bingkai_kanan



Dokumen dengan bingkai

Dalam contoh di atas, halaman mengandungi tiga kawasan, setiap satunya pada mulanya dimuatkan dengan dokumen HTML frame_top.html, frame_left.html dan frame_right.html. Selain dokumen HTML, bingkai juga boleh mengandungi grafik. Untuk melakukan ini, anda perlu menentukan alamat imej yang sepadan dalam atribut src, Sebagai contoh src="image.gif". Sila ambil perhatian bahawa elemen digunakan tanpa tag penutup.
Di dalam bekas hanya boleh mengandungi tag atau set bingkai lain yang diliputi oleh tag Dan .
Tag mempunyai sifat-sifat berikut:

  • barisan— menerangkan cara membahagikan halaman kepada baris:
  • cols— menerangkan cara halaman dibahagikan kepada lajur:
Kawasan yang terhasil daripada pemisahan halaman ini akan menjadi bingkai. Ketiadaan atribut ini mentakrifkan satu bingkai yang akan menduduki keseluruhan tetingkap penyemak imbas.

Dalam pengertian sifat-sifat barisan Dan cols Ia adalah perlu untuk menunjukkan bukan bilangan baris atau lajur, tetapi lebar dan ketinggian bingkai. Semua nilai dalam senarai dipisahkan dengan koma. Dimensi boleh ditentukan dalam unit mutlak (piksel) atau peratusan:

  • cols="20%, 80%"— tetingkap penyemak imbas dibahagikan kepada dua lajur menggunakan atribut cols, lajur kiri mengambil 20%, dan kanan 80% tetingkap penyemak imbas.
  • rows="100, *" Tetingkap penyemak imbas dibahagikan kepada dua tetingkap mendatar menggunakan atribut barisan, tetingkap atas mengambil 100 piksel, dan tetingkap bawah mengambil baki ruang yang ditentukan oleh simbol asterisk.

Seperti yang dapat dilihat dari contoh ini, bekas dengan atribut barisan mula-mula mencipta dua bingkai mendatar, dan menggantikan bingkai kedua dengan satu lagi yang membahagikan bingkai mendatar bawah kepada dua lajur menggunakan atribut cols, lajur kiri mengambil 20%, dan kanan 80% tetingkap penyemak imbas.
Jika penyemak imbas tidak menyokong bingkai, tetingkap akan memaparkan teks yang terletak di antara tag </b> Dan <b> . Segala-galanya di antara tag </b> Dan <b> , diabaikan oleh penyemak imbas yang menyokong bingkai. Oleh itu, pembangun perlu menulis kod yang menduplikasi kandungan bingkai dengan cara lain, dan meletakkan kod ini dalam bekas </b>, maka semua pengguna boleh melihat halaman webnya. <br>Seperti yang telah dinyatakan, teg tidak berpasangan digunakan untuk memasukkan bingkai berasingan ke dalam dokumen <b><frame> </b>. Atribut <b>src</b> menentukan dokumen yang harus dipaparkan di dalam bingkai ini, sebagai contoh: <frame src="frame_top.html">. Jika atribut <b>src</b> hilang, bingkai kosong dipaparkan.</p> <h2>Sempadan atau ruang antara bingkai</h2> <p>Secara lalai, penyemak imbas memaparkan sempadan garis kelabu, biasanya 3D antara bingkai yang boleh digunakan pelawat untuk melaraskan saiz bingkai. <br>Sempadan bingkai boleh dimanipulasi seperti mana-mana elemen bingkai lain. Terdapat beberapa atribut elemen untuk ini <b><frameset> </b>, membolehkan anda menyesuaikan sempadan bingkai. Ketebalan garis sempadan ditentukan oleh atribut <b>sempadan</b>. Nilai ketebalan sempadan lalai ialah lima. <br>Untuk menyembunyikan sempadan bingkai, anda mesti sama ada menetapkan nilai lebar sempadan kepada sifar atau menetapkan nilai "tidak" atau "0" kepada atribut <b>sempadan bingkai</b>. Atribut <b>sempadan bingkai</b> hanya boleh mengambil dua makna yang bertentangan. Jika nilai atribut <b>sempadan bingkai</b> adalah sama dengan "ya" atau "1", maka sempadan bingkai akan dipaparkan, dan jika "0" atau "tidak", maka tidak. Sila ambil perhatian bahawa nilai atribut <b>sempadan bingkai</b> berbeza-beza untuk pelayar yang berbeza. Untuk menyelesaikan masalah ini gunakan atribut dua kali <b>sempadan bingkai</b>, dan untuk sesetengah penyemak imbas anda juga perlu menambah atribut <b>jarak bingkai</b> dengan nilai "0":</p><p> <frameset frameborder="0" framespacing="0" frameborder="no" border="0"> </p><p>Dalam contoh berikut, kami mengalih keluar sempadan antara bingkai:</p> <h3>Contoh: Mengalih keluar sempadan antara bingkai</h3> <ul><li>Cubalah sendiri"</li> </ul><table><tr><td style="width: 10px;background-color:green;color: white;">bingkai_kiri</td> <td style="width: 90%;background-color:lime;color: white;">bingkai_kanan</td> </tr></table><p> <!DOCTYPE html> <html><br><head><br><meta charset="UTF-8"> <title>Bingkai tanpa sempadan</title> </head> <frameset cols="100,*" frameborder="0" framespacing="0" frameborder="no" border="0"> <frame src="frame_left.html" name=" frame_left" > <frame src="frame_right.html" name="frame_right" > </frameset> </html></p> <p>Jika anda mengalih keluar sempadan antara bingkai, pelawat tidak akan dapat mengubah saiz bingkai dalam penyemak imbas. Anda juga boleh menghalang bingkai daripada mengubah saiz dengan mengekalkan sempadan menggunakan atribut <b>noresize</b>:</p><p> <frame src="frame_left.html" noresize> </p><p>Menggunakan atribut <b>warna sempadan</b> Anda boleh menukar warna sempadan bingkai, anda hanya perlu menentukan kod atau nama warna simpanan yang sepadan. <br>Di bawah ialah contoh halaman HTML yang mengandungi atribut kawalan sempadan bingkai yang diterangkan di atas: warna jidar merah, saiz bingkai atas tidak boleh ditukar:</p> <h3>Contoh: Kawalan Sempadan Bingkai</h3> <ul><li>Cubalah sendiri"</li> </ul><table style="border-collapse:collapse;"><tr><td style="border-bottom: 4px solid red;background-color:blue;color: white;" colspan="2">bingkai_atas</td> </tr><tr><td style="border-right: 4px solid red;width: 20%;background-color:green;color: white;">bingkai_kiri</td> <td style="width: 80%;background-color:lime;color: white;">bingkai_kanan</td> </tr></table><p> <!DOCTYPE html> <html><br><head><br><meta charset="UTF-8"> <title>Pengurusan Sempadan Bingkai</title> </head> <frameset rows="150, *" border="10" bordercolor="red" frameborder="1" frameborder="yes"> <frame src="frame_top.html" noresize> <frameset cols="20%, 80%"> <frame src="frame_left.html"> <frame src="frame_right.html"> </frameset> </frameset> </html></p> <p>Jika anda ingin meletakkan halaman yang dipaparkan di dalam bingkai lebih dekat dengan sempadannya, atau, sebaliknya, alihkannya lebih jauh, tukar atribut <b>marginheight</b> Dan <b>lebar margin</b> tag <b><frame> </b>. Atribut <b>marginheight</b> mentakrifkan pelapik antara kandungan bingkai dan sempadan atas dan bawahnya. Sintaks:</p><p> <frame marginheight="число"> </p><p>Atribut <b>lebar margin</b> mentakrifkan pelapik antara kandungan bingkai dan sempadan kanan dan kirinya. Sintaks:</p><p> <frame marginwidth="число"> </p><p>Baris html ini, sebagai contoh, meletakkan halaman yang dipaparkan dekat dengan sempadan bingkai:</p> <p>Jika halaman memaparkan bar skrol yang anda tidak mahu, anda boleh menyelesaikan masalah dengan menentukan atribut <b>menatal</b>="tidak" dalam teg <b><frame> </b>. Tetapi perlu diingat bahawa jika bingkai tidak cukup besar untuk memaparkan keseluruhan kandungan halaman, maka pelawat tidak akan mempunyai cara untuk menatal halaman yang dipaparkan.</p> <h2>Pautan dalam bingkai</h2> <p>Mengikuti pautan dalam dokumen HTML biasa dilakukan seperti berikut: klik pautan dan dokumen semasa digantikan dengan yang baharu dalam tetingkap semasa atau dalam tetingkap penyemak imbas baharu. Apabila menggunakan bingkai, skema pemuatan untuk dokumen HTML berbeza daripada yang biasa, dan perbezaan utama adalah keupayaan untuk memuatkan dokumen HTML ke dalam satu bingkai dari bingkai lain. <br>Untuk memuatkan dokumen ke dalam bingkai tertentu, gunakan atribut <b>sasaran</b> tag <b><a> </b>. Sebagai nilai atribut <b>sasaran</b> nama bingkai di mana dokumen yang ditentukan oleh atribut akan dimuatkan digunakan <b>nama</b> tag <b><frame> </b>. Perlu diingatkan juga bahawa nama bingkai mesti bermula dengan sama ada nombor atau huruf Latin. Nama-nama berikut digunakan sebagai nama simpanan:</p> <p>Untuk pautan luaran, anda harus menetapkan atribut sasaran sama ada _top atau _blank untuk memastikan projek pihak ketiga tidak muncul dalam bingkai anda, sebaliknya mengisi keseluruhan tetingkap penyemak imbas.</p> <p>Contoh berikut menunjukkan dokumen HTML di mana bingkai kanan memuatkan halaman daripada pautan yang diletakkan di bingkai atas. Pautan ke dokumen yang akan dibuka dalam bingkai kanan:</p><p> <a href="http://www.google.com" target="frame_right">Google</a> </p><p>Bingkai kanan diberi nama <i>bingkai_kanan</i>:</p><p> <frame src="frame_right.html" name="frame_right"> </p><p>Untuk memuatkan dokumen ke dalam bingkai yang ditentukan, gunakan konstruk <i>target="frame_right"</i>, seperti yang ditunjukkan dalam contoh:</p> <h3>Contoh: Paut ke bingkai lain</h3> <ul><li>Cubalah sendiri"</li> </ul><p> <!DOCTYPE html> <html><br><head><br><meta charset="UTF-8"> <title>Paut ke bingkai lain</title> </head> <frameset rows="100, *"> <frame src="frame_topic.html"> <frameset cols="20%, 80%"> <frame src="frame_left.html"> <frame src="frame_right.html" name="frame_right"> </frameset> <noframes> <p>Penyemak imbas anda tidak memaparkan bingkai</p>

Bingkai terapung

unsur