Création d'un cadre dans des exemples HTML. Iframe et Frame - qu'est-ce qu'ils sont et comment utiliser au mieux les frames en HTML. Nouvelles capacités de liens hypertexte

Le mot « cadre » signifie cadre, cadre. À l'aide de cadres, l'espace de la fenêtre du navigateur est divisé en sections indépendantes dans lesquelles diverses informations peuvent être affichées. Il est pratique d'utiliser des cadres lorsque vous devez afficher des données provenant de diverses sources sur l'écran.

Remarque 1

Les cadres divisent la fenêtre de visualisation du navigateur en un certain nombre de sous-zones rectangulaires situées les unes à côté des autres. Des documents HTML individuels peuvent être chargés dans ces sous-zones et visualisés indépendamment les uns des autres. Entre les frames, si nécessaire, vous pouvez organiser une interaction basée sur la sélection d'un lien dans l'un des frames, ce qui conduira au chargement le document requis vers un autre cadre ou une autre fenêtre de navigateur.

Domaines d'application des cadres

Les développeurs de documents HTML disposent d'un large choix de formulaires pour présenter des informations sur les pages. Texte et informations graphiques peut être ordonné et organisé à l'aide de listes, de tableaux, d'options d'alignement, de définition de lignes horizontales et de divisions de paragraphes. Mais ces capacités ne sont pas toujours suffisantes ; dans de tels cas, il est nécessaire de diviser la fenêtre d'affichage du navigateur en zones distinctes (cadres).

Le choix de la structure du cadre de présentation des informations sur le WWW se justifie par :

  • lors de l'organisation du contrôle du chargement des documents dans l'une des sous-zones de la fenêtre de visualisation du navigateur tout en travaillant simultanément dans une autre sous-zone ;
  • lorsqu'elles sont situées à un certain endroit dans la fenêtre de visualisation, des informations qui seront toujours à l'écran quel que soit le contenu des autres sous-zones de l'écran ;
  • lors de l'affichage d'informations idéalement situées dans plusieurs sous-zones de la fenêtre, chacune pouvant être visualisée indépendamment des autres.

La figure ci-dessous montre la structure du cadre d'une fenêtre de navigateur de page HTML.

Cette structure est plus typique dans les cas où certains cadres servent de table des matières pour les documents, tandis que d'autres sont utilisés pour charger leur contenu. Auparavant, une telle tâche était résolue de cette manière sans utiliser de cadres. Sur l'une des pages se trouvait une table des matières composée de liens vers d'autres documents ou certains fragments. Lorsque vous avez cliqué sur un tel lien, la table des matières a disparu et un document a été chargé à sa place, après lecture duquel vous avez dû revenir à la table des matières. Lorsque les frames ont commencé à être utilisés, ce retour n'était plus efficace, puisque la table des matières commençait à être située en permanence sur une partie de l'écran.

Les cadres sont intrinsèquement similaires aux tableaux, car tous deux les utilisent pour diviser la fenêtre du navigateur en zones rectangulaires contenant des informations. Cependant, les cadres permettent non seulement de formater les pages du document, mais également d'organiser l'interaction entre elles. Fondamentalement, les cadres et les tableaux diffèrent en ce sens que chaque cadre correspond à un document HTML distinct et que le contenu de toutes les cellules du tableau fait partie d'un seul document. De plus, la page affichée dans le cadre peut défiler lorsqu'elle est visualisée indépendamment des autres. Chaque image est une sorte de mini-navigateur distinct. Les tableaux, contrairement aux cadres, qui sont toujours entièrement présentés à l'écran, ne peuvent souvent pas tenir complètement dans la fenêtre et ne sont visualisés que par parties. On peut donc noter que dans les tableaux HTML nombre total Comme les cellules ne sont pas limitées et atteignent parfois plusieurs centaines, le nombre d'images dans un document est généralement de plusieurs unités.

Création de cadres

Les balises sont utilisées pour créer des cadres.

Le descripteur forme des ensembles de cadres qui divisent les espaces de fenêtre en lignes et colonnes. Ensuite, la hauteur et la largeur de toutes les lignes et colonnes sont définies sous forme de pourcentage des dimensions actuelles de la fenêtre du navigateur, en pixels ou sous forme d'astérisque. Le symbole astérisque indique que la taille des cadres dépend des dimensions des autres cadres de la page.

Le descripteur définit la structure et le contenu d'un cadre particulier.

Vous trouverez ci-dessous un exemple du code de la page.

Un exemple de travail avec des cadres

Avantages et inconvénients des cadres

Les avantages des cadres sont les suivants :

  • ils peuvent afficher simultanément diverses informations dans une seule fenêtre ;
  • leur utilisation permet d'afficher en permanence certaines informations (logos), sans qu'il soit nécessaire de les inclure sur chaque page du site ;
  • ils aident à créer une navigation flexible sur le site.

Les inconvénients des cadres incluent :

  • leur principal avantage (afficher les informations dans une seule fenêtre), puisque la zone accessible de la page Web à cet égard devient nettement plus petite ;
  • choisir la bonne taille de cadre lors de sa création est souvent difficile, car l'utilisateur doit constamment faire défiler le cadre à l'aide des barres de défilement ;
  • sur les moniteurs avec de faibles résolutions d'écran, la quantité d'informations visibles est nettement inférieure ;
  • De nombreux moteurs de recherche et annuaires refusent d’enregistrer les pages utilisant des frames.

Remarque 2

Un autre inconvénient est que certains navigateurs ne peuvent pas traiter les frames. Dans ce cas, seul un écran vide apparaît devant l’utilisateur. Pour aider l'utilisateur dans cette situation, une balise est conçue qui permet d'afficher le texte placé entre les balises d'ouverture et de fermeture lorsque le cadre ne peut pas être affiché.

Barres de défilement du cadre

Par défaut, le navigateur n'affichera les barres de défilement que lorsque les informations ne rentrent pas dans les dimensions du cadre. Pour ce faire, l'attribut SCROLLING est défini sur l'une des valeurs oui (non), ce qui permet au navigateur de toujours masquer les barres de défilement ou de toujours les afficher. Masquer les barres de défilement vous permet d’augmenter la taille de la zone du cadre visible. Dans le même temps, si les données ne rentrent pas dans la fenêtre, elles deviendront inaccessibles à l'utilisateur.

Modification des limites du cadre

La modification des limites du cadre peut être désactivée, cela se fait à l'aide de l'attribut NORESIZE. Cet attribut est pratique à utiliser lorsque vous devez empêcher l’utilisateur de modifier la mise en page d’origine. Par défaut, l'utilisateur a la possibilité de déplacer les bordures du cadre à sa discrétion, il peut définir de nouvelles dimensions de l'objet afin d'améliorer la visualisation un certain fragment données. Dans les cas où les cadres n'ont pas de bordures visibles, cela interdira automatiquement leur redimensionnement. À l'aide de l'attribut BORDER d'une balise, vous pouvez modifier l'épaisseur des lignes de bordure du cadre. Par défaut, le navigateur encadre le cadre avec un cadre gris et d'une épaisseur de 6 pixels. L'attribut BORDERCOLOR permet de changer la couleur de la bordure. L'attribut FRAMEBORDER permet de masquer les bordures d'un cadre.

Par défaut, le navigateur affiche des cadres avec une marge de 10 pixels entre le texte et la bordure du cadre.

L'attribut MARGINWIDTH spécifie la largeur des marges gauche et droite.

Et l'attribut MARGINHEIGHT détermine la hauteur des marges supérieure et inférieure.

Lors de la définition de la taille des champs, vous devez utiliser les deux attributs, car le navigateur peut automatiquement réduire la taille des champs non spécifiés à la valeur minimale.

Cadres flottants

Les frames inactifs font partie d’une page Web et ne nécessitent pas de page distincte les décrivant. Une balise est utilisée pour créer de tels cadres. L'attribut NAME de cette balise spécifie le nom du cadre flottant, qui pourra ensuite être utilisé pour définir un lien hypertexte ouvrant la page correspondante dans ce cadre. Les attributs WIDTH et HEIGHT précisent les dimensions du cadre flottant, puisque l'utilisateur n'a pas la possibilité de les modifier lui-même.

Les frames flottants ne sont actuellement pris en charge que par Microsoft IE.

Vous trouverez ci-dessous un exemple du code de la page :

Exemple 1

Un exemple de travail avec des cadres

largeur="350" hauteur="300" align="gauche">

Un exemple de travail avec des cadres

Un exemple de travail avec des cadres

Instructions

Langage HTML(HyperText Markup Language - « langage de balisage hypertexte ») propose deux types de cadres. « Flottant » est plus flexible et plus facile à insérer dans un existant. En général, la construction qui décrit l'insertion d'une fenêtre à l'aide d'un cadre flottant ressemble à ceci : Ici, le site existant (attribut src) est spécifié comme source de données pour ce cadre. Il sera ouvert dans un cadre mesurant 400 par 300, comme indiqué dans les attributs width et height. Vous pouvez également préciser la page de votre site dans l'attribut src. Dans ce cas, il suffit de préciser une adresse relative (c'est-à-dire une adresse relative à la page dans laquelle le cadre est inséré) : Dans cet exemple, la hauteur du cadre n'est pas spécifiée, mais il existe un attribut id. En l'utilisant, vous pouvez en utilisant CSS() définissez les dimensions requises pour ce cadre :

Un autre type de cadres - « classique » - nécessite une page séparée qui contiendra une description de la structure des cadres. Les cadres eux-mêmes seront situés sur des pages distinctes, peut-être même sur des sites distincts. Le code HTML d'une telle page conteneur pour les frames pourrait ressembler à ceci :




Aucun blocage ... Et ... , qui sont requis pour les pages normales, ne devraient pas être ici. Dans cet exemple, la balise de conteneur d'ouverture. contient l'attribut rows - cela signifie que l'espace de la page doit être divisé verticalement et que le premier cadre recevra la partie supérieure. Si vous remplacez les lignes par des colonnes, la division sera horizontale. La valeur de cet attribut "*,*" indique que les proportions de partage sont égales - 50 % chacune. Si vous spécifiez, par exemple, « 20%,* », alors seulement 20 % seront attribués à la première image, et le reste de l'espace sera attribué à la seconde. L'utilisateur peut modifier ces proportions en faisant glisser les bordures de. les frames avec la souris, mais il est possible d'interdire cette action. Pour ce faire, vous devez ajouter l'attribut noresize à la balise d'un cadre spécifique. Vous pouvez également spécifier la taille des marges verticales et horizontales du cadre adjacent (attributs marginwidth et marginheight) : Il est possible de définir des règles de comportement pour les barres de défilement de chaque image séparément. Cela se fait à l'aide de l'attribut scrolling, qui peut contenir l'une des trois valeurs prédéfinies. Si vous spécifiez scrolling="auto", alors les barres de défilement apparaîtront lorsque le contenu du cadre ne rentre pas dans ses limites. Si « oui », les rayures seront présentes en permanence, qu'elles soient ou non nécessaires. Si « non », cela signifie que les barres de défilement sont désactivées pour ce cadre.

Sur la base des informations présentées dans les deux étapes précédentes, vous devez créer un code HTML plus adapté à la résolution de votre problème. Après cela, il ne reste plus qu'à l'insérer dans le code source de la page. Pour ce faire, vous pouvez utiliser l'éditeur de pages de votre système de gestion de site - ouvrez-le page souhaitée, passez en mode édition de code html et collez votre code à l'endroit souhaité sur la page. Pouvez-vous télécharger le fichier ? code source page du gestionnaire de fichiers pour la gestion de l'hébergement ou le système de gestion de contenu, ouvrez-la dans un éditeur de texte et collez-y le code. Ensuite, utilisez la même méthode pour télécharger le code modifié sur le serveur.

Créer un document HTML basé sur une structure de cadre est assez simple. Cette page sera affichée comme boîtes de dialogue, dont chacun charge un document distinct.

Vous aurez besoin

Instructions

La structure du cadre de document signifie que chaque page se compose de zones distinctes, chacune affichant un fichier HTML. Alors d’abord, ouvrez un éditeur de texte tel que le Bloc-notes et créez le corps du document à l’aide des balises BODY et /BODY.

Un document cadre est entouré de deux balises FRAMESET et /FRAMESET. C'est ici que se trouvera une sorte de tableau, dans chaque colonne duquel vous pourrez télécharger un document séparé. À l'aide des deux propriétés COLS et ROWS, vous pouvez définir la taille d'une colonne et d'une ligne en pixels ou en pourcentage de la taille de la fenêtre du navigateur (si vous saisissez un astérisque au lieu de chiffres, alors tout sera utilisé espace libre navigateur).

Pour concevoir la structure, utilisez les propriétés suivantes :1) FRAMEBORDER=1 - chaque image a un cadre tridimensionnel ;2) FRAMEBORDER=0 - il n'y aura pas de cadre ;3) FRAMESPACING - la distance entre les images adjacentes en pixels ;4 ) FRAME - /FRAME - définissant le contenu d'un cadre séparé : a) SRC - fichier HTML avec le contenu du cadre ; b) MARGINHEIGHT, MARGINWIDTH - spécifiant le décalage vertical et horizontal par rapport aux limites du cadre en pixels ; c) NORESIZE - l'utilisateur ne peut pas redimensionner le cadre ; d) DÉFILEMENT - s'il est nécessaire (OUI) ou non (NON) de créer des barres de défilement pour visualiser le cadre, la valeur AUTO ne les crée que si nécessaire ;

Une fenêtre de navigateur peut être divisée en parties appelées frames, parfois frames ; Vous pouvez également les appeler des seuils. Dans chacune de ces parties de la fenêtre du navigateur, c'est-à-dire frame, un document HTML séparé peut être chargé. Regardons un exemple de fenêtre de navigateur comportant trois cadres.

Dans ce cas, pour plus de clarté, chaque image est chargée d'un simple document HTML indiquant le numéro de l'image et le nom du fichier stockant son contenu. Si un document réel est chargé dans le cadre, qui ne rentre pas complètement dedans, alors le cadre (attention, pas la fenêtre entière !) aura des barres de défilement verticales et/ou horizontales selon que le contenu ne rentre pas horizontalement et/ou ou documenter verticalement.
Par exemple, la conception et la structure de votre site sont telles qu'il y a les mêmes éléments répétés sur chaque page du site : le titre, le menu de navigation, l'adresse en fin de page, ou quelques autres éléments similaires. Seul le contenu des rubriques change. Ensuite, les pages peuvent être divisées en parties afin que les parties immuables soient placées dans des cadres séparés, et un autre cadre peut être alloué afin que le contenu y soit chargé. la rubrique souhaitée après avoir cliqué sur le lien approprié, par exemple depuis un menu.
Cela permet de gagner en vitesse de chargement, puisque des parties identiques des pages du site ne sont pas rechargées, mais sont simplement affichées en permanence dans les cadres qui leur sont alloués.

Création d'un élément de structure de portique FRAMESET

La structure de la disposition des fenêtres est stockée dans un document HTML distinct, appelé document encadré. La structure du cadre est formée à l'aide d'un élément FRAMESET spécial. Un document ordinaire comporte une section HEAD et une section BODY, tandis que dans un document comportant des frames, la section BODY est remplacée par une description de la structure des frames, c'est-à-dire Section CADRE.
Un élément NOFRAME peut être ajouté à la section FRAMESET avec un contenu alternatif à afficher dans les navigateurs qui ne prennent pas en charge les frames, ou dans les navigateurs qui ne prennent pas en charge les frames. De tels navigateurs ne comprendront tout simplement pas les structures FRAMESET et NOFRAME, mais afficheront le texte placé à l'intérieur.

Document simple avec cadres</ТIТLЕ> </span> </HEAD> <FRAМESET > <span>...description de la structure du cadre...</span> <NOFRAМES> <span>Contenu alternatif pour les navigateurs qui ne prennent pas en charge les frames</span> </NOFRAМES> </FRAМESET> </HТМL> <p>Notez que la section BODY est entièrement absente du document et que l'élément NOFRAMES est contenu dans la section FRAMESET. <br>La structure du cadre elle-même est formée en divisant la fenêtre du navigateur en parties - lignes et colonnes ; Dans une certaine mesure, cela ne semble pas créer de tableaux. Pour ce faire, l'élément FRAMESET possède les attributs cols et rows, qui spécifient respectivement la division en colonnes et en lignes. <br>Les unités de mesure dans lesquelles la taille des images peut être définie sont, comme d'habitude, les pixels et les pourcentages. Il existe également la possibilité de définir la taille dans une unité de mesure nouvelle pour nous, que l'on peut grossièrement appeler une « partie » de la fenêtre. Les valeurs des attributs cols et rows sont précisées en listant les tailles des zones correspondantes, séparées par des virgules. Peut être combiné <a href="https://pzik.ru/fr/sposoby-vklyucheniya-bluetooth-na-raznyh-versiyah-windows-kak-vklyuchit/">différentes manières</a> missions. Examinons quelques exemples, basés sur l'hypothèse que la taille de la fenêtre du navigateur est de 800 x 600 pixels.</p> <FRAМESET rows= "50%, 50%"> </FRAМESET> <p>Ce code divisera la fenêtre horizontalement en deux cadres (lignes) de hauteur égale. Si vous définissez l'attribut cols="50%, 50%", vous obtiendrez deux colonnes de même largeur.</p> <span><FRAМESET cols= "120, 400. *"> </span> <span>. . . continuer à définir la structure du cadre. . .</span> </FRAМESET> <p>Avec ce code, nous obtenons trois colonnes de cadres : celle de gauche fait 120 pixels de large, celle du milieu fait 400 pixels de large, et la troisième colonne contient tout ce qui reste des deux premières colonnes dans l'attribut cette valeur est indiquée par le ; astérisque « * ».</p> <FRAМESET cols= "1*, 4*"> <span>. . . continuer à définir la structure du cadre. . .</span> </FRAМESET> <p>Ce code créera deux colonnes de cadre. La largeur du premier est considérée comme une (elle est notée 1 * ou simplement *), la largeur du second est quatre fois plus grande. Ainsi, la largeur du premier sera de 20 %, et la largeur du second de 80 % de la largeur totale de la fenêtre du navigateur.</p> <span><FRAМESET cols= "100, 40%, *"> </span> <span>. . . continuer à définir la structure du cadre...</span> </FRAМESET> <p>La mesure ci-dessus combine les trois méthodes de spécification des dimensions. La largeur de la première colonne sera de 100 pixels, la seconde se verra attribuer 40 % de la largeur restante (800 - 100 = 700) et la troisième sera tout ce qui n'est pas occupé par les première et deuxième colonnes. <br>Une section FRAMESET peut contenir des sections FRAMESET imbriquées, vous permettant de créer une structure de cadre assez complexe. Disons que nous devons diviser la fenêtre en 4 cadres comme suit :</p> <p><img src='https://i1.wp.com/samsebewebmaster.ru/wp-content/uploads/2016/06/Fr-1.jpg' align="center" width="100%" loading=lazy loading=lazy></p> <p>Vous devez d’abord organiser 2 colonnes comme ceci :</p> cols= "100, * " <p>Divisez ensuite la deuxième colonne en trois lignes comme ceci :</p> lignes="80, *, 30" <p>Un cadre distinct, ou plutôt sa description, est spécifié par l'élément FRAME et ses attributs : nous en parlerons un peu plus tard. Revenons aux éléments FRAMESET imbriqués. Examinons un exemple de code qui crée une structure de cadre comme celle-ci :</p> <FRAМESET cols= "100, * "> <span> <FRAМE name= "framel" src= "framel.html"> </span> <span> <FRAМESET rows= "80, *, 30"> </span> <span> <FRAМE name= "frame2" src= "frame2.html"> </span> <span> <FRAМE name= "frame3" src= "frame3.html"> </span> <span> <FRAМE name= "frame4" src= "frame4.html"> </span> </FRAМESET> </FRAМESET> <p>Il semble que nous ayons compris comment une fenêtre est divisée en cadres. Lors de la création de cadres, vous pouvez vous assurer que la bordure entre les cadres n'est pas visible. Comme vous l'avez probablement déjà deviné, cela se fait à l'aide de l'attribut border ; sa valeur doit être nulle. Mais le fait est que pour les frames, cet attribut n'est pas perçu par le navigateur <a href="https://pzik.ru/fr/problemy-sberbank-ast-pri-dobavlenii-ne-vidit-sberbank-ast-kak/">Internet Explorer</a>, mais est pris en charge par le navigateur Netscape Navigator. Pour Internet Explorer, la bordure entre les images est spécifiée par l'attribut frameborder, qui n'est pas pris en charge par le navigateur Netscape Navigator. Il s'avère qu'il faut demander <a href="https://pzik.ru/fr/pokazat-odinakovye-znacheniya-v-excel-kak-v-eksele-vydelit-povtoryayushchiesya/">mêmes valeurs</a> pour les deux attributs, afin que les deux navigateurs perçoivent le code HTML de la même manière et que l'épaisseur des bordures entre les cadres soit la même. <br>L'épaisseur des bordures ou, en d'autres termes, la distance entre les images peut également être ajustée à l'aide de l'attribut framepacing dont la valeur est spécifiée en pixels. Tous les attributs de l'élément FRAMESET sont affichés dans le tableau.</p> <h2>Attributs des éléments <FRAMESEТ></h2> <table cellspacing="1" cellpadding="15"><tbody><tr><td bgcolor="#E7E7E7" width="20%"> <h3>Attribut</h3> </td> <td bgcolor="#E7E7E7" width="60%"> <h3>Description</h3> </td> <td bgcolor="#E7E7E7" width="20%"> <h3>Exemple</h3> </td> </tr></tbody></table><table cellspacing="1" cellpadding="15"><tbody><tr><td bgcolor="#E7E7E7" width="20%">lignes</td> <td bgcolor="#E7E7E7" width="60%">Définit le nombre et la taille des cadres horizontaux (cadres de lignes) dans la fenêtre du navigateur. La valeur est une liste de tailles de trame séparées par des virgules. Méthodes de définition des dimensions : <p>a) en pourcentage de la taille <a href="https://pzik.ru/fr/specifichnoi-dlya-okna-programmy-microsoft-excel-yavlyaetsya-elementy-okna/">zone de travail</a> fenêtre du navigateur par exemple : "30%, 30%, 40%" ;</p> <p>b) sous la forme du signe « * » (astérisque), indiquant que le cadre occupe tout l'espace libre de la fenêtre du navigateur qui n'est pas occupé par d'autres cadres de tailles explicitement spécifiées, par exemple, l'astérisque dans l'entrée « 25 %, 25%, *» équivaut à 50%;</p> <p>c) en pixels par exemple : "75, *" .</p> <p>Les trois méthodes peuvent être combinées.</p> </td> <td bgcolor="#E7E7E7" width="20%">lignes = "25 %, 25 %, *"</td> </tr><tr><td bgcolor="#E7E7E7" width="20%">cols</td> <td bgcolor="#E7E7E7" width="60%">Détermine le nombre et la taille des cadres verticaux (cadres de colonnes) dans la fenêtre du navigateur. Comme valeur <br>une liste de tailles de trame séparées par des virgules est spécifiée. Les dimensions sont définies de la même manière que dans le paramètre ROWS précédent.</td> <td bgcolor="#E7E7E7" width="20%">cols= "265, *"</td> </tr><tr><td bgcolor="#E7E7E7" width="20%">frontière</td> <td bgcolor="#E7E7E7" width="60%">Spécifie la largeur des bordures du cadre en pixels. <a href="https://pzik.ru/fr/pochemu-smartfon-ne-prinimaet-mms-kak-nastroit-gadzhet-pod-upravleniem/">Ce paramètre</a> Fonctionne uniquement dans les navigateurs Netscape.</td> <td bgcolor="#E7E7E7" width="20%">Bordure="0"</td> </tr><tr><td bgcolor="#E7E7E7" width="20%">bordure de cadre</td> <td bgcolor="#E7E7E7" width="60%">Ce paramètre est valide uniquement dans les navigateurs Internet Explorer et détermine la présence de frames pour les frames contenues dans l'élément FRAMESET. Valeurs possibles : Oui, cadres d'affichage ; Non ou 0 n'affichent pas les images.</td> <td bgcolor="#E7E7E7" width="20%">Bordure du cadre="0"</td> </tr><tr><td bgcolor="#E7E7E7" width="20%">espacement des images</td> <td bgcolor="#E7E7E7" width="60%">Définit la distance (appelée « zone grise ») entre les images en pixels. Cette option est également requise pour créer des cadres sans bordure.</td> <td bgcolor="#E7E7E7" width="20%">espacement d'images = "0"</td> </tr></tbody></table><p>Revenons maintenant à l'élément FRAME, qui décrit un seul cadre dans l'ensemble de la structure. Un paramètre obligatoire est l'attribut src, qui spécifie l'URL HTML du document ou de l'image à afficher dans ce cadre. Il est également préférable de donner un nom au cadre en utilisant l'attribut name. Cela vous permettra d'utiliser ce nom comme valeur de l'attribut cible de l'élément A et de contrôler dans quel cadre le lien doit se charger. Les noms de cadres ne peuvent pas commencer par des chiffres ; seules les lettres de l'alphabet latin (az, AZ) sont autorisées comme caractères initiaux.</p> <p>Lorsqu'une structure de frame ne définit pas de frontière entre les frames, leurs contenus peuvent être trop étroitement adjacents les uns aux autres, ce qui ne sera pas très joli. Si vous souhaitez étendre le contenu des cadres sans toutefois inclure l'affichage des limites entre eux, cela peut être fait en définissant des retraits à l'intérieur des cadres. La taille de ces retraits est définie en pixels et par paires : pour les retraits en haut et en bas avec l'attribut marginheight, <br>et pour les retraits à droite et à gauche avec l'attribut marginwidth. Ensuite, la distance entre le contenu des trames adjacentes sera égale à la somme des retraits correspondants de ces trames.</p> <p>Le fait qu'un cadre doit afficher une bordure autour d'un cadre particulier est déterminé par son attribut frameborder. La valeur oui (ou 1) indique qu'il ne doit pas y avoir de bordure, la valeur non (ou 0) indique qu'il ne doit pas y avoir de bordure. <br>L'utilisateur peut redimensionner les cadres créés par le document HTML. Pour cela, il suffit de déplacer le curseur de la souris sur le bord des cadres (peu importe que ces bords soient visibles ou non) et d'utiliser le standard <a href="https://pzik.ru/fr/hacking-android-mobile-operating-systems/">système opérateur</a> moyen de redimensionner la fenêtre. <br>DANS <a href="https://pzik.ru/fr/kak-izmenit-skorost-peremeshcheniya-ukazatelya-myshi-po-ekranu-kak/">Curseur Windows</a> Le bouton de la souris apparaîtra sous la forme d’une flèche noire à deux pointes. En cliquant <a href="https://pzik.ru/fr/nazhat-levuyu-knopku-myshi-na-klaviature-samye-poleznye/">bouton gauche</a> souris, vous pouvez déplacer la bordure de la fenêtre. Vous pouvez de la même manière modifier la taille du cadre, puisqu’un cadre est aussi une fenêtre. Si vous avez calculé les tailles de vos cadres et que vous ne souhaitez pas que l'utilisateur les modifie, définissez l'attribut noresize. De ce fait, le redimensionnement sera interdit. <br>Comme nous l'avons dit précédemment, des barres de défilement apparaissent sur un cadre si son contenu ne rentre pas complètement dans ses limites spécifiées. La présence de barres de défilement est contrôlée par l'attribut scrolling. Les trois valeurs autorisées sont oui, non et auto. <br>La valeur auto fait apparaître automatiquement les barres de défilement dans les cas où elles sont vraiment nécessaires. Si le contenu est quand même visible, il n'y a pas de barre de défilement ; si une partie du contenu ne rentre pas, la barre de défilement requise apparaît. <br>La valeur yes active les deux barres de défilement, qu'elles soient nécessaires ou non. Parfois, cela n’a pas l’air très joli. <br>La valeur no empêche l'affichage des barres de défilement. Soyez prudent avec cette valeur car la spécifier peut empêcher l'utilisateur de voir l'intégralité du contenu du cadre lorsqu'il ne rentre pas complètement dans le cadre. Tous les attributs de l'élément FRAME sont affichés dans le tableau.</p> <h2>Attributs des éléments <FRAME></h2> <table cellspacing="1" cellpadding="15"><tbody><tr><td bgcolor="#E7E7E7" width="20%"> <h3>Attribut</h3> </td> <td bgcolor="#E7E7E7" width="60%"> <h3>Description</h3> </td> <td bgcolor="#E7E7E7" width="20%"> <h3>Exemple</h3> </td> </tr></tbody></table><table cellspacing="1" cellpadding="15"><tbody><tr><td bgcolor="#E7E7E7" width="20%">src</td> <td bgcolor="#E7E7E7" width="60%">Paramètre obligatoire. Spécifie l'adresse HTL (URL) <br>fichier affiché dans ce cadre</td> <td bgcolor="#E7E7E7" width="20%">src="frame2.html"</td> </tr><tr><td bgcolor="#E7E7E7" width="20%">nom</td> <td bgcolor="#E7E7E7" width="60%">Définit le nom de ce cadre, qui sera utilisé ultérieurement pour y faire référence à partir d'autres documents en utilisant l'attribut target (voir élément A). La valeur doit être n'importe quel nom sans espaces en utilisant <a href="https://pzik.ru/fr/pridumat-parol-iz-8-simvolov-i-latinskie-kak-sostavit-nadezhnyi/">caractères latins</a> et des chiffres <br>(les caractères initiaux ne peuvent être que des lettres de l'alphabet latin : a-z, A-Z). Le nom ne doit pas commencer par des chiffres et <a href="https://pzik.ru/fr/chto-takoe-url-adres-i-kak-s-nim-rabotat-chto-takoe-uri-url-urn-i-chem-oni/">caractères spéciaux</a>. Les noms de trames réservées commencent par un trait de soulignement.</td> <td bgcolor="#E7E7E7" width="20%">nom="menu1"</td> </tr><tr><td bgcolor="#E7E7E7" width="20%">largeur de marge</td> <td bgcolor="#E7E7E7" width="60%">Spécifie la largeur (en pixels) des marges gauche et droite du cadre. Si le paramètre n'est pas précisé, le navigateur déterminera automatiquement <a href="https://pzik.ru/fr/fail-podkachki-windows-7-optimalnyi-razmer-optimalnyi-razmer-faila/">taille optimale</a>échancrure.</td> <td bgcolor="#E7E7E7" width="20%">margelargeur="0"</td> </tr><tr><td bgcolor="#E7E7E7" width="20%">hauteur de la marge</td> <td bgcolor="#E7E7E7" width="60%">Spécifie la largeur (en pixels) des marges supérieure et inférieure du cadre. Si le paramètre n'est pas spécifié, le navigateur déterminera automatiquement la taille d'indentation optimale.</td> <td bgcolor="#E7E7E7" width="20%">hauteur de marge="0"</td> </tr><tr><td bgcolor="#E7E7E7" width="20%">défilement</td> <td bgcolor="#E7E7E7" width="60%">Détermine si le contenu du cadre comporte des barres de défilement. Valeurs possibles : <br>oui — afficher les barres de défilement ; <br>non : ne pas afficher les barres de défilement ; <br>auto - afficher les barres de défilement si nécessaire (si le document spécifié dans le paramètre SRC ne rentre pas dans le cadre)</td> <td bgcolor="#E7E7E7" width="20%">défilement = "auto"</td> </tr><tr><td bgcolor="#E7E7E7" width="20%">noredimensionner</td> <td bgcolor="#E7E7E7" width="60%">Ne permet pas le redimensionnement du cadre. Ce paramètre est un indicateur et ne nécessite pas de valeur.</td> <td bgcolor="#E7E7E7" width="20%">noredimensionner</td> </tr><tr><td bgcolor="#E7E7E7" width="20%">bordure de cadre</td> <td bgcolor="#E7E7E7" width="60%">Détermine si un cadre a des bordures. Valeurs possibles : <br>oui ou 1 — cadres d'affichage ; <br>no ou 0 : n'affiche pas les images.</td> <td bgcolor="#E7E7E7" width="20%">frameborder= "0"</td> </tr></tbody></table> <p>Les frames sont des éléments HTML qui vous permettent de diviser une fenêtre de navigateur Web en plusieurs fenêtres indépendantes, chacune pouvant charger un document HTML distinct. Chacune de ces fenêtres (frame) peut avoir ses propres barres de défilement et fonctionner indépendamment des autres fenêtres indépendantes ou, au contraire, contrôler leur contenu. Ils peuvent être utilisés pour organiser un menu qui se trouve constamment dans une fenêtre, tandis que les informations elles-mêmes se trouvent dans une autre fenêtre. Les utilisateurs peuvent accéder au menu à tout moment et n'ont pas besoin de revenir à la page précédente pour sélectionner un autre élément de menu. L'utilisation de cadres vous permet d'« épingler » des images ou d'autres éléments d'interface statiques dans la fenêtre du navigateur pendant que le reste de la page défile dans le cadre. <br>Cependant, il convient de noter qu'aujourd'hui, les cadres sont considérés comme un outil obsolète et que les sites dotés de cadres sont désormais considérés comme indignes, car les webmasters professionnels n'utilisent jamais de cadres dans leurs projets. Il y a un certain nombre de choses tristes associées aux cadres. <a href="https://pzik.ru/fr/pokemon-go-kak-zahvatit-gym-i-ne-poteryat-zdorove-pokemon-go-ne-rabotaet-reshaem/">problèmes connus</a>. Ils confondent les moteurs de recherche, par exemple, car les pages qui contiennent le contenu ne renvoient pas à d’autres documents. Si vous souhaitez recevoir des visiteurs de <a href="https://pzik.ru/fr/kakaya-samaya-luchshaya-poiskovaya-sistema-poiskovye-sistemy-rossii-i-lidiruyushchie/">moteurs de recherche</a>, oubliez les cadres. Il est impossible pour un utilisateur de placer une page qu'il aime dans la section des favoris du navigateur, car les cadres masquent l'adresse de la page sur laquelle il se trouve et affichent toujours uniquement l'adresse du site Web. Pour cette raison, ils créent des problèmes pour les navigateurs lors du suivi de l'historique et ne sont pas non plus très adaptés aux <a href="https://pzik.ru/fr/polnaya-nastroika-faila-podkachki-windows-fail-podkachki-i-pravilnye-razmery-dlya/">différentes tailles</a>écrans et appareils mobiles. <br>Malgré le fait que les projets avec frames soient de moins en moins courants sur le World Wide Web, <a href="https://pzik.ru/fr/kursy-html-i-css-s-nulya-luchshie-resursy-dlya-izucheniya-html-i-css-ya/">apprendre le HTML</a> serait incomplet sans aborder le sujet des cadres. Les cadres, outre leurs inconvénients, présentent également certains avantages qui ne nous permettent pas de considérer cette technologie comme peu prometteuse.</p> <h2>Création de cadres</h2> <p>La structure d'un document HTML avec des cadres est très similaire en apparence au format d'un document HTML classique. Comme dans un document HTML classique, tout le code est placé entre des balises appariées <b><html> </b> Et <b></html> </b>, et dans le conteneur <b><head> </b> les en-têtes sont situés. La principale différence entre un document avec des cadres et un document HTML classique est qu'un document avec des cadres au lieu d'une balise <b><body> </b> la balise associée est appliquée <b><frameset> </b>(du jeu de cadres anglais - un ensemble de cadres). <br>L'exemple suivant montre la structure d'un document HTML avec des frames :</p> <h3>Exemple : structure d'un document HTML avec des cadres</h3> <ul><li>Essayez-le vous-même »</li> </ul><table style="border-collapse:collapse;"><tr><td style="border-bottom: 4px solid silver;background-color:blue;color: white;" colspan="2">cadre_top</td> </tr><tr><td style="border-right: 4px solid silver;width: 20%;background-color:green;color: white;">cadre_gauche</td> <td style="width: 80%;background-color:lime;color: white;">frame_right</td> </tr></table><p> <!DOCTYPE html> <html><br><head><br><meta charset="UTF-8"> <title>Document avec cadres

Dans l'exemple ci-dessus, la page contient trois zones, chacune étant initialement chargée avec les documents HTML frame_top.html, frame_left.html et frame_right.html. En plus des documents HTML, un cadre peut également contenir des graphiques. Pour ce faire, vous devez préciser l'adresse de l'image correspondante dans l'attribut src, Par exemple src="image.gif". Veuillez noter que l'élément utilisé sans balise de fermeture.
À l'intérieur du conteneur ne peut contenir que des balises ou autre ensemble de cadres couverts par des balises Et .
Étiqueter possède les attributs suivants :

  • lignes— décrit comment diviser une page en lignes :
  • cols— décrit comment une page est divisée en colonnes :
Les zones résultant de ce fractionnement de page seront des frames. L'absence de ces attributs définit un seul cadre qui occupera toute la fenêtre du navigateur.

Au sens des attributs lignes Et cols Il est nécessaire d'indiquer non pas le nombre de lignes ou de colonnes, mais la largeur et la hauteur des cadres. Toutes les valeurs de la liste sont séparées par des virgules. Les dimensions peuvent être spécifiées en unités absolues (pixels) ou en pourcentages :

  • cols="20%, 80%"— la fenêtre du navigateur est divisée en deux colonnes à l'aide de l'attribut cols, la colonne de gauche occupe 20 % et la droite 80 % de la fenêtre du navigateur.
  • lignes="100, *" La fenêtre du navigateur est divisée en deux fenêtres horizontales à l'aide de l'attribut lignes, la fenêtre du haut occupe 100 pixels et la fenêtre du bas occupe l'espace restant spécifié par le symbole astérisque.

Comme on peut le voir de cet exemple, conteneur avec attribut lignes crée d'abord deux cadres horizontaux et remplace le deuxième cadre par un autre qui divise le cadre horizontal inférieur en deux colonnes à l'aide de l'attribut cols, la colonne de gauche occupe 20 % et la droite 80 % de la fenêtre du navigateur.
Si le navigateur ne prend pas en charge les frames, la fenêtre affichera le texte situé entre les balises </b> Et <b> . Tout entre les balises </b> Et <b> , est ignoré par les navigateurs prenant en charge les frames. Ainsi, le développeur doit écrire du code qui duplique le contenu des frames par d'autres moyens, et placer ce code dans un conteneur. </b>, alors tous les utilisateurs peuvent voir sa page Web. <br>Comme déjà indiqué, une balise non appariée est utilisée pour insérer un cadre distinct dans un document <b><frame> </b>. Attribut <b>src</b> spécifie le document qui doit être affiché à l'intérieur de ce cadre, par exemple : <frame src="frame_top.html">. Si attribut <b>src</b> manquant, un cadre vide s'affiche.</p> <h2>Bordures ou espace entre les cadres</h2> <p>Par défaut, le navigateur affiche une bordure grise, généralement en 3D, entre les cadres, que les visiteurs peuvent utiliser pour ajuster la taille du cadre. <br>La bordure du cadre peut être manipulée comme n'importe quel autre élément du cadre. Il existe plusieurs attributs d'élément pour cela <b><frameset> </b>, vous permettant de personnaliser les bordures des cadres. L'épaisseur de la ligne de bordure est déterminée par l'attribut <b>frontière</b>. La valeur d'épaisseur de bordure par défaut est cinq. <br>Pour masquer la bordure d'un cadre, vous devez soit définir la valeur de largeur de bordure à zéro, soit définir la valeur "no" ou "0" pour l'attribut <b>bordure de cadre</b>. Attribut <b>bordure de cadre</b> ne peut prendre que deux sens opposés. Si la valeur de l'attribut <b>bordure de cadre</b> est égal à « oui » ou « 1 », alors la bordure du cadre sera affichée, et si « 0 » ou « non », alors non. Veuillez noter que les valeurs d'attribut <b>bordure de cadre</b> varier pour <a href="https://pzik.ru/fr/kak-dobavit-stranicu-v-vizualnye-zakladki-yandeks-dobavlenie/">différents navigateurs</a>. Pour résoudre ce problème, utilisez l'attribut deux fois <b>bordure de cadre</b>, et pour certains navigateurs, vous devez également ajouter l'attribut <b>espacement des images</b> avec la valeur "0":</p><p> <frameset frameborder="0" framespacing="0" frameborder="no" border="0"> </p><p>Dans l'exemple suivant, nous supprimons la bordure entre les images :</p> <h3>Exemple : Supprimer la bordure entre les images</h3> <ul><li>Essayez-le vous-même »</li> </ul><table><tr><td style="width: 10px;background-color:green;color: white;">cadre_gauche</td> <td style="width: 90%;background-color:lime;color: white;">frame_right</td> </tr></table><p> <!DOCTYPE html> <html><br><head><br><meta charset="UTF-8"> <title>Cadres sans frontières</title> </head> <frameset cols="100,*" frameborder="0" framespacing="0" frameborder="no" border="0"> <frame src="frame_left.html" name=" frame_left" > <frame src="frame_right.html" name="frame_right" > </frameset> </html></p> <p>Si vous supprimez la bordure entre les cadres, les visiteurs ne pourront pas redimensionner le cadre dans le navigateur. Vous pouvez également empêcher le redimensionnement du cadre en préservant les bordures à l'aide de l'attribut <b>noredimensionner</b>:</p><p> <frame src="frame_left.html" noresize> </p><p>Utilisation de l'attribut <b>couleur de la bordure</b> Vous pouvez changer la couleur de la bordure du cadre, il vous suffit de préciser le code ou le nom de couleur réservé correspondant. <br>Vous trouverez ci-dessous un exemple de page HTML contenant les attributs de contrôle de bordure de cadre décrits ci-dessus : la couleur de la bordure est rouge, la taille du cadre supérieur ne peut pas être modifiée :</p> <h3>Exemple : Contrôle des bordures de cadre</h3> <ul><li>Essayez-le vous-même »</li> </ul><table style="border-collapse:collapse;"><tr><td style="border-bottom: 4px solid red;background-color:blue;color: white;" colspan="2">cadre_top</td> </tr><tr><td style="border-right: 4px solid red;width: 20%;background-color:green;color: white;">cadre_gauche</td> <td style="width: 80%;background-color:lime;color: white;">frame_right</td> </tr></table><p> <!DOCTYPE html> <html><br><head><br><meta charset="UTF-8"> <title>Gestion des bordures de cadre</title> </head> <frameset rows="150, *" border="10" bordercolor="red" frameborder="1" frameborder="yes"> <frame src="frame_top.html" noresize> <frameset cols="20%, 80%"> <frame src="frame_left.html"> <frame src="frame_right.html"> </frameset> </frameset> </html></p> <p>Si vous souhaitez positionner la page affichée à l'intérieur du cadre plus près de ses bordures, ou à l'inverse l'éloigner, modifiez les attributs <b>hauteur de la marge</b> Et <b>largeur de marge</b>étiqueter <b><frame> </b>. Attribut <b>hauteur de la marge</b> définit le remplissage entre le contenu du cadre et ses bordures supérieure et inférieure. Syntaxe:</p><p> <frame marginheight="число"> </p><p>Attribut <b>largeur de marge</b> définit le remplissage entre le contenu du cadre et ses bordures droite et gauche. Syntaxe:</p><p> <frame marginwidth="число"> </p><p>Cette ligne html positionne par exemple la page affichée près de la bordure du cadre :</p> <p>Si la page affiche une barre de défilement dont vous ne souhaitez pas, vous pouvez résoudre le problème en spécifiant l'attribut <b>défilement</b>= "non" dans la balise <b><frame> </b>. Mais gardez à l’esprit que si le cadre n’est pas assez grand pour afficher l’intégralité du contenu de la page, alors le visiteur n’aura aucun moyen de faire défiler la page affichée.</p> <h2>Liens à l'intérieur des cadres</h2> <p>Suivre un lien dans un document HTML standard se fait comme suit : cliquez sur le lien et le document actuel est remplacé par un nouveau dans la fenêtre actuelle ou dans une nouvelle fenêtre du navigateur. Lors de l'utilisation de cadres, le schéma de chargement des documents HTML diffère de celui habituel, et la principale différence réside dans la possibilité de charger un document HTML dans un cadre à partir d'un autre cadre. <br>Pour charger un document dans un cadre spécifique, utilisez l'attribut <b>cible</b>étiqueter <b><a> </b>. En tant que valeur d'attribut <b>cible</b> le nom du cadre dans lequel le document spécifié par l'attribut sera chargé est utilisé <b>nom</b>étiqueter <b><frame> </b>. Il convient également de noter que le nom du cadre doit commencer par un chiffre ou une lettre latine. Les noms suivants sont utilisés comme noms réservés :</p> <p>Pour les liens externes, vous devez définir l'attribut target sur _top ou _blank pour garantir que les projets tiers n'apparaissent pas dans vos cadres, mais remplissent plutôt toute la fenêtre du navigateur.</p> <p>L'exemple suivant montre un document HTML dans lequel le cadre de droite charge une page à partir d'un lien placé dans le cadre supérieur. Lien vers le document qui s'ouvrira dans le cadre de droite :</p><p> <a href="http://www.google.com" target="frame_right">Google</a> </p><p>Le cadre de droite reçoit un nom <i>frame_right</i>:</p><p> <frame src="frame_right.html" name="frame_right"> </p><p>Pour charger un document dans un cadre spécifié, utilisez la construction <i>cible="frame_right"</i>, comme le montre l'exemple :</p> <h3>Exemple : Lien vers un autre cadre</h3> <ul><li>Essayez-le vous-même »</li> </ul><p> <!DOCTYPE html> <html><br><head><br><meta charset="UTF-8"> <title>Lien vers un autre cadre</title> </head> <frameset rows="100, *"> <frame src="frame_topic.html"> <frameset cols="20%, 80%"> <frame src="frame_left.html"> <frame src="frame_right.html" name="frame_right"> </frameset> <noframes> <p>Votre navigateur n'affiche pas les frames</p>

Cadres flottants

Élément

Vous avez sûrement entendu parler plus d'une fois d'un concept tel que les cadres. Vous pouvez en lire davantage dans n'importe quel manuel HTML, ainsi que dans des ressources sur la création de sites Web. Après avoir étudié de nombreux exemples et descriptions, j'ai décidé de tout raconter sur les cadres dans mes propres mots sous une forme très simple. Les avantages, les inconvénients et l'avenir des cadres seront discutés tout en bas de cette page. Alors, que sont les frames en HTML ?

Que sont les cadres en HTML

Cadre(cadre anglais) - une zone indépendante connectable sur une page Web.

Ne vous inquiétez pas, cela semble un peu déroutant. Donnons immédiatement l'exemple le plus simple et tout deviendra alors clair.

Ouvrez l'aide dans n'importe quel programme (il peut s'agir du bloc-notes, d'un programme, d'un navigateur, etc.). Vous verrez presque toujours une aide composée de deux parties (navigation à gauche, contenu à droite). Les parties gauche et droite ne sont que des cadres séparés. Vous trouverez ci-dessous une capture d'écran prise à l'aide du bloc-notes Windows le plus ordinaire :

Fig 1. Utilisation de cadres en utilisant l'aide du bloc-notes comme exemple

Ce que vous voyez est une page Web composée de deux cadres indépendants distincts. Donnons un exemple code HTML un tel cadre de l'aide.

Exemple avec les frames n°1 (faire de l'aide)

Dans le cadre ci-dessus, l'aide discutée ci-dessus ressemblera à ceci :


Fig 2. Cadre d'utilisation des cadres par exemple n°1

Le fractionnement d'une page en zones à l'aide de cadres est très similaire à la mise en page d'un tableau HTML (voir la balise de tableau HTML). Un exemple de code pour une telle page pourrait ressembler à ceci :

<span>Exemple n°1 d'une page html avec des frames</span>
Explication par exemple n°1

Comme vous pouvez le voir dans le code ci-dessus, une page créée à partir de frames est très similaire à une page html ordinaire : il y a une balise html d'ouverture, une section , titre , mais il y a une grande différence. Vous avez probablement remarqué que la balise body, responsable du corps de la page, est manquante. La balise est insérée à la place <frameset>, qui est responsable du corps de la page. Cette balise a deux attributs cols="25%,75%" , ce qui signifie diviser l'ensemble du corps de la page en deux zones verticales dans un rapport de 1:3. La première zone occupera 25% de la largeur de tout l'écran (elle contiendra le premier cadre menu.html), la deuxième zone occupera 75% de la largeur de tout l'écran (elle contiendra le deuxième contenu). cadre html).</p> <p>La dernière balise complètement facultative est <noframes>. Il est nécessaire pour les navigateurs qui ne prennent pas en charge les frames. Si le navigateur ne prend pas en charge les frames, il est recommandé d'en informer poliment l'utilisateur via cette balise.</p> <p>Au fait, veuillez noter que pour le tag <frame>aucune balise de fermeture n'est nécessaire.</p> <p>J'espère que vous avez maintenant une idée sur les cadres. Pour comprendre des exemples plus difficiles, essayons de créer une simple page HTML composée de 4 frames. Ce sera l'exemple n°2.</p> <h2>Exemple avec 4 cadres #2</h2> <p>Cadre par exemple 2 :</p> <p><img src='https://i1.wp.com/zarabotat-na-sajte.ru/uroki-html/img/primer2-frame-karkas.jpg' width="100%" loading=lazy loading=lazy><br>Fig 3. Cadre d'utilisation des cadres par exemple n°2</p> <p>Le code de la page HTML originale avec le cadre sera le suivant :</p> <blockquote><html > <head > <title ><span>Exemple n°2 d'une page html avec des frames</span> <span>Votre navigateur ne prend pas en charge l'affichage des cadres</span>

Code du fichier Top.html

<span>Fichier top.html - en-tête du site</span>

Exemple n°2

Et ici il pourrait y avoir un logo et plus encore :)

Code du fichier Menu.html

<span>Fichier menu.html - menu du site</span>

Code du fichier Content.html

<span>Fichier content.html - contenu du site</span>

Page d'accueil

Contenu du site. Le fichier content.html est maintenant ouvert
C'est l'état initial de notre cadre. Appelons ce fichier "Page maître"

Code du fichier à propos-site.html

<span>Fichier about-site.html - Page sur le site</span>

À propos du site

Page sur le site. Le fichier about-site.html est maintenant ouvert

Code du fichier à propos-autor.html

<span>Fichier about-autor.html - à propos de l'auteur</span>

À propos de l'auteur

À propos de la page de l'auteur. Le fichier about-autor.html est maintenant ouvert

Code du fichier Footer.html

<span>Fichier footer.html - à propos du site</span> Pied de page du site Web. Le fichier footer.html est maintenant ouvert
Explication par exemple n°2

Initialement, la page entière est divisée en trois zones horizontalement dans un rapport de 3:14:3. L'attribut rows="15%,70%,15%" en est responsable. La première frame de notre exemple est l'en-tête (nous l'avons appelé top.html), 15% de l'espace hauteur lui sont alloués. Vient ensuite un grand cadre occupant 70 % de la hauteur. Nous le divisons en deux parties en utilisant cols="25%,75%" dans un rapport de 1:3. À gauche, il y aura un cadre menu.html , à droite content.html . Nous avons spécifiquement nommé le deuxième frame name="main" afin de pouvoir changer de page. Notez que dans le fichier menu.html, chaque lien est associé à un attribut target="main", qui permet aux éléments d'être chargés dans une zone appelée main lorsque vous cliquez sur le lien. Au bas du site se trouve le dernier cadre footer.html.

Si vous implémentez l'exemple n°2, vous devriez obtenir la page HTML suivante dans son état d'origine :


Fig 4. Exemple n°2 - état initial

Lorsque vous accédez à la page à propos du site, la page ressemblera à ceci :


Fig 5. Exemple n°2 - deuxième état


Fig 6. Exemple n°2 - troisième état

Étiqueter

Les attributs facultatifs de cette balise sont width="width" et height="height" , et l'attribut obligatoire est src="frame address" .

Attributs et propriétés des balises

1. Attribut COLS="Paramètres"
Définit le nombre de divisions de page verticales.

2. Attribut ROWS="Paramètres"
Définit le nombre de divisions de page horizontales.

Voyons maintenant comment définir les paramètres de partitionnement.

a) En utilisant le nombre, qui correspondra au nombre de pixels. Par exemple, cols = "100,100,300" définit la page à diviser en trois zones, dont chacune aura une largeur de : 100 pixels, 100 pixels et 300 pixels, respectivement.

b) Utiliser des pourcentages de la largeur/hauteur totale. Dans les exemples évoqués ci-dessus, nous avons utilisé la division en pourcentage, il semble donc inutile de donner un exemple.

c) En utilisant * (astérisque). Par exemple, cols = "2*,3*,100" définit les deux premières zones sur un rapport de 2:3 et la troisième sur une largeur de 100 pixels.

Les trois méthodes peuvent être combinées. Par exemple, cols="2*,100,15%,4*" .

3. Attribut Frameborder="(oui|non)"
Détermine si un cadre a une bordure. Si la réponse est oui, alors le quatrième attribut de bordure suivant est en vigueur.

4. Attribut border="paramètre"
En pixels, border spécifie l'épaisseur de la bordure de la zone du cadre. Par exemple, frameborder = "2" spécifie une zone avec un contour sélectionné de 2 pixels.

5. attribut bordercolor="color"
Spécifie la couleur de la bordure, le cas échéant. La couleur peut être spécifiée soit en mots, soit en code (voir palette de couleurs HTML).

Remarque : Veuillez noter que l'étiquette besoin d'une balise de fermeture .

Attributs et propriétés des balises

1. Attribut src="adresse de l'élément"
L'URL complète de l'adresse de l'élément doit être spécifiée ici en tant que paramètre. Cet attribut est obligatoire. Il vous est déjà familier, parce que... il était présent dans les exemples 1 et 2.

2. Attribut marginwidth="number"
Définit la largeur de l'indentation à l'intérieur du cadre à partir des bordures en pixels. Par exemple, marginwidth="10" définira la marge du contenu à gauche et à droite de la bordure du cadre.

3. Attribut marginhight="number"
Similaire au second avec la seule différence qu'il définit le décalage en hauteur.

4. Attribut Scrolling="(oui|non|auto)"
Définit la possibilité de faire défiler le cadre s'il ne peut pas tenir dans la zone qui lui est allouée. La valeur par défaut est auto (cela signifie créer un défilement si nécessaire).

5. Attribut Noresize
Si cet attribut est défini, il est interdit à l'utilisateur de modifier indépendamment les limites du cadre. Par défaut, cet attribut n'est pas défini et l'utilisateur peut modifier les limites à sa guise.

5. Nom de l'attribut = "titre"
Cet attribut peut être utilisé pour donner un nom au cadre. Ceci est nécessaire pour que d'autres trames puissent accéder à cette trame. L’exemple n°2 traite précisément d’un tel cas.

Note:
Le nom ne doit pas commencer par un trait de soulignement "_".

6. Attributs frameborder, border et bordercolor
Ces trois attributs sont les mêmes que frameset (voir les attributs frameset ci-dessus).

Avantages et inconvénients des cadres

Avantages des cadres

  • La possibilité d'afficher plusieurs pages indépendamment dans une seule fenêtre (exemples 1 et 2 ci-dessus) ;
  • Possibilité de changer de contenu de page sans recharger la page (une seule zone de l'écran change) ;
  • La possibilité de créer de manière flexible une structure de site (en-tête, menu, pied de page, etc. - toutes les informations statiques sont stockées séparément dans des fichiers, ce qui vous permet de modifier rapidement une partie du site) ;
  • L'utilisateur peut modifier lui-même la taille de la fenêtre si l'option noresize n'est pas définie ;

Inconvénients des cadres

  • Les moteurs de recherche indexent mal les sites framed car ils sont incapables d’interpréter les fichiers chargés dans les frames. Le moteur de recherche distingue les pages par leur adresse (URL), et pour les frames, malgré des états différents, l'adresse de la page ne change pas. Ceci est contraire aux règles du moteur de recherche, ce qui signifie que ce n'est pas un fait que le moteur de recherche pourra indexer le site.
  • Il est impossible de mettre un site en favoris dans des frames, car L'URL de la page sera la même. Ainsi, vous ne pouvez conserver que l’état d’origine du cadre.
  • Tous les navigateurs ne prennent pas en charge les frames.

L'avenir des cadres :
De nombreux webmasters ont depuis longtemps commencé à abandonner les frames. Cela est dû aux difficultés de promotion dans les moteurs de recherche. Désormais, tout le monde passe à Ajax comme moyen plus dynamique et moderne d'afficher des informations sur une page du site.

Cher lecteur, nous avons revu les balises document HTML concernant les cadres. Malgré l'avenir incertain de ce domaine, tout webmaster devrait connaître les frames.

ARTICLES CONNEXES