communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français
Maison > interface Web > tutoriel HTML > Balise de jeu de cadres HTML

Balise de jeu de cadres HTML

WBOY
Libérer： 2024-09-04 16:30:32
original
499 Les gens l'ont consulté

Le La balise HTML combine plusieurs cadres et les affiche comme une seule page Web. Ce document sera composé de tous les cadres inclus dans un jeu de cadres. Les cadres ne ressemblent en rien à des fenêtres individuelles ou à des sites Web. La balise frameset nous permet de former plusieurs colonnes ou lignes et d'inclure les cadres en dessous. Cette fonctionnalité était disponible avant HTML 5 et est utile pour afficher plusieurs documents à la fois en les combinant. Chaque frame peut contenir son contenu ; normalement, il s'agira de différents fichiers Web tels que du HTML ou des images.

Syntaxe

Ici, la balise de départ est et se termine par la balise de fin . Le La balise peut contenir une ou plusieurs balises de cadre multiples. Chaque balise de cadre commence par balise, avec les noms d’attribut « src », où nous transmettrons le contenu de notre cadre. Comme présenté, ce contenu peut ressembler à des fichiers Web tels que du HTML ou à des images transmises.

<frameset cols / rows = ", , , " >
<frame src = "source file name. . . " >
. . . . . .
. . . . . .
<frame src = "source file name. . . " >
</frameset>
Copier après la connexion

Ici, nous avons un jeu de cadres de balises de départ qui contient des colonnes ou des lignes d'attribut. Généralement, ces deux attributs seront utilisés avec une balise frameset, car une balise frameset est utilisée pour combiner plusieurs images. Ces balises ne servent qu'à former des lignes ou des colonnes pour positionner différents cadres. Une simple balise frame suit ensuite la balise de départ. Pour afficher un fichier dans un frame, utilisez l'attribut « src » dans la balise frame et transmettez le nom du fichier comme valeur. Nous avons montré qu'une seule image peut contenir plusieurs images utilisant les points. Et enfin, la balise frameset est fermée en fermant la balise .

Attributs de la balise frameset

Vous trouverez ci-dessous la liste des attributs pris en charge par la balise frameset :

1. cols : Cet attribut permet de positionner les cadres à l'intérieur. L'attribut cols divisera le jeu de cadres en plusieurs colonnes, affichant les cadres verticalement. Cet attribut permet également de définir la largeur de chaque colonne du frameset. Nous pouvons définir différentes valeurs pour chaque image en passant la valeur à cet attribut. La valeur peut être transmise en pourcentage, en pixels ou en longueur relative. La valeur par défaut de cet attribut est 100 %.

2. rows : Cet attribut est également similaire à l'attribut cols. L'attribut rows divisera le jeu de cadres en plusieurs lignes et les cadres seront affichés horizontalement un par un. Nous pouvons transmettre la valeur similaire à l'attribut cols pour définir la hauteur de chaque image. En utilisant à la fois des lignes et des colonnes, le résultat souhaité peut être obtenu. La valeur par défaut de cet attribut est également 100 %.

3. border: Cet attribut est utilisé sur la balise frameset pour définir la largeur de chaque cadre dans un frameset.

4. framespacing : La balise frameset utilise l'attribut « frame spacing » pour établir les espaces entre les images qu'elle contient.

Exemples d'implémentation de la balise HTML frameset

Vous trouverez ci-dessous des exemples de balises de jeu de cadres HTML :

Exemple n°1

Il contient plusieurs fichiers HTML car nous utilisons différents fichiers comme cadre dans une fenêtre parent.

Code :

Fichier principal :

<!DOCTYPE html>
<html>
<head>
<title> frameset tag in HTML </title>
<style>
</style>
</head>
<frameset>
<frame src = "frame1.html" >
</frameset>
</html>
Copier après la connexion

Nous avons un seul fichier source nommé frame 1.

frame1.html :

<!DOCTYPE html>
<html>
<head>
<title> Frameset Example </title>
<style>
body {
text-align: center ;
background-color: rgb(120, 120, 120, 0.15) ;
}
</style>
</head>
<body>
<h2> Example of Frameset tag </h2>
<h1> Frame 1 </h1>
</body>
</html>
Copier après la connexion

Sortie :

Comme nous n'avons qu'un seul fichier inclus dans un seul cadre, la page affichera le contenu de frame.html dans son ensemble. La largeur et la hauteur du cadre sont, par défaut, de 100 % ; c'est pourquoi un seul cadre occupera toute la surface.

Balise de jeu de cadres HTML

Exemple n°2

Ajoutons un cadre supplémentaire dans notre exemple et divisons-le par colonne en utilisant l'attribut cols et en transmettant la valeur en pourcentage.

Code :

frame2.html :

<!DOCTYPE html>
<html>
<head>
<title> Frameset Example </title>
<style>
body {
text-align: center ;
background-color: rgb(120, 120, 120, 0.30 ) ;
}
</style>
</head
<body>
<h2> Hello World..! </h2>
<h1> Frame 2 </h1>
</body>
</html>
Copier après la connexion

Fichier principal :

<!DOCTYPE html>
<html>
<head>
<title> frameset tag in HTML </title>
<style>
</style>
</head>
<frameset cols = "40% , 60 %" >
<frame src = "frame1.html" >
<frame src = "frame2.html" >
</frameset>
</html>
Copier après la connexion

Sortie :

Ici, nous avons passé deux images et les avons divisées à l'aide de l'attribut cols avec des valeurs transmises à 40 % et 60 %. Faites la largeur du premier cadre 40% et la largeur du deuxième cadre 60%.

Balise de jeu de cadres HTML

Exemple #3

Divisons les mêmes cadres horizontalement en utilisant l'attribut rows. Nous modifierons le même dernier exemple. La différence sera que l'attribut rows remplacera l'attribut cols. L'attribut rows prend également une valeur similaire à l'attribut cols. Nous pouvons transmettre plusieurs valeurs en fonction du nombre d'images.

Code :

Fichier principal :

<!DOCTYPE html>
<html>
<head>
<title> frameset tag in HTML </title>
<style>
</style>
</head>
<frameset rows = "50% , 50%" >
<frame src = "frame1.html" >
<frame src = "frame2.html" >
</frameset>
</html>
Copier après la connexion

Sortie :

Ici, la sortie sera deux cadres horizontaux de même hauteur que 50 %. Notez que cette hauteur correspondra à la fenêtre réelle du navigateur.

Balise de jeu de cadres HTML

Conclusion

Nous avons découvert la balise frameset en HTML, son objectif et comment l'utiliser. Cette balise vise à fusionner et à présenter plusieurs cadres sur une seule fenêtre d'affichage. Nous pouvons également définir la position et la taille des cadres en utilisant les attributs disponibles. Cette balise est obsolète depuis HTML 5.

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!

Étiquettes associées：
html html5 HTML Tutorial HTML Properties HTML tags
source：php
Article précédent：Balise THhead en HTML Article suivant：Balise de case à cocher HTML
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Derniers numéros
Conversion automatique PX en erreur REM  <style>html {   taille de police : calc(100vw / 3,75);      }body {    taille de la...
Depuis 2024-04-16 09:34:16
0
0
4687
La page ne peut soudainement plus extraire le CSS ou le bootstrap Je suis donc en train de développer une page, j'en ai fait une partie hier et ça a très bi...
Depuis 2024-04-06 21:58:04
0
1
800
Comment résoudre le mystérieux espace vide en bas de page en CSS J'essaie de créer une page Web simple en utilisant Bootstrap et D3, mais je ne sais pas co...
Depuis 2024-04-06 20:22:15
0
1
454
Comment utiliser les composants Laravel avec des espaces réservés paresseux Livewire Je souhaite ajouter le squelette de mon composant Laravel dans un espace réservé livewire3...
Depuis 2024-04-06 20:02:10
0
2
543
Méthode de niveau supérieur pour remplacer une chaîne par du code HTML (généré à partir d'un tableau) Étant donné une chaîne comme celle-ci...$htmlPattern="Usernameis:#name#andusercompany...
Depuis 2024-04-06 17:40:41
0
2
410
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal