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
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 "
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
... 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
Les commentaires
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
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 "
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;
+ }
+}
+
+
+
@@ -1153,38 +1305,35 @@ MDN :
+#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.
+ 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
+
+
+
+
+
+
+
+
+
+
+
\ 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 "";
+ foreach ($entrees as $entree) {
+ echo "- " . htmlspecialchars($entree['contenu']) . " (" . $entree['date_creation'] . ")
";
+ }
+ 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
+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
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+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 0000000..63ab028
Binary files /dev/null and b/public/_ressources/0_intro/img/0_vscoder_multi_cursors.png differ
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