Skip to content

Remove remaining active learning and old editors #40832

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 5 commits into from
Aug 22, 2025
Merged

Remove remaining active learning and old editors #40832

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
86254f2
Remove remaining active learning and old editors
chrisdavidmills Aug 21, 2025
26d4787
Merge branch 'main' into a-few-more-learn-consistency-updates
bsmth Aug 22, 2025
01c4a2c
Update files/en-us/learn_web_development/howto/web_mechanics/how_does…
chrisdavidmills Aug 22, 2025
00596ca
Update files/en-us/learn_web_development/core/structuring_content/inc…
chrisdavidmills Aug 22, 2025
f21a3b3
Fixes for bsmth review comments
chrisdavidmills Aug 22, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
165 changes: 18 additions & 147 deletions ...eb_development/core/structuring_content/general_embedding_technologies/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,153 +45,24 @@ Finally, the {{htmlelement("iframe")}} element appeared (along with other ways o

With the history lesson out of the way, let's move on and see how to use some of these.

## Active learning: classic embedding uses

In this article we are going to jump straight into an active learning section, to immediately give you a real idea of just what embedding technologies are useful for. The online world is very familiar with [YouTube](https://www.youtube.com/), but many people don't know about some of the sharing facilities it has available. Let's look at how YouTube allows us to embed a video in any page we like using an {{htmlelement("iframe")}}.

1. First, go to YouTube and find a video you like.
2. Below the video, you'll find a _Share_ button — select this to display the sharing options.
3. Select the _Embed_ button and you'll be given some `<iframe>` code — copy this.
4. Insert it into the _Input_ box below, and see what the result is in the _Output_.

For bonus points, you could also try embedding a [Google Map](https://www.google.com/maps/) in the example:

1. Go to Google Maps and find a map you like.
2. Click on the "Hamburger Menu" (three horizontal lines) in the top left of the UI.
3. Select the _Share or embed map_ option.
4. Select the Embed map option, which will give you some `<iframe>` code — copy this.
5. Insert it into the _Input_ box below, and see what the result is in the _Output_.

If you make a mistake, you can always reset it using the _Reset_ button. If you get really stuck, press the _Show solution_ button to see an answer.

```html hidden
<h2>Live output</h2>

<div class="output" style="min-height: 250px;"></div>

<h2>Editable code</h2>
<p class="a11y-label">
Press Esc to move focus away from the code area (Tab inserts a tab character).
</p>

<textarea
id="code"
class="input"
style="width: 95%;min-height: 100px;"></textarea>

<div class="playable-buttons">
<input id="reset" type="button" value="Reset" />
<input id="solution" type="button" value="Show solution" />
</div>
```

```css hidden
html {
font-family: sans-serif;
}

h2 {
font-size: 16px;
}

.a11y-label {
margin: 0;
text-align: right;
font-size: 0.7rem;
width: 98%;
}

body {
margin: 10px;
background: #f5f9fa;
}
```

```js hidden
const textarea = document.getElementById("code");
const reset = document.getElementById("reset");
const solution = document.getElementById("solution");
const output = document.querySelector(".output");
let code = textarea.value;
let userEntry = textarea.value;

function updateCode() {
output.innerHTML = textarea.value;
}

reset.addEventListener("click", () => {
textarea.value = code;
userEntry = textarea.value;
solutionEntry = htmlSolution;
solution.value = "Show solution";
updateCode();
});

solution.addEventListener("click", () => {
if (solution.value === "Show solution") {
textarea.value = solutionEntry;
solution.value = "Hide solution";
} else {
textarea.value = userEntry;
solution.value = "Show solution";
}
updateCode();
});

const htmlSolution =
'<iframe width="420" height="315" src="https://www.youtube.com/embed/QH2-TGUlwu4" frameborder="0" allowfullscreen>\n</iframe>\n\n<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d37995.65748333395!2d-2.273568166412784!3d53.473310471916975!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x487bae6c05743d3d%3A0xf82fddd1e49fc0a1!2sThe+Lowry!5e0!3m2!1sen!2suk!4v1518171785211" width="600" height="450" frameborder="0" style="border:0" allowfullscreen>\n</iframe>';
let solutionEntry = htmlSolution;

textarea.addEventListener("input", updateCode);
window.addEventListener("load", updateCode);

// stop tab key tabbing out of textarea and
// make it write a tab at the caret position instead

textarea.onkeydown = function (e) {
if (e.code === "Tab") {
e.preventDefault();
insertAtCaret("\t");
}

if (e.code === "Escape") {
textarea.blur();
}
};

function insertAtCaret(text) {
const scrollPos = textarea.scrollTop;
let caretPos = textarea.selectionStart;

const front = textarea.value.substring(0, caretPos);
const back = textarea.value.substring(
textarea.selectionEnd,
textarea.value.length,
);
textarea.value = front + text + back;
caretPos += text.length;
textarea.selectionStart = caretPos;
textarea.selectionEnd = caretPos;
textarea.focus();
textarea.scrollTop = scrollPos;
}

// Update the saved userCode every time the user updates the text area code

textarea.onkeyup = function () {
// We only want to save the state when the user code is being shown,
// not the solution, so that solution is not saved over the user code
if (solution.value === "Show solution") {
userEntry = textarea.value;
} else {
solutionEntry = textarea.value;
}

updateCode();
};
```

{{ EmbedLiveSample('Active_learning_classic_embedding_uses', 700, 600) }}
## Playing with classic embedding uses

In this article we are going to jump straight into an exercise, to immediately give you an idea of what embedding technologies are useful for. The online world is very familiar with [YouTube](https://www.youtube.com/), but many people don't know about some of the sharing facilities it has available.

1. First of all, open the [MDN Playground](/en-US/play).
2. Now we'll look at how YouTube allows us to embed a video in any page we like using an {{htmlelement("iframe")}}.
1. Go to YouTube and find a video you like.
2. Below the video, you'll find a _Share_ button — select this to display the sharing options.
3. Select the _Embed_ button and you'll be given some `<iframe>` code — copy this.
4. Paste it into the _HTML_ pane in the Playground, and see what the result is in the output.
3. For bonus points, you could also try embedding a [Google Map](https://www.google.com/maps/) in the Playground:
1. Go to Google Maps and find a map you like.
2. Click on the "hamburger menu" (three horizontal lines) in the top left of the UI.
3. Select the _Share or embed map_ option.
4. Select the _Embed a map_ option, which will give you some `<iframe>` code — copy it.
5. Paste it into the _HTML_ pane in the Playground, and see what the result is in the output.

If you make a mistake, you can always reset it using the _Reset_ button in the Playground.

## iframes in detail

Expand Down
167 changes: 28 additions & 139 deletions ...development/core/structuring_content/including_vector_graphics_in_html/index.md
View file
Open in desktop
Copy link
Member

@bsmth bsmth Aug 22, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Somewhere on this page, would write "SVG is easy to hand code" as "SVG is easy to hand-code"

Copy link
Contributor Author

@chrisdavidmills chrisdavidmills Aug 22, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

done

Original file line number Diff line number Diff line change
Expand Up @@ -73,7 +73,7 @@ This creates the following output:

{{ EmbedLiveSample('What_is_SVG', 300, 240, "", "") }}

From the example above, you may get the impression that SVG is easy to hand code. Yes, you can hand code simple SVG in a text editor, but for a complex image this quickly starts to get very difficult. For creating SVG images, most people use a vector graphics editor like [Inkscape](https://inkscape.org/) or [Illustrator](https://en.wikipedia.org/wiki/Adobe_Illustrator). These packages allow you to create a variety of illustrations using various graphics tools, and create approximations of photos (for example Inkscape's Trace Bitmap feature.)
From the example above, you may get the impression that SVG is easy to hand-code. Yes, you can hand-code simple SVG in a text editor, but for a complex image this quickly starts to get very difficult. For creating SVG images, most people use a vector graphics editor like [Inkscape](https://inkscape.org/) or [Illustrator](https://en.wikipedia.org/wiki/Adobe_Illustrator). These packages allow you to create a variety of illustrations using various graphics tools, and create approximations of photos (for example Inkscape's Trace Bitmap feature.)

SVG has some additional advantages besides those described so far:

Expand Down Expand Up @@ -183,146 +183,35 @@ This is definitely not the best method to choose:
- `iframe`s do have a fallback mechanism, as you can see, but browsers only display the fallback if they lack support for `iframe`s altogether.
- Moreover, unless the SVG and your current webpage have the same {{glossary('origin')}}, you cannot use JavaScript on your main webpage to manipulate the SVG.

## Active Learning: Playing with SVG

In this active learning section we'd like you to have a go at playing with some SVG for fun. In the _Input_ section below you'll see that we've already provided you with some samples to get you started. You can also go to the [SVG Element Reference](/en-US/docs/Web/SVG/Reference/Element), find out more details about other toys you can use in SVG, and try those out too. This section is all about practising your research skills, and having some fun.

If you get stuck and can't get your code working, you can always reset it using the _Reset_ button.

```html hidden
<h2>Live output</h2>

<div class="output" style="min-height: 50px;"></div>

<h2>Editable code</h2>
<p class="a11y-label">
Press Esc to move focus away from the code area (Tab inserts a tab character).
</p>

<textarea id="code" class="input" style="width: 95%;min-height: 200px;">
<svg width="100%" height="100%">
<rect width="100%" height="100%" fill="red" />
<circle cx="100%" cy="100%" r="150" fill="blue" stroke="black" />
<polygon points="120,0 240,225 0,225" fill="green"/>
<text x="50" y="100" font-family="Verdana" font-size="55"
fill="white" stroke="black" stroke-width="2">
Hello!
</text>
</svg>
</textarea>

<div class="playable-buttons">
<input id="reset" type="button" value="Reset" />
<input id="solution" type="button" value="Show solution" disabled />
</div>
```

```css hidden
html {
font-family: sans-serif;
}

h2 {
font-size: 16px;
}

.a11y-label {
margin: 0;
text-align: right;
font-size: 0.7rem;
width: 98%;
}

body {
margin: 10px;
background: #f5f9fa;
}
```

```js hidden
const textarea = document.getElementById("code");
const reset = document.getElementById("reset");
const solution = document.getElementById("solution");
const output = document.querySelector(".output");
let code = textarea.value;
let userEntry = textarea.value;

function updateCode() {
output.innerHTML = textarea.value;
}

reset.addEventListener("click", () => {
textarea.value = code;
userEntry = textarea.value;
solutionEntry = htmlSolution;
solution.value = "Show solution";
updateCode();
});

solution.addEventListener("click", () => {
if (solution.value === "Show solution") {
textarea.value = solutionEntry;
solution.value = "Hide solution";
} else {
textarea.value = userEntry;
solution.value = "Show solution";
}
updateCode();
});

const htmlSolution = "";
let solutionEntry = htmlSolution;

textarea.addEventListener("input", updateCode);
window.addEventListener("load", updateCode);

// stop tab key tabbing out of textarea and
// make it write a tab at the caret position instead

textarea.onkeydown = (e) => {
if (e.code === "Tab") {
e.preventDefault();
insertAtCaret("\t");
}

if (e.code === "Escape") {
textarea.blur();
}
};

function insertAtCaret(text) {
const scrollPos = textarea.scrollTop;
let caretPos = textarea.selectionStart;
const front = textarea.value.substring(0, caretPos);
const back = textarea.value.substring(
textarea.selectionEnd,
textarea.value.length,
);

textarea.value = front + text + back;
caretPos += text.length;
textarea.selectionStart = caretPos;
textarea.selectionEnd = caretPos;
textarea.focus();
textarea.scrollTop = scrollPos;
}

// Update the saved userCode every time the user updates the text area code

textarea.onkeyup = () => {
// We only want to save the state when the user code is being shown,
// not the solution, so that solution is not saved over the user code
if (solution.value === "Show solution") {
userEntry = textarea.value;
} else {
solutionEntry = textarea.value;
}

updateCode();
};
## Playing with SVG

In this exercise we'd like you to have a go at playing with some SVG. Press the **Play** button to open the next example in the MDN Playground and edit it there.

Go to the [SVG Element Reference](/en-US/docs/Web/SVG/Reference/Element) to see what other elements you can use that bring a lot of built-in functionality.
There are other shapes you can try, like ellipses, or you can experiment with [patterns](/en-US/docs/Web/SVG/Reference/Element/pattern), or even [filter effects](/en-US/docs/Web/SVG/Reference/Element/filter).
This section is all about your research skills, trying something new, and having some fun.

If you get stuck and can't get your code working, you can always reset it using the _Reset_ button in the Playground.

```html live-sample___playing-with-svg
<svg width="100%" height="100%">
<rect width="100%" height="100%" fill="red" />
<circle cx="100%" cy="100%" r="150" fill="blue" stroke="black" />
<polygon points="120,0 240,225 0,225" fill="green" />
<text
x="50"
y="100"
font-family="Verdana"
font-size="55"
fill="white"
stroke="black"
stroke-width="2">
Hello!
</text>
</svg>
```

{{ EmbedLiveSample('Active_Learning_Playing_with_SVG', 700, 540) }}
{{ EmbedLiveSample('playing-with-SVG', 700, 300) }}

## Summary

Expand Down
14 changes: 7 additions & 7 deletions .../en-us/learn_web_development/core/structuring_content/webpage_metadata/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,9 +71,9 @@ We've already seen the {{htmlelement("title")}} element in action — this can b
- The {{htmlelement("Heading_Elements", "h1")}} element appears on the page when loaded in the browser — generally this should be used once per page, to mark up the title of your page content (the story title, or news headline, or whatever is appropriate to your usage.)
- The {{htmlelement("title")}} element is metadata that represents the title of the overall HTML document (not the document's content.)

### Active learning: Inspecting an example
### Inspecting an example

1. To start off this active learning, we'd like you to go to our GitHub repo and download a copy of our [title-example.html page](https://github.com/mdn/learning-area/blob/main/html/introduction-to-html/the-html-head/title-example.html). To do this, either
1. In this exercise, we'd like you to start off by going to our GitHub repo and downloading a copy of our [title-example.html page](https://github.com/mdn/learning-area/blob/main/html/introduction-to-html/the-html-head/title-example.html). To do this, either
1. Copy and paste the code out of the page and into a new text file in your code editor, then save it in a sensible place.
2. Press the "Raw" button on the GitHub page, which causes the raw code to appear (possibly in a new browser tab). Next, choose your browser's _Save Page As…_ menu and choose a sensible place to save the file.

Expand Down Expand Up @@ -114,7 +114,7 @@ If you set your character encoding to `ISO-8859-1`, for example (the character s
> [!NOTE]
> Some browsers (like Chrome) automatically fix incorrect encodings, so depending on what browser you use, you may not see this problem. You should still set an encoding of `utf-8` on your page anyway to avoid any potential problems in other browsers.

### Active learning: Experiment with character encoding
### Experimenting with character encoding

To try this out, revisit the simple HTML template you obtained in the previous section on `<title>` (the [title-example.html page](https://github.com/mdn/learning-area/blob/main/html/introduction-to-html/the-html-head/title-example.html)), try changing the meta charset value to `ISO-8859-1`, and add the Japanese to your page. This is the code we used:

Expand Down Expand Up @@ -144,9 +144,9 @@ Specifying an author is beneficial in many ways: it is useful to be able to unde

Specifying a description that includes keywords relating to the content of your page is useful as it has the potential to make your page appear higher in relevant searches performed in search engines (such activities are termed [Search Engine Optimization](/en-US/docs/Glossary/SEO), or {{glossary("SEO")}}.)

### Active learning: The description's use in search engines
### Exploring the description's use in search engines

The description is also used on search engine result pages. Let's go through an exercise to explore this
The description is also used on search engine result pages. Let's go through an exercise to explore this:

1. Go to the [front page of The Mozilla Developer Network](/en-US/).
2. View the page's source (right-click on the page, choose _View Page Source_ from the context menu.)
Expand Down Expand Up @@ -269,9 +269,9 @@ Just about all websites you'll use in the modern day will employ {{glossary("CSS
> [!NOTE]
> The `<script>` element may look like a {{glossary("void element")}}, but it's not, and so needs a closing tag. Instead of pointing to an external script file, you can also choose to put your script inside the `<script>` element.

### Active learning: applying CSS and JavaScript to a page
### Your turn: Applying CSS and JavaScript to a page

1. To start this active learning, grab a copy of our [meta-example.html](https://github.com/mdn/learning-area/blob/main/html/introduction-to-html/the-html-head/meta-example.html), [script.js](https://github.com/mdn/learning-area/blob/main/html/introduction-to-html/the-html-head/script.js) and [style.css](https://github.com/mdn/learning-area/blob/main/html/introduction-to-html/the-html-head/style.css) files, and save them on your local computer in the same directory. Make sure they are saved with the correct names and file extensions.
1. To start this exercise, grab a copy of our [meta-example.html](https://github.com/mdn/learning-area/blob/main/html/introduction-to-html/the-html-head/meta-example.html), [script.js](https://github.com/mdn/learning-area/blob/main/html/introduction-to-html/the-html-head/script.js) and [style.css](https://github.com/mdn/learning-area/blob/main/html/introduction-to-html/the-html-head/style.css) files, and save them on your local computer in the same directory. Make sure they are saved with the correct names and file extensions.
2. Open the HTML file in both your browser, and your text editor.
3. By following the information given above, add {{htmlelement("link")}} and {{htmlelement("script")}} elements to your HTML, so that your CSS and JavaScript are applied to your HTML.

Expand Down
Loading