Add files via upload

bstocker · web-flow · commit acf40caf39ef · 2025-03-30T17:04:02.000+02:00
diff --git a/Cours_N3.html b/Cours_N3.html
@@ -0,0 +1,45 @@
+<!doctype html>
+<html lang="en">
+<head>
+<title>g.Zv6a30vRcrn4vPpr$notes</title>
+<meta name="generator" content="Etherpad"/>
+<meta name="author" content="Etherpad"/>
+<meta name="changedby" content="Etherpad"/>
+<meta charset="utf-8"/>
+<style>
+ol {
+  counter-reset: item;
+}
+
+ol > li {
+  counter-increment: item;
+}
+
+ol ol > li {
+  display: block;
+}
+
+ol > li {
+  display: block;
+}
+
+ol > li:before {
+  content: counters(item, ".") ". ";
+}
+
+ol ol > li:before {
+  content: counters(item, ".") ". ";
+  margin-left: -20px;
+}
+
+ul.indent {
+  list-style-type: none;
+}
+
+body{background-color:white}
+</style>
+</head>
+<body>
+&#8203;Cours N&#176;3<br><br>- SVG (HTML)<br>- CSS<br><br>-----------------------------------------------------------<br>Exercice 1 : (Le Vallet de tr&#232;fle)<br><br>Voici un jeu complet de 52 cartes cr&#233;&#233;s via du code HTML (balises SVG).<br><br><a href="https&#x3a;&#x2F;&#x2F;1drv&#x2e;ms&#x2F;u&#x2F;s&#x21;AgvsSD&#x2d;da1M&#x5f;nMB9aXFKHS3fcCqpdQ&#x3f;e&#x3d;Qpcqlw" rel="noreferrer noopener">https:&#x2F;&#x2F;1drv.ms&#x2F;u&#x2F;s!AgvsSD-da1M_nMB9aXFKHS3fcCqpdQ?e=Qpcqlw</a><br><br>T&#233;l&#233;charger ce fichier et mettez le en ligne.<br><br>Exercice : Modifier votre fichier HTML (ou cr&#233;er un nouveau fichier) afin de ne pr&#233;senter &#224; l&#x27;internaute que le Vallet de tr&#232;fle (toutes les autres cartes n&#x27;apparaissent pas).<br><br>Indice : La question est savoir quel est l&#x27;ID du Vallet de tr&#232;fle. Click droit -&gt; Inspecter &#233;l&#233;ment sur le Vallet de treffle. Et on trouve son ID qui est id=&quot;jack_club&quot;. Ensuite il faut l&#x27;isoler.<br><br><u>Correction :</u><br><a href="https&#x3a;&#x2F;&#x2F;1drv&#x2e;ms&#x2F;u&#x2F;s&#x21;AgvsSD&#x2d;da1M&#x5f;ipMiTJ0JcxLOWu7hbA&#x3f;e&#x3d;Ok5nO6" rel="noreferrer noopener">https:&#x2F;&#x2F;1drv.ms&#x2F;u&#x2F;s!AgvsSD-da1M_ipMiTJ0JcxLOWu7hbA?e=Ok5nO6</a><br><br>------------------------------------------------------------<br>Exercice 2 : La chenille<br><br>Cr&#233;ez un fichier HTML (chenille.html) afin de reproduire le r&#233;sultat suivant :<br><br><a href="https&#x3a;&#x2F;&#x2F;1drv&#x2e;ms&#x2F;i&#x2F;s&#x21;AgvsSD&#x2d;da1M&#x5f;nMB&#x5f;&#x2d;WS9rH6Hxa88Wg&#x3f;e&#x3d;bCgCJX" rel="noreferrer noopener">https:&#x2F;&#x2F;1drv.ms&#x2F;i&#x2F;s!AgvsSD-da1M_nMB_-WS9rH6Hxa88Wg?e=bCgCJX</a><br><br>Votre chenille sera accessible via le chemin suivant : https:&#x2F;&#x2F;{URL_Alwaysdata}&#x2F;chenille.html<br>------------------------------------------------------------<br>Pour aller plus loin en SVG :<br><a href="https&#x3a;&#x2F;&#x2F;www&#x2e;w3schools&#x2e;com&#x2F;graphics&#x2F;svg&#x5f;intro&#x2e;asp" rel="noreferrer noopener">https:&#x2F;&#x2F;www.w3schools.com&#x2F;graphics&#x2F;svg_intro.asp</a><br>&nbsp;&nbsp;&nbsp;&nbsp;<br>-----------------------------------<br>Interlude : (Jeu HTML)<br><br>En attendant l&#x27;exercice suivant, vous pouvez vous d&#233;tendre via le petit jeu d&#x27;apprentissage du code HTML suivant :<br><a href="https&#x3a;&#x2F;&#x2F;supermarkupworld&#x2e;com&#x2F;" rel="noreferrer noopener">https:&#x2F;&#x2F;supermarkupworld.com&#x2F;</a><br><br>---------------------------------------------------------------------<br>Le CSS (Colorisation)<br>---------------------------------------------------------------------<br><br>Vid&#233;o 1 : <a href="https&#x3a;&#x2F;&#x2F;youtu&#x2e;be&#x2F;30IkUsJPdGE" rel="noreferrer noopener">https:&#x2F;&#x2F;youtu.be&#x2F;30IkUsJPdGE</a>&nbsp;&nbsp;&nbsp;&nbsp;<br>Le CSS permet de colorer sa page HTML. Le style s&#x27;applique aux balises HTML.<br><br>Vid&#233;o 2 : <a href="https&#x3a;&#x2F;&#x2F;youtu&#x2e;be&#x2F;l215NZqttDY" rel="noreferrer noopener">https:&#x2F;&#x2F;youtu.be&#x2F;l215NZqttDY</a><br><br><u>Les selecteurs :</u><br>En synth&#232;se les s&#233;lecteurs peuvent &#234;tre du type :<br>&nbsp;- Selecteur de balise -&gt; On pr&#233;cice la ou les balises qui nous int&#233;resse.<br>&nbsp;- Selecteur sur les #ID -&gt; On pr&#233;cise l&#x27;&#233;lement qui nous int&#233;resse.<br>&nbsp;- Selecteur de .class -&gt;&nbsp; On pr&#233;cice la ou les balises qui nous int&#233;resse.<br><br>Jeux CSS pour apprendre les s&#233;lecteurs : <a href="https&#x3a;&#x2F;&#x2F;flukeout&#x2e;github&#x2e;io&#x2F;" rel="noreferrer noopener">https:&#x2F;&#x2F;flukeout.github.io&#x2F;</a><br><br>Vid&#233;o 3 : <a href="https&#x3a;&#x2F;&#x2F;youtu&#x2e;be&#x2F;x0Y&#x5f;Et0A&#x5f;T0" rel="noreferrer noopener">https:&#x2F;&#x2F;youtu.be&#x2F;x0Y_Et0A_T0</a><br><br>Vid&#233;o 4 : <a href="https&#x3a;&#x2F;&#x2F;youtu&#x2e;be&#x2F;wjgyEOIGqZE" rel="noreferrer noopener">https:&#x2F;&#x2F;youtu.be&#x2F;wjgyEOIGqZE</a>&nbsp;&nbsp;&nbsp;&nbsp;<br><br>Vid&#233;o 5 : <a href="https&#x3a;&#x2F;&#x2F;youtu&#x2e;be&#x2F;wTF7K5rm7vc" rel="noreferrer noopener">https:&#x2F;&#x2F;youtu.be&#x2F;wTF7K5rm7vc</a>&nbsp;&nbsp;&nbsp;&nbsp;<br><br><u>Jeux CSS :</u>&nbsp;<br><a href="https&#x3a;&#x2F;&#x2F;flexboxfroggy&#x2e;com" rel="noreferrer noopener">https:&#x2F;&#x2F;flexboxfroggy.com</a><br><a href="https&#x3a;&#x2F;&#x2F;cssgridgarden&#x2e;com" rel="noreferrer noopener">https:&#x2F;&#x2F;cssgridgarden.com</a><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
+</body>
+</html>
