Skip to content

Commit

Permalink
Embedded Content
Browse files Browse the repository at this point in the history
  • Loading branch information
@BrahimMahadi
BrahimMahadi committed Oct 18, 2023
1 parent 736a4d7 commit 31b4225
Show file tree
Hide file tree
Showing 5 changed files with 292 additions and 33 deletions.
Binary file added img/mercury.gif
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/planets.gif
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/sun.gif
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/venus.gif
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
325 changes: 292 additions & 33 deletions index.md
View file
Original file line number Diff line number Diff line change
@@ -1,39 +1,298 @@
---
title: Typography - Scaffolding
---
---
{
"title": "Typography - Scaffolding",
"title": "Embedded and interactive content - Scaffolding",
"language": "en",
"description": "",
"dateModified": "2023-08-24"
"altLangPage": "interactive-Content-en.html",
"breadcrumbs": [
{ "title": "GCWeb home", "link": "https://wet-boew.github.io/GCWeb/index-en.html" }
],
"dateModified": "2023-09-22"
}
---

<h1>Headings</h1>
<h1>This is an h1 heading element</h1>
<h2>This is an h2 heading element</h2>
<h3>This is an h3 heading element</h3>
<h4>This is an h4 heading element</h4>
<h5>This is an h5 heading element</h5>
<h6>This is an h6 heading element</h6>
<pre><code>
&lt;h1&gt;This is an h1 heading element &lt;/h1&gt;
&lt;h2&gt;This is an h2 heading element &lt;/h2&gt;
&lt;h3&gt;This is an h3 heading element &lt;/h3&gt;
&lt;h4&gt;This is an h4 heading element &lt;/h4&gt;
&lt;h5&gt;This is an h5 heading element &lt;/h5&gt;
&lt;h6&gt;This is an h6 heading element &lt;/h6&gt;
</code></pre>

<h1>Paragraph</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<pre><code>
&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.&lt;/p&gt;
</code></pre>

<h1>Limited width content</h1>
<p>For an example of content with limited width, visit the following link: <a href="https://wet-boew.github.io/GCWeb/templates/content-limit-en.html">Content page - Limited width content</a></p>

<h1>Text level semantics</h1>
<p>For an example of text-level semantics which showcases links and grouping related elements, visit the following link: <a href="https://wet-boew.github.io/GCWeb/common/text-level-semantics/text-level-semantics.html">Text level semantics</a></p>
<h2>The <code>picture</code>, <code>source</code> and <code>img</code> element</h2>
<h3>Valid image source</h3>
<picture>
<source srcset="img/input-image-sample.jpg">
<img src="img/input-image-sample.jpg" alt="Example of a valid image source">
</picture>
<pre>
<code>&lt;picture&gt;
&lt;source srcset="img/input-image-sample.jpg"&gt;
&lt;img src="img/input-image-sample.jpg" alt="Example of a valid image source"&gt;
&lt;/picture&gt;</code>
</pre>

<h3>Empty image source</h3>
<picture>
<source srcset="">
<img src="" alt="Example of an empty image source">
</picture>
<pre>
<code>&lt;picture&gt;
&lt;source srcset=""&gt;
&lt;img src="" alt="Example of an empty image source"&gt;
&lt;/picture&gt;</code>
</pre>

<h3>Invalid image source</h3>
<picture>
<source srcset="img/invalid-image.jpg">
<img src="img/invalid-image.jpg" alt="Example of an invalid image source">
</picture>
<pre>
<code>&lt;picture&gt;
&lt;source srcset="img/invalid-image.jpg"&gt;
&lt;img src="img/invalid-image.jpg" alt="Example of an invalid image source"&gt;
&lt;/picture&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>

<h2>The <code>embed</code> element</h2>
<p>Keep in mind that most modern browsers have deprecated and removed support for browser plug-ins, so relying upon <embed> is generally not wise if you want your site to be operable on the average user's browser.

Accessibility concerns: Use the title attribute on an embed element to label its content so that people navigating with assistive technology such as a screen reader can understand what it contains. The title's value should concisely describe the embedded content. Without a title, they may not be able to determine what its embedded content is. This context shift can be confusing and time-consuming, especially if the embed element contains interactive content like video or audio.</p>

<h3>An embedded image</h3>
<embed type="image/jpg" src="img/input-image-sample.jpg" width="300" height="200">
<pre><code>&lt;embed type="image/jpg" src="img/input-image-sample.jpg" width="300" height="200"&gt;</code></pre>

<h3>An embedded HTML page</h3>
<embed type="text/html" src="https://www.canada.ca/en.html" width="500" height="200">
<pre><code>&lt;embed type="text/html" src="https://www.canada.ca/en.html" width="500" height="200"&gt;</code></pre>

<h3>An embedded video</h3>
<embed type="video/webm" src="https://wet-boew.github.io/wet-boew-attachments/videos/video1-en.webm" width="400" height="300">
<pre><code>&lt;embed type="video/webm" src="https://wet-boew.github.io/wet-boew-attachments/videos/video1-en.webm" width="400" height="300"&gt;</code></pre>

<h2>The <code>object</code> element</h2>
<h3>An embedded image</h3>
<object data="img/input-image-sample.jpg" width="300" height="200"></object>
<pre><code>&lt;object data="img/input-image-sample.jpg" width="300" height="200"&gt;&lt;/object&gt;</code></pre>

<h3>An embedded HTML page</h3>
<object data="https://www.canada.ca/en.html" width="500" height="200"></object>
<pre><code>&lt;object type="text/html" src="https://www.canada.ca/en.html" width="500" height="200"&gt;&lt;/object&gt;</code></pre>

<h3>An embedded video</h3>
<object data="https://wet-boew.github.io/wet-boew-attachments/videos/video1-en.webm" width="400" height="300"></object>
<pre><code>&lt;object data="https://wet-boew.github.io/wet-boew-attachments/videos/video1-en.webm" width="400" height="300"&gt;&lt;/object&gt;</code></pre>

<h2>The <code>video</code> element</h2>
<video controls>
<source src="https://wet-boew.github.io/wet-boew-attachments/videos/video1-en.webm" type="video/webm">
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/video1-en.webm" type="video/webm"&gt;
Your browser does not support the video tag.
&lt;/video&gt;</code>
</pre>

<h2>The <code>audio</code> element</h2>
<audio controls>
<source src="https://www.archive.org/download/RideOfTheValkyries/ride_of_the_valkyries_2.mp3" type="audio/mp3"/>
<source src="https://www.archive.org/download/RideOfTheValkyries/ride_of_the_valkyries_2.ogg" type="audio/ogg"/>
Your browser does not support the audio tag.
</audio>
<pre>
<code>&lt;audio controls&gt;
&lt;source src="https://www.archive.org/download/RideOfTheValkyries/ride_of_the_valkyries_2.mp3" type="audio/mp3"/&gt;
&lt;source src="https://www.archive.org/download/RideOfTheValkyries/ride_of_the_valkyries_2.ogg" type="audio/ogg"/&gt;
Your browser does not support the audio tag.
&lt;/audio&gt;</code>
</pre>

<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">
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;
Your browser does not support the video tag.
&lt;/video&gt;</code>
</pre>

<h2>The <code>map</code> and <code>area</code> elements</h2>

<img src="img/planets.gif" width="145" height="126" alt="Planets"
usemap="#planetmap">

<map name="planetmap">
<area shape="rect" coords="0,0,82,126" href="img/sun.gif" alt="Sun">
<area shape="circle" coords="90,58,3" href="img/mercury.gif" alt="Mercury">
<area shape="circle" coords="124,58,8" href="img/venus.gif" alt="Venus">
</map>

<pre>
<code>&lt;img src="img/planets.gif" width="145" height="126" alt="Planets"
usemap="#planetmap"&gt;

&lt;map name="planetmap"&gt;
&lt;area shape="rect" coords="0,0,82,126" href="img/sun.gif" alt="Sun"&gt;
&lt;area shape="circle" coords="90,58,3" href="img/mercury.gif" alt="Mercury";
&lt;area shape="circle" coords="124,58,8" href="img/venus.gif" alt="Venus";
&lt;map name="planetmap"&gt;
</code>
</pre>

<h2>The <code>details</code> and <code>summary</code> element</h2>

<details>
<summary>Summary</summary>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sagittis metus ligula, aliquet vulputate ligula molestie nec. Aenean dapibus varius dapibus.</p>
</details>
<pre>
<code>&lt;details&gt;
&lt;summary&gt;Summary&lt;/summary&gt;
&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sagittis metus ligula, aliquet vulputate ligula molestie nec. Aenean dapibus varius dapibus.&lt;/p&gt;
&lt;/details&gt;</code>
</pre>

<h2>The <code>dialog</code> element</h2>

<dialog open>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</dialog>
<pre>
<code>&lt;dialog open&gt;
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
&lt;/dialog&gt;</code>
</pre>

<h3>Draw graphics with the <code>canvas</code> element</h3>

<canvas id="myCanvas">
Your browser does not support the canvas tag.
</canvas>

<script>
let canvas = document.getElementById("myCanvas");
let ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, 80, 80);
</script>

<pre>
<code>&lt;canvas id="myCanvas"&gt;
Your browser does not support the canvas tag.
&lt;/canvas&gt;

&lt;script&gt;
let canvas = document.getElementById("myCanvas");
let ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, 80, 80);
&lt;/script&gt;
</code>
</pre>

<h3>The <code>template</code> element</h3>

<p>Click the button below to display the hidden content from the template element.</p>

<button onclick="showContent()">Show hidden content</button>

<div id="content"></div>

<template>
<h2>Hidden Image</h2>
<img src="img/input-image-sample.jpg" width="300" height="200">
</template>

<script>
function showContent() {
let temp = document.getElementsByTagName("template")[0];
let clone = temp.content.cloneNode(true);
let content = document.getElementById("content");
content.appendChild(clone);
}
</script>

<pre>
<code>&lt;button onclick="showContent()"&gt;
Show hidden content
&lt;/button&gt;

&lt;template&gt;
&lt;h2&gt;Hidden Image&lt;/h2&gt;
&lt;img src="img/input-image-sample.jpg" width="300" height="200"&gt;
&lt;/template&gt;

&lt;script&gt;
function showContent() {
let temp = document.getElementsByTagName("template")[0];
let clone = temp.content.cloneNode(true);
let content = document.getElementById("content");
content.appendChild(clone);
}
&lt;/script&gt;
</code>
</pre>

<h3>The <code>slot</code> element</h3>

<template id="slotTemplate">
<h1><slot name="heading"></slot></h1>
<dl>
<dt><slot name="term-1"></slot></dt>
<dd><slot name="description-1"></slot></dd>
<dt><slot name="term-2"></slot></dt>
<dd><slot name="description-2"></slot></dd>
</dl>
</template>

<div class="slotDiv">
<span slot="heading">Lorem ipsum</span>
<span slot="term-1">Dolor sit amet</span>
<span slot="description-1">Aliquam vel consectetur erat</span>
<span slot="term-2">Morbi vitae odio orci</span>
<span slot="description-2">Cras neque ligula</span>
</div>

<script>
var dlTemplate = document.querySelector('#slotTemplate').content;
var div = document.querySelector('.slotDiv');

div.attachShadow({ mode: 'open' }).appendChild(
dlTemplate.cloneNode(true));
</script>

<pre>
<code>&lt;template&gt;
&lt;h1&gt;&lt;slot name="heading"&gt;&lt;/slot&gt;&lt;/h1&gt;
&lt;dl&gt;
&lt;dt&gt;&lt;slot name="term-1"&gt;&lt;/slot&gt;&lt;/dt&gt;
&lt;dd&gt;&lt;slot name="description-1"&gt;&lt;/slot&gt;&lt;/dd&gt;
&lt;dt&gt;&lt;slot name="term-2"&gt;&lt;/slot&gt;&lt;/dt&gt;
&lt;dd&gt;&lt;slot name="description-2"&gt;&lt;/slot&gt;&lt;/dd&gt;
&lt;/dl&gt;
&lt;/template&gt;

&lt;div class="slotDiv"&gt;
&lt;span slot="heading"&gt;Lorem ipsum&lt;/span&gt;
&lt;span slot="term-1"&gt;Dolor sit amet&lt;/span&gt;
&lt;span slot="description-1"&gt;Aliquam vel consectetur erat&lt;/span&gt;
&lt;span slot="term-2"&gt;Morbi vitae odio orci&lt;/span&gt;
&lt;span slot="description-2"&gt;Cras neque ligula&lt;/span&gt;
&lt;/div&gt;

&lt;script&gt;
var dlTemplate = document.querySelector('template').content;
var divs = document.querySelectorAll('.slotDiv');

divs.forEach(function(div){
div.attachShadow({ mode: 'open' }).appendChild(
dlTemplate.cloneNode(true))
});
&lt;/script&gt;
</code>
</pre>

0 comments on commit 31b4225

Please sign in to comment.