Fixed errors and added images

wet-boew · Mar 26, 2024 · c25eaa6 · c25eaa6
1 parent f9e1c96
commit c25eaa6
Show file tree

Hide file tree

Showing 8 changed files with 202 additions and 16 deletions.
diff --git a/common/scaffolding/img/mathml.PNG b/common/scaffolding/img/mathml.PNG
diff --git a/common/scaffolding/img/mercury.gif b/common/scaffolding/img/mercury.gif
diff --git a/common/scaffolding/img/planets.gif b/common/scaffolding/img/planets.gif
diff --git a/common/scaffolding/img/venus.gif b/common/scaffolding/img/venus.gif
diff --git a/common/scaffolding/interactive-content-en.html b/common/scaffolding/interactive-content-en.html
@@ -10,7 +10,7 @@
 	"link": "https://wet-boew.github.io/GCWeb/index-en.html",
 	},
 ],
-"dateModified": "2023-10-19",
+"dateModified": "2024-03-26",
 }
 ---
 
@@ -51,6 +51,31 @@ <h3>Invalid image source</h3>
 &lt;/picture&gt;</code>
 </pre>
 
+<h3>The <code>image</code> element</h3>
+<h3>Valid image source</h3>
+<img src="img/input-image-sample.jpg" alt="Example of a valid image source">
+<pre>
+<code>
+&lt;img src="img/input-image-sample.jpg" alt="Example of a valid image source"&gt;
+</code>
+</pre>
+
+<h3>Empty image source</h3>
+<img src="" alt="Example of an empty image source">
+<pre>
+<code>
+&lt;img src="" alt="Example of an empty image source"&gt;
+</code>
+</pre>
+
+<h3>Invalid image source</h3>
+<img src="img/invalid-image.jpg" alt="Example of an invalid image source">
+<pre>
+<code>
+&lt;img src="img/invalid-image.jpg" alt="Example of an invalid image source"&gt;
+</code>
+</pre>
+
 <h2>The <code>iframe</code> element</h2>
 <iframe src="https://www.canada.ca/en.html" title="The official website of the Government of Canada" width="700px" height="500px"></iframe>
 <pre><code>&lt;iframe src="https://www.canada.ca/en.html" title="The official website of the Government of Canada" width="700px" height="500px"&gt;&lt;/iframe&gt;</code></pre>
@@ -115,14 +140,14 @@ <h2>The <code>track</code> element</h2>
 <video controls>
 	<source src="https://wet-boew.github.io/wet-boew-attachments/videos/video2-en.webm" type="video/webm">
 	<source src="https://wet-boew.github.io/wet-boew-attachments/videos/video2-en.mp4" type="video/mp4">
-	<track src="demo/video2-captions-en.xml" kind="captions" data-type="application/ttml+xml" srclang="en" label="English">
+	<track src="https://wet-boew.github.io/wet-boew/demos/multimedia/demo/video2-captions-en.xml" kind="captions" data-type="application/ttml+xml" srclang="en" label="English">
 	Your browser does not support the video tag.
 </video>
 <pre>
 <code>&lt;video controls&gt;
 &lt;source src="https://wet-boew.github.io/wet-boew-attachments/videos/video2-en.webm" type="video/webm"&gt;
 &lt;source src="https://wet-boew.github.io/wet-boew-attachments/videos/video2-en.mp4" type="video/mp4"&gt;
-&lt;track src="demo/video2-captions-en.xml" kind="captions" data-type="application/ttml+xml" srclang="en" label="English"&gt;
+&lt;track src="https://wet-boew.github.io/wet-boew/demos/multimedia/demo/video2-captions-en.xml" kind="captions" data-type="application/ttml+xml" srclang="en" label="English"&gt;
 Your browser does not support the video tag.
 &lt;/video&gt;</code>
 </pre>
@@ -158,11 +183,11 @@ <h3>The quadratic formula</h3>
 <mo>=</mo>
 <mfrac>
 	<mrow>
-	<mo form="prefix">−</mo> <mi>b</mi>
+	<mo form="prefix">-</mo> <mi>b</mi>
 	<mo>±</mo>
 	<msqrt>
 	<msup> <mi>b</mi> <mn>2</mn> </msup>
-	<mo>−</mo>
+	<mo>-</mo>
 	<mn>4</mn> <mo>⁢</mo> <mi>a</mi> <mo>⁢</mo> <mi>c</mi>
 	</msqrt>
 	</mrow>
@@ -173,6 +198,9 @@ <h3>The quadratic formula</h3>
 </math>
 </p>
 
+<h4>Expected rendering</h4>
+<img src="img/mathml.png" alt="See the previous section 'The quadratic formula' for the image content">
+
 <pre>
 <code>&lt;p&gt;
 &lt;math&gt;
@@ -261,12 +289,12 @@ <h2>The <code>template</code> element</h2>
 
 <p>Click the button below to display the hidden content from the template element.</p>
 
-<button onclick="showContent()">Show hidden content</button>
+<button onclick="showContent()">Append hidden content</button>
 
 <div id="content"></div>
 
 <template>
-<h2>Hidden Image</h2>
+<h3>Hidden image</h3>
 <img src="img/input-image-sample.jpg" width="300" height="200">
 </template>
 
@@ -306,7 +334,7 @@ <h2>The <code>slot</code> element</h2>
 </button>
 
 <template id="slotTemplate">
-<h1><slot name="heading"></slot></h1>
+<h3><slot name="heading"></slot></h3>
 <dl>
 <dt><slot name="term-1"></slot></dt>
 <dd><slot name="description-1"></slot></dd>

diff --git a/common/scaffolding/interactive-content-fr.html b/common/scaffolding/interactive-content-fr.html
@@ -10,7 +10,7 @@
 	"link": "https://wet-boew.github.io/GCWeb/index-fr.html",
 	},
 ],
-	"dateModified": "2023-10-19"
+	"dateModified": "2024-03-26"
 }
 ---
 
@@ -51,6 +51,31 @@ <h3>Source d'image invalide</h3>
 &lt;/picture&gt;</code>
 </pre>
 
+<h3>L'élément <code>image</code></h3>
+<h3>Source d'image valide</h3>
+<img src="img/input-image-sample.jpg" alt="Example of a valid image source">
+<pre>
+<code>
+&lt;img src="img/input-image-sample.jpg" alt="Example of a valid image source"&gt;
+</code>
+</pre>
+
+<h3>Source d'image vide</h3>
+<img src="" alt="Example of an empty image source">
+<pre>
+<code>
+&lt;img src="" alt="Example of an empty image source"&gt;
+</code>
+</pre>
+
+<h3>Source d'image invalide</h3>
+<img src="img/invalid-image.jpg" alt="Example of an invalid image source">
+<pre>
+<code>
+&lt;img src="img/invalid-image.jpg" alt="Example of an invalid image source"&gt;
+</code>
+</pre>
+
 <h2>L'élément <code>iframe</code></h2>
 <iframe src="https://www.canada.ca/fr.html" title="Le site officiel du gouvernement du Canada" width="700px" height="500px"></iframe>
 <pre><code>&lt;iframe src="https://www.canada.ca/fr.html" title="Le site officiel du gouvernement du Canada" width="700px" height="500px"&gt;&lt;/iframe&gt;</code></pre>
@@ -115,14 +140,14 @@ <h2>L'élément <code>track</code></h2>
 <video controls>
 	<source src="https://wet-boew.github.io/wet-boew-attachments/videos/video2-fr.webm" type="video/webm">
 	<source src="https://wet-boew.github.io/wet-boew-attachments/videos/video2-fr.mp4" type="video/mp4">
-	<track src="demo/video2-captions-fr.xml" kind="captions" data-type="application/ttml+xml" srclang="fr" label="French">
+	<track src="https://wet-boew.github.io/wet-boew/demos/multimedia/demo/video2-captions-fr.xml" kind="captions" data-type="application/ttml+xml" srclang="fr" label="French">
 	Votre navigateur ne prend pas en charge la balise vidéo.
 </video>
 <pre>
 <code>&lt;video controls&gt;
 &lt;source src="https://wet-boew.github.io/wet-boew-attachments/videos/video2-fr.webm" type="video/webm"&gt;
 &lt;source src="https://wet-boew.github.io/wet-boew-attachments/videos/video2-fr.mp4" type="video/mp4"&gt;
-&lt;track src="demo/video2-captions-fr.xml" kind="captions" data-type="application/ttml+xml" srclang="fr" label="French"&gt;
+&lt;track src="https://wet-boew.github.io/wet-boew/demos/multimedia/demo/video2-captions-fr.xml" kind="captions" data-type="application/ttml+xml" srclang="fr" label="French"&gt;
 Votre navigateur ne prend pas en charge la balise vidéo.
 &lt;/video&gt;</code>
 </pre>
@@ -172,6 +197,9 @@ <h3>La formule quadratique</h3>
 </math>
 </p>
 
+<h4>Rendu attendu</h4>
+<img src="img/mathml.png" alt="Voir la section précédente 'La formule quadratique' pour le contenu de l'image">
+
 <pre>
 <code>&lt;p&gt;
 &lt;math&gt;
@@ -262,12 +290,12 @@ <h3>L'élément <code>template</code></h3>
 
 <p>Cliquez sur le bouton ci-dessous pour afficher le contenu masqué de l'élément de modèle.</p>
 
-<button onclick="showContent()">Afficher le contenu masqué</button>
+<button onclick="showContent()">Ajouter du contenu masqué</button>
 
 <div id="content"></div>
 
 <template>
-<h2>Image cachée</h2>
+<h3>Image cachée</h3>
 <img src="img/input-image-sample.jpg" width="300" height="200">
 </template>
 
@@ -307,7 +335,7 @@ <h3>L'élément <code>slot</code></h3>
 </button>
 
 <template id="slotTemplate">
-<h1><slot name="heading"></slot></h1>
+<h3><slot name="heading"></slot></h3>
 <dl>
 	<dt><slot name="term-1"></slot></dt>
 	<dd><slot name="description-1"></slot></dd>

diff --git a/common/scaffolding/table-en.html b/common/scaffolding/table-en.html
@@ -6,7 +6,7 @@
 	"breadcrumbs": [
 		{ "title": "GCWeb home", "link": "https://wet-boew.github.io/GCWeb/index-en.html" }
 	],
-	"dateModified": "2023-10-19"
+	"dateModified": "2024-03-26"
 }
 ---
 
@@ -67,12 +67,52 @@ <h3>The <code>th</code> element defines a header cell</h3>
 &lt;/table&gt;</code>
 </pre>
 
+<table>
+<tr>
+	<th>Lorem</th>
+	<th>ipsum</th>
+	<th>dolor</th>
+</tr>
+<tr>
+	<th>Nunc</th>
+	<td> dictum felis at</td>
+	<td> dignissim dictum</td>
+</tr>
+<tr>
+	<th>Curabitur</th>
+	<td> ut leo</td>
+	<td> nisi</td>
+</tr>
+</table>
+<pre>
+	<code>&lt;table&gt;
+	&lt;tr&gt;
+		&lt;th&gt;Lorem ipsum&lt;/th&gt;
+		&lt;th&gt;ipsum&lt;/th&gt;
+		&lt;th&gt;dolor&lt;/th&gt;
+	&lt;/tr&gt;
+	&lt;tr&gt;
+		&lt;th&gt;Nunc&lt;/th&gt;
+		&lt;td&gt;dictum felis at&lt;/td&gt;
+		&lt;td&gt;dignissim dictum&lt;/td&gt;
+	&lt;/tr&gt;
+	&lt;tr&gt;
+		&lt;th&gt;Curabitur&lt;/th&gt;
+		&lt;td&gt;ut leo&lt;/td&gt;
+		&lt;td&gt;nisi&lt;/td&gt;
+	&lt;/tr&gt;
+	&lt;/table&gt;</code>
+	</pre>
+
 <h3>Grouping tabular cells with the <code>thead</code>, <code>tbody</code>, <code>tfoot</code>, <code>colgroup</code> and <code>col</code> elements</h3>
 
 <table>
 <colgroup>
 	<col span="1">
 </colgroup>
+<colgroup>
+	<col span="1">
+</colgroup>
 <thead>
 	<tr>
 		<th>Lorem ipsum dolor sit amet</th>
@@ -117,3 +157,28 @@ <h3>Grouping tabular cells with the <code>thead</code>, <code>tbody</code>, <cod
 &lt;/tfoot&gt;
 &lt;/table&gt;</code>
 </pre>
+
+<h3>Layout tables using the <code>table-layout</code> property</h3>
+
+<table style="table-layout: auto; width: 100%;">
+	<tr>
+		<th>Lorem ipsum dolor sit amet</th>
+		<th>Proin pellentesque sodales cursus</th>
+	</tr>
+	<tr>
+		<td>Nunc dictum felis at dignissim dictum</td>
+		<td>Curabitur ut leo nisi</td>
+	</tr>
+	</table>
+	<pre>
+	<code>&lt;table style="table-layout: auto; width: 100%;"&gt;
+	&lt;tr&gt;
+		&lt;th&gt;Lorem ipsum dolor sit amet&lt;/th&gt;
+		&lt;th&gt;Proin pellentesque sodales cursus&lt;/th&gt;
+	&lt;/tr&gt;
+	&lt;tr&gt;
+		&lt;td&gt;Nunc dictum felis at dignissim dictum&lt;/td&gt;
+		&lt;td&gt;Curabitur ut leo nisi&lt;/td&gt;
+	&lt;/tr&gt;
+	&lt;/table&gt;</code>
+	</pre>
diff --git a/common/scaffolding/table-fr.html b/common/scaffolding/table-fr.html
@@ -6,7 +6,7 @@
 	"breadcrumbs": [
 		{ "title": "GCWeb home", "link": "https://wet-boew.github.io/GCWeb/index-en.html" }
 	],
-	"dateModified": "2023-10-19"
+	"dateModified": "2024-03-26"
 }
 ---
 
@@ -67,12 +67,52 @@ <h3>Le <code>ième</code> élément définit une cellule d'en-tête</h3>
 &lt;/table&gt;</code>
 </pre>
 
+<table>
+	<tr>
+		<th>Lorem</th>
+		<th>ipsum</th>
+		<th>dolor</th>
+	</tr>
+	<tr>
+		<th>Nunc</th>
+		<td> dictum felis at</td>
+		<td> dignissim dictum</td>
+	</tr>
+	<tr>
+		<th>Curabitur</th>
+		<td> ut leo</td>
+		<td> nisi</td>
+	</tr>
+	</table>
+	<pre>
+		<code>&lt;table&gt;
+		&lt;tr&gt;
+			&lt;th&gt;Lorem ipsum&lt;/th&gt;
+			&lt;th&gt;ipsum&lt;/th&gt;
+			&lt;th&gt;dolor&lt;/th&gt;
+		&lt;/tr&gt;
+		&lt;tr&gt;
+			&lt;th&gt;Nunc&lt;/th&gt;
+			&lt;td&gt;dictum felis at&lt;/td&gt;
+			&lt;td&gt;dignissim dictum&lt;/td&gt;
+		&lt;/tr&gt;
+		&lt;tr&gt;
+			&lt;th&gt;Curabitur&lt;/th&gt;
+			&lt;td&gt;ut leo&lt;/td&gt;
+			&lt;td&gt;nisi&lt;/td&gt;
+		&lt;/tr&gt;
+		&lt;/table&gt;</code>
+		</pre>
+
 <h3>Regroupement de cellules tabulaires avec les éléments<code>thead</code>, <code>tbody</code>, <code>tfoot</code>, <code>colgroup</code> et <code>col</code> </h3>
 
 <table>
 <colgroup>
 	<col span="1">
 </colgroup>
+<colgroup>
+	<col span="1">
+</colgroup>
 <thead>
 	<tr>
 		<th>Lorem ipsum dolor sit amet</th>
@@ -117,3 +157,28 @@ <h3>Regroupement de cellules tabulaires avec les éléments<code>thead</code>, <
 &lt;/tfoot&gt;
 &lt;/table&gt;</code>
 </pre>
+
+<h3>Disposer les tableaux à l'aide de la propriété <code>table-layout</code></h3>
+
+<table style="table-layout: auto; width: 100%;">
+	<tr>
+		<th>Lorem ipsum dolor sit amet</th>
+		<th>Proin pellentesque sodales cursus</th>
+	</tr>
+	<tr>
+		<td>Nunc dictum felis at dignissim dictum</td>
+		<td>Curabitur ut leo nisi</td>
+	</tr>
+	</table>
+	<pre>
+	<code>&lt;table style="table-layout: auto; width: 100%;"&gt;
+	&lt;tr&gt;
+		&lt;th&gt;Lorem ipsum dolor sit amet&lt;/th&gt;
+		&lt;th&gt;Proin pellentesque sodales cursus&lt;/th&gt;
+	&lt;/tr&gt;
+	&lt;tr&gt;
+		&lt;td&gt;Nunc dictum felis at dignissim dictum&lt;/td&gt;
+		&lt;td&gt;Curabitur ut leo nisi&lt;/td&gt;
+	&lt;/tr&gt;
+	&lt;/table&gt;</code>
+	</pre>