Saturday 28 February 2015

JOUR 4: structuration d'une page web a l'aide des html div tag

<html>
    <head>
          <title>JOUR 4 :web divs</title>
    <thead>


    <body>
          <div align="center" >

          <font color="maroon" size="4">html div tag center</font>

         
          <p>le div tag en html est util pour sectioner une page web en petits morceau <br>a fin faciliter le styling de la page</p>
          <p>le rendement du div tag est identique a celuides tables html<br>

          ce tag est beacoup populaire car facile pour gerer le style des section de la page <br>et est plus fin en terme de chargement de la page web</p>

         <div>
         <div align="left" >

          <font color="maroon" size="4">html div tag left </font>

         
          <p>le div tag en html est util pour sectioner une page web en petits morceau <br>a fin faciliter le styling de la page</p>
          <p>le rendement du div tag est identique a celuides tables html<br>

          ce tag est beacoup populaire car facile pour gerer le style des section de la page <br>et est plus fin en terme de chargement de la page web</p>

         <div>
         <div align="right" >

          <font color="maroon" size="4">html div tag right</font>

         
          <p>le div tag en html est util pour sectioner une page web en petits morceau <br>a fin faciliter le styling de la page</p>
          <p>le rendement du div tag est identique a celuides tables html<br>

          ce tag est beacoup populaire car facile pour gerer le style des section de la page <br>et est plus fin en terme de chargement de la page web</p>

         <div>


       <!-- ce tag en le voyan pour l'instant vous croirez que ce pareil au paragraph tag...

      non car le paragraph a etE destine juste pour les paragraph tandis que ce div tag est un bloc qui peut tou contenir... text,image,audio,video,menu.. -->
        <!-- il s'optimise quand on y ajoute du css : on y sera : ) -->
   </body>

</html>

Friday 27 February 2015

JOUR3: structuration d'une page web a l'aide des table html

<html>
      <head>
            <title>Jour trois suite | tables</title>
      </head>

      <body>
           <table border="0" width="1000px" align="center">
           <tr>
                     <td bgcolor="indigo" width="800px" height="100px" colspan="3">menu va ici</td>
                 </tr>
                 <tr>
                     <td bgcolor="#eee" width="800px" height="300px">contenu 1</td>
                     <td bgcolor="#eee" width="800px" height="300px">contenu 2</td>
                     <td bgcolor="#eee" width="800px" height="300px">contenu 3</td>
                 </tr>
                 <tr>
                     <td bgcolor="#ccc" width="800px" height="100px">infrapaginales</td>
                     <td bgcolor="#ccc" width="800px" height="100px">infrapaginales</td>
                     <td bgcolor="#ccc" width="800px" height="100px">infrapaginales</td>
                 </tr>
         

           </table>

           <!-- le program d'aujourdhui se base sur la structuration d'une page  a laide d'une table -->
           <!-- on cree une table ,on lui donne une bordure de 0 donc invisible -->
           <!-- on cree trois rangees , qui contiennent trois colones   -->
           <!-- la premiere colonne de la rangee premiere a un attribut special: colspan=3 -->
           <!-- ca permet d'elargir cette colonne a equivaloir les trois colonnes  d'en bas -->
           <!--  vous remaquerez aussi le bgcolor qui donne la couleur a la colonne. NB <td> -->
           <!--  vous constaterez aussi le width et le heigh en pixel . NB <td> -->






      </body>

</html>

Thursday 26 February 2015

JOUR 3. structuration de la page web : les Table

html>

      <head>

              <title>les table en html</title>

     </head>

<body>

<h1>les tables html</h1>

<table border="1">

         <tr>

                 <td>premiere colonne </td>

                 <td>deuxieme colonne </td>

           </tr>

           <tr>

                <td>premiere colonne </td>

                 <td>deuxieme colonne </td>

         </tr>

          <tr>

                <td>premiere colonne </td>

                 <td>deuxieme colonne </td>

          </tr>

          <tr>

               <td>premiere colonne </td>

               <td>deuxieme colonne </td>

         </tr>

   

</table>
<br>

<!-- voici la mme table mais avec un titre au dessu des colonne -->
<table border="1">

         <tr>
             <th> premieres donnees</th>
             <th> deuxiemes donnees</th>

         </tr>

         <tr>

                 <td>premiere colonne </td>

                 <td>deuxieme colonne </td>

           </tr>

           <tr>

                <td>premiere colonne </td>

                 <td>deuxieme colonne </td>

         </tr>

          <tr>

                <td>premiere colonne </td>

                 <td>deuxieme colonne </td>

          </tr>

          <tr>

               <td>premiere colonne </td>

               <td>deuxieme colonne </td>

         </tr>

   

</table>

</body>

</html>

Wednesday 25 February 2015

JOUR 2 HTML IMAGES

        </head>

             <body>
           
                 <h2>Cours de Programtion</h2>
                 <h5>JOUR 2: HTML Image Tag</h5>
           
                <!-- aujourdhui on passe au jour 2 de notre program -->
                <!-- les images sur le web -->
                <!-- pour afficher une image sur une page web on utilise le img tag defini par html-->
                <!--voici la syntaxe de base -->

                <img src="./welcome.jpg" />

                <!--vous remarquerez que le img tag n'as pas de closing tag comme d'autres tag -->
                <!--ce tag ou element contient un attribut , le src signifian source-->
                <!--ce dernier qui a comme valeur: la source relative de l'image (location de l'image)-->
                <!--ce dernier qui a comme valeur: la source relative de l'image (location de l'image)-->
                <!--dans le cas au dessu la location est -->
                <br>
                <!-- essayons d'ajouter quelques qttributs a notre image-->
                <img src="./welcome.jpg"  width="300" height="200"/>

                <!-- je vien de donner a l'image une largeur  widht ,et une hauteur height-->
                <br>
                 <img src="./welcome.jpg"  width="300" height="200" align="left"/>
                 <img src="./welcome.jpg"  width="300" height="200" align="right"/>

                <!-- je vien d'aligner l'image relativement dans le coin gauche ou adroite de l'autre   -->
             
                 <img src="./welcome.jpg"  width="300" height="200"  align="middle">
              <hr>
                  <img src="./welcome.jpg"  width="300" height="200"  align="absmiddle"> le texte est au milieu<br>
              <hr>
                  <img src="./welcome.jpg"  width="300" height="200"  align=""> le texte est en bas<br>
              <hr>  
                  <img src="./welcome.jpg"  width="300" height="200"  align="top"> le texte est en haut
              <hr>
              <img src="./welcome.jpg"  width="300" height="200"  alt="welcome image" title="welcome image">
              <!-- cette derniere image a deux attribut impotants:   -->
              <!-- alt:alternative texte c'est au cas ou l'image ne peut etre vu dans le gavigateur   -->
              <!-- souvent pour des ecrants qui n'affichent pas les images -->
              <!-- ou encore si l'utilisateur choisit de ne pas voir les image -->
              <!-- essayez de changer le nom de l'image et voyez l'effet   -->

              <!-- l'autre attribut c'est le titre -->
              <!--title qui affiche une breve description lorsque la souris  est au dessus de l'image -->

            </body>


</html>

Tuesday 24 February 2015

Text formatting suite et fin

<html>
        <head>
              <title>Day-one-fin | text formatting </title>
        </head>

             <body>
             <p align="center">
                 <b>Cours de Programtion</b>
             </p>
             <!-- ajout sur les elements web et attributs -->
             <!-- on peut donner a tout un paragraphe une couleur que l'on veu -->
             <font color="blue">
                 <p align="center" >
           
                     Bienvenue sur mon site de programation web<br>
                     restons ensemble tout au long de la formation web .<br>
                     le html en etant le pilier.<br>
           
                 <p>
             </font>
             <!-- tout comme vous pouvez donnez a une phrase dans un paragraphe une couleur specifique-->
             <p align="center" >
                     la seconde ligne du paragraphe seule est en bleu</br>
                     <font color="orange">Bienvenue sur mon site de programation web</font><br>
                     restons ensemble tout au long de la formation web .<br>
                     le html en etant le pilier.<br>
           
                 <p>
                 <!--ensuite on peut avoir un troisieme paragraphe -->
                 <!--separee d'une ligne horizontale  -->
                 <hr width="500">

                 <!-- ce hr tag sighifie horizontal rule en anglai : ligne horizontale -->
                 <!-- ceci est une liste sur une page web -->
                 <!-- au cas ou vous avez une lites des objets a publier -->
               
               
                 <!-- cette liste n'est pas numerotE :unordered liste-->
                 <p >
                  <ul>

                      <li>objet numero </li>
                      <li>objet numero </li>
                      <li>objet numero </li>
                  </ul>
                <!-- cette liste est  numerotE  : ordered liste-->
                 <ol>
                      <li>objet numero </li>
                      <li>objet numero </li>
                      <li>objet numero </li>
                 </ol>
                 </p>
             

            </body>


</html>

TEXT FORMATTING SUITE

JOUR1  SUITE :

<html>
        <head>
              <title>Day-one-suite text formatting</title>
        </head>

             <body>
                  <!-- textes en differentes couleurs -->
               

                  <font color="red" size="5" >je suis un texte en rouge</font><br>
                  <font color="blue" size="5">je suis un texte en bleu</font><br>
                  <font color="green" size="5">je suis un texte en vert</font><br>
                  <font color="yellow" size="5">je suis un texte en jaune</font><br>
                  <font color="skyblue" size="5">je suis un texte en bleu ciel</font><br>
                  <font color="black" size="5">je suis un texte en noire</font><br>
                  <font color="orange" size="5">je suis un texte en orange</font><br>
                  <font color="maroon" size="5">je suis un texte en marone</font>

                  <!-- le font tag est un tag permettant de donner une couleur a un text ,une largeur precisE par le size-->
                  <!-- ici je voudrai que vous contatez que chaque font tag, donc chaque ligne est un element html-->
                  <!-- cet element contien un attribut .exemple 'color' ,'size' et l'attribut contient une valeur ex: red,5-->

                  <!-- si on veu souligner un mot ou une phrase voici la syntaxe -->
                  <br>
                  <br>
                  <u><font color="maroon" size="5">je suis un texte en marone ,espace des deux lignes et souligne</font></u>

            </body>


</html>

Monday 23 February 2015

JOUR 1: TEXT FORMATTING IN HTML

Bonjour monsieur
La fois derniere  dans mon dernier poste j'ai introduit HTML .
aujourdhui nous allons commencer avec notre program proprement dit.
JOUR 1: Creation d'une page web :entete,corps,elemet,attribut ,formats de textes.

dans les lignes des codes je mettrai soigneusement des commentaires comme suit de <!-- "commentaire" -->
cette syntaxe indique que la phrase entre les symboles est un commentaire et donc ne peut etre vu par le visiteur du site.

on y va:

<html>
        <head>
     <!-- ca c'est l'entete du document ou l'on peu mettre deja le titre ;qui est visible dans la tete du navigateur -->
              <title>ma page web - mon site en marche</title>      
        </head>
     
         <body>
          <!-- ca c'est le debut du corp de la page web... la partie visible dans le navigateur -->
          <!-- dans cette partie on peu tou mettre  image,text,music,formulaire, etc-->
          <!-- aujourdhui on etudie les types de text sur sune page web -->
       
          <h1>Cours de programation en ligne </h1>
           <!-- ce texte s'affiche en gras caractere car c'est un header du type 1  -->
            <!-- essayez de changer le chiffre a l'interieur des tags (1-6) et constater le changement  -->
           <br>
           <h5>Par toussaint a monsieur Philemon</h5>
           <!-- vous constaterez que au fur et a mesure que le chiffre augmente le caractere diminue  -->
           <!-- apres le header nous pouvons inserer un paragraph comme suit  -->

          <p>
           Bienvenue sur le site de philemon.<br><!-- br signifie break, ligne suivante-->
           sur ce site on va etudier beaucoup des choses ensemble.Entre autre :<br>
           Le development web avec le langage HTML,PHP,CSS.<br>
          s'il vous plait restez branchez comme nous avancons ensemble<br>
       
         </p>
          <br>
           <!--ca c'etai l'exemple d'un paragraphe , on peu en avoir autant que l'on veu sur une page web-->
         
         <!--  dans  le paragraph tag on peu avoir des text gros, italiques, soulignes .exemple :-->
           <br>
            <p>
           Bienvenue sur le site de philemon.<br><!--vous pouvez changer le contenuu...-->
           sur ce site on va etudier beaucoup des choses ensemble.Entre autre :<br>
           Le development web avec le langage<b> HTML,PHP,CSS.</b><br>
         <!-- les langages sont en gros grace au b tag  qui symbolise bold en anglais-->

          <i>s'il vous plait restez branchez comme nous avancons ensemble</i><br>
         <!--la derniere phrase du paragraphe est en italique -->

       
         </p>
          <br>
         <!-- unparagraphe peut etre aligne : a gauche, a droite ,au centre de la page -->
          <p align="right">
           Bienvenue sur le site de philemon.<br><!--vous pouvez changer le contenuu...-->
           sur ce site on va etudier beaucoup des choses ensemble.Entre autre :<br>
           Le development web avec le langage<b> HTML,PHP,CSS.</b><br>
         <!-- les langages sont en gros grace au b tag  qui symbolise bold en anglais-->

          <i>s'il vous plait restez branchez comme nous avancons ensemble</i><br>
         <!--la derniere phrase du paragraphe est en italique -->

       
         </p>
    <p align="center">
           Bienvenue sur le site de philemon.<br><!--vous pouvez changer le contenuu...-->
           sur ce site on va etudier beaucoup des choses ensemble.Entre autre :<br>
           Le development web avec le langage<b> HTML,PHP,CSS.</b><br>
         <!-- les langages sont en gros grace au b tag  qui symbolise bold en anglais-->

          <i>s'il vous plait restez branchez comme nous avancons ensemble</i><br>
         <!--la derniere phrase du paragraphe est en italique -->

       
         </p>
        </body>


</html>









Saturday 21 February 2015

on commence avec la creation d'une page web :
une page web est structurE  en element du DOM (document object module)
ce n'est autre que l'hierarchie que suivent les element sur une page web.
un element est la moindre particule d'un site web .. exemple un paragraph, une image,un text, un lien;

donc en soit une page web est composE d plusieurs elements qu'on appelle Tag en anglais.
peut etre majuscule ou minuscule.
 chaque element s'ouvre et se referme quelque part.

la page commence par l'element douverture <HTML>
se termine par </HTML>

apres on a l'entete qui suit.
<HEAD> </HEAD>
l'entete est la partie qui contien le titre et la description du contenu de la page web ou du site.

apres l'entete on a le corps
cette parie comporte le contenu essentiel de la page en soit. c'est la partie visible par le visiteur du site web.
sa syntaxe est : <BODY>  </BODY>
en bref la page au debut ressemble a ceci
<HTML>
             <HEAD> <TITLE>my first page</TITLE></HEAD>
               <BODY>
                                le contenue du site va ici

               </BODY>

</HTML>



PROGRAM 1:HyperText Markup Language :
*Le html est un Language de balisage(sert a definir la forme que prendra le document web).
*besoin d'avoir juste un text-editor ex: dreamweaver,notepad,sublime text... pas besoin de serveur local pour l'instant.
*program en detail:
jour1-creation d'une page web :entete,corps,elemet,attribut ,formats de textes
--------------------------------------------
jour2-insertion d'images et alignement + attributs
---------------------------------------------------
jour3- structuration d'une page web a l'aide des tables
-----------------------------------------------------
jour4 - structuration d'une page web a l'aide des division
----------------------------------------------------
jour5 - creation d'un menu
-------------------------------------------------
jour6 -liaisons entre pages web
--------------------------------------------------
jour7- les formulaires
--------------------------------------------------
jour8 -insertion des medias: audio et/ou visuel.
--------------------------------------------------
jour 9 ,10 - creation d'un site web entier.
------------------------------------------------
Conclusion + questions .

Friday 20 February 2015

tres cher Philemon, si vous voyez ce poste
donc vous etes bel et bien sur le blog courdephilemon. nous allons debuter avec la formation en development web .
Des notions des bases aux notions avances...
Donc tenez vous pret pour parcourir ensemble ce voyage interessant :)
Je vous demanderez d'etre attentif ,
Le langage HTML n'est pas juste un cours comme les autre. c'est le pilier du development web. si vous le ratez ... ce serai domage. Esperons bien commencer et finir en beaute!!!