diff --git a/README.md b/README.md.save similarity index 100% rename from README.md rename to README.md.save diff --git a/READ_ME.md b/READ_ME.md new file mode 100644 index 0000000..4292146 --- /dev/null +++ b/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 ..." pour désindexer) + nouveau fichier : NEW_file_ready.md + +Modifications qui ne seront pas validées : + (utilisez "git add/rm ..." pour mettre à jour ce qui sera validé) + (utilisez "git restore ..." pour annuler les modifications dans le répertoire de travail) + supprimé : fullyfly.md + +Fichiers non suivis: + (utilisez "git add ..." 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/. + +--- + + + +**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) + + + +## 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 diff --git a/favicon.ico b/favicon.ico index bb416d8..2e15ef1 100644 Binary files a/favicon.ico and b/favicon.ico differ diff --git a/favicon_0.ico b/favicon_0.ico new file mode 100644 index 0000000..bb416d8 Binary files /dev/null and b/favicon_0.ico differ diff --git a/public/.prettierrc b/public/.prettierrc new file mode 100644 index 0000000..222861c --- /dev/null +++ b/public/.prettierrc @@ -0,0 +1,4 @@ +{ + "tabWidth": 2, + "useTabs": false +} diff --git a/public/0_intro.html b/public/0_intro.html index cfb6b29..f97e621 100644 --- a/public/0_intro.html +++ b/public/0_intro.html @@ -39,7 +39,6 @@ - -

Bonjour le Monde !

+

Bonjour le Monde !!!

@@ -60,33 +59,34 @@

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.

+

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

+

HyperText Markup Language est une façon de composer 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

+

Les balises HTML (tags en anglais) sont nombreuses....
+ Elles viennent encercler/encapsuler/contenir... entourer/délimiter... les contenus de la page qui, ainsi, sont différencié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... + et plein de propriétés d'affichage - Cascading Style Sheets (CSS) - qu'on peut leur ajouter (pour les modifier)... voir MDN + Je vais ici principalement me référer à MozillaDevNetwork (MDN)... il existe énormément 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 + Selectors complexes (ciblage CSS), en anglais, on les verra 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... @@ -94,14 +94,14 @@

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...
+ 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é...

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

Page d'aide, raccourcis :
@@ -110,23 +110,23 @@

Afficher le code source

-

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

+

On va déjà 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) + CTRL+MAJ+I Les outils de développement 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)...
+
... on met les contenus contextuels (meta) et ressources dans la tête de la page <head>titre, feuilles de style .css, etc.</head> (contenus invisibles) +
... on y met les contenus courants, les textes, images, dans le corps de la page <body>articles, textes, images, contenus, etc.</body> (contenus visibles) +
+
+ 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

@@ -164,7 +164,7 @@ -

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

@@ -185,7 +185,7 @@

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"

+ C'est parce qu'une div se comporte comme un "block"

On va y revenir avec un exemple

@@ -197,29 +197,26 @@

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 ! +

Dans l'éditeur de texte où l'on code (IDE, pour Integrated Development Environment), 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 

+On peut 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" +

Certains éléments (comme les "div") vont créer du vide autour d'eux, des sauts de ligne..., agir comme des "block" + -

D'autres éléments se comportent comme du text, sans créer de saut de ligne autour d'eux
+

D'autres éléments se comportent comme du texte, 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)

+

Ce qui les différencie, c'est la propriété d'affichage (display)

@@ -228,7 +225,7 @@ On peut aussi forcer un saut à la ligne avec
ou un autre séparateur com MDN Firefox (Display) -

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

+

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

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

@@ -238,19 +235,21 @@ On peut aussi forcer un saut à la ligne avec
ou un autre séparateur com -

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

+

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

+

À l'origine, il s'agissait de "mimer" certaines mises en forme usuelles dans le journalisme, l'édition.

-

La balise...
"u" underline
"b" ou "strong" gras, em ou i pour italic +

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

+ ... 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)

+
Démo de balise inline qui crée du gras (et c'est tout)
@@ -284,23 +283,23 @@ On peut aussi forcer un saut à la ligne avec
ou un autre séparateur com

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é)

+

On peut toutefois 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 voir le code source de la page en faisant CTRL+MAJ+I les outils de développement s'affichent
+ Dans Firefox je trouve les paramètres via icon "..." (à droite) puis Parametres ("icon rouage") /OU/ F1

-

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

+

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

+

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

@@ -314,11 +313,11 @@ On peut aussi forcer un saut à la ligne avec
ou un autre séparateur com 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... +
Ici, je veux annuler la propriété et valeur attribuées aux éléments "strong"... + C'est la propriété font-weight avec la valeur "bold" (gras) qui crée l'empâtement... ... 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... + Pour changer l'empâtement je vais modifier le style de l'élément strong... font-weight est une propriété normal une valeur attribuée à cette propriété
@@ -344,21 +343,21 @@ On parle de méthode "inline", dans le texte/cod

-->

-
Ici je suis venu ajouter du style directement à l'élément +
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
+même taille  - 
+plus petit texte
-
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" +
On a vu qu'en HTML, on pouvait entourer / encercler / contenir... des bouts de texte par des balises + Une fois entourés par ces balises, ces bouts de texte séparés sont appelés des é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) @@ -379,17 +378,18 @@ On parle de méthode "inline", dans le texte/cod 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)

+

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 sélecteurs utilisés dans les feuilles de style CSS pour cibler des éléments présents dans la page HTML )

+

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) +
... Ainsi, ces règles inscrites dans un fichier 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écurrents 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...

- +https://developer.mozilla.org/fr/docs/Web/CSS/CSS_selectors +( Sélecteurs en français ) @@ -398,12 +398,12 @@ On parle de méthode "inline", dans le texte/cod

Où mettre la feuille de style ?

-

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

+

Voyons d'abord comment fonctionne une feuille de style (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 peut la nommer 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 +

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

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

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...

-

Au lieu d'utiliser <link> on pourra utiliser <style>...</style> +

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)

@@ -448,14 +448,16 @@ Mais on peut aussi charger cette cascade d'instructions directement dans la page

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, +
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 - Dans la feuille de style on indique qu'on cherche (cible) TOUS les éléments avec la class "important" en indiquant.... + 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 classe "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 + Ce qu'on fait là, c'est cibler ("sibling") un élément d'après sa class 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...
@@ -477,43 +479,47 @@ Mais on peut aussi charger cette cascade d'instructions directement dans la page 

 

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

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

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

-  
... ceci est strong mais .pas_important !
 
+  
... 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) +
Une classe est utilisée plus souvent ; elle va contenir des mises en forme couramment utilisées. +
Il est intéressant de trouver des noms de classe é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

+ +

CSS : on peut attribuer les mêmes consignes (propriétés + valeurs) à plusieurs éléments 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
- === #text_principal p { ... }
+

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

-

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

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


@@ -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 {
 
 

 
 
-  
1. Je suis le premier paragraphe !
 
-  
2. Et moi le deuxième paragraphe !
 
-  
3. Et moi le troisiem paragraphe !
 
+  
1. Je suis le premier paragraphe !
 
+  
2. Et moi le deuxième paragraphe !
 
+  
3. Et moi le troisième 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.
+  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 affiche 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" 
+  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 )
@@ -620,7 +626,7 @@ p:last-child .para {
   

 
 
-  
+  
 
   
jambes
@@ -682,15 +688,15 @@ CSS Avancé ! Autre façon de cibler les éléments d'une page HTML
Permet un
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
)

+

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 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
)

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...)
+

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

@@ -710,8 +716,8 @@ ou encore 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

+

Si l'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 @@ -738,7 +744,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

+

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

+

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

@@ -770,7 +776,7 @@ MDN (display) : 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.
+On garde la logique, la dernière propriété:value donnée à un élément (ex. : div#exemple.dernier) qui est prise en compte.

@@ -1076,7 +1082,7 @@ textarea {

Positions... left/right/top/bottom

-

On peut également déplacer un élément de la page grace à la combinaison de :
+

On peut également déplacer un élément de la page grâce à la combinaison de :
position: relative | absolute | fixed | sticky
left / right / top / bottom: 100px
@@ -1168,7 +1174,7 @@ textarea {

Selection

-

Petite pause, encore une pseudo-classe....
+

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


@@ -1253,11 +1259,11 @@ MDN : 
 
 
-  
Alignement de text, colones...

+  
Alignement de texte, colonnes...

 
 
   
-  
Alignement manuel (2 colones left/right)

+  
Alignement manuel (2 colonnes left/right)

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

 
diff --git a/public/0_intro_vscode.html b/public/0_intro_vscode.html
index 2828732..edeaa76 100644
--- a/public/0_intro_vscode.html
+++ b/public/0_intro_vscode.html
@@ -37,6 +37,8 @@
 
     

 
+        Framapas : frama
+
         
Firefox

 
         

diff --git a/public/2_flexbox/index.html b/public/2_flexbox/index.html
index 97f940b..1fb4c9d 100644
--- a/public/2_flexbox/index.html
+++ b/public/2_flexbox/index.html
@@ -89,6 +89,6 @@
     
 
 
-  
+   
 
 
diff --git a/public/5_js/5_js.html b/public/5_js/5_js.html
index c32c89e..56834c9 100644
--- a/public/5_js/5_js.html
+++ b/public/5_js/5_js.html
@@ -40,1299 +40,9 @@
 
   

 
-    

 
 
-      
HTML, balises, éléments

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

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

-
-      
Les balises HTML (tag en anglais) sont nombreuses....

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

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

-
-
-      
-        
-        
-
-
-
-
Vscode + template

-
-      
Index des projets...

-        Home/Index : https://code.bonnebulle.xyz

-        Avec un sous-dossier par personne...
-      

-
-      
Que vous pouvez ouvrir dans VSCODE, le logiciel de code qu'on va utiliser...

-        C'est une version de l'application VSCode accessible en ligne...

-        Ce qui permet de démarrer tout de suite....  dans un environnement de travail pré-configuré

-        et moi de suivre vos différents projets au même endroit...

-        Vous travaillerez depuis votre propre dossier de projet !
-      

-      
-      

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

-      

-
-      
Page d'aide, raccourcis :

-      0_intro_vscode

-      
-
-
Afficher le code source

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

-
-      
Lien vers 0_index_empty.html

-
-      CTRL+MAJ+I les outils de dev. s'affichent,

-      CTRL+U, le code source (le fichier avant qu'il soit lu/interprété par le Navigateur)
-
-
-
... structure de la page, head, body, footer

-
-      
Par convention (et méthode)
-      
...  on met les contenus contextuels (meta) et ressources dans la tête de la page <head>titre, feuilles de style .css, etc</head> (contenus invisible)
-      
...  on met les contenus courant, les textes, images, dans le corps de la page  <body>article, texts, images, contenus, etc</body>  (contenus visible)
-      
Les commentaires CTRL+MAJ+/ sont invisibles...
-      
-
-      
Footer, on le verra avec Javascript, est un espace en bas de page où l'on charge d'autres ressources (.js)...

-        à la fin de la page... ce qui est en bas étant lu... en dernier

-
-
-
-
-
-
-
-
-      

-      

-      

-
-
-
HTML balises simples, souligner, titres... div

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

-
-
-      
Exemple :

-      
text souligné

-      
lien vers

-
-

-  
titre

-  
titre

-  
titre

-  
titre

-  
titre

-  
titre

-

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

-  
-
-

-    

-      
autres contenus

-    

-

-
-

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

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

-
-
-
Dans une div, tout ce qui se retrouve avant, à droite, à gauche...
-  saute à la ligne, passe après la div

-  C'est parce que une div se comporte comme un "block"

-
On va y revenir avec un exemple

-
-
-
-
-
-
-
-
-
Sauts de ligne : br, hr
...

-
-
Dans l'éditeur de texte d'où l'on code (IDE), on peut faire autant de sauts à la ligne qu'on veut !
-

-
-On peut espacer des parties de code... le navigateur ne va créer des sauts de lignes que si on lui demande d'en afficher.
-

-
-
-

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

-

-
-

-


-

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

-
-
D'autres éléments se comportent comme du text, sans créer de saut de ligne autour d'eux 

-  : ils se succèdent sur la ligne, ils sont affichés de façon "inline"

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

-
-
-
-

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

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

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

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

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

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

-
-
-
La balise... 
"u" underline 
"b" ou "strong" gras, em ou i pour italic
-  
La balise "span"
-  est neutre mais permet d'entourer une partie du texte

-  ... On va voir ensuite comment il est possible d'ajouter des "classes" et "id" permettant de les identifier

-
-

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

-

-
-
-

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

-
-

-

-  Exemple :

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

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

-

-

-
-
-
-
-
-
-
-
-
-
-
-
Voir les styles CSS par défaut

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

-
-
-
Je peux voir le code source de la page en faisant CTRL+MAJ+I les outils de dev. s'affichent

-  Dans Firefox je trouve les parametres via icon "..." (à droite) puis Parametres ("icon rouage") /OU/ F1

-
-

-  
-

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

-
-

-  
-

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

-
-
-
-
-
-
-
Ajouter du style = propriétés + valeurs

-
-
-
On peut opérer de plusieurs façons, d'abord on peut ajouter du style directement dans un élement

-On parle de méthode  "inline", dans le texte/code/page même (pas un fichier distinct, on va y revenir)

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

-
-

-
Dolore exercitation et ex tempor

-

-
labore laboris pariatur....

-
labore laboris pariatur....

-

-
-
-
-

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

-
-

-petit text - 
-même taille  - 
-plus petit text
-

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

-
-
-
-
-

-
-
-
-
-
-
Feuilles de style : fichier.css

-
-
Comme on vient de le voir...

-  On peut ajouter du style directement dans un élément (dans la page HTML)... mais ce n'est pas le plus simple

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

-
On y renseigne / indique / ajoute des instructions d'habillage qui vont modifier le comportement visuel des éléments dans la page ... 

-  ( qu'on va identifier grâce à des "Selectors" utilisés dans les feuilles de style CSS pour cibler des éléments présents dans la page HTML  )

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

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

-
-
-
-
-
-
-
-

-
-
Où mettre la feuille de style ?

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

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

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

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

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

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

-
-

-
-

-
-
Lien vers style_basics.css

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

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

-

-
-
-
-
-
-
-
-
-

-  
-  
-
-
-
-
Identifier et "cibler" les éléments de la page (id, classes) 

-  + leur attribuer des propriétés+valeurs

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

-
-

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

-
-

-

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

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

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

-

-

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

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

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

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

-

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

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

-  === #text_principal p { ... }

-  === "parent > enfant"
-

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

-  === a la classe "para" et "fond_bleu"

-
-

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

-
-

-
 
-  
1. Je suis le premier paragraphe !
 
-  
2. Et moi le deuxième paragraphe !
 
-  
3. Et moi le troisiem paragraphe !
 
-  
4. Et moi le dernier paragraphe 
-                                                    =(
 
-
 
-

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

-
-
-

-
-
-
Ciblage parents

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

-
#contenant .element_dedans .sous_element

-
-

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

-
-

-

-  
tête

-  

-    
aide

-    

-      
autonomie
 
-    

-  

-
-
-  
-
-  
jambes

-

-

-
-
-
Nesting

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

-
-
-
-

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

-
-

-
tête

-
aide

-
autonomie

-

-

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

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

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

-
Autre chose, on utilise des retraits de ligne (à gauche) des "indent", des espaces pour, visuellement, voir dans le code, quel tag (ici des <p> <div>)

-C'est une convention formelle... qui aide grandement à résoudre des "bugs" / "errors"
-

-Wiki Style d'indentation : https://fr.wikipedia.org/wiki/Style_d'indentation
-
-
-
Dans VSCODE on peut utiliser 
Prettier Code Formatter qui fait le boulot à notre place 
(aligne correctement les blocks de textes en fonction de leur imbrication successive...)

-ou encore indent-rainbow

-
-
-

-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Margin padding

-
S'il on veut créer un saut à la ligne on peut utiliser ajouter des propriétés de marge externes ou internes à l'élément

-Pour cela il faut que l'élément se comporte comme un bloc, ait une propriété display: inline-block | block

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

-
-

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

-
-

-

-  
 
-    
Contenu

-  

-

-

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

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

-
-
-
-
-

-

-

-
-
-

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

-
-

-  

-    #margin_first
-  

-
-  

-    #margin_seconde
-  

-
-  

-    #margin_last
-  

-

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

-  
-  
-
-
-

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

-
-

-

-  
#top_margin_block

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

-  
style : 
margin-top: -10px

-

-

-
-

-Notez que, dans le dernier exemple, c'est le style="..." de l'élément (qui est chargé/lu/interprété en dernier, après la feuille de style)....
c'est ce style (margin-top: -10px) qui l'emporte.

-On garde la logique, la dernière propriété:value donnée à un élément (EX: div#exemple.dernier) qui est prise en compte.

-

-
-
-
-
-
-
Transition + margin (pause)

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

-
-

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

-
-
-

-  

-    
Youhouuuuu

-  

-

-  
-
-
-
-

-

-
-
-
-
Margin auto + float (+var +calc)

-
-
-
-

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

-
-

-
#float_none

-
-

-  
#margin_auto :
Contenu centré

-

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

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

-

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

-
-
-
-
-
-
-
-
Largeur / hauteur (adaptative)

-
-

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

-
-

-

-  #width_full_page
-

-

-
-
-
-
-
-
Mediaqueries

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

-
-

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

-
-

-  
-     
-  
-  
-    

-        #width_full_page
-    

-
-    

-        #width_bloc_textarea
-        
-    

-  
-

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

-
-
-
-
-
-
-
Positions... left/right/top/bottom

-
-
On peut également déplacer un élément de la page grace à la combinaison de :

-  position: relative | absolute | fixed | sticky

-  left / right / top / bottom: 100px

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

-
-
-

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

-  
-

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

-
-
-#pos_sticky
-
-
-

-
-
-
Dialog

-
-

-

-

-

-
-  
Faisons une petite pause !

-  

-    
-  

-
-

-

-

-

-

-

-
-
-
Selection

-
-
-
Petite pause, encore une pseudo-classe.... 

-MDN : https://developer.mozilla.org/fr/docs/Web/CSS/::selection
-
-

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

-
-

-  

-    

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

-    

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

-  

-

-
-
-
-
-
-
-
-
-
-
-
Textes

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

-

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

-
-

-  

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

-  

-

-
-
-
-

-
-

-
-
-
-
-
-
-
-

-
-
-  
Alignement de text, colones...

-
-
-  
-  
Alignement manuel (2 colones left/right)

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

-
-
-
-

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

-
-

-  

-    
-      

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

-    
-    
-      

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

-    
-  

-

-
-
-  
Alignement css (column-count)

-
-

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

-
-

-  

-    

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

-  

-

-
-  

-  

-  

-  Flexbox
-  

-  

-  

-

+  

 
 
 
@@ -1350,23 +60,28 @@ MDN : 
   
   
-
-  
-  
-  
-
   
   
 
+  
 
 
 
diff --git a/public/chambre.html b/public/chambre.html
new file mode 100644
index 0000000..75dc79a
--- /dev/null
+++ b/public/chambre.html
@@ -0,0 +1 @@
+chambre
\ No newline at end of file
diff --git a/public/framapad.html b/public/framapad.html
new file mode 100644
index 0000000..e69de29
diff --git a/public/index-de-demo.html b/public/index-de-demo.html
new file mode 100644
index 0000000..e69de29
diff --git a/public/livecoder.html b/public/livecoder.html
new file mode 100644
index 0000000..e69de29
diff --git a/public/syle_demo.css b/public/syle_demo.css
new file mode 100644
index 0000000..eca7767
--- /dev/null
+++ b/public/syle_demo.css
@@ -0,0 +1,3 @@
+h1, h2, h3, h4, h5, h6 {
+    background-color: red; font-size: 3em;
+}
diff --git a/public/template.html b/public/template.html
new file mode 100644
index 0000000..62c6f7f
--- /dev/null
+++ b/public/template.html
@@ -0,0 +1,30 @@
+
+
+    
+        
+        
+        Document
+    
+
+    
+
+        
+        

+            text surligné
+        

+
+        text souligné
+        text souligné
+        text souligné
+        text souligné
+        
+
+        chambre !
+
+        
+
+
+
+
diff --git a/test_file b/test_file
deleted file mode 100644
index 65f6ddb..0000000
--- a/test_file
+++ /dev/null
@@ -1 +0,0 @@
-llll