HTML - Cadres

Les cadres HTML sont utilisés pour diviser la fenêtre de votre navigateur en plusieurs sections où chaque section peut charger un document HTML distinct. Une collection de cadres dans la fenêtre du navigateur est appelée jeu de cadres. La fenêtre est divisée en cadres de la même manière que les tableaux sont organisés: en lignes et en colonnes.

Inconvénients des cadres

Il y a peu d'inconvénients à utiliser des cadres, il n'est donc jamais recommandé d'utiliser des cadres dans vos pages Web -

Certains appareils plus petits ne peuvent souvent pas gérer les images car leur écran n'est pas assez grand pour être divisé.
Parfois, votre page sera affichée différemment sur différents ordinateurs en raison de la résolution d'écran différente.
Le bouton de retour du navigateur peut ne pas fonctionner comme l'espère l'utilisateur.
Il existe encore peu de navigateurs qui ne prennent pas en charge la technologie des cadres.

Création de cadres

Pour utiliser des cadres sur une page, nous utilisons la balise <frameset> au lieu de la balise <body>. La balise <frameset> définit comment diviser la fenêtre en cadres. lerows l'attribut de la balise <frameset> définit les cadres horizontaux et colsL'attribut définit les cadres verticaux. Chaque cadre est indiqué par la balise <frame> et définit quel document HTML doit s'ouvrir dans le cadre.

Note- La balise <frame> est obsolète en HTML5. N'utilisez pas cet élément.

Exemple

Voici l'exemple pour créer trois cadres horizontaux -

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Frames</title>
   </head>
	
   <frameset rows = "10%,80%,10%">
      <frame name = "top" src = "/html/top_frame.htm" />
      <frame name = "main" src = "/html/main_frame.htm" />
      <frame name = "bottom" src = "/html/bottom_frame.htm" />
   
      <noframes>
         <body>Your browser does not support frames.</body>
      </noframes>
      
   </frameset>
   
</html>

Cela produira le résultat suivant -

Exemple

Mettons l'exemple ci-dessus comme suit, ici nous avons remplacé l'attribut rows par cols et changé leur largeur. Cela créera les trois cadres verticalement -

<!DOCTYPE html>
<html>
   
   <head>
      <title>HTML Frames</title>
   </head>
   
   <frameset cols = "25%,50%,25%">
      <frame name = "left" src = "/html/top_frame.htm" />
      <frame name = "center" src = "/html/main_frame.htm" />
      <frame name = "right" src = "/html/bottom_frame.htm" />
      
      <noframes>
         <body>Your browser does not support frames.</body>
      </noframes>
   </frameset>
   
</html>

Cela produira le résultat suivant -

Les attributs de balise <frameset>

Voici les attributs importants de la balise <frameset> -

Sr.Non	Attribut et description
1	cols Spécifie le nombre de colonnes contenues dans le jeu de cadres et la taille de chaque colonne. Vous pouvez spécifier la largeur de chaque colonne de l'une des quatre manières suivantes: Valeurs absolues en pixels. Par exemple, pour créer trois cadres verticaux, utilisez cols = "100, 500, 100" . Un pourcentage de la fenêtre du navigateur. Par exemple, pour créer trois cadres verticaux, utilisez cols = "10%, 80%, 10%" . Utilisation d'un symbole générique. Par exemple, pour créer trois cadres verticaux, utilisez cols = "10%, , 10%"* . Dans ce cas, le caractère générique prend le reste de la fenêtre. En tant que largeurs relatives de la fenêtre du navigateur. Par exemple, pour créer trois cadres verticaux, utilisez cols = "3 , 2 , 1 "* . C'est une alternative aux pourcentages. Vous pouvez utiliser les largeurs relatives de la fenêtre du navigateur. Ici, la fenêtre est divisée en sixièmes: la première colonne occupe la moitié de la fenêtre, la seconde prend un tiers et la troisième prend un sixième.
2	rows Cet attribut fonctionne exactement comme l'attribut cols et prend les mêmes valeurs, mais il est utilisé pour spécifier les lignes du jeu de cadres. Par exemple, pour créer deux cadres horizontaux, utilisez rows = "10%, 90%" . Vous pouvez spécifier la hauteur de chaque ligne de la même manière que celle expliquée ci-dessus pour les colonnes.
3	border Cet attribut spécifie la largeur de la bordure de chaque cadre en pixels. Par exemple, border = "5". Une valeur de zéro signifie aucune bordure.
4	frameborder Cet attribut spécifie si une bordure tridimensionnelle doit être affichée entre les cadres. Cet attribut prend la valeur 1 (oui) ou 0 (non). Par exemple frameborder = "0" ne spécifie aucune bordure.
5	framespacing Cet attribut spécifie la quantité d'espace entre les cadres dans un jeu de cadres. Cela peut prendre n'importe quelle valeur entière. Par exemple, framespacing = "10" signifie qu'il doit y avoir un espacement de 10 pixels entre chaque image.

Les attributs de balise <frame>

Voici les attributs importants de la balise <frame> -

Sr.Non	Attribut et description
1	src Cet attribut est utilisé pour donner le nom du fichier qui doit être chargé dans le cadre. Sa valeur peut être n'importe quelle URL. Par exemple, src = "/html/top_frame.htm" chargera un fichier HTML disponible dans le répertoire html.
2	name Cet attribut vous permet de donner un nom à un cadre. Il est utilisé pour indiquer dans quel cadre un document doit être chargé. Ceci est particulièrement important lorsque vous souhaitez créer des liens dans un cadre qui chargent des pages dans un autre cadre, auquel cas le deuxième cadre a besoin d'un nom pour s'identifier comme la cible du lien.
3	frameborder Cet attribut spécifie si les bordures de ce cadre sont affichées ou non; il remplace la valeur donnée dans l'attribut frameborder sur la balise <frameset> s'il y en a une, et cela peut prendre les valeurs 1 (oui) ou 0 (non).
4	marginwidth Cet attribut vous permet de spécifier la largeur de l'espace entre la gauche et la droite des bordures du cadre et le contenu du cadre. La valeur est donnée en pixels. Par exemple marginwidth = "10".
5	marginheight Cet attribut vous permet de spécifier la hauteur de l'espace entre le haut et le bas des bordures du cadre et son contenu. La valeur est donnée en pixels. Par exemple marginheight = "10".
6	noresize Par défaut, vous pouvez redimensionner n'importe quel cadre en cliquant et en faisant glisser sur les bordures d'un cadre. L'attribut noresize empêche un utilisateur de pouvoir redimensionner le cadre. Par exemple, noresize = "noresize".
sept	scrolling Cet attribut contrôle l'apparence des barres de défilement qui apparaissent sur le cadre. Cela prend les valeurs "yes", "no" ou "auto". Par exemple, scrolling = "no" signifie qu'il ne devrait pas avoir de barres de défilement.
8	longdesc Cet attribut vous permet de fournir un lien vers une autre page contenant une longue description du contenu du cadre. Par exemple longdesc = "framedescription.htm"

Prise en charge du navigateur pour les cadres

Si un utilisateur utilise un ancien navigateur ou tout autre navigateur, qui ne prend pas en charge les cadres, l'élément <noframes> doit être affiché à l'utilisateur.

Vous devez donc placer un élément <body> à l'intérieur de l'élément <noframes> car l'élément <frameset> est censé remplacer l'élément <body>, mais si un navigateur ne comprend pas l'élément <frameset>, il doit comprendre ce qu'il y a à l'intérieur du Élément <body> contenu dans un élément <noframes>.

Vous pouvez mettre un bon message pour votre utilisateur ayant d'anciens navigateurs. Par exemple, Désolé !! votre navigateur ne prend pas en charge les cadres. comme indiqué dans l'exemple ci-dessus.

Nom du cadre et attributs cibles

L'une des utilisations les plus courantes des cadres consiste à placer les barres de navigation dans un cadre, puis à charger les pages principales dans un cadre séparé.

Voyons l'exemple suivant où un fichier test.htm a le code suivant -

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Target Frames</title>
   </head>
	
   <frameset cols = "200, *">
      <frame src = "/html/menu.htm" name = "menu_page" />
      <frame src = "/html/main.htm" name = "main_page" />
      
      <noframes>
         <body>Your browser does not support frames.</body>
      </noframes>
   </frameset>
	
</html>

Ici, nous avons créé deux colonnes à remplir avec deux cadres. Le premier cadre fait 200 pixels de large et contiendra la barre de menu de navigation implémentée parmenu.htmfichier. La deuxième colonne remplit l'espace restant et contiendra la partie principale de la page et elle est implémentée parmain.htmfichier. Pour les trois liens disponibles dans la barre de menus, nous avons mentionné le cadre cible commemain_pageAinsi, chaque fois que vous cliquez sur l'un des liens de la barre de menus, le lien disponible s'ouvre dans la page principale.

Voici le contenu du fichier menu.htm

<!DOCTYPE html>
<html>

   <body bgcolor = "#4a7d49">
      <a href = "http://www.google.com" target = "main_page">Google</a>
      <br />
      <br />
      
      <a href = "http://www.microsoft.com" target = "main_page">Microsoft</a>
      <br />
      <br />
      
      <a href = "http://news.bbc.co.uk" target = "main_page">BBC News</a>
   </body>
	
</html>

Voici le contenu du fichier main.htm -

<!DOCTYPE html>
<html>

   <body bgcolor = "#b5dcb3">
      <h3>This is main page and content from any link will be displayed here.</h3>
      <p>So now click any link and see the result.</p>
   </body>
	
</html>

Quand on charge test.htm fichier, il produit le résultat suivant -

Vous pouvez maintenant essayer de cliquer sur les liens disponibles dans le panneau de gauche et voir le résultat. L' attribut cible peut également prendre l'une des valeurs suivantes -

Sr.Non	Option et description
1	_self Charge la page dans le cadre actuel.
2	_blank Charge une page dans une nouvelle fenêtre de navigateur. Ouverture d'une nouvelle fenêtre.
3	_parent Charge la page dans la fenêtre parente, qui dans le cas d'un seul jeu de cadres est la fenêtre principale du navigateur.
4	_top Charge la page dans la fenêtre du navigateur, en remplaçant les cadres actuels.
5	targetframe Charge la page dans un cadre cible nommé.