courdephilemon: March 2015

Tuesday 31 March 2015

PROGRAM PHP

day 1: introduction
day 2: php displaying content.
day 3: php functions: string, arithmatic.
day 4:php sql intro .
day 5:php insert in database
day 6 php delete in database
day 7:php update database
day 8: login
day 9 :php sign up
day 10: php contact form. + php email

Friday 20 March 2015

image du menu avec css3menu

votre page devra ressembler a ca

la partie a selectionner est en jaune et le menu va se positioner la ou vous voyez les traits rouge

SUITE: CSS JOUR 5 Links and menus

Bonsoir si vous observez attentivement le document dernier contenant le css menu vous verez que la partie style est vaste et donc prend du temps a tout ecrire... ce qui n'est pas bien en ce qui concerne la productivite.
imaginer vous avez un projet que vous estimer remetre apres disons 7h de travail... mais vous consommer 2 heures pour juste le menu... ce n'est pas du tout proffesionelle.

CSS3MENU va nous aider a augmenter notre productivite en faisant et publiant instantanement des menus simples et complexes dans un temps convenable pour notre development web.

Allons y:

* ouvrez le logiciel , vous verrez deja etablit un menu par defaut avec trois liens (item0, item1,item3)
avant de faire un menu on doit etablir sur papier que veut on avoir dans le menu.

* apres avoir etablis le contenu du menu (pour moi dans un premier temp: Acceuil,A propos, Services,Contacts ). clickez sur le premier lien du menu (item0) . regardez en dessous dans la rubrique proprietes changez les valeur par defaut :

Text: Acceuil
Link: home.html
Target: "laisser vide"

clickez sur le deuxieme lien et faite de meme

Text:A propos
Link: about.html
Target: "laisser vide"

clickez sur le troisieme lien et faite de meme

Text: Services
Link: services.html
Target: "laisser vide"

pour creez un quatrieme lien :
clickez sur la bar d'en haut de la fenetre et assurez vous que aucun sous menu n'est selectionE.
clickez maintenat le bouton le bouton vert de la bar d'outil .un quatrieme lien apparaitra . clickez le et changez les valeurs comme on l'a fait avant.

Text: Contacts
Link: contacts.html
Target: "laisser vide"

retournez au deuxieme lien et clickez dessus.. vous verez un sous menu s'afficher.
clickez le premier sous lien (item 1 0 signifie premier 0 sous item du lien 1 :about ) ensuite cliquez le bouton rouge avec un moins en blanc pour effacer ce sous lien( on ferra les sous lien apres ca) .
effacez ainsi les trois sous liens.

creez ensuite une page html et copiez y ceci.

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

</head>

<body>

<table align="center" bgcolor="#fafafa" cellpadding="10" cellspacing="10">
<tr>
<td>

</td>

<tr>
<td bgcolor="#eee">
<h1>Bienvenu sur notre site</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 >
<img src="welcome.jpg">
<p>mot de bienvenu</p>
<p>Le contenu du site peu aller ici</p>
</td>
</tr>
</tr>

</table>

</body>
</html>

enregistrez ce document : pour moi... cssmenu.html
notre menu est pret pour etre importer sur la page.

clickez l'option insert to page de la bare d'outils.
un dialog apparaitra selectionez la page que vous venez de creer vous la verai dans le dialog
ensuite selectioner la partie d'en haut de la page la premiere rangee de la table est vide .cliquez y elle changera en jaune ensuite vous verrez un texte y apparaitre (css3 menu...) .
et c'est tout . clickez maintenant sur publish et voila....!

Wednesday 18 March 2015

CSS DROPDOWN MENU

bonjour . ce poste montre comment faire un menu stylE acec sous menu.
remarquez la section css ...
et commentez

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


<style type="text/css">
ul#css3menu0,ul#css3menu0 ul{
margin:0;list-style:none;padding:0;background-color:#dedede;border-width:1px;border-style:solid;border-color:#5f5f5f;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;}
ul#css3menu0 ul{
display:none;position:absolute;left:0;top:100%;-moz-box-shadow:3.5px 3.5px 5px #000000;-webkit-box-shadow:3.5px 3.5px 5px #000000;box-shadow:3.5px 3.5px 5px #000000;background-color:#424542;border-width:2px;border-radius:6px;-moz-border-radius:6px;-webkit-border-radius:6px;border-color:#FFF;padding:0 10px 10px;}
ul#css3menu0 li:hover>*{
display:block;}
ul#css3menu0 li{
position:relative;display:block;white-space:nowrap;font-size:0;float:left;}
ul#css3menu0 li:hover{
z-index:1;}
ul#css3menu0{
font-size:0;z-index:999;position:relative;display:inline-block;zoom:1;padding:0;
*display:inline;}
* html ul#css3menu0 li a{
display:inline-block;}
ul#css3menu0>li{
margin:0;}
ul#css3menu0 a:active, ul#css3menu0 a:focus{
outline-style:none;}
ul#css3menu0 a{
display:block;vertical-align:middle;text-align:left;text-decoration:none;font:bold 14px Trebuchet MS;color:#000;text-shadow:#FFF 0 0 1px;cursor:pointer;padding:10px;background-color:#222222;background-image:url("mainbk.png");background-repeat:repeat;background-position:0 0;border-width:0 0 0 1px;border-style:solid;border-color:#C0C0C0;}
ul#css3menu0 ul li{
float:none;margin:10px 0 0;}
ul#css3menu0 ul a{
text-align:left;padding:4px;background-color:#424542;background-image:none;border-width:0;border-radius:0px;-moz-border-radius:0px;-webkit-border-radius:0px;font:14px Tahoma;color:#FFF;text-decoration:none;text-shadow:#FFF 0 0 0;}
ul#css3menu0 li:hover>a,ul#css3menu0 li a.pressed{
background-color:#61a700;border-color:#C0C0C0;border-style:solid;color:#333;text-shadow:#FFF 0 0 1px;background-image:url("mainbk.png");background-position:0 100px;}
ul#css3menu0 img{
border:none;vertical-align:middle;margin-right:10px;}
ul#css3menu0 span{
display:block;overflow:visible;background-position:right center;background-repeat:no-repeat;padding-right:0px;}
ul#css3menu0 > li.switch{
display:none;cursor:pointer;width:25px;height:20px;padding:10px;}
ul#css3menu0 > li.switch:before{
content:"";position:absolute;display:block;height:4px;width:25px;border-radius:4px;background:#000;-moz-box-shadow:0 8px #000, 0 16px #000;-webkit-box-shadow:0 8px #000, 0 16px #000;box-shadow:0 8px #000, 0 16px #000;}
ul#css3menu0 > li.switch:hover:before{
background:#333;-moz-box-shadow:0 8px #333, 0 16px #333;-webkit-box-shadow:0 8px #333, 0 16px #333;box-shadow:0 8px #333, 0 16px #333;}
.c3m-switch-input{
display:none;}
ul#css3menu0 li:hover>a,ul#css3menu0 li > a.pressed{
background-color:#61a700;background-image:url("mainbk.png");background-position:0 100px;border-style:solid;border-color:#C0C0C0;color:#333;text-decoration:none;text-shadow:#FFF 0 0 1px;}
ul#css3menu0 ul li:hover>a,ul#css3menu0 ul li > a.pressed{
background-color:#424542;background-image:none;color:#6bd600;text-decoration:none;text-shadow:#FFF 0 0 0;}
ul#css3menu0 li.topfirst>a{
border-width:0;border-radius:4px 0 0 4px;-moz-border-radius:4px 0 0 4px;-webkit-border-radius:4px;-webkit-border-top-right-radius:0;-webkit-border-bottom-right-radius:0;}
ul#css3menu0 li.toplast>a{
border-radius:0 4px 4px 0;-moz-border-radius:0 4px 4px 0;-webkit-border-radius:0;-webkit-border-top-right-radius:4px;-webkit-border-bottom-right-radius:4px;}
@media screen and (max-width: 768px) {
ul#css3menu0 > li {
position: initial;}
ul#css3menu0 ul .submenu,ul#css3menu0 li > ul {
left: 0; right:auto; top: 100%;}
ul#css3menu0 .submenu,ul#css3menu0 ul,ul#css3menu0 .column {
-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;padding-right: 0;width: 100% !important;}
}
@media screen and (max-width: 225px) {
ul#css3menu0 {
width: 100%;}
ul#css3menu0 > li {
display: none; position: relative; width: 100% !important;}
ul#css3menu0 > li.switch,.c3m-switch-input:checked + ul#css3menu0 > li + li {
display: block;}
ul#css3menu0 > li.switch > label { position: absolute;cursor: pointer;top: 0;left: 0;right: 0;bottom: 0;}}
</style>



</head>

<body>

<table align="center" bgcolor="#fafafa" cellpadding="10" cellspacing="10">
<tr>
<td>


<ul id="css3menu0" class="topmenu">

<li class="switch"><label onclick="" for="css3menu-switcher"></label></li>
<li class="topfirst"><a href="#" title="hom page" style="height:20px;line-height:20px;"><img src="about_files/css3menu0/home.png" alt=""/>Home</a></li>

<li class="topmenu"><a href="#" style="height:20px;line-height:20px;"><img src="about_files/css3menu0/service.png" alt=""/>About </a></li>

<li class="toplast"><a href="#" style="height:20px;line-height:20px;"><span><img src="about_files/css3menu0/samples.png" alt=""/>services</span></a>

<ul>

<li><a href="#">project consultancy</a></li>

<li><a href="#">computer maintenance</a></li>

<li><a href="#">web design</a></li>

</ul></li>

</ul>


</td>

<tr>
<td 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 >
<img src="welcome.jpg">
<p>mot de bienvenu</p>
<p>Le contenu du site peu aller ici</p>
</td>
</tr>
</tr>

</table>

</body>
</html>

Sunday 15 March 2015

Saturday 14 March 2015

Division styling Ajout.

Bonsoir.
je pense que vous avez remarque comment les div tags sont utiliser pour structurer une page web en sections.
Une notion nouvelle sur la quelle j'aimerai insister est l'attribut class qu'on donne a un element , on peu le donner a n'importe quelle element pas seulment le div tag.

cet attribut permet de poser une etiquette sur un element pour ensuite cibler l'element par son etiquette lorsqu'il s'agira de styler la page.

l'importance de cet attribut est que il arrive de fois qu'on aie par exemple 4 parragraph sur une page mais si on veu leurs attribuer different style comment fait on???
on leur donne differentes classe et la ils seront different parce que ils n'ont pas la meme classe.
dans ce cas au lieu de cibler le p selector dans css comme suit p{}
on va plutot dire peut etre .paragraph1{ } .paragraph2{ } etc
le point devant le selector indique au css que ceci cible une classe dans la page web.
observer bien les div tags vous verrai l'attribut en question.

s'il ya des question je pourrai y repondre volontier.

Friday 13 March 2015

Bonjour monsieur.
Aujourd'hui on va etudier comment donner du style a l'element div sur une page web.
l'element div est utiliser pour fragemnter une page web en peti morceaux.d'ou le nom div "DIVISION"
html5 a un equivalent qui est le section tag.

creez un nouveau document html .

copiez y ceci:

<html>
<head>
<title>styling div tags with css3</title>

<style type="text/css">

/*body:ici je donne du style a toute la page en generale*/

body{
background-color:#eee;
font-family:verdana;
font-size:13px;

}

/*main class:ici je cible seulemet le div tag portant la class main*/
/*je lui donne largeur et une hauteur 98% du body qui est directement son parentn de contenir toute l'espace du navigateur: 100%*/
/*enfin je lui donne une bordure fine grise*/
/*margin: 0 auto dit a l'element de'auto placer de sorte a etre au milieu (gauche et droite)*/
.main{
width:80%;
height:100%;

margin:0 auto;
border:1px solid #bbb;
margin-bottom:20px;
}

/*:ici je donne du style a la division d'en haut*/
/*width 100% signifie qu'il va etre large a egalite de son parent directe(main class) ainsi que le height*/
.head{
width:100%;
height:100px;
background-color:skyblue;
margin:0 auto;
border:1px solid #bbb;
margin-bottom:20px;;
}
/*:ici je cible seulement le paragraph qui se trouve dans l'element contenant head comme class*/
/*le margin-top etablit une espace en haut du paragraph par rapport a l'element directement au dessu*/
.head p{

margin-top:50px;
}
/*ici je cible le a tag(link) qui se trouve dans l'element de class*/
/*je lui donne le padding ,ces chiffres se lisent comme l'horloge du haut a droite ,bas , et gauche */
.head a:link{
margin:30px;
padding:2px 15px 2px 15px;
font-weight:bold;
font-size:16px;
color:maroon;
text-decoration:none;
background-color:transparent;
}
.head a:hover{
margin:30px;
padding:2px 15px 2px 15px;
font-weight:bold;
font-size:16px;
color:maroon;
text-decoration:none;
background-color:white;
}

.intro{
width:98%;
height:200px;
background-color:#fff;
margin:0 auto;
border:1px solid #bbb;
margin-bottom:20px;
}

.middle{
width:30%;
height:200px;
background-color:#fff;
margin:15px;
border:1px solid #bbb;
margin-bottom:20px;
float:left;

}
.middle h1{
font-size:13px;
margin:2px;
}
.clear{
clear:both;
}

.footer{
width:100%;
height:81px;
background-color:skyblue;
margin:0 auto;
border:1px solid #bbb;

}

</style>

</head>

<body>

<body>

<div class="main">

<div class="head">
<p style="text-align:center">
<a href="#home">Home</a><a href="#home">About</a><a href="#home">Contacts</a>
<input type="text" name="search" placeholder="enter search item"> <input type="button" value="search">
</p>

</div>

<div class="intro">
<p style="margin:10px">
Bienvenu chers client!<br>
company est a votre disponibilite.<br>
nous offront des services de qualites, par commande du client.<br>
et nous serons ravi de subvenir a vos desir chers client.
</p>

</div>

<div class="middle">
<h1>Nos services</h1>

</div>

<div class="middle">
<h1>Membres</h1>

</div>

<div class="middle">
<h1>partenaires</h1>
</div>
<div class="clear"></div>

<div class="footer">
<p style="text-align:center">copyright &copy philemon web-development-group</p>
</div>

</div>

</body>

</html>

Thursday 12 March 2015

JOUR 3: TABLE STYLING WITH CSS3

voici un exemple qui illustre cooment donner du style a une table html
explication entre lignes css

<html>
<head>
<title>Text stylyng with css</title>

<style type="text/css">

body{
padding:100px;
font-family:helvetica;

}
h1{
color:purple;

}
span{

margin-left:100px;
}
a:link{
text-decoration:none;
color:orange;
}
a:hover{
text-decoration:underline;
color:red;
}
a:visited{
text-decoration:underline;
color:red;
}

/* le style de la table commence ici*/
/* j'attribue a la table une largeur de 650px*/
/* ensuite je lui donne une bordure fine de 1px et une couleur grise legere*/

table{
width:650px;

border:1px solid #eee;

}
/* ici je cible seulement l'entete de la table (th= table header)*/
/* je lui donne une couleur de fond orange*/
/* ensuite le padding-top :definit une espace de 2px entre le text et le bord de l'element*/
/* enfin j'attribue a l'entete une hauteur de 50px .*/

table tr th{
background-color:orange;
padding-top:5px;
height:50px;

}

/* ici le vertical-align:top signifie que le text commence en haut*/
/* par defaut il ya une espace de marge dans le th . on l'enleve pour un bon rendement*/
/* remarquez ici que le padding definit une espace entre le contenu de la colonne(td) et ses 4 bord*/
/*pour definir l'espace seulment a gauche utilisez padding-left , a droite padding-right,*/
/* au dessus padding-top et en bas padding-bottom*/
table tr td{
background-color:#eee;
vertical-align:top;
height:20px;
padding:2px;

}
/* ici je donne une action de changer de couleur lorsque la souri parcour une colonne (td)*/

table tr td:hover{
background-color:#ccc;

}

</style>

</head>

<body>
<h1 >Philemon.com <span><a href="#1">About</a> | <a href="#2">contact</a> | <a href="#3">Blog</a></span></h1>
<br>
<p style="color:#000;font-family:helvetica;">Bienvenu sur mon site web cher visiteur<br>

sur ce site vous trouverez toutes les informations possible a mon propos<br>
ainsi que vous aurez la possibilite de me glisser un mot sur la rubrique contact<br>
en plus de cela je vous donne l'opportunites de discuter aisement <br>
avec d'autre membre de mon blog. Portez vous bien :)</p>

<h2>Program</h2>

<table>
<tr>
<th>Day1</th><th>Day2</th><th>Day3</th><th>Day4</th>

</tr>
<tr>
<td>html intro</td><td>html text</td><td>html paragraph</td><td>html tables</td>
</tr>

<tr>
<td>css3 intro</td><td>css3 text</td><td>css3 paragraph</td><td>css3 tables</td>
</tr>

</table>

</body>

</html>

Wednesday 11 March 2015

jour 2 : suite

danc cette suite j'attribue un width au 3eme paragraph . ensuite je lui attribue une couleur de fond #eee qui est une variante du gris (#aaa = gris jusque a #fff= blanc).
<html>
<head>
<title>Text stylyng with css</title>

<style type="text/css">

body{
padding:100px;
font-family:helvetica;

}
h1{
color:purple;

}
span{

margin-left:100px;
}
a:link{
text-decoration:none;
color:orange;
}
a:hover{
text-decoration:underline;
color:red;
}

div{
width:200px;height:200px;
float:left;
border:1px solid #ccc;
margin:2px;
padding:2px;
}
div:hover{
background-color:#fafafa;
}
input[type=submit]{
background-color:orange;
color:white;
}

</style>

</head>

<body>
<h1 >Philemon.com <span><a href="#1">About</a> | <a href="#2">contact</a> | <a href="#3">Blog</a></span></h1>
<br>
<p style="color:indigo;font-family:verdana;">Bienvenu sur mon site web cher visiteur<br>

sur ce site vous trouverez toutes les informations possible a mon propos<br>
ainsi que vous aurez la possibilite de me glisser un mot sur la rubrique contact<br>
en plus de cela je vous donne l'opportunites de discuter aisement <br>
avec d'autre membre de mon blog. Portez vous bien :)</p>

<p style="font-size:18px;font-weight:bold;">Bienvenu sur mon site web cher visiteur</p>

<p style="color:magenta;font-family:helvetica;background-color:#eee;width:650px">Bienvenu sur mon site web cher visiteur<br>

sur ce site vous trouverez toutes les informations possible a mon propos<br>
ainsi que vous aurez la possibilite de me glisser un mot sur la rubrique contact<br>
en plus de cela je vous donne l'opportunites de discuter aisement <br>
avec d'autre membre de mon blog. Portez vous bien :)</p>

<div>
un contenu

</div>
<div>
une image

</div>
<div>
Login

<form>
Username:<input type="text" name="username" >
Password:<input type="text" name="password" >
<input type="submit" name="submit" value="login" >

</form>

</div>

</body>

</html>

CSS3 : day 2. paragraph styling

Hier on a vu comment faire du internal css. et comment donner a un text un style de fonte, une couleur...
aujourdhui on va etudier comment donner du style a tout un paragraph en faisant du inline css. couleur de fonte,style de fonte, verdana, helvetica essayez aussi sans-serif et courier. on verra aussi comment ajouter de l'epaisseur a un text dans un p tag . lui donner aussi la grosseur par le css attribute font-weight: bold

creez un documeent html :

<html>
<head>
<title>Text stylyng with css</title>

<style type="text/css">

body{
padding:100px;
font-family:helvetica;

}
h1{
color:purple;

}
span{

margin-left:100px;
}
a:link{
text-decoration:none;
color:orange;
}
a:hover{
text-decoration:underline;
color:red;
}

div{
width:200px;height:200px;
float:left;
border:1px solid #ccc;
margin:2px;
padding:2px;
}
div:hover{
background-color:#fafafa;
}
input[type=submit]{
background-color:orange;
color:white;
}

</style>

</head>

<body>
<h1 >Philemon.com <span><a href="#1">About</a> | <a href="#2">contact</a> | <a href="#3">Blog</a></span></h1>
<br>
<p style="color:indigo;font-family:verdana;">Bienvenu sur mon site web cher visiteur<br>

sur ce site vous trouverez toutes les informations possible a mon propos<br>
ainsi que vous aurez la possibilite de me glisser un mot sur la rubrique contact<br>
en plus de cela je vous donne l'opportunites de discuter aisement <br>
avec d'autre membre de mon blog. Portez vous bien :)</p>

<p style="font-size:18px;font-weight:bold;">Bienvenu sur mon site web cher visiteur</p>

<p style="color:magenta;font-family:helvetica;">Bienvenu sur mon site web cher visiteur<br>

sur ce site vous trouverez toutes les informations possible a mon propos<br>
ainsi que vous aurez la possibilite de me glisser un mot sur la rubrique contact<br>
en plus de cela je vous donne l'opportunites de discuter aisement <br>
avec d'autre membre de mon blog. Portez vous bien :)</p>

<div>
un contenu

</div>
<div>
une image

</div>
<div>
Login

<form>
Username:<input type="text" name="username" >
Password:<input type="text" name="password" >
<input type="submit" name="submit" value="login" >

</form>

</div>

</body>

</html>

Tuesday 10 March 2015

Jour 1: text styling

le css est vraiment important pour le design d'une page . non pas pour just embellir la page mais en meme temp attirer la curiositer du visiteur. le choix des text, couleurs,images est vital pour un site web.
un design simple et concis fait la difference.

ce poste comporte la deuxime facon d'incorporer du css sur un site ou une page web.
ce le internal css.

<html>
<head>
<title>Text stylyng with css</title>

<style type="text/css">

body{
padding:100px;
font-family:helvetica;

}
h1{
color:purple;

}
span{

margin-left:100px;
}
a:link{
text-decoration:none;
color:orange;
}
a:hover{
text-decoration:underline;
color:red;
}
p{
color:maroon;
font-family: ;
}
div{
width:200px;height:200px;
float:left;
border:1px solid #ccc;
margin:2px;
padding:2px;
}
div:hover{
background-color:#fafafa;
}
input[type=submit]{
background-color:orange;
color:white;
}

</style>

</head>

<body>
<h1 >Philemon.com <span><a href="#1">About</a> | <a href="#2">contact</a> | <a href="#3">Blog</a></span></h1>
<br>
<p>Bienvenu sur mon site web cher visiteur<br>

sur ce site vous trouverez toutes les informations possible a mon propos<br>
ainsi que vous aurez la possibilite de me glisser un mot sur la rubrique contact<br>
en plus de cela je vous donne l'opportunites de discuter aisement <br>
avec d'autre membre de mon blog. Portez vous bien :)</p>

<div>
un contenu

</div>
<div>
une image

</div>
<div>
Login

<form>
Username:<input type="text" name="username" >
Password:<input type="text" name="password" >
<input type="submit" name="submit" value="login" >

</form>

</div>

</body>

</html>

CSS PROGRAM

jour 1.text formatting

jour 2.paragraph styling

jour 3.table styling

jour 4.division styling

jour 5.links and menu styling

Saturday 7 March 2015

CSS :cascading style sheet introduction

Le css comme son nom lindique est une feulle qui definit style destinee soit a une page web ou a tout un site web . il existe 3 facons d'ajouter du css a une page web : external css, internal css et inline css.

on va commencer par un example d'external stylesheet :

un external css est une feuille qui contient le stle d'une page et des element que contien la page.

pour que le style fasse effet il faut importer la feuille dans la page html comme suit:

etape 1- creez une page nomez la cssintro.html

<html>
<head>
<title>import du css sur une page web</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
<div align="center">
<a href="#1">Acceuil</a> <a href="#2">A propos</a> <a href="#3">Contacts</a> <a href="#4">Blog</a>
</div>

<div align="center">
<p>
<h1>
Bienvenue sur notre site web
</h1>
cette page web demontre l'import de css sur une page web<br>
cette page web demontre l'import de css sur une page web<br>
<img src="welcome.jpg">
</p>

</div>

</body>

</html>

etape 2 creez maintenant une page CSS appelez la style.css

body{
background-color:#ccc;
color:grey;

}

a:link{
color:white;
text-decoration:none;
margin:2px;
padding:2px;
background-color:#000;
border:2px solid #eee;
width:80px;
font-weight:bold;
font-size:18px;

}
a:active{
color:blue;
text-decoration:underline;
margin:2px;
padding:2px;
background-color:#000;
border:2px solid #eee;
width:80px;

}
a:visited{
color:white;
text-decoration:none;
margin:2px;
padding:2px;
background-color:#000;
border:2px solid #eee;
width:80px;

}
a:hover{
color:black;
text-decoration:none;
margin:2px;
padding:2px;
background-color:#fff;
border:2px solid #eee;
width:80px;

}
img{
padding:2px;
border:1px solid #fff;

}

Friday 6 March 2015

JOUR 8 : ajout des media audio-visuel sur une page web

sur notre program le jour 8 indique insertion des medias audio visuel sur une page web
ce poste illustre comment le faire.

pour afficher une video on utilise le video tag qui a son tour contien un sous element source tag .
ce dernier definit la source:location de la video a afficher, l'attribut type definit le format de la video a afficher.
comme vous le constater notre video comporte deux source , c'est pour de raisons de compatibilitE, cerains naigateur lisent seulement du ogg tandis que d'autres lisent de l' mp4. alors mettres deux sources differentes donc deux formats de video resoud le problem.
le width et le hight donnent une dimension en pixel a la video a diffuser.
l'attribut controls de l'element video permet d'afficher les commandes de la video(volume,play,pause,elargir)

<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">
ma video

                      <video width="300" height="300" controls >
<source = "myvideo.mp4" type="video/mp4">
                                <source = "myvideo.ogg" type="video/ogg">
   </video>

</td>
</tr>
</tr>

</table>

</body>
</html>

Thursday 5 March 2015

JOUR 7 suite

Hier on a etudier comment faire un simple formulaire de login et registration sur une page web

on a vu un formulaire comportant deux champs : username ,password

et l'autre reclamment le num de telephone,l'email address et le nom.

ces champ sont des simples champs de text (type="text")

aujourdhuit on va ajouter un bouton a notre login form ensuite on va demander a l'utilisateur d'accepter nos termes et condition en cliquant le checkbox en dessous du formulaire .

pour bien arranger les champs d'un formulaire il est conseillE de les mettre dans une table.

alons y :

<html>
<head>
<title>jour 7 suite | web forms</title>
</head>

<body>
<table align="center" bgcolor="#fafafa" cellpadding="10" cellspacing="10">
<tr>
<td><a href="#">Acceuil</a></td><td><a href="about.html">A propos</td>
<td><a href="sevice.html">Services</a></td><td><a href="#">Projets</a></td><td><a href="#">Contacts</a></td>
<tr>
<td colspan="5" bgcolor="#eee">
<h1>Bienvenue</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">
<form>
<h3>join us today</h3>
<table>
<tr>
<td>username</td><td><input type="text" name="username"></td>
</tr>
<tr>
<td>username</td><td><input type="password" name="password"></td>
</tr>
<tr>
<td>phone</td><td><input type="text" name="phone"></td>
</tr>
<tr>
<td>email</td><td><input type="password" name="email"></td>
</tr>
<tr>
<td>country</td>
<td>
<select>
<option>Congo</option>
<option>Rwanda</option>
<option>Burundi</option>
<option>Tanzania</option>
<option>Kenya</option>

</select>

</td>
</tr>
<tr>
<td>city</td><td><input type="password" name="city"></td>
</tr>
<tr>
<td><input type="submit" value="join us"></td>
<td><input type="checkbox" value="true">accept our terms and conditions</td>
</tr>

</table>
</form>
</td>
</tr>
</tr>

</table>

</body>

</html>

Wednesday 4 March 2015

JOUR 7: les formulaires html

<html>

<head>

<title>les formulaires en html</title>
</head>

<body bgcolor="#eee">
<h1>les formulaire web</h1>

<div align="right">
<form>
username:<input type="text" name="username"> Password: <input type="text" name="username">
</form>
</div>

<p>
aujourdhui comme prevu on va etudier les formulaires web<br>
Un formulaire est un element html qui sert a collectioner les donnes d'un utilisateur<br>
pour ensuite les proceder et les donnes un feedback par un language dynamique comme le php,asp,c#,jsp<br>
la syntaxe pour faire un formulaire est comme suit :

</p>

<form>
<font color="indigo"><h4>Creez votre compte</h4></font>
Nom : <input type="text" name="username" ><br>
Phone: <input type="password" name="password"><br>
Email: <input type="password" name="password">

</form>
<p>la plus simple forme de formulaire html </p>
<p>le input tag est l'element qui represente une case a remplir <br>
l'attribut type specifie si le contenu a recevoir sera soit un text,nombre,checkbox,radio button<br>
l'attribut name specifie le nom qu'on attribue a la case, ce nom servira lorsqu'il sera question de proceder<br>
les donnees remplies dans les cases.
</p>

</body>

</html>