bonnebulle/questionnaire
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

SEND all files + questionnaires + json + data_tests

Browse Source
This commit is contained in:
vincent_b
2025-11-19 12:12:03 +01:00
parent 71591b98f0
commit c78698f79a
197 changed files with 29115 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
public/codes/html/class_id_child.css Normal file
View File

@@ -0,0 +1,14 @@
/* CSS */
/* créer un élement span..... */
#div_entente p span.important {
color: red;
}
/* créer un élement strike..... */
#div_corps p strike.hide {
display: none;
}
/* ajouter un titre h1 et h2 */
h1, h2 {
background: #000;
color: #FFF;
}

12
public/codes/html/class_id_child.page Normal file
View File

@@ -0,0 +1,12 @@
<!-- Modifier l'HTML -->
<div id="div_entente">
<p>
Commodo duis ea aliquip consequat amet do et enim ea cillum nisi amet. Veniam aliqua consequat id consectetur cillum ullamco incididunt sit ex non adipisicing ullamco cillum laboris. Text important.
</p>
</div>
<div id="div_corps">
<p>
Magna et deserunt enim sit. Sunt aute dolore eu mollit exercitation ullamco est sit in ullamco amet irure commodo eiusmod. Text supprimé en fin de paragraphe.
</p>
</div>

16
public/codes/html/class_id_child.result Normal file
View File

@@ -0,0 +1,16 @@
<!-- Modifier l'HTML -->
<h1>Titre principal</h1>
<div id="div_entente">
<p>
Commodo duis ea aliquip consequat amet do et enim ea cillum nisi amet. Veniam aliqua consequat id consectetur cillum ullamco incididunt sit ex non adipisicing ullamco cillum laboris. <span class="important">Text important</span>.
</p>
</div>
<div id="div_corps">
<h2>Titre secondaire</h2>
<p>
Magna et deserunt enim sit. Sunt aute dolore eu mollit exercitation ullamco est sit in ullamco amet irure commodo eiusmod.<span class="hide">Text supprimé en fin de paragraphe</span>.
</p>
</div>

75
public/codes/html/class_id_child.txt Normal file
View File

@@ -0,0 +1,75 @@
La feuille CSS cible des éléments dans la page
Certains n'existent pas... les créer pour que les inscrtructions CSS les affectent. On se concentre ici sur l'HTML qu'on peut modifier.
<button type="button" class="collapsible">Open Collapsible</button>
<div class="coll_content">
En CSS on peut cibler un élément...
Exemple :
NB: on done autant de class qu'on veut mais un seul id, unique dans toute la page !!!
<codescape class="html block">
<a href="/lien/" id="seul_lien" class="lien_normal inline">
text du lien
</a>
</codescape>
- par son nom
<codescape class="css block">
a {
text-decoration: none;
}
</codescape>
- par sa.ses classe(s)
<codescape class="css block">
.lien_normal,
.lien_normal.inline {
text-decoration: none;
}
.inline {
display: inline;
}
</codescape>
NB: On peut cumuler les instructions (avec une virgule)
NB: On peut cibler un élément en donnant autant de précision sur ses attributs, sa classe, son id, autres propriétés
- ici par son id
.... puis par tous ses attributs
#seul_lien,
a#seul_lien.lien_normal.inline {
background: red;
}
- par n'importe quel autre attributs (ici href)
<codescape class="css block">
a[href] {
text-decoration: none;
}
</codescape>
. . .
NB: en HTML on cumule les classes (ici inline + lien_normal) en ajoutant un espace entre
<codescape class="html block">
<p>
<a class="lien_normal inline">
text du lien
</a>
</p>
</codescape>
....
en CSS un espace signifie autre chose :
<codescape class="css block">
p a,
html body {
text-decoration: none;
margin: 0;
}
</codescape>
Ici on cible tout élement <code>a</code> qui serait présent dans <code>p</code>
... on cible aussi <code>body</code> présent dans <code>html</code>
... en CSS, c'est la virgule qui sert de séparateur
Ensuite il faut bien penser à mettre des acolades "{" "}"
Tout ce qui se trouver entre elles est appliqué aux éléments ciblés...
</div>

12
public/codes/html/data/mi4cacmvoerxxbygoch_class_id_child.css Normal file
View File

@@ -0,0 +1,12 @@
&lt;span class="token comment"&gt;&amp;lt;!-- Modifier l'HTML --&amp;gt;&lt;/span&gt;
&lt;span class="token tag"&gt;&lt;span class="token tag"&gt;&lt;span class="token punctuation"&gt;&amp;lt;&lt;/span&gt;div&lt;/span&gt; &lt;span class="token attr-name keyword-id"&gt;id&lt;/span&gt;&lt;span class="token attr-value"&gt;&lt;span class="token punctuation attr-equals"&gt;=&lt;/span&gt;&lt;span class="token punctuation"&gt;"&lt;/span&gt;div_entente&lt;span class="token punctuation"&gt;"&lt;/span&gt;&lt;/span&gt;&lt;span class="token punctuation"&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;
&lt;span class="token tag"&gt;&lt;span class="token tag"&gt;&lt;span class="token punctuation"&gt;&amp;lt;&lt;/span&gt;p&lt;/span&gt;&lt;span class="token punctuation"&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;
Commodo duis ea aliquip consequat amets&lt;span class="token tag"&gt;&lt;span class="token tag"&gt;&lt;span class="token punctuation"&gt;&amp;lt;&lt;/span&gt;p&lt;/span&gt;&lt;span class="token punctuation"&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt; do et enim&lt;span class="token tag"&gt;&lt;span class="token tag"&gt;&lt;span class="token punctuation"&gt;&amp;lt;/&lt;/span&gt;p&lt;/span&gt;&lt;span class="token punctuation"&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt; ea cillum nisi amet. Veniam aliqua consequat id consectetur cillum ullamco incididunt sit ex non adipisicing ullamco cillum laboris. Text important.
&lt;span class="token tag"&gt;&lt;span class="token tag"&gt;&lt;span class="token punctuation"&gt;&amp;lt;/&lt;/span&gt;p&lt;/span&gt;&lt;span class="token punctuation"&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;
&lt;span class="token tag"&gt;&lt;span class="token tag"&gt;&lt;span class="token punctuation"&gt;&amp;lt;/&lt;/span&gt;div&lt;/span&gt;&lt;span class="token punctuation"&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;
&lt;span class="token tag"&gt;&lt;span class="token tag"&gt;&lt;span class="token punctuation"&gt;&amp;lt;&lt;/span&gt;div&lt;/span&gt; &lt;span class="token attr-name keyword-id"&gt;id&lt;/span&gt;&lt;span class="token attr-value"&gt;&lt;span class="token punctuation attr-equals"&gt;=&lt;/span&gt;&lt;span class="token punctuation"&gt;"&lt;/span&gt;div_corps&lt;span class="token punctuation"&gt;"&lt;/span&gt;&lt;/span&gt;&lt;span class="token punctuation"&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;
&lt;span class="token tag"&gt;&lt;span class="token tag"&gt;&lt;span class="token punctuation"&gt;&amp;lt;&lt;/span&gt;p&lt;/span&gt;&lt;span class="token punctuation"&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;
Magna et deserunt enim sit. Sunt aute dolore eu mollit exercitation ullamco est sit in ullamco amet irure commodo eiusmod. Text supprimé en fin de paragraphe.
&lt;span class="token tag"&gt;&lt;span class="token tag"&gt;&lt;span class="token punctuation"&gt;&amp;lt;/&lt;/span&gt;p&lt;/span&gt;&lt;span class="token punctuation"&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;
&lt;span class="token tag"&gt;&lt;span class="token tag"&gt;&lt;span class="token punctuation"&gt;&amp;lt;/&lt;/span&gt;div&lt;/span&gt;&lt;span class="token punctuation"&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;

1
public/codes/html/data/mi4cacmvoerxxbygoch_sauts_de_lignes.css Normal file
View File

@@ -0,0 +1 @@
/* Rien a modifier */

12
public/codes/html/data/mi4cp4t5dfbpsizhrd_class_id_child.page Normal file
View File

@@ -0,0 +1,12 @@
&lt;!-- Modifier l'HTML --&gt;
&lt;div id="div_entente"&gt;
&lt;p&gt;
Commodo duis ea aliquip consequat amet do et enim ea cillum nisi amet. Veniam aliqua consequat id consectetur cillum ullamco incididunt sit ex non adipisicing ullamco cillum laboris. Text important. &lt;span class="important"&gt;Sunt aute dolore eu mollit&lt;/span&gt;
&lt;/p&gt;
&lt;/div&gt;
&lt;div id="div_corps"&gt;
&lt;p&gt;
Magna et deserunt enim sit. exercitation ullamco est sit in ullamco amet irure commodo eiusmod. Text supprimé en fin de paragraphe.
&lt;/p&gt;
&lt;/div&gt;

14
public/codes/html/data/mi4d5cv6af67wnisrhb_class_id_child.css Normal file
View File

@@ -0,0 +1,14 @@
/* CSS */
/* créer un élement span..... */
#div_entente p span.important {
color: orange;
}
/* créer un élement strike..... */
#div_corps p strike.hide {
display: none;
}
/* ajouter un titre h1 et h2 */
h1, h2 {
background: #000;
color: #FFF;
}

12
public/codes/html/data/mi4d5cv6af67wnisrhb_class_id_child.page Normal file
View File

@@ -0,0 +1,12 @@
&lt;!-- Modifier l'HTML --&gt;
&lt;div id="div_entente"&gt;
&lt;p&gt;
Commodo duis ea aliquip consequat amet do et enim ea cillum &lt;span class="important"&gt;nisi&lt;/span&gt; amet. Veniam aliqua consequat id consectetur cillum ullamco incididunt sit ex non adipisicing ullamco cillum laboris. Text important.
&lt;/p&gt;
&lt;/div&gt;
&lt;div id="div_corps"&gt;
&lt;p&gt;
Magna et deserunt enim sit. Sunt aute dolore eu mollit exercitation ullamco est sit in ullamco amet irure commodo eiusmod. Text supprimé en fin de paragraphe.
&lt;/p&gt;
&lt;/div&gt;

12
public/codes/html/data/mi4dc5glugn8is6mc4_class_id_child.page Normal file
View File

@@ -0,0 +1,12 @@
&lt;!-- Modifier l'HTML --&gt;
&lt;div id="div_entente"&gt;
&lt;p&gt;
Commodo duis ea aliquip consequat amet do et enim ea cillum nisi amet. Veniam aliqua consequat id consectetur cillum ullamco incididunt sit ex non adipisicing ullamco cillum laboris. Text important.
&lt;/p&gt;
&lt;/div&gt;
&lt;div id="div_corps"&gt;
&lt;p&gt;
Magna et deserunt enim sit. Sunt aute dolore eu mollit exercitation ullamco est sit in ullamco amet irure commodo eiusmod. Text supprimé en fin de paragraphe.
&lt;/p&gt;
&lt;/div&gt;

14
public/codes/html/data/mi4dmdkrwwqcr8pvxn_class_id_child.css Normal file
View File

@@ -0,0 +1,14 @@
/* CSS */
/* créer un élement span..... */
#div_entente p span.important {
color: red;
}
/* créer un élement strike..... */
#div_corps p strike.hide {
display: none;
}
/* ajouter un titre h1 et h2 */
h1, h2 {
background: #000;
color: #FFF;
}

12
public/codes/html/data/mi4dmdkrwwqcr8pvxn_class_id_child.page Normal file
View File

@@ -0,0 +1,12 @@
&lt;!-- Modifier l'HTML --&gt;
&lt;div id="div_entente"&gt;
&lt;p&gt;
Commodo duis ea aliquip consequat amet do et enim ea cillum nisi amet. Veniam aliqua consequat id consectetur cillum ullamco incididunt sit ex non adipisicing ullamco cillum laboris. Text important.
&lt;/p&gt;
&lt;/div&gt;
&lt;div id="div_corps"&gt;
&lt;p&gt;
Magna et deserunt enim sit. Sunt aute dolore eu mollit exercitation ullamco est sit in ullamco amet irure commodo eiusmod. Text supprimé en fin de paragraphe.
&lt;/p&gt;
&lt;/div&gt;

14
public/codes/html/data/mi4dnjj9x9s1dzmotw_class_id_child.css Normal file
View File

@@ -0,0 +1,14 @@
/* CSS */
/* créer un élement span..... */
#div_entente p span.important {
color: red;
}
/* créer un élement strike..... */
#div_corps p strike.hide {
display: none;
}
/* ajouter un titre h1 et h2 */
h1, h2 {
background: #000;
color: #FFF;
}

12
public/codes/html/data/mi4drvyxunex3s6fkd_class_id_child.html Normal file
View File

@@ -0,0 +1,12 @@
&lt;!-- Modifier l'HTML --&gt;
&lt;div id="div_entente"&gt;
&lt;p&gt;
Commodo duis ea aliquip consequat amet do et enim ea cillum nisi amet. Veniam aliqua consequat id consectetur cillum ullamco incididunt sit ex non adipisicing ullamco cillum laboris. Text important.
&lt;/p&gt;
&lt;/div&gt;
&lt;div id="div_corps"&gt;
&lt;p&gt;
Magna et deserunt enim sit. Sunt aute dolore eu mollit exercitation ullamco est sit in ullamco amet irure commodo eiusmod. Text supprimé en fin de paragraphe.
&lt;/p&gt;
&lt;/div&gt;

14
public/codes/html/data/mi4e7nagyc3eqyjql5d_class_id_child.css Normal file
View File

@@ -0,0 +1,14 @@
/* CSeeeeeeeS */
/* créer un élement span..... */
#div_entente p span.important {
color: red;
}
/* créer un élement strike..... */
#div_corps p strike.hide {
display: none;
}
/* ajouter un titre h1 et h2 */
h1, h2 {
background: #000;
color: #FFF;
}

14
public/codes/html/data/mi4eb1qr3hg6wlp8m1o_class_id_child.css Normal file
View File

@@ -0,0 +1,14 @@
/* CSS */
/* créer un élement span..... */
#div_entente p span.importantdddd {
color: red;
}
/* créer un élement strike..... */
#div_corps p strike.hide {
display: none;
}
/* ajouter un titre h1 et h2 */
h1, h2 {
background: #000;
color: #FFF;
}

14
public/codes/html/data/mi4ecrvptry6dx4a8v_class_id_child.css Normal file
View File

@@ -0,0 +1,14 @@
/* CSS */
/* créer un élement span..... */
#div_entente p span.important {
color: red;
}
/* créer un élement strike..... */
#div_corps p strike.hide {
display: none;dd
}
/* ajouter un titre h1 et h2 */
h1, h2 {
background: #000;
color: #FFF;
}

14
public/codes/html/data/mi4emhsrenv7z3tgpbk_class_id_child.css Normal file
View File

@@ -0,0 +1,14 @@
/* cccCSS */
/* créer un élement span..... */
#div_entente p span.important {
color: red;
}
/* créer un élement strike..... */
#div_corps p strike.hide {
display: none;
}
/* ajouter un titre h1 et h2 */
h1, h2 {
background: #000;
color: #FFF;
}

14
public/codes/html/data/mi4epb4xr29n8sdgaoh_class_id_child.css Normal file
View File

@@ -0,0 +1,14 @@
/* CSSsss */
/* créer un élement span..... */
#div_entente p span.important {
color: red;
}
/* créer un élement strike..... */
#div_corps p strike.hide {
display: none;
}
/* ajouter un titre h1 et h2 */
h1, h2 {
background: #000;
color: #FFF;
}

14
public/codes/html/data/mi4erwp52pt9laccg3d_class_id_child.css Normal file
View File

@@ -0,0 +1,14 @@
/* CSS */
/* créer un élement span..... */
#div_entente p span.important {
color: red;
}
/* créer un éssslement strike..... */
#div_corps p strike.hide {
display: none;
}
/* ajouter un titre h1 et h2 */
h1, h2 {
background: #000;
color: #FFF;
}

12
public/codes/html/data/mi4f2twj3t5r5uk5jn8_class_id_child.page Normal file
View File

@@ -0,0 +1,12 @@
&lt;!-- Modifier l'HTML --&gt;
&lt;div id="div_entente"&gt;
&lt;p&gt;
Commodo duis ea aliquip consequat amet do et enim ea cillum nisi amet. Veniam aliqua consequat id consectetur cillum ullamco incididuntsssss sit ex non adipisicing ullamco cillum laboris. Text important.
&lt;/p&gt;
&lt;/div&gt;
&lt;div id="div_corps"&gt;
&lt;p&gt;
Magna et deserunt enim sit. Sunt aute dolore eu mollit exercitation ullamco est sit in ullamco amet irure commodo eiusmod. Text supprimé en fin de paragraphe.
&lt;/p&gt;
&lt;/div&gt;

12
public/codes/html/data/mi4fqjqzrka57r2if8g_class_id_child.page Normal file
View File

@@ -0,0 +1,12 @@
&lt;!-- Modifier l'HTML --&gt;
&lt;div id="div_entente"&gt;
&lt;p&gt;
Commodo duiddds ea aliquip consequat amet do et enim ea cillum nisi amet. Veniam aliqua consequat id consectetur cillum ullamco incididunt sit ex non adipisicing ullamco cillum laboris. Text important.
&lt;/p&gt;
&lt;/div&gt;
&lt;div id="div_corps"&gt;
&lt;p&gt;
Magna et deserunt enim sit. Sunt aute dolore eu mollit exercitation ullamco est sit in ullamco amet irure commodo eiusmod. Text supprimé en fin de paragraphe.
&lt;/p&gt;
&lt;/div&gt;

12
public/codes/html/data/mi4fs1z4c2tdsjx5ymh_class_id_child.page Normal file
View File

@@ -0,0 +1,12 @@
&lt;!-- Modifier l'HTML --&gt;
&lt;div id="div_entenssste"&gt;
&lt;p&gt;
Commodo duis ea aliquip consequat amet do et enim ea cillum nisi amet. Veniam aliqua consequat id consectetur cillum ullamco incididunt sit ex non adipisicing ullamco cillum laboris. Text important.
&lt;/p&gt;
&lt;/div&gt;
&lt;div id="div_corps"&gt;
&lt;p&gt;
Magna et deserunt enim sit. Sunt aute dolore eu mollit exercitation ullamco est sit in ullamco amet irure commodo eiusmod. Text supprimé en fin de paragraphe.
&lt;/p&gt;
&lt;/div&gt;

12
public/codes/html/data/mi4fv537wrxgqnzm2qj_class_id_child.page Normal file
View File

@@ -0,0 +1,12 @@
&lt;!-- Modifier l'HTzzzML --&gt;
&lt;div id="div_entente"&gt;
&lt;p&gt;
Commodo duis ea aliquip consequat amet do et enim ea cillum nisi amet. Veniam aliqua consequat id consectetur cillum ullamco incididunt sit ex non adipisicing ullamco cillum laboris. Text important.
&lt;/p&gt;
&lt;/div&gt;
&lt;div id="div_corps"&gt;
&lt;p&gt;
Magna et deserunt enim sit. Sunt aute dolore eu mollit exercitation ullamco est sit in ullamco amet irure commodo eiusmod. Text supprimé en fin de paragraphe.
&lt;/p&gt;
&lt;/div&gt;

12
public/codes/html/data/mi4g369lfku4z7c9kci_class_id_child.page Normal file
View File

@@ -0,0 +1,12 @@
<!-- Modifier l'HTML -->
<div id="div_ententefffff>
<p>
Commodo duis ea aliquip consequat amet do et enim ea cillum nisi amet. Veniam aliqua consequat id consectetur cillum ullamco incididunt sit ex non adipisicing ullamco cillum laboris. Text important.
</p>
</div>
<div id="div_corps">
<p>
Magna et deserunt enim sit. Sunt aute dolore eu mollit exercitation ullamco est sit in ullamco amet irure commodo eiusmod. Text supprimé en fin de paragraphe.
</p>
</div>

12
public/codes/html/data/mi4gaotd5lfa2tuzfw_class_id_child.page Normal file
View File

@@ -0,0 +1,12 @@
<!-- Modifier l'HTML -->
<div id="div_entente">
<p>
Commodo duis ea aliqsssuip consequat amet do et enim ea cillum nisi amet. Veniam aliqua consequat id consectetur cillum ullamco incididunt sit ex non adipisicing ullamco cillum laboris. Text important.
</p>
</div>
<div id="div_corps">
<p>
Magna et deserunt enim sit. Sunt aute dolore eu mollit exercitation ullamco est sit in ullamco amet irure commodo eiusmod. Text supprimé en fin de paragraphe.
</p>
</div>

12
public/codes/html/data/mi4ijajpam1isoow79_class_id_child.page Normal file
View File

@@ -0,0 +1,12 @@
<!-- Modifier l'HTML -->
<div eeid="div_entente">
<p>
Commodo duis ea aliquip consequat amet do et enim ea cillum nisi amet. Veniam aliqua consequat id consectetur cillum ullamco incididunt sit ex non adipisicing ullamco cillum laboris. Text important.
</p>
</div>
<div id="div_corps">
<p>
Magna et deserunt enim sit. Sunt aute dolore eu mollit exercitation ullamco est sit in ullamco amet irure commodo eiusmod. Text supprimé en fin de paragraphe.
</p>
</div>

15
public/codes/html/data/mi4j1vui5vicnsjugxf_class_id_child.css Normal file
View File

@@ -0,0 +1,15 @@
/* CSS */
/* créer un élement span..... */
#div_entente p span.important {
color: red;
}
/* créer un élement strike..... */
#div_corps p strike.hide {
display: none;
}
/* ajouter un titre h1 et h2 */
h1, h2 {
background: #000;
color: #FFF;
/* Je test le CSS */
}

13
public/codes/html/data/mi4j1vui5vicnsjugxf_class_id_child.page Normal file
View File

@@ -0,0 +1,13 @@
<!-- Modifier l'HTML -->
<div id="div_entente">
Je test l'HTML
<p>
Commodo duis ea aliquip consequat amet do et enim ea cillum nisi amet. Veniam aliqua consequat id consectetur cillum ullamco incididunt sit ex non adipisicing ullamco cillum laboris. Text important.
</p>
</div>
<div id="div_corps">
<p>
Magna et deserunt enim sit. Sunt aute dolore eu mollit exercitation ullamco est sit in ullamco amet irure commodo eiusmod. Text supprimé en fin de paragraphe.
</p>
</div>

1
public/codes/html/sauts_de_lignes.css Normal file
View File

@@ -0,0 +1 @@
/* Rien a modifier */

3
public/codes/html/sauts_de_lignes.page Normal file
View File

@@ -0,0 +1,3 @@
<p>Incididunt adipisicing pariatur</p> ad ipsum. Fugiat ut tempor ipsum incididunt pariatur nostrud dolor ex incididunt labore voluptate qui consectetur ullamco excepteur. Deserunt occaecat qui dolor ullamco. Dolor aute Lorem occaecat. Ex sit tempor laborum aliquip cupidatat. Excepteur quis dolor anim non exercitation sint eu voluptate ex incididunt fugiat.
Veniam fugiat eu dolore et culpa irure ullamco cillum. Mollit aute proident officia labore ut. Occaecat incididunt deserunt proident aliqua eiusmod id cillum amet consectetur qui commodo dolor et. Cupidatat amet eiusmod ad nostrud voluptate est mollit amet ut aliquip. Incididunt Lorem veniam ex excepteur ex eu reprehenderit cupidatat officia sit commodo laboris excepteur ut. Excepteur anim et occaecat. Laboris sint esse do tempor ut sint ullamco cillum exercitation in consequat voluptate. Eiusmod irure eu culpa in ut culpa voluptate magna pariatur enim officia est consequat sint.

0
public/codes/html/sauts_de_lignes.result Normal file
View File

32
public/codes/html/sauts_de_lignes.txt Normal file
View File

@@ -0,0 +1,32 @@
<link rel="stylesheet" type="text/css" href="./assets/css/style_demo_link.css" />
Utiliser <code>hr</code> et <code>br</code> pour couper dans le texte
Créer également 2 paragraphes <code>p</code>
placer ensuite l'image dans le text
<codescape class="html">
<img src="./assets/img/cat_mimi.jpg">
</codescape>
<img src="./assets/img/cat_mimi.jpg">
La feuille de style <a href="./assets/css/style_demo_link.css">style_demo_link.css</a> doit affecter l'image et l'un des paragraphes créés...
<button type="button" class="collapsible">Open Collapsible</button>
<div class="coll_content">
NB: comme <code>img</code> et d'autres éléments, <code>br</code> et <code>hr</code>... sont des éléments différents de bien d'autres, ils n'ont pas besoin de contenir quelquechos pour créer un élément...
<code>img</code> ou <code>link</code> chargent des contenus (ils se suffisent à eux même)
<code>br</code> et <code>hr</code> créent un saut de ligne, une séparation.
<codescape class="html">
<img src="./assets/img/cat_mimi.jpg">
</codescape>
<img src="./assets/img/cat_mimi.jpg">
<codescape class="html">
<link rel="stylesheet" type="text/css" href="./assets/css/style_demo_link.css" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
</codescape>
<img src="./assets/img/cat_mimi.jpg">
<code>meta</code> ou <code>link</code> changent des comportements contextuels (meta) de la paragraphe
<code>link</code> charge une <a href="./assets/css/style_demo_link.css">feuille de style</a>, la <code>meta</code> ici rend la page "responsive" : le contenu s'adapte sur les petits écran (portables)
Des sites comme <a href="https://www.heymeta.com/" target="_blank">https://www.heymeta.com/</a> permettent d'afficher les meta d'un site/page...
</div>

5
public/codes/html/tuto.css Normal file
View File

@@ -0,0 +1,5 @@
/* Modifier le CSS */
p {
color: red;
margin: 0;
}

1
public/codes/html/tuto_html.css Normal file
View File

@@ -0,0 +1 @@
/* à modifier ou pas */

4
public/codes/html/tuto_html.page Normal file
View File

@@ -0,0 +1,4 @@
<!-- Modifier l'HTML -->
<p>
Modifier le text
</p>

1
public/codes/html/tuto_html.result Normal file
View File

@@ -0,0 +1 @@
Tuto vide

25
public/codes/html/tuto_html.txt Normal file
View File

@@ -0,0 +1,25 @@
En vert le CSS
En orangé l'HTML
En dessous le Rendu
Ensuit une textarea ou expliquer les modifications apportées
( vous pouvez indiquer "RAS" ou autre si le code parle de lui-même )
( n'hésitez pas à ajouter un commentaire sur ce qui a été compliqué/trop dur )
En passant à la question suivante vos fichiers modifiés sont sauvegardés
Mais vous pouvez aussi cliquer sur "sauvegarder" pour forcer la sauvegarde
(un lien vers le fichier s'affichera)
Ou cliquer sur télécharger (pour le récupérer)
Au début de la session un ID_unique est créé
<b>Il faudra le noter lors de la dernière question...</b>
<b>Il servira a retrouver/partager vos réponses !</b>
( indiqué en haut de page )
<img src="/codes/{sub_folder}/img/tuto.png">
( <a href="#unique-id-wrapper">en bas de page</a> on peut charger un questionnaire fini )
( ou en page d'acceuille )
<a href="#unique-id-wrapper"><img src="/codes/{sub_folder}/img/tuto_box.png"></a>
Le TOC permet d'aller d'une question à l'autre directement....
<b>Mais, pour compléter le questionnaire...
il faut répondre à toutes questions dans l'ordre...</b>