Les Iframes en HTML ne sont rien d'autre que des cadres en ligne utilisés comme document HTML pour y ajouter un autre document HTML. Il est principalement utilisé dans les pages Web ou les processus de développement Web pour inclure d'autres contenus via une autre source, comme des publicités sur cette page Web.
La plupart des concepteurs de sites Web utilisent Iframe pour présenter des applications interactives sur le site Web ou les pages Web. Cela est rendu possible grâce à JavaScript ou à l'attribut target en HTML.
Le but principal d'un Iframe est d'afficher une page Web dans une autre. Le cadre en ligne doit être affiché à l'aide d'une balise appelée
Syntaxe
<iframe src ="URL"></iframe>
Exemple :
<iframe src ="www.educba.com" ></iframe>
<iframe src ="URL" height="value" width="value"></iframe>
Exemple :
<iframe src ="www.educba.com" height="300" width="300"></iframe>
<iframe src ="URL" style="height: value in pixels; width: value in pixels"></iframe>
Exemple :
<iframe src ="www.educba.com" style="height:300px; width:300px;"></iframe>
<iframe src ="URL" style="border : none;"></iframe>
L'iframe peut être utilisée comme cible pour un lien en utilisant la syntaxe :
<iframe src ="URL" name="iframe_a"></iframe>
Exemple :
<iframe src ="www.educba.com" name="iframe_a"></iframe>
Il existe différentes balises d'attribut utilisées dans les Iframes. Ce sont les suivants :
Voici quelques exemples d'Iframes en HTML, qui sont expliqués ci-dessous :
Prenons un exemple dans lequel nous montrerons comment créer un iframe avec une hauteur et une largeur spécifiques.
Code :
<!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>
Sortie :
Prenons un autre exemple dans lequel nous montrerons comment créer un iframe avec une hauteur et une largeur spécifiques. Mais dans cet exemple, nous spécifions la hauteur et la largeur via CSS. Ici, nous pouvons voir que la barre de défilement est ajustée en fonction de la taille du contenu.
Code :
<!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>
Sortie :
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.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!