[RU] Another live samples fixes (#2852)

27 files changed, 335 insertions, 58 deletions

diff --git a/files/ru/learn/forms/how_to_structure_a_web_form/example/index.md b/files/ru/learn/forms/how_to_structure_a_web_form/example/index.md
new file mode 100644
index 0000000000..3e424e63be
--- /dev/null
+++ b/files/ru/learn/forms/how_to_structure_a_web_form/example/index.md
@@ -0,0 +1,181 @@
+---
+title: Example
+slug: Learn/Forms/How_to_structure_a_web_form/Example
+tags:
+  - Beginner
+  - CSS
+  - Example
+  - Guide
+  - HTML
+  - Intro
+  - Reference
+---
+This the example for a basic payment form for the article [How to structure an HTML form](/en-US/docs/Learn/Forms/How_to_structure_a_web_form).
+
+## A payment form
+
+### HTML Content
+
+```html
+<form method="post">
+  <h1>Payment form</h1>
+  <p>Required fields are followed by <strong><abbr title="required">*</abbr></strong>.</p>
+  <section>
+    <h2>Contact information</h2>
+    <fieldset>
+      <legend>Title</legend>
+      <ul>
+        <li>
+          <label for="title_1">
+            <input type="radio" id="title_1" name="title" value="A">
+            Ace
+          </label>
+        </li>
+        <li>
+          <label for="title_2">
+            <input type="radio" id="title_2" name="title" value="K" >
+            King
+          </label>
+        </li>
+        <li>
+          <label for="title_3">
+            <input type="radio" id="title_3" name="title" value="Q">
+            Queen
+          </label>
+        </li>
+      </ul>
+    </fieldset>
+    <p>
+      <label for="name">
+        <span>Name: </span>
+        <strong><abbr title="required">*</abbr></strong>
+      </label>
+      <input type="text" id="name" name="username">
+    </p>
+    <p>
+      <label for="mail">
+        <span>E-mail: </span>
+        <strong><abbr title="required">*</abbr></strong>
+      </label>
+      <input type="email" id="mail" name="usermail">
+    </p>
+    <p>
+      <label for="pwd">
+        <span>Password: </span>
+        <strong><abbr title="required">*</abbr></strong>
+      </label>
+      <input type="password" id="pwd" name="password">
+    </p>
+  </section>
+  <section>
+    <h2>Payment information</h2>
+    <p>
+      <label for="card">
+        <span>Card type:</span>
+      </label>
+      <select id="card" name="usercard">
+        <option value="visa">Visa</option>
+        <option value="mc">Mastercard</option>
+        <option value="amex">American Express</option>
+      </select>
+    </p>
+    <p>
+      <label for="number">
+        <span>Card number:</span>
+        <strong><abbr title="required">*</abbr></strong>
+      </label>
+      <input type="tel" id="number" name="cardnumber">
+    </p>
+    <p>
+      <label for="date">
+        <span>Expiration date:</span>
+        <strong><abbr title="required">*</abbr></strong>
+        <em>formatted as mm/dd/yyyy</em>
+      </label>
+      <input type="date" id="date" name="expiration">
+    </p>
+  </section>
+  <section>
+    <p> <button type="submit">Validate the payment</button> </p>
+  </section>
+</form>
+```
+
+### CSS Content
+
+```css
+h1 {
+    margin-top: 0;
+}
+
+ul {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+
+form {
+    margin: 0 auto;
+    width: 400px;
+    padding: 1em;
+    border: 1px solid #CCC;
+    border-radius: 1em;
+}
+
+div+div {
+    margin-top: 1em;
+}
+
+label span {
+    display: inline-block;
+    width: 120px;
+    text-align: right;
+}
+
+input, textarea {
+    font: 1em sans-serif;
+    width: 250px;
+    box-sizing: border-box;
+    border: 1px solid #999;
+}
+
+input[type=checkbox], input[type=radio] {
+    width: auto;
+    border: none;
+}
+
+input:focus, textarea:focus {
+    border-color: #000;
+}
+
+textarea {
+    vertical-align: top;
+    height: 5em;
+    resize: vertical;
+}
+
+fieldset {
+    width: 250px;
+    box-sizing: border-box;
+    margin-left: 136px;
+    border: 1px solid #999;
+}
+
+button {
+    margin: 20px 0 0 124px;
+}
+
+label {
+  position: relative;
+}
+
+label em {
+  position: absolute;
+  right: 5px;
+  top: 20px;
+}
+```
+
+### Result
+
+{{ EmbedLiveSample('A_payment_form', '100%', 620) }}
diff --git a/files/ru/learn/forms/your_first_form/example/index.md b/files/ru/learn/forms/your_first_form/example/index.md
new file mode 100644
index 0000000000..8066fc72d3
--- /dev/null
+++ b/files/ru/learn/forms/your_first_form/example/index.md
@@ -0,0 +1,114 @@
+---
+title: Example
+slug: Learn/Forms/Your_first_form/Example
+tags:
+  - Beginner
+  - CodingScripting
+  - Example
+  - Forms
+  - Guide
+  - HTML
+  - Learn
+  - Web
+---
+This is the example code for the article [Your first HTML form](/en-US/docs/Learn/Forms/Your_first_form).
+
+## A simple form
+
+### HTML Content
+
+```html
+<form action="/my-handling-form-page" method="post">
+  <div>
+    <label for="name">Name:</label>
+    <input type="text" id="name" name="user_name">
+  </div>
+
+  <div>
+    <label for="mail">E-mail:</label>
+    <input type="email" id="mail" name="user_email">
+  </div>
+
+  <div>
+    <label for="msg">Message:</label>
+    <textarea id="msg" name="user_message"></textarea>
+  </div>
+
+  <div class="button">
+    <button type="submit">Send your message</button>
+  </div>
+</form>
+```
+
+### CSS Content
+
+```css
+form {
+  /* Just to center the form on the page */
+  margin: 0 auto;
+  width: 400px;
+
+  /* To see the limits of the form */
+  padding: 1em;
+  border: 1px solid #CCC;
+  border-radius: 1em;
+}
+
+div + div {
+  margin-top: 1em;
+}
+
+label {
+  /* To make sure that all label have the same size and are properly align */
+  display: inline-block;
+  width: 90px;
+  text-align: right;
+}
+
+input, textarea {
+  /* To make sure that all text field have the same font settings
+     By default, textarea are set with a monospace font */
+  font: 1em sans-serif;
+
+  /* To give the same size to all text field */
+  width: 300px;
+
+  -moz-box-sizing: border-box;
+       box-sizing: border-box;
+
+  /* To harmonize the look & feel of text field border */
+  border: 1px solid #999;
+}
+
+input:focus, textarea:focus {
+  /* To give a little highligh on active elements */
+  border-color: #000;
+}
+
+textarea {
+  /* To properly align multiline text field with their label */
+  vertical-align: top;
+
+  /* To give enough room to type some text */
+  height: 5em;
+
+  /* To allow users to resize any textarea vertically
+     It works only on Chrome, Firefox and Safari */
+  resize: vertical;
+}
+
+.button {
+  /* To position the buttons to the same position of the text fields */
+  padding-left: 90px; /* same size as the label elements */
+}
+
+button {
+  /* This extra margin represent the same space as the space between
+     the labels and their text fields */
+  margin-left: .5em;
+}
+```
+
+### Result
+
+{{ EmbedLiveSample('A_simple_form', '100%', '280') }}
diff --git a/files/ru/learn/forms/your_first_form/index.html b/files/ru/learn/forms/your_first_form/index.html
index 96cf530884..1aaa49894e 100644
--- a/files/ru/learn/forms/your_first_form/index.html
+++ b/files/ru/learn/forms/your_first_form/index.html
@@ -276,7 +276,7 @@ button {
 
 <p>Поздравляем! Вы создали свою первую HTML-форму. Вживую это выглядит так: </p>
 
-<p>{{ EmbedLiveSample('A_simple_form', '100%', '240', '', 'Learn/HTML/Forms/Your_first_HTML_form/Example') }}</p>
+<p>{{ EmbedLiveSample('A_simple_form', '100%', '240', '', 'Learn/Forms/Your_first_form/Example') }}</p>
 
 <p>Однако это только начало — пришло время взглянуть глубже. HTML-формы намного мощнее, чем то, что мы видели здесь, и другие статьи этого раздела помогут освоить остальное.</p>
 
diff --git a/files/ru/web/api/canvas_api/tutorial/applying_styles_and_colors/index.html b/files/ru/web/api/canvas_api/tutorial/applying_styles_and_colors/index.html
index d85af68d7c..c17cdbedca 100644
--- a/files/ru/web/api/canvas_api/tutorial/applying_styles_and_colors/index.html
+++ b/files/ru/web/api/canvas_api/tutorial/applying_styles_and_colors/index.html
@@ -179,7 +179,7 @@ ctx.fillStyle = "rgba(255,0,0,0.5)";
 <pre class="brush: js notranslate">draw();</pre>
 </div>
 
-<p>{{EmbedLiveSample("Пример_использования_rgba()", "180", "180", "https://mdn.mozillademos.org/files/246/Canvas_rgba.png")}}</p>
+<p>{{EmbedLiveSample("Пример_использования_rgba", "180", "180", "https://mdn.mozillademos.org/files/246/Canvas_rgba.png")}}</p>
 
 <h2 id="Line_styles">Стили линий</h2>
 
diff --git a/files/ru/web/api/canvas_api/tutorial/drawing_shapes/index.html b/files/ru/web/api/canvas_api/tutorial/drawing_shapes/index.html
index 5f6d218718..4913f93bda 100644
--- a/files/ru/web/api/canvas_api/tutorial/drawing_shapes/index.html
+++ b/files/ru/web/api/canvas_api/tutorial/drawing_shapes/index.html
@@ -393,7 +393,7 @@ original_slug: Web/API/Canvas_API/Tutorial/Рисование_фигур
 }
 </pre>
 
-<p>{{EmbedLiveSample("Cubic_Bezier_curves", 160, 160, "https://mdn.mozillademos.org/files/207/Canvas_bezier.png")}}</p>
+<p>{{EmbedLiveSample("Кубические_кривые_Безье", 160, 160, "https://mdn.mozillademos.org/files/207/Canvas_bezier.png")}}</p>
 
 <h3 id="Прямоугольники">Прямоугольники</h3>
 
@@ -565,7 +565,7 @@ new Path2D(d);    // path из SVG</pre>
 }
 </pre>
 
-<p>{{EmbedLiveSample("Path2D_example", 130, 110, "https://mdn.mozillademos.org/files/9851/path2d.png")}}</p>
+<p>{{EmbedLiveSample("Path2D_пример", 130, 110, "https://mdn.mozillademos.org/files/9851/path2d.png")}}</p>
 
 <h3 id="Использование_SVG_путей">Использование SVG путей</h3>
 
diff --git a/files/ru/web/api/canvas_api/tutorial/pixel_manipulation_with_canvas/index.html b/files/ru/web/api/canvas_api/tutorial/pixel_manipulation_with_canvas/index.html
index f8ef9679b9..4c0958e980 100644
--- a/files/ru/web/api/canvas_api/tutorial/pixel_manipulation_with_canvas/index.html
+++ b/files/ru/web/api/canvas_api/tutorial/pixel_manipulation_with_canvas/index.html
@@ -98,7 +98,7 @@ function pick(event) {
 canvas.addEventListener('mousemove', pick);
 </pre>
 
-<p>{{ EmbedLiveSample('A_color_picker', 610, 240) }}</p>
+<p>{{ EmbedLiveSample('Выбор_цвета', 610, 240) }}</p>
 
 <h2 id="Отображение_пиксельных_данных_в_контекст">Отображение пиксельных данных в контекст</h2>
 
@@ -167,7 +167,7 @@ function draw(img) {
 }
 </pre>
 
-<p>{{ EmbedLiveSample('Grayscaling_and_inverting_colors', 330, 270) }}</p>
+<p>{{ EmbedLiveSample('Оттенки_серого_цвета_и_инвертирование_цветов', 330, 270) }}</p>
 
 <h2 id="Масштабирование_и_сглаживание">Масштабирование и сглаживание</h2>
 
@@ -231,7 +231,7 @@ function draw(img) {
   canvas.addEventListener('mousemove', zoom);
 }</pre>
 
-<p>{{ EmbedLiveSample('Zoom_example', 620, 490) }}</p>
+<p>{{ EmbedLiveSample('Масштабирование_и_сглаживание', 620, 490) }}</p>
 
 <h2 id="Сохранение_изображений">Сохранение изображений</h2>
 
diff --git a/files/ru/web/api/canvas_api/tutorial/using_images/index.html b/files/ru/web/api/canvas_api/tutorial/using_images/index.html
index 891cb3e9e1..d977950615 100644
--- a/files/ru/web/api/canvas_api/tutorial/using_images/index.html
+++ b/files/ru/web/api/canvas_api/tutorial/using_images/index.html
@@ -150,7 +150,7 @@ img.src = 'data:image/gif;base64,R0lGODlhCwALAIAAAAAA3pn/ZiH5BAEAAAEALAAAAAALAAs
 
 <p>Получившийся график выглядит так:</p>
 
-<p>{{EmbedLiveSample("Example_A_simple_line_graph", 220, 160, "https://mdn.mozillademos.org/files/206/Canvas_backdrop.png")}}</p>
+<p>{{EmbedLiveSample("Пример_Простой_линейный_график", 220, 160, "https://mdn.mozillademos.org/files/206/Canvas_backdrop.png")}}</p>
 
 <h2 id="Изменение_размеров">Изменение размеров</h2>
 
@@ -193,7 +193,7 @@ img.src = 'data:image/gif;base64,R0lGODlhCwALAIAAAAAA3pn/ZiH5BAEAAAEALAAAAAALAAs
 
 <p>Получившийся рисунок canvas выглядит так:</p>
 
-<p>{{EmbedLiveSample("Example_Tiling_an_image", 160, 160, "https://mdn.mozillademos.org/files/251/Canvas_scale_image.png")}}</p>
+<p>{{EmbedLiveSample("Пример_Тайлинг_изображения", 160, 160, "https://mdn.mozillademos.org/files/251/Canvas_scale_image.png")}}</p>
 
 <h2 id="Нарезка">Нарезка</h2>
 
@@ -237,7 +237,7 @@ img.src = 'data:image/gif;base64,R0lGODlhCwALAIAAAAAA3pn/ZiH5BAEAAAEALAAAAAALAAs
 
 <p>В этот раз мы применили другой способ загрузки изображения. Вместо загрузки методом создания новых {{domxref("HTMLImageElement")}} объектов, мы включили их как  {{HTMLElement("img")}} тэги прямо в наш HTML файл и из них выбрали изображения. Изображения скрыты с помощью  CSS-свойства {{cssxref("display")}}, установленного в "none" для этих изображений.</p>
 
-<p>{{EmbedLiveSample("Example_Framing_an_image", 160, 160, "https://mdn.mozillademos.org/files/226/Canvas_drawimage2.jpg")}}</p>
+<p>{{EmbedLiveSample("Пример_Обрамление_изображения", 160, 160, "https://mdn.mozillademos.org/files/226/Canvas_drawimage2.jpg")}}</p>
 
 <p>Скрипт, сам по себе, очень простой. Каждому {{HTMLElement("img")}} присвоен атрибут ID, который  делает удобным их выбор с использованием {{domxref("document.getElementById()")}}. Потом мы просто используем функцию  <code>drawImage()</code>, чтобы из первого изображения вырезать фрагмент носорога и вставить его в canvas, затем рисуем рамку сверху, используя второй вызов функции <code>drawImage()</code>.</p>
 
@@ -319,7 +319,7 @@ td {
   }
 }</pre>
 
-<p>{{EmbedLiveSample("Art_gallery_example", 725, 400)}}</p>
+<p>{{EmbedLiveSample("Пример_галереи_искусства", 725, 400)}}</p>
 
 <h2 id="Контроль_изменений_размеров_изображения">Контроль изменений размеров изображения</h2>
 
diff --git a/files/ru/web/api/canvasrenderingcontext2d/closepath/index.html b/files/ru/web/api/canvasrenderingcontext2d/closepath/index.html
index 89349a3873..c9305119ab 100644
--- a/files/ru/web/api/canvasrenderingcontext2d/closepath/index.html
+++ b/files/ru/web/api/canvasrenderingcontext2d/closepath/index.html
@@ -46,7 +46,7 @@ ctx.stroke();
 
 <h4 id="Результат">Результат</h4>
 
-<p>{{ EmbedLiveSample('Closing_a_triangle', 700, 180) }}</p>
+<p>{{ EmbedLiveSample('Замкнутый_треугольник', 700, 180) }}</p>
 
 <h3 id="Закрытие_пути_один_раз">Закрытие пути один раз</h3>
 
@@ -81,7 +81,7 @@ ctx.stroke();
 
 <h4 id="Результат_2">Результат</h4>
 
-<p>{{ EmbedLiveSample('Closing_just_one_sub-path', 700, 180) }}</p>
+<p>{{ EmbedLiveSample('Закрытие_пути_один_раз', 700, 180) }}</p>
 
 <h2 id="Спецификации">Спецификации</h2>
 
diff --git a/files/ru/web/api/canvasrenderingcontext2d/currenttransform/index.html b/files/ru/web/api/canvasrenderingcontext2d/currenttransform/index.html
index 3644c56148..992378af2f 100644
--- a/files/ru/web/api/canvasrenderingcontext2d/currenttransform/index.html
+++ b/files/ru/web/api/canvasrenderingcontext2d/currenttransform/index.html
@@ -50,7 +50,7 @@ ctx.fillRect(0, 0, 100, 100);</code></pre>
 
 <h4 id="Результат">Результат</h4>
 
-<p>{{ EmbedLiveSample('Manually_changing_the_matrix', 700, 180) }}</p>
+<p>{{ EmbedLiveSample('Использование_метода_currentTransform', 700, 180) }}</p>
 
 <h2 id="Спецификации">Спецификации</h2>
 
diff --git a/files/ru/web/api/canvasrenderingcontext2d/drawimage/index.html b/files/ru/web/api/canvasrenderingcontext2d/drawimage/index.html
index a96e7fed6d..6f8bf5422e 100644
--- a/files/ru/web/api/canvasrenderingcontext2d/drawimage/index.html
+++ b/files/ru/web/api/canvasrenderingcontext2d/drawimage/index.html
@@ -162,7 +162,7 @@ function drawImageActualSize() {
 
 <h4 id="Результат">Результат</h4>
 
-<p>{{EmbedLiveSample('Understanding_source_element_size', 700, 360)}}</p>
+<p>{{EmbedLiveSample('Понимание_размеров_изображения-источника', 700, 360)}}</p>
 
 <p> </p>
 
diff --git a/files/ru/web/api/canvasrenderingcontext2d/ellipse/index.html b/files/ru/web/api/canvasrenderingcontext2d/ellipse/index.html
index 48c6ac8108..13e038e0b4 100644
--- a/files/ru/web/api/canvasrenderingcontext2d/ellipse/index.html
+++ b/files/ru/web/api/canvasrenderingcontext2d/ellipse/index.html
@@ -72,7 +72,7 @@ ctx.stroke();
 
 <h4 id="Результат">Результат</h4>
 
-<p>{{ EmbedLiveSample('Drawing_a_full_ellipse', 700, 250) }}</p>
+<p>{{ EmbedLiveSample('Рисование_полного_эллипса', 700, 250) }}</p>
 
 <h3 id="Различные_эллиптические_дуги">Различные эллиптические дуги</h3>
 
@@ -106,7 +106,7 @@ ctx.fill();
 
 <h4 id="Результат_2">Результат</h4>
 
-<p>{{ EmbedLiveSample('Various_elliptical_arcs', 700, 180) }}</p>
+<p>{{ EmbedLiveSample('Различные_эллиптические_дуги', 700, 180) }}</p>
 
 <h2 id="Спецификации">Спецификации</h2>
 
diff --git a/files/ru/web/api/canvasrenderingcontext2d/fillstyle/index.html b/files/ru/web/api/canvasrenderingcontext2d/fillstyle/index.html
index 426919994e..e2ac4ee621 100644
--- a/files/ru/web/api/canvasrenderingcontext2d/fillstyle/index.html
+++ b/files/ru/web/api/canvasrenderingcontext2d/fillstyle/index.html
@@ -35,7 +35,7 @@ translation_of: Web/API/CanvasRenderingContext2D/fillStyle
 
 <h2 id="Примеры">Примеры</h2>
 
-<h3 id="Using_the_fillStyle_property">Изменение цвета заливки фигуры</h3>
+<h3 id="Изменение_цвета_заливки_фигуры">Изменение цвета заливки фигуры</h3>
 
 <p>Ниже представлен простой фрагмент кода, использующий <code>fillStyle</code> с цветом.</p>
 
diff --git a/files/ru/web/api/canvasrenderingcontext2d/getlinedash/index.html b/files/ru/web/api/canvasrenderingcontext2d/getlinedash/index.html
index 59559fe3cb..e8c56b5f60 100644
--- a/files/ru/web/api/canvasrenderingcontext2d/getlinedash/index.html
+++ b/files/ru/web/api/canvasrenderingcontext2d/getlinedash/index.html
@@ -45,7 +45,7 @@ ctx.stroke();
 
 <h4 id="Результат">Результат</h4>
 
-<p>{{ EmbedLiveSample('Getting_the_current_line_dash_setting', 700, 180) }}</p>
+<p>{{ EmbedLiveSample('Получение_текущей_настройки_штриховки_линии', 700, 180) }}</p>
 
 <h2 id="Спецификации">Спецификации</h2>
 
diff --git a/files/ru/web/api/canvasrenderingcontext2d/globalalpha/index.html b/files/ru/web/api/canvasrenderingcontext2d/globalalpha/index.html
index 50fa1c6004..9b5ffce0b4 100644
--- a/files/ru/web/api/canvasrenderingcontext2d/globalalpha/index.html
+++ b/files/ru/web/api/canvasrenderingcontext2d/globalalpha/index.html
@@ -58,7 +58,7 @@ ctx.fillRect(50, 50, 100, 100);
 
 <h4 id="Результат">Результат</h4>
 
-<p>{{ EmbedLiveSample('Drawing_translucent_shapes', 700, 180) }}</p>
+<p>{{ EmbedLiveSample('Отрисовка_полупрозрачных_фигур', 700, 180) }}</p>
 
 <h3 id="Наложение_прозрачных_фигур">Наложение прозрачных фигур</h3>
 
diff --git a/files/ru/web/api/canvasrenderingcontext2d/linecap/index.html b/files/ru/web/api/canvasrenderingcontext2d/linecap/index.html
index f91fca02b4..be3f7b3753 100644
--- a/files/ru/web/api/canvasrenderingcontext2d/linecap/index.html
+++ b/files/ru/web/api/canvasrenderingcontext2d/linecap/index.html
@@ -56,7 +56,7 @@ ctx.stroke();</pre>
 
 <p>{{ EmbedLiveSample('Использование_свойства_lineCap', 700, 180) }}</p>
 
-<h3 id="A_lineCap_example">Разница между значениями lineCap</h3>
+<h3 id="Разница_между_значениями_lineCap">Разница между значениями lineCap</h3>
 
 <p>В примере нарисованы три линии с разными значениями <code>lineCap</code>. Для наглядности мы добавим две направляющие. Каждая линия будет начинаться и заканчиваться этими направляющими.</p>
 
diff --git a/files/ru/web/api/canvasrenderingcontext2d/linejoin/index.html b/files/ru/web/api/canvasrenderingcontext2d/linejoin/index.html
index 950c9e6461..def5092e91 100644
--- a/files/ru/web/api/canvasrenderingcontext2d/linejoin/index.html
+++ b/files/ru/web/api/canvasrenderingcontext2d/linejoin/index.html
@@ -38,7 +38,7 @@ translation_of: Web/API/CanvasRenderingContext2D/lineJoin
 
 <h2 id="Примеры">Примеры</h2>
 
-<h3 id="Using_the_lineCap_property">Использование свойства lineJoin</h3>
+<h3 id="Использование_свойства_lineJoin">Использование свойства lineJoin</h3>
 
 <p>Ниже представлен простой фрагмент кода, использующий <code>lineJoin</code> для скругления места соединения линий.</p>
 
@@ -64,11 +64,11 @@ ctx.stroke();</code></pre>
 
 <h4 id="Result">Result</h4>
 
-<p>{{ EmbedLiveSample('Changing_the_joins_in_a_path', 700, 180) }}</p>
+<p>{{ EmbedLiveSample('Использование_свойства_lineJoin', 700, 180) }}</p>
 
 <p> </p>
 
-<h3 id="A_lineJoin_example">Разница между значениями lineJoin</h3>
+<h3 id="Разница_между_значениями_lineJoin">Разница между значениями lineJoin</h3>
 
 <p>Пример ниже наглядно демонстрирует разницу между значениями свойства <code>lineJoin.</code></p>
 
@@ -93,7 +93,7 @@ for (let i = 0; i &lt; lineJoin.length; i++) {
   ctx.stroke();
 }</code></pre>
 
-<p>{{EmbedLiveSample("Comparison_of_line_joins", "180", "180", "https://mdn.mozillademos.org/files/237/Canvas_linejoin.png")}}</p>
+<p>{{EmbedLiveSample("Разница_между_значениями_lineJoin", "180", "180", "https://mdn.mozillademos.org/files/237/Canvas_linejoin.png")}}</p>
 
 <p> </p>
 
diff --git a/files/ru/web/api/canvasrenderingcontext2d/miterlimit/index.html b/files/ru/web/api/canvasrenderingcontext2d/miterlimit/index.html
index f22e392449..fbb3f560fc 100644
--- a/files/ru/web/api/canvasrenderingcontext2d/miterlimit/index.html
+++ b/files/ru/web/api/canvasrenderingcontext2d/miterlimit/index.html
@@ -72,7 +72,7 @@ window.addEventListener("load", drawCanvas);
 </pre>
 </div>
 
-<p>{{EmbedLiveSample("A_demo_of_the_miterLimit_property", "400", "180", "https://mdn.mozillademos.org/files/240/Canvas_miterlimit.png", "Web/API/Canvas_API/Tutorial/Applying_styles_and_colors")}}</p>
+<p>{{EmbedLiveSample("Демонстрация_свойства_miterLimit", "400", "180", "https://mdn.mozillademos.org/files/240/Canvas_miterlimit.png", "Web/API/Canvas_API/Tutorial/Applying_styles_and_colors")}}</p>
 
 <h2 id="Спецификации">Спецификации</h2>
 
diff --git a/files/ru/web/api/canvasrenderingcontext2d/save/index.html b/files/ru/web/api/canvasrenderingcontext2d/save/index.html
index 8716b6487c..a9ac25972d 100644
--- a/files/ru/web/api/canvasrenderingcontext2d/save/index.html
+++ b/files/ru/web/api/canvasrenderingcontext2d/save/index.html
@@ -51,7 +51,7 @@ ctx.fillRect(150, 40, 100, 100);</code></pre>
 
 <h4 id="Результат">Результат</h4>
 
-<p>{{ EmbedLiveSample('Saving_the_drawing_state', 700, 180) }}</p>
+<p>{{ EmbedLiveSample('Сохранение_состояния_чертежа', 700, 180) }}</p>
 
 <h2 id="Спецификации">Спецификации</h2>
 
diff --git a/files/ru/web/api/canvasrenderingcontext2d/textbaseline/index.html b/files/ru/web/api/canvasrenderingcontext2d/textbaseline/index.html
index 8dd4445201..77240f0515 100644
--- a/files/ru/web/api/canvasrenderingcontext2d/textbaseline/index.html
+++ b/files/ru/web/api/canvasrenderingcontext2d/textbaseline/index.html
@@ -68,7 +68,7 @@ baselines.forEach(function (baseline, index) {
 
 <h4 id="Результат">Результат</h4>
 
-<p>{{ EmbedLiveSample('Comparison_of_property_values', 700, 550) }}</p>
+<p>{{ EmbedLiveSample('Сравнение_значений_свойства', 700, 550) }}</p>
 
 <h2 id="Спецификации">Спецификации</h2>
 
diff --git a/files/ru/web/api/document/cookie/index.html b/files/ru/web/api/document/cookie/index.html
index 3ee843cdfa..6d97d20205 100644
--- a/files/ru/web/api/document/cookie/index.html
+++ b/files/ru/web/api/document/cookie/index.html
@@ -96,7 +96,7 @@ function alertCookie() {
 <pre class="brush: html notranslate">&lt;button onclick="alertCookie()"&gt;Show cookies&lt;/button&gt;
 </pre>
 
-<p>{{EmbedLiveSample('Example_1_Simple_usage', 200, 36)}}</p>
+<p>{{EmbedLiveSample('Пример_1_Простое_использование', 200, 36)}}</p>
 
 <h3 id="Пример_2_Получить_cookie_с_именем_test2">Пример #2: Получить cookie с именем <em>test2</em></h3>
 
@@ -112,7 +112,7 @@ function alertCookieValue() {
 
 <pre class="brush: html notranslate">&lt;button onclick="alertCookieValue()"&gt;Show cookie value&lt;/button&gt;</pre>
 
-<p>{{EmbedLiveSample('Example_2_Get_a_sample_cookie_named_test2', 200, 36)}}</p>
+<p>{{EmbedLiveSample('Пример_2_Получить_cookie_с_именем_test2', 200, 36)}}</p>
 
 <h3 id="Пример_3_Выполнить_операцию_единожды">Пример #3: Выполнить операцию единожды</h3>
 
@@ -127,7 +127,7 @@ function alertCookieValue() {
 
 <pre class="brush: html notranslate">&lt;button onclick="doOnce()"&gt;Only do something once&lt;/button&gt;</pre>
 
-<p>{{EmbedLiveSample('Example_3_Do_something_only_once', 200, 36)}}</p>
+<p>{{EmbedLiveSample('Пример_3_Выполнить_операцию_единожды', 200, 36)}}</p>
 
 <h3 id="Пример_4_Перезагрузить_cookie">Пример #4: Перезагрузить cookie</h3>
 
@@ -137,7 +137,7 @@ function alertCookieValue() {
 
 <pre class="brush: html notranslate">&lt;button onclick="resetOnce()"&gt;Reset only once cookie&lt;/button&gt;</pre>
 
-<p>{{EmbedLiveSample('Example_4_Reset_the_previous_cookie', 200, 36)}}</p>
+<p>{{EmbedLiveSample('Пример_4_Перезагрузить_cookie', 200, 36)}}</p>
 
 <h3 id="Example_5_Проверить_существование_cookie">Example #5: Проверить существование cookie</h3>
 
diff --git a/files/ru/web/api/element/keydown_event/index.html b/files/ru/web/api/element/keydown_event/index.html
index 97291b9ce5..e0cb75bda1 100644
--- a/files/ru/web/api/element/keydown_event/index.html
+++ b/files/ru/web/api/element/keydown_event/index.html
@@ -54,7 +54,7 @@ function logKey(e) {
   log.textContent += ` ${e.code}`;
 }</pre>
 
-<p>{{EmbedLiveSample("addEventListener_keydown_example")}}</p>
+<p>{{EmbedLiveSample("Примеры_addEventListener_keydown")}}</p>
 
 <h3 id="Аналог_onkeydown">Аналог onkeydown</h3>
 
diff --git a/files/ru/web/api/webglrenderingcontext/index.html b/files/ru/web/api/webglrenderingcontext/index.html
index 60dd75cc89..fab75dd82e 100644
--- a/files/ru/web/api/webglrenderingcontext/index.html
+++ b/files/ru/web/api/webglrenderingcontext/index.html
@@ -319,24 +319,6 @@ var gl = canvas.getContext('webgl');
  <dd>Returns an extension object.</dd>
 </dl>
 
-<h2 id="Examples">Examples</h2>
-
-<h3 id="WebGL_context_feature_detection">WebGL context feature detection</h3>
-
-<p>{{page("/en-US/Learn/WebGL/By_example/Detect_WebGL", "summary")}}</p>
-
-<p>{{page("/en-US/Learn/WebGL/By_example/Detect_WebGL", "detect-webgl-source")}}</p>
-
-<p>{{EmbedLiveSample("detect-webgl-source", 660,150 ,"" , "Learn/WebGL/By_example/Detect_WebGL")}}</p>
-
-<h3 id="Effect_of_canvas_size_on_rendering_with_WebGL">Effect of canvas size on rendering with WebGL</h3>
-
-<p>{{page("/en-US/Learn/WebGL/By_example/Canvas_size_and_WebGL", "canvas-size-and-webgl-intro")}}</p>
-
-<p>{{page("/en-US/Learn/WebGL/By_example/Canvas_size_and_WebGL", "canvas-size-and-webgl-source")}}</p>
-
-<p>{{EmbedLiveSample("canvas-size-and-webgl-source", 660,180 ,"" , "Learn/WebGL/By_example/Canvas_size_and_WebGL")}}</p>
-
 <h2 id="Specifications">Specifications</h2>
 
 <table class="standard-table">
diff --git a/files/ru/web/css/@media/inverted-colors/index.html b/files/ru/web/css/@media/inverted-colors/index.html
index 3439405479..3044bc9991 100644
--- a/files/ru/web/css/@media/inverted-colors/index.html
+++ b/files/ru/web/css/@media/inverted-colors/index.html
@@ -26,7 +26,7 @@ translation_of: Web/CSS/@media/inverted-colors
  <dd>Все пиксели в отображаемой области были инвертированы.</dd>
 </dl>
 
-<h2 id="Примеры">Примеры</h2>
+<h2 id="Пример">Пример</h2>
 
 <h3 id="HTML">HTML</h3>
 
diff --git a/files/ru/web/css/@media/scripting/index.html b/files/ru/web/css/@media/scripting/index.html
index cfb587f945..1d2defc1c3 100644
--- a/files/ru/web/css/@media/scripting/index.html
+++ b/files/ru/web/css/@media/scripting/index.html
@@ -20,7 +20,7 @@ translation_of: Web/CSS/@media/scripting
  <dd>Скрипты поддерживаются и активны в текущем документе.</dd>
 </dl>
 
-<h2 id="Примеры">Примеры</h2>
+<h2 id="Пример">Пример</h2>
 
 <h3 id="HTML">HTML</h3>
 
diff --git a/files/ru/web/css/_colon_focus-visible/index.html b/files/ru/web/css/_colon_focus-visible/index.html
index a509c175d3..0947a99d1e 100644
--- a/files/ru/web/css/_colon_focus-visible/index.html
+++ b/files/ru/web/css/_colon_focus-visible/index.html
@@ -39,7 +39,7 @@ translation_of: 'Web/CSS/:focus-visible'
 }
 </pre>
 
-<p>{{EmbedLiveSample("Basic_example", "100%", 300)}}</p>
+<p>{{EmbedLiveSample("Базовый_пример", "100%", 300)}}</p>
 
 <h3 id="Выборочное_отображение_индикатора_фокусировки">Выборочное отображение индикатора фокусировки</h3>
 
@@ -73,7 +73,7 @@ custom-button:focus-visible {
   background: transparent;
 }</pre>
 
-<p>{{EmbedLiveSample("Selectively_showing_the_focus_indicator", "100%", 300)}}</p>
+<p>{{EmbedLiveSample("Выборочное_отображение_индикатора_фокусировки", "100%", 300)}}</p>
 
 <h2 id="Polyfill">Polyfill</h2>
 
diff --git a/files/ru/web/css/_colon_indeterminate/index.html b/files/ru/web/css/_colon_indeterminate/index.html
index 23edb86a6f..b9b63c1eac 100644
--- a/files/ru/web/css/_colon_indeterminate/index.html
+++ b/files/ru/web/css/_colon_indeterminate/index.html
@@ -61,7 +61,7 @@ for (var i = 0; i &lt; inputs.length; i++) {
 }
 </pre>
 
-<p>{{EmbedLiveSample('Checkbox_radio_button', 'auto', 50)}}</p>
+<p>{{EmbedLiveSample('Чекбокс_и_радио_переключатели', 'auto', 50)}}</p>
 
 <h3 id="Полоса_прогресса">Полоса прогресса</h3>
 
@@ -85,7 +85,7 @@ progress:indeterminate {
 
 <h3 id="Результат">Результат</h3>
 
-<p>{{EmbedLiveSample('Progress_bar', 'auto', 30)}}</p>
+<p>{{EmbedLiveSample('Полоса_прогресса', 'auto', 30)}}</p>
 
 <h2 id="Спецификации">Спецификации</h2>
 
diff --git a/files/ru/web/css/css_grid_layout/line-based_placement_with_css_grid/index.html b/files/ru/web/css/css_grid_layout/line-based_placement_with_css_grid/index.html
index 4f5efbfe26..58b6f849f2 100644
--- a/files/ru/web/css/css_grid_layout/line-based_placement_with_css_grid/index.html
+++ b/files/ru/web/css/css_grid_layout/line-based_placement_with_css_grid/index.html
@@ -353,7 +353,7 @@ original_slug: >-
 }
 </pre>
 
-<p>{{ EmbedLiveSample('The_grid-area_property', '300', '330') }}</p>
+<p>{{ EmbedLiveSample('Свойство_grid-area', '300', '330') }}</p>
 
 <p>Порядок значений для <code>grid-area</code> может показаться немного странным, он противоположен тому порядку, в котором мы, например, записываем значения для сокращённых свойств margin и padding. Но сделано это потому, что грид работает с направлениями относительно потока, определёнными в спецификации CSS Writing Modes. В дальнейшем мы рассмотрим, как гриды взаимодействуют с режимами написания (writing modes), но пока давайте примем за данность, что мы имеем дело с концепцией четырёх направлений относительно потока:</p>