Hey ! Avant de commencer, je voudrais préciser que je suis débutant en HTML, donc désolé si je confonds des notions, c'est encore tout nouveau.

Je voudrais me lancer dans la création d'un petit site perso, tout simple, mais il y a un problème : je ne sais pas comment changer juste le corps de la page. Je m'explique.

Le site est composé d'une bannière en haut, d'onglets juste en dessous puis d'un texte. J'ai besoin de faire beaucoup de textes, mais je ne veux pas qu'ils soient tous sur la même page, et je ne veux pas avoir à relettre le code de ma bannière et de mes onglets dans toute mes pages.

Comment faire ? Merci à ceux qui me donneront des réponses

-
Edité par MartinLécluse 9 octobre 2017 à 19:02:12

Bonjour,

Il va falloir utiliser un langage serveur, pour inclure dans chaque page les éléments bannière et navigation, le HTML seul ne peut rien, c'est l'un des intérêts d'un langage serveur de pouvoir insérer des éléments communs à plusieurs pages

Exemple en PHP :

<?php include('ressources/banniere.html');?>
<?php include('ressources/navigation.html');?>

En théorie on peut aussi en Javascript, un script appelé dans chaque page qui écrirait une chaîne de caractères dans un élément du DOM dont on indique l'id, mais moins simple et clair qu'avec un langage serveur, et dépendant du navigateur client qui doit avoir activer le Javascript

Mais pour un site de quelques pages, quelques minutes de copier/coller bannière et navigation, c'est pas non plus la mort... A  toi de voir ce que tu veux investir en temps

Salut tu fais une page index ou tu places tout tes éléments comme tu souhaites,header,section,footer 

la section ou tu écriras tout ton blabla en bas de cette page un lien qui envoie vers page 2 

ensuite tu copie colle cette page tu la nomme page2 et tu changes la section ou tu écriras ton blabla2 en bas de cette page deux liens un vers page 1 et l"autre vers page3 etc....

mais je ne suis pas fan de cette méthode 

mais si tu veux du dynamique,c'est à dire que si tu veux que tes visiteurs puissent réagir sur ton site comme laisser des commentaires ou autres il te faudra passer par PHP et Bdd (base de données) mettre les mains dans le cambouis ou encore prendre un CMS comme wordpress par exemple

-
Edité par Skull-dragon 9 octobre 2017 à 20:48:33

Hello,

Oui, wordPress est une solution qui pourrait te satisfaire, tu n'aurais plus qu'à te concentrer sur le contenu.

Sinon la méthode d'inclusion donnée par ChrisLebure est justement expliqué dans le cours, consulte ce chapitre du cours PHP, c'est exactement la réponse à ta demande :

-> https://openclassrooms.com/courses/concevez-votre-site-web-avec-php-et-mysql/inclure-des-portions-de-page-1   

Bonjour, tout d'abord merci pour vos réponses. J'ai cependant quelques questions :

@ChrisLebure : Je n'avis pas précisé mais je dois donner mon site à des profs (c'est un projet de classe) -> est-ce qu'ils pourront lire le site sans avoir préalablement installé PHP, Wamp... ?

@Skull-dragon : je voudrais éviter ça, histoire de pas avoir 10 000 lignes de code identiques, mais je vais peut-être pas avoir le choix

Dans tous les cas, je vais m'intéresser au PHP et à WordPress, pour moi, et si je pourrais pas faire autrement, je ferai du copié-collé de mes bannières etc pour mon projet de classe.

Enfin, j'ai une question pratique : imaginons que je veuille faire des onglets interactifs (on clique sur un onglets principal comme "Accueil" et une bannière se déroule au-dessous comme "Qui-somme nous ?", "Notre projet"...), il me faudra utiliser du PHP ?

Merci à vous pour vos réponses, ça m'aide beaucoup

pour t'éviter de faire des copier/coller tu peux également :

1- Faire une page header.php 

  * Avec tes éléments bann,nav,logo,titre,etc...

2- Faire une page page : section.php (par exemple)

  *ou tu feras la mise en place de  tout ton contenu.

3- Faire une page footer.php

  *ou tu y mettras tous les éléments de ton pied de page.

Une fois cela créé tu fais une page index.php avec à l'intérieur un  include de ton header,une section propre à l'index, et un include de ton footer.

ensuite ta page section.php tu fais la même chose (include header et footer) et ne te reste plus qu'à faire une page2.php,une page3.php,etc... basées sur ta page section.php(avec les include) avec comme je te l'e disais plus haut des liens différents pour aller de page en page.

comme sa tu n'as que tes pages à changées sans faire des copier/coller

pour ta nav en onglet html et css devrait suffire

voici le tuto : OpenClassRoom

Merci beaucoup ! Mais est-ce que, si je donne ce code avec du PHP à quelqu'un qui ne l'a pas, pourra-t-il le lire ?

La réponse est non, si la personne veut ouvrir les pages dans son navigateur en local.
il lui faudra passer par WAMP (ou MAMP). Les navigateurs ne savent pas quoi faire avec du PHP, c'est du texte sans signification. C'est le serveur (ou WAMP/MAMP) qui exécute le PHP, jamais les navigateurs, qui reçoivent le résultat du code

Essaie d'ouvrir une page .php contenant du code php directement dans un navigateur : le code sera simplement affiché, et non interprété par le navigateur puisque ce n'est du HTML.

Bon bah je suis fixé merci beaucoup : je vais faire une version moche en copié-collé pour les proches et faire une version propre avec du PHP.

D'ailleur Skull-dragon, que veux-tu dire par :

Skull-dragon a écrit:

2- Faire une page page : section.php (par exemple)

  *ou tu feras la mise en place de  tout ton contenu.

Une fois cela créé tu fais une page index.php avec à l'intérieur un  include de ton header,une section propre à l'index, et un include de ton footer.

ensuite ta page section.php tu fais la même chose (include header et footer) et ne te reste plus qu'à faire une page2.php,une page3.php,etc... basées sur ta page section.php(avec les include) avec comme je te l'e disais plus haut des liens différents pour aller de page en page.

Donc dans ma page section.php, j'écris le texte d'une de mes pages (page d'accueil par exemple) en faisant des include pour mon header, mon footer etc, puis je copie-colle ça en changeant le texte de la section et en enregistrant (page2.php etc), tout en créant des liens entre les pages.

Et je ne comprend pas très bien la page index.php

Encore merci à vous !

-
Edité par MartinLécluse 10 octobre 2017 à 16:05:55

la page index par exemple pour relater les titres ou liens de tel ou tel page,une page d'accueil avec photo,ou une description ou encore présentation de ton produit,etc..., après c'était juste un exemple tu peux directement faire include de ta page 1 dans index

la page section à dupliquer autant de fois que tu as de page  

pour avoir qu'une seule partie à modifier dans tes pages 1, 2 , 3 , 4 , etc...

j'ai peur de mal me faire comprendre

exemple: ( WARNING !!! style usine à gaz en action WARNING !!!!! )

Pour faire simple 

ton header.php

<!DOCTYPE html>
      <html>
         <head>
             <title>Mon site</title>

             <link href="style.css" type="text/css" rel="stylesheet" media="all" />

         </head>
<body>


<header>
    <h1>Ton titre</h1>
</header>


<nav>

    <ol>
        <li>Accueil</li>
        <li>Page 1</li>
        <li>Page 2</li>
        <li>ETC..</li>
    </ol>
</nav>
<section>
     <article>

ta partie section de présentation sur index.php 

<h2>Ma Page 1</h2>

    <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit,
        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
        ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
        esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
        sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
    <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit,
        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
        ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
        esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
        sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
    <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit,
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
    ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
    esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
    sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
    <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit,
        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
        ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
        esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
        sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>

<a href="page2.php" title="page2">Lien vers la page 2 >></a>

ton footer.php

</article>
</section>
<footer>© ton blabla</footer>
</body>
</html>

ta page2.php

<?php include("header.php"); ?>
<!-- PARTIE A MODIFIER CI-DESSOUS COMME TU LE SOUHAITES
     POUR FAIRE AUTANT DE PAGE QUE TU LE VEUX-->
    <h2>Ma Page 2</h2>

    <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit,
        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
        ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
        esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
        sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
    <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit,
        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
        ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
        esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
        sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
    <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit,
        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
        ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
        esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
        sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
    <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit,
        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
        ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
        esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
        sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>

<!-- LIEN A CHANGER SUR LES PAGES SUIVANTES OU PRECEDENTES -->
    <a href="index.php" title="page1"><< Lien vers la page 1</a> ||

    <a href="page3.php" title="page1"> Lien vers la page 3 >></a>

<!-- FIN DE LA PARTIE A MODIFIER -->

<?php include("footer.php"); ?>

ta page3.php 

<?php include("header.php"); ?>


    <!-- PARTIE A MODIFIER CI-DESSOUS COMME TU LE SOUHAITES
         POUR FAIRE AUTANT DE PAGE QUE TU LE VEUX-->
    <h2>Ma Page 3</h2>

    <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit,
        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
        ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
        esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
        sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
    <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit,
        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
        ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
        esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
        sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
    <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit,
        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
        ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
        esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
        sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
    <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit,
        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
        ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
        esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
        sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>

    <!-- LIEN A CHANGER SUR LES PAGES SUIVANTES OU PRECEDENTES -->
    <a href="page2.php" title="page1"><< Lien vers la page 2</a> ||

    <a href="page4.php" title="page1"> Lien vers la page 4 >></a>

    <!-- FIN DE LA PARTIE A MODIFIER -->

<?php include("footer.php"); ?>

etc..etc... MAIS ATTENTION C'EST VITE FAIT POUR TE MONTRER CE QUE JE T'EXPLIQUAIS PLUS HAUT CECI EST UN EXEMPLE SI TU VEUX ALLER AU PLUS SIMPLE SANS CONNAISSANCES EN PHP 

MODE USINE À GAZ TERMINÉE FIN D'ALERTE

-
Edité par Skull-dragon 10 octobre 2017 à 17:12:17

Merci pour tes explications !!

mais de rien je t'en prie avec plaisir bonne continuation

-
Edité par Skull-dragon 11 octobre 2017 à 19:10:26