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>




JOUR 5 :suite

le mem menu mais avec du contenu


<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>

JOUR5: creation des menu en html

pour permettre la navigation facile entre pages web et ressources .on doit faire recour au menu.
quand vous visiter un site web ,la partie souvent d'en haut comporte des liens hypertextes allignE verticalement ou comme la plus part  horizontalement.

aujourdhui on va parler de menu html :

pour creer un menu en html  on a pas besoin de tag special menu. mais le standard html 5  a  ajouter l'element
<nav> pour navigation qu'on met autour du menu a afficher .

dans le nav on  cree une liste dans la quelle on  met des liens hypertextes  redirigeant a d'autres ressource du site web.
tou comme on peu  creer une table qui contient le menu suspendu au dessu de la page.

le plus simple menu que je puisse faire est  :

creez un document apele menu1.html...

<html>
     <head>
           <title>JOUR5 : 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</a></td>
                     <td><a href="#">Services</a></td><td><a href="#">Projets</a></td><td><a                                           href="#">Contacts</a></td>

                  </tr>



            </table>

     </body>
</html>