Les cadres en HTML sont un moyen de diviser la fenêtre du navigateur en plusieurs sections, chacune pouvant charger et afficher un document HTML différent. Dans cet article, nous verrons des exemples pratiques de cadres en HTML.

Bien que son utilisation ait diminué ces dernières années en raison de l'adoption de techniques plus modernes et flexibles, telles que CSS et JavaScript, peut encore être trouvé sur certains sites Web, en particulier ceux créés dans les années 1990 et au début des années 1990. celui de 2000.

Comment fonctionnent les cadres ou les cadres en HTML ?

Les cadres sont composés de deux éléments :

1. Cadre: L'élément est utilisé pour diviser la fenêtre du navigateur en sections rectangulaires, chacune pouvant charger son propre document HTML.

2. cadres: L'élément est utilisé dans un pour définir chacune des sections individuelles. Et il envoie pour appeler un autre document qui est chargé à l'intérieur du jeu de cadres.

• Suivre avec: Exemples d'iFrame

Comment créer des cadres en HTML

Pour créer un document HTML avec des cadres, suivez deux étapes très simples :

1. Créez un document HTML qui définit la structure des cadres à l'aide de l'élément. Par exemple:

Fichier 1: frameset.html

2. Créez un ou plusieurs documents HTML à charger dans les cadres.

Fichier 2: frame1.html

C'est le cadre 1

Fichier 3: frame2.html

C'est le cadre 2

Attributs de cadre en HTML

Certains des attributs d'élément les plus importants ils sont:

• défilement: Cet attribut est utilisé pour contrôler l'apparence des barres de défilement dans le cadre. Il peut avoir les valeurs "auto", "oui" ou "non".

• redimensionner: Cet attribut est utilisé pour empêcher l'utilisateur de redimensionner le cadre.

• patate douce: Cet attribut est utilisé pour donner un nom au cadre, ce qui peut être utile pour référencer le cadre dans les liens et les scripts.

• src: Cet attribut permet de spécifier l'URL du document HTML à charger dans le cadre.

• bordure de cadre: Cet attribut spécifie si les cadres doivent avoir des bordures ou non. Les valeurs possibles sont "1" (pour afficher les bordures) ou "0" (pour ne montrer aucune bordure). Par exemple, .

• frontière: Cet attribut définit la largeur de la bordure entre les cadres en pixels. Par exemple, créera une bordure de 5 pixels entre les cadres.

• espacement des images: Cet attribut est similaire à frontière. Il définit également l'espace entre les images en pixels. Par exemple, définira un écart de 10 pixels entre les images.

• couleur de la bordure: Cet attribut permet de changer la couleur de bordure des cadres. Toute couleur valide peut être spécifiée. Par exemple, rendra la bordure des cadres rouge.

Exemple d'utilisation :

Comment créer un lien vers un cadre spécifique

Nous pouvons ouvrir un lien dans un cadre spécifique en utilisant l'attribut cible Dans l'étiquette. La valeur de cible doit être le même que le nom du cadre (patate douce attribut de ). Par exemple:

dans menu.html
Page 1
Page 2

Dans ce cas, cliquer sur les liens "Page 1" ou "Page 2" dans le cadre du menu chargera la page correspondante dans le cadre "contenu".

Comment casser les cadres

Si vous voulez un lien pour ouvrir une page en dehors du jeu de cadres (c'est-à-dire remplacer le jeu de cadres entier), vous pouvez utiliser la valeur spéciale _haut pour l'attribut cible. Par exemple:

dans menu.html
sortir des cadres

Lorsque vous cliquez sur "Quitter les cadres", le navigateur chargera "pageOutofFrames.html" dans la fenêtre complète, remplaçant le jeu de cadres.

Exemple pour diviser l'écran en deux colonnes avec des cadres

Cet exemple divise l'écran en deux colonnes de taille égale. Chaque colonne charge une page HTML différente.

Exemple pour créer une barre latérale de navigation avec des cadres

Cet exemple crée une barre latérale qui occupe 25 % de l'écran et est utilisée pour la navigation. Le reste de l'écran est utilisé pour afficher le contenu principal.

Exemple pour diviser l'écran en lignes et en colonnes

Cet exemple plus complexe divise l'écran en quatre parties égales. Chaque section charge une page HTML différente.

Exemple de navigation supérieure avec des cadres HTML

Créez un fichier qui définit deux images consécutives. Les deux fichiers qu'il définit sont: un pour la navigation (qui occupe 20% de la largeur de la fenêtre) et un pour le contenu principal (qui occupe le reste de la largeur de la fenêtre).

Ensuite, vous devrez créer les fichiers "navigation.html" et "content.html". Par exemple, "navigation.html" pourrait ressembler à ceci :

Page 1

Page 2

Page 3


Et "content.html" pourrait ressembler à ceci :

Bienvenue sur notre site!

Ici ira le contenu de la page sélectionnée dans la navigation.

Dans ce cas, lorsque vous cliquez sur un lien dans "navigation.html", la page correspondante est chargée dans le cadre "contenu".