Iframe dalam HTML hanyalah bingkai sebaris yang digunakan sebagai dokumen HTML untuk menambah dokumen HTML lain ke dalamnya. Ia kebanyakannya digunakan dalam halaman web atau proses pembangunan web untuk memasukkan kandungan lain melalui sumber lain seperti iklan pada halaman web tersebut.
Kebanyakan pereka web menggunakan Iframe untuk mempersembahkan aplikasi interaktif di tapak web atau halaman web. Ia dimungkinkan menggunakan JavaScript atau atribut sasaran dalam HTML.
Tujuan utama Iframe adalah untuk memaparkan halaman web dalam yang lain. Bingkai sebaris hendaklah dipaparkan menggunakan teg yang dipanggil
Sintaks
<iframe src ="URL"></iframe>
Contoh:
<iframe src ="www.educba.com" ></iframe>
<iframe src ="URL" height="value" width="value"></iframe>
Contoh:
<iframe src ="www.educba.com" height="300" width="300"></iframe>
<iframe src ="URL" style="height: value in pixels; width: value in pixels"></iframe>
Contoh:
<iframe src ="www.educba.com" style="height:300px; width:300px;"></iframe>
<iframe src ="URL" style="border : none;"></iframe>
Iframe boleh digunakan sebagai Sasaran untuk pautan dengan menggunakan sintaks:
<iframe src ="URL" name="iframe_a"></iframe>
Contoh:
<iframe src ="www.educba.com" name="iframe_a"></iframe>
Terdapat teg atribut berbeza yang digunakan dalam Iframes. Itu adalah seperti berikut:
Berikut ialah beberapa contoh Iframe dalam HTML, yang diterangkan di bawah:
Mari kita pertimbangkan satu contoh di mana kita akan menunjukkan cara membuat iframe dengan ketinggian dan lebar tertentu.
Kod:
<!DOCTYPE html> <html> <body> <h2>HTML Iframes Demo</h2> <p>Here, we are showing an example of Iframe which containing specific Height and width in pixels format</p> <iframe src="C:\Users\Sonali\Desktop\HTML block elements.html" height="300" width="300"></iframe> </body> </html>
Output:
Mari kita pertimbangkan contoh lain di mana kita akan menunjukkan cara membuat iframe dengan ketinggian dan lebar tertentu. Tetapi dalam contoh ini, kami menentukan ketinggian dan lebar melalui CSS. Di sini kita dapat melihat bar skrol sedang dilaraskan mengikut saiz kandungan.
Kod:
<!DOCTYPE html> <html> <body> <h2>HTML Iframes Demo</h2> <p>Here, we are showing an example of Iframe which containing specific Height and width in pixels format</p> <iframe src="C:\Users\Sonali\Desktop\HTML block elements.html" style="height:100px;width:300px;"></iframe> </body> </html>
Output:
Here we are considering one example in which we will add a border to the iframe by adding some extra CSS properties to show a change in the border’s size, change in the border color, etc. So we can add as much style to our iframe.
Code:
<!DOCTYPE html> <html> <body> <h2>HTML Iframes Demo</h2> <p>Here we are showing an example of Iframe which containing a border with some additional CSS proprties</p> <iframe src="C:\Users\Sonali\Desktop\iframe.html" style="border:3px solid Blue; height: 200px;"></iframe> </body> </html>
Output:
Let’s consider another example where we will show how the target attribute opens a webpage link using an iframe.
Code:
<!DOCTYPE html> <html> <body> <h2>Iframe Demo- Target for a Link</h2> <iframe height="200px" width="100%" src="C:\Users\Sonali\Desktop\iframe1.html" name="iframe1_a"></iframe> <p><a href="https://www.educba.com/courses/">EDUCBA</a></p> <p>When the target of a link matches the name of an iframe, the link will open in the iframe.</p> </body> </html>
Output:
Target Output:
As shown above, for example, we can click on the target link EDUCBA so that it will open the following web page shown below.
An iframe is an inline frame that includes another HTML document in itself. It is the most powerful HTML element for web designing. You can add content from another source. It uses different HTML attributes like Global Attributes, Event Attributes, etc.
Atas ialah kandungan terperinci Iframe dalam HTML. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!