cours test
This commit is contained in:
bonnebulle
4
public/.prettierrc
Normal file
4
public/.prettierrc
Normal file
@@ -0,0 +1,4 @@
|
||||
{
|
||||
"tabWidth": 2,
|
||||
"useTabs": false
|
||||
}
|
||||
@@ -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>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>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 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>
|
||||
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>
|
||||
<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 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>
|
||||
Je vais ici principalement me référer à <i>MozillaDevNework</i>... il existe énorméméent de ressources pour apprendre à coder...
|
||||
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>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>
|
||||
et moi de suivre vos différents projets au même endroit...<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>
|
||||
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>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>Depuis VSC, on peut créer un fichier <i class="file">index.html</i>
|
||||
<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+U</kdb>, le code source (le fichier avant qu'il soit lu/interprété par le Navigateur)
|
||||
<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)
|
||||
|
||||
|
||||
<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"><head>titre, feuilles de style .css, etc</head></codescaped> (contenus <b>in</b>visible)
|
||||
<br>... on met les contenus courant, les textes, images, dans le <u>corps de la page</u> <codescaped class="done"><body>article, texts, images, contenus, etc</body></codescaped> (contenus visible)
|
||||
<br>Les commentaires <kdb class="key">CTRL+MAJ+/</kdb> sont invisibles...
|
||||
<!-- <br>Les <codescaped class="done"><script></codescaped> ou encore <codescaped class="done"><link></div> -->
|
||||
|
||||
<p>Footer, on le verra avec Javascript, est un espace en bas de page où l'on charge d'autres ressources (.js)...<br>
|
||||
<br>... on met les contenus contextuels (<i>meta</i>) et ressources dans <u>la tête de la page</u> <codescaped class="done"><head>titre, feuilles de style .css, etc.</head></codescaped> (contenus <b>in</b>visibles)
|
||||
<br>... on y met les contenus courants, les textes, images, dans le <u>corps de la page</u> <codescaped class="done"><body>articles, textes, images, contenus, etc.</body></codescaped> (contenus visibles)
|
||||
<br>
|
||||
<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>
|
||||
à 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"><a>contenu</a></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>
|
||||
|
||||
|
||||
@@ -284,23 +283,23 @@ On peut aussi forcer un saut à la ligne avec <br /> ou un autre séparateur com
|
||||
|
||||
<h3 id="title_config_firefox">Voir les styles CSS par défaut</h3>
|
||||
|
||||
<p>On peut toute fois 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>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>
|
||||
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>
|
||||
<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 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
|
||||
voir d'autres propriétés et feulles de style</p>
|
||||
<p>Firefox montre bien que "strong" a des valeurs par défaut... On peut
|
||||
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"...
|
||||
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...
|
||||
<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'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: 10px">plus petit text</span>
|
||||
<span style="font-size: smaller">même taille</span> <!-- (un élément "small" a font-size:smaller) --> -
|
||||
<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>
|
||||
Une fois entourés par ces balises, ces bouts de text séparés sont appelés de <span class="important">éléments"</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 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)
|
||||
@@ -379,17 +378,18 @@ On parle de méthode "<span class="important">inline</span>", 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</p>
|
||||
|
||||
<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>
|
||||
<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)
|
||||
<br>... ainsi, ces règles inscrites dans un fichiers 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>.... 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>
|
||||
<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 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é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 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>... 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é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"><link></codescaped> on pourra utiliser <codescaped class="done"><style>...</style></codescaped>
|
||||
<p>Au lieu d'utiliser <codescaped class="done"><link></codescaped>, on pourra utiliser <codescaped class="done"><style>...</style></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
|
||||
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....
|
||||
|
||||
<!-- !!! 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,43 +479,47 @@ 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>Aussi il est interessant de trouver des noms de classes équivoques (ce n'est pas toujours facile)
|
||||
<br>Une classe est utilisée plus souvent ; elle va contenir des mises en forme couramment utilisées.
|
||||
<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 {
|
||||
....
|
||||
}
|
||||
.para,
|
||||
#sad {
|
||||
....
|
||||
}
|
||||
.para, #sad {
|
||||
....
|
||||
}
|
||||
.para,
|
||||
#sad {
|
||||
....
|
||||
}
|
||||
</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>
|
||||
=== <codecss>#text_principal p { ... }</codecss><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>#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>2. Et moi le deuxième <span class="para">paragraphe</span> !</p> <!-- enfants -->
|
||||
<p>3. Et moi le troisiem <u class="para fond_bleu serif_big">paragraphe</u> !</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> <!-- enfant -->
|
||||
<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 !
|
||||
== 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 "<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>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>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 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"><p></codescaped> <codescaped class="done"><div></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>
|
||||
Pour cela il faut que l'élément se comporte comme un bloc, ait une propriété display: inline-block | block</p>
|
||||
<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>
|
||||
|
||||
<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>En selectionnant un élément dans le code à gauche, on voit quelles marges externes (et internes, avec padding) lui sont appliquées</p>
|
||||
<p>Firefox : <kdb class="key">CTRL+MAJ+I</kdb> + <code class="key">-> Inspecteur -> Mise en page</code></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>
|
||||
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -89,6 +89,6 @@
|
||||
<script src="https://livejs.com/live.js"></script>
|
||||
|
||||
|
||||
</footer>
|
||||
</footer>
|
||||
</html>
|
||||
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
1
public/chambre.html
Normal file
1
public/chambre.html
Normal file
@@ -0,0 +1 @@
|
||||
chambre
|
||||
0
public/framapad.html
Normal file
0
public/framapad.html
Normal file
0
public/index-de-demo.html
Normal file
0
public/index-de-demo.html
Normal file
0
public/livecoder.html
Normal file
0
public/livecoder.html
Normal file
3
public/syle_demo.css
Normal file
3
public/syle_demo.css
Normal file
@@ -0,0 +1,3 @@
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
background-color: red; font-size: 3em;
|
||||
}
|
||||
30
public/template.html
Normal file
30
public/template.html
Normal file
@@ -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>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user