création cours web, ajout ressources, tp js, fiches css, suppression anciens tp

web/JS/README.md

@@ -275,3 +275,11 @@ document.write ("Résultat ",a," + ",b," = ",resultat);
 
 - Ouvrez le fichier HTML à l'aide du navigateur Firefox et observez le résultat.
    as et bs sont de type string, a et b sont maintenant des nombres, le résultat est maintenant correct.
+
+-------
+
+Auteur : Florian Mathieu
+
+Licence CC BY NC
+
+<a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/"><img alt="Licence Creative Commons" style="border-width:0" src="https://i.creativecommons.org/l/by-nc-sa/4.0/88x31.png" /></a> <br />Ce cours est mis à disposition selon les termes de la <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/">Licence Creative Commons Attribution - Pas d’Utilisation Commerciale - Partage dans les Mêmes Conditions 4.0 International</a>.

web/README.md

@@ -18,7 +18,7 @@ Ces mots "cliquables" sont appelés hyperliens et sont souvent soulignés et en
 
 ![premier_site](assets/premier_site.png)
 
-Cette première page web est toujours consultable [ici]( http://info.cern.ch/hypertext/WWW/TheProject.html).
+Cette première page web est toujours consultable ***[ici]( http://info.cern.ch/hypertext/WWW/TheProject.html).***
 
 Tim Berners-Lee développe le premier navigateur web (logiciel permettant de lire des pages contenant des hypertextes), il l'appelle simplement "***WorldWideWeb***". Il faudra attendre 1993 et l'arrivée du navigateur web "NCSA Mosaic" pour que le web commence à devenir populaire en dehors du petit monde de la recherche.
 
@@ -26,6 +26,8 @@ Techniquement le web se base sur trois choses : le protocole *HTTP* (HyperText T
 
 Une chose très importante à bien avoir à l'esprit : beaucoup de personnes confondent "web" et "internet". Même si le "web" "s'appuie" sur internet, les deux choses n'ont rien à voir puisqu'"internet" est un "réseau de réseaux" s'appuyant sur le protocole IP (voir le module Internet) alors que, comme nous venons de le voir, le web est la combinaison de trois technologies : HTTP, URL et HTML. D'ailleurs on trouve autre chose que le "web" sur internet, par exemple, les emails avec le protocole SMTP (Simple Mail Transfert Protocol) et les transferts de fichiers avec le protocole FTP (File Transfert Protocol).
 
+-----------
+
 ## Comment ?
 
 Les navigateurs interprètent des **codes** (HTML et CSS) afin d’afficher des pages Web. Il s’agit de langages informatiques qui permettent de créer des sites web.
@@ -41,4 +43,47 @@ Pour l'instant, nous allons retenir deux éléments de cette définition «conç
 
 Grâce au HTML vous allez pouvoir, dans votre navigateur (Firefox, Chrome, Opera,....), afficher du texte, afficher des images, proposer des hyperliens (liens vers d'autres pages web), afficher des formulaires et même maintenant afficher des vidéos (grâce à la dernière version du HTML, l'HTML5).
 
-HTML n'est pas un langage de programmation (comme le Python par exemple), ici, pas question de conditions, de boucles....c'est un langage de description.
+HTML n'est pas un langage de programmation (comme le Python par exemple), ici, pas question de conditions, de boucles....c'est un langage de description.
+
+Le langage CSS (Cascade Style Sheets, feuilles de style en cascade) est venu compléter le langage HTML en 1996. Son rôle est de gérer l’apparence de la page web (agencement, positionnement, décoration, couleurs, taille du texte, etc.).
+
+Autrement dit, le contenu est écrit dans le fichier HTML et la mise en forme est écrite dans le fichier CSS.
+
+Vous pouvez examiner le code html du site du lycée :
+
+https://charlotte-perriand.enthdf.fr -> clic droit sur la page -> afficher code source 
+
+Vous devriez avoir quelque chose comme ça :
+
+![site_genech](assets/site_genech.png)
+
+Nous verrons dans un prochaine exercice ce que tout cela signifie.
+
+-------
+
+## Ressources 
+
+En attendant, si vous souhaitez en savoir plus avant d'attaquer les activités en classe, voici quelques ressources :
+
+- [MDN Web Docs](https://developer.mozilla.org/fr/docs/Learn) : Une ressource complète, écrite par Mozilla, pour les développeurs web. Les guides d'apprentissage du HTML et du CSS sont excellents pour les débutants.
+- [Codecademy](https://www.codecademy.com/learn/learn-html) : Des cours interactifs pour apprendre le HTML et le CSS. Leur format pratique est excellent pour se familiariser avec ces langages.
+- [W3Schools](https://www.w3schools.com/html/) : Une autre excellente ressource avec des exemples de code et des quiz pour tester la compréhension. Il s'agit d'un site déployé par le World Wide Web Consortium, c'est à dire les personnes chargées de définir les règles d'utilisation du web.
+- [freeCodeCamp](https://www.freecodecamp.org/learn/responsive-web-design/) : Un cours gratuit qui couvre à la fois le HTML et le CSS, ainsi que d'autres aspects de la conception web réactive.
+
+- [FlexboxFroggy](https://flexboxfroggy.com/#fr): Probablement mon outil préféré pour apprendre le CSS. En utilisant les règles du CSS, vous verrez une grenouille se déplacer sur votre écran selon ce que vous aurez écrit.
+-  [Grid Garden](https://cssgridgarden.com/#fr) qui est un jeu similaire pour apprendre le  CSS Grid Layout. 
+- [Code With Blocks](https://codewithblocks.com/new) : Permet de mieux se représenter l'arborescence d'une page html, à l'aide de blocs. 
+- [CSS Diner](https://flukeout.github.io) : Permet d'apprendre à manier les selecteurs CSS.
+- [SmolCSS](https://smolcss.dev) : Une fois que vous maitriserez le CSS...Dans une dizaine d'années donc.
+
+Enfin, vous trouverez dans le répertoire [ressources](ressources/)
+
+Merci à @kompose_ sur Twitter pour les liens
+
+-------------------
+
+Auteur : Florian Mathieu
+
+Licence CC BY NC
+
+<a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/"><img alt="Licence Creative Commons" style="border-width:0" src="https://i.creativecommons.org/l/by-nc-sa/4.0/88x31.png" /></a> <br />Ce cours est mis à disposition selon les termes de la <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/">Licence Creative Commons Attribution - Pas d’Utilisation Commerciale - Partage dans les Mêmes Conditions 4.0 International</a>.

web/tp/1/ProgrammationWEB.html

@@ -1,119 +0,0 @@
-<!DOCTYPE html>
-<html>
-    <head>
-        <meta charset="utf-8" />
-        <link rel="stylesheet" href="style.css" />
-        <title>Découverte du HTML</title>
-    </head>
-    <body>
-    <!-- titre principal en tête de votre page -->                       
-           
-                    <h1 id="banniere"> WEB</h1>
-                  
-     <!-- Récapitulatif sur les balises HTML que j'ai découvertes durant cet exercice-->       
-            <h2> Les balises HTML que j'ai découvertes</h2>
-			<p>En synthèse, compléter le tableau suivant :</p>
-
-	<!-- Présentation des informations sous la forme tabulaire-->       
-		<table style="width:75%">
-			<tr>
-				<th style="width:15%">Balise</th>
-				<th style="width:30%">Description</th>
-				<th style="width:30%">Exemple d'utilisation</th>
-			</tr>
-			<tr>
-				<td>&lt;!-- --></td>
-				<td>Commentaire</td>
-				<td>&lt;!-- ici un commentaire --></td>
-			</tr>
-			<tr>
-				<td>&lt;p></td>
-				<td>Paragraphe</td>
-				<td>&lt;p>Ceci est un paragraphe.&lt;/p></td>
-			</tr>
-			<tr>
-				<td>&lt;h1> à &lt;h6></td>
-				<td></td>
-				<td></td>
-			</tr>
-			<tr>
-				<td>&lt;br /></td>
-				<td></td>
-				<td></td>
-			</tr>
-			<tr>
-				<td>&lt;strong></td>
-				<td></td>
-				<td></td>
-			</tr>
-			<tr>
-				<td>&lt;ul></td>
-				<td></td>
-				<td></td>
-			</tr>
-			<tr>
-				<td>&lt;ol></td>
-				<td></td>
-				<td></td>
-			</tr>
-			<tr>
-				<td>&lt;li></td>
-				<td></td>
-				<td></td>
-			</tr>
-			<tr>
-				<td>&lt;dt></td>
-				<td></td>
-				<td></td>
-			</tr>
-			<tr>
-				<td>&lt;table></td>
-				<td></td>
-				<td></td>
-			</tr>
-			<tr>
-				<td>&lt;a></td>
-				<td></td>
-				<td></td>
-			</tr>
-			<tr>
-				<td>&lt;img /></td>
-				<td></td>
-				<td></td>
-			</tr>
-			<tr>
-				<td>&lt;hr /></td>
-				<td></td>
-				<td></td>
-			</tr>
-		</table>
-
-		<p>La ciel est <span style="color:blue">bleu</span> comme la <strong>mer</strong>.</p>
-		<!-- photos des personnages qui ont marqué l'informatique en lien avec leur page wikipedia -->
-		<!-- les photos sont enregistrées dans le dossier images/grandsNoms -->
-		
-			 <h2> Les grands noms de l'informatique</h2>
-            <ul>
-				<li><a href="#" title="Architecture des ordinateurs" >John Von Neumann 1903-1957</a></li>
-				<li><a href="#" title="Premier compilateur ; langage COBOL" >Grace Hopper 1906-1992</a></li>
-				<li><a href="#" title="Fondements théoriques de l'informatique ; Machine de Turing ; décryptage de la machine Enigma utilisée par les nazis" >Alan Turing 1912-1954</a></li>
-				<li><a href="#" title="Inventeur du langage C ; co-développeur du système d'exploitation Unix" >Dennis Ritchie 1941-2011</a></li>
-				<li><a href="#" title="Le père du logiciel libre" >Richard Stallman 1953-</a></li>
-				<li><a href="#" title="L'inventeur du Web" >Tim Berners-Lee 1955-</a></li>
-				<li><a href="#" title="Créateur du noyau du système d'exploitation Linux en 1991" >Linus Torvalds 1969-</a></li>
-		     </ul>
-           
-         <!-- pied de page. Liens vers mes sites préférés -->		   
-            <footer>
-                <div id="mes_liens">
-                    <h3>Mes sites préférés</h3>
-                    <ul>
-                        <li><a href="https://developer.mozilla.org/fr/docs/Web">HTML5, CSS3, javaScript, AJAX</a></li>
-                        <li><a href="https://openclassrooms.com/fr/courses/1603881-apprenez-a-creer-votre-site-web-avec-html5-et-css3">OpenClassroom</a></li>
-						<li><a href="https://grafikart.fr">grafikart</a></li>
-						<li><a href="https://www.lyc-thierry-maulnier.ac-nice.fr">Site du lycée Thierry Maulnier de Nice</a></li>
-                    </ul>                    
-                </div>
-            </footer>        
-    </body>
-</html>

web/tp/1/style.css

@@ -1,55 +0,0 @@
-h1
-{
-  font-size: 32px;
-  text-shadow: -1px -1px #0c0, 1px 1px #060, -3px 0 4px #000;
-  font-family:Arial, Helvetica, sans-serif;
-  color: #090;
-  padding:16px;
-  font-weight:lighter;
-  -moz-box-shadow: 2px 2px 6px #888;  
-  -webkit-box-shadow: 2px 2px 6px #888;  
-  box-shadow:2px 2px 6px #888;  
-  text-align:center;
-  display:block;
-  margin:16px;
-  background-color: #76d7c4;  
-}
-
-#banniere
-{
-  font-size: 48px;
-  text-shadow: -1px -1px #9df, 1px 1px #49d, -3px 0 4px #000;
-  font-family:"Segoe print", Arial, Helvetica, sans-serif;
-  color:#6bf;
-  padding:24px 32px 32px 32px;
-  font-weight:lighter;
-  -moz-box-shadow: 2px 2px 6px #888;  
-  -webkit-box-shadow: 2px 2px 6px #888;  
-  box-shadow:2px 2px 6px #888;  
-  text-align:center;
-  display:block;
-  line-height:150px;
-  background-image:url(images/background-h1-wide.jpg);
-}
-
-/* faire le choix de la couleur en HTML : http://htmlcolorcodes.com/fr/*/
-body{
-   background-color: #f7f9f9;
-}
-
-
-table tr:nth-child(odd) td
-{
-  background-color: #E8E8FF;
-}
-
-h2, h3 {
-  background-color: gray;
-  color: navy;
-  radius-border : 5px;
-}
-
-ul,ol{
-    background-color:  #1abc9c;
-	display : table;
-}