Bonjour, chers lecteurs du site blog. Aujourd'hui, nous allons parler des cadres en langage Html. Il est clair que nous allons commencer par le début, à savoir avec quel type d'animal il s'agit. Nous parlerons également du présent (Frame) et du futur (Iframe) de ces éléments dans le langage de balisage hypertexte. version actuelle et dans le nouveau standard Html 5 avec .

En fin d'article, après une description détaillée du processus de création des inline frames et de leur structure classique en code Html (déjà rarement utilisé), nous aborderons la question de la pertinence de construire un site dessus, ainsi que de discuter les voies possibles leur application dans la période actuelle sur l'exemple de mon blog.

Qu'est-ce que c'est et en quoi Iframe est différent de Frame

Qu'est-ce que c'est? Il s'avère qu'ils peuvent être utilisés non seulement sur des sites Web, mais également dans toutes les applications de programmes, mais diffèrent en ce que la fenêtre d'une page Web ou d'une application sera divisée en plusieurs zones, chacune contenant un document distinct. De plus, ces zones de trame se comportent indépendamment les unes des autres.

L'exemple le plus évident de leur utilisation, que vous avez presque tous rencontré, est probablement les soi-disant fichiers d'aide (aides) que de nombreux programmes installés sur votre ordinateur possèdent.

Le fichier avec le menu d'aide est chargé dans la fenêtre de gauche et le document correspondant à l'élément de menu sélectionné s'affiche dans la fenêtre de droite. Il est à noter qu'une telle structure permet de ne pas recharger le fichier avec le menu dans la fenêtre de gauche lors de l'ouverture d'un nouveau document dans celle de droite. C'est précisément ce que principal avantage de l'utilisation de cadres en html.

En fait, le nom même de ces éléments doit être interprété précisément comme une fenêtre indépendante. À l'aide de cadres, nous avons la possibilité de diviser une grande fenêtre en plusieurs fragments, qui à leur tour peuvent servir de récepteurs pour des documents distincts indépendants les uns des autres (pages, textes, images, vidéos, etc.).

Comment une structure de cadre est-elle créée dans un langage de balisage hypertexte ? Si nous parlons de la norme Html 4.01 (selon la classification), qui est la principale à l'heure actuelle, trois éléments sont utilisés pour cela - Frame, Frameset et Noframes.

Iframe - un cadre intégré dans la norme Html 5

Si nous parlons de la norme Html 5 (notre avenir, dont certains éléments sont déjà pris en charge par de nombreux navigateurs), alors il n'y aura pas de balises Frame, Frameset et Noframes, ainsi que la structure de cadre classique, à la place d'eux il y aura une seule balise Iframe (embedded frame) , dont nous parlerons au début, puis nous porterons toute notre attention sur le schéma classique de la version 4.01, qui est effectivement utilisé maintenant.

Iframe, contrairement au classique, dont il est question ci-dessous, ne nécessite pas le remplacement de la balise Body par des balises Frameset. Ceux. cette balise peut être insérée sur pages régulières, par exemple, à l'intérieur d'un paragraphe ou n'importe où ailleurs. À la base, cet élément est très similaire à la balise Img que nous avons déjà considérée.

Il est en ligne avec un contenu remplaçable car il se comporte exactement comme un élément en ligne, mais à l'intérieur il affiche contenu externe superflu. Il n'y a que quatre éléments de ce type dans le langage Html - Img, Iframe, Object et Embed. Par conséquent, notre héros implique la présence d'un fichier externe qui sera chargé dans la zone, dont la taille est définie à l'aide des attributs de cette balise.

Ce. Une iframe est un élément de chaîne dans lequel un objet externe (comme une vidéo) est chargé. Et pour spécifier le chemin d'accès à ce fichier, qui doit être chargé sur la page, l'attribut spécial Src est utilisé. Mais contrairement à Img, l'élément Iframe est apparié, c'est-à-dire il y a aussi une balise fermante:

À cet exemple montrant la sortie d'une page vidéo Youtube à l'aide d'un Iframe. Afin de limiter la zone du cadre (fenêtre) où il sera chargé fichier externe, les attributs sont fournis Largeur et hauteur, dont les valeurs sont spécifiées en pixels :

Ceux. cette balise crée une zone dans laquelle un objet externe est chargé (peu importe qu'il provienne de votre site ou d'une autre ressource). La largeur et la hauteur de la zone sont définies à l'aide de la largeur et de la hauteur, et le chemin d'accès à cet objet est spécifié dans l'attribut Src.

L'élément Iframe a hérité de tous ces attributs de balises en ligne similaires avec un contenu remplacé (comme l'Img déjà mentionné ci-dessus). Eh bien, il a également pris des attributs des images hspace et vspace, qui vous permettent de définir les retraits des bordures du cadre au texte qui l'entoure.

Il est également significatif que l'alignement du cadre intégré soit effectué exactement de la même manière que nous avons pu le voir lors de l'étude des images en Html - . Toujours le même Aligner, mais pour la balise Iframe avec les valeurs possibles Bas, Haut, Milieu, Gauche et Droite.

Mais cet élément a également pris quelques attributs de la balise Frame de la structure de cadre classique, dont nous parlerons en détail ci-dessous. Ces attributs incluent Name, dont la valeur peut être utilisée comme valeur afin que le document dont vous avez besoin s'ouvre dans la fenêtre de ce cadre lorsque vous cliquez sur le lien (lire plus bas).

Toujours dans l'Iframe, l'attribut Frameborder a migré de la balise Frame, qui n'a que deux valeurs - soit 0 (le cadre autour du cadre n'est pas affiché) ou 1 (le cadre est visible). La valeur par défaut est Frameborder=1, donc pour la supprimer, vous devez écrire Frameborder="0":

L'attribut Scrolling a également été déplacé de Frame à cet élément, qui a une valeur par défaut de Auto - des barres de défilement dans le cadre apparaîtront selon les besoins lorsque le contenu est plus grand que la fenêtre destinée à l'afficher.

Eh bien, les attributs Marginwidth et Marginheight provenaient également de l'élément Frame. Ils seront discutés en détail ci-dessous dans le texte, mais en un mot - ils vous permettent de définir le retrait en largeur et en hauteur des bords du cadre au contenu qui y est placé.

Comme je l'ai déjà mentionné, un exemple clair d'utilisation d'Iframe est :

En insérant l'Iframe directement dans la page Web, vous obtiendrez la sortie de la vidéo de YouTube. Nous concluons que cet élément est un mélange d'éléments en ligne avec un contenu remplaçable et, en fait, de cadres classiques, dont nous parlerons maintenant.

Cadres basés sur les balises Frame et Frameset - leur structure

Ainsi, la création d'une structure de cadre classique commence par ce que vous écrivez dans le code HTML au lieu de la balise Body d'ouverture et de fermeture, qui devrait normalement être présente dans tout document qui remplace son conteneur basé sur des éléments. Cadre.

Le point fondamental est que l'élément Body ne peut pas être utilisé dans ce cas - que ce soit Body (pour un document normal) ou Frameset (lors de la création d'une structure de cadre de document) :

Chaque cadre que nous formons à l'intérieur du cadre principal est créé à l'aide d'un élément séparé Cadre. Cette balise est unique et nous y définissons le chemin vers le document qui devra être chargé dans cette fenêtre.

Le troisième élément que nous n'avons pas encore abordé est Noframes. Il est couplé et vous permet d'écrire du texte à l'intérieur de vous-même, qui sera traité par le navigateur et affiché sur page web uniquement si ce même navigateur (ou autre périphérique d'affichage) ne prend pas en charge les cadres. Cela peut se produire, par exemple, lors de l'utilisation d'un navigateur pour les appareils mobiles.

Habituellement, les Noframes ajoutent non seulement des informations sur la situation actuelle avec l'impossibilité de traiter la structure du cadre, mais ajoutent également la possibilité d'accéder à d'autres pages où vous pouvez continuer à travailler sans les utiliser. Il est difficile de dire autre chose sur lui, alors continuons.

Il s'avère que l'élément Frameset utilisé à la place de la balise Body occupe tout l'espace alloué à la fenêtre d'affichage, et dans cette région, les cadres seront créés à l'aide d'éléments Frame séparés. À cet égard, la question se pose - comment diviser la zone de visualisation entre des fenêtres séparées ou, en d'autres termes, comment définir la taille de chacune d'elles.

Cela se fait en ajoutant les attributs appropriés à l'élément Frameset. Il y a deux d'entre eux - Cols et rangées. Cols définit la division d'une grande fenêtre en cadres ou colonnes verticaux, et Rows vous permet de la diviser en fenêtres ou lignes horizontales.

Création d'une structure basée sur Frameset et ses attributs Cols et Rows

Les valeurs pour Cols et Rows de la balise Html Frameset sont des nombres séparés par des virgules (sans espaces). Ces nombres définissent les proportions des fenêtres que nous voulons obtenir en conséquence. Par conséquent, combien de nombres seront écrits séparés par des virgules dans Cols ou dans Rows, tant de cadres que nous avons et devraient être le résultat.

Par exemple, en utilisant une telle notation, nous obtiendrons trois colonnes verticales qui correspondront en largeur aux proportions 2:5:3.

Puisque nous avons défini les proportions pour trois cadres, nous devrons écrire trois éléments Frame entre la balise Frameset d'ouverture et de fermeture, même sans spécifier d'attributs supplémentaires :

En conséquence, notre structure de cadre, composée de trois fenêtres vides, ressemblera à ceci :

Dans cet exemple, nous définissons les tailles des fenêtres (Frame) à l'aide de pourcentages qui sont tirés de la largeur de la fenêtre (c'est le cas lors de l'utilisation de Cols) ou de sa hauteur (Rows). Lorsque vous modifiez la fenêtre d'affichage, le rapport en pourcentage entre les tailles d'image est conservé. Mais au lieu de pourcentages, vous pouvez également utiliser uniquement des chiffres qui signifieront. Ici aussi, je pense qu'aucune difficulté de compréhension ne devrait surgir.

Mais il existe également une option plutôt inhabituelle dans les désignations de taille, qui ressemble à astérisque "*". De plus, il peut s'agir soit d'un simple "*", soit d'un astérisque précédé d'un chiffre, par exemple "3*". Une chose délicate, très similaire aux pourcentages, ce qui signifie que nous divisons proportionnellement l'espace pour le cadre.

Prenons un exemple. Choisissons maintenant de diviser la fenêtre en lignes horizontales à l'aide de Rows :

Que signifie cette entrée ? L'ensemble de la fenêtre d'affichage à notre disposition verticalement sera divisé en trois lignes. La hauteur de la première ligne sera prise à 200 pixels, la seconde à 500, mais la troisième ligne occupera tout l'espace restant en hauteur, car "*" a été utilisé comme taille.

Remarquablement, la valeur "*" et "1*" signifient la même chose - nous divisons tout l'espace restant par un et donnons cette partie à ce cadre (enfin, c'est-à-dire tout l'espace restant).

Mais regardez ce qui se passe si vous utilisez la valeur "*" avec un nombre à diviser en proportion :

Selon vous, quelles devraient être les dimensions du cadre dans ce cas ? Il est clair que la deuxième ligne aura certainement une hauteur de 100 pixels. Mais comment l'espace de hauteur restant sera-t-il divisé entre la troisième et la première ligne ?

C'est assez simple à compter - il suffit d'ajouter quatre (4 *) à deux (2 *) et de diviser par ce dénominateur (rappelez-vous les fractions du programme scolaire) deux et quatre. Ceux. nous obtenons que la première colonne avec le cadre occupera un tiers de l'espace restant en hauteur, et la troisième colonne occupera les deux tiers. Ou, en d'autres termes, le troisième sera deux fois plus élevé que le premier :

Vous pouvez utiliser les trois méthodes pour dimensionner les fenêtres frame dans un seul attribut, par exemple :

En conséquence, nous obtiendrons la première colonne Frame de 10% de large de la zone disponible, la seconde de 100 pixels et les trois autres auront une largeur dans des proportions de quatre, trois et deux neuvièmes de l'espace restant en largeur. Ça y est, tout est simple et clair.

Si vous souhaitez diviser la fenêtre principale non seulement en cadres horizontaux et verticaux, mais, par exemple, en combinaisons de ceux-ci, vous pouvez utiliser la structure imbriquée des éléments Frameset séparément pour les colonnes et séparément pour les lignes. Par exemple, pour obtenir la structure montrée dans la capture d'écran ci-dessous, il suffit d'utiliser cette construction :

Ceux. d'abord nous séparons avec "frameset cols="20%,80%"" tout espace disponible en deux colonnes verticalement et définissons le contenu de la colonne de droite avec la balise "frame", mais au lieu d'ajouter un élément "frame" pour la colonne de gauche, nous ouvrons un nouveau "frameset rows="10%,*"".

Et avec l'aide de cela, nous divisons la colonne de droite en deux lignes avec des cadres, dont le contenu est défini à l'aide de deux balises "frame", après quoi nous fermons les deux conteneurs "frameset". Tout est simple et logique.

Spécifiez le chemin dans l'attribut Src de l'élément Frame

Mais nous avons tous parlé de l'élément Frameset et de ses attributs Cols et Rows, à l'aide desquels nous formons la structure et définissons leurs tailles. Voyons maintenant comment afficher les bons documents dans les bons cadres et comment configurer l'interaction entre leurs fenêtres.

Alors, comment contrôlons-nous l'apparence des fenêtres que nous créons ? Tout cela est intégré dans les attributs de la balise Frame. Le premier qui mérite d'être mentionné est src. Nous l'avons déjà rencontré dans la balise Img lorsque nous avons envisagé d'insérer des images dans du code HTML. Son essence n'a pas changé et il vous permet toujours de spécifier le chemin vers le document qui doit être chargé dans le cadre.

Le chemin d'accès au document dans Src peut être spécifié sous la forme . Les chemins relatifs sont généralement utilisés pour un document situé sur votre propre ressource, mais vous aurez besoin de chemins absolus lorsque vous souhaitez charger un document d'un autre site dans une fenêtre frame.

Si l'attribut Src n'est pas spécifié avec le chemin vers le document souhaité, alors la fenêtre sera chargée document vierge. Personnellement, j'ai fait une fois une chose similaire pour mon blog (comme élément supplémentaire navigation) et en même temps créé sur le serveur d'hébergement dossier séparé pour cela, et j'y ai placé non seulement un fichier Html avec une structure de cadre (que j'ai appelé index.html), mais aussi tous les documents chargés dans différentes fenêtres, ainsi que des fichiers image qui ont été utilisés comme arrière-plan.

Par conséquent, il était plus simple pour moi d'utiliser des liens relatifs dans l'attribut Src de la balise Frame :

Remarquablement, si vous remplacez tous les liens dans ce code de relatif à absolu (comme https://site/navigator/joomla.html) et ouvrez ce fichier dans un navigateur, alors les documents spécifiés dans le cadre seront chargés à partir de mon serveur et vous verrez une image similaire dans votre navigateur. Et peu importe où se trouvera votre fichier avec une structure de cadre (index.html) - sur votre ordinateur ou sur l'hébergement.

Dans l'exemple illustré dans la figure, une page avec un certain menu est chargée dans la fenêtre du cadre de gauche, qui est un fichier . Mais la façon dont le menu est formé n'est pas importante, mais ce qui se passe après avoir cliqué sur l'un de ses liens est important.

Si vous faites cela, tout se passera exactement comme il se doit - le document s'ouvrira dans la fenêtre inférieure droite. Mais pour cela, j'ai dû appliquer une petite astuce, car dans la version par défaut, le document s'ouvrait sur toute la taille de la fenêtre, remplaçant la structure du cadre, dont je n'avais pas du tout besoin, car le menu de navigation à gauche et en haut les cadres ont disparu.

Comment ouvrir des documents à partir d'un lien dans un cadre

Ainsi, lorsque nous avons parlé d'hyperliens, nous avons mentionné un tel attribut de la balise "A" comme Target=_blank. Rappelez-vous à quoi ça sert? Corrigez pour ouvrir le document lié dans une nouvelle fenêtre. Par défaut, il devrait s'ouvrir dans la même fenêtre, ce qui équivaut à target="_self".

Mais ces possibilités Cible ne sont pas limités. Il s'avère que vous pouvez y ajouter de la valeur comme nom de cadre, qui est précédemment spécifié dans l'attribut spécial Name de la balise Frame. Ensuite, le document par ce lien ne s'ouvrira pas dans la même fenêtre, occupant tout son espace, mais dans le cadre que vous avez spécifié. Dégager? Si ce n'est pas tout à fait, alors maintenant ce sera clair lors de l'analyse de l'exemple.

Revenons donc à notre exemple illustré dans la figure ci-dessus. Nous devons ouvrir les pages en utilisant les liens de la fenêtre de gauche dans le cadre inférieur droit (grand). Par conséquent, la première chose à faire est de donner un nom à cette grande fenêtre en utilisant l'attribut Name sur la balise Frame.

Fabriqué et nommé "ktona". Vous pouvez maintenant ouvrir en toute sécurité le fichier chargé en tant que menu dans la fenêtre de gauche et ajouter l'attribut Target="ktona" à toutes les balises A qu'il contient :

L'histoire de l'émergence de Joomla et du composant VirtueMart

Bien sûr, utiliser l'outil de recherche et de remplacement pour le mettre sur tous les hyperliens ne sera pas difficile, mais pourquoi télécharger du code inutilement alors que nous avons une excellente occasion d'utiliser étiquette spéciale Base, que nous avons déjà mentionné dans le même article sur les hyperliens, lorsque nous avons parlé de l'utilisation de Target blank.

Il suffit de mettre base target="ktona" entre les balises Head d'ouverture et de fermeture et tous les liens dans le code Html de ce document ouvriront de nouvelles pages dans le cadre spécifié appelé "ktona":

Soit dit en passant, si nous considérons mon outil qui existait autrefois à titre d'exemple, nous devons également nous assurer que tous les liens de la fenêtre horizontale supérieure ouvrent leurs pages dans le cadre vertical gauche, qui sert de menu de gauche. Que faut-il faire pour cela ?

Eh bien, d'abord, nous devons donner un nom au cadre vertical de gauche :

Et dans le fichier chargé dans la fenêtre du haut (gor.html), vous devez ajouter l'élément de base target="gor" :

Tout, maintenant nous avons tout fait correctement. Tous les documents liés à partir du cadre supérieur s'ouvrent dans la fenêtre de gauche, et tous les liens de celui-ci ouvriront des documents dans le cadre central et le plus grand. À mon avis, tout est simple et logique.

Attributs de balise de cadre pour personnaliser l'apparence des fenêtres

Voyons maintenant quels attributs en plus de Src et Name peuvent être utilisés dans la balise Frame pour personnaliser apparence cadres. Commençons avec défilement. Avec lui, nous pouvons personnaliser l'affichage des barres de défilement pour chaque fenêtre de votre structure de cadre individuellement.

Le défilement est défini sur Auto par défaut - le navigateur décidera automatiquement, en fonction de la taille du document chargé dans le cadre, d'afficher ou non une barre de défilement. Si le document ne rentre pas complètement dans la fenêtre, une barre de défilement apparaîtra, vous permettant de le visualiser jusqu'à la fin.

De plus, comme valeurs pour le défilement, vous pouvez utiliser Oui (les barres de défilement dans la fenêtre seront toujours affichées, même si le document s'y intègre complètement) et Non (les barres de défilement n'apparaîtront jamais du tout, même si une partie du document ne correspond pas).

Dans mon outil qui existait autrefois, j'ai utilisé la valeur par défaut Auto et les barres de défilement dans les cadres sont apparues au besoin :

L'attribut suivant de la balise Frame est - redimensionner- est unique (il n'a pas de valeur). Après l'avoir enregistré, vous interdisez ainsi de modifier sa taille, qui par défaut s'effectue en faisant simplement glisser la bordure des cadres avec la souris.

Lorsque vous passez le curseur de votre souris sur la bordure, vous verrez que le curseur se transformera en une double flèche, et maintenant en cliquant sur bouton gauche souris, vous pouvez déplacer la bordure comme vous le souhaitez. Noresize impose une interdiction à cette volonté personnelle (lorsque vous déplacez le curseur de la souris vers le bord des fenêtres, vous ne verrez plus de double flèche).

Un autre attribut visuel est Bordure de cadre. Avec lui, vous pouvez spécifier si vous souhaitez dessiner un cadre (bordure) entre les cadres ou non. Frameborder ne peut avoir que deux valeurs possibles— soit 0 (ne dessine pas de cadre) soit 1 (affiche une bordure). La valeur par défaut est bien sûr 1.

Il y a une subtilité. Si vous souhaitez supprimer la bordure visible, vous devrez ajouter Frameborder=0 à toutes les balises Frame des cadres entre lesquels vous souhaitez supprimer les bordures visibles.

Eh bien, nous devons encore considérer quelques attributs de la balise Frame - largeur de marge et hauteur de marge, qui définissent le rembourrage en largeur (gauche et droite) et en hauteur (haut et bas) des bordures de la fenêtre au contenu qui y est chargé (le nombre signifie le nombre de pixels de rembourrage) :

Pourquoi ne pouvez-vous pas créer un site sur des cadres ?

Voyons quel est l'inconvénient fondamental des structures classiques, qui met essentiellement un terme à leur utilisation lors de la création d'un site. Elle consiste dans le fait que selon cette structure de trame il est impossible de retracer son état.

Les structures complexes peuvent avoir des milliers d'états différents (variantes de documents ouverts dans différentes fenêtres frame), mais l'adresse Url de cette même structure ne change pas. À cause de cela, il va Impossible d'utiliser les signets du navigateur ou envoyer des liens vers vos pages préférées à d'autres utilisateurs. Pourquoi?

Parce que l'adresse reste inchangée même lorsque vous l'ouvrez depuis les favoris de votre navigateur ou depuis une lettre E-mail, vous obtiendrez la page avec l'état de départ de la structure du cadre, et non l'état que vous souhaitez conserver.

Bien que, bien sûr, ce problème puisse être résolu, mais pas au moyen de Html, mais à l'aide de langages de programmation serveur (par exemple, Php) ou côté client (JavaScript), et ces solutions ne fonctionneront pas cent pour cent. De telles solutions permettent en effet d'ajouter à Adresse URL structure de trame des données supplémentaires sur son état actuel, mais ce n'est pas facile à faire, et la fiabilité ne sera pas absolue.

C'est le premier inconvénient de l'utilisation de cadres pour créer des sites Web et c'est très important, mais il y a un autre énorme inconvénient. Les moteurs de recherche, bien sûr, ont depuis longtemps appris à les indexer et à en extraire les adresses des documents qui sont chargés dans leurs fenêtres. Le problème est différent.

Lorsqu'un utilisateur passe des résultats de recherche Yandex ou Google à votre site construit sur la base d'une structure de cadre, seul le document qui a été chargé dans l'un des cadres s'ouvrira, et non la structure entière. Comprenez-vous de quoi je parle?

L'utilisateur verra le document et ne verra pas la navigation sur votre site, car il sera protégé dans d'autres fenêtres, et ils ne sont chargés que dans le cadre de l'ensemble de la structure.

En conséquence, un site construit sur des cadres devient tout simplement inutilisable. Bien que, encore une fois, il existe des solutions à ce problème basées sur des scripts de serveur, lorsqu'une redirection sera effectuée à partir des adresses de documents individuels vers une structure de trame qui est dans l'état souhaité, mais cela est encore une fois très difficile et pas toujours fiable.

En général, la conclusion peut être tirée sans équivoque - vous n'avez pas besoin de créer des sites sur des cadres. Mais d'un autre côté, ils sont constamment utilisés pour créer de l'aide pour applications diverses, eh bien, et ailleurs, les petites choses peuvent être utiles.

Par exemple, j'ai créé une structure de cadre, que j'ai appelée "Navigateur" (maintenant je l'ai temporairement supprimée) et qui est devenue une sorte de menu externe étendu pour mon blog, ce qui, à mon avis, devrait simplifier le travail avec la ressource et, par conséquent , améliorer celles qui sont désormais "sans conneries" affectent très, très fortement la promotion du site.

Mais, cependant, afin d'éviter tout problème avec les moteurs de recherche, j'ai fermé toute cette structure de cadre et j'ai également ajouté, au cas où, la balise méta Rodots à tous ses fichiers Html avec une interdiction de leur indexation :

Mais toutes ces restrictions ne s'appliquent qu'aux structures sur les balises Frame et Frameset, et cadres en ligne sur les balises iframe n'ont pas de défauts apparents, et il est tout à fait possible et même nécessaire de les utiliser sur vos projets, du moins pour l'insertion de vidéos depuis YouTube.

Bonne chance à toi! A bientôt sur le site des pages du blog

Vous pourriez être intéressé

Directives de commentaires et Doctype dans le code Html, ainsi que le concept d'éléments de bloc et en ligne (balises)
Embed and object - Balises HTML pour afficher le contenu multimédia (vidéo, flash, audio) sur les pages Web
Img - Balise Html pour insérer une image (Src), l'aligner et l'envelopper avec du texte (align), ainsi que définir un arrière-plan (background)
Qu'est-ce qu'un langage hypertexte Balisage HTML et comment lister toutes les balises dans le validateur W3C Select, Option, Textarea, Label, Fieldset, Legend - tags Formulaires HTML listes déroulantes et zones de texte
Listes en code Html - Balises UL, OL, LI et DL
Police (visage, taille et couleur), balises Blockquote et Pre - mise en forme de texte obsolète en HTML pur (sans utiliser CSS)
Comment les couleurs sont définies dans le code Html et CSS, sélection des nuances RVB dans les tableaux, résultats Yandex et autres programmes

Salut tout le monde! J'ai déjà annoncé plusieurs programmes d'affiliation iFrame, mais qu'est-ce que cela signifie Concept iFrame ou balise iframe, reste un mystère pour beaucoup. Dans cet article, je vais essayer d'expliquer ce que cela signifie, pourquoi c'est nécessaire et comment gagner de l'argent avec iFrame.

Le concept d'iFrame peut être défini comme suit : sur un site, un ou plusieurs sites sont simultanément chargés dans un cadre ou, comme on dit souvent, en arrière-plan, donc le concept Trafic iFrame souvent appelé trafic de fond.

Généralement, les sites chargés dans un cadre ne sont pas visibles pour l'utilisateur, car la largeur et la hauteur du cadre sont souvent nulles. Parfois, un cadre peut être rendu visible exprès en lui donnant les dimensions, par exemple, d'une bannière rectangulaire standard. Ce code ressemblera à ceci :

Si vous copiez code donné et collez-le sur votre site, alors mon blog sera chargé sur votre site dans un cadre de la taille d'une bannière standard, où largeur- largeur de trame égale à 468 pixels, et la taille— la hauteur du cadre, égale à 60 pixels. Dans les échanges de trafic, la hauteur et la largeur du cadre sont généralement nulles. balise iframe vous pouvez également ajouter d'autres variables, mais dans cet article, je ne les considérerai pas, car l'exemple ci-dessus suffira à déterminer et à comprendre ce que signifie la balise iframe et son fonctionnement.

Qu'est-ce qu'un affilié iframe ?

Affilié Iframe est un échange pour acheter et vendre du trafic de fond. Après une simple inscription sur le site programme d'affiliation pour acheter et vendre du trafic iframe Un code iframe est mis à votre disposition, que vous pouvez insérer sur votre site et commencer à gagner : généralement une visite sur votre site par un visiteur unique est payée dans les 24 heures sur l'échange d'achat et de vente de trafic - hébergeurs. Certains échanges paient pour les hits. Habituellement, un hit est payé à un prix qui correspond à la moitié du coût de l'hôte.

Pourquoi le trafic iframe est-il nécessaire ?

Avec l'aide du trafic iframe, le trafic du site est souvent boosté, et, par conséquent, les compteurs seront élevés, mais pour que les systèmes de statistiques ne vous soupçonnent pas de tricherie et que les moteurs de recherche n'imposent pas de filtres sur votre site, cette espèce le trafic doit être utilisé avec précaution - dans la limite de 5% du trafic total, si vous avez . Il est également utile de savoir que les programmes d'affiliation pour acheter et vendre du trafic de fond peuvent ajouter des sites qui ont code malicieux ou rediriger. Souvent, l'administration de ces échanges modère les sites, mais les propriétaires de ces sites peuvent ajouter du code malveillant ultérieurement - c'est l'un des moyens les plus accessibles et les moins coûteux de propager massivement des virus. L'administration de certaines bourses n'accepte pas les annonceurs et n'achète du trafic que pour des ressources éprouvées : un exemple est échange de trafic de fond goldentraff. De plus, sur certains échanges, comme par exemple Safeframe ou Web-rom, il existe un système de contrôle du trafic pour les virus. Des liens vers des articles sur ces échanges de trafic se trouvent à la fin de cet article.

Comment gagner de l'argent avec le trafic iframe ?

Les gains sur les échanges d'achat et de vente de trafic sont souvent définis comme de l'argent à partir de rien. Pourquoi donc? Tout est assez simple ! Vous avez créé un site Web (souvent -), y avez ajouté du code d'un ou plusieurs échanges et y avez généré du trafic. Le trafic peut provenir de systèmes de navigation, d'autosurf et de systèmes d'échange de visites - c'est la source de trafic la plus accessible et la moins chère. Vous pouvez également utiliser d'autres sources de trafic : bannières publicitaires, publicité taverne, publicité contextuelle etc. Une autre source de trafic populaire pour les programmes d'affiliation iframe est le trafic provenant des systèmes de publicité active (ATS). Permettez-moi de vous rappeler à nouveau : les codes avec échanges de trafic iframe peuvent être regroupés sur un même site. Ainsi, vous augmenterez l'enveloppe et, par conséquent, gagnerez plus que ce que vous dépensez en achat de trafic.

Élément

cadres

Que signifie

La principale différence entre

Tout ce code html que vous devez copier et coller dans fichier texte(bloc-notes ou simple bloc-notes), donnez-lui un nom approprié (de préférence en lettres latines - afin que les caractères incompréhensibles ne soient pas affichés) et prescrivez l'extension .htm.

Un exemple de nom de cadre est " yandex-webinaire.htm» - Plus de détails dans le tutoriel vidéo ci-dessus.

Attention! Après avoir défini l'extension .htm votre fichier texte, son icône deviendra l'icône du navigateur que vous utilisez par défaut.

Si vous souhaitez modifier ou ajouter quelque chose à un fichier texte, faites un clic droit sur le fichier et sélectionnez " A ouvrir avec -> Bloc-notes et n'hésitez pas à modifier.

Tout! Votre page de cadre est créée et prête à fonctionner, MAIS

Vous devez joindre des analyses afin de pouvoir utiliser des cadres avec un maximum d'efficacité, car, pour les personnes qui comprennent l'essentiel, installer VOS compteurs est l'objectif principal création de cadres.

Analyse Web et Page Frame

Si vous ne savez pas comment créer et configurer des compteurs de web analytics, et où obtenir les codes compteurs, vous êtes ici :

Après création et configuration, copiez les codes compteurs et collez-les dans le cadre. Comme vous l'avez remarqué dans mes articles, je recommande de mettre les compteurs avant la balise de fermeture.

À la fin, structure html le code devrait ressembler à la capture d'écran ci-dessous :

Mon Nom de domaine+ nom du cadre.htm

En conséquence, vous obtiendrez une page Web que vous devrez télécharger dans le dossier racine. Le lien vers le site sera disponible immédiatement, et lors de la transition, vous serez redirigé vers le site que vous souhaitez promouvoir, mais qui se trouve sur votre domaine, dans votre " encadré».

Il vous suffit de suivre les analyses et gagner de l'argent sur les programmes d'affiliation.

Gains sur les programmes d'affiliation sans site Web

Si vous n'avez pas votre propre site Web, l'option avec les programmes d'affiliation est tout à fait appropriée pour gagner de l'argent sur les programmes d'affiliation. créer et utiliser des pages de cadre.

Mais au minimum, vous devez avoir un domaine enregistré et un emplacement sur - sans cela, vous ne pourrez pas promouvoir les programmes d'affiliation de la manière décrite ci-dessus.

Et si vous êtes intéressé par la publicité contextuelle dans le système Yandex Direct et que vous ne voulez pas attendre la publication de mes articles, dans lesquels j'essaierai pleinement de couvrir ce sujet, veuillez consulter le cours vidéo payant d'Ilya Tsymbalist -. J'ai moi-même traversé et j'ai été satisfait, j'espère qu'il n'est pas nécessaire d'expliquer pourquoi j'ai conseillé l'option payante.

Assurez-vous de consulter le didacticiel vidéo sur créer et travailler avec des pages de cadre. Dans cette vidéo, je, à partir de zéro créer une page de cadre, insérez un lien d'affiliation, configurez des compteurs et téléchargez le fichier résultant sur l'hébergement.

Si vous rencontrez des problèmes pour créer des cadres, je suis toujours heureux de vous aider, écrivez dans les commentaires.

Bonjour! Sur Internet, il existe un grand nombre de programmes d'affiliation qui vous permettent de gagner de l'argent sur votre site.

Dans l'article d'aujourd'hui, nous examinerons les programmes d'affiliation qui achètent du trafic aux webmasters, et découvrirons également la relation moteurs de rechercheà ce genre de revenus.

Afin de ne pas rester à l'écart, j'ai jeté deux de mes sites dans un tel système et j'ai décidé de voir comment le rachat de trafic affecterait la position de mes projets sur le réseau. Mais à propos de tout dans l'ordre, lisez attentivement le message et jusqu'au bout.

Le plan de l'article sera le suivant :

1. Qu'est-ce qu'un rachat de trafic ?
2. De quelle manière les visiteurs sont-ils achetés ?
3. Quel est le danger de cette façon de gagner pour un site ou un blog ;
4. Mon expérience avec le système de trafic.

Première. Qu'est-ce que le rachat de trafic ?

Une façon d'augmenter le trafic sur le site Web pour de l'argent est d'acheter le bon nombre de visiteurs sur d'autres sites.

Par exemple, j'ai besoin d'augmenter le trafic vers ce site afin de le convertir plus tard en une autre source de revenus, ou peut-être que quelqu'un a juste besoin de remonter le compteur.

Pour ce faire, nous nous rendons sur des échanges qui les rachètent à d'autres sites et paient un certain montant pour chaque visiteur (1000 personnes valent approximativement 3 $).

Chaque échange est spécialisé dans un type de trafic spécifique (mobile, trafic RU, étranger), les prix sont également différents.

Il existe de nombreux services de ce type sur le réseau, vous aurez donc l'embarras du choix, mais je vous invite à utiliser cette méthode en dernier recours, il vaut mieux travailler à augmenter le trafic de manière naturelle, et l'article " " vous y aidera.

- c'est lorsqu'un service redirige les visiteurs d'un site (vente de trafic) vers un autre site (achat), tout en facturant des frais pour fournir ces services.

Deuxième. Comment les visiteurs sont-ils achetés ?

Il existe de nombreuses façons d'acheter du trafic à partir d'un site. En commençant par des bannières pop-up et en terminant par l'installation d'un script iframe :

— PopUnder ;
— cliquez sous ;
— iframe ;

PopUnder. Une « bannière flottante » est placée sur le site (« flottante » signifie que cette bannière restera toujours dans le champ de vision du visiteur. Si vous faites défiler la page avec la souris, alors la bannière « flottera » après vous).

Ces bannières sont généralement situées dans le coin supérieur droit. Lorsqu'un visiteur souhaite le fermer et clique sur l'inscription "fermer", le site de l'annonceur se charge à ce moment-là.

Cliquez sur Sous. Les sites qui gagnent de l'argent sur clickunder n'ont pas de bannières flottantes, de fenêtres et de publicités superflues. Le visiteur peut consulter les informations en toute sécurité jusqu'à ce qu'il fasse un clic (pas nécessairement sur le lien).

J'ai décidé de ne pas contourner ce type de revenu et j'ai jeté ce Programme d'affiliation sur un de mes blogs. Je parlerai de ce qui s'est passé dans le prochain post, et passerai aussi aperçu détaillé services populaires ne manquez pas!

iframe. L'un des moyens les plus tentants de gagner de l'argent consiste à vendre votre trafic à d'autres sites. Il vous suffit d'installer un code spécial, et s'il parvient à votre projet, rien ne s'affichera et détournera l'attention de la lecture du matériel. Cependant, à ce moment, un autre site sera chargé, et peut-être plusieurs.

Troisième. Pourquoi cette façon de gagner de l'argent est-elle dangereuse pour un site ou un blog

Il y a quelques années, en travaillant avec des échanges pour acheter du trafic, vous ne pouviez pas avoir peur pour l'émission de vos sites dans le TOP des moteurs de recherche. Mais tout a une fin et c'est arrivé en 2009, lorsque Yandex a annoncé que les sites avec des publicités PopUnder et ClickUnder seraient sous-estimés dans Résultats de recherche systèmes.

Étant donné que les services de rachat utilisent java script, et qu'il est à son tour parfaitement indexé par les robots des moteurs de recherche, le site s'envole vers le TOP.

Sur un forum, un webmaster a suggéré une solution à ce problème. Cela consistait en ce qui suit, que les robots des moteurs de recherche ne sont pas capables de reconnaître le code des fichiers flash.

Pour ce faire, vous devez rechercher de tels programmes d'affiliation qui affichent des publicités flash, mais vous ne devriez pas trop vous réjouir ici, car si le PS n'a pas encore appris à le faire, alors ce n'est qu'une question de temps. c'est une question de temps

Quatrième. Mon expérience avec Traffbiz

Ayant découvert une telle façon de gagner en tant que programme d'affiliation iframe, où vous pouvez vendre votre trafic, alors que le visiteur ne sera ennuyé par rien, comme dans PopUnder et ClickUnder, j'ai commencé à l'essayer moi-même.

J'ai trouvé des échanges sur le net qui fonctionnent selon ce principe et me suis installé sur Traffbiz (ATTENTION, ce site ne fonctionne plus, mais le principe de son fonctionnement est similaire à des similaires), ils paient leurs contre-impressions au prix de $ 1,6 pour 1000 impressions.

J'ai pris deux sites expérimentaux à faible trafic (60 personnes par jour) et âge du domaine (1 an). Enregistrement réussi, d'ailleurs ils prennent tous les sites dans le système avec un minimum de 10 uniques par jour.

Si vous souhaitez retirer l'argent que vous avez gagné, vous devrez attendre un salaire minimum de 3 $. Mais pas même quelques jours ne se sont écoulés, car j'ai déjà eu le premier inconvénient.

Un de mes sites est fait en html, j'ai donc besoin de mettre à jour manuellement le code système une fois toutes les deux semaines, et parfois même plus tôt (ceux qui ont créé des sites en html me comprendront).

Il s'avère que je dois ouvrir chaque page et modifier le code système qu'elle contient. Mon site fait 50 pages, donc je n'ai pas vraiment envie de répéter les mêmes mouvements 50 fois plusieurs fois par mois, mais je travaille pour le plaisir de l'expérience.

Le deuxième site était plus facile. Il est fait sur le moteur wordpress, donc une fois que vous avez ajouté le code, vous pouvez l'oublier.

Voici les statistiques de vente de mon trafic sur les sites expérimentaux.

Comme vous pouvez le voir, le système n'achète pas tous les visiteurs d'affilée, mais sélectionne uniquement le trafic RU. Le script que j'ai installé est capable de rediriger mes visiteurs vers les sites d'autres personnes.

Vous serez intéressé de connaître les tarifs suivants :

- Vente de RU-trafic et eux au prix de 2,6$ pour 1000 clics (je vous rappelle que l'achat est de 1,6$ pour les mêmes 1000);

- Vendre des visiteurs du Kazakhstan et d'Ukraine au prix de 2$ pour 1000 clics (je vous rappelle qu'ils ne vous achètent pas ce trafic) ;

- Vente du reste du trafic au prix de 1$ pour 1000 clics (je vous rappelle qu'ils ne vous achètent pas ce trafic) ;

Comme vous pouvez le voir, ils obtiennent un bon retour sur l'argent dépensé, mais personnellement, je n'aime pas seulement deux facteurs dans cet échange.

1) Yandex considère que leur code est potentiellement malveillant et que ces sites distribuent des virus. Sur les deux sites, j'ai fermé le code système dans des balises noindex.

Cependant, cela n'a pas aidé et le site wordpress a été le premier à abandonner, et presque immédiatement après quelques ups. De plus, cela a pris en compte le site sur html.

Ce que je fais dans ce cas : je supprime le script de traffbiz sur les sites et j'attends que Yandex considère les sites comme "bons" (cela prend environ 5 jours), puis je remets le script.

2) Le site a du trafic. Yandex sous-estime délibérément les projets dans les résultats de recherche TOP qui sont dangereux pour les utilisateurs.