Vous êtes sur la page 1sur 16

Code source du site Page index.

html :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Espace informatique</title> <link rel="stylesheet" type="text/css" href='global.css'/> </head> <body> <div id="global"> <!--Entte--> <div id="entete"> <h1><img alt=" Mon espace pdagogique" src="Titre_site1.png" /> </h1> <br> <p> Ensemble pour un apprentisage efficace et efficieux </p> </div> <!--Entte--> <!---Menu vertical---> <ul id="menu1"> <!--<li class="en cours"> --><li><a href='index.html'> <span> Acceuil </span> </a> </li> <li> <a href='didactique.html'> <span> Didactique </span> </a> </li> <li> <a href='seance-apprentisage.html'> <span> Sances d'apprentissage </span> </a> </li> <li> <a href='fiches-pedagogiques.html'> <span> Fiches pdagogiques </span> </a> </li>

<li> <a href='formulaire.html'> <span> Contact </span> </a> </li> </ul>

<!---Menu horizontal--->

<!---<ul id="menu2"> <li class="en cours"> <a href="file:///D|/AIGEME/bureau/bureau/mon site/acceuil.htm"> <span> Prsentation </span> </a> </li> <li> <a href=""> <span> Plan du site </span> </a> </li> <li> <a href="file:///D|/AIGEME/bureau/mon site/seance-apprentisage.html"> <span> Forum </span> </a> </li> <li> <a href="file:///D|/AIGEME/bureau/mon site/fiches-pedagogiques.html"> <span> Contact </span> </a> </li> </ul>

<!--Contenu--> <div id="contenu"> <div id="acceuil-col1"> <p>

Ce site est destin aux professeurs stagiaires (matire : informatique) qui font leur formation aux Centres Rgionaux des Mtiers dducation et de Formation (CRMEF) du Ministre dducation Marocaine, pour rpondre leurs besoins pour la prparation des sances (cours, travail pratique, activits et devoirsetc.).</p> </div> <!--#acceuil-col1--> <div id="acceuil-col2">

<p> Il sera un outil efficace pour les stagiaires pour prparer leur mise en situation professionnelle (MSP) dans les tablissements daccueil et galement aprs leur affectation dans les tablissements o ils vont exercer leurs fonctions autant que professeurs titulariss. </p> </div> <!--#acceuil-col2-->

</div><!--contenu--> </div><!--global-->

</body>

</html>

Feuille CSS
/*=========================== Feuille de style de mon site ===========================*/ /*Styles globaux de la page*/ body{ margin: 0; padding: 10px; font-size: 80%; font-family: Arial, Helvetica, sans-serif; color: white; background: #122323 ; } #global { width: 766px; margin-left:auto; margin-right: auto; } /*============ En-tte #entete { ==============*/

height: 90px; padding: 0 6px; } #entete h1 { float:left; margin: 0 20px 0 0; padding-top: 25px; font-size: 40px; font-weight: normal; text-transform: lowercase; } #entete p { margin: 0; padding-top: 45px; } #menu1 { float:left; width:140px; margin:0; padding:0; list-style:none; color:black; } #menu1 li { margin-bottom:7px; } #menu1 li a {

display: block; padding: 10px; text-decoration:none; color: black; background:#BEDEDE; } #menu1 li a span { display:block; top: -1px; display: block; padding: 6px 10px 2px 10px; } /* style au survol et page en cours*/ #menu1 li.en-cours a, #menu1 li.en-cours a span, { background:yellow; } /*#menu1 li a:hover*/ #menu1 li a:focus span { background:red; } #menu1 li a:focus { background:green; }

#menu1 li a:hover span { background:#008A8A; color:white; } #menu1 li a:focus span { background:black; } /*------menu horizontal---------------*/ /* Pour le menu, on utilise des styles compltement diffrents */ #menu2 { float:right; width:140px; margin:0; padding:0; list-style:none; color:black; } #menu2 { height:100px; margin:0; padding:0; list-style: none; } #menu2 li { float: left;

margin-right: 6px; } #menu2 li a { float: left; /* Un display: block aurait t suffisant, mais sans float IE6 bugue */ padding: 0; text-decoration: none; /*color: #113333;*/ /*background:#0C6 left top;*/ } #menu2 a span { float: left; /* Un display: block aurait t suffisant, mais sans float IE6 bugue */ position: relative; left:1px; height: 30px; padding: 5px 10px; background:#C93; } #menu2 .en-cours a, #menu2 .en-cours a span, #menu2 a:hover, #menu2 a:hover span, #menu2 a:focus, #menu2 a:focus span { background:#FF0066; }

/* /*

Bloc de contenu Conteneur */

*/

#contenu { margin:center; /*margin:90px;*/ color:black; padding:20px; background:white; } /* Styles des lments de contenu */

Page fiches-pdagogiques.html :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Fiches pdagogiques</title> <link rel="stylesheet" type="text/css" href="global.css"/> </head> <body> <div id="global"> <!--Entte--> <div id="entete"> <h1><img alt=" Mon espace pdagogique" src="Titre_site1.png" /> </h1> <br>

<p> Ensemble pour un apprentisage efficace et efficieux </p> </div> <!--Entte--> <!---Menu vertical---> <ul id="menu1"> <li class="en cours"> <a href='index.html'> <span> Acceuil </span> </a> </li> <li> <a href='didactique.html'> <span> Didactique </span> </a> </li> <li> <a href='seance-apprentisage.html'> <span> Sances d'apprentissage </span> </a> </li> <li> <a href='fiches-pedagogiques.html'> <span> Fiches pdagogiques </span> </a> </li> <li> <a href='formulaire.html'> <span> Contact </span> </a> </li> </ul> <div id="contenu"> <h2>les fiches pdagogiques </h2> Les fiches pdagogiques sont les outils de prparation d'une sance d'apprentisages .<p> Avant d'laborer une fiche, il faut consacrer un temps la prparation qui consite tudier comment concevoir ta sance. <p>La conception,la recherche des situations d'apprentissage adquates au public cible pemet de faire une scnarisation rpondant aux besoins du form et les objectifs pdagogiques. </p> </p> </div> </div> </body> </html>

Page seance-apprentissage.html :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Sances d'apprentissage</title>

<link rel="stylesheet" type="text/css" href="global.css"/> </head> <body> <div id="global"> <!--Entte--> <div id="entete"> <h1><img alt=" Mon espace pdagogique" src="Titre_site1.png" /> </h1> <br> <p> Ensemble pour un apprentisage efficace et efficieux </p> </div> <!--Entte--> <!---Menu vertical---> <ul id="menu1"> <li class="en cours"> <a href='index.html'> <span> Acceuil </span> </a> </li> <li> <a href='didactique.html'> <span> Didactique </span> </a> </li> <li> <a href='seance-apprentisage.html'> <span> Sances d'apprentissage </span> </a> </li> <li> <a href='fiches-pedagogiques.html'> <span> Fiches pdagogiques </span> </a> </li> <li> <a href='formulaire.html'> <span> Contact </span> </a> </li> </ul> <div id="contenu"> <p>Toute sance d'apprentissage ncessite une prparation primordiale pour rpondre aux besoins des apprenants.</p> <p>Il faut fixer le thme traiter en laborant les objectifs pdagogiques et choisir la situation dapprentissage adquate.</p> <p>Il faut grer cette sance en menant une action de gestion intelligente des ressources afin de satisfaire notre objectif professionnel.</p> </div>

</body> </html>

Page didactique.html :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Didactique</title>

<link rel="stylesheet" type="text/css" href="global.css"/> </head> <body> <div id="global"> <!--Entte--> <div id="entete"> <h1><img alt=" Mon espace pdagogique" src="Titre_site1.png" /> </h1> <br> <p> Ensemble pour un apprentisage efficace et efficieux </p> </div> <!--Entte--> <!---Menu vertical---> <ul id="menu1"> <li class="en cours"> <a href='index.html'> <span> Acceuil </span> </a> </li> <li> <a href='didactique.html'> <span> Didactique </span> </a> </li> <li> <a href='seance-apprentisage.html'> <span> Sances d'apprentissage </span> </a> </li> <li> <a href='fiches-pedagogiques.html'> <span> Fiches pdagogiques </span> </a> </li> <li> <a href='formulaire.html'> <span> Contact </span> </a> </li>

</ul> <div id="contenu"> <div id="acceuil-col1"> <h1>La didactique</h1> <h4>1. Dfinition </h4> La didactique d'une discipline est la science qui tudie, pour un domaine particulier, les phnomnes d'enseignement, les conditions de la transmission de la culture propre une institution et les conditions de l'acquisition de connaissances par un apprenant. Son objet est de dlimiter la nature du savoir en jeu, des relations entre le savoir, le professeur et les lves, de grer l'volution de ces savoirs au cours de l'enseignement. La didactique des sciences et mathmatiques peut s'tendre d'autres disciplines ds lors que serait en cause une intention d'enseignement. <h4>2. Le triangle didactique </h4> La structure didactique est constitue de 3 ples : lenseignant, l'lve, le savoir. La didactique s'intresse aux interactions entre ces trois ples qui se manifestent en situation d'enseignement. La nature spcifique des savoirs en jeu, les relations entretenues avec eux par le professeur et les lves, l'volution de ces rapports en cours d'enseignement, voil les lments essentiels qu'tudie la didactique . Le triangle didactique reprsente les relations entre enseignant, lve et savoir.</p> <p> </div> </div> source: http://www4.ac-lille.fr/~ienlens/file/Trousseau/Pedagogie_et_didactique.pdf</p> </body> </html>

Page formulaire.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Formulaire</title>

<link rel="stylesheet" type="text/css" href="global.css"/>

</head>

<body> <div id="global"> <!--Entte--> <div id="entete"> <h1><img alt=" Mon espace pdagogique" src="Titre_site1.png" /> </h1> <br> <p> Ensemble pour un apprentisage efficace et efficieux </p> </div> <!--Entte--> <!---Menu vertical---> <ul id="menu1"> <li class="en cours"> <a href='index.html'> <span> Acceuil </span> </a> </li> <li> <a href="didactique.html"> <span> Didactique </span> </a> </li> <li> <a href="seance-apprentisage.htm"> <span> Sances d'apprentissage </span> </a> </li> <li> <a href="fiches-pedagogiques.htm"> <span> Fiches pdagogiques </span> </a> </li> <li> <a href="formulaire.htm"> <span> Contact </span> </a> </li> </ul> <div id="contenu"> <form method="post" action="verif.php"> <p> Nom : <input type="text" name="nom" size="12"><br> Prnom : <input type="text" name="prenom" size="12"><br>

Fonction: <input type="text" name="fonction" size="12"><br> <label for="interet">Intrt :</label><br/> <input name="interet" type="checkbox" value="fiches" /> fiches pdagogiques<br/> <input name="interet" type="checkbox" value="Didactique" /> Didactique<br/> <input name="interet" type="checkbox" value="MSP" /> Mise en situation professionnelle<br> <label>Commentaire:</label> <br> <textarea name="commentaire" cols="50" rows="10"></textarea><br> Votre email : <input type="text" name="email" size="20"> </p> <p> <input type="reset" name="effacer" value="Effacer le formulaire" /> <input type="submit" value="OK">

</p> </form> <?php $email = $_POST['email']; $point = strpos($email,"."); $aroba = strpos($email,"@");

if($point=='') { echo "Votre email doit comporter un <b>point</b>"; }

elseif($aroba=='') { echo "Votre email doit comporter un <b>'@'</b>"; } else { echo "Votre email est: '<a href=\"mailto:"."$email"."\"><b>$email</b></a>'"; } ?> </div>

</body> </html>

Fichier : verif.php
<?php $email = $_POST['email']; $point = strpos($email,"."); $aroba = strpos($email,"@");

if($point=='') { echo "Votre email doit comporter un <b>point</b>"; } elseif($aroba=='') { echo "Votre email doit comporter un <b>'@'</b>";

} else { echo "Votre email est: '<a href=\"mailto:"."$email"."\"><b>$email</b></a>'"; } ?>

Techniques
Pour les vidos que je compte insrer, qui sont publis sur Youtube : Exemple : <object width="560" height="315"><param name="movie" value="//www.youtube.com/v/fjh4jmt4T64?version=3&amp;hl=fr_FR&amp;rel=0"></param><p aram name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="//www.youtube.com/v/fjh4jmt4T64?version=3&amp;hl=fr_FR&amp;rel=0" type="application/x-shockwave-flash" width="560" height="315" allowscriptaccess="always" allowfullscreen="true"></embed></object> Code pris du Youtoube dans longlet intgrer

Vous aimerez peut-être aussi