From daef670236709ae684bed4e729c83fd7cca43f7c Mon Sep 17 00:00:00 2001 From: bonnebulle Date: Mon, 20 Oct 2025 15:15:11 +0000 Subject: [PATCH] Re order _ressources + maj navbar + aide vsc --- .gitignore | 4 + public/0_assets/style_basics.css | 3 - public/0_assets/style_basics_SAVE.css | 170 -- public/0_assets/style_columns.css | 53 - public/0_index_empty.html | 4 +- public/0_intro.html | 657 +++++--- public/0_intro_vscode.html | 190 +++ public/4_formulaires_php/index.php | 116 ++ public/5_js/5_js.html | 1374 +++++++++++++++++ .../_ressources/0_intro/css/style_basics.css | 8 + .../_ressources/0_intro/css/style_columns.css | 3 + .../0_intro/img}/0_afficher_style.png | Bin .../img}/0_firefox_parametres_devs.png | Bin .../0_intro/img}/0_padding_margin.png | Bin .../0_intro/img}/0_padding_margin_cut.png | Bin .../0_intro/img/0_vscoder_multi_cursors.png | Bin 0 -> 76420 bytes .../0_intro/js}/vide.js | 0 public/parts/header.html | 10 - public/style.css | 87 +- 19 files changed, 2186 insertions(+), 493 deletions(-) delete mode 100644 public/0_assets/style_basics.css delete mode 100644 public/0_assets/style_basics_SAVE.css delete mode 100644 public/0_assets/style_columns.css create mode 100644 public/0_intro_vscode.html create mode 100644 public/4_formulaires_php/index.php create mode 100644 public/5_js/5_js.html create mode 100644 public/_ressources/0_intro/css/style_basics.css create mode 100644 public/_ressources/0_intro/css/style_columns.css rename public/{0_assets => _ressources/0_intro/img}/0_afficher_style.png (100%) rename public/{0_assets => _ressources/0_intro/img}/0_firefox_parametres_devs.png (100%) rename public/{0_assets => _ressources/0_intro/img}/0_padding_margin.png (100%) rename public/{0_assets => _ressources/0_intro/img}/0_padding_margin_cut.png (100%) create mode 100644 public/_ressources/0_intro/img/0_vscoder_multi_cursors.png rename public/{0_assets => _ressources/0_intro/js}/vide.js (100%) delete mode 100644 public/parts/header.html diff --git a/.gitignore b/.gitignore index 485dee6..567fd84 100644 --- a/.gitignore +++ b/.gitignore @@ -1 +1,5 @@ .idea +.history +*.bash* +*.bash +.vscode \ No newline at end of file diff --git a/public/0_assets/style_basics.css b/public/0_assets/style_basics.css deleted file mode 100644 index e3b531d..0000000 --- a/public/0_assets/style_basics.css +++ /dev/null @@ -1,3 +0,0 @@ -p { - color: darkgreen; -} \ No newline at end of file diff --git a/public/0_assets/style_basics_SAVE.css b/public/0_assets/style_basics_SAVE.css deleted file mode 100644 index d7d7cc3..0000000 --- a/public/0_assets/style_basics_SAVE.css +++ /dev/null @@ -1,170 +0,0 @@ -p { - color: darkcyan; -} -#italgras :is(i,strong) { - color: orangered; -} -.pas_important { - font-weight: normal; - color: red; -} - -.important { - font-weight: bolder; - color: red; -} -.pas_important { - font-weight: normal; - color: #000; -} -#important_wrapper { - margin-left: 10px; - border-left: 3px solid red; - padding-left: 20px; -} - - -/* Objet au centre, avec MARGE extérieure et PADDING intérieur */ -#test_margin_padding { - padding: 30px; /* PADDING */ - margin: 30px; /* MARGIN */ - border: 1px solid; - background-color: #e3dcff; - border: 3px solid red; -} -/* DEMO, sert à expliquer.montrer la MARGE EXTERIEURE (margin) autour de #test_margin_padding */ -#test_wrapper { - border: 1px solid gainsboro; - background: #fdffdf; /* jaune */ - padding: 10px; -} -/* DEMO, sert à expliquer.montrer la MARGE INTERIEURE (padding) entre le bord de #test_margin_padding et son CONTENU */ -#inner_content { - background-color: #cff0fb; - padding: 0px; -} - - - -#mousehover_movemargin_element { - height: 130px; - width: 130px; - background: red; - color: #FFF; - padding: 20px; - text-align: center; - display: block; /* par défaut, une div a la propriété "display" == "block" (comme valeur) */ -} -#mousehover_movemargin:hover > #mousehover_movemargin_element { - margin-left: calc(100% - 130px - 50px); - background:yellow; - transition: all 1s; -} - - -#test_wrapper:before { - content: "margin"; - margin: 0px; - font-size: 10px; - position: absolute; - margin-top: -5px; -} -#test_margin_padding:before { - content: "padding"; - margin: 0px; - font-size: 10px; - position: absolute; - margin-top: -25px; - margin-left: -20px; -} - - - - -/* ID */ -#text_principal { - font-family: sans-serif; - line-height: 0.4em; -} -/* CLASSE */ -.para { - background-color: yellowgreen; -} -/* CLASSE, autres instructions */ -.fond_bleu { - background-color: blue; - color: #FFF; -} -/* CLASSE/ID plusieures cibles en même temps */ -.para, #sad { - font-weight: bold; -} -/* PSEUDO CLASSE :last-child */ -p:last-child .para { - background-color: orangered; -} - - - - -#margin_first, -#margin_seconde, -#margin_last { - display: inline-block; - border: 1px solid; -} -.margin_left { - margin-left: 100px -} -.margin_right { - margin-right: 100px -} -.large { - width:500px; -} -.petite { - width:200px; -} - - -#top_margin_block { - width: 100% -} -#margin_exemples_wrapper { - background: greenyellow; - border: 1px solid #000; - display: block; - clear: both; - float: left; - width: 100%; - margin-bottom: 4rem; -} -.margin_exemples { - display: inline; - border: 1px solid #000; - background: chartreuse; - padding: 5px 5px 0 5px; /* EXEMPLE Padding */ - height: 100px; width: 100px; - float: left; -} -.margin_exemples.margin_autour { - margin: 100px 0px 0px 0px; /* EXEMPLE Margin */ - height: auto; width: auto; - min-height: 100px; - background: lavender -} - -.border { - border:1px solid #000; -} -.cascade { - margin-left: 10px; - background: #FFF; - text-align: center; -} -.cascade:hover { - background: fuchsia; -} -#enfant p { - text-transform: uppercase; -} \ No newline at end of file diff --git a/public/0_assets/style_columns.css b/public/0_assets/style_columns.css deleted file mode 100644 index 0c04126..0000000 --- a/public/0_assets/style_columns.css +++ /dev/null @@ -1,53 +0,0 @@ - - -#contenant { - background-color: red; - /* display: none; */ - display: block; - margin-bottom: 5rem; - - * {} - - .left, .right { - float:left; - width: 50%; - box-sizing: border-box; - } - - .left { - /* width: calc(50% - 30px); */ - /* padding-left: 10px; */ - width: calc(50% - 0px); - padding-left: 0px; - } - .right { - border-left: 1px solid #000; - padding-left: 30px; - } - p:first-child { - margin-top: 0; - } - p:last-child { - margin-bottom: 0; - } -} - - -#contenant_cols { - column-count: 2; - float: left; - /* display: none; */ - * {} - - .text { - text-align: justify; - hyphens: auto; - display: block; - } -} - - -/* h3 { - text-align: center; - margin-top: 3rem; -} */ \ No newline at end of file diff --git a/public/0_index_empty.html b/public/0_index_empty.html index 7d71b92..7e0b672 100644 --- a/public/0_index_empty.html +++ b/public/0_index_empty.html @@ -8,7 +8,7 @@ 0_index_empty.html - + @@ -59,7 +59,7 @@ Retour à 0_intro.html (# haut de page)
Retour à 0_intro.html (# stylesheet) - + diff --git a/public/0_intro.html b/public/0_intro.html index ad53e3c..cfb6b29 100644 --- a/public/0_intro.html +++ b/public/0_intro.html @@ -1,8 +1,7 @@ - - - + + 0 intro @@ -11,30 +10,50 @@ - - + + - + + + + + + + + + + + +
+ + +
+
+ +

Bonjour le Monde !

-
+
@@ -45,7 +64,7 @@

HyperText Markup Language est une facon de composé l'espace d'une page web, avec des balisages (Markups) dont les hyperliens sont centraux.

Les balises HTML (tag en anglais) sont nombreuses....
- elles vienent encercler/encapsuler/contenir... entourer/délimiter... les contenus de la page qui, ainsi, sont diférentiés en objets distincts, en éléments

+ elles viennent encercler/encapsuler/contenir... entourer/délimiter... les contenus de la page qui, ainsi, sont diférentiés en objets distincts, en éléments

@@ -59,22 +78,47 @@ La Cascade (FR), ressources sur le CSS...

+ -

Afficher le code source

+

Vscode + template

+ +

Index des projets...
+ Home/Index : https://code.bonnebulle.xyz
+ Avec un sous-dossier par personne... +

+ +

Que vous pouvez ouvrir dans VSCODE, le logiciel de code qu'on va utiliser...
+ C'est une version de l'application VSCode accessible en ligne...
+ Ce qui permet de démarrer tout de suite.... dans un environnement de travail pré-configuré
+ et moi de suivre vos différents projets au même endroit...
+ Vous travaillerez depuis votre propre dossier de projet ! +

+ +

+
Depuis VSC on peut créer un fichier index.html +
l'ouvrir... et tapper "!", un popup s'ouvre (Intellisens), en faisant ENTRER, le template (gabari, préformatage) d'une page HTML est chargé...

+

+ +

Page d'aide, raccourcis :
+ 0_intro_vscode

+ + +

Afficher le code source

On va déja regarder comment est composée une page HTML basique...

-

Lien vers 0_index_empty.html

+

Lien vers 0_index_empty.html

CTRL+MAJ+I les outils de dev. s'affichent,
CTRL+U, le code source (le fichier avant qu'il soit lu/interprété par le Navigateur) -

... structure de la page, head, body, footer

+ +

... structure de la page, head, body, footer


Par convention (et méthode)
... on met les contenus contextuels (meta) et ressources dans la tête de la page <head>titre, feuilles de style .css, etc</head> (contenus invisible) @@ -82,15 +126,23 @@
Les commentaires CTRL+MAJ+/ sont invisibles... -

Footer, on le vera avec Javascript, est un espace en bas de page où l'on charge d'autres ressources (.js)...
+

Footer, on le verra avec Javascript, est un espace en bas de page où l'on charge d'autres ressources (.js)...
à la fin de la page... ce qui est en bas étant lu... en dernier

+ + + + + + +


-

HTML balises simples, souligner, titres... div

+

HTML balises simples, souligner, titres... div

+

On va se concentrer sur le contenu dans <body> en commençant par quelques exemples de balises simples :

@@ -98,13 +150,13 @@ 
text souligné
lien vers
- 

-  
titre

-  
titre

-  
titre

-  
titre

-  
titre

-  
titre

+

+
titre

+
titre

+
titre

+
titre

+
titre

+
titre

 

 
 
@@ -119,15 +171,15 @@
   
 
 

-    

-      
autres contenus

-    

+

+  
autres contenus

+

 

 
 

-  Plus d'informations :
-  MDN Firefox (DIV)

-  ( élément de division du contenu )
+Plus d'informations :
+MDN Firefox (DIV)

+( élément de division du contenu )
   

 
 
@@ -203,11 +255,11 @@ On peut aussi forcer un saut à la ligne avec 
 ou un autre séparateur com
 
 
 

-  #italgras {
-    i, u, strong {
-      color: orange
-    }
+#italgras {
+  i, u, strong {
+    color: orange
   }
+}
 

 
 

@@ -239,13 +291,13 @@ On peut aussi forcer un saut à la ligne avec 
 ou un autre séparateur com
   Dans Firefox je trouve les parametres via icon "..." (à droite) puis Parametres ("icon rouage") /OU/ F1

 
 

-  
+  
 

 
 
Je peux ensuite demander d'afficher ces styles par défaut

 
 

-  
+  
 

 
Firefox montre bien que "strong" a des valeurs par défaut... on peut
   voir d'autres propriétés et feulles de style

@@ -353,7 +405,7 @@ On parle de méthode  "inline", dans le texte/cod
 
"On ne met pas d'espace dans le nom des fichiers !, on les remplace par "_" ou "-", plutôt "_""

 
Une fois la feuille de style crée on devra la charger dans la page HTML
   
-

+

 
 
 
@@ -362,10 +414,10 @@ les instructions qu'elle contient vont modifier la façon dont le navigateur aff
 

-
+
-

Lien vers style_basics.css

+

Lien vers style_basics.css

La feuille de style (fichier) est pratique si on l'utilise plusieurs fois de page en page @@ -387,16 +439,6 @@ Mais on peut aussi charger cette cascade d'instructions directement dans la page -

Créer un fichier + ! template Html
- - -

Dans VSCODE (ou Codium), le logiciel de code qu'on va utiliser... -
je peux créer un fichier index.html -
l'ouvrir... et tapper "!", un popup s'ouvre (Intellisens), en faisant ENTRER, le template (gabari, préformatage) d'une page HTML est chargé...

- -

Lien vers 0_index_empty.html

- -
@@ -419,18 +461,18 @@ Mais on peut aussi charger cette cascade d'instructions directement dans la page 

-#important_wrapper { /* id */
-  margin-left: 10px;
-  border-left: 3px solid red;
-  padding-left: 20px;
-}
-.important { /* classe */
-  font-weight: bolder;
-  color: red;
-}
-.pas_important {
-  font-weight: normal;
-}
+  #important_wrapper { /* id */
+    margin-left: 10px;
+    border-left: 3px solid red;
+    padding-left: 20px;
+  }
+  .important { /* classe */
+    font-weight: bolder;
+    color: red;
+  }
+  .pas_important {
+    font-weight: normal;
+  }
 

@@ -457,13 +499,13 @@ Mais on peut aussi charger cette cascade d'instructions directement dans la page
 
CSS /VS/ HTML, cibler des éléments /VS/ ajouter des classes

 
CSS : On peut attribuer les mêmes consignes (propriétés + valeurs) à plusieurs élémens ciblés en même temps (via leur classe, id, etc) -- virgule

 

-.para, #sad {
-  ....
-}
-.para, 
-#sad {
-  ....
-}
+  .para, #sad {
+    ....
+  }
+  .para, 
+  #sad {
+    ....
+  }
 

 
 
CSS : On utilise un --espace pour indiquer qu'on va chercher un élément... à l'intérieur d'un autre

@@ -550,28 +592,28 @@ p:last-child .para {
 
#contenant .element_dedans .sous_element

 
 

-.border {
-    border:1px solid #000;
-}
-.cascade {
-    margin-left: 10px;
-    background: #FFF;
-    text-align: center;
-}
-.cascade:hover { /* Hover est une autre pseudo-classe bien pratique... */
-    background: fuchsia;
-}
-#enfant p { 
-    /* tout p présent dans #enfant */
-    text-transform: uppercase;
-}
+  .border {
+      border:1px solid #000;
+  }
+  .cascade {
+      margin-left: 10px;
+      background: #FFF;
+      text-align: center;
+  }
+  .cascade:hover { /* Hover est une autre pseudo-classe bien pratique... */
+      background: fuchsia;
+  }
+  #enfant p { 
+      /* tout p présent dans #enfant */
+      text-transform: uppercase;
+  }
 

 
 

 

   
tête

   

-    
soutient

+    
aide

     

       
autonomie
 
     

@@ -585,6 +627,55 @@ p:last-child .para {
 

 
 
+
Nesting

+
+
+
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_nesting/Using_CSS_nesting
+CSS Avancé ! Autre façon de cibler les éléments d'une page HTML
Permet une meilleure lisibilité, on attribue des instructions CSS par élément (et ses sous-élements)

+
+
+
+

+  .border {
+      border:1px solid #000;
+  }
+  .cascade_nesting {
+      margin-left: 10px;
+      background: #FFF;
+      text-align: center;
+  }
+  .cascade_nesting:hover { /* Hover est une autre pseudo-classe bien pratique... */
+      background: yellow;
+  }
+
+  #parent_nesting {
+    p { 
+      color: red;
+    }
+    u { 
+      padding: 10px;
+      display: inline-block;
+    }
+    u, p {
+      text-transform: uppercase;
+      background: yellow;
+      display: inline-block;
+    }
+  }
+  #grand_parent_nesting:hover :is(#parent_nesting, #enfant_nesting) {
+    & * {      background: orange     }
+    background: orange
+  }
+

+
+

+
tête

+
aide

+
autonomie

+

+

+
+
 
 
 
@@ -599,7 +690,8 @@ C'est une convention formelle... qui aide grandement à résoudre des "bugs" / "
 Wiki Style d'indentation : https://fr.wikipedia.org/wiki/Style_d'indentation
 
 
-
Dans VSCODE on peut utiliser Prettier Code Formatter qui fait le boulot à notre place, aligne correctement les blocks de textes en fonction de leur imbrication successive...

+
Dans VSCODE on peut utiliser 
Prettier Code Formatter qui fait le boulot à notre place 
(aligne correctement les blocks de textes en fonction de leur imbrication successive...)

+ou encore indent-rainbow

 
 
 

@@ -665,7 +757,7 @@ MDN (display) : CTRL+MAJ+I + -> Inspecteur -> Mise en Page

 
En selectionnant un élément dans le code à gauche, on voit quelles marges externes (et internes, avec padding) lui sont appliquées

 
-
+
 
 
 

@@ -674,45 +766,45 @@ MDN (display) : 
-  #margin_first,
-  #margin_seconde,
-  #margin_last {
-      /* il faut que propriété "Display" ait la valeur "inline-block"  */
-      /* (pour éviter que les éléments sautent à la ligne, des blocks) */
-      display: inline-block; 
-      border: 1px solid;
-  }    
-  .margin_left {
-      margin-left: 100px
-  }
-  .margin_right {
-      margin-right: 100px
-  }
-  .large {
-      width:500px;
-  }
-  .petite {
-      width:200px;
-  }
-
- - 

-    

-      #margin_first
-    

-  
-    

-      #margin_seconde
-    

-  
-    

-      #margin_last
-    

-
- - -

Margin et Padding (mais aussi border ou encore text-shadow) fonctionnent comme ceci :

- +#margin_first, +#margin_seconde, +#margin_last { + /* il faut que propriété "Display" ait la valeur "inline-block" */ + /* (pour éviter que les éléments sautent à la ligne, des blocks) */ + display: inline-block; + border: 1px solid; +} +.margin_left { + margin-left: 100px +} +.margin_right { + margin-right: 100px +} +.large { + width:500px; +} +.petite { + width:200px; +} + + +

+  

+    #margin_first
+  

+
+  

+    #margin_seconde
+  

+
+  

+    #margin_last
+  

+
+ + +

Margin et Padding (mais aussi border ou encore text-shadow) fonctionnent comme ceci :

+ @@ -770,6 +862,40 @@ On garde la logique, la dernière propriétéTransition + margin (pause) + +
Margin crée de l'espace, permet aussi de déplacer les éléments... +MDN (transition) : https://developer.mozilla.org/fr/docs/Web/CSS/transition
+ +

+#mousehover_movemargin_element { 
+  height: 130px;
+  width: 130px;
+  background: red;
+  color: #FFF;
+  padding: 20px;
+  text-align: center;
+  display: block; /* par défaut, une div a la propriété "display" == "block" (comme valeur) */
+}
+#mousehover_movemargin:hover #mousehover_movemargin_element {
+  margin-left: calc(100% - 130px - 50px);
+  background:yellow;
+  transition: all 1s;
+  cursor: pointer;
+}
+ + +

+  

+    
Youhouuuuu

+  

+
+ + + +

@@ -923,6 +1049,10 @@ textarea { 

+  
+     
+  
+  
     

         #width_full_page
     

@@ -931,8 +1061,10 @@ textarea {
         #width_bloc_textarea
         
     
+
MDN css CSS_media_queries + MDN css Unités de mesure (px, em, vw, vh) MDN css :has MDN html textarea
@@ -940,39 +1072,6 @@ textarea { -

Transition + margin (pause)

- -
Margin crée de l'espace, permet aussi de déplacer les éléments... -MDN (transition) : https://developer.mozilla.org/fr/docs/Web/CSS/transition
- -

-#mousehover_movemargin_element { 
-  height: 130px;
-  width: 130px;
-  background: red;
-  color: #FFF;
-  padding: 20px;
-  text-align: center;
-  display: block; /* par défaut, une div a la propriété "display" == "block" (comme valeur) */
-}
-#mousehover_movemargin:hover #mousehover_movemargin_element {
-  margin-left: calc(100% - 130px - 50px);
-  background:yellow;
-  transition: all 1s;
-  cursor: pointer;
-}
-
- - -

-  

-    
Youhouuuuu

-  

-
- - - -

Positions... left/right/top/bottom

@@ -986,60 +1085,60 @@ MDN (transition) : - .moveme { - z-index: 999; - } - .move_relative { - position: relative; - } - .move_absolute { - position: absolute; - } - .move_fixed { - position: fixed; - opacity: 0; - bottom: 0px; right: 0 - } - .moveme:hover { - opacity: 0; - } - - /* "Combinateur de voisins directs" (.item + .other) */ - /* https://developer.mozilla.org/fr/docs/Web/CSS/Next-sibling_combinator */ - .not_last_move:hover + .moveme, - .not_last_move:hover, - .move_fixed:hover { - opacity: 1; - } - +.moveme { + z-index: 999; +} +.move_relative { + position: relative; +} +.move_absolute { + position: absolute; +} +.move_fixed { + position: fixed; + opacity: 0; + bottom: 0px; right: 0 +} +.moveme:hover { + opacity: 0; +} - /* encore du CSS avancé... */ - /* https://css-tricks.com/examples/nth-child-tester/ */ - /* https://css-tricks.com/how-nth-child-works/ */ - .moveme:nth-last-child(2) { - border: 3px solid red; - } - .moveme:nth-last-child(1) { background: red; color: #FFF; z-index: 9999999; } +/* "Combinateur de voisins directs" (.item + .other) */ +/* https://developer.mozilla.org/fr/docs/Web/CSS/Next-sibling_combinator */ +.not_last_move:hover + .moveme, +.not_last_move:hover, +.move_fixed:hover { + opacity: 1; +} - .petit_padd { padding:4px; background: #FFF } - - #pos_sticky { - position: sticky; - top: 0; - right: 0 !important; - float: right; - margin: 0; - background: aqua; - } +/* encore du CSS avancé... */ +/* https://css-tricks.com/examples/nth-child-tester/ */ +/* https://css-tricks.com/how-nth-child-works/ */ +.moveme:nth-last-child(2) { + border: 3px solid red; +} +.moveme:nth-last-child(1) { background: red; color: #FFF; z-index: 9999999; } + +.petit_padd { padding:4px; background: #FFF } + + +#pos_sticky { + position: sticky; + top: 0; + right: 0 !important; + float: right; + margin: 0; + background: aqua; +} 

-    relative + left:100px; 
-    relative + left:300px;
-    relative + top:-70px;
-    absolute + top:-70px;
-    fixed + bottom: 0px; right: 0;
+relative + left:100px; 
+relative + left:300px;
+relative + top:-70px;
+absolute + top:-70px;
+fixed + bottom: 0px; right: 0;
@@ -1051,9 +1150,6 @@ MDN (transition) : -
-

- Id quis id est cupidatat ea culpa. Excepteur excepteur adipisicing esse ullamco occaecat duis commodo reprehenderit commodo nostrud incididunt. Dolore nisi nostrud aute mollit eu pariatur. In incididunt reprehenderit ut nisi veniam Lorem. Laboris irure occaecat cupidatat et. -

-

- Velit culpa deserunt commodo magna eiusmod deserunt tempor aute excepteur et labore velit incididunt qui. Labore velit do sunt enim aliquip veniam deserunt deserunt. Mollit proident reprehenderit ullamco. Dolor eu cillum ipsum consequat eu consectetur minim enim commodo dolor sint irure nostrud magna. Adipisicing enim laboris anim consectetur Lorem incididunt dolore minim mollit deserunt ad dolor id ad exercitation. Aliquip irure deserunt eiusmod minim ex nostrud duis irure ad laborum. Lorem cupidatat commodo exercitation laborum mollit sint sint consequat commodo. -

-
+
+

+ Id quis id est cupidatat ea culpa. Excepteur excepteur adipisicing esse ullamco occaecat duis commodo reprehenderit commodo nostrud incididunt. Dolore nisi nostrud aute mollit eu pariatur. In incididunt reprehenderit ut nisi veniam Lorem. Laboris irure occaecat cupidatat et. +

+

+ Velit culpa deserunt commodo magna eiusmod deserunt tempor aute excepteur et labore velit incididunt qui. Labore velit do sunt enim aliquip veniam deserunt deserunt. Mollit proident reprehenderit ullamco. Dolor eu cillum ipsum consequat eu consectetur minim enim commodo dolor sint irure nostrud magna. Adipisicing enim laboris anim consectetur Lorem incididunt dolore minim mollit deserunt ad dolor id ad exercitation. Aliquip irure deserunt eiusmod minim ex nostrud duis irure ad laborum. Lorem cupidatat commodo exercitation laborum mollit sint sint consequat commodo. +

+
+ + + + + + +

Textes

+ +
MDN font-familly : https://developer.mozilla.org/fr/docs/Web/CSS/font-family + MDN font-size unités (em, px) : https://developer.mozilla.org/fr/docs/Web/CSS/length#em +

 #text_basics {
-  text-align: center;
   font-size: 1.2em;
-  line-height: 2em;
+  line-height: 2em; /* ((( em ))) 1em == Hauteur de la police... 1.5em 1xhauteur de la police + 0.5... */
   font-family: sans-serif, Arial;
   text-decoration: underline;
   font-style: italic;
+  text-align: justify;
+  hyphens: auto;
 }
 #text_basics p:first-letter {
   text-transform: uppercase;
@@ -1124,23 +1231,68 @@ MDN : 
-  

-    
ipsum exercitation adipisicing incididunt fugiat nulla laboris sit consectetur esse sunt laborum nisi nisi nisi ullamco. Deserunt cupidatat occaecat in. Proident voluptate exercitation culpa veniam nulla elit fugiat. Cillum id consequat fugiat dolore culpa proident amet. Lorem est qui quis nulla nostrud labore irure id culpa cupidatat non aute nostrud pariatur. Sint veniam cillum ut veniam voluptate excepteur commodo occaecat elit pariatur laborum. Laborum ad duis cupidatat consequat cillum enim cupidatat enim enim sint labore. Aliqua ipsum aliqua quis occaecat est sunt nulla sit pariatur velit nostrud dolore ipsum est.

-  

+

+  
ipsum exercitation adipisicing incididunt fugiat nulla laboris sit consectetur esse sunt laborum nisi nisi nisi ullamco. Deserunt cupidatat occaecat in. Proident voluptate exercitation culpa veniam nulla elit fugiat. Cillum id consequat fugiat dolore culpa proident amet. Lorem est qui quis nulla nostrud labore irure id culpa cupidatat non aute nostrud pariatur. Sint veniam cillum ut veniam voluptate excepteur commodo occaecat elit pariatur laborum. Laborum ad duis cupidatat consequat cillum enim cupidatat enim enim sint labore. Aliqua ipsum aliqua quis occaecat est sunt nulla sit pariatur velit nostrud dolore ipsum est.

+
-
+
+ + + + + + + +
+ + +

Alignement de text, colones...

Alignement manuel (2 colones left/right)

+
MDN font-size unités (em, px) : https://developer.mozilla.org/fr/docs/Web/CSS/column-count
+ + + +

+#contenant {
+  display: block;
+  margin-bottom: 5rem;
+
+  p:first-child {
+    margin-top: 0;
+  }
+  p:last-child {
+    margin-bottom: 0;
+  }
+
+  .left, .right {
+    float:left;
+    width: 50%;
+    box-sizing: border-box;
+  }
+
+  .left {
+    width: calc(50% - 0px);
+    padding-left: 0px;
+  }
+  .right {
+    border-left: 1px solid #000;
+    padding-left: 30px;
+  }
+}
+
+ +
+ +

   

     

-      Nulla et aliquip labore duis irure veniam ipsum labore excepteur
-      incididunt qui. Non nostrud aliquip cupidatat cupidatat enim commodo
-      pariatur consequat quis. Fugiat nulla amet adipisicing eiusmod ullamco
-      ullamco esse voluptate exercitation mollit velit ea aliquip aute eu.
-      Cillum ex tempor dolore ad ex pariatur ex velit. Labore ad ad non ea
-      cillum eiusmod sunt dolor dolore ipsum reprehenderit enim occaecat.
-      Consequat culpa nisi in esse laborum velit non deserunt nostrud sit in
-      veniam. Dolore veniam ad do incididunt est excepteur eiusmod esse Lorem
-      sint.
+      Nulla et aliquip labore duis irure veniam ipsum labore excepteur incididunt qui. Non nostrud aliquip cupidatat cupidatat enim commodo pariatur consequat quis. Fugiat nulla amet adipisicing eiusmod ullamco ullamco esse voluptate exercitation mollit velit ea aliquip aute eu. Cillum ex tempor dolore ad ex pariatur ex velit. Labore ad ad non ea cillum eiusmod sunt dolor dolore ipsum reprehenderit enim occaecat. Consequat culpa nisi in esse laborum velit non deserunt nostrud sit in veniam. Dolore veniam ad do incididunt est excepteur eiusmod esse Lorem sint.
 
-      Exercitation ullamco nisi Lorem anim occaecat dolore incididunt eiusmod
-      esse aute sunt deserunt laboris. Elit eiusmod consectetur laborum est.
-      Lorem consequat aliqua nisi excepteur est laborum amet voluptate aliquip
-      consequat ea labore sit reprehenderit enim. Eu consequat consequat
-      excepteur reprehenderit ipsum in minim sint. Non ullamco mollit tempor
-      excepteur occaecat dolore aliqua proident sint do. Exercitation duis enim
-      laboris fugiat esse in.
-
-      Excepteur nisi eiusmod ea ut excepteur nisi veniam duis reprehenderit
-      consequat reprehenderit. Nostrud fugiat reprehenderit aliquip. Dolor
-      adipisicing eiusmod do exercitation cupidatat eu. Et commodo veniam esse
-      adipisicing. Exercitation nisi dolore Lorem anim sit non in. Et anim
-      voluptate do proident aliquip occaecat.
+      Exercitation ullamco nisi Lorem anim occaecat dolore incididunt eiusmod esse aute sunt deserunt laboris. Elit eiusmod consectetur laborum est. Lorem consequat aliqua nisi excepteur est laborum amet voluptate aliquip consequat ea labore sit reprehenderit enim. Eu consequat consequat excepteur reprehenderit ipsum in minim sint. Non ullamco mollit tempor excepteur occaecat dolore aliqua proident sint do. Exercitation duis enim laboris fugiat esse in.
+      
+      Excepteur nisi eiusmod ea ut excepteur nisi veniam duis reprehenderit consequat reprehenderit. Nostrud fugiat reprehenderit aliquip. Dolor adipisicing eiusmod do exercitation cupidatat eu. Et commodo veniam esse adipisicing. Exercitation nisi dolore Lorem anim sit non in. Et anim voluptate do proident aliquip occaecat.
     

   

-
+


@@ -1193,23 +1342,33 @@ MDN : # + +
- + + + + + + +
\ No newline at end of file diff --git a/public/0_intro_vscode.html b/public/0_intro_vscode.html new file mode 100644 index 0000000..997d589 --- /dev/null +++ b/public/0_intro_vscode.html @@ -0,0 +1,190 @@ + + + + + + + Vscode helper + + + + + + + +
+ +

Firefox

+ +
+ CTRL+MAJ+I les outils de dev. s'affichent + CTRL+MAJ+M vue adaptative + CTRL+U, le code source (le fichier avant qu'il soit lu/interprété par le Navigateur) +
+ + + + + + +

VSCODE, VSCODIUM...

+ +
+ VScode + Le logiciel est un IDE, une interface visuelle pour coder... + Il est maintenu par Microsoft + + Des gens ont mis à jour une version "sans Microsoft" + ( sans "Telimetry" == aspiration de données ) + - VSCodium - Open Source Binaries of VSCode + ↳ https://vscodium.com/ + + - Codium ( vscodium Windows ) + ↳ https://thorium.rocks/codium/ + + La version ici (https://code.bonnebulle.xyz) est une version "serveur" infos sur Coder, mais c'est le.la même interface... + Il y a quand même quelques changements mineurs, entre autres, pour les raccourcis clavier. + + À installer également : https://hluk.github.io/CopyQ/ +
+ + + +

Raccourcis...

+ +

Dossiers / Fichiers

+ +
+ Ctrl+Maj+S sauvegarder sous (un autre nom) + Ctrl+R ouvrir un répertoire (espace de travail) +
+ + +

Commandes menus

+ +
+ F1 [Affichage > Palette de commandes...] <--- chercher n'importe quelle action + (Ctrl+Maj+P sur Vscode non serveur) + Ctrl+K + Ctrl+S Raccourcis clavier +
+ + +

Affichage, panneaux

+ +
+ Ctrl+Maj+O Menu Layout (affichages) + ... + Alt+E ( perso.custo ) : Toggle minimap + Ctrl+B Toggle panneau gauche (Explorer, autres) + Ctrl+J Toggle panneau Terminal + Ctrl+K + Ctrl+M Quand plusieurs éditeurs ouverts side-by-side (plusieurs groups d'éditeurs côte-à-côte)... va élargir l'éditeur actif (où est le curseur) + +
Voir Interfaces, groups, side-by-side... https://code.visualstudio.com/docs/getstarted/userinterface
+
+ + + +

Navigation fichier

+ +
+ Alt+O (perso.custo) Afficher le fichier dans le navigateur (new tab) -- macro dans settings + Alt+T (perso.custo) Affichage rapide du dernier fichier ouvert (liste) + Alt+Maj+T (perso.custo) Affichage rapide du dernier fichier ouvert (liste) + Ctrl+G Go to line (> numéro de ligne) + Ctrl+Alt+Z (custo.perso) : curseur, revenir à la dernière intervention (précédent)... +Maj (suivant) + https://open-vsx.org/extension/codeandstuff/vscode-navigate-edit-history +
+ + +

Text, recherche...

+ +
+ Alt+Z Editor text, retour à la ligne (wrap text, largeur max) + ... + Ctrl+X couper + Fn+Fleches : Aller au début / fin de ligne + Maj : sélectionné du text (marche avec début/fin de ligne) + ... + Ctrl+F recherche ; Ctrl+Maj+F panneau de recherche + chercher dans tous les fichiers + Ctrl+Maj+L Rechercher dans le document/fichier le text actuellement sélectionné (mêmes occurences) + Ctrl+Espace Aides (suggestions, infos CSS, autres) ( Intellisense ) + CTRL+MAJ+/ Commenter + CTRL+MAJ+Suppr ( perso.custo ) : supprimer ligne courante ! +
+ + + + + + + + + + + + + +

Multi curseurs...

+ +
+ Selection > Utiliser Ctrl+Clic.... + permet d'ajouter un curseur (de text) à plusieurs endroits... + + + Ctrl+Maj + fleches(haut/bas) ajouter un curseur (au dessus/dessous) + Alt+A ( perso.custo ) : annule le dernier ajout/déplacement/selection de curseur (pratique si on a mal sélectionné) +
+ + + + + +

Tools / refs

+ +
+ MDN MozillaDevNework + Commandes (Terminal) https://cht.sh + La Cascade +
+ +
+ + + + +
+ + + + +
+ + \ No newline at end of file diff --git a/public/4_formulaires_php/index.php b/public/4_formulaires_php/index.php new file mode 100644 index 0000000..4eb40e2 --- /dev/null +++ b/public/4_formulaires_php/index.php @@ -0,0 +1,116 @@ + + + + + Formulaire PHP Simple + + +

Ajouter une entrée

+ +
+ + + +
+ +
+ + setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION); + + // Créer la table si elle n'existe pas + $createTable = "CREATE TABLE IF NOT EXISTS entrees ( + id INT AUTO_INCREMENT PRIMARY KEY, + contenu TEXT NOT NULL, + date_creation DATETIME NOT NULL + )"; + $pdo->exec($createTable); + + // Si le formulaire est soumis + if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['contenu'])) { + $contenu = $_POST['contenu']; + + // Insertion dans la base + $stmt = $pdo->prepare("INSERT INTO entrees (contenu, date_creation) VALUES (?, NOW())"); + $stmt->execute([$contenu]); + + echo "

✓ Enregistré avec succès !

"; + } + + // Affichage des entrées + echo "

Entrées enregistrées :

"; + $stmt = $pdo->query("SELECT * FROM entrees ORDER BY date_creation DESC"); + $entrees = $stmt->fetchAll(PDO::FETCH_ASSOC); + + if (count($entrees) > 0) { + echo ""; + } else { + echo "

Aucune entrée pour le moment.

"; + } + + } catch (PDOException $e) { + echo "

Erreur : " . $e->getMessage() . "

"; + } + ?> + + + \ No newline at end of file diff --git a/public/5_js/5_js.html b/public/5_js/5_js.html new file mode 100644 index 0000000..c32c89e --- /dev/null +++ b/public/5_js/5_js.html @@ -0,0 +1,1374 @@ + + + + + 5 JS + + + + + + + + + + + + + + +
+ + +
+
+ + + + + + +

Bonjour le Monde !

+ +
+ +
+ + +

HTML, balises, éléments

+ +

Une page HTML est lue par le Navigateur qui va interpréter son contenu, charger les ressources demandées

+

HyperText Markup Language est une facon de composé l'espace d'une page web, avec des balisages (Markups) dont les hyperliens sont centraux.

+ +

Les balises HTML (tag en anglais) sont nombreuses....
+ elles viennent encercler/encapsuler/contenir... entourer/délimiter... les contenus de la page qui, ainsi, sont diférentiés en objets distincts, en éléments

+ + + +

Il existe plein de balises permettant de créer, de base, des éléments HTML + et plein de propriétés d'affichage (CSS) qu'on peut leur ajouter (pour les modifier)... voir MDN + Je vais ici principalement me référer à MozillaDevNework... il existe énorméméent de ressources pour apprendre à coder... + + Je vous conseille également... + Un index.sommaire (qui pointe vers MDN) fait le tour Selectors (et propriétés) CSS... + Selectors complexes (ciblage CSS), en Anglais, on les vera petit-à-petit + La Cascade (FR), ressources sur le CSS... +

+ + + + + + + + +

Vscode + template

+ +

Index des projets...
+ Home/Index : https://code.bonnebulle.xyz
+ Avec un sous-dossier par personne... +

+ +

Que vous pouvez ouvrir dans VSCODE, le logiciel de code qu'on va utiliser...
+ C'est une version de l'application VSCode accessible en ligne...
+ Ce qui permet de démarrer tout de suite.... dans un environnement de travail pré-configuré
+ et moi de suivre vos différents projets au même endroit...
+ Vous travaillerez depuis votre propre dossier de projet ! +

+ +

+
Depuis VSC on peut créer un fichier index.html +
l'ouvrir... et tapper "!", un popup s'ouvre (Intellisens), en faisant ENTRER, le template (gabari, préformatage) d'une page HTML est chargé...

+

+ +

Page d'aide, raccourcis :
+ 0_intro_vscode

+ + +

Afficher le code source

+ +

On va déja regarder comment est composée une page HTML basique...

+ +

Lien vers 0_index_empty.html

+ + CTRL+MAJ+I les outils de dev. s'affichent,
+ CTRL+U, le code source (le fichier avant qu'il soit lu/interprété par le Navigateur) + + +

... structure de la page, head, body, footer

+ +
Par convention (et méthode) +
... on met les contenus contextuels (meta) et ressources dans la tête de la page <head>titre, feuilles de style .css, etc</head> (contenus invisible) +
... on met les contenus courant, les textes, images, dans le corps de la page <body>article, texts, images, contenus, etc</body> (contenus visible) +
Les commentaires CTRL+MAJ+/ sont invisibles... + + +

Footer, on le verra avec Javascript, est un espace en bas de page où l'on charge d'autres ressources (.js)...
+ à la fin de la page... ce qui est en bas étant lu... en dernier

+ + + + + + + + +
+
+
+ + +

HTML balises simples, souligner, titres... div

+ +

On va se concentrer sur le contenu dans <body> en commençant par quelques exemples de balises simples :

+ + +

Exemple :

+ 
text souligné
+ 
lien vers
+ +

+  
titre

+  
titre

+  
titre

+  
titre

+  
titre

+  
titre

+
+ + + + + + + + +

On construit la page ainsi, en contenant des éléments les uns dans les autres

+ + +

+    

+      
autres contenus

+    

+
+ +

+  Plus d'informations :
+  MDN Firefox (DIV)

+  ( élément de division du contenu )
+
+ + +

Dans une div, tout ce qui se retrouve avant, à droite, à gauche... + saute à la ligne, passe après la div
+ C'est parce que une div se comporte comme un "block"

+

On va y revenir avec un exemple

+ + + + + + + + +

Sauts de ligne : br, hr
...

+ +

Dans l'éditeur de texte d'où l'on code (IDE), on peut faire autant de sauts à la ligne qu'on veut ! +
+ +On peut espacer des parties de code... le navigateur ne va créer des sauts de lignes que si on lui demande d'en afficher. +

+ + +

+On peut aussi forcer un saut à la ligne avec 
 ou un autre séparateur comme 

+
+ +

+


+
+ +

Certains éléments (comme les "div") vont créer du vide autour d'elles, agir comme un "block"

+ +

D'autres éléments se comportent comme du text, sans créer de saut de ligne autour d'eux
+ : ils se succèdent sur la ligne, ils sont affichés de façon "inline"

+

Ce qui les diférentient c'est la propriété d'affichage (display)

+ + + +

+Plus d'informations :
+MDN Firefox (Display)
+
+ +

Vous noterez que, même si je fais un saut de ligne dans le code... le lien ne passe pas à la ligne...

+

contenu ainsi que <a>contenu</a> sont "inline"

+ + + + + + + + +

Basics, des balises de base, prêtes à l'emploi

+ +

D'autres éléments de base permettent de styliser facilement le texte...

+

À l'orgine il s'agissait de "mimer" certaines mises en formes usuelles dans le journalisme, l'édition

+ + +

La balise...
"u" underline
"b" ou "strong" gras, em ou i pour italic +
La balise "span" + est neutre mais permet d'entourer une partie du texte
+ ... On va voir ensuite comment il est possible d'ajouter des "classes" et "id" permettant de les identifier

+ +

+
demo de balise inline qui crée du gras (et c'est tout)

+
+ + +

+  #italgras {
+    i, u, strong {
+      color: orange
+    }
+  }
+
+ +

+

+  Exemple :

+  
Voluptate labore laboris pariatur. Dolore exercitation et ex tempor tempor ut consequat sint deserunt commodo sunt aute. Ex ad est culpa sint eiusmod dolor enim fugiat ipsum eiusmod dolor deserunt. Reprehenderit ullamco pariatur aliqua officia veniam deserunt duis esse nulla laborum ad adipisicing reprehenderit cupidatat cupidatat. Sunt exercitation ad ullamco cillum id. Tempor velit exercitation aute velit pariatur.

+  
+  
Laboris nisi amet nisi laborum nostrud. Mollit nisi dolore consectetur cupidatat magna occaecat reprehenderit labore esse id. Irure esse excepteur ea aliquip eiusmod velit ipsum exercitation fugiat officia ullamco ut et reprehenderit laboris. Culpa ipsum tempor excepteur. Officia in ea magna do commodo exercitation. Laborum voluptate incididunt incididunt do Lorem in est laboris consectetur enim occaecat. Culpa laboris incididunt eu id qui sit eu voluptate quis laboris eiusmod. Eu aliquip aliqua labore ad eu sint adipisicing laboris esse nisi ut mollit ex eu.

+

+
+ + + + + + + + + + + +

Voir les styles CSS par défaut

+ +

On peut toute fois modifier les propriétés données à ces éléments de base (ou en utiliser un plus adapté)

+ + +

Je peux voir le code source de la page en faisant CTRL+MAJ+I les outils de dev. s'affichent
+ Dans Firefox je trouve les parametres via icon "..." (à droite) puis Parametres ("icon rouage") /OU/ F1

+ +
+ +
+ +

Je peux ensuite demander d'afficher ces styles par défaut

+ +
+ +
+

Firefox montre bien que "strong" a des valeurs par défaut... on peut + voir d'autres propriétés et feulles de style

+ + + + + + +

Ajouter du style = propriétés + valeurs

+ + +

On peut opérer de plusieurs façons, d'abord on peut ajouter du style directement dans un élement
+On parle de méthode "inline", dans le texte/code/page même (pas un fichier distinct, on va y revenir)

+ + +
Ici je veux annuler la propriété et valeur attribuées aux éléménts "strong"... + C'est la propriété font-weight avec la valeur "bold" (gras) qui crée l'empatement... + ... par défaut, un élément "strong" est mis en gras "bold" + + Pour changer l'empatement je vais modifier le style de l'élémént strong... + font-weight est une propriété + normal une valeur attribuée à cette propriété +
+ +

+
Dolore exercitation et ex tempor

+

+
labore laboris pariatur....

+
labore laboris pariatur....

+
+ + + +

+
Ici je suis venu ajouter du style directement à l'élément + font-size est une propriété (de style, d'habillage) + 10px une valeur attribuée à cette propriété +
+ +

+petit text - 
+même taille  - 
+plus petit text
+
+ + + +
On a vu qu'en HTML on pouvait entourer / encercler / contenir... des bouts de text par des balises + Une fois entourés par ces balises, ces bouts de text séparés sont appelés de éléments" + Il existe des éléments de base, prêts à l'emploi, ils ont des propriétés d'affichage intégrées (par défaut) + On peut modifier les éléments en y ajoutant du "style" directement à l'intérieur de l'élément (avec style="") + Ces nouvelles propriétés et valeurs outrepassent celles précédemment demandées (par le navigateur) +
+ + + + +
+ + + + + +

Feuilles de style : fichier.css

+ +

Comme on vient de le voir...
+ On peut ajouter du style directement dans un élément (dans la page HTML)... mais ce n'est pas le plus simple

+ +

Il est préférable de créer une "feuille de style" pour "Cascading Style Sheet" == CSS

+

On y renseigne / indique / ajoute des instructions d'habillage qui vont modifier le comportement visuel des éléments dans la page ...
+ ( qu'on va identifier grâce à des "Selectors" utilisés dans les feuilles de style CSS pour cibler des éléments présents dans la page HTML )

+

L'intéret d'une feuille de style c'est qu'on peut y ajouter autant de règles qu'on veut et les sauvegarder dans un fichier (qu'on va pouvoir copier, déplacer) +
... ainsi, ces règles inscrites dans un fichiers seront accessibles directement (plutôt qu'intégrées dans la page HTML) +
... ainsi, plusieurs pages pouront charger les mêmes instructions de style. +
.... Si je mets à jour cette feuille de style (fichier), toutes les pages qui la charge auront leur mise en page mise à jour !< +
On peut ainsi modifier plusieurs éléments récurents d'une page à l'autre... (cela donnera de la cohérence esthétique à un site)

+

C'est une méthode de centralisation de l'information...

+ + + + + + + +
+ +

Où mettre la feuille de style ?

+ +

Voyons d'abord comment fonctionne une feuille de styles (CSS)

+ +

Pareillement à une page web (par exemple index.html), une feuille CSS a une extension particulière : ".css"

+

On peut la nomer de plein de façons ! style.css par exemple

+

"On ne met pas d'espace dans le nom des fichiers !, on les remplace par "_" ou "-", plutôt "_""

+

Une fois la feuille de style crée on devra la charger dans la page HTML + +

+ + + +
Si je mets cette balise dans ma page (de préférence dans <head> .... et </head>, dans la tête de la page)... +les instructions qu'elle contient vont modifier la façon dont le navigateur affiche les éléments de la page +
+ +

+
+
+ +

Lien vers style_basics.css

+ + +

La feuille de style (fichier) est pratique si on l'utilise plusieurs fois de page en page +Et, formellement, cela permet d'avoir toutes les inforamtions séparées au même endroit... +Mais on peut aussi charger cette cascade d'instructions directement dans la page...

+

Au lieu d'utiliser <link> on pourra utiliser <style>...</style> +
== On peut mettre des instructions de style en cascade directement "inline", dans la page HTML.... +
plutôt que dans un fichier séparé (block)

+

+ + + + + + + + +
+ + + + + +

Identifier et "cibler" les éléments de la page (id, classes)
+ + leur attribuer des propriétés+valeurs

+ +
Plutôt que d'intervenir sur un élement à la fois, on pourra attribuer les mêmes propriétés à un ensemble de mêmes éléments, + Ici, la classe "important" est ajoutée sur deux éléments span... + Ils sont rouge car une instruction dans la feuille de style CSS rend le text... rouge + Dans la feuille de style on indique qu'on cherche (cible) TOUS les éléments avec la class "important" en indiquant.... + #important_wrapper (# == ID) + .important (. == classe) + + Ce qu'on fait là c'est cibler ("sibling") un élément d'après sa classe ou son id + On verra qu'il existe d'autres moyens (plus sophistiqués) + Un index complet (qui pointe vers MDN) fait le tour Selectors (et propriétés) CSS... +
+ +

+  #important_wrapper { /* id */
+    margin-left: 10px;
+    border-left: 3px solid red;
+    padding-left: 20px;
+  }
+  .important { /* classe */
+    font-weight: bolder;
+    color: red;
+  }
+  .pas_important {
+    font-weight: normal;
+  }
+
+ +

+

+  
Ceci est une span avec une classe .important (mais pas strong)...

+  
Ceci est strong sans classe, normal, basic.....

+  
... ceci est strong mais .pas_important !
 
+  
De nouveau, une span qui se fait passer pour strong !

+

+
+ + + +

Un "id" (identifiant) sert à identifier un élément unique dans la page

+ +

Les "classes" sont attribuées à des éléments qu'on veut habiller de la même façon (leur donner le même comportement) +
Une classe est utilisée plus souvent, elle va contenir des mises en formes courament utilisées +
Aussi il est interessant de trouver des noms de classes équivoques (ce n'est pas toujours facile) +

+ + + + +

CSS /VS/ HTML, cibler des éléments /VS/ ajouter des classes

+

CSS : On peut attribuer les mêmes consignes (propriétés + valeurs) à plusieurs élémens ciblés en même temps (via leur classe, id, etc) -- virgule

+

+  .para, #sad {
+    ....
+  }
+  .para, 
+  #sad {
+    ....
+  }
+
+ +

CSS : On utilise un --espace pour indiquer qu'on va chercher un élément... à l'intérieur d'un autre
+ === #text_principal p { ... }
+ === "parent > enfant" +

+ +

HTML : On utilise un --espace pour attribuer plusieurs classes à un même élément ( ex suivant: "para fond_bleu" )....
+ === a la classe "para" et "fond_bleu"

+ +

+/* ID */
+#text_principal {
+  font-family: sans-serif;
+  line-height: 0.4em;
+}
+/* CLASSE */
+.para {
+  background-color: yellowgreen;
+}
+/* CLASSE, autres instructions */
+.fond_bleu {
+  background-color: blue;
+  color: #FFF;
+}
+/* CLASSE/ID plusieures cibles en même temps */
+/* Séparées par une "," */
+.para, #sad {
+  font-weight: bold;
+}
+
+/* Exemple pour cibler/affecter tout "p" présent dans "#text_principal" */
+/* et pas TOUS les "p" de la page */
+#text_principal p {
+  font-family: serif;
+}
+/* .... on aurait aussi pu affecter une classe à l'élément (en HTML) */
+span.serif_big { /* TOUT span AVEC la classe serif_big */
+  /* 3. "paragraphe" (dans l'élément "u") ne sera pas effecté par le changement de typo+taille */
+  font-family: serif;
+  font-size: 1.2em;
+}
+
+/* PSEUDO CLASSE :last-child */
+p:last-child .para {
+  background-color: orangered;
+}
+
+ +

+
 
+  
1. Je suis le premier paragraphe !
 
+  
2. Et moi le deuxième paragraphe !
 
+  
3. Et moi le troisiem paragraphe !
 
+  
4. Et moi le dernier paragraphe 
+                                                    =(
 
+
 
+
+ +
1. et 2. sont verts (car .para) + + 3. est bleu... car, dans une la suite d'instructions CSS, la dernière règle indiquée l'emporte sur les règles précédentes !!! + C'est pour cela qu'on dit qu'elles sont en Cascade ! + == Le fichier est lu de haut en bas par le Navigateur qui ensuite afficher la page selon cette liste de demandes/règles. + + ICI, dans le CSS, les instructions de fond (background) indiquées dans ".fond_bleu" prennent le dessus sur celle de ".para" + + 4. utilisation d'une pseudo-classe (on va les passer en revue), + ( MDN Pseudo-classes + MDN last-child ) + ... celle-ci, dans notre exemple... cible TOUT dernier paragraphe (p:last-child) puis cherche TOUT .para à l'intérieur... + ( ... dit à l'envers : cette instruction cible TOUT élément avec la classe "para" présent dans le dernier paragraphe (p:last-child) ) + + 4. Dans le CSS... + ... Comme cette instruction d'atteindre/cibler le dernier .para est indiquée après celle de ".fond_bleu", elle prend le dessus : + ... la propriété:value background-color: orangered; est appliquée !!! +
+ + +
+ + +
Ciblage parents
+

Un autre exemple de ciblage d'un élément dans un élément

+

#contenant .element_dedans .sous_element

+ +

+  .border {
+      border:1px solid #000;
+  }
+  .cascade {
+      margin-left: 10px;
+      background: #FFF;
+      text-align: center;
+  }
+  .cascade:hover { /* Hover est une autre pseudo-classe bien pratique... */
+      background: fuchsia;
+  }
+  #enfant p { 
+      /* tout p présent dans #enfant */
+      text-transform: uppercase;
+  }
+
+ +

+

+  
tête

+  

+    
aide

+    

+      
autonomie
 
+    

+  

+
+
+  
+
+  
jambes

+

+
+ + +

Nesting

+ + +
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_nesting/Using_CSS_nesting +CSS Avancé ! Autre façon de cibler les éléments d'une page HTML
Permet une meilleure lisibilité, on attribue des instructions CSS par élément (et ses sous-élements)
+ + + +

+  .border {
+      border:1px solid #000;
+  }
+  .cascade_nesting {
+      margin-left: 10px;
+      background: #FFF;
+      text-align: center;
+  }
+  .cascade_nesting:hover { /* Hover est une autre pseudo-classe bien pratique... */
+      background: yellow;
+  }
+
+  #parent_nesting {
+    p { 
+      color: red;
+    }
+    u { 
+      padding: 10px;
+      display: inline-block;
+    }
+    u, p {
+      text-transform: uppercase;
+      background: yellow;
+      display: inline-block;
+    }
+  }
+  #grand_parent_nesting:hover :is(#parent_nesting, #enfant_nesting) {
+    & * {      background: orange     }
+    background: orange
+  }
+
+ +

+
tête

+
aide

+
autonomie

+

+
+ + + + + + + +
Mise en page, garder son code lisible et ordonné
+

Vous notez que dans l'écriture du code HTML j'essaie de garder les choses lisibles...
On pourrait ajouter de l'espace (saut de ligne) pour espacer les div avec #id

+

On peut faire autant de saut de ligne que l'on veut... le Navigateur ne les interprète pas comme des sauts de ligne (on l'a vu, on peut utiliser
)

+

Autre chose, on utilise des retraits de ligne (à gauche) des "indent", des espaces pour, visuellement, voir dans le code, quel tag (ici des <p> <div>)
+C'est une convention formelle... qui aide grandement à résoudre des "bugs" / "errors" +

+Wiki Style d'indentation : https://fr.wikipedia.org/wiki/Style_d'indentation + + +

Dans VSCODE on peut utiliser
Prettier Code Formatter qui fait le boulot à notre place
(aligne correctement les blocks de textes en fonction de leur imbrication successive...)
+ou encore indent-rainbow

+ + +
+ + + + + + + + + + + + + + +

Margin padding

+

S'il on veut créer un saut à la ligne on peut utiliser ajouter des propriétés de marge externes ou internes à l'élément
+Pour cela il faut que l'élément se comporte comme un bloc, ait une propriété display: inline-block | block

+ +
MDN (margin) : https://developer.mozilla.org/fr/docs/Web/CSS/margin +MDN (padding) : https://developer.mozilla.org/fr/docs/Web/CSS/padding +MDN (border) : https://developer.mozilla.org/fr/docs/Web/CSS/border +MDN (raccourcis) (T R B L) https://developer.mozilla.org/fr/docs/Learn_web_development/Core/Styling_basics/Getting_started#raccourcis +MDN (display) : https://developer.mozilla.org/fr/docs/Web/CSS/display
+ +

+/* Objet au centre, avec MARGE extérieure et PADDING intérieur */
+
+/* DEMO, sert à expliquer.montrer la MARGE EXTERIEURE (margin) autour de #test_margin_padding  */
+#test_wrapper { 
+    border: 1px solid gainsboro;
+    background: #fdffdf;        /* jaune */
+    padding: 10px;
+}
+
+/* Element avec marges... */
+#test_margin_padding { 
+    padding: 30px; /* PADDING */
+    margin: 30px; /* MARGIN */
+    border: 1px solid;
+    background-color: #e3dcff;   /* mauve */
+    border: 3px solid red; /* bord visuel de notre élément de test */
+}
+
+/* DEMO, sert à expliquer.montrer la MARGE INTERIEURE (padding) */
+/* ... entre le bord de #test_margin_padding et son CONTENU */
+#inner_content { 
+    background-color: #cff0fb; /* bleu clair*/
+    padding: 0px;
+}
+
+ +

+

+  
 
+    
Contenu

+  

+

+
+ +

Firefox : CTRL+MAJ+I + -> Inspecteur -> Mise en Page

+

En selectionnant un élément dans le code à gauche, on voit quelles marges externes (et internes, avec padding) lui sont appliquées

+ + + + +
+
+
+ + +

+  #margin_first,
+  #margin_seconde,
+  #margin_last {
+      /* il faut que propriété "Display" ait la valeur "inline-block"  */
+      /* (pour éviter que les éléments sautent à la ligne, des blocks) */
+      display: inline-block; 
+      border: 1px solid;
+  }    
+  .margin_left {
+      margin-left: 100px
+  }
+  .margin_right {
+      margin-right: 100px
+  }
+  .large {
+      width:500px;
+  }
+  .petite {
+      width:200px;
+  }
+
+ +

+  

+    #margin_first
+  

+
+  

+    #margin_seconde
+  

+
+  

+    #margin_last
+  

+
+ + +

Margin et Padding (mais aussi border ou encore text-shadow) fonctionnent comme ceci :

+ + + + +

+#top_margin_block {
+  width: 100%
+}
+#margin_exemples_wrapper {
+  background: greenyellow;
+  border: 1px solid #000; /* width(épaisseur) style color */
+    border-width: 1px 1px 1px 1px;
+  display: block;
+  clear: both;
+  float: left;
+  width: 100%;
+  margin-bottom: 4rem;
+}
+.margin_exemples {
+  display: inline;
+  float: left;
+  border: 1px solid #000;
+  border-color: red;
+  background: chartreuse;
+   /* top right bottom left */
+  padding: 5px 5px 0 5px; /* EXEMPLE Padding */
+    padding-top: 5px;      /* déclinaison.. marche aussi avec border, margin, etc */
+    padding-right: 5px;
+    padding-bottom: 0;
+    padding-left: 5px; 
+  height: 100px; 
+  width: 100px;
+}
+.margin_exemples.margin_autour {
+  margin: 100px 0px 0px 0px; /* EXEMPLE Margin */
+  height: auto; width: auto;
+  min-height: 100px;
+  background: lavender;
+    /* top+bottom    left+right */
+  border-width: 1px 4px; /* EXEMPLE border... 2 val., 1er==top+bottom 2e==left+right */
+}
+
+ +

+

+  
#top_margin_block

+  
.margin_autour :
margin: 100px 0px 0px 0px;

+  
style : 
margin-top: -10px

+

+
+ +

+Notez que, dans le dernier exemple, c'est le style="..." de l'élément (qui est chargé/lu/interprété en dernier, après la feuille de style)....
c'est ce style (margin-top: -10px) qui l'emporte.
+On garde la logique, la dernière propriété:value donnée à un élément (EX: div#exemple.dernier) qui est prise en compte.
+

+ + + + + +

Transition + margin (pause)

+ +
Margin crée de l'espace, permet aussi de déplacer les éléments... +MDN (transition) : https://developer.mozilla.org/fr/docs/Web/CSS/transition
+ +

+#mousehover_movemargin_element { 
+  height: 130px;
+  width: 130px;
+  background: red;
+  color: #FFF;
+  padding: 20px;
+  text-align: center;
+  display: block; /* par défaut, une div a la propriété "display" == "block" (comme valeur) */
+}
+#mousehover_movemargin:hover #mousehover_movemargin_element {
+  margin-left: calc(100% - 130px - 50px);
+  background:yellow;
+  transition: all 1s;
+  cursor: pointer;
+}
+
+ + +

+  

+    
Youhouuuuu

+  

+
+ + + + +
+
+ + + +

Margin auto + float (+var +calc)

+ + + +

+#margin_auto {
+  display: block; /* + display block */
+  margin: auto;   /* + marge gauche+droite ==> centré ! */
+  /* + taille.largeure fixe (width), ici donnée par .w_large */
+  /* ==> block centré ( marges auto à droite et à gauche ) */
+  background: yellow;
+  text-align: center;
+}
+
+#float_none  { float: none;  }
+#float_left  { float: left;  }
+#float_right { float: right; }
+
+#margin_center_wrapper { /* DEMO rend visible le margin auto */
+  background: #fdffdf;
+  float: none;
+  border: 1px dashed gray;
+}
+
+/* Variables : on attribue une valeure (400px) à une variable "--xxx" */
+/* ... normalement, methode, on les met au début de la feuille CSS (en premier/haut) */
+:root { 
+  --w400: 400px; 
+}
+.w400    {  width: var(--w400);  } /* on charge la valeur contenue dans la variable "--xxx" */
+.w_large {  width: 600px;  } 
+.h_grand {  height: calc(100px + 100px); } /* calc permet de faire des oppérations mathématiques */
+.h100    {  height: 100px; }
+.w100p   {  width: calc(100% - var(--w400)); } /* exemple calc + var ... on aura d'autres exemples*/
+
+.floater {
+  background: yellowgreen;
+  padding: 10px;
+  box-sizing: border-box; /* "box-sizing" va auto calculer les dimensions (height/width)... */
+  /* ... SANS les Padding ni Margin */
+  /* ... sinon, par défaut la largeur ici calculée serait --w400 + Margin + Padding */
+  /* ... ce qui serait trop large !!!! du coup mon calcul serait faussé */
+  /* ... ( je devrais moi-même prendre en compte les margins... ) */
+}
+
+ +

+
#float_none

+
+

+  
#margin_auto :
Contenu centré

+

+
+
#float_right: 
width: var(--w400)

+
+
#float_left :
width: calc(100% - var(--w400))

+
+ + +
Box-sizing... + La Cascade, explications détaillées en Français : https://la-cascade.io/articles/box-sizing-pour-les-nuls + MDN (détails) : https://developer.mozilla.org/fr/docs/Learn_web_development/Core/Styling_basics/Box_model + + MDN (:root) https://developer.mozilla.org/fr/docs/Web/CSS/:root + MDN (var) : https://developer.mozilla.org/fr/docs/Web/CSS/var + MDN (calc) : https://developer.mozilla.org/fr/docs/Web/CSS/calc +
+ + + + + + + +

Largeur / hauteur (adaptative)

+ +

+#width_full_page {
+  max-width: 800px;
+  min-width: 500px:
+  padding: 10px; border: 1px solid; background: yellow;
+}
+
+ +

+

+  #width_full_page
+

+
+ + + + + +

Mediaqueries

+ +
Exemple complet : 0_min_max_width.html +Penser à ajouter <meta name="viewport" content="width=device-width, initial-scale=1.0"> dans head
+ +

+:root {
+    --maxw: 600px;
+    --maxw_extra: 900px;
+}
+#width_full_page,
+#width_bloc_textarea {
+    padding: 10px; border: 1px solid; 
+    background: yellow;
+}
+
+.min_max_width {
+    min-width: 500px;
+    max-width: var(--maxw_extra);
+}
+
+/* vue adaptative aka. responsive design */
+@media (max-width: 638px) { /* == S'applique tant que l'écran a une largeur maximum de... 638px (et -) */ 
+                            /* == Si l'écran a une largeur max de 638px */
+                            /* ..... ok .... ok .... 638px || non */
+    #width_full_page {      
+        background: rgb(34, 255, 0);
+    }
+}
+@media (min-width: 700px) { /* == Si l'écran est large au minimum de... 700px (et +) */
+                            /* non || 700px ..... ok .... ok .... */
+    #width_full_page {
+        background: rgb(255, 102, 0);
+    }
+}
+
+/* EXTRA/bonus ":has".... */
+/* Si xxx:has(yyy) == "SI xxx contient yyy" */
+/* Ici, on garde la taille fixe si le bloc contient une textarea */
+.min_max_width:has(textarea) {
+    min-width: var(--maxw);
+    max-width: var(--maxw);
+}
+textarea {
+    width: var(--maxw); /* initial */
+    max-width: calc(var(--maxw) - 10px);
+    min-width: 400px;
+    min-height: 100px;
+    max-height: 300px;
+    display: block;
+}
+
+ +

+  
+     
+  
+  
+    

+        #width_full_page
+    

+
+    

+        #width_bloc_textarea
+        
+    

+  
+
+
MDN css CSS_media_queries + MDN css Unités de mesure (px, em, vw, vh) + MDN css :has + MDN html textarea +
+ + + + + + +

Positions... left/right/top/bottom

+ +

On peut également déplacer un élément de la page grace à la combinaison de :
+ position: relative | absolute | fixed | sticky
+ left / right / top / bottom: 100px
+ + +

MDN (Position) : https://developer.mozilla.org/fr/docs/Web/CSS/position
+ + +

+  .moveme {
+    z-index: 999;
+  }
+  .move_relative {
+    position: relative;
+  }
+  .move_absolute {
+    position: absolute;
+  }
+  .move_fixed {
+    position: fixed;
+    opacity: 0;
+    bottom: 0px; right: 0
+  }
+  .moveme:hover {
+    opacity: 0;
+  }
+  
+  /* "Combinateur de voisins directs" (.item + .other) */
+  /* https://developer.mozilla.org/fr/docs/Web/CSS/Next-sibling_combinator */
+  .not_last_move:hover + .moveme,
+  .not_last_move:hover,
+  .move_fixed:hover {
+    opacity: 1;
+  }
+  
+
+  /* encore du CSS avancé... */
+  /* https://css-tricks.com/examples/nth-child-tester/ */
+  /* https://css-tricks.com/how-nth-child-works/ */
+  .moveme:nth-last-child(2) {
+    border: 3px solid red;
+  }
+  .moveme:nth-last-child(1) { background: red; color: #FFF; z-index: 9999999; }
+
+  .petit_padd { padding:4px; background: #FFF }
+  
+
+  #pos_sticky {
+    position: sticky;
+    top: 0;
+    right: 0 !important;
+    float: right;
+    margin: 0;
+    background: aqua;
+  }
+
+ +

+    relative + left:100px; 
+    relative + left:300px;
+    relative + top:-70px;
+    absolute + top:-70px;
+    fixed + bottom: 0px; right: 0;
+
+ + +#pos_sticky + + +
+ + +

Dialog

+ +
+
+
+
+ +

Faisons une petite pause !

+
+ +
+ +
+
+
+
+
+
+ + +

Selection

+ + +

Petite pause, encore une pseudo-classe....
+MDN : https://developer.mozilla.org/fr/docs/Web/CSS/::selection + +


+/* #incognito { pointer-events: none;} */
+
+.code-content ::selection {
+  background: #000;
+  color: #FFF;
+}
+
+#incognito :is(.censured, .silencied, .unreadable) {
+  background:#000;
+  color: #000;  
+  pointer-events: none;
+}
+#incognito :is(.censured, .silencied, .unreadable)::selection{
+    color: #000;
+}
+
+
+ +

+  

+    

+      Id quis id est cupidatat ea culpa. Excepteur excepteur adipisicing esse ullamco occaecat duis commodo reprehenderit commodo nostrud incididunt. Dolore nisi nostrud aute mollit eu pariatur. In incididunt reprehenderit ut nisi veniam Lorem. Laboris irure occaecat cupidatat et.
+    

+    

+      Velit culpa deserunt commodo magna eiusmod deserunt tempor aute excepteur et labore velit incididunt qui. Labore velit do sunt enim aliquip veniam deserunt deserunt. Mollit proident reprehenderit ullamco. Dolor eu cillum ipsum consequat eu consectetur minim enim commodo dolor sint irure nostrud magna. Adipisicing enim laboris anim consectetur Lorem incididunt dolore minim mollit deserunt ad dolor id ad exercitation. Aliquip irure deserunt eiusmod minim ex nostrud duis irure ad laborum. Lorem cupidatat commodo exercitation laborum mollit sint sint consequat commodo.
+    

+  

+
+ + + + + + + + + + +

Textes

+ + +
MDN font-familly : https://developer.mozilla.org/fr/docs/Web/CSS/font-family + MDN font-size unités (em, px) : https://developer.mozilla.org/fr/docs/Web/CSS/length#em +
+

+#text_basics {
+  
+  font-size: 1.2em;
+  line-height: 2em; /* ((( em ))) 1em == Hauteur de la police... 1.5em 1xhauteur de la police + 0.5... */
+  font-family: sans-serif, Arial;
+  text-decoration: underline;
+  font-style: italic;
+  text-align: justify;
+  hyphens: auto;
+}
+#text_basics p:first-letter {
+  text-transform: uppercase;
+}
+
+ +

+  

+    
ipsum exercitation adipisicing incididunt fugiat nulla laboris sit consectetur esse sunt laborum nisi nisi nisi ullamco. Deserunt cupidatat occaecat in. Proident voluptate exercitation culpa veniam nulla elit fugiat. Cillum id consequat fugiat dolore culpa proident amet. Lorem est qui quis nulla nostrud labore irure id culpa cupidatat non aute nostrud pariatur. Sint veniam cillum ut veniam voluptate excepteur commodo occaecat elit pariatur laborum. Laborum ad duis cupidatat consequat cillum enim cupidatat enim enim sint labore. Aliqua ipsum aliqua quis occaecat est sunt nulla sit pariatur velit nostrud dolore ipsum est.

+  

+
+ + + +
+ +
+ + + + + + + +
+ + +

Alignement de text, colones...

+ + + +

Alignement manuel (2 colones left/right)

+ +
MDN font-size unités (em, px) : https://developer.mozilla.org/fr/docs/Web/CSS/column-count
+ + + +

+
+#contenant {
+  display: block;
+  margin-bottom: 5rem;
+
+  p:first-child {
+    margin-top: 0;
+  }
+  p:last-child {
+    margin-bottom: 0;
+  }
+
+  .left, .right {
+    float:left;
+    width: 50%;
+    box-sizing: border-box;
+  }
+
+  .left {
+    width: calc(50% - 0px);
+    padding-left: 0px;
+  }
+  .right {
+    border-left: 1px solid #000;
+    padding-left: 30px;
+  }
+}
+
+ +

+  

+    
+      

+        Un projet super simple construit grâce à un template sur GitLab
+      

+    
+    
+      

+        Un projet super simple construit grâce à un template sur GitLab
+      

+    
+  

+
+ + +

Alignement css (column-count)

+ +

+#contenant_cols {
+  column-count: 2;
+  float: left;
+
+  .text {
+    text-align: justify;
+    hyphens: auto;
+    display: block;
+  }
+}
+
+ +

+  

+    

+      Nulla et aliquip labore duis irure veniam ipsum labore excepteur incididunt qui. Non nostrud aliquip cupidatat cupidatat enim commodo pariatur consequat quis. Fugiat nulla amet adipisicing eiusmod ullamco ullamco esse voluptate exercitation mollit velit ea aliquip aute eu. Cillum ex tempor dolore ad ex pariatur ex velit. Labore ad ad non ea cillum eiusmod sunt dolor dolore ipsum reprehenderit enim occaecat. Consequat culpa nisi in esse laborum velit non deserunt nostrud sit in veniam. Dolore veniam ad do incididunt est excepteur eiusmod esse Lorem sint.
+
+      Exercitation ullamco nisi Lorem anim occaecat dolore incididunt eiusmod esse aute sunt deserunt laboris. Elit eiusmod consectetur laborum est. Lorem consequat aliqua nisi excepteur est laborum amet voluptate aliquip consequat ea labore sit reprehenderit enim. Eu consequat consequat excepteur reprehenderit ipsum in minim sint. Non ullamco mollit tempor excepteur occaecat dolore aliqua proident sint do. Exercitation duis enim laboris fugiat esse in.
+      
+      Excepteur nisi eiusmod ea ut excepteur nisi veniam duis reprehenderit consequat reprehenderit. Nostrud fugiat reprehenderit aliquip. Dolor adipisicing eiusmod do exercitation cupidatat eu. Et commodo veniam esse adipisicing. Exercitation nisi dolore Lorem anim sit non in. Et anim voluptate do proident aliquip occaecat.
+    

+  

+
+ +
+
+
+ Flexbox +
+
+
+
+ + + + + +
#
+ + +
+ + + + + + + + + + + + + + + + +
+ + \ No newline at end of file diff --git a/public/_ressources/0_intro/css/style_basics.css b/public/_ressources/0_intro/css/style_basics.css new file mode 100644 index 0000000..d2b7fdd --- /dev/null +++ b/public/_ressources/0_intro/css/style_basics.css @@ -0,0 +1,8 @@ +p { + color: #000; +} + +#next_flexbox { + background: #000; color: #FFF; + padding: 10px 20px; +} diff --git a/public/_ressources/0_intro/css/style_columns.css b/public/_ressources/0_intro/css/style_columns.css new file mode 100644 index 0000000..b28b04f --- /dev/null +++ b/public/_ressources/0_intro/css/style_columns.css @@ -0,0 +1,3 @@ + + + diff --git a/public/0_assets/0_afficher_style.png b/public/_ressources/0_intro/img/0_afficher_style.png similarity index 100% rename from public/0_assets/0_afficher_style.png rename to public/_ressources/0_intro/img/0_afficher_style.png diff --git a/public/0_assets/0_firefox_parametres_devs.png b/public/_ressources/0_intro/img/0_firefox_parametres_devs.png similarity index 100% rename from public/0_assets/0_firefox_parametres_devs.png rename to public/_ressources/0_intro/img/0_firefox_parametres_devs.png diff --git a/public/0_assets/0_padding_margin.png b/public/_ressources/0_intro/img/0_padding_margin.png similarity index 100% rename from public/0_assets/0_padding_margin.png rename to public/_ressources/0_intro/img/0_padding_margin.png diff --git a/public/0_assets/0_padding_margin_cut.png b/public/_ressources/0_intro/img/0_padding_margin_cut.png similarity index 100% rename from public/0_assets/0_padding_margin_cut.png rename to public/_ressources/0_intro/img/0_padding_margin_cut.png diff --git a/public/_ressources/0_intro/img/0_vscoder_multi_cursors.png b/public/_ressources/0_intro/img/0_vscoder_multi_cursors.png new file mode 100644 index 0000000000000000000000000000000000000000..63ab0285ebf599d3130f616f29b442ed2899d39c GIT binary patch literal 76420 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 {S_ zLN1Nhvlw3 z6u7?kk1UrCSwmi}Z94YHrp)a#4ZeN1Shh}kMD4+^st^6k?~iQp>q&Wy^)pTWT6~jVTRFUa=~p;kVSxcI_G(N93D=wffnfD<)mh#{JrYi=Tio_?Y=+IO@5ed?ITjnI zWUqhr``StD$2+HTMn!FuTK_etJX`fPvr8Q{vGvaB^ORo?cFS+4rD!uE*I4V-`4cY7 z+xTA{;MQ&`NVI#FUgEhiCCP1Pj_De6N^#ZEpMsl}Zn{?F93Jd@&7!zwr~j5KnMj~* z2U+cK+!37fhxY}y`Y(?gt6$JJ@bTL5(WLv*%F31&FY+y7Ym0jSG^V=QvUT;Q*H$#W zrK1>ZtQ<5(f0xRXBi#%dPH#NfztX@Ua>nMZ8@ibFndVa5wTowjgPy^K%c=8EV@^L5 zY%^=UTL-_?Y?T*2!TUb@d91z?V3IlM(x(8e4aYKbtUZ@m#l1Kk&@#T(Dyvb~S3S#@ zb^6p;XR~>)ATN^}*Pe&vw0k;WN}2bJ#)^w(dH0Ws?cV-v``MWldDd67bnOgEcQ6Qk z9C$<};$Gg;>{7>q{k_HwZyOcTR&xTb8wddETo9c>zaeL?1mKcz)@v2(RnKn;LV;*Ke|H zU4Po+b46VY0u6)x)PD+yx{%gulI?T{?x3{F2?p&ho%g!@TUOR%wVbiP`Y!S7r(phO z_z9PlHD<2;as!*UGflc3Wp=^;X7EbI6Tu}D?d-Wjw)@`n|Gq4uW$egMH&=)K0X1DC zFPg8a4AUMKvaMNq{JRw9G)A1!O20PcSGzNBexA86*wRXG zy-KiPKQ-Qa{jaqQ8E5XKzsgnrXyvu7OQV8=zgWjM)o7-BwrJ08i^az1eT$ zrm<7CSD!KJr>?yJ=9IWFcJ01KgY&!m80^$N?yWXE*IgdYi@szK{5t>L(^$KWBUdHt zndy2ixYhK2E5GKBKGUDsc!0-N_g=$(&5Nr(5#0ZrN@RxhM1yzVFAn+5y?k_@_tyt$ zvj%i|b>qk)MF$hrz_-m)H`eNmt5{vE9#dAcrdbgSdHQx)RNG^W`U^#awAX#(Gmd(f zwe5H4>+Nu>-bGhRkGH>dXq23E``zcrxH;pscif))>&DHtGgM;U2 z)n5B;blalkj=f@aZq7+^${!y#KxNSTyGb3t4Zm7+-Lap(fwRr!7MFkOzi-q;UEMYN z0$wKQJlWOf!IDX1zbLEDXgG1>7QdMWO??|zU%OZq+3=>PMO5vg8}_zwwr^7IOu6xK z$%2~NQybp2$jn|prqO}Z6Q3k?EdR0pP5)p`=YBt=PS5LHXw$xz|0dT@Ir(?q=){`U zJPVA7xUc0=T={k5^{p@UjORXH;HU0XwD*mfS)c2pZ+G1md#Cp9HrEl!+3|UX1sfNu z1aA-SA1N1pXy5fp(_1+_4#@23*2%>_$Edf`P@5RTgKH9c)Tq_kj-UTyW$D&m_TJdx zbWo?|^75-?RKTeI;dhQ!e<{1|{YQlQ&JVY9)ojY%>l73`i1xXbW^Zc0s^v=!kA#e= zLv#;&YaI=!H~U0s-1?gEC6PH%F9**Us+zgrx#q&pp4?KubBu z{bi|H-%zdH(XaEvtmr&yeU@fhKgc~&TR)+F@y}Be7ON}ppP5s&r<|X(c>Dha$z$os literal 0 HcmV?d00001 diff --git a/public/0_assets/vide.js b/public/_ressources/0_intro/js/vide.js similarity index 100% rename from public/0_assets/vide.js rename to public/_ressources/0_intro/js/vide.js diff --git a/public/parts/header.html b/public/parts/header.html deleted file mode 100644 index a0b961d..0000000 --- a/public/parts/header.html +++ /dev/null @@ -1,10 +0,0 @@ - - - - - Plain HTML site using GitLab Pages - - - - - diff --git a/public/style.css b/public/style.css index 1403a5d..3cb94ef 100644 --- a/public/style.css +++ b/public/style.css @@ -2,8 +2,19 @@ --property: #b77804; --value: #0451A5; --attr_value: #2aa198; + --background_titles: #000; } + + +.er_toc_tag, +:not(.code-content) > p { + font-size: 1.3em; +} + + + + .token.tag { color: #800000 !important; font-weight:400; @@ -54,9 +65,9 @@ color: #FF0095 !important; .token.unit { color: #7400DA; } -.token.hexcode.color { +/* .token.hexcode.color { color: #00c3ff; -} +} */ .token.function { color: #4A8147 !important; @@ -225,8 +236,8 @@ codescaped.espace { .file { background: #e3eafd; font-style: normal; - text-decoration: none; color: #000 !important; + text-decoration: none !important; padding: 0 7px; } @@ -274,6 +285,7 @@ div.code-toolbar > .toolbar { code.term, code.key, +kdb, kdb.key { background: gray; color: #fff !important; @@ -283,6 +295,7 @@ kdb.key { border-radius: 4px; white-space: pre-line; } +kdb, kdb.key { font-size: 1em; padding: 0px 10px; @@ -345,14 +358,18 @@ hr.visible { } .color.value { color: var(--value) !important; + font-weight: bold; } -:not(.code-content) > :is(h1,h2,h3,h4,h5,h6) { - background: #000; +:not(.code-content) > :is(h1, h2, h3, h4, h5, h6) { + background: var(--background_titles); color: #FFF; padding: 10px 20px; } +:is(html#centred, section.centred) :not(.code-content) > :is(h1, h2, h3, h4, h5, h6) { + margin-left: -10px; +} #next_flexbox { display: block; @@ -366,10 +383,68 @@ hr.visible { text-decoration: none; width: 80px; text-align: right; + color: blue; } .hash_title::before { counter-increment: compteListe 1; content: counter(compteListe) " "; font-size: 13px; -} \ No newline at end of file +} + +div.pre { + white-space: pre-line; +} + + + +.er_toc { + margin: 2rem 0; + border: 1px solid gray; + padding: 2em 0 1em 2em; +} + +#toc { + display: none; +} +#toc_checkbox:checked + #toc { + display: block; +} +#toc li { + margin-bottom: 1em; +} +#toc_wrapper { + margin: 40px 0px -40px 0; +} +.er_toc_top { + float: right; + text-decoration: none; +} + +#top_page { + position: fixed; + top: 0; + left: 0; +} +#top_page a { + padding: 10px; + font-size: 1.2em; + text-decoration: none; + font-style: normal; + color: #000 !important; +} + +.language-markup .token.keyword-class { + color: #000ECF !important; +} +.language-markup .token.keyword-id { + color: #C300FF !important; +} + +/* quickfix ok with Normalise spaces (prism plugin) */ +/* pre code[class^="language-"] { + color: #595959 !important; + margin-top: -1em; + display: block; + padding-bottom: 1em; +} */ \ No newline at end of file