fix(guide): simplify directory structure

guide/russian/html/tutorials/basic-html/index.md

@@ -0,0 +1,27 @@
+---
+title: Basic HTML
+localeTitle: Основной HTML
+---
+## Основной HTML
+
+Это заглушка. [Помогите нашему сообществу расширить его](https://github.com/freecodecamp/guides/tree/master/src/pages/html/tutorials/basic-html/index.md) .
+
+[Это руководство по быстрому стилю поможет вам принять ваш запрос на тягу](https://github.com/freecodecamp/guides/blob/master/README.md) .
+
+Структура базового файла HTML:
+
+```html
+
+<!doctype html> 
+ <html> 
+ 
+  <head> 
+    <title></title> 
+  </head> 
+ 
+  <body> 
+  </body> 
+ </html> 
+```
+
+#### Дополнительная информация:

guide/russian/html/tutorials/basic-html/radio-button/index.md

@@ -0,0 +1,24 @@
+---
+title: Radio Button
+localeTitle: Переключатель
+---
+# Переключатель
+
+```html
+
+<!DOCTYPE html> 
+ <html> 
+ <body> 
+ 
+ <form action="/action_page.php"> 
+  <input type="radio" name="gender" value="male"> Male<br> 
+  <input type="radio" name="gender" value="female"> Female<br> 
+  <input type="radio" name="gender" value="other"> Other<br> 
+  <input type="submit" value="Submit"> 
+ </form> 
+ 
+ </body> 
+ </html> 
+```
+
+Радиокнопки могут использоваться для выбора одной опции из нескольких опций. Вы не можете выбрать 2 или более переключателей в том же поле выбора.

guide/russian/html/tutorials/center-an-image-using-text-align-center/index.md

@@ -0,0 +1,62 @@
+---
+title: Center an Image Using Text Align Center
+localeTitle: Центрировать изображение с помощью центра выравнивания текста
+---
+## Центрировать изображение с помощью центра выравнивания текста
+
+Элемент `<img>` - это встроенный элемент (отображаемое значение `inline-block` ). Его можно легко центрировать, добавив `text-align: center;` Свойство CSS для родительского элемента который содержит его.
+
+Чтобы `text-align: center;` изображение с помощью `text-align: center;` вы должны поместить `<img>` внутри элемента уровня блока, такого как `div` . Поскольку свойство `text-align` применимо только к элементам уровня блока, вы размещаете `text-align: center;` на элементе уровня блока упаковки, чтобы достичь горизонтально-центрированного `<img>` .
+
+### пример
+
+```html
+
+<!DOCTYPE html> 
+ <html> 
+  <head> 
+    <title>Center an Image using text align center</title> 
+    <style> 
+      .img-container { 
+        text-align: center; 
+      } 
+    </style> 
+  </head> 
+  <body> 
+    <div class="img-container"> <!-- Block parent element --> 
+      <img src="user.png" alt="John Doe"> 
+    </div> 
+  </body> 
+ </html> 
+```
+
+**Примечание** . Родительский элемент должен быть блочным элементом. Если это не элемент блока, вы должны добавить `display: block;` CSS и свойство `text-align` .
+
+```html
+
+<!DOCTYPE html> 
+ <html> 
+  <head> 
+    <title>Center an Image using text align center</title> 
+    <style> 
+      .img-container { 
+        text-align: center; 
+        display: block; 
+      } 
+    </style> 
+  </head> 
+  <body> 
+    <span class="img-container"> <!-- Inline parent element --> 
+      <img src="user.png" alt=""> 
+    </span> 
+  </body> 
+ </html> 
+```
+
+**Демо-** [версия](https://codepen.io/aravindio/pen/PJMXbp) **:** [Codepen](https://codepen.io/aravindio/pen/PJMXbp)
+
+## Документация
+
+[**text-align** - MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/text-align)
+
+[**\\ ** - MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img)

guide/russian/html/tutorials/embedding-youtube-videos/index.md

@@ -0,0 +1,40 @@
+---
+title: Embedding Youtube Videos
+localeTitle: Встраивание видео Youtube
+---
+## Встраивание видео Youtube
+
+Вероятно, вы много раз видели встроенные видео на своих любимых сайтах. Сегодня мы поговорим о встраивании видео на YouTube, что очень легко сделать, даже если вы не знаете об этом. Для этого действия мы будем использовать элемент `<frame>` , что очень полезно при встраивании других HTML. Это очень часто используется для продвижения некоторых продуктов в качестве добавок. Обратите внимание, что вы не ограничиваетесь только YouTube - вы также можете экспериментировать с другими документами.
+
+### Элемент `<frame>`
+
+#### С помощью
+
+Вы можете легко разместить выбранное видео с помощью элемента `<frame>` . Но помните, вам также нужно определить высоту и ширину вашего игрока, поэтому мы будем использовать `height` и `width` атрибутов.
+
+Что нам нужно?
+
+*   Видео на YouTube и URL
+*   `<frame>` (не забудьте закрыть его!)
+*   атрибуты `width` и `height`
+
+```html
+
+<iframe width="420" height="315" 
+ src="https://www.youtube.com/watch?v=v8kFT4I31es"> 
+ </iframe> 
+```
+
+Вставляемые значения рекомендуются, но не стесняйтесь изменять их таким образом, который вы хотели бы.
+
+#### Автовоспроизведение
+
+Что нам делать, если мы хотим, чтобы этот игрок начал автоматически играть? Просто добавьте к своей ссылке значение `?autoplay=1` . Но будьте осторожны, потому что это может раздражать многих людей, посещающих вашу веб-страницу.
+
+```html
+
+<iframe width="420" height="315" 
+ src="https://www.youtube.com/watch?v=v8kFT4I31es?autoplay=1"> 
+ </iframe> 
+
+```

guide/russian/html/tutorials/how-to-create-an-html-button-that-acts-like-a-link/index.md

@@ -0,0 +1,39 @@
+---
+title: How to Create an HTML Button That Acts Like a Link
+localeTitle: Как создать HTML-кнопку, которая действует как ссылка
+---
+## Как создать HTML-кнопку, которая действует как ссылка
+
+Иногда вы можете использовать кнопку для ссылки на другую страницу или веб-сайт, а не на отправку формы или что-то в этом роде. Это довольно просто сделать и может быть достигнуто несколькими способами.
+
+Один из способов - просто обернуть тэг `<button>` тег `<a>` :
+
+```html
+
+<a href='https://www.freecodecamp.org/'><button>Link To freeCodeCamp</button></a> 
+```
+
+Это превращает всю вашу кнопку в ссылку.
+
+Второй вариант - создать свою ссылку, как обычно, с тегом `<a>` а затем с помощью CSS:
+
+```html
+
+<a href='https://www.freecodecamp.org/'>Link To freeCodeCamp</a> 
+```
+
+После того, как вы создали свою ссылку, вы можете использовать CSS, чтобы он выглядел как кнопка. Например, вы можете добавить границу, цвет фона, некоторые стили, когда пользователь наводил ссылку ...
+
+Другой способ добавить кнопку - обернуть `input` внутри тегов `form` . Укажите целевой URL-адрес в атрибуте action.
+
+```html
+
+<form action="http://google.com"> 
+    <input type="submit" value="Go to Google" /> 
+ </form> 
+```
+
+#### Дополнительная информация:
+
+*   [Руководство FreeCodeCamp - кнопки стилизации](https://guide.freecodecamp.org/css/css-buttons/)
+*   [Как создать кнопку HTML, которая действует как ссылка?](https://stackoverflow.com/questions/2906582/how-to-create-an-html-button-that-acts-like-a-link)

guide/russian/html/tutorials/how-to-horizontally-center-a-div-tag-in-another-div-tag/index.md

@@ -0,0 +1,67 @@
+---
+title: How to Horizontally Center a Div Tag in Another Div Tag
+localeTitle: Как горизонтально центрировать тег Div в другом теге Div
+---
+## Как горизонтально центрировать тег Div в другом теге Div
+
+Горизонтальное центрирование `<div>` внутри другого `<div>` довольно простое.
+
+Начнем с создания двух тегов div с родительскими и дочерними классами. Родитель будет нашим контейнером, а дочерний элемент будет `<div>` мы будем располагать по горизонтали.
+
+```html
+
+<!DOCTYPE html> 
+ <html> 
+ <head> 
+  <meta charset="UTF-8"> 
+  <title>How to Horizontally Center a Div Tag in Another Div Tag</title> 
+ </head> 
+ <body> 
+  <div class="parent"> 
+    <div class="child"> 
+      <p>This is the center.</p> 
+    </div> 
+  </div> 
+ </body> 
+ </html> 
+```
+
+Есть несколько способов, которыми вы можете это сделать, но для этого урока давайте сосредоточимся на двух. В первом мы `flexbox` наш дочерний `<div>` с использованием `margin` а во втором мы будем использовать `flexbox` .
+
+### Пример центрирования тега Div с полями
+
+Если вы укажете `width` вашего дочернего div, вы можете использовать `margin: auto` . Это будет центрировать вашего ребенка `<div>` , равномерно распределяя его левое и правое поля.
+
+```css
+.parent { 
+  border: 2px solid red; 
+ } 
+ 
+ .centered-child { 
+  width: 50%; 
+  margin: auto; 
+  border: 1px solid black; 
+ } 
+```
+
+### Пример центрирования тега Div с помощью Flexbox
+
+Использование flexbox для центровки `<div>` немного отличается. Во-первых, вам не нужно указывать `width` вашего дочернего `<div>` . Во-вторых, вы фактически центрируете дочерний `<div>` , применяя свойства css для родительского `<div>` .
+
+Для центрирования дочернего `<div>` с использованием flexbox вам нужно использовать `display: flex` вместе с `justify-content: center` на родительском `<div>` .
+
+```css
+.parent { 
+  display: flex; 
+  justify-content: center; 
+  border: 2px solid red; 
+ } 
+ 
+ .centered-child { 
+  border: 1px solid black; 
+ } 
+```
+
+#### Дополнительная информация:
+
+[Матрица поддержки Flexbox](http://caniuse.com/#search=flexbox)

guide/russian/html/tutorials/how-to-insert-spaces-or-tabs-in-text-using-html-and-css/index.md

@@ -0,0 +1,39 @@
+---
+title: How to Insert Spaces or Tabs in Text Using HTML and CSS
+localeTitle: Как вставить пробелы или вкладки в тексте с помощью HTML и CSS
+---
+## Как вставить пробелы или вкладки в тексте с помощью HTML и CSS
+
+Существует множество способов вставки пробелов с помощью html. Для простоты мы будем перейдите по одному из них, которые добавляются в тег Span.
+
+## Span Tag
+
+`<span>`
+
+Span Tags `<span>` - теги, закрывающие закрытие, что означает, что они не нуждаются в `/>` .
+
+## Пример Span
+
+Пример того, как `<span>` вставляет пробел между текстом, можно увидеть ниже.
+
+`<p>Hello may name is <span> James</p>`
+
+Если вы присвоите класс вашему `<span>` вы можете добавить к нему некоторые css. Вот так,
+
+`<p>Hello my name is <span class=tab> James</p>`
+
+Затем либо во внешней таблице стилей, либо в таблице внутренних стилей вы можете дать `class .tab` некоторые свойства.
+
+## Пример класса Span
+
+Например
+
+`.tab {padding-left: 2px;}`
+
+Вы также можете указать `<span>` некоторые свойства встроенного стиля, как показано ниже.
+
+`<p>Hello my name is <span style="padding-left: 2px;"> James</p>`
+
+## Больше информации
+
+Для получения дополнительной информации о теге или в; Как вставить пробелы или вкладки в тексте Используя HTML и CSS, вы можете посетить w3schools. https://www.w3schools.com/tags/tag\_span.asp

guide/russian/html/tutorials/how-to-use-links/index.md

@@ -0,0 +1,39 @@
+---
+title: How to Use Links
+localeTitle: Как использовать ссылки
+---
+## Как использовать ссылки
+
+В HTML вы можете использовать тег `<a>` для создания ссылки. Например, вы можете написать `<a href="https://www.freecodecamp.org/">freeCodeCamp</a>` чтобы создать ссылку на сайт freeCodeCamp.
+
+Ссылки доступны практически на всех веб-страницах. Ссылки позволяют пользователям щелкнуть их путь со страницы на страницу.
+
+Ссылки HTML - это гиперссылки. Вы можете нажать на ссылку и перейти к другому документу.
+
+Когда вы переместите мышь по ссылке, стрелка мыши превратится в маленькую руку.
+
+Примечание. Ссылка не обязательно должна быть текстовой. Это может быть образ или любой другой элемент HTML.
+
+В HTML ссылки определяются с помощью тега:
+
+```html
+
+<a href="url">link text</a> 
+```
+
+пример
+
+```html
+
+<a href="https://www.freecodecamp.org/">Visit our site for tutorials</a> 
+```
+
+Атрибут href указывает адрес получателя (https://www.freecodecamp.org) ссылки.
+
+Текст ссылки - видимая часть (посетите наш сайт для учебных пособий).
+
+Нажав на текст ссылки, вы отправите на указанный адрес.
+
+#### Дополнительная информация:
+
+*   [MDN - HTML-](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a) ссылка

guide/russian/html/tutorials/how-to-use-lists/index.md

@@ -0,0 +1,85 @@
+---
+title: How to Use Lists
+localeTitle: Как использовать списки
+---
+## Как использовать списки
+
+Списки используются для указания набора последовательных элементов или связанной информации в хорошо сформированном и семантическом смысле, таких как список ингредиентов или список процедурных шагов. HTML-разметка имеет три разных типа списков - **упорядоченные** , **незавершенные** и **описательные** списки.
+
+### Упорядоченные списки
+
+Упорядоченный список используется для группировки набора связанных элементов в определенном порядке. Этот список создается с `<ol>` . Каждый элемент списка окружен `<li>` .
+
+##### Код
+
+```html
+
+<ol> 
+    <li>Mix ingredients</li> 
+    <li>Bake in oven for an hour</li> 
+    <li>Allow to stand for ten minutes</li> 
+ </ol> 
+```
+
+##### пример
+
+1.  Смешать ингредиенты
+2.  Выпекать в духовке в течение часа
+3.  Дать постоять десять минут
+
+### Неупорядоченные списки
+
+Неупорядоченный список используется для группировки набора связанных элементов, в определенном порядке. Этот список создается с `<ul>` . Каждый элемент списка окружен `<li>` .
+
+##### Код
+
+```html
+
+<ul> 
+    <li>Chocolate Cake</li> 
+    <li>Black Forest Cake</li> 
+    <li>Pineapple Cake</li> 
+ </ul> 
+```
+
+#### пример
+
+*   Шоколадный торт
+*   Торт черный лес
+*   Ананасовый торт
+
+### Описание Списки
+
+Список описаний используется для указания списка терминов и их описаний. Этот список создается с `<dl>` . Каждый элемент списка окружен `<dd>` .
+
+##### Код
+
+```html
+
+<dl> 
+    <dt>Bread</dt> 
+    <dd>A baked food made of flour.</dd> 
+    <dt>Coffee</dt> 
+    <dd>A drink made from roasted coffee beans.</dd> 
+ </dl> 
+```
+
+##### Вывод
+
+Хлеб
+
+Запеченная еда из муки.
+
+Кофе
+
+Выпейте из жареных кофейных зерен.
+
+#### Список стилей
+
+Вы также можете управлять стилем списка. Вы можете использовать свойство `list-style` для списков. Ваш список может быть пулями, квадратами, в римских цифрах или может быть изображениями, которые вы хотите.
+
+Свойство `list-style` является сокращением для `list-style-type` `list-style-position` `list-style-image` .
+
+#### Дополнительная информация:
+
+\[HTML-списки · Документы WebPlatform\] (https://webplatform.github.io/docs/guides/html\_lists/ )

guide/russian/html/tutorials/images-in-html/index.md

@@ -0,0 +1,51 @@
+---
+title: Images in HTML
+localeTitle: Изображения в HTML
+---
+## Введение
+
+Вы можете определять изображения с помощью `<img>` . Он не имеет закрывающего тега, поскольку он может содержать только атрибуты. Чтобы вставить изображение, вы определяете источник и альтернативный текст, который отображается, когда изображение не может быть отображено.
+
+`src` - этот атрибут предоставляет URL-адрес для изображения, представленного на вашем ПК / ноутбуке, или для включения в какой-либо другой веб-сайт. Помните, что ссылка не должна быть нарушена, иначе изображение не будет создано на вашей веб-странице.
+
+`alt` - Этот атрибут используется для преодоления проблемы сломанного изображения или неспособности вашего браузера не создавать изображение на веб-странице. Этот атрибут как имя предполагает предоставление «Альтернативы» изображению, которое является некоторым «ТЕКСТОМ», описывающим изображение
+
+## пример
+
+```html
+
+<img src="URL of the Image" alt="Descriptive Title" /> 
+```
+
+### Чтобы определить высоту и ширину изображения, вы можете использовать атрибут height и width:
+
+```html
+
+<img src="URL of the Image" alt="Descriptive Title" height="100" width="150"/> 
+```
+
+### Вы также можете определить толщину границы (0 означает отсутствие границы):
+
+```html
+
+<img src="URL of the Image" alt="Descriptive Title" border="2"/> 
+```
+
+### Выравнивание изображения:
+
+```html
+
+<img src="URL of the Image" alt="Descriptive Title" align="left"/> 
+```
+
+### Вы также можете использовать стили в атрибуте стиля:
+
+```html
+
+<img src="URL of the Image" alt="Descriptive Title" style="width: 100px; height: 150px;"/> 
+```
+
+#### Больше информации
+
+*   Смотрите страницу freeCodeCamp на `<img>` тег [здесь](https://guide.freecodecamp.org/html/elements/img-tag) .
+*   Чтобы получить более подробную информацию о изображениях в HTML, ознакомьтесь с [документами MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Img)

guide/russian/html/tutorials/index.md

@@ -0,0 +1,11 @@
+---
+title: Tutorials
+localeTitle: Учебники
+---
+## Учебники
+
+Это заглушка. [Помогите нашему сообществу расширить его](https://github.com/freecodecamp/guides/tree/master/src/pages/html/tutorials/index.md) .
+
+[Это руководство по быстрому стилю поможет вам принять ваш запрос на тягу](https://github.com/freecodecamp/guides/blob/master/README.md) .
+
+#### Дополнительная информация:

guide/russian/html/tutorials/redirect-from-an-html-page/index.md

@@ -0,0 +1,13 @@
+---
+title: Redirect from an HTML Page
+localeTitle: Перенаправление с HTML-страницы
+---
+## Перенаправление с HTML-страницы
+
+Если вы изменили URL-адрес своей страницы HTML и хотите автоматически перенаправить посетителей на новое местоположение страницы, вы можете использовать метатег в области `<head>` на вашей старой HTML-странице.
+
+`html <head> <meta http-equiv="refresh" content="0; url=http://freecodecamp.org/" /> </head>` В приведенном выше примере посетители страницы будут перенаправлены со старой страницы html на [http://freecodecamp.org/](http://freecodecamp.org/) . Атрибут `content="0` означает, что браузер перенаправит новую страницу через 0 секунд. Изменение значения на `content="2` будет перенаправлено через 2 секунды.
+
+#### Дополнительная информация:
+
+*   [MDN - перенаправления в HTTP](https://developer.mozilla.org/en-US/docs/Web/HTTP/Redirections)

guide/russian/html/tutorials/text-formatting-in-html/index.md

@@ -0,0 +1,61 @@
+---
+title: Text Formatting in HTML
+localeTitle: Форматирование текста в HTML
+---
+## Форматирование текста в HTML
+
+HTML предоставляет вам множество полезных элементов для форматирования текста. Это позволяет сделать ваш текст: жирный, курсив, знак и многое другое. Изменение стиля вашего текста не имеет никакой причины - главное - просто заставить читателя взглянуть на важные заметки.
+
+### Жирный и сильный
+
+Вы можете легко изменить свой смысл текста, используя элемент HTML `<b>` . Это делает слова полужирным, какая функция выделяет фрагмент последовательности. Например:
+```
+The most important part of your code is <b>the end</b>, because if you <b>don't close</b> the element, it will affect to <b>everything</b>! 
+```
+
+Вы также можете использовать `<strong>` что добавляет также семантическое «сильное» значение. Ваш браузер не распознает разницу между этими двумя элементами, но он существует.
+
+### Курсив и подчеркнуто
+
+Обычно используется при цитировании чего-либо или перевод слова в множество статей. Это делает их курсивом - просто представьте, что вы пинали правильные буквы. Например:
+```
+Theatre - <i>teatos</i>, <i>teates</i> and <i>teatron</i>. 
+```
+
+Вы также можете использовать `<em>` - он добавляет также смысловое «подчеркнутое» значение. Ваш браузер не распознает разницу между этими двумя элементами, но он существует.
+
+### Маленький
+
+Это делает ваш текст меньше обычного шрифта. Значение этого элемента было изменено в HTML5 - оно представляет побочные комментарии и мелкий шрифт.
+
+`Normal, <small>small</small>, normal, <small>small</small>!`
+
+### отмеченный
+
+Элемент `<mark>` делает ваш текст отмеченным - другими словами, он выделяет ваш текст. Вы можете использовать его, чтобы сообщить читателям, что это одна из важных вещей в вашей статье. Например:
+
+`HTML is full of things and <mark>it's our journey</mark> to get known them better!`
+
+### удаленный
+
+Элемент `<del>` делает ваш текст застрял в центре. Полезно показывать изменения в ваших документах.
+
+`WWI started in <del>1913</del> 1914 year.`
+
+### вставленный
+
+Тег `<ins>` делает ваш текст вставленным в статью. Используя другие слова, которые значительно облегчают понимание - добавлены. Он показывает строку под вставленным текстом.
+
+`HTML isn't boring. <ins>You can make a lot of combinations of elements!</ins>`
+
+### подстрочных
+
+Использование элемента `<sub>` дает полезное форматирование в виде подстрочного текста (показывая его меньше внизу). Существует пример кода:
+
+`This was in 2003 year <sub>(needs a link).`
+
+### верхний индекс
+
+Если вы хотите сделать противоположное подстрочному тексту, вы можете легко использовать элемент `<sup>` . Он показывает меньший текст сверху.
+
+`10<sup>x+y</sup> = 1000`

guide/russian/html/tutorials/use-tab-space-instead-of-multiple-non-breaking-spaces-nbsp/index.md

@@ -0,0 +1,11 @@
+---
+title: Use Tab Space Instead of Multiple Non Breaking Spaces Nbsp
+localeTitle: Используйте вкладку «Пространство» вместо нескольких неразрушающих пространств Nbsp
+---
+## Используйте вкладку «Пространство» вместо нескольких неразрушающих пространств Nbsp
+
+В HTML наиболее распространенным способом добавления нескольких пробелов является добавление `&nbsp;` для каждого пространства. Чтобы добавить пространство вкладок, поместите текст в теги `<pre>` , например `<pre>My Text Here</pre>` и каждая вкладка будет обрабатываться как восемь пробелов. Другой способ добавить несколько пробелов в HTML - это использовать CSS, например `<p style="padding-right: 5px;">My Text Here</p>` .
+
+#### Дополнительная информация:
+
+*   [MDN - элемент форматированного текста](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/pre)