/fdata%2F3778403%2Favatar-blog-1150972059-tmpphpE7LqK8.jpeg){kind=avatar}
Les frames (frameset) en HTML
Avant de débuter il faut connaitre quelques notions en HTML : Apprendre le HTML
L'utilisation de cadres ou frames permet de diviser l'écran du navigateur en plusieurs zones. Chaque zone peut contenir une page html, une image....
Les frames sert à diviser la fenêtre du navigateur en plusieurs fenêtres .
La balise <frameset> remplace la balise <body>.
<frameset> sert à définir une page de cadres,le <frame> sert à définir un cadre.
- Les propriétés de <frameset> : rows (nombre de ligne),cols (nombre de colonnes),border (bordure),framespacing,bordercolor(couleur de bordure)
- les propriétés de <frame> :src,scrolling="yes/no/auto",noresize,frameborder=yes/no,bordercolor,nome,marginwidth="marge en pixels" ,marginheight="marge haut et bas en pixels"
EXEMPLE
Soit le code Html suivant:
<html>
<head>
<title>First </title>
</head>
<frameset rows="20%,80%" cols="*" frameborder=yes border=5 Bordercolor="blue">
<frame Frameborder="yes" src="image.JPG">
<frameset cols="20%,80%" frameborder=yes border=5 Bordercolor="blue">
<frame src="http://www.lemondeinformatique.fr/accueil-micro-numerique.php">
<frame src="http://www.google.fr">
</frameset>
</frameset>
<html>
Voici qu'est ce qu'on obteint :
Si par exemple on veut que la partie droite soit un menu qui contient des liens qui mènent vers d'autres pages
Voici le code de "menu.html":
<html>
<head>
</head>
<body>
<a href="http://www.yahoo.fr">Aller vers yahoo</a><br>
<a href="http://www.google.fr">Aller vers google</a><br>
<a href="http://www.lemondeinformatique.fr/accueil-micro-numerique.php">Aller vers le monde informatique</a><br>
</body>
</html>
voici ce qu'affiche cette page "menu.html" :
Aller vers yahoo
Aller vers google
Aller vers le monde informatique
Maintenant si on intègre cette page"menu.html" dans notre page qui contient les frames:
<html>
<head>
<title>First </title>
</head>
<frameset rows="20%,80%" cols="*" frameborder=yes border=5 Bordercolor="blue">
<frame Frameborder="yes" src="image.JPG">
<frameset cols="20%,80%" frameborder=yes border=5 Bordercolor="blue">
<frame src="menu.html">
<frame src="http://www.google.fr">
</frameset>
</frameset>
<html>
Voici qu'est qu'on obtient :
Maintenant si on clique sur l'un des liens qui se trouvent dans la partie gauche,c'est à dire dans la page "menu.html" intégré dans notre page de frames,la page appelée par le lien va s'afficher dans la partie gauche,c'est à dire à la place de la page "menu.html".
Exemple
Si on clique sur le lien "Aller vers yahoo" voici qu'est ce qu'on obtient:
Maintenant si on veut garder la page des liens,c'est à dire "menu.html", même lorsqu'on clique sur l'un des liens,et on veut que la page appelé s'affiche dans le cadre à droite,qui contient la page google on doit:
- ajouter à la <frame> concerné un nom,dans notre cas on doit ajouter à <frame src="http://www.google.fr"> un "name" c'est à dire <frame src="http://www.google.fr" name="droite">.
- Dans la page menu.html on doit ajouter à chaque <a href="page.html"> target="nom de frame",dans notre cas il s'appelle droite,donc voici qu'est ce qu'on doit faire au niveau de la page menu.html(ce qui va etre ajouter sera coloré:
<html>
<head>
</head>
<body>
<a href="http://www.yahoo.fr" target="droite">Aller vers yahoo</a><br>
<a href="http://www.google.fr" target="droite">Aller vers google</a><br>
<a href="http://www.lemondeinformatique.fr/accueil-micro-numerique.php" target="droite">Aller vers le monde informatique</a><br>
</body>
</html>
Si on clique maintenant sur Aller vers yahoo voici qu'est ce qu'on va obtenir:
Remarque
- Si par exemple on veut que seulement les deux premières pages s'affichent dans le cadre droit et que le troisième s'affiche dans le cadre gauche,on doit donc pas ajouter target="droite" dans <a href="http://www.lemondeinformatique.fr/accueil-micro-numerique.php" >.
- Si on donne un nom érroné ou qui n'existe pas dans le target,c'est à dire si j'écris par exemple aaa au lieu de droite( target="aaa" ) ,lorsqu'on clique sur le lien,une nouvelle fenêtre va être ouverte, et on quitte la page de frames.
- Si on veut que la page s'ouvre dans le cadre en haut,aprés avoir cliquer sur le lien,on doit juste suivre la meme procédure,c'est à dire on ajoute un nom (name) à cette frame qui se trouve aprés <frameset rows="20%,80%" cols="*" frameborder=yes border=5 Bordercolor="blue">,c'est à dire le <frame Frameborder="yes" src="image.JPG"> ,on lui ajoute name="haut" par exemple,puis dans la page menu les liens <a href=" "> doivent contenir target="haut".
/image%2F1053887%2F20170329%2Fob_c46b40_capture.PNG)
/image%2F1053887%2F20150612%2Fob_2fc584_playstore-icon.png){kind=icon}
/image%2F1053887%2F20150612%2Fob_f8108b_playstore-icon.png){kind=icon}
/image%2F1053887%2F20150420%2Fob_bdbb76_icon.png){kind=icon}
Abonnez-vous pour être averti des nouveaux articles publiés.
- 30 Informatique
- 22 Histoire & Civilisations
- 16 Tunisie-Maghreb
- 12 Films-Movies
- 10 Fêtes
- 5 Books-Livres-كتب
- 5 religion islam
- 4 Societé&culture
- 3 Sports
- 3 islam
- 2 Earth-Terre
- 2 mobile apps
- 2 religion
- 1 Android apps
- 1 Animaux
- 1 Coran
- 1 android apps
- 1 collecte Coran
- 1 conquête islam
- 1 coran et science
- 1 expansion islam
- 1 film
- 1 science islam
