cours test

READ_ME.md

@@ -0,0 +1,807 @@
+
+
+
+# IndieWeb (motivation)
+Faire pour et par soi-même, penser/s'amuser/aider les autres
+
+## Principes
+- principles-fr - IndieWeb   
+↳ https://indieweb.org/principles-fr   
+✊ Own your data.   
+🔍 Utilisez de la data visible   
+💪 Construisez les outils pour vous-même,   
+😋 Mangez votre propre nourriture pour chiens. Quel que soit le truc que vous    construisez, ce devrait être pour vous-même. https://indieweb.org/selfdogfood-fr
+📓 Documentez vos trucs.   
+💞 Open sourcez vos trucs !   
+📐 L'UX et le design sont plus importants que les protocoles.    
+🌐 Construisez des plates-formes agnostiques aux plates-formes.    
+🗿 Longévité. Construisez pour le long web.    
+✨ Pluralité. Avec IndieWebCamp nous avons spécifiquement choisi d'encourager et    d'embrasser une diversité d'approches et d’implémentations.
+🎉 Poilons-nous.   
++ Principes de conduite > Respect mutuel   
+https://indieweb.org/code-of-conduct-fr#Respect   
+
+## self host (hébergement gratuit, autonomie, essayer sans cout)
+- Getting Started-fr - IndieWeb (FR)
+↳ https://indieweb.org/Getting_Started-fr
+
+- web hosting - IndieWeb --> quels besoins
+↳ https://indieweb.org/web_hosting
+
+- static web hosting - IndieWeb -- hosts
+↳ https://indieweb.org/static_web_hosting
+
+--> Choix de github/lab
+
+
+
+# Accéder au projet :
+( va afficher le contenu du dossier "/public" )   
+
+URL du projet perso          
+- https://USERNAME.gitlab.io/PROJECT_NAME    
+EX/ mon projet (fork)    
+L'URL FINALE == https://bonnebulle.gitlab.io/plain-html-redo    
+Redirige vers = https://plain-html-redo-751743.gitlab.io    
+( URL Non personelle )    
+. . .   
+mais hébergement gratuit !   
+
+---
+
+# Tuto :    
+
+## Objectif :     
+Cloner un projet initial existant
+( "> `git clone +url`" )   
+EX/ `git clone https://gitlab.com/bonnebulle/plain-html-redo.git`   
+Comprendre le versionning + fork   
+( sauvegarder l'état d'un projet : "> git commit" + "> git push" )    
+Revenir dans le temps à un état de sauvegarde passé   
+( grace à son identifiant unique : hash/SHA )   
+Auto-héberger une page sur GitLab    
+( gratuit )    
+
+
+## Éditer du code ...    
+Le partager et envoyer les dernières modifications : 
+GITLAB permet de travailler sans rien installer !    
+Il embarque un IDE ( éditeur de code accessible en ligne )     
+( IDE == Integrated Development Environment == Environnement de développement intégré )
+On va travailler à partir de cet interface web       
+mais on peut aussi l'installer "en local" :    
+
+
+
+# UN APERCU des pouvoirs de Git : REVENIR DANS LE FUTUR
+
+0. cloner un projet    
+
+Depuis le terminal dans un dossier au choix     
+> cd /chemin/vers/mon/dossier    
+> git clone https://gitlab.com/bonnebulle/plain-html-redo.git     
+> cd plain-html-redo    
+
+( affichier le fichier index dans le navigateur pour voir )     
+> firefox ./public/index.html   
+> chromium ./public/index.html   
+
+1. lister les comit précédents EX/ 117647b     
+> git log --oneline
+... réccupérer les fichiers dans une version précédente ...   
+
+2. revenir à telle version du projet ( + **hash/SHA** )    
+> git checkout 117647b
+
+( affichier le fichier index dans le navigateur pour voir )     
+
+3. revenir à la dernière version ( main )    
+> git checkout main
+
+( affichier le fichier index dans le navigateur pour voir )     
+> firefox ./public/index.html   
+> chromium ./public/index.html   
+
+Une page en FRANCAIS qui résume les principales commandes GIT    
+https://www.hostinger.fr/tutoriels/commandes-git   
+
+( dont l'initialisation et configuration )    
+
+! De façon générale, la documentation de Git est libre et en multi langues    
+https://git-scm.com/docs
+
+
+
+
+
+
+
+
+
+
+
+## GIT =?=  GitLab/Hub
+
+### GIT versioning -- gestion de version, travail co
+
+Git est un outil qui permet de créer et gérer des versions d'un projet    
+On peut ainsi sauvegarder plusieurs fichiers modifiés d'un coup     
+( en leur attribuant un identifiant unique + hash/SHA ... auquel se référer à l'avenir )    
+Dans un developement à plusieurs, on peut, grâce à Git, avancer chacun sur une partie de l'écriture du projet    
+et proposer par exemple des 'Branches' de dev. diférentes/divergentes, avancer sur une partie, tester...    
+puis revenir en arrière si les modifications ne sont pas satisfaisantes ou posent problème ailleurs.
+
+On peut ainsi avancer sur plusieurs fronts sans trop se géner quand on est à plusieurs sur un même code     
+On peut aussi, pour les personnes exterieures au projet, observer les évolutions d'une version à l'autre    
+
+Une certaine transparence qui peut aider à déceler du code malveillant ou à critiquer certains choix    
+La maléabilité d'un projet ainsi sauvegardé en de multiples versions aide un  dev. souple et continu     
+Si d'autres dev prennent une direction spécifique (branche) il sera ensuite possible de fusionner nos apports (merges)    
+Et de régler alors d'éventuels conflits (si, par exemple nous avons travaillé sur la même portion de code)    
+
+![roytuts](https://roytuts.com/wp-content/uploads/2021/11/image-70.png)     
+( source : https://roytuts.com/git-branching-workflows-how-to-work-with-different-branches/ )
+
+
+### Git Hub / Lab
+
+Les dev pourraient s'envoyer les modifications directement entre elles (p2p) ...
+mettre en place des flux d'actualité / newsletters/groups sur les derniers ajouts    
+Mais le plus simple reste d'envoyer tout au même endroit : de centraliser sur un même serveur     
+Git**Hub**/ou/**Lab** font ça :    
+on leur envoit les dernieres modifications    
+Des miliers de projets y sont hébergés (accessibles en ligne)    
+La plateforme web Git**Hub**/ou/**Lab** mettent ainsi en relation des dev et public     
+- On peut y **commenter** le code, 
+- faire remonter un **problème** (issue) ( https://docs.github.com/fr/issues )    
+- produire un historique des version (**changelog**)
+- Ajouter des étoiles (stars/favoris) / financer    
+: bref, faire avancé en commun un projet    
+, par la mutualisation des besoins et des compétences    
+- amander un code, proposer ses prorpres **branches** au projet    
+etc.
+
+C'est le côté "hub" / "lab", 2.0 de Git, sa mise en sociabilité web    
+Git, sinon, c'est juste une modalité de sauvegarde des fichiers en local    
+et des outils de comparaison d'une version à l'autre   
+( on peut utiliser git en local, sans le web )
+
+[GitHub](https://github.com) a été racheté par Microsoft    
+Je préfère donc utiliser [GitLab](https://gitlab.com/)    
+Voir les alternatives :    
+https://alternativeto.net/software/gitlab/   
+
+
+
+### PAGES auto-hébergées (distant / local)
+
+L'un des intérets de GitLab/Hub c'est de facilement transformer un projet en site web gratuit et autohébergé !    
+On pourra ensuit modifier une version locale de son site (sur son ordinateur)..    
+et envoyer les modifications local vers github/lab (pour les rendre publiques) !
+
+Local : mon ordi    
+Distant : sur un serveur distant, par exemple l'un de ceux de Github/lab    
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+# INSTALLER EN LOCAL :    
+
+
+## Terminal -- commandes   
+    
+( utiliser la ligne de commande )    
+https://openclassrooms.com/fr/courses/6173491-apprenez-a-utiliser-la-ligne-de-commande-dans-un-terminal/6349461-decouvrez-le-terminal#r-6349452    
+
+! Tuto sympa (Anglais)    
+https://coolguy.website/map-is-the-territory/introduction.html    
+
+
+## Git :    
+https://git-scm.com/downloads    
+https://git-scm.com/book/fr/v2/Démarrage-rapide-Installation-de-Git
+
+Vérifier via Terminal    
+> git -v    
+
+
+## Editeur (IDE)
+
+( IDE == Integrated Development Environment == Environnement de développement intégré )
+   
++ VSCODE / CODIUM :   
+? https://alternativeto.net/software/codium/   
+! https://github.com/Alex313031/codium/releases   
+( WINDOWS : win32/64 .exe /ou/ MAC : x64/arm64 .dmg )   
+! https://code.visualstudio.com/download    
+
+passer en Francais :   
+https://www.it-connect.fr/tuto-changer-langue-visual-studio-code-francais-anglais/
+
+? Alt : JETBRAINS IDE   
+https://www.jetbrains.com/webstorm/
+
+
+---
+
+
+
+# En ligne directement sur GitLab/Hub
+
+CREER UN COMPTE GItLab/Hub    
+https://gitlab.com/users/sign_up    
+
+
+## TOKEN    
+
+On aurra aussi besoin d'un Token d'accès....     
+Un code long qui donne certaines autorisations ( par exemple pour pull/push/commit, etc )    
+
+DO .... 
+PAGE du PROJET -> GAUCHE    
+-> Settings > Access Token    
+--> Add New Token (boutton gris)   
+--- Token name ...     
+--- Select a role -> Owner   
+--  Select scopes -->    
+---- read_repository (pull)    
+---- write_repository (push)    
+
+Vérfier / Révoquer les acces :     
+--> GOTO : https://gitlab.com/-/profile/preferences     
+
+
+. . .     
+
+
+# FORK PROJET (reprendre un projet existant)     
+
+PROJET forké pour le cours :    
+https://gitlab.com/bonnebulle/plain-html-redo
+
+PAGE/PROJET d'origine :    
+https://gitlab.com/pages/plain-html
+
+
+
+DO ....     
+GO https://gitlab.com/bonnebulle/plain-html-redo    
+
+On clic "Fork"   
+--> Cela va copier le projet existant dans tes projets sur les serveurs de GitLab/Hub    
+--> Et tu pourras alors modifier cette version (copie) en toute libertée   
+
+On précise la desintaion + nom du projet   
+EX/ plain-html-redo_again    
+
+. . .     
+
+# METTRE EN LIGNE
+Pour rendre le projet accessible en ligne, hébergé par GitLab/Hub...
+"Transformer" en PAGE web :     
+
+Dans le projet actuel ->
+-> GAUCHE -> Build > Pipeline
+-> New Pipeline (boutton bleu)    
+-> Run Pipeline (boutton bleu)    
+   
+RESULTAT :    
+PAGE URL ==    
+- https://USERNAME.gitlab.io/PROJECT_NAME   
+   
+. . .     
+
+
+
+
+
+
+
+
+
+# OUVRIR ou CLONER
+
+### CHOIX - depuis gitLab/Hub : Edit avec l'IDE (le plus simple)
+
+- DO ....     
+RETOUR AU PROJET    
+--> Edit ( à côté du boutton bleu )    
+--> **Web IDE**   
+
+( IDE == Integrated Development Environment == Environnement de développement intégré )
+
+- Pour Ouvir 1 fichier spécifique... en ligne sur l'IDE embarquée de GitLab...     
+/SI/ on veut travailler en ligne (IDE GitLab)...     
+On peut ouvrir un fichier spécifique     
+EX/ https://gitlab.com/bonnebulle/plain-html-redo/-/blob/main/README.md
+--> Edit (boutton bleu)      
+--> Open in Web IDE...    
+
+
+
+### CHOIX - depuis le terminal (local)
+
+On peut également cloner le projet depuis le terminal avec :    
+
+> git clone https://gitlab.com/bonnebulle/plain-html-redo.git 
+
+
+
+
+#### RAPPEL Terminal -- commandes   
+    
+( utiliser la ligne de commande )    
+https://openclassrooms.com/fr/courses/6173491-apprenez-a-utiliser-la-ligne-de-commande-dans-un-terminal/6349461-decouvrez-le-terminal#r-6349452    
+
+! Tuto sympa (Anglais)    
+https://coolguy.website/map-is-the-territory/introduction.html    
+
+
+#### détail - Terminal commandes (pwd/ls/cd)
+
+/SI/ on veut le faire depuis Git/Labhub    
+DO ....     
+RETOUR AU PROJET    
+--> Code (boutton bleu)    
+--> Clone with HTTPS  (copy https.....monprojet.git)
+
+Dans le terminal aller dans un dossier ou télécharger le projet     
+. . .     
+Chemin actuel     
+> pwd   
+
+Se déplacer cd     
+EX dossier actuel/ ./(+press TABULATION)     
+EX dossier parent/ ../(+press TABULATION)     
+> cd ./
+> cd ../
+
+Une fois dans le bon dossier (au choix)     
+> git clone https....monprojet.git    
+
+lister fichiers clonés     
+> ls    
+
+--> dossier du projet    
+--> on va dedans    
+> cd monprojet
+> ls   
+
+Localiser le chemin du dossier actuel
+> pwd
+
+
+
+
+
+
+## PULL (aspirer == télécharger/sync/réccupérer dernière version)    
+
+( à faire avant de modifier sa version locale du projet )    
+
+Une fois un projet cloné.... quand on est dans son dossier on peut télécharger les dernières modifications apportées par les dev dans leur repertoire de travail git (distant)....    
+
+Récupèrer les fichiers tels que présents sur GitLab/Hub    
+( on récupère l'état de travail des fichiers présents sur le serveur )     
+> git pull
+
+( va prévenir si des modifications difèrent en local )     
+
+
+
+
+
+
+
+# Git commandes depuis l'IDE local apres un clone
+
+DEPUIS notre IDE, on va pouvoir sauvegarder l'état d'avancement du projet en utilisant GIT    
+( qui se charge :    
+- de cloner "> clone https://gitlab.com/bonnebulle/plain-html-redo.git"    
+- de télécharger l'état actuel du projet présent sur le serveur git "> git pull"
+- d'envoyer / sauvegarder "> git commit" + "> git push"
+. . . )      
+
+Les IDE ( tel VSCodium ) proposent d'envoyer ces commandes Git sans utiliser de terminal :    
+via leur GUI ( Graphical User Interface )...    
+en appuyant sur des bouttons visuels !    
+
+- Ils donnent à voir l'état actuel du projet dans un Historique + Graph...    
+Ils permettent...     
+- d'ajouter les dernières modifications : "> git add *"
+- de Commit ( sauvegarder avec un titre ) "> git commit" ...
+... en toute simplicité !    
+... mais pour apprendre il est bien de se familiariser avec les lignes de commande...   
+... de passer du temps via le terminal !   
+... ainsi on comprend ce qui se passe "derière" quand on clic les boutons     
+... ( quelles commandes sont envoyées )    
+
+
+TUTO VSCODE :    
+https://code.visualstudio.com/docs/sourcecontrol/intro-to-git    
+
+![](https://bulle.vincent-bonnefille.fr/pj/git_cours/vscode_git.png)
+
+
+
+
+## TUTOS + COMMANDES (terminal)
+
+- Git - Git dans Bash     
+↳ https://git-scm.com/book/fr/v2/Annexe-A:-Git-dans-d%e2%80%99autres-environnements-Git-dans-Bash     
+     
+- Git - Git dans IntelliJ / PyCharm / WebStorm / PhpStorm / RubyMine     
+↳ https://git-scm.com/book/fr/v2/Annexe-A:-Git-dans-d%e2%80%99autres-environnements-Git-dans-IntelliJ-/-PyCharm-/-WebStorm-/     -PhpStorm-/-RubyMine
+     
+- Git - Git dans Visual Studio Code     
+↳ https://git-scm.com/book/fr/v2/Annexe-A:-Git-dans-d%e2%80%99autres-environnements-Git-dans-Visual-Studio-Code     
+
+
+
+
+
+
+
+## Etat des fichiers + processus intermédiaires
+
+- staged/stash - état intermédaire des fichiers priss en compte (ou pas)       
+- puis commit - sauvegarde de cet état de cet état (staged) du projet,    
+- puis envoi - push    
+
+![](https://bulle.vincent-bonnefille.fr/pj/git_cours/git_workflow_002-3557173400.png)      
+( source : https://nulab.com/learn/software-development/git-tutorial/git-basics/ )      
+
+![](https://bulle.vincent-bonnefille.fr/pj/git_cours/explained-git-basic-workflow.png)      
+( source : https://tecadmin.net/basic-git-workflow/ )    
+
+![](https://bulle.vincent-bonnefille.fr/pj/git_cours/git-add-commit-144050348.png)      
+( source : https://www.earthdatascience.org/workshops/intro-version-control-git/basic-git-commands/ )    
+
+
+
+Quand un fichier est modifié, pour enregistrer son état actuel, ici, en local..    
+... dans un état actuel : **staged**       
+--> **staged** == "stade" / "état"   
+
+... la version prise en compte se retrouve dans un espace disque de sauvegarde "**satsh**"    
+... les fichiers dans le **stash** (et leur état **staged**) sera pris en compte durant le prochain **commit**    
+.... le **commit** permet d'indiquer aux autres utilisateurs quelles modifications ont été apportées au projet    
+.... Je peux indiquer ce qui marche et expliquer les modifications     
+.... la dernière étape sera d'envoyer l'état actuel des fichers (**staged/stash**) et le commentaire du **commit** ... au serveur !   
+... ! Pour l'user : D'autres utilisateur.ices pourrons ainsi se référer à ce point de sauvegarde    
+..... ( par son nom et son identifiant unique **hash/SHA** )    
+..... restaurer ou étudier le code depuis ce point de sauvegarde     
+... ! Pour la/le dev : **plutôt que d'envoyer un à un chaque fichier, cette méthode permet de tout synchroniser d'un coup**    
+.... quand le commit est prêt on `git push` !
+
+
+## Etat des fichiers -- staged/stash - status 
+
+On peut voir l'état des fichiers :    
+> git status
+
+EX/
+```bash
+Sur la branche main
+Votre branche est à jour avec 'origin/main'.
+
+Modifications qui seront validées :
+  (utilisez "git restore --staged <fichier>..." pour désindexer)
+	nouveau fichier : NEW_file_ready.md
+
+Modifications qui ne seront pas validées :
+  (utilisez "git add/rm <fichier>..." pour mettre à jour ce qui sera validé)
+  (utilisez "git restore <fichier>..." pour annuler les modifications dans le répertoire de travail)
+	supprimé :        fullyfly.md
+
+Fichiers non suivis:
+  (utilisez "git add <fichier>..." pour inclure dans ce qui sera validé)
+	NEW_file.md
+```
+
+- "non suivis" == le fichier n'a pas été ajouté (add) en **staged**         
+- "qui ne seront pas validées" == fichier supprimé dans les fichiers (mais pas avec git rm)    
+- "qui seront validées" == sont dans le stash (ajoutés)    
+
+
+On nous indique alors ceux qui sont modifiés, les quels sont dans le **staged** (ou non)    
+.. quels fichiers seront compris dans le prochain **commit** (et comment)    
+
+### ADD
+
+On peu ensuite ajouter l'état actuel de nos fichiers (modifications) au **staged**    
+Ajouter un fichier (ou tous *)
+> git add ./README.md     
+
+> git add *    
+
+### RM / checkout / restore
+
+Remove du staged (état lattant avant commit + push)    
+... Cela ne supprime pas le fichier sur notre ordinateur/serveur (en local)    
+... mais cela le retire du staged, de la liste des fichiers qui seront affectés par le prochain commit    
+> git rm ./README.md
+
+annuler un ajout sur un fichier    
+> git checkout -- CONTRIBUTING.md
+
+restaure     
+> git restore --staged CONTRIBUTING.md
+
+
+
+## Commit + éditeur
+
+( sauvegarder l'état actuel des fichiers locaux )   
+( tel que pris en compte dans le **staged** )     
+> git commit    
+
+### Editeur - ligne de commande
+
+/CHOIX/ on peut écrir les modifications directement depuis la commmande      
+
+> git commit -m 'initial commit of my project'   
+
+### Editeur - nano / vim / autres
+
+/CHOIX/ on écrit les modifications apportées dans l'éditeur de text dans le shell/terminal   
+
+. on peut installer nano https://command-not-found.com/nano    
+   
+. ou utiliser Vim ( un autre éditeur )...    
+... ( les commandes se font au clavier )
+... ( : indique une commande )
+... --> https://vim.rtorr.com    
+....    
+.... on tappe -- ESCAPE + ":a" pour rendrer en mod édition   
+.... on quitte+save en tappant -- ESCAPE + ":wq"    
+.... on quitte no_save tappant -- ESCAPE + ":q!"    
+
+. ou autre éditeur tel VSCodium    
+
+### Editeur - définir par défaut
+
+/DO/    
+> git config --global core.editor nano
+
+( détail : https://git-scm.com/book/fr/v2/Démarrage-rapide-Paramétrage-à-la-première-utilisation-de-Git )    
+
+
+
+
+
+
+## Log
+Visualiser les modifications :     
+> git log -p -2
+
+> git log --pretty=oneline
+
+## History
+voir l'historique    
+> git log --pretty=format:"%h %s" --graph
+
+## Sur GitLab/Hub
+On peut retrouver les commit ici ;
+> EX/ https://gitlab.com/USER_NAME/PROJECT_NAME/-/commits/main?ref_type=heads
+
+
+
+
+
+
+
+
+
+# ENVOYER
+
+## PUSH
+
+Envoi des modifications après un commit    
+( qui valides les modifications locales apportées à tel ou tel fichier )    
+
+> git push
+
+( id + TOKEN )    
+
+préciser la branch à qui envoyer le commit (et fichiers)     
+> git push --set-upstream origin main
+
+( id + TOKEN )    
+
+
+
+
+
+# RESET / CHECKOUT (retour vers le passé/futur)
+
+_RESET réinitialise l'état du projet par son **hash/SHA**_
+_CHECKOUT est moins permanent, il permet de retrouver l'état d'un projet sans réinitialiser l'état des fichiers modifiés_   
+
+à chaque commit un identifiant unique est créé (hash/SHA)    
+> EX/ 27162d625d6665a824be74c281d07f6894f16888
+
+On peut retrouver les commit ici ;
+> EX/ https://gitlab.com/USER_NAME/PROJECT_NAME/-/commits/main?ref_type=heads
+
+En faisant un reset hard on retrouve les fichiers telque durant le dit commit    
+> git reset --hard 27162d625d6665a824be74c281d07f6894f16888
+
+
+
+## RAPPEL Git : REVENIR DANS LE FUTUR
+
+**CHECKOUT permet de revenir à l'état d'un commit passé SANS RESET (réinitialiser) les fichiers locaux**
+_CHECKOUT marche pour les retour vers une version passée/futur : un commit (hash/SHA) /OU/ BRANCHE_
+
+0. cloner un projet    
+
+Depuis le terminal dans un dossier au choix     
+> cd /chemin/vers/mon/dossier    
+
+> git clone https://gitlab.com/bonnebulle/plain-html-redo.git     
+
+> cd plain-html-redo    
+
+( affichier le fichier index dans le navigateur pour voir )     
+> firefox ./public/index.html    
+
+> chromium ./public/index.html   
+
+1. lister les comit précédents    
+2. revenir à telle version du projet ( + **hash/SHA** )    
+
+> git log --oneline
+
+... réccupérer les fichiers dans une version précédente ...   
+
+> git checkout 117647b
+
+( affichier le fichier index dans le navigateur pour voir )     
+
+3. revenir à la dernière version ( main )    
+> git checkout main
+
+( affichier le fichier index dans le navigateur pour voir )     
+
+
+
+
+# BRANCHES   
+
+TUTO : https://git-scm.com/book/fr/v2/Les-branches-avec-Git-Les-branches-en-bref     
+
+voir les branches ( locales + distantes )    
+> git branch --all
+
+
+CHECKOUT    
+Changer de branche    
+
+TUTO https://git-scm.com/book/fr/v2/Les-branches-avec-Git-Gestion-des-branches     
+
+changer (basculer de branche)    
+> git checkout -b forkit
+
+revenir/changer à la branche d'origine "main" (ou "forkit")  
+> git checkout main    
+
+> git checkout forkit      
+
+envoyer les modifications à une branche spécifique    
+> git push --set-upstream origin main
+
+
+
+
+
+# Merge    
+
+> git merge forkit
+
+gestion de conflit de versions     
+TUTO :     
+- https://git-scm.com/book/fr/v2/Les-branches-avec-Git-Branches-et-fusions%C2%A0:-les-bases#s_basic_merging
+> git status    
+
+> git mergetool
+
+On peut regarder les diff(érences) apportées d'un commit à l'autre... depuis l'interface web de GitHub/Lab     
+Ou avec git diff /ou/ depuis vscode/IDE    
+
+TUTO     
+https://www.atlassian.com/fr/git/tutorials/saving-changes/git-diff
+   
+
+
+
+---
+
+# READ_ME D'origine :
+
+Example plain HTML site using GitLab Pages.
+
+Learn more about GitLab Pages at https://pages.gitlab.io and the official
+documentation https://docs.gitlab.com/ce/user/project/pages/.
+
+---
+
+<!-- START doctoc generated TOC please keep comment here to allow auto update -->
+<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
+**Table of Contents**  *generated with [DocToc](https://github.com/thlorenz/doctoc)*
+
+- [GitLab CI](#gitlab-ci)
+- [GitLab User or Group Pages](#gitlab-user-or-group-pages)
+- [Did you fork this project?](#did-you-fork-this-project)
+- [Troubleshooting](#troubleshooting)
+
+<!-- END doctoc generated TOC please keep comment here to allow auto update -->
+
+## GitLab CI
+
+This project's static Pages are built by [GitLab CI][ci], following the steps
+defined in [`.gitlab-ci.yml`](.gitlab-ci.yml):
+
+```yml
+image: busybox
+
+pages:
+  stage: deploy
+  script:
+  - echo 'Nothing to do...'
+  artifacts:
+    paths:
+    - public
+    expire_in: 1 day
+  rules:
+    - if: $CI_COMMIT_REF_NAME == $CI_DEFAULT_BRANCH
+```
+
+The above example expects to put all your HTML files in the `public/` directory.
+
+## GitLab User or Group Pages
+
+To use this project as your user/group website, you will need one additional
+step: just rename your project to `namespace.gitlab.io`, where `namespace` is
+your `username` or `groupname`. This can be done by navigating to your
+project's **Settings**.
+
+Read more about [user/group Pages][userpages] and [project Pages][projpages].
+
+
+
+
+
+
+## Did you fork this project?
+
+If you forked this project for your own use, please go to your project's
+**Settings** and remove the forking relationship, which won't be necessary
+unless you want to contribute back to the upstream project.
+
+
+
+
+
+
+## Troubleshooting
+
+1. CSS is missing! That means that you have wrongly set up the CSS URL in your
+   HTML files. Have a look at the [index.html] for an example.
+
+[ci]: https://about.gitlab.com/solutions/continuous-integration/
+[index.html]: https://gitlab.com/pages/plain-html/-/blob/main/public/index.html
+[userpages]: https://docs.gitlab.com/ee/user/project/pages/introduction.html#gitlab-pages-in-projects-and-groups
+[projpages]: https://docs.gitlab.com/ee/user/project/pages/introduction.html#gitlab-pages-in-projects-and-groups

public/.prettierrc

@@ -0,0 +1,4 @@
+{
+  "tabWidth": 2,
+  "useTabs": false
+}

public/0_intro.html

@@ -39,7 +39,6 @@
   </div>
 
 
-  <!-- TOP navbare -->
   <div id="navbar">
     <a href="/"><i class="fa-solid fa-code"></i> Index</a>
     <a href="/vs/?folder=/www/" target="_blank" id="code_this"><i class="fa-solid fa-code"></i> vs</a>
@@ -51,7 +50,7 @@
   </div>
 
   <!-- Titre -->
-  <h1>Bonjour le Monde !</h1>
+  <h1>Bonjour le Monde !!!</h1>
 
   <section class="centred">
 
@@ -60,33 +59,34 @@
 
       <h2>HTML, balises, éléments</h2>
 
-      <p>Une page HTML est lue par le Navigateur qui va interpréter son contenu, charger les ressources demandées</p>
+      <p>Une page HTML est lue par le navigateur qui va interpréter son contenu, charger les ressources demandées</p>
-      <p>HyperText Markup Language est une facon de composé l'espace d'une page web, avec des balisages (<i>Markups</i>) dont les hyperliens sont centraux.</p>
+      <p>HyperText Markup Language est une façon de composer l'espace d'une page web, avec des balisages (<i>markups</i>) dont les hyperliens sont centraux.</p>
 
-      <p>Les <a href="https://developer.mozilla.org/fr/docs/Glossary/Tag">balises HTML</a> (<i>tag</i> en anglais) sont nombreuses....<br>
+      <p>Les <a href="https://developer.mozilla.org/fr/docs/Glossary/Tag">balises HTML</a> (<i>tags</i> en anglais) sont nombreuses....<br>
-        elles viennent encercler/encapsuler/contenir... entourer/délimiter... les contenus de la page qui, ainsi, sont diférentiés en objets distincts, en <span class="important">éléments</span></p>
+        Elles viennent encercler/encapsuler/contenir... entourer/délimiter... les contenus de la page qui, ainsi, sont différenciés en objets distincts, en <span class="important">éléments</span></p>
 
 
 
       <p class="resume">Il existe <u>plein</u> de balises permettant de créer, de base, des éléments HTML
-        et plein de <span class="color property">propriétés</span> d'affichage (CSS) qu'on peut leur ajouter (pour les modifier)... voir <a href="https://developer.mozilla.org/fr/docs/Web/CSS/Properties" target="_blank">MDN</a>
+        et plein de <span class="color property">propriétés</span> d'affichage - <i>Cascading Style Sheets</i> (CSS) - qu'on peut leur ajouter (pour les modifier)... voir <a href="https://developer.mozilla.org/fr/docs/Web/CSS/Properties" target="_blank">MDN</a>
-        Je vais ici principalement me référer à <i>MozillaDevNework</i>... il existe énorméméent de ressources pour apprendre à coder...
+        Je vais ici principalement me référer à <i>MozillaDevNetwork</i> (MDN)... il existe énormément de ressources pour apprendre à coder...
         
         Je vous conseille également...
         Un <a href="https://admm.co/css-cheat-sheet/" target="_blank">index.sommaire</a> (qui pointe vers MDN) fait le tour Selectors (et propriétés) CSS... 
-        Selectors <a href="https://learn.shayhowe.com/advanced-html-css/complex-selectors/" target="_blank">complexes</a> (ciblage CSS), en Anglais, on les vera petit-à-petit
+        Selectors <a href="https://learn.shayhowe.com/advanced-html-css/complex-selectors/" target="_blank">complexes</a> (ciblage CSS), en anglais, on les verra petit à petit
         <a href="https://la-cascade.io" target="_blank">La Cascade</a> (FR), ressources sur le CSS...
       </p>
 
 
       <!-- <p>Commençons par quelque chose de simple....<br> -->
         <!-- <p> -->
-        <!-- Par exemple, si on écrit ce code (HTML) : <br><code><u>text souligné</u></code> le text va être sousligné (un style va lui être appliqué)</code></p> -->
+        <!-- Par exemple, si on écrit ce code (HTML) : <br><code><u>texte souligné</u></code>, le texte va être souligné (un style va lui être appliqué)</code></p> -->
 
 
 
 <h3>Vscode + template</h3>
 
+          
       <p>Index des projets...</br>
         <b>Home/Index : <a href="https://code.bonnebulle.xyz/" target="_blank">https://code.bonnebulle.xyz</a></b><br>
         Avec un sous-dossier par personne...
@@ -94,14 +94,14 @@
 
       <p>Que vous pouvez ouvrir dans <span class="important">VSCODE</span>, le logiciel de code qu'on va utiliser...<br>
         C'est une version de l'application VSCode accessible en ligne...<br>
-        Ce qui permet de démarrer tout de suite....  dans un environnement de travail pré-configuré<br>
+        Ce qui permet de démarrer tout de suite....  dans un environnement de travail préconfiguré<br>
-        et moi de suivre vos différents projets au même endroit...<br>
+        Et moi de suivre vos différents projets au même endroit...<br>
         Vous travaillerez depuis votre propre dossier de projet !
       </p>
       
       <p>
-        <br>Depuis VSC on peut créer un fichier <i class="file">index.html</i>
+        <br>Depuis VSC, on peut créer un fichier <i class="file">index.html</i>
-        <br>l'ouvrir... et tapper "<kdb class="key">!</kdb>", un popup s'ouvre (Intellisens), en faisant <kdb class="key">ENTRER</kdb>, le <i>template</i> (gabari, préformatage) d'une page HTML est chargé...</p>
+        <br>l'ouvrir... et taper "<kdb class="key">!</kdb>", un popup s'ouvre (IntelliSense), en faisant <kdb class="key">ENTRER</kdb>, le <i>template</i> (gabarit, préformatage) d'une page HTML est chargé...</p>
       </p>
 
       <p>Page d'aide, raccourcis :<br>
@@ -110,23 +110,23 @@
 
 <h3>Afficher le code source</h3>
 
-      <p>On va déja regarder comment est composée une page HTML basique...</p>
+      <p>On va déjà regarder comment est composée une page HTML basique...</p>
 
       <p>Lien vers <a class="file" href="./0_index_empty.html" target="_blank">0_index_empty.html</a></p>
 
-      <kdb class="key">CTRL+MAJ+I</kdb> les outils de dev. s'affichent,<br>
+      <kdb class="key">CTRL+MAJ+I</kdb> Les outils de développement s'affichent,<br>
-      <kdb class="key">CTRL+U</kdb>, le code source (le fichier avant qu'il soit lu/interprété par le Navigateur)
+      <kdb class="key">CTRL+U</kdb>, le code source (le fichier avant qu'il soit lu/interprété par le navigateur)
 
 
 <h4>... structure de la page, head, body, footer</h4>
 
       <br>Par convention (et méthode)
-      <br>...  on met les contenus contextuels (meta) et ressources dans <u>la tête de la page</u> <codescaped class="done">&lt;head&gt;titre, feuilles de style .css, etc&lt;/head&gt;</codescaped> (contenus <b>in</b>visible)
+      <br>...  on met les contenus contextuels (<i>meta</i>) et ressources dans <u>la tête de la page</u> <codescaped class="done">&lt;head&gt;titre, feuilles de style .css, etc.&lt;/head&gt;</codescaped> (contenus <b>in</b>visibles)
-      <br>...  on met les contenus courant, les textes, images, dans le <u>corps de la page</u>  <codescaped class="done">&lt;body&gt;article, texts, images, contenus, etc&lt;/body&gt;</codescaped>  (contenus visible)
+      <br>...  on y met les contenus courants, les textes, images, dans le <u>corps de la page</u>  <codescaped class="done">&lt;body&gt;articles, textes, images, contenus, etc.&lt;/body&gt;</codescaped>  (contenus visibles)
-      <br>Les commentaires <kdb class="key">CTRL+MAJ+/</kdb> sont invisibles...
+      <br>
-      <!-- <br>Les <codescaped class="done">&lt;script&gt;</codescaped> ou encore <codescaped class="done">&lt;link&gt;</div> -->
+      <br>
-
+      Les commentaires <kdb class="key">CTRL+MAJ+/</kdb> sont invisibles...
-      <p>Footer, on le verra avec Javascript, est un espace en bas de page où l'on charge d'autres ressources (.js)...<br>
+      <p>Footer, on le verra avec JavaScript, est un espace en bas de page où l'on charge d'autres ressources (.js)...<br>
         à la fin de la page... ce qui est en bas étant lu... en dernier</p>
 
 
@@ -164,7 +164,7 @@
 
 
 
-<!-- <p>Mettre du texte entre deux balises <code><a>text</a></code> permettera
+<!-- <p>Mettre du texte entre deux balises <code><a>text</a></code> permettra
   de créer un lien</p> -->
 
 <p>On construit la page ainsi, en contenant des éléments les uns dans les autres</p>
@@ -185,7 +185,7 @@
 
 <p>Dans une <codescaped>div</codescaped>, tout ce qui se retrouve avant, à droite, à gauche...
   saute à la ligne, passe après la <codescaped>div</codescaped><br>
-  C'est parce que une <codescaped>div</codescaped> se comporte comme un "<span class="important">block</span>"</p>
+  C'est parce qu'une <codescaped>div</codescaped> se comporte comme un "<span class="important">block</span>"</p>
 <p><span class="important">On va y revenir avec un exemple</span></p>
 
 
@@ -197,29 +197,26 @@
 
 <h4>Sauts de ligne : br, hr<br>...</h4>
 
-<p>Dans l'éditeur de texte d'où l'on code (IDE), on peut faire autant de sauts à la ligne qu'on veut !
+<p>Dans l'éditeur de texte où l'on code (IDE, pour <i>Integrated Development Environment</i>), on peut faire autant de sauts à la ligne qu'on veut !
 <br>
-<!-- En outre, on l'a vu avec la balise head, le contenu de certaines balises restent invisibles, lues sans être affichées.
-<br>
-On peut également écrire des <span class="important">commentaires</span>... qui seront seulement lisibles dans le code source...
-<br> -->
 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.
 </p>
 
 
 <pre><code class="language-markup">
-On peut aussi forcer un saut à la ligne avec <br /> ou un autre séparateur comme <hr />
+On peut forcer un saut à la ligne avec <br /> ou un autre séparateur comme <hr />
 </code></pre>
 
 <pre><code class="language-markup">
 <br><br>
 </code></pre>
 
-<p>Certains éléments (comme les "div") vont créer du vide autour d'elles, agir comme un "<span class="important">block</span>"</div>
+<p>Certains éléments (comme les "div") vont créer du vide autour d'eux, des sauts de ligne..., agir comme des "<span class="important">block</span>"
+</div>
 
-<p>D'autres éléments se comportent comme du text, sans créer de saut de ligne autour d'eux <br>
+<p>D'autres éléments se comportent comme du texte, sans créer de saut de ligne autour d'eux <br>
   : ils se succèdent sur la ligne, ils sont affichés de façon "<span class="important">inline</span>"</p>
-<p>Ce qui les diférentient c'est la <span class="color property">propriété</span> d'affichage (<span class="color property">display</span>)</p>
+<p>Ce qui les différencie, c'est la <span class="color property">propriété</span> d'affichage (<span class="color property">display</span>)</p>
 
 
 
@@ -228,7 +225,7 @@ On peut aussi forcer un saut à la ligne avec <br /> ou un autre séparateur com
 <a href="https://developer.mozilla.org/fr/docs/Web/CSS/display">MDN Firefox (Display)</a>
 </code></pre>
 
-<p style="margin-top: -40px;">Vous noterez que, même si je fais un saut de ligne dans le code... le lien <codescaped><a></codescaped> ne passe pas à la ligne...</p>
+<p style="margin-top: -40px;">Vous noterez que, même si je fais un saut de ligne dans le code..., le lien <codescaped><a></codescaped> ne passe pas à la ligne...</p>
 <p><codescaped><strong>contenu</strong></codescaped> ainsi que <codescaped class="done">&lt;a&gt;contenu&lt;/a&gt;</codescaped> sont "<span class="important">inline</span>"</p>
 
 
@@ -238,19 +235,21 @@ On peut aussi forcer un saut à la ligne avec <br /> ou un autre séparateur com
 
 
 
-<h3>Basics, des balises de base, prêtes à l'emploi</h3>
+<h3>Basics, des balises de base prêtes à l'emploi</h3>
 
 <p>D'autres éléments de base permettent de styliser facilement le texte...</p>
-<p>À l'orgine il s'agissait de "mimer" certaines mises en formes usuelles dans le journalisme, l'édition</p>
+<p>À l'origine, il s'agissait de "mimer" certaines mises en forme usuelles dans le journalisme, l'édition.</p>
 
 
-<p>La balise... <br>"u" <u>underline</u> <br>"b" ou "strong" <strong>gras</strong>, em ou i pour <i>italic</i>
+<p>La balise... <br>"u" <u>underline</u> 
+  <br>"b" ou "strong" <strong>gras</strong>
+  <br>em ou i pour <i>italic</i>
   <br>La balise "<span class="important">span</span>"
   est neutre mais permet d'entourer une partie du texte<br />
-  ... On va voir ensuite comment il est possible d'ajouter des "classes" et "id" permettant de les identifier</p>
+  ... On va voir ensuite comment il est possible d'ajouter des "classes" et "id" permettant de les identifier.</p>
 
 <pre><code class="language-markup">
-<p>demo de <strong>balise inline</strong> qui crée du gras (et c'est tout)</p>
+<p>Démo de <strong>balise inline</strong> qui crée du gras (et c'est tout)</p>
 </code></pre>
 
 
@@ -287,20 +286,20 @@ On peut aussi forcer un saut à la ligne avec <br /> ou un autre séparateur com
 <p>On peut toutefois modifier les <span class="color property">propriétés</span> données à ces éléments de base (ou en utiliser un plus adapté)</p>
 
 
-<p>Je peux voir le code source de la page en faisant <kdb class="key">CTRL+MAJ+I</kdb> les outils de dev. s'affichent<br>
+<p>Je peux voir le code source de la page en faisant <kdb class="key">CTRL+MAJ+I</kdb> les outils de développement s'affichent<br>
-  Dans Firefox je trouve les parametres via icon <kdb class="key">"..."</kdb> (à droite) puis <b>Parametres</b> (<kdb class="key">"icon rouage"</kdb>) /OU/ <kdb class="key">F1</kdb></p>
+  Dans Firefox je trouve les paramètres via icon <kdb class="key">"..."</kdb> (à droite) puis <b>Parametres</b> (<kdb class="key">"icon rouage"</kdb>) /OU/ <kdb class="key">F1</kdb></p>
 
 <div>
   <img src="./_ressources/0_intro/img/0_firefox_parametres_devs.png">
 </div>
 
-<p>Je peux ensuite demander d'afficher ces styles par défaut</p>
+<p>Je peux ensuite demander d'afficher ces styles par défaut.</p>
 
 <div>
   <img src="./_ressources/0_intro/img/0_afficher_style.png">
 </div>
-<p>Firefox montre bien que "strong" a des valeurs par défaut... on peut
+<p>Firefox montre bien que "strong" a des valeurs par défaut... On peut
-  voir d'autres propriétés et feulles de style</p>
+  voir d'autres propriétés et feuilles de style</p>
 
 
 
@@ -314,11 +313,11 @@ On peut aussi forcer un saut à la ligne avec <br /> ou un autre séparateur com
 On parle de méthode  "<span class="important">inline</span>", dans le texte/code/page même (pas un fichier distinct, on va y revenir)</p>
 
 
-<div class='resume'>Ici je veux annuler la <span class="color property">propriété</span> et  <span class="color value">valeur</span> attribuées aux éléménts "strong"...
+<div class='resume'>Ici, je veux annuler la <span class="color property">propriété</span> et <span class="color value">valeur</span> attribuées aux éléments "strong"...
-  C'est la propriété <span class="color property">font-weight</span> avec la valeur "<span class="color value">bold</span>" (gras) qui crée l'empatement...
+  C'est la propriété <span class="color property">font-weight</span> avec la valeur "<span class="color value">bold</span>" (gras) qui crée l'empâtement...
   ... par défaut, un élément "strong" est mis en gras "<span class="color value">bold</span>"
 
-  Pour changer l'empatement je vais modifier le style de l'élémént strong...
+  Pour changer l'empâtement je vais modifier le style de l'élément strong...
   <span class="color property">font-weight</span> est une <span class="important">propriété</span>
   <span class="color value">normal</span> une <span class="important">valeur</span> attribuée à cette propriété
 </div>
@@ -344,21 +343,21 @@ On parle de méthode  "<span class="important">inline</span>", dans le texte/cod
 </p> -->
 
 </p></p>
-<div class='resume'>Ici je suis venu ajouter du style directement à l'élément
+<div class='resume'>Ici, je suis venu ajouter du style directement à l'élément
   <span class="color property">font-size</span> est une <span class="important">propriété</span> (de style, d'habillage)
   <span class="color value">10px</span> une <span class="important">valeur</span> attribuée à cette propriété
 </div>
 
 <pre><code class="language-markup">
 <small>petit text</small> - 
-<span style="font-size: smaller">même taille</span> <!-- (un élemént "small" a font-size:smaller) --> - 
+<span style="font-size: smaller">même taille</span> <!-- (un élément "small" a font-size:smaller) --> - 
-<span style="font-size: 10px">plus petit text</span>
+<span style="font-size: 10px">plus petit texte</span>
 </code></pre>
 
 
 
-<div class="resume">On a vu qu'en HTML on pouvait entourer / encercler / contenir... des bouts de text par des <span class="important">balises</span>
+<div class="resume">On a vu qu'en HTML, on pouvait entourer / encercler / contenir... des bouts de texte par des <span class="important">balises</span>
-  Une fois entourés par ces balises, ces bouts de text séparés sont appelés de <span class="important">éléments"</span>
+  Une fois entourés par ces balises, ces bouts de texte séparés sont appelés des <span class="important">éléments"</span>
   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 <span class="important">style=""</span>)
   Ces nouvelles propriétés et valeurs outrepassent celles précédemment demandées (par le navigateur)
@@ -380,16 +379,17 @@ On parle de méthode  "<span class="important">inline</span>", dans le texte/cod
 
 <p>Il est préférable de créer une "<span class="important">feuille de style</span>" pour "<span class="important">Cascading Style Sheet</span>" == CSS</p>
 <p>On y renseigne / indique / ajoute des instructions d'habillage qui vont modifier le comportement visuel des éléments dans la page... <br>
-  ( 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  )</p>
+  ( qu'on va identifier grâce à des sélecteurs utilisés dans les feuilles de style CSS pour cibler des éléments présents dans la page HTML )</p>
-<p>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)
+<p>L'intérêt 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)
-  <br>... ainsi, ces règles inscrites dans un fichiers seront accessibles directement (plutôt qu'intégrées dans la page HTML)
+  <br>... Ainsi, ces règles inscrites dans un fichier seront accessibles directement (plutôt qu'intégrées dans la page HTML).
-  <br>... ainsi, plusieurs pages pouront charger les mêmes instructions de style.
+  <br>... Ainsi, plusieurs pages pouront charger les mêmes instructions de style.
-  <br>.... Si je mets à jour cette feuille de style (fichier), toutes les pages qui la charge auront leur mise en page mise à jour !<
+  <br>... Si je mets à jour cette feuille de style (fichier), toutes les pages qui la charge auront leur mise en page mise à jour !<
-  <br><span class="important">On peut ainsi modifier plusieurs éléments récurents d'une page à l'autre...</span> (cela donnera de la cohérence esthétique à un site)</p>
+  <br><span class="important">On peut ainsi modifier plusieurs éléments récurrents d'une page à l'autre...</span> (cela donnera de la cohérence esthétique à un site)</p>
   <p>C'est une méthode de centralisation de l'information...</p>
 
 
-
+https://developer.mozilla.org/fr/docs/Web/CSS/CSS_selectors
+( Sélecteurs en français )
 
 
 
@@ -398,12 +398,12 @@ On parle de méthode  "<span class="important">inline</span>", dans le texte/cod
 
 <h4 id="back_from_index_empty">Où mettre la feuille de style ?</h4>
 
-<p>Voyons d'abord comment fonctionne une feuille de styles (CSS)</p>
+<p>Voyons d'abord comment fonctionne une feuille de style (CSS)</p>
 
 <p>Pareillement à une page web (par exemple <i class="file">index.html</i>), une feuille CSS a une extension  particulière : "<span class="important">.css</span>"</p>
-<p>On peut la nomer de plein de façons ! <i class="file">style.css</i> par exemple</p>
+<p>On peut la nommer de plein de façons ! <i class="file">style.css</i> par exemple</p>
 <p>"<span class="important">On ne met pas d'espace dans le nom des fichiers !, on les remplace par "_" ou "-", plutôt "_"</span>"</p>
-<p>Une fois la feuille de style crée on devra la charger dans la page HTML
+<p>Une fois la feuille de style créée, on devra la charger dans la page HTML
   
 <hr class="space">
 
@@ -421,9 +421,9 @@ les instructions qu'elle contient vont modifier la façon dont le navigateur aff
 
 
 <p class="resume" id="back_from_index_empty_alt">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...
+Et, formellement, cela permet d'avoir toutes les informations séparées au même endroit...
 Mais on peut aussi charger cette cascade d'instructions directement dans la page...</p>
-<p>Au lieu d'utiliser <codescaped class="done">&lt;link&gt;</codescaped> on pourra utiliser <codescaped class="done">&lt;style&gt;...&lt;/style&gt;</codescaped>
+<p>Au lieu d'utiliser <codescaped class="done">&lt;link&gt;</codescaped>, on pourra utiliser <codescaped class="done">&lt;style&gt;...&lt;/style&gt;</codescaped>
 <br>== On peut mettre des instructions de style en cascade directement "inline", dans la page HTML....
 <br>plutôt que dans un fichier séparé (block)</p>
 </p>
@@ -448,14 +448,16 @@ Mais on peut aussi charger cette cascade d'instructions directement dans la page
 <h3>Identifier et "cibler" les éléments de la page (id, classes) <br>
   + leur attribuer des propriétés+valeurs</h3>
 
-<div class="resume">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,
+<div class="resume">Plutôt que d'intervenir sur un élément à 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
+  Ils sont rouge car une instruction dans la feuille de style CSS rend le texte... rouge
-  Dans la feuille de style on indique qu'on cherche (cible) TOUS les éléments avec la class "important" en indiquant.... 
+  Dans la feuille de style, on indique qu'on cherche (cible) TOUS les éléments avec la classe "important" en indiquant.... 
+  
+  <!-- !!! Mettre des couleurs -->
   <span class="important">#important_wrapper</span> (# == ID)
   <span class="important">.important</span> (. == classe)
 
-  Ce qu'on fait là c'est <span class="important">cibler</span> ("<i>sibling</i>") un élément d'après sa classe ou son id
+  Ce qu'on fait là, c'est <span class="important">cibler</span> ("<i>sibling</i>") un élément d'après sa class ou son id
   On verra qu'il existe d'autres moyens (plus sophistiqués)
   Un <a href="https://admm.co/css-cheat-sheet/" target="_blank">index complet</a> (qui pointe vers MDN) fait le tour Selectors (et propriétés) CSS... 
 </div>
@@ -477,27 +479,31 @@ Mais on peut aussi charger cette cascade d'instructions directement dans la page
 
 <pre><code class="language-markup">
 <div id="important_wrapper">
-  <p>Ceci est <span class="important">une span avec une classe .important</span> (mais pas strong)...</p>
+  <p>Ceci est <span class="important">une span avec une class .important</span> (mais pas strong)...</p>
   <p>Ceci est <strong>strong sans classe, normal, basic</strong>.....</p>
-  <p>... ceci est <strong class="pas_important">strong mais .pas_important</strong> !</p> 
+  <p>... Ceci est <strong class="pas_important">strong mais .pas_important</strong> !</p> 
   <p>De nouveau, une span qui se fait passer <span class="important">pour strong</span> !</p>
 </div>
 </code></pre>
 
-
+<pCibler un élément : on indiquera simplement "div"</p>
 
 <p>Un "<span class="important">id</span>" (identifiant) sert à identifier <span class="important">un élément unique dans la page</span></p>
 
 <p>Les "<span class="important">classes</span>" sont attribuées à des éléments qu'on veut habiller de la même façon (leur donner le même comportement)
-  <br>Une classe est utilisée plus souvent, elle va contenir des mises en formes courament utilisées
+  <br>Une classe est utilisée plus souvent ; elle va contenir des mises en forme couramment utilisées.
-  <br>Aussi il est interessant de trouver des noms de classes équivoques (ce n'est pas toujours facile)
+  <br>Il est intéressant de trouver des noms de classe équivoques (ce n'est pas toujours facile).
 </p>
 
 
 
 
+
+
+
 <h3>CSS /VS/ HTML, cibler des éléments /VS/ ajouter des classes</h3>
-<p class="important">CSS : On peut attribuer les mêmes consignes (<span class="color property">propriétés</span> + <span class="color value">valeurs</span>) à plusieurs élémens ciblés en même temps (via leur classe, id, etc) -- virgule</p>
+
+<p class="important">CSS : on peut attribuer les mêmes consignes (<span class="color property">propriétés</span> + <span class="color value">valeurs</span>) à plusieurs éléments ciblés en même temps (via leur classe, id, etc.) -- virgule</p>
 <pre><code class="language-css" id="multiples_cibles">
 .para, #sad {
   ....
@@ -508,12 +514,12 @@ Mais on peut aussi charger cette cascade d'instructions directement dans la page
 }
 </code></pre>
 
-<p><span class="important">CSS : On utilise un --espace pour indiquer qu'on va chercher un élément... à l'intérieur d'un autre</span><br>
+<p><span class="important">CSS : on utilise une --espace pour indiquer qu'on va chercher un élément... à l'intérieur d'un autre</span><br>
-  === <codecss>#text_principal p { ... }</codecss><br>
+  === <codecss>#texte_principal p { ... }</codecss><br>
   === "parent > enfant"
 </p>
 
-<p><span class="important">HTML : On utilise un --espace pour attribuer plusieurs classes à un même élément</span> ( ex suivant: "<codescaped>para fond_bleu</codescaped>" )....<br>
+<p><span class="important">HTML : on utilise une --espace pour attribuer plusieurs classes à un même élément</span> ( exemple suivant: "<codescaped>para fond_bleu</codescaped>" )....<br>
   === a la classe "para" <u>et</u> "fond_bleu"</p>
 
 <pre><code class="language-css" id="html_id_classes">
@@ -531,7 +537,7 @@ Mais on peut aussi charger cette cascade d'instructions directement dans la page
   background-color: blue;
   color: #FFF;
 }
-/* CLASSE/ID plusieures cibles en même temps */
+/* CLASSE/ID plusieurs cibles en même temps */
 /* Séparées par une "," */
 .para, #sad {
   font-weight: bold;
@@ -542,9 +548,9 @@ Mais on peut aussi charger cette cascade d'instructions directement dans la page
 #text_principal p {
   font-family: serif;
 }
-/* .... on aurait aussi pu affecter une classe à l'élément (en HTML) */
+/* ... 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 */
+  /* 3. "paragraphe" (dans l'élément "u") ne sera pas affecté par le changement de typo+taille */
   font-family: serif;
   font-size: 1.2em;
 }
@@ -557,21 +563,21 @@ p:last-child .para {
 
 <pre><code class="language-markup">
 <div id="text_principal"> <!-- PARENT -->
-  <p>1. Je suis le premier <span class="para serif_big">paragraphe</span> !</p> <!-- enfants -->
+  <p>1. Je suis le premier <span class="para serif_big">paragraphe</span> !</p> <!-- enfant -->
-  <p>2. Et moi le deuxième <span class="para">paragraphe</span> !</p> <!-- enfants -->
+  <p>2. Et moi le deuxième <span class="para">paragraphe</span> !</p> <!-- enfant -->
-  <p>3. Et moi le troisiem <u class="para fond_bleu serif_big">paragraphe</u> !</p> <!-- enfants -->
+  <p>3. Et moi le troisième <u class="para fond_bleu serif_big">paragraphe</u> !</p> <!-- enfant -->
   <p>4. Et moi le dernier <span class="para fond_bleu">paragraphe</span> 
-                                                    <span id="sad">=(</span></p> <!-- enfants -->
+                                                    <span id="sad">=(</span></p> <!-- enfant -->
 </div> <!-- PARENT fin, fermeture de la balise div#text_principal -->
 </code></pre>
 
 <div class='resume important'>1. et 2. sont verts (car .para)
 
   3. est bleu... car, <span class="important">dans une la suite d'instructions CSS, la dernière règle indiquée l'emporte sur les règles précédentes !!!</span>
-  C'est pour cela qu'on dit qu'elles sont en Cascade ! 
+  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.
+  == Le fichier est lu de haut en bas par le navigateur qui ensuite affiche la page selon cette liste de demandes/règles.
   
-  ICI, dans le CSS, les instructions de fond (background) indiquées dans "<codecss>.fond_bleu</codecss>" prennent le dessus sur celle de "<codecss>.para</codecss>" 
+  Ici, dans le CSS, les instructions de fond (background) indiquées dans "<codecss>.fond_bleu</codecss>" prennent le dessus sur celle de "<codecss>.para</codecss>" 
 
   4. utilisation d'une <code class="term">pseudo-classe</code> (on va les passer en revue), 
   ( <a href="https://developer.mozilla.org/fr/docs/Web/CSS/Pseudo-classes">MDN Pseudo-classes</a> + <a href="https://developer.mozilla.org/fr/docs/Web/CSS/:last-child">MDN last-child</a> )
@@ -620,7 +626,7 @@ p:last-child .para {
   </div>
 
 
-  <!-- Ce ne sont pas les espaces (sauts de lignes) qui produise du vide/espace dans la mise en page finale  -->
+  <!-- Ce ne sont pas les espaces (sauts de lignes) qui produisent du vide/espace dans la mise en page finale  -->
 
   <p>jambes</p>
 </div>
@@ -682,15 +688,15 @@ CSS Avancé ! Autre façon de cibler les éléments d'une page HTML<br>Permet un
 
 
 <h5>Mise en page, garder son code lisible et ordonné</h5>
-<p>Vous notez que dans l'écriture du code HTML j'essaie de garder les choses lisibles...<br>On pourrait ajouter de l'espace (saut de ligne) pour espacer les div avec #id</p>
+<p>Vous notez que dans l'écriture du code HTML, j'essaie de garder les choses lisibles...<br>On pourrait ajouter de l'espace (saut de ligne) pour espacer les div avec #id</p>
-<p>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 <codescaped><br></codescaped>)</p>
+<p>On peut faire autant de sauts 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 <codescaped><br></codescaped>)</p>
 <p>Autre chose, on utilise des retraits de ligne (à gauche) des "<code class="term">indent</code>", des espaces pour, visuellement, voir dans le code, quel tag (ici des <codescaped class="done">&lt;p&gt;</codescaped> <codescaped class="done">&lt;div&gt;</codescaped>)<br>
 C'est une convention formelle... qui aide grandement à résoudre des "bugs" / "errors"
 </p>
 Wiki Style d'indentation : <a target="_blank" href="https://fr.wikipedia.org/wiki/Style_d'indentation">https://fr.wikipedia.org/wiki/Style_d'indentation</a>
 
 
-<p>Dans VSCODE on peut utiliser <br><i><a target="_blank" href="https://open-vsx.org/extension/esbenp/prettier-vscode">Prettier Code Formatter</a></i> qui fait le boulot à notre place <br>(aligne correctement les blocks de textes en fonction de leur imbrication successive...)<br>
+<p>Dans VSCODE on peut utiliser <br><i><a target="_blank" href="https://open-vsx.org/extension/esbenp/prettier-vscode">Prettier Code Formatter</a></i> qui fait le boulot à notre place <br>(aligne correctement les blocs de texte en fonction de leur imbrication successive...)<br>
 ou encore <a href="https://open-vsx.org/extension/oderwat/indent-rainbow" target="_blank">indent-rainbow</a></p>
 
 
@@ -710,8 +716,8 @@ ou encore <a href="https://open-vsx.org/extension/oderwat/indent-rainbow" target
 
 
 <h3>Margin padding</h3>
-<p>S'il on veut créer un saut à la ligne on peut utiliser ajouter des <span class="important">propriétés de marge externes ou internes à l'élément</span><br>
+<p>Si l'on veut créer un saut à la ligne, on peut utiliser ajouter des <span class="important">propriétés de marge externes ou internes à l'élément</span><br>
-Pour cela il faut que l'élément se comporte comme un bloc, ait une propriété display: inline-block | block</p>
+Pour cela, il faut que l'élément se comporte comme un bloc, ait une propriété display: inline-block | block</p>
 
 <div class="resume">MDN (margin) : <a target="_blank" href="https://developer.mozilla.org/fr/docs/Web/CSS/margin">https://developer.mozilla.org/fr/docs/Web/CSS/margin</a>
 MDN (padding) : <a target="_blank" href="https://developer.mozilla.org/fr/docs/Web/CSS/padding">https://developer.mozilla.org/fr/docs/Web/CSS/padding</a>
@@ -738,7 +744,7 @@ MDN (display) : <a target="_blank" href="https://developer.mozilla.org/fr/docs/W
     border: 3px solid red; /* bord visuel de notre élément de test */
 }
 
-/* DEMO, sert à expliquer.montrer la MARGE INTERIEURE (padding) */
+/* 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*/
@@ -754,8 +760,8 @@ MDN (display) : <a target="_blank" href="https://developer.mozilla.org/fr/docs/W
 </div>
 </code></pre>
 
-<p>Firefox : <kdb class="key">CTRL+MAJ+I</kdb> + <code class="key">-> Inspecteur -> Mise en Page</code></p>
+<p>Firefox : <kdb class="key">CTRL+MAJ+I</kdb> + <code class="key">-> Inspecteur -> Mise en page</code></p>
-<p>En selectionnant un élément dans le code à gauche, on voit quelles marges externes (et internes, avec padding) lui sont appliquées</p>
+<p>En sélectionnant un élément dans le code à gauche, on voit quelles marges externes (et internes, avec padding) lui sont appliquées</p>
 
 <img src="./_ressources/0_intro/img/0_padding_margin.png">
 
@@ -770,7 +776,7 @@ MDN (display) : <a target="_blank" href="https://developer.mozilla.org/fr/docs/W
 #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) */
+    /* (pour éviter que les éléments sautent à la ligne, des blocs) */
     display: inline-block; 
     border: 1px solid;
 }    
@@ -830,7 +836,7 @@ MDN (display) : <a target="_blank" href="https://developer.mozilla.org/fr/docs/W
   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-top: 5px;      /* déclinaison.. marche aussi avec border, margin, etc. */
     padding-right: 5px;
     padding-bottom: 0;
     padding-left: 5px; 
@@ -857,7 +863,7 @@ MDN (display) : <a target="_blank" href="https://developer.mozilla.org/fr/docs/W
 
 <p style="margin-top: 1rem">
 Notez que, dans le dernier exemple, c'est le <codescaped>style="..." de l'élément</codescaped> (qui est chargé/lu/interprété en dernier, après la feuille de style)....<br>c'est ce style (<codescaped>margin-top: -10px</codescaped>) qui l'emporte.<br>
-On garde la logique, la dernière <span class="color property">propriété</span>:<span class="color value">value</span> donnée à un élément (EX: div#exemple.dernier) qui est prise en compte.<br>
+On garde la logique, la dernière <span class="color property">propriété</span>:<span class="color value">value</span> donnée à un élément (ex. : div#exemple.dernier) qui est prise en compte.<br>
 </p>
 
 
@@ -1076,7 +1082,7 @@ textarea {
 
 <h3>Positions... left/right/top/bottom</h3>
 
-<p>On peut également déplacer un élément de la page grace à la combinaison de :<br>
+<p>On peut également déplacer un élément de la page grâce à la combinaison de :<br>
   <span class="color property">position</span>: <span class="color value">relative | absolute | fixed | sticky</span><br>
   <span class="color property">left / right / top / bottom</span>: <span class="color value">100px</span><br>
 
@@ -1168,7 +1174,7 @@ textarea {
 <h4>Selection</h4>
 
 
-<p>Petite pause, encore une pseudo-classe.... <br>
+<p>Petite pause, encore une pseudo-classe... <br>
 MDN : <a target="_blank" href="https://developer.mozilla.org/fr/docs/Web/CSS/::selection">https://developer.mozilla.org/fr/docs/Web/CSS/::selection</a>
 
 <pre><code class="language-css">
@@ -1253,11 +1259,11 @@ MDN : <a target="_blank" href="https://developer.mozilla.org/fr/docs/Web/CSS/::s
 <section class="centred">
 
 
-  <h2>Alignement de text, colones...</h2>
+  <h2>Alignement de texte, colonnes...</h2>
 
 
   <!-- —> columns -->
-  <h3>Alignement manuel (2 colones left/right)</h3>
+  <h3>Alignement manuel (2 colonnes left/right)</h3>
 
   <div class="resume">MDN font-size unités (em, px) : <a href="https://developer.mozilla.org/fr/docs/Web/CSS/column-count" target="_blank">https://developer.mozilla.org/fr/docs/Web/CSS/column-count</a></div>
 

public/0_intro_vscode.html

@@ -37,6 +37,8 @@
 
     <section>
 
+        Framapas : <a href="https://mensuel.framapad.org/p/nd2xsicpe5-ahi9?lang=fr">frama</a>
+
         <h1>Firefox</h1>
 
         <div class="pre">

public/chambre.html

@@ -0,0 +1 @@
+chambre

public/syle_demo.css

@@ -0,0 +1,3 @@
+h1, h2, h3, h4, h5, h6 {
+    background-color: red; font-size: 3em;
+}

public/template.html

@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <title>Document</title>
+    </head>
+
+    <body>
+
+        <!-- je vais commencer ici -->
+        <p>
+            <u>text surligné</u>
+        </p>
+
+        <u style="color: blanchedalmond; font-size: 1em; line-height: 1.3em;">text souligné</u>
+        <u style="color: blanchedalmond; font-size: 1em; line-height: 1.3em;">text souligné</u>
+        <u style="color: blanchedalmond; font-size: 1em; line-height: 1.3em;">text souligné</u>
+        <u style="color: blanchedalmond; font-size: 1em; line-height: 1.3em;">text souligné</u>
+        
+
+        <a href="chambre.html">chambre !</a>
+
+        <img style="width: 100px; height: 100px;" src="nom_de_limage.jpg"
+   
+    </body>
+
+</html>
+
+

test_file

@@ -1 +0,0 @@
-llll