Apparaitre 1 page web dans un des 2 frames du html

7 novembre 2023 à 22:52:53

Bonjour , je souhaiterais faire apparaître directement ( et non via un lien où l'on doit cliquer) une page web dans le 2ème frame de mon doc html .

Comment niveau codage doit-on s'y prendre ?

Je connais la solution iframe mais je ne voudrais pas faire apparaître une petite fenêtre mais carrément la page web en entier dans le frame .

J'ai essayé l'attribut src pour faire apparaitre la page web mais , il ne fonctionne que dans la balise iframe ..

Merci d'avance pour vos réponses !

-
Edité par BlackFire83 7 novembre 2023 à 23:00:13

AbcAbc6

8 novembre 2023 à 0:49:06

Bonsoir,

>> dans le 2ème frame de mon doc html .

La balise <frame> étant obsolète, pourriez vous expliciter ce que vous appelez "le 2ème frame"?

Poster le code que vous avez écrit.

BlackFire83

8 novembre 2023 à 12:27:37

<html>
<head>
<title>Mon Animal </title>
</head>
<frameset cols="10%,40% , 50%">

<frame name="Frame 1" src="Frame 1.html" noresize marginwidth="10px" marginheight="50px">


<frame name="Frame 2" src="Frame 2.html">


<frame name="Frame 3" src="Frame 3.html">


</frameset>

<noframes>
<body>
Votre navigateur ne supporte pas la balise Frame
</body>
</noframes>
</html>

voilà ma page principale

<html>
<head>
<title> Frame 1 </title>
</head>
<body>
<h1> Liens </h1>

<ul>
<b>
<br><br>
<li>  <a href="https://fr.wikipedia.org/wiki/Chat" target="Frame 2">Un Chat </a>
<br><br>
<li> <a href=" https://fr.wikipedia.org/wiki/Chien" target="Frame 2"> Un Chien </a>
<br><br>
<li> <a href="https://fr.wikipedia.org/wiki/Souris" target="Frame 2"> Une Souris </a>
</b>

</ul>
</body>
</html>

mon frame 1 ( 1ere fenetre de la page)

<html>
<head>
<title> Frame 2 </title>
</head>
<body>
<h1> Description de l'Animal </h1>
</body>
</html>

mon frame 2 ( 2eme fenetre de la page)

-
Edité par BlackFire83 8 novembre 2023 à 12:30:46

AbcAbc6

8 novembre 2023 à 12:41:27

Bonjour, comme indiquer plus haut la balise <frame> est obsolète et n'est plus à utiliser.

De plus vous n'avez pas de doctype (il y avait un doctype spécifique pour du code utilisant les frame), et aucune balise ne doit ce trouver entre </body> et </html>.

Pourriez vous explicité ce que vous souhaitez réaliser pour que l'on puisse vous guider vers une solution actuelle. Quel est ce besoin d'utiliser des frame plutôt qu'une page entière qui contiendrais un menu de navigation identique sur chaque page?

Vos fichiers doivent commencer pas ceci :

<!DOCTYPE html>
<html lang="fr">

Vous pourrez alors vérifier la syntaxe de votre code en utilisant le validateur => https://validator.w3.org/#validate_by_input

Il ne peut y avoir des balises <br> comme enfant directe de <ul> ou <ol>, c'est uniquement <li> comme enfant direct.

Pour espacer les items de list vous avez les margin et padding en CSS.

AbcAbc6

10 novembre 2023 à 5:06:49

Bonjour, je crois comprendre ce que vous souhaitez faire. Vous souhaitez pouvoir afficher une page wikipedia dans votre page web sans que l'on ne change de page de votre site.

Dans ce cas c'est bien la balise <iframe> qu'il faut utiliser, et celle-ci n'apparait pas en petit mais peut être stylisée.

De même que le menu de navigation ou je vous propose un système d'onglet. Code d'exemple :

<!DOCTYPE html>
<html lang="fr">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mon Animal</title>
    <style>
        body {
            margin: 0;
        }

        .menu {
            display: flex;
            margin-left: 20px;
            list-style: none;
        }

        .menu>* {
            margin-left: 20px;
        }

        .animal {
            display: none;
        }

        .animal:target {
            display: block;
        }

        iframe {
            width: 100vw;
            min-height: 100vh;
            border: 0;
        }

        section> :first-child,
        nav>p {
            margin-left: 20px;
        }
    </style>
</head>

<body>
    <nav>
        <ul class="menu">
            <li><a href="#chat">Un Chat</a></li>
            <li><a href="#chien">Un Chien</a></li>
            <li><a href="#souris">Une Souris</a></li>
        </ul>
        <p>Cliquer sur un lien ci-dessus pour avoir la description wikipedia de l’animal. </p>
    </nav>
    <section class="animal" id="chat">
        <h2>Description d'un Chat</h2>
        <iframe src="https://fr.wikipedia.org/wiki/Chat"></iframe>
    </section>
    <section class="animal" id="chien">
        <h2>Description d'un Chien </h2>
        <iframe src="https://fr.wikipedia.org/wiki/Chien"></iframe>
    </section>
    <section class="animal" id="souris">
        <h2>Description d'une Souris</h2>
        <iframe src="https://fr.wikipedia.org/wiki/Souris"></iframe>
    </section>
</body>

</html>

-
Edité par AbcAbc6 10 novembre 2023 à 7:32:39