Maison >interface Web >tutoriel HTML >Balise de cadre en HTML

Balise de cadre en HTML

王林original: 2024-09-04 16:32:031150parcourir

Une balise frame HTML permet d'afficher plusieurs sites sur une seule page web sous forme de sections. Cette balise permet de concevoir une page Web de manière à ce que plusieurs pages Web avec un contenu différent puissent être combinées et affichées individuellement sur une seule page Web. Ceci est réalisé en divisant la page Web unique en différentes sections, que l'on peut appeler un cadre. Les images individuelles peuvent être chargées séparément. La balise frame est utilisée avec la balise frameset, où les balises frameset peuvent être considérées comme un conteneur, et plusieurs balises frame qu'elles contiennent représenteront plusieurs sites.

Syntaxe :

La syntaxe de base de la balise frame est la suivante,

<frame src = "URL">

L'attribut src spécifie la source d'un fichier. Le La balise prend en charge d'autres attributs, mais src est l'attribut principal.

Comme mentionné, le est utilisée avec la balise étiqueter. Le jeu de cadres peut être considéré comme une collection de plusieurs cadres où chaque cadre représentera un site individuel à charger sur la même page. La balise frame sera utilisée avec la balise frameset comme ci-dessous,

<frameset>
<frame src = " ">
<frame src = " ">
.
.
<frame src = " ">
</frameset>

Notez que la balise frameset a une balise de fin, mais pas la balise frame.

Exemples de balise Frame en HTML

Des exemples de balises frame en HTML sont donnés ci-dessous :

Exemple n°1 – Aligner les cadres horizontalement

Il existe trois fichiers frame1, frame2 et main.

Frame1.html

Code :

<!DOCTYPE html>
<html>
<head>
<title> Frame tag Example </title>
<style>
body {
text-align: center ;
background-color: rgb(120, 120, 120, 0.30 ) ;
}
.results {
border : green 1px solid;
background-color : aliceblue;
text-align : left;
padding-left : 20px;
height : 300px;
width : 95%;
}
</style>
</head
<body>
<div class = "results">
<h2> frame tag in HTML </h2>
<h1> Frame 1 </h1>
</div>
</body>
</html>

Frame2.html

Code :

<!DOCTYPE html>
<html>
<head>
<title> frame tag Example </title>
<style>
body {
text-align: center ;
background-color: rgb(120, 120, 120, 0.30 ) ;
}
.results {
border : green 1px solid;
background-color : aliceblue;
text-align : left;
padding-left : 20px;
height : 300px;
width : 95%;
}
</style>
</head
<body>
<div class = "results">
<h2> frame tag in HTML </h2>
<h1> Frame 2 </h1>
</div>
</body>
</html>

Main.html

Code :

<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content=
"width = device-width, initial-scale = 1.0">
<title>
frame tag in HTML
</title>
<frameset cols = "50%, 50%" >
<frame src = "frame1.html" >
<frame src = "frame2.html" >
</frameset>
</head>
<body>
</body>
</html>

Sortie : Ici, nous avons utilisé l'attribut cols pour les spécifier sous forme de colonne, et la largeur de chaque cadre a été fixée à 50 %.

Balise de cadre en HTML

Exemple n°2 – Aligner les cadres verticalement

Il existe quatre fichiers frame1, frame2,frame3 et main.

Frame1.html

Code :

<!DOCTYPE html>
<html>
<head>
<title> Frame tag Example </title>
<style>
body {
text-align: center ;
background-color: rgb(120, 120, 120, 0.30 ) ;
}
.results {
border : green 1px solid;
background-color : aliceblue;
text-align : left;
padding-left : 20px;
height : 300px;
width : 95%;
}
</style>
</head
<body>
<div class = "results">
<h2> frame tag in HTML </h2>
<h1> Frame 1 </h1>
</div>
</body>
</html>

Frame2.html

Code :

<!DOCTYPE html>
<html>
<head>
<title> frame tag Example </title>
<style>
body {
text-align: center ;
background-color: rgb(120, 120, 120, 0.30 ) ;
}
.results {
border : green 1px solid;
background-color : aliceblue;
text-align : left;
padding-left : 20px;
height : 300px;
width : 95%;
}
</style>
</head
<body>
<div class = "results">
<h2> frame tag in HTML </h2>
<h1> Frame 2 </h1>
</div>
</body>
</html>

Frame3.html

Code :

<!DOCTYPE html>
<html>
<head>
<title> Frame tag Example </title>
<style>
body {
text-align: center ;
background-color: rgb(120, 120, 120, 0.30 ) ;
}
.results {
border : green 1px solid;
background-color : aliceblue;
text-align : left;
padding-left : 20px;
height : 300px;
width : 95%;
}
</style>
</head
<body>
<div class = "results">
<h2> frame tag in HTML </h2>
<h1> Frame 3 </h1>
</div>
</body>
</html>

Main.html

Code :

<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content=
"width = device-width, initial-scale = 1.0">
<title>
frame tag in HTML
</title>
<frameset rows = "30%, 30%, 30%" >
<frame src = "frame1.html" >
<frame src = "frame2.html" >
<frame src = "frame3.html" >
</frameset>
</head>
<body>
</body>
</html>

Sortie : Ici, nous avons utilisé l'attribut cols sur la balise frameset pour diviser les cadres horizontalement, et la hauteur a été mentionnée en pourcentage.

Balise de cadre en HTML

Exemple n°3 – Naviguer dans différents cadres à l'aide de liens

Pour cet exemple, trois fichiers, frame1.html, frame2.html et frame3.html, sont identiques.

Nous utiliserons un attribut de nom avec une balise frame.

Main.html

Code :

<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content=
"width = device-width, initial-scale = 1.0">
<title>
frame tag in HTML
</title>
<frameset cols = "30%, * " >
<frame src = "menu.html" name = "menu" >
<frame name = "frame" >
</frameset>
</head>
<body>
</body>
</html>

menu.html

Code :

<!DOCTYPE html>
<html>
<head>
<title> Frame tag Example </title>
<style>
body {
text-align: center ;
background-color: rgb(120, 120, 120, 0.30 ) ;
}
.results {
border : green 1px solid;
background-color : aliceblue;
text-align : center;
height : 300px;
width : 95%;
}
</style>
</head
<body>
<div class = "results">
<h2> Menu </h2>
<a href = "frame1.html" target = "frame"> Frame 1 </a> </br> </br>
<a href = "frame2.html" target = "frame"> Frame 2 </a> </br> </br>
<a href = "frame3.html" target = "frame"> Frame 3 </a>
</div>
</body>
</html>

Ici, dans la balise frameset, nous avons divisé deux cadres en une largeur de 30 % pour le premier cadre et la largeur restante pour le deuxième cadre. Le premier cadre répertoriera le menu sous forme d’hyperliens. Pour le deuxième cadre, nous lui avons attribué un nom et dans le menu.html, nous avons défini la cible comme nom de cadre pour chaque lien. Ainsi, ce lien dirigera le cadre, et le contenu sera affiché sur le même cadre.

Sortie :

Balise de cadre en HTML

Remarque : n'est pas pris en charge dans un HTML5, à la place