courdephilemon: 2015

Saturday 11 April 2015

JOUR 4 suite:Upadte,modification. part1

maintenant qu'on a deja vu comment inserer les donnees dans une base de donnees,
il serai convenable de passer a un autre sujet "la madification".
il arrive de fois que pour une raison ou une autre on a besoin de modifier les donnees qui ont etes
sauvegarder dans une tables d'une base de donnees .

pour modifier les donnees dans une table il faut d'abord connaitre le contenu de la table.
donc on va commencer par afficher le contenu de users_tbl.
ensuite on va cibler un utilisateur pour qui on va changer le numero de telephone ou le email
se basant a son identifiant dans la table(user_id)

<?php
//connection au serveur localhost,avec utilisateur par defaut root et sans mot de passe.
$connection = mysql_connect("localhost","root","")or die("erreur de serveur mysql");
$selection = mysql_select_db("simple_db")or die("ne peut pas connecter a la base de donnees");

?>

<html>
<head><title>reading from databse</title></head>

<body style="text-align:center">
<h1>Nos utilisateurs</h1>
<table align="center" border=1>
<tr><th>Nom</th><th>Prenom</th><th>Mobile</th><th>Email</th></tr>
<?php
//voici comment on selectione tout le contenu d'une table .l'asterisque signifie ici all(toutes les colonnes)
$query = mysql_query("SELECT * FROM users_tbl");

//maintenant on va recuperer le contenu et le pacer dans une collection qu je vais appeler $resultat
//pour avoir tout le resultat il faut que je fasse ce qu'on appelle en programation une boucle
//il yen a 3 FOR,WHILE,DO WHILE
//le plus utilisE c'est le while loop.donc:
while($esultat = mysql_fetch_array($query)){

echo"<tr><td>$esultat[first_name]</td><td>$esultat[last_name]</td>
<td>$esultat[phone]</td><td>$esultat[email]</td></tr>";
}

//remarquez bien que cette fois le php est dans le html combinE.
//l'element table s'ouvre et dedans on etabli une boucle dont le resultat
//se charge de donner du contenu (en completant la table...<tr><td></td></tr>).
?>

</table>

</body>

</html>

Friday 10 April 2015

Ajout formulaire:validation

le mot clef if comme on l'a dit test les consitions et effectue des taches par rapport au resultat du test.

if(isset($_POST['save'])) {

}

test si le bouton a ete pressE grace a la fonction isset()qui est une fonction predefini php et retien "vrai" si la variable $_POST['save'] a etE envoyE au serveur.
en pressant le bouton sauvegarder une serie des variable se cree dependament de l'attribut name de chacun de l'element input .

cette serie est placee dans la collection $_POST[];
array qui post au serveur.

vous remarquerez la concordance des nom de l'input et dans la requete pour sauvegarder dans la base de donnee.

remarquez aussi attentivement la requttte a la base de donnee pour sauvegarder les donnees.
nous creons une variable $query qui contient la fonction mysql_query() avec comme parametre la requette.

on va ajouter une validation au code php.
pour ne pas permettre la sauvegarde si un des de notre formulaire champs est vide.
remplacez le deuxieme php tag par ce script . et observez bien les deux

<?php
// on peut avoir autand des tag php qu'on veut ou carement en avoir un seul
//la on va verifier si l'utilisateur a presser le bouton sauvegarder

if(isset($_POST['save'])){
$first_name = $_POST['first_name'];
$last_name = $_POST['last_name'];
$phone = $_POST['phone'];
$email = $_POST['email'];

//cette condition test si un des champ est vide ,si oui:erreur,sinon(else) sauvegarde
if(empty($first_name) || empty($last_name)||empty($phone)|| empty($email)){

echo"<font color='red'>UNE ERREUR S'EST PRODUITE!<br>remplisses bien les cases</font>";
}
else{

$query = mysql_query("INSERT INTO users_tbl VALUES('','$first_name','$last_name','$phone','$email ') ");
if($query){

echo"<font color='green'>DETAILS SAUVEGARDES AVEC SUCCES!<br>nous vous remercions</font>";
}

}
}
?>

Thursday 9 April 2015

Jour 4:CRUD suite

comme on l'a di au depart php est un langage de programation des sites web dynamiques(web applications).
par dynamisme on sous entend afficher du contenu procedE par un serveur
et le serveur genere un code html qui va etre ensuite interpretE par un navigateur.

php va nous aider a communiquer a notre base de donnees grace au commande sql quon passera dans les fonction predefinis PHP .

creez un dossier dans le www du dossier wamp.
ensuite une fauille appelez la insert.php

<?php

//pour executer n'importe quelle commande a notre base de donnees
//il faut d'abord connecter au serveur mysql et selectioner la base de donnees
//en se servant de la fonction mysql_connect() et de mysql_select_db()

mysql_connect("localhost","root","")or die("ne peut pas connecter au serveur");
mysql_select_db("simple_db")or die("ne peut pas connecter a la base des donnees");

//la fonction die()just apres la connection et la selection se charge de donner un message d'erruer
//lorsque l'une de ces fonction ne marche pas.

?>
<?php
// on peut avoir autand des tag php qu'on veut ou carement en avoir un seul
//la on va verifier si l'utilisateur a presser le bouton sauvegarder
if(isset($_POST['save'])){
$query = mysql_query("INSERT INTO users_tbl VALUES('','$_POST[first_name]','$_POST[last_name]','$_POST[phone]','$_POST[email]')");
if($query){

echo"<font color='green'>DETAILS SAUVEGARDES AVEC SUCCES!<br>nous vous remercions</font>";
}
else{
echo"<font color='red'>UNE ERREUR S'EST PRODUITE!<br>remplisses bien les cases</font>";
}

}

?>

<html>
<head>
<title>Insertion des donnes dans une base de donnees</title>

</head>

<body>
<div align="center">
<h1>Detais du visiteur</h1>
<form method="post" action="#">
Nom: <input type="text" name="first_name"><br>
Prenom:<input type="text" name="last_name"><br>
Phone: <input type="text" name="phone"><br>
Email: <input type="email" name="email"><br>
<input type="submit" name="save" value="sauvegarder">

</form>

</div>

</body>
</html>

JOUR 4: sql suite :CRUD

CRUD est un terme en programation qui signifie:CReate Update Delete

ici create correspond a la creation est l'insertion de donnees.

on a deja creer une base de donnee maintenant on va creer dedans nos tables.
notre premier table va s'appeler users_tbl
le prfix tbl n'est pas obligatoire...c'est just une convention pour notifier que c'est une table.
comme simple_db... notifie que c'est un database.

donc il ya deux manieres de creer une table .soit par commande sql soit par phpmadmin(consu pour faciliter).

donc avec commandes sql il vous faudra ouvrir wamp clicker l'icone et trouver mysql ,
a gauche descender sur myql console et cliquez.

la console s'ouvre et demade un mot de passe... par defaut il y en a pas.

pour commencer pressez enter.
ensuite vous verrez le message d'acceuil suivi de mysql>
c'est la qu'il faut mettre les commandes.
1. show databases;
cette commande liste toutes les bases des donnees deja creez plus le predefinis de mysql.
2.use simple_db;
ici on informe mysql que toutes nos commande suivantes s'effectuerons dans la base de donnee simple_db .

maintenant on cree la table ,tapez enter pour aller a une nouvelle ligne .

3.create table users_tbl(
user_id int primary key auto_increment,
first_name varchar(50) not null,
last_name varchar(50) not null,
phone_no varchar(15) ,
email varchar (100)

);

la on vien de creer une table appelee users_tbl .
cette table a 5 colonnes:userid,first_name,last_name,phone_no,email.
les colonnes sont encore appellees attributs.
les colonnes ont des containtes : datatype suivie de size ,suivi de null ou pas.

le datatype est le type du contenu que peut contenir une colonne (field).
le datatype peut etre :

int pour les nombre entiers.
varchar pour characteres qui pourai varier en terme des nombres des lettres(lettres,chiffres,autres characteres).
char pour les characteres qui ont un nombre precis des lettres comme un zipcode a toujour 4 chiffres,
annee de naissance toujours 4 chiffres etc...
date est un type qui accepte le format date (Y-m-d) Year month day.
date time fait la meme chose mais encore accepte le temp.
le chiffre qui vient apres c'est le size de la colonne(le nombre de charactere qu'une colonne doit contenir).
ensuite le not null specifie que la colonne doit necessairement contenir quelque chose donc ne peut etre vide.
la ou il n'ya pas "not null" c'est que mysql tolere que la colonne soit vide.

la deuxieme facon de gerer les base des donnees est de se servir de phpmyadmin.

ouvrez phpmyadmin cliquez sur la base de donnee simple_db.
dedans vous verrez une case ou vous aller creer la table.
mettez y users_tbl et specifiez a cotE le nombre des colonnes (5 dans notre cas).
cliquez creer. la vous irai la ou vous pouvez creer les colonnes.
creez les colonnes avec les noms qu'on a au dessus.
il ya des colonnes a remplir.
le nom|type|le size|sautez default|sautez collation|sautez attributs|tick null pour email et phone|tick A_I pour user_id|

JOUR 4: sql suite :CRUD

Wednesday 8 April 2015

JOUR 4 : SQL introduction

SQL(structured query language) est un language de requettes a une base de donnee sql(query).
une requette en sql correspond est une commande effectuer contre une base de donnee.
SQL est donc le language qui communique a la base de donnee.
une base de donnee est une colllection des donnees qui ont un lien entre elles:
ex base de donnee familles.
aura une table pour papa,maman, enfant.
chaque table aura par exemple les colonnes : identifiant,nom,post_nom,age,occupation...
l'identifiant est une colonne importante pour une table car elle identifie une rangee specifique pour une table.

pour arranger et bien gerer les bases des donner on se sert des logigiel de bases de donner tel: MS_ACCESS,MS_SQL_SERVER,
ORACLE,MySQ,LSYBASE,DB2 ...il y'en a plusieurs. certains comprennent le sql et d'autre nom.

il exist deux types de commandes DDL(Data definition Language) et DML(data manipulation Language).
le DDL sert a creez une base de donnee et aussi a creez de table,colonnes,vues...
c'est donc la requette de creation.
la requette qui appartien a cette category est le CREATE.
Le DML lui sert a manipuler les donnees deja dans une base des donnee.
les requettes qui appartiennent a cette category sont:SELECT,INSERT,UPDATE,DELETE

la requtte pour creez une base de donnee est la suivante :
CREATE DATABASE nom_de_la_base-de_donnee;

un nom ne peux pas avoir d'espace ,ni commencer par un chiffre,ni avoir de caracteres autre que le enderscore(_).
donc on l'itulise pour espacer.la meme regle s'applique aux tables et colonnes.

pour faire une table c'est :

CREATE TABLE nom_de_la_table(nom_de_la_premiere_colonne,nom_de_la_deuxieme_colonne,nom_de_la_troisieme_colonne...) ;

Pour inserer des donnees dans la colonne s'est:

INSERT INTO nom_de_la_table VALUES('premiere_valeur','deuxieme_valeur','troisieme_valeur');

la deuxieme facons c'est de specifier les colonne dans lesquel on veu inserer.

INSERT INTO nom_de_la_table('premiere_colonne','deuxieme_colonne','troisieme_colonne') VALUES('premiere_valeur','deuxieme_valeur','troisieme_valeur');

pour modifier une valeur dans une table s'est.

UPDATE nom_de_la_table SET nom_de_la_colonne ="valeur voulue" ;

pour effacer une valeur dans une colonne c'est:

DELETE FROM nom_de_la_table WHERE nom_d'une _colonne = "valeur de critere";

pour notre formation on va se servir de phpmyadmin une application qui vien avec wamp.
pour gerer notre base de donnee et executer des taches de creation pour ensuite manipuler avec le code.

ouvrez l'icone wamp server .clickez phpmyadmin.
vous verez just en l'ouvrant un formulaire qui indique indique create database.
metez le nom de votre base de donnee exemple simple_db et creez.

Tuesday 7 April 2015

JOUR 3 :AJOUT NECESSAIRE: CONDITIONAL STATEMENTS

Bonjour.Aujourdhui j'ai jugE bon de parler des conditions en programation PHP avant d'avancer.
ce point au fait devai faire parti du program mais je l'ai omis.
sans lui la logique en soit est sans equilibre.

on se sert des conditions en programation pour effectuer des taches par rapport au resultat du test.
le code a l'interieure est depend du fait que la condition reussit ou echoue.

pour effectuer une condition on se sert des mot clef IF ELSE ELSEIF.

exemple:

if (5>4){
echo "5 est plus grand que 4";
}
else{
echo "5 n'est pas grand que 4 mais le contraire"
}

Dans cet exemple ci haut on test pour savoir si 5 est grand que 4.
si la condition retien "vrai " alors le code entre if block execute autrement (else),
le code dans else execute.

par exemple ici:

if (10==5){
echo "10 equvaut a 5";
}
else{
echo "5 n'est pas egale a 10"
}

la on test de voir si 10 equivaut a 5 ,
la condition va retenir "faux" et donc le code du else bloc va executer.

il arrive parfois des moment ou une conditions peut etre tester plus d'une fois.
exemple :

if (5>6){
echo "5 est plus grand que 6 <br>";
}
elseif (5==6){
echo "5 egale 6 <br> ";
}
else{
echo "5 n'est pas plus grand que 6 et n'est egale a 6";
}

testez vous seul:

<?php

if (5>4){
echo "5 est plus grand que 4 <br>";
}
else{
echo "5 n'est pas grand que 4 mais le contraire <br> ";
}

?>

<?php

if (10==5){
echo "10 equvaut a 5 <br>";
}
else{
echo "5 n'est pas egale a 10 <br>"
}

?>

<?php
if (5>6){
echo "5 est plus grand que 6 <br>";
}
elseif (5==6){
echo "5 egale 6 <br> ";
}
else{
echo "5 n'est pas plus grand que 6 et n'est egale a 6";
}

?>

les conditions se fairons souvent de la sorte:

<?php
//on met nos valeurs dans des variables
$nombre1 = 5;
$nombre2 = 6;

if ($nombre1>$nombre2){
echo "le premier nombre est plus grand que le deuxieme <br>";
}
elseif ($nombre1==$nombre2){
echo "le premier nombre est egale au deuxieme <br> ";
}
else{
echo "le premier nombre n'est pas plus grand que le deuxieme et n'est pas egale au deuxieme ";
}

?>

Sunday 5 April 2015

Jour 3 suite.

parlons des fontions php

quesqu'un fonction?
une fonction est un code ou un bloc des codes qui servent a achever une tache quelconque.
une fonction a une declaration et une definition.

par exemple

function addition(){
//ceci est une declaraation
}
mais ,
function addition(){
$sum = $num1 + $num2 ;
//est declarE et contient une definition :ce que fait la fonction

}

il existe deux tpes de fonctions :
les predefinis et les non predefinis.
les prdefinis sont ceux qui viennent avec le langage php.
les non predefinis sont defini par le programeur lui meme.

ex: echo ,c'est une fonction predefini qui sert a afficher du contenu.
echo"je suis une fonction";
la phrase a l'interieur est le paramettre de la fonction.
le paramettre c'est la partie a executer qu'on passe a une fonction.
c'est souvent entre parentheses.

ex2 la fontion:
function addition(){
$sum = $num1 + $num2 ;
echo $sum;
//est declarE et contient une definition :ce que fait la fonction

}
est non predefini car je la cree et je lui dit ce qu'elle doit faire.

php a plusieur fonctions predefinis.
on y va par exemples.

le point(.) sert de liaisons des deux string(groupe des lettre en guillemet) ou variables en php.

ex. "mon cours va bien"."je suis content";
donne "mon cours va bien je suis content "; en une seule phrase.
on s'en sert aussi pour coller du html au php.

<?php
echo strlen("Hello world!")."<br>"; // retien le nombre du string a interieur
?>

<?php
echo str_word_count("Hello world!")."<br>"; // retien le nombre des mots.
?>

<?php
echo strrev("Hello world!")."<br>"; // retien les mots a l'enver !dlrow olleH
?>

<?php
echo str_replace("world", "Philemon", "Hello world!")."<br>"; // remplace world par Philemon
?>

<?php

//cette fonction elle est non predefini par php
//pour l'executer il faut l'appeller par son nom suivi des parentheses.
function addition(){
$num1 = 10;
$num2 = 20;
$sum = $num1 + $num2 ;
echo "la somme est ".$sum."<br>";

}

addition();

JOUR 3 :PHP FUNCTIONS :ARITHMETICS

Bonjour .
aujourdhui on va etudier comment effectuer des operations arithmetiques avec
le langage PHP ,on va aussi parler des fonctions .

avant de commencer j'aimerai introduire quelque chose de tres important dans la programation:
les variable.
une variable est une reference d'une certaine chambre de la memoire .
la memoire est subdivisee en petites chambres et pour y mettre des donnees on lui attribue un nom.
ce nom en programation s'apelle variable.

on peut y aller!
NB://signifie commentaire... n'est pas interpreter comme code php

<?php

//la c'est une simple initialisations des variable
//ca veu dire qu'on leur passe des valeurs initials
//qui directement sont stocker dans la memoire
//la variable est toujour precedee du signe $.

$nombre1 = 300;
$nombre2 = 200;

?>

<?php
// executons maintenant quelques operations.
//et affichons le resultat.

echo $nombre1 + $nombre2 ;
echo"<br>";
echo $nombre1 - $nombre2 ;
echo"<br>";
echo $nombre1 * $nombre2 ;
echo"<br>";
echo $nombre1 / $nombre2 ;
echo"<br>";

?>

<?php
//on peut aussi proceder ainsi.

$somme = $nombre1 + $nombre2 ;
$difference = $nombre1 - $nombre2 ;
$produit = $nombre1 * $nombre2 ;
$quotient = $nombre1 / $nombre2 ;

echo $somme ;
echo"<br>";
echo $difference;
echo"<br>";
echo $produit;
echo"<br>";
echo $quotient;

?>

Saturday 4 April 2015

Dispalying content suite:

Bonjour .
on a vu hier commment afficher du contenu avec le langage PHP
au fait php englobe html et la logique (Le code php).
c'est pour cela que vous verrez que le code en soit contien du php ex :echo.
et du html dedans ex: "<h1>contenu</h1>"

HTML a lui seul ne peut pas faire un site web dynamique.(juste le look mais pas la fonctionalite)
Alors pour arriver a ajouter la fonctionalite il faut du php.

si je veu afficher un div qui tien ces sources peut etre d'une base de donnee ou d'un texfile.
je dois le faire ainsi:

<?php

echo"<div class='content1' style='width:300px;background:blue;color:white'>"
echo" je suis le premier contenu du site web";
echo"</div>";

?>

ou carement ceci en simplifiE

<?php

echo"<div class='content1' style='width:300px;background:blue;color:white'>
je suis le premier contenu du site web
</div>";

?>

le echo se charge d'afficher du contenu avec php.
tout tag peu se faire afficher de la maniere.

Friday 3 April 2015

JOUR 2 Afficher du contenu avec PHP

Maintenant que l'on a introduit php . je pense que nous sommes pret
a prendre un elan pour commencer.
pour commencer je pense que vous avez deja installer le logiciel wamp server.
qui va nous servir de serveur local pour notre formation.

comme debut on va commencer par afficher le "hello world avec php"

cette fois parce que c'est un site web dynamique qui necessite l'intervention d'un serveur,
il va faloir crrer un sous dossier dans le dossier www du dossier wamp dans le disc C.
et c'est dans ce dossier qu'irons tous les fichiers.

pour demarer le serveur clickez l'icone "start wamp server dans le menu ou sur le bureau".
ensuite vous verrai l'icone wamp dans la barre de taches. clickez dessus ensuite clickez localhost (serveur local)

vous verrez la page d'acceuil...
et la vous verrez aussi le dossier que vous venez de creer dans la rubric my projects.

creez une feulle dans dreamweaver mais cette fois avec come extension php exemple: demo.php

mettez dedans ceci.

<?php echo "HELLO WORLD" ;?>

enregistrez et executer dans le navigateur en tappant dans l'address :localhost/le nom du dossier/demo.php

vous devez voir HELLO WORLD a l'ecran.

example 2.

ajouter ceci.

<?php echo "<h1>mon site web dynamique avec php</h1>";?> de preference au dessu du premier php tag

Wednesday 1 April 2015

Jour 1 PHP: INTRODUCTION

CONGRATULATIONS

si vous lizez ce message ca veux dire que vous avez completer le premier module de notre formation :HTML & CSS3.

Le deuxieme module sera PHP .
sans pour autant tarder on passe a l'introduction.

PHP Hpertext Preprocessor comme le nom l'indique est le language qui est proceder avant que le html soit meme lu par le serveur web.(Hypertext = text html Preprocessor=procede avant).

Php ajoute le dynamisme au site web qui ne contenait que du html (static).
par dinamisme on sous entend le fait d'afficher du contenu qui a d'abor ete proceder par un serveur web
contrairement au pure html qui n'est qu'interpreter par un navigateur.

php sert aussi a collectioner les donnes saisi dans un formulaire web pour ensuite les envoyer a un serveur qui se charge de les traiter et de renvoyer une reponse ou un resultat.

php est un language open source cela etant ,plusieurs developpeur prefere l'associer a la base de donnees mysql qui aussi est un open source.

open source signifie que c'est gratuit et le code source est disponible . ca veu dire que vous pouvez demander une version de php ou le logiciel mysql et faire votre propre version.

la syntaxe pour un script php est comme suit :

<?php le code php va ici dedans ?>

pour executer un script php on a besoin d'un serveur web comme apache, IIS de microsoft...
comme apache est aussi open source... alors il convient pour plusieur developpeur.

donc vous devez avoir un serveur web .
il est preferable d'avoir le logiciel wamp server qui instal APACHE,MYSQL,PHP en un coup sur le WINDOWS platform... d'ou son nom WAMP.

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>