Skip to content

Commit f33de00

Browse files
chrisdavidmillsbsmth
chrisdavidmills
and
bsmth
authored
Remove remaining active learning and old editors (#40832)
* Remove remaining active learning and old editors * Update files/en-us/learn_web_development/howto/web_mechanics/how_does_the_internet_work/index.md Co-authored-by: Brian Smith <[email protected]> * Update files/en-us/learn_web_development/core/structuring_content/including_vector_graphics_in_html/index.md Co-authored-by: Brian Smith <[email protected]> * Fixes for bsmth review comments --------- Co-authored-by: Brian Smith <[email protected]>
1 parent fdaaf0e commit f33de00

File tree

19 files changed

+84
-352
lines changed
  • files/en-us

19 files changed

+84
-352
lines changed

‎files/en-us/learn_web_development/core/structuring_content/general_embedding_technologies/index.md‎

Lines changed: 18 additions & 147 deletions
Original file line numberDiff line numberDiff line change
@@ -45,153 +45,24 @@ Finally, the {{htmlelement("iframe")}} element appeared (along with other ways o
4545

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

48-
## Active learning: classic embedding uses
49-
50-
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")}}.
51-
52-
1. First, go to YouTube and find a video you like.
53-
2. Below the video, you'll find a _Share_ button — select this to display the sharing options.
54-
3. Select the _Embed_ button and you'll be given some `<iframe>` code — copy this.
55-
4. Insert it into the _Input_ box below, and see what the result is in the _Output_.
56-
57-
For bonus points, you could also try embedding a [Google Map](https://www.google.com/maps/) in the example:
58-
59-
1. Go to Google Maps and find a map you like.
60-
2. Click on the "Hamburger Menu" (three horizontal lines) in the top left of the UI.
61-
3. Select the _Share or embed map_ option.
62-
4. Select the Embed map option, which will give you some `<iframe>` code — copy this.
63-
5. Insert it into the _Input_ box below, and see what the result is in the _Output_.
64-
65-
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.
66-
67-
```html hidden
68-
<h2>Live output</h2>
69-
70-
<div class="output" style="min-height: 250px;"></div>
71-
72-
<h2>Editable code</h2>
73-
<p class="a11y-label">
74-
Press Esc to move focus away from the code area (Tab inserts a tab character).
75-
</p>
76-
77-
<textarea
78-
id="code"
79-
class="input"
80-
style="width: 95%;min-height: 100px;"></textarea>
81-
82-
<div class="playable-buttons">
83-
<input id="reset" type="button" value="Reset" />
84-
<input id="solution" type="button" value="Show solution" />
85-
</div>
86-
```
87-
88-
```css hidden
89-
html {
90-
font-family: sans-serif;
91-
}
92-
93-
h2 {
94-
font-size: 16px;
95-
}
96-
97-
.a11y-label {
98-
margin: 0;
99-
text-align: right;
100-
font-size: 0.7rem;
101-
width: 98%;
102-
}
103-
104-
body {
105-
margin: 10px;
106-
background: #f5f9fa;
107-
}
108-
```
109-
110-
```js hidden
111-
const textarea = document.getElementById("code");
112-
const reset = document.getElementById("reset");
113-
const solution = document.getElementById("solution");
114-
const output = document.querySelector(".output");
115-
let code = textarea.value;
116-
let userEntry = textarea.value;
117-
118-
function updateCode() {
119-
output.innerHTML = textarea.value;
120-
}
121-
122-
reset.addEventListener("click", () => {
123-
textarea.value = code;
124-
userEntry = textarea.value;
125-
solutionEntry = htmlSolution;
126-
solution.value = "Show solution";
127-
updateCode();
128-
});
129-
130-
solution.addEventListener("click", () => {
131-
if (solution.value === "Show solution") {
132-
textarea.value = solutionEntry;
133-
solution.value = "Hide solution";
134-
} else {
135-
textarea.value = userEntry;
136-
solution.value = "Show solution";
137-
}
138-
updateCode();
139-
});
140-
141-
const htmlSolution =
142-
'<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>';
143-
let solutionEntry = htmlSolution;
144-
145-
textarea.addEventListener("input", updateCode);
146-
window.addEventListener("load", updateCode);
147-
148-
// stop tab key tabbing out of textarea and
149-
// make it write a tab at the caret position instead
150-
151-
textarea.onkeydown = function (e) {
152-
if (e.code === "Tab") {
153-
e.preventDefault();
154-
insertAtCaret("\t");
155-
}
156-
157-
if (e.code === "Escape") {
158-
textarea.blur();
159-
}
160-
};
161-
162-
function insertAtCaret(text) {
163-
const scrollPos = textarea.scrollTop;
164-
let caretPos = textarea.selectionStart;
165-
166-
const front = textarea.value.substring(0, caretPos);
167-
const back = textarea.value.substring(
168-
textarea.selectionEnd,
169-
textarea.value.length,
170-
);
171-
textarea.value = front + text + back;
172-
caretPos += text.length;
173-
textarea.selectionStart = caretPos;
174-
textarea.selectionEnd = caretPos;
175-
textarea.focus();
176-
textarea.scrollTop = scrollPos;
177-
}
178-
179-
// Update the saved userCode every time the user updates the text area code
180-
181-
textarea.onkeyup = function () {
182-
// We only want to save the state when the user code is being shown,
183-
// not the solution, so that solution is not saved over the user code
184-
if (solution.value === "Show solution") {
185-
userEntry = textarea.value;
186-
} else {
187-
solutionEntry = textarea.value;
188-
}
189-
190-
updateCode();
191-
};
192-
```
193-
194-
{{ EmbedLiveSample('Active_learning_classic_embedding_uses', 700, 600) }}
48+
## Playing with classic embedding uses
49+
50+
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.
51+
52+
1. First of all, open the [MDN Playground](/en-US/play).
53+
2. Now we'll look at how YouTube allows us to embed a video in any page we like using an {{htmlelement("iframe")}}.
54+
1. Go to YouTube and find a video you like.
55+
2. Below the video, you'll find a _Share_ button — select this to display the sharing options.
56+
3. Select the _Embed_ button and you'll be given some `<iframe>` code — copy this.
57+
4. Paste it into the _HTML_ pane in the Playground, and see what the result is in the output.
58+
3. For bonus points, you could also try embedding a [Google Map](https://www.google.com/maps/) in the Playground:
59+
1. Go to Google Maps and find a map you like.
60+
2. Click on the "hamburger menu" (three horizontal lines) in the top left of the UI.
61+
3. Select the _Share or embed map_ option.
62+
4. Select the _Embed a map_ option, which will give you some `<iframe>` code — copy it.
63+
5. Paste it into the _HTML_ pane in the Playground, and see what the result is in the output.
64+
65+
If you make a mistake, you can always reset it using the _Reset_ button in the Playground.
19566

19667
## iframes in detail
19768

‎files/en-us/learn_web_development/core/structuring_content/including_vector_graphics_in_html/index.md‎

Lines changed: 28 additions & 139 deletions
Original file line numberDiff line numberDiff line change
@@ -73,7 +73,7 @@ This creates the following output:
7373

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

76-
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.)
76+
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.)
7777

7878
SVG has some additional advantages besides those described so far:
7979

@@ -183,146 +183,35 @@ This is definitely not the best method to choose:
183183
- `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.
184184
- 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.
185185

186-
## Active Learning: Playing with SVG
187-
188-
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.
189-
190-
If you get stuck and can't get your code working, you can always reset it using the _Reset_ button.
191-
192-
```html hidden
193-
<h2>Live output</h2>
194-
195-
<div class="output" style="min-height: 50px;"></div>
196-
197-
<h2>Editable code</h2>
198-
<p class="a11y-label">
199-
Press Esc to move focus away from the code area (Tab inserts a tab character).
200-
</p>
201-
202-
<textarea id="code" class="input" style="width: 95%;min-height: 200px;">
203-
<svg width="100%" height="100%">
204-
<rect width="100%" height="100%" fill="red" />
205-
<circle cx="100%" cy="100%" r="150" fill="blue" stroke="black" />
206-
<polygon points="120,0 240,225 0,225" fill="green"/>
207-
<text x="50" y="100" font-family="Verdana" font-size="55"
208-
fill="white" stroke="black" stroke-width="2">
209-
Hello!
210-
</text>
211-
</svg>
212-
</textarea>
213-
214-
<div class="playable-buttons">
215-
<input id="reset" type="button" value="Reset" />
216-
<input id="solution" type="button" value="Show solution" disabled />
217-
</div>
218-
```
219-
220-
```css hidden
221-
html {
222-
font-family: sans-serif;
223-
}
224-
225-
h2 {
226-
font-size: 16px;
227-
}
228-
229-
.a11y-label {
230-
margin: 0;
231-
text-align: right;
232-
font-size: 0.7rem;
233-
width: 98%;
234-
}
235-
236-
body {
237-
margin: 10px;
238-
background: #f5f9fa;
239-
}
240-
```
241-
242-
```js hidden
243-
const textarea = document.getElementById("code");
244-
const reset = document.getElementById("reset");
245-
const solution = document.getElementById("solution");
246-
const output = document.querySelector(".output");
247-
let code = textarea.value;
248-
let userEntry = textarea.value;
249-
250-
function updateCode() {
251-
output.innerHTML = textarea.value;
252-
}
253-
254-
reset.addEventListener("click", () => {
255-
textarea.value = code;
256-
userEntry = textarea.value;
257-
solutionEntry = htmlSolution;
258-
solution.value = "Show solution";
259-
updateCode();
260-
});
261-
262-
solution.addEventListener("click", () => {
263-
if (solution.value === "Show solution") {
264-
textarea.value = solutionEntry;
265-
solution.value = "Hide solution";
266-
} else {
267-
textarea.value = userEntry;
268-
solution.value = "Show solution";
269-
}
270-
updateCode();
271-
});
272-
273-
const htmlSolution = "";
274-
let solutionEntry = htmlSolution;
275-
276-
textarea.addEventListener("input", updateCode);
277-
window.addEventListener("load", updateCode);
278-
279-
// stop tab key tabbing out of textarea and
280-
// make it write a tab at the caret position instead
281-
282-
textarea.onkeydown = (e) => {
283-
if (e.code === "Tab") {
284-
e.preventDefault();
285-
insertAtCaret("\t");
286-
}
287-
288-
if (e.code === "Escape") {
289-
textarea.blur();
290-
}
291-
};
292-
293-
function insertAtCaret(text) {
294-
const scrollPos = textarea.scrollTop;
295-
let caretPos = textarea.selectionStart;
296-
const front = textarea.value.substring(0, caretPos);
297-
const back = textarea.value.substring(
298-
textarea.selectionEnd,
299-
textarea.value.length,
300-
);
301-
302-
textarea.value = front + text + back;
303-
caretPos += text.length;
304-
textarea.selectionStart = caretPos;
305-
textarea.selectionEnd = caretPos;
306-
textarea.focus();
307-
textarea.scrollTop = scrollPos;
308-
}
309-
310-
// Update the saved userCode every time the user updates the text area code
311-
312-
textarea.onkeyup = () => {
313-
// We only want to save the state when the user code is being shown,
314-
// not the solution, so that solution is not saved over the user code
315-
if (solution.value === "Show solution") {
316-
userEntry = textarea.value;
317-
} else {
318-
solutionEntry = textarea.value;
319-
}
320-
321-
updateCode();
322-
};
186+
## Playing with SVG
187+
188+
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.
189+
190+
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.
191+
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).
192+
This section is all about your research skills, trying something new, and having some fun.
193+
194+
If you get stuck and can't get your code working, you can always reset it using the _Reset_ button in the Playground.
195+
196+
```html live-sample___playing-with-svg
197+
<svg width="100%" height="100%">
198+
<rect width="100%" height="100%" fill="red" />
199+
<circle cx="100%" cy="100%" r="150" fill="blue" stroke="black" />
200+
<polygon points="120,0 240,225 0,225" fill="green" />
201+
<text
202+
x="50"
203+
y="100"
204+
font-family="Verdana"
205+
font-size="55"
206+
fill="white"
207+
stroke="black"
208+
stroke-width="2">
209+
Hello!
210+
</text>
211+
</svg>
323212
```
324213

325-
{{ EmbedLiveSample('Active_Learning_Playing_with_SVG', 700, 540) }}
214+
{{ EmbedLiveSample('playing-with-SVG', 700, 300) }}
326215

327216
## Summary
328217

‎files/en-us/learn_web_development/core/structuring_content/webpage_metadata/index.md‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -71,9 +71,9 @@ We've already seen the {{htmlelement("title")}} element in action — this can b
7171
- 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.)
7272
- The {{htmlelement("title")}} element is metadata that represents the title of the overall HTML document (not the document's content.)
7373

74-
### Active learning: Inspecting an example
74+
### Inspecting an example
7575

76-
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
76+
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
7777
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.
7878
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.
7979

@@ -114,7 +114,7 @@ If you set your character encoding to `ISO-8859-1`, for example (the character s
114114
> [!NOTE]
115115
> 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.
116116
117-
### Active learning: Experiment with character encoding
117+
### Experimenting with character encoding
118118

119119
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:
120120

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

145145
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")}}.)
146146

147-
### Active learning: The description's use in search engines
147+
### Exploring the description's use in search engines
148148

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

151151
1. Go to the [front page of The Mozilla Developer Network](/en-US/).
152152
2. View the page's source (right-click on the page, choose _View Page Source_ from the context menu.)
@@ -269,9 +269,9 @@ Just about all websites you'll use in the modern day will employ {{glossary("CSS
269269
> [!NOTE]
270270
> 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.
271271
272-
### Active learning: applying CSS and JavaScript to a page
272+
### Your turn: Applying CSS and JavaScript to a page
273273

274-
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.
274+
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.
275275
2. Open the HTML file in both your browser, and your text editor.
276276
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.
277277

0 commit comments

Comments
 (0)