Monday, 2 March 2015

JOUR 6:liaison des pages web

le dernier poste parlait de  menu html.
un menu permet la navigation entre ressources du site web (pages,pdf,image...).
maintenant nous allons experimenter ensemble le fonctionement de notre menu.

etape 1: creez  une page que vous nomez index.html
etape 2: copier ce code dedans  :

<html>
     <head>
           <title>JOUR% : creation des menu html</title>
     </head>


      <body>
            <table align="center" bgcolor="#fafafa" cellpadding="10" cellspacing="10">
                  <tr>
                     <td><a href="#">Acceuil</a></td><td><a href="#">A propos</td>
                     <td><a href="#">Services</a></td><td><a href="#">Projets</a></td><td><a href="#">Contacts</a></td>
                     <tr>
                     <td colspan="5" bgcolor="#eee">
                                <p>Le contenu du site peu aller ici</p>
                                <p>Le contenu du site peu aller ici</p>
                                <p>Le contenu du site peu aller ici</p>
                                <p>Le contenu du site peu aller ici</p>

                     </td>
                     </tr>
                     <tr>
                        <td colspan="5">
                        <img src="welcome.jpg">
                        <p>mot de bienvenu</p>
                        <p>Le contenu du site peu aller  ici</p>
                        </td>
                     </tr>
                  </tr>

            </table>

     </body>
</html>


etape 3:  creez une autre page nomez la about.html
copiez ceci dedans :

<html>
     <head>
           <title>JOUR5 : creation des menu html</title>
     </head>


      <body>
            <table align="center" bgcolor="#fafafa" cellpadding="10" cellspacing="10">
                  <tr>
                     <td><a href="index.html">Acceuil</a></td><td><a href="#">A propos</td>
                     <td><a href="service.html">Services</a></td><td><a href="#">Projets</a></td><td><a href="#">Contacts</a></td>
                     <tr>
                     <td colspan="5" bgcolor="#eee">
                     <h1>A propos de nous</h1>
                                <p>Le contenu du site peu aller ici</p>
                                <p>Le contenu du site peu aller ici</p>
                                <p>Le contenu du site peu aller ici</p>
                                <p>Le contenu du site peu aller ici</p>

                     </td>
                     </tr>
                     <tr>
                        <td colspan="5">
                        <img src="welcome.jpg">
                        <p>mot de bienvenu</p>
                        <p>Le contenu du site peu aller ici</p>
                        </td>
                     </tr>
                  </tr>



            </table>

     </body>
</html>

etape 4: creez une autre page nomez la service.html
copiez y:
<html>
     <head>
           <title>JOUR5 : creation des menu html</title>
     </head>


      <body>
            <table align="center" bgcolor="#fafafa" cellpadding="10" cellspacing="10">
                  <tr>
                     <td><a href="index.html">Acceuil</a></td><td><a href="about.html">A propos</td>
                     <td><a href="service.html">Services</a></td><td><a href="#">Projets</a></td><td><a href="#">Contacts</a></td>
                     <tr>
                     <td colspan="5" bgcolor="#eee">
                     <h1>Nos services</h1>
                         <ol>
                             <li>web designing</li>
                             <li>network security</li>
                             <li>mobile apps development</li>
                             <li>computer maintenace</li>
                       
                         </ol>      

                     </td>
                     </tr>
                     <tr>
                        <td colspan="5">
                        <img src="welcome.jpg">
                        <p>mot de bienvenu</p>
                        <p>Autres services</p>

                        <ul>
                             <li>.....</li>
                             <li>.....</li>
                             <li>.....</li>
                             <li>.....</li>
                       
                         </ul>  
                        </td>
                     </tr>
                  </tr>



            </table>

     </body>
</html>




1 comment:

  1. vous remarquerez que pour creez un lien hypertexte on utilise le anchor tag
    on lui donne des attribut : href hyper reference qui est la location de la page qu'on veut ouvrir. on peut aussi lui ajouter l'attribut title="le titre voulu" . ce titre sera vu lorsque la souri passera au dessu du lien

    ReplyDelete