initial commit

author: Peter Bengtsson <mail@peterbe.com> 2020-12-08 14:42:52 -0500
committer: Peter Bengtsson <mail@peterbe.com> 2020-12-08 14:42:52 -0500
commit: 074785cea106179cb3305637055ab0a009ca74f2 (patch)
tree: e6ae371cccd642aa2b67f39752a2cdf1fd4eb040 /files/ru/learn/getting_started_with_the_web
parent: da78a9e329e272dedb2400b79a3bdeebff387d47 (diff)
download: translated-content-074785cea106179cb3305637055ab0a009ca74f2.tar.gz
translated-content-074785cea106179cb3305637055ab0a009ca74f2.tar.bz2
translated-content-074785cea106179cb3305637055ab0a009ca74f2.zip
10 files changed, 1796 insertions, 0 deletions
diff --git a/files/ru/learn/getting_started_with_the_web/css_basics/index.html b/files/ru/learn/getting_started_with_the_web/css_basics/index.html
new file mode 100644
index 0000000000..a091f49fc3
--- /dev/null
+++ b/files/ru/learn/getting_started_with_the_web/css_basics/index.html
@@ -0,0 +1,295 @@
+---
+title: Основы CSS
+slug: Learn/Getting_started_with_the_web/CSS_basics
+tags:
+  - Beginner
+  - CSS
+  - CodingScripting
+  - Learn
+  - Styling
+  - Web
+  - Веб
+  - Новичку
+  - Обучение
+translation_of: Learn/Getting_started_with_the_web/CSS_basics
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web")}}</div>
+
+<div class="summary">
+<p>CSS (Cascading Style Sheets) — это код, который вы используете для стилизации вашей веб-страницы. <em>Основы CSS</em> помогут вам понять, что вам нужно для начала работы. Мы ответим на такие вопросы как: Как сделать мой текст черным или красным? Как сделать так, чтобы контент появлялся в определенном месте на экране? Как украсить мою веб-страницу с помощью фоновых изображений и цветов?</p>
+</div>
+
+<h2 id="Так_что_же_такое_CSS">Так что же такое CSS? </h2>
+
+<p>Как и HTML, CSS на самом деле не является языком программирования. Это не язык разметки - это <em>язык таблицы стилей. </em>Это означает, что он позволяет применять стили выборочно к элементам в документах HTML. Например, чтобы выбрать <strong>все</strong> элементы абзаца на HTML странице и изменить текст внутри них с черного на красный, вы должны написать этот CSS:</p>
+
+<pre class="notranslate"><code>p {
+  color: red;
+}</code></pre>
+
+<p>Давайте попробуем: вставьте эти три строки CSS в новый файл в ваш текстовый редактор, а затем сохраните файл как <code>style.css</code> в вашей папке <code>styles</code>.</p>
+
+<p>Но нам все равно нужно применить CSS к нашему HTML документу. В противном случае, CSS стиль не повлияет на то, как ваш браузер отобразит HTML документ. (Если вы не следили за нашим проектом, то прочитайте раздел <a href="/ru/Learn/Getting_started_with_the_web/Dealing_with_files">Работа с файлами</a> и <a href="/ru/Learn/Getting_started_with_the_web/HTML_basics">Основы HTML</a>, чтобы узнать, что вам нужно сделать в первую очередь.)</p>
+
+<ol>
+ <li>Откройте ваш файл <code>index.html</code> и вставьте следующую строку куда-нибудь в шапку, между <code>&lt;head&gt;</code> и <code>&lt;/head&gt;</code> тегами:
+
+  <pre class="brush: html notranslate">&lt;link href="styles/style.css" rel="stylesheet" type="text/css"&gt;</pre>
+ </li>
+ <li>Сохраните <code>index.html</code> и загрузите его в вашем браузере. Вы должны увидеть что-то вроде этого:</li>
+</ol>
+
+<p><img alt="A mozilla logo and some paragraphs. The paragraph text has been styled red by our css." src="https://mdn.mozillademos.org/files/9435/website-screenshot-styled.png" style="display: block; height: 832px; margin: 0px auto; width: 711px;">Если текст вашего абзаца теперь красный, примите наши поздравления! Вы написали свой первый успешный CSS!</p>
+
+<h3 id="Анатомия_набора_правил_CSS">Анатомия набора правил CSS</h3>
+
+<p>Давайте взглянем на вышеупомянутый CSS немного более подробно:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9461/css-declaration-small.png" style="display: block; height: 480px; margin: 0px auto; width: 850px;"></p>
+
+<p>Вся структура называется <strong>набором правил</strong> (но зачастую для краткости "правило"). Отметим также имена отдельных частей:</p>
+
+<dl>
+ <dt>Селектор (Selector)</dt>
+ <dd>Имя HTML элемента в начале набора правил. Он выбирает элемент(ы) для применения стиля (в данном случае, элементы <code>p</code> ). Для стилизации другого элемента, просто измените селектор.</dd>
+ <dt>Объявление (Declaration)</dt>
+ <dd>Единственное правило, например <code>color: red;</code> указывает, какие из <strong>свойств</strong> элемента вы хотите стилизовать.</dd>
+ <dt>Свойства (Properties)</dt>
+ <dd>Способы, которыми вы можете стилизовать определенный HTML элемент (в данном случае, <code>color</code> является свойством для элементов {{htmlelement("p")}}). В CSS вы выбираете, какие свойства вы хотите затронуть в вашем правиле.</dd>
+ <dt>Значение свойства (Property value)</dt>
+ <dd>Справа от свойства, после двоеточия, у нас есть <strong>значение свойства</strong>, которое выбирает одно из множества возможных признаков для данного свойства (существует множество значений <code>color</code>, помимо <code>red</code>).</dd>
+</dl>
+
+<p>Обратите внимание на важные части синтаксиса:</p>
+
+<ul>
+ <li>Каждый набор правил (кроме селектора) должен быть обернут в фигурные скобки (<code>{}</code>).</li>
+ <li>В каждом объявлении необходимо использовать двоеточие (<code>:</code>), чтобы отделить свойство от его значений.</li>
+ <li>В каждом наборе правил вы должны использовать точку с запятой (<code>;</code>), чтобы отделить каждое объявление от следующего.</li>
+</ul>
+
+<p>Таким образом, чтобы изменить несколько значений свойств сразу, вам просто нужно написать их, разделяя точкой с запятой, например так:</p>
+
+<pre class="brush: css notranslate">p {
+  color: red;
+  width: 500px;
+  border: 1px solid black;
+}</pre>
+
+<h3 id="Выбор_нескольких_элементов">Выбор нескольких элементов</h3>
+
+<p>Вы также можете выбрать несколько элементов разного типа и применить единый набор правил для всех из них. Добавьте несколько селекторов, разделенных запятыми. Например:</p>
+
+<pre class="brush: css notranslate">p,li,h1 {
+  color: red;
+}</pre>
+
+<h3 id="Разные_типы_селекторов">Разные типы селекторов</h3>
+
+<p>Существует множество различных типов селектора. Выше мы рассматривали только <strong>селектор элементов</strong>, который выбирает все элементы определенного типа в HTML документе. Но мы можем сделать выбор более конкретным. Вот некоторые из наиболее распространенных типов селекторов:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Имя селектора</th>
+   <th scope="col">Что выбирает</th>
+   <th scope="col">Пример</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>Селектор элемента (иногда называемый селектором тега или типа)</td>
+   <td>Все HTML элемент(ы) указанного типа.</td>
+   <td><code>p</code><br>
+    Выбирает <code>&lt;p&gt;</code></td>
+  </tr>
+  <tr>
+   <td>ID селектор</td>
+   <td>Элемент на странице с указанным ID на данной HTML. Лучше всего использовать один элемент для каждого ID (и конечно один ID для каждого элемента), даже если вам разрешено использовать один и тот же ID для нескольких элементов.</td>
+   <td><code>#my-id</code><br>
+    Выбирает <code>&lt;p id="my-id"&gt;</code> или <code>&lt;a id="my-id"&gt;</code></td>
+  </tr>
+  <tr>
+   <td>Селектор класса</td>
+   <td>Элемент(ы) на странице с указанным классом (множество экземпляров класса может объявляться на странице).</td>
+   <td><code>.my-class</code><br>
+    Выбирает <code>&lt;p class="my-class"&gt;</code> и <code>&lt;a class="my-class"&gt;</code></td>
+  </tr>
+  <tr>
+   <td>Селектор атрибута</td>
+   <td>Элемент(ы) на странице с указанным атрибутом.</td>
+   <td><code>img[src]</code><br>
+    Выбирает <code>&lt;img src="myimage.png"&gt;</code> но не <code>&lt;img&gt;</code></td>
+  </tr>
+  <tr>
+   <td>Селектор псевдо-класса</td>
+   <td>Указанные элемент(ы), но только в случае определенного состояния, например, при наведении курсора.</td>
+   <td><code>a:hover</code><br>
+    Выбирает <code>&lt;a&gt;</code>, но только тогда, когда указатель мыши наведен на ссылку.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Существует еще много селекторов для изучения, и вы можете найти более подробный список в нашем <a href="/ru/docs/Web/Guide/CSS/Getting_started/Selectors">Руководстве селекторов</a>.</p>
+
+<h2 id="Шрифты_и_текст">Шрифты и текст</h2>
+
+<p>Теперь, когда мы изучили некоторые основы CSS, давайте добавим ещё несколько правил и информацию в наш файл <code>style.css</code>, чтобы наш пример хорошо выглядел. Прежде всего, давайте сделаем, чтобы наши шрифты и текст выглядели немного лучше.</p>
+
+<ol>
+ <li>Прежде всего, вернитесь и найдите <a href="https://developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like">вывод из Google Fonts</a>, который вы уже где-то сохранили. Добавьте элемент {{htmlelement("link")}} где-нибудь внутри шапки вашего <code>index.html</code> (снова, в любом месте между тегами <code>&lt;head&gt;</code> и <code>&lt;/head&gt;</code>). Это будет выглядеть примерно так:
+
+  <pre class="brush: html notranslate">&lt;link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'&gt;</pre>
+  Этот код связывает вашу страницу с таблицой стилями, которая загружает семейство шрифтов Open Sans вместе с вашей страницой и позволяет вам применять их к вашим HTML элементам используя свою собственную таблицу стилей.</li>
+ <li>Затем, удалите существующее правило в вашем <code>style.css</code> файле. Это был хороший тест, но красный текст, на самом деле, не очень хорошо выглядит.</li>
+ <li>Добавьте следующие строки в нужное место, заменив строку <code>placeholder</code> актуальной <code>font-family</code> строкой, которую вы получили из Google Fonts. (<code>font-family</code> просто означает, какой шрифт(ы) вы хотите использовать для вашего текста). Это правило устанавливает глобальный базовый шрифт и размер шрифта для всей страницы (поскольку <code>&lt;html&gt;</code> является родительским элементом для всей страницы, и все элементы внутри него наследуют такой же <code>font-size</code> и <code>font-family</code>):
+  <pre class="brush: css notranslate">html {
+  font-size: 10px; /* px значит 'пиксели': базовый шрифт будет 10 пикселей в высоту  */
+  font-family: placeholder: здесь должно быть имя шрифта из Google fonts
+}</pre>
+
+  <div class="note">
+  <p><strong>Примечание</strong>: Все в CSS документе между <code>/*</code> и <code>*/ </code> является <strong>CSS комментарием</strong>, который браузер игнорирует при исполнении кода. Это место, где вы можете написать полезные заметки о том, что вы делаете.</p>
+  </div>
+ </li>
+ <li>Теперь мы установим размер шрифта для элементов, содержащих текст внутри HTML тела ({{htmlelement("h1")}}, {{htmlelement("li")}}, и {{htmlelement("p")}}). Мы также отцентрируем текст нашего заголовка и установим некоторую высоту строки и расстояние между буквами в теле документа, чтобы сделать его немного более удобным для чтения:
+  <pre class="brush: css notranslate">h1 {
+  font-size: 60px;
+  text-align: center;
+}
+
+p, li {
+  font-size: 16px;
+  line-height: 2;
+  letter-spacing: 1px;
+}</pre>
+ </li>
+</ol>
+
+<p>Вы можете настроить значения <code>px</code> так, как вам нравится, чтобы ваш дизайн выглядел так, как вы хотите, но, в общем, ваш дизайн должен выглядеть вот так:</p>
+
+<p><img alt="a mozilla logo and some paragraphs. a sans-serif font has been set, the font sizes, line height and letter spacing are adjusted, and the main page heading has been centered" src="https://mdn.mozillademos.org/files/9447/website-screenshot-font-small.png" style="display: block; height: 1020px; margin: 0px auto; width: 921px;"></p>
+
+<h2 id="Блоки_блоки_и_ещё_раз_блоки">Блоки, блоки и ещё раз блоки</h2>
+
+<p>Одна вещь, которую вы заметите в написании CSS, заключается в том, что многое из этого касается блоков - настройка их размера, цвета, положения и т.д. Большинство HTML элементов на странице можно рассматривать как блоки, расположенные друг над другом.</p>
+
+<p><img alt="a big stack of boxes or crates sat on top of one another" src="https://mdn.mozillademos.org/files/9441/boxes.jpg" style="display: block; height: 463px; margin: 0px auto; width: 640px;"></p>
+
+<p>Не удивительно, макет CSS основан, главным образом, на <em>блочной модели (box model)</em>. Каждый из блоков, занимающий пространство на вашей странице имеет такие свойства, как:</p>
+
+<ul>
+ <li><code>padding</code>, пространство только вокруг контента (например, вокруг абзаца текста)</li>
+ <li><code>border</code>, сплошная линия, которая расположена рядом с padding</li>
+ <li><code>margin</code>, пространство вокруг внешней стороны элемента</li>
+</ul>
+
+<p><img alt="three boxes sat inside one another. From outside to in they are labelled margin, border and padding" src="https://mdn.mozillademos.org/files/9443/box-model.png" style="display: block; height: 450px; margin: 0px auto; width: 574px;"></p>
+
+<p>В этом разделе мы также используем:</p>
+
+<ul>
+ <li><code>width</code> (ширину элемента)</li>
+ <li><code>background-color</code>, цвет позади контента и padding элементов</li>
+ <li><code>color</code>, цвет контента элемента (обычно текста)</li>
+ <li><code>text-shadow</code>: устанавливает тень на тексте внутри элемента</li>
+ <li><code>display</code>: устанавливает режим отображения элемента (пока что не волнуйтесь об этом)</li>
+</ul>
+
+<p>Итак, давайте начнем и добавим больше CSS на нашей странице! Продолжайте добавлять эти новые правила, расположенные в нижней части страницы, и не бойтесь экспериментировать с изменением значений, чтобы увидеть, как это работает.</p>
+
+<h3 id="Изменение_цвета_страницы">Изменение цвета страницы</h3>
+
+<pre class="brush: css notranslate">html {
+  background-color: #00539F;
+}</pre>
+
+<p>Это правило устанавливает цвет фона для всей страницы. Измените код цвета сверху, на цвет который <a href="https://developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like">вы выбрали при планировании вашего сайта</a>.</p>
+
+<h3 id="Разбираемся_с_телом">Разбираемся с телом</h3>
+
+<pre class="brush: css notranslate">body {
+  width: 600px;
+  margin: 0 auto;
+  background-color: #FF9500;
+  padding: 0 20px 20px 20px;
+  border: 5px solid black;
+}</pre>
+
+<p>Теперь для {{htmlelement("body")}} элемента. Здесь есть немало деклараций, так что давайте пройдем через них всех по одному:</p>
+
+<ul>
+ <li><code>width: 600px;</code> — заставляет тело быть всегда 600 пикселей в ширину.</li>
+ <li><code>margin: 0 auto;</code> — когда вы устанавливаете два значения для таких свойств как <code>margin</code> или <code>padding</code>, первое значение элемента влияет на верхнюю <strong>и</strong> нижнюю сторону (делает их <code>0</code> в данном случае), и второе значение на левую <strong>и</strong> правую сторону (здесь, <code>auto</code> является особым значением, которое делит доступное пространство по горизонтали поровну слева и справа). Вы также можете использовать один, три или четыре значения, как описано <a href="https://developer.mozilla.org/ru/docs/Web/CSS/margin#Values">здесь</a>.</li>
+ <li><code>background-color: #FF9500;</code> — как и прежде, устанавливает цвет фона элемента. Я использовал красновато-оранжевый для тела, в отличие от темно-синего цвета для {{htmlelement("html")}} элемента, но не стесняйтесь и эксперементируйте.</li>
+ <li><code>padding: 0 20px 20px 20px;</code> — у нас есть четыре значения, установленные для padding, чтобы сделать немного пространства вокруг нашего контента. В этот раз мы не устанавливаем padding на верхней части тела, но делаем 20 пикселей слева, снизу и справа. Значения устанавливаются сверху, справа, снизу, слева, в таком порядке.</li>
+ <li><code>border: 5px solid black;</code> — просто устанавливает сплошную черную рамку шириной 5 пикселей со всех сторон тела.</li>
+</ul>
+
+<h3 id="Позиционирование_и_стилизация_нашего_заголовка_главной_страницы">Позиционирование и стилизация нашего заголовка главной страницы</h3>
+
+<pre class="brush: css notranslate">h1 {
+  margin: 0;
+  padding: 20px 0;
+  color: #00539F;
+  text-shadow: 3px 3px 1px black;
+}</pre>
+
+<p>Вы, возможно, заметили, что есть ужасный разрыв в верхней части тела. Это происходит, потому что браузеры применяют некоторый <strong>стиль по умолчанию</strong> для элемента {{htmlelement("h1")}} (по сравнению с другими), даже если вы не применяли какой-либо CSS вообще! Это может звучать как плохая идея, но мы хотим, чтобы веб-страница без стилей имела базовую читаемость. Чтобы избавиться от разрыва, мы переопределили стиль по умолчанию, установив <code>margin: 0;</code>.</p>
+
+<p>Затем мы установили заголовку верхний и нижний padding на 20 пикселей, и сделали текст заголовка того же цвета, как и цвет фона html.</p>
+
+<p>Здесь, мы использовали одно довольно интересное свойство - это <code>text-shadow</code>, которое применяет тень к текстовому контенту элемента. Оно имеет следующие четыре значения:</p>
+
+<ul>
+ <li>Первое значение пикселей задает <strong>горизонтальное смещение</strong> тени от текста — как далеко она движется поперек: отрицательное значение должно двигать ее влево.</li>
+ <li>Второе значение пикселей задает <strong>вертикальное смещение</strong> тени от текста — как далеко она движется вниз, в этом примере: отрицательное значение должно переместить ее вверх.</li>
+ <li>Третье значение пикселей задает <strong>радиус размытия</strong> тени — большее значение будет означать более размытую тень.</li>
+ <li>Четвертое значение задает основной цвет тени.</li>
+</ul>
+
+<p>И вновь попробуйте поэкспериментировать с различными значениями, чтобы посмотреть, что вы можете придумать.</p>
+
+<h3 id="Центрирование_изображения">Центрирование изображения</h3>
+
+<pre class="brush: css notranslate">img {
+  display: block;
+  margin: 0 auto;
+}</pre>
+
+<p>В заключение, мы отцентрируем изображение, чтобы оно лучше выглядело. Мы можем использовать <code>margin: 0 auto</code> уловку снова, как мы это делали раньше для body, но мы также должны сделать кое-что еще. Элемент {{HTMLElement("body")}} является <strong>блочным</strong>, это значит, что он занимает место на странице и может иметь margin и другие значения отступов, применяемых к нему. Изображения, наоборот, являются <strong>строчными</strong> элементами, то есть они этого не могут. Таким образом, чтобы применить margin к изображению, мы должны дать изображению блочное поведение с помощью <code>display: block;</code>.</p>
+
+<div class="blockIndicator note">
+<p><strong>Примечание: </strong>Приведенные выше инструкции предполагают, что вы используете изображение меньшей ширины, чем заданная для {{HTMLElement("body")}} (600 пикселей). Если ваше изображение больше, тогда оно выйдет за границы {{HTMLElement("body")}} и займет пространство страницы. Чтобы исправить это, вы можете 1) уменьши ширину изображения используя <a href="https://ru.wikipedia.org/wiki/%D0%A0%D0%B0%D1%81%D1%82%D1%80%D0%BE%D0%B2%D1%8B%D0%B9_%D0%B3%D1%80%D0%B0%D1%84%D0%B8%D1%87%D0%B5%D1%81%D0%BA%D0%B8%D0%B9_%D1%80%D0%B5%D0%B4%D0%B0%D0%BA%D1%82%D0%BE%D1%80">графический редактор</a>, или 2) изменить размер изображения используя CSS путем установки свойства {{cssxref("width")}} для <code>&lt;img&gt;</code> элемента меньшего значения (например <code>400 px;</code>).</p>
+</div>
+
+<div class="note">
+<p><strong>Примечание</strong>: Не стоит беспокоиться, если вы еще не понимаете <code>display: block;</code> и различия между блочным/строчным. Вы поймете, когда будете изучать CSS более подробно. Вы можете узнать больше о различных доступных значениях display на нашей странице о свойстве <a href="/ru/docs/Web/CSS/display">display</a>.</p>
+</div>
+
+<h2 id="Заключение">Заключение</h2>
+
+<p>Если вы следовали всем инструкциям в этой статье, вы должны получить страницу, которая выглядит примерно так (вы также можете <a href="http://mdn.github.io/beginner-html-site-styled/">посмотреть нашу версию здесь</a>):</p>
+
+<p><img alt="a mozilla logo, centered, and a header and paragraphs. It now looks nicely styled, with a blue background for the whole page and orange background for the centered main content strip." src="https://mdn.mozillademos.org/files/9455/website-screenshot-final.png" style="display: block; height: 1084px; margin: 0px auto; width: 940px;"></p>
+
+<p>Если вы застряли, вы всегда можете сравнить свою работу с нашим <a href="https://github.com/mdn/beginner-html-site-styled/blob/gh-pages/styles/style.css">готовым примером кода на Github</a>.</p>
+
+<p>Здесь мы узнали только самую поверхность CSS. Чтобы узнать больше, перейдите на нашу <a href="https://developer.mozilla.org/ru/Learn/CSS">страницу изучения CSS</a>.</p>
+
+<p>{{PreviousMenuNext("Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web")}}</p>
+
+<h2 id="В_этом_модуле">В этом модуле</h2>
+
+<ul>
+ <li id="Installing_basic_software"><a href="https://developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web/%D0%A3%D1%81%D1%82%D0%B0%D0%BD%D0%BE%D0%B2%D0%BA%D0%B0_%D0%B1%D0%B0%D0%B7%D0%BE%D0%B2%D0%BE%D0%B3%D0%BE_%D0%BF%D1%80%D0%BE%D0%B3%D1%80%D0%B0%D0%BC%D0%BC%D0%BD%D0%BE%D0%B3%D0%BE_%D0%BE%D0%B1%D0%B5%D1%81%D0%BF%D0%B5%D1%87%D0%B5%D0%BD%D0%B8%D1%8F">Установка базового программного обеспечения</a></li>
+ <li id="What_will_your_website_look_like"><a href="https://developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like">Каким должен быть ваш веб-сайт?</a></li>
+ <li id="Dealing_with_files"><a href="https://developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web/Dealing_with_files">Работа с файлами</a></li>
+ <li id="HTML_basics"><a href="https://developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web/HTML_basics">Основы HTML</a></li>
+ <li id="CSS_basics"><a href="https://developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web/CSS_basics">Основы CSS</a></li>
+ <li id="JavaScript_basics"><a href="https://developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web/JavaScript_basics">Основы JavaScript</a></li>
+ <li id="Publishing_your_website"><a href="https://developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web/Publishing_your_website">Публикация вашего веб-сайта</a></li>
+ <li id="How_the_web_works"><a href="https://developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web/How_the_Web_works">Как работает Веб</a></li>
+</ul>
diff --git a/files/ru/learn/getting_started_with_the_web/dealing_with_files/index.html b/files/ru/learn/getting_started_with_the_web/dealing_with_files/index.html
new file mode 100644
index 0000000000..ec66653d61
--- /dev/null
+++ b/files/ru/learn/getting_started_with_the_web/dealing_with_files/index.html
@@ -0,0 +1,126 @@
+---
+title: Работа с файлами
+slug: Learn/Getting_started_with_the_web/Dealing_with_files
+tags:
+  - Beginner
+  - CodingScripting
+  - Files
+  - Guide
+  - HTML
+  - theory
+  - website
+  - Новичку
+  - Руководство
+  - Файлы
+  - сайт
+translation_of: Learn/Getting_started_with_the_web/Dealing_with_files
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web")}}</div>
+
+<div class="summary">
+<p>Веб-сайт состоит из множества файлов: текстового контента, кода, стилей, медиа-контента, и так далее. Когда вы создаете веб-сайт, вы должны собрать эти файлы в рациональную структуру на вашем локальном компьютере, убедитесь, что они могут общаться друг с другом, и весь ваш контент выглядит правильно, прежде чем вы, в конечном итоге <a href="/ru/Learn/Getting_started_with_the_web/Publishing_your_website">загрузите их на сервер</a>. В статье <em>Работа с файлами</em> обсуждаются некоторые вопросы, о которых вам следует знать, чтобы вы могли рационально настроить файловую структуру для своего веб-сайта.</p>
+</div>
+
+<h2 id="Где_ваш_веб-сайт_должен_располагаться_на_вашем_компьютере">Где ваш веб-сайт должен располагаться на вашем компьютере?</h2>
+
+<p>Когда вы работаете на веб-сайте локально на вашем компьютере, вы должны держать все связанные файлы в одной папке, которая отражает файловую структуру опубликованного веб-сайта на сервере. Эта папка может располагаться где угодно, но вы должны положить её туда, где вы сможете легко её найти, может быть, на ваш рабочий стол, в домашнюю папку или в корень вашего жесткого диска.</p>
+
+<ol>
+ <li>Выберите место для хранения проектов веб-сайта. Здесь, создайте новую папку с именем <code>web-projects</code> (или аналогичной). Это то место, где будут располагаться все ваши проекты сайтов.</li>
+ <li>Внутри этой первой папки, создайте другую папку для хранения вашего первого веб-сайта. Назовите ее <code>test-site</code> (или как-то более творчески).</li>
+</ol>
+
+<h2 id="Небольшое_отступление_о_регистре_и_пробелах">Небольшое отступление о регистре и пробелах</h2>
+
+<p>Вы заметите, что в этой статье, мы просим вас называть папки и файлы полностью в нижнем регистре без пробелов. Это потому что:</p>
+
+<ol>
+ <li>Многие компьютеры, в частности веб-серверы, чувствительны к регистру. Так, например, если вы положили изображение на свой веб-сайт в <code>test-site/MyImage.jpg</code>, а затем в другом файле вы пытаетесь вызвать изображение как <code>test-site/myimage.jpg</code>, это может не сработать.</li>
+ <li>Браузеры, веб-серверы и языки программирования не обрабатывают пробелы последовательно. Например, если вы используете пробелы в имени файла, некоторые системы могут отнестись к имени файла как к двум именам файлов. Некоторые серверы заменяют пробелы в вашем имени файла на "%20" (символьный код для пробелов в URI), в результате чего все ваши ссылки будут сломаны. Лучше разделять слова дефисами, чем нижними подчеркиваниями: <code>my-file.html</code> лучше чем <code>my_file.html</code>.</li>
+</ol>
+
+<p>Говоря простым языком, вы должны использовать дефис для имен файлов. Поисковая система Google рассматривает дефис как разделитель слов, но не относится к подчеркиванию таким образом. По этим причинам, лучше всего приобрести привычку писать названия ваших папок и файлов в нижнем регистре без пробелов, разделяя слова дефисами, по крайней мере, пока вы не поймете, что вы делаете. Так в будущем вы столкнетесь с меньшим количеством проблем.</p>
+
+<h2 id="Какую_структуру_должен_иметь_ваш_веб-сайт">Какую структуру должен иметь ваш веб-сайт?</h2>
+
+<p>Далее, давайте взглянем на то, какую структуру должен иметь наш тестовый сайт. Наиболее распространенные вещи, присутствующие в любом проекте сайта, которые мы создаем: индексный файл HTML и папки, содержащие изображения, файлы стилей и файлы скриптов. Давайте создадим их сейчас:</p>
+
+<ol>
+ <li><code><strong>index.html</strong></code>: Этот файл обычно содержит контент домашней страницы, то есть текст и изображения, которые люди видят, когда они впервые попадают на ваш сайт. Используя ваш текстовый редактор, создайте новый файл с именем <code>index.html</code> и сохраните его прямо внутри вашей папки <code>test-site</code>.</li>
+ <li><strong>Папка <code>images</code></strong>: Эта папка будет содержать все изображения, которые вы используете на вашем сайте. Создайте папку с именем <code>images</code> внутри вашей папки <code>test-site</code>.</li>
+ <li><strong>Папка <code>styles</code></strong>: Эта папка будет содержать CSS код, используемый для стилизации вашего контента (например, настройка текста и цвета фона). Создайте папку с именем <code>styles</code> внутри вашей папки <code>test-site</code>.</li>
+ <li><strong>Папка <code>scripts</code></strong>: Эта папка будет содержать весь JavaScript код, используемый для добавления интерактивных функций на вашем сайте (например, кнопки которые загружают данные при клике). Создайте папку с именем <code>scripts</code> внутри вашей папки <code>test-site</code>.</li>
+</ol>
+
+<div class="note">
+<p><strong>Примечание</strong>: На компьютерах под управлением Windows у вас могут возникнуть проблемы с отображением имен файлов, поскольку у Windows есть опция <strong>Скрывать расширения для известных типов файлов</strong>, включенная по умолчанию. Обычно вы можете отключить ее, перейдя в проводник, выбрать вариант <strong>Свойства папки...</strong> и снять флажок <strong>Скрывать расширения для зарегистрированных типов файлов</strong>, затем щёлкнуть <strong>OK</strong>. Для получения более точной информации, охватывающей вашу версию Windows, вы можете произвести поиск в Интернете.</p>
+</div>
+
+<h2 id="Файловые_пути">Файловые пути</h2>
+
+<p>Для того, чтобы файлы общались друг с другом, вы должны указать файлам путь друг к другу - обычно один файл знает, где находится другой. Чтобы продемонстрировать это, мы вставим немного HTML в наш файл <code>index.html</code> и научим его отображать изображение, которое вы выбрали в статье <a href="/ru/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like">"Каким должен быть ваш веб-сайт?"</a></p>
+
+<ol>
+ <li>Скопируйте изображение, которое вы выбрали ранее, в папку <code>images</code>.</li>
+ <li>Откройте ваш файл <code>index.html</code> и вставьте следующий код в файл именно в таком виде. Не беспокойтесь о том, что все это значит - позже в этом руководстве мы рассмотрим сруктуры более подробно.
+  <pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta charset="utf-8"&gt;
+    &lt;title&gt;Моя тестовая страница&lt;/title&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    &lt;img src="" alt="Моё тестовое изображение"&gt;
+  &lt;/body&gt;
+&lt;/html&gt; </pre>
+ </li>
+ <li>Строка <code>&lt;img src="" alt="Моё тестовое изображение"&gt;</code> - это HTML код, который вставляет изображение на страницу. Мы должны сказать HTML, где находится изображение. Изображение находится внутри папки <em>images</em>, которая находится в той же директории что и <code>index.html</code>. Чтобы спуститься вниз по нашей файловой структуре от <code>index.html</code> до нашего изображения, путь к файлу должен выглядеть так <code>images/your-image-filename</code>. Например наше изображение, названное <code>firefox-icon.png</code>, имеет такой путь к файлу: <code>images/firefox-icon.png</code>.</li>
+ <li>Вставьте путь к файлу в ваш HTML код между двойными кавычками <code>src=""</code>.</li>
+ <li>Сохраните ваш HTML файл, а затем загрузите его в вашем браузере (двойной щелчок по файлу). Вы должны увидеть вашу новую веб-страницу, отображающую ваше изображение!</li>
+</ol>
+
+<p><img alt="A screenshot of our basic website showing just the firefox logo - a flaming fox wrapping the world" src="https://mdn.mozillademos.org/files/9229/website-screenshot.png" style="display: block; height: 542px; margin: 0px auto; width: 690px;"></p>
+
+<p>Некоторые общие правила о путях к файлам:</p>
+
+<ul>
+ <li>Для ссылки на целевой файл в той же директории, что и вызывающий HTML файл, просто используйте имя файла, например, <code>my-image.jpg</code>.</li>
+ <li>Для ссылки на файл в поддиректории, напишите имя директории в начале пути, плюс косую черту (forwardslash, слеш), например: <code>subdirectory/my-image.jpg</code>.</li>
+ <li>Для ссылки на целевой файл в директории <strong>выше</strong> вызывающего HTML файла, напишите две точки. Например, если <code>index.html</code> находится внутри подпапки <code>test-site</code>, а <code>my-image.png</code> - внутри <code>test-site</code>, вы можете обратиться к <code>my-image.png</code> из <code>index.html</code>, используя <code>../my-image.png</code>.</li>
+ <li>Вы можете комбинировать их так, как вам нравится, например <code>../subdirectory/another-subdirectory/my-image.png</code>.</li>
+</ul>
+
+<p>На данный момент это все, что вам нужно знать</p>
+
+<div class="note">
+<p><strong>Примечание</strong>: Файловая система Windows стремится использовать обратный слеш (backslash), а не косую черту (forwardslash), например <code>C:\windows</code>. Это не имеет значения, даже если вы разрабатываете веб-сайт на Windows, вы все равно должны использовать обычные слеши в вашем коде.</p>
+</div>
+
+<h2 id="Что_должно_быть_сделано">Что должно быть сделано?</h2>
+
+<p>К настоящему моменту структура вашей папки должна выглядеть примерно так:</p>
+
+<p><img alt="A file structure in mac os x finder, showing an images folder with an image in, empty scripts and styles folders, and an index.html file" src="https://mdn.mozillademos.org/files/9231/file-structure.png" style="display: block; height: 577px; margin: 0px auto; width: 929px;"></p>
+
+<p>{{PreviousMenuNext("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web")}}</p>
+
+<p> </p>
+
+<p> </p>
+
+<h2 id="В_этом_модуле">В этом модуле</h2>
+
+<ul>
+ <li id="Installing_basic_software"><a href="https://developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web/%D0%A3%D1%81%D1%82%D0%B0%D0%BD%D0%BE%D0%B2%D0%BA%D0%B0_%D0%B1%D0%B0%D0%B7%D0%BE%D0%B2%D0%BE%D0%B3%D0%BE_%D0%BF%D1%80%D0%BE%D0%B3%D1%80%D0%B0%D0%BC%D0%BC%D0%BD%D0%BE%D0%B3%D0%BE_%D0%BE%D0%B1%D0%B5%D1%81%D0%BF%D0%B5%D1%87%D0%B5%D0%BD%D0%B8%D1%8F">Установка базового программного обеспечения</a></li>
+ <li id="What_will_your_website_look_like"><a href="https://developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like">Каким должен быть ваш веб-сайт?</a></li>
+ <li id="Dealing_with_files"><a href="https://developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web/Dealing_with_files">Работа с файлами</a></li>
+ <li id="HTML_basics"><a href="https://developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web/HTML_basics">Основы HTML</a></li>
+ <li id="CSS_basics"><a href="https://developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web/CSS_basics">Основы CSS</a></li>
+ <li id="JavaScript_basics"><a href="https://developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web/JavaScript_basics">Основы JavaScript</a></li>
+ <li id="Publishing_your_website"><a href="https://developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web/Publishing_your_website">Публикация вашего веб-сайта</a></li>
+ <li id="How_the_web_works"><a href="https://developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web/How_the_Web_works">Как работает Веб</a></li>
+</ul>
+
+<p> </p>
diff --git a/files/ru/learn/getting_started_with_the_web/how_the_web_works/index.html b/files/ru/learn/getting_started_with_the_web/how_the_web_works/index.html
new file mode 100644
index 0000000000..27175cb898
--- /dev/null
+++ b/files/ru/learn/getting_started_with_the_web/how_the_web_works/index.html
@@ -0,0 +1,113 @@
+---
+title: Как работает Веб
+slug: Learn/Getting_started_with_the_web/How_the_Web_works
+tags:
+  - Beginner
+  - Client
+  - DNS
+  - HTTP
+  - IP
+  - Infrastructure
+  - Learn
+  - TCP
+  - Инфраструтура
+  - Клиент
+  - Новичку
+  - Обучение
+  - Сервер
+translation_of: Learn/Getting_started_with_the_web/How_the_Web_works
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenu("Learn/Getting_started_with_the_web/Publishing_your_website", "Learn/Getting_started_with_the_web")}}</div>
+
+<div class="summary">
+<p><em>Как работает Веб</em> даст упрощенное представление о том, что происходит при просмотре веб-страницы в браузере на вашем компьютере или телефоне.</p>
+</div>
+
+<p>Эта теория не так важна для написания веб-кода в краткосрочной перспективе, но в скором времени вы действительно начнете извлекать выгоду из понимания того, что происходит в фоновом режиме.</p>
+
+<h2 id="Клиенты_и_серверы">Клиенты и серверы</h2>
+
+<p>Компьютеры, подключенные к сети называются клиентами и серверами. Упрощенная схема того, как они взаимодействуют, может выглядеть следующим образом:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8973/Client-server.jpg" style="height: 123px; width: 336px;"></p>
+
+<ul>
+ <li>Клиенты являются обычными пользователями, подключенными к Интернету посредством устройств (например, компьютер подключен к Wi-Fi, или ваш телефон подключен к мобильной сети) и программного обеспечения, доступного на этих устройствах (как правило, браузер, например, Firefox или Chrome).</li>
+ <li>Серверы - это компьютеры, которые хранят веб-страницы, сайты или приложения. Когда клиентское устройство пытается получить доступ к веб-странице, копия страницы загружается с сервера на клиентский компьютер для отображения в браузере пользователя.</li>
+</ul>
+
+<h2 id="Остальные_части_панели_инструментов">Остальные части панели инструментов</h2>
+
+<p>Клиент и сервер, о которых мы рассказали выше, не раскрывают всю суть. Есть много других компонентов, и мы опишем их ниже.</p>
+
+<p>А сейчас давайте представим, что Веб - это дорога. Одна сторона дороги является клиентом, который представляет собой ваш дом. Другая сторона дороги является сервером, который представляет собой магазин. Вы хотите что-то купить в нём.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9749/road.jpg" style="display: block; height: 427px; margin: 0px auto; width: 640px;"></p>
+
+<p>Помимо клиента и сервера, мы также должны уделить внимание:</p>
+
+<ul>
+ <li><strong>Ваше Интернет-подключение</strong>: Позволяет отправлять и принимать данные по сети. Оно подобно улице между домом и магазином.</li>
+ <li><strong>TCP/IP</strong>: Протокол Управления Передачей и Интернет Протокол являются коммуникационными протоколами, которые определяют, каким образом данные должны передаваться по сети. Они как транспортные средства, которые позволяют сделать заказ, пойти в магазин и купить ваши товары. В нашем примере, это как автомобиль или велосипед (или собственные ноги).</li>
+ <li><strong>DNS</strong>: Система Доменных Имён напоминает записную книжку для веб-сайтов. Когда вы вводите веб-адрес в своем браузере, браузер обращается к DNS, чтобы найти реальный адрес веб-сайта, прежде чем он сможет его получить. Браузеру необходимо выяснить, на каком сервере живет сайт, поэтому он может отправлять HTTP-сообщения в нужное место (см. Ниже). Это похоже на поиск адреса магазина, чтобы вы могли попасть в него.</li>
+ <li><strong>HTTP</strong>: Протокол Передачи Гипертекста - это {{Glossary("Protocol", "протокол")}}, который определяет язык для клиентов и серверов, чтобы общаться друг с другом. Он, как язык, который вы используете, чтобы заказать ваш товар.</li>
+ <li><strong>Файлы компонентов</strong>: сайт состоит из нескольких различных файлов, которые подобны различным отделам с товарами в магазине. Эти файлы бывают двух основных типов:
+  <ul>
+   <li><strong>Файлы кода</strong>: сайты построены преимущественно на HTML, CSS и JavaScript, хотя вы познакомитесь с другими технологиями чуть позже.</li>
+   <li><strong>Материалы</strong>: это собирательное название для всех других вещей, составляющих сайт, такие как изображения, музыка, видео, документы Word и PDF.</li>
+  </ul>
+ </li>
+</ul>
+
+<h2 id="Что_же_на_самом_деле_происходит">Что же на самом деле происходит?</h2>
+
+<p>Когда вы вводите веб-адрес в свой браузер (для нашей аналогии - посещаете магазин):</p>
+
+<ol>
+ <li>Браузер обращается к DNS серверу и находит реальный адрес сервера, на котором "живет" сайт (Вы находите адрес магазина).</li>
+ <li>Браузер посылает HTTP запрос к серверу, запрашивая его отправить копию сайта для клиента (Вы идёте в магазин и заказываете товар). Это сообщение и все остальные данные, передаваемые между клиентом и сервером, передаются по интернет-соединению с использованием протокола TCP/IP.</li>
+ <li>Если сервер одобряет запрос клиента, сервер отправляет клиенту статус "200 ОК", который означает: "Конечно, вы можете посмотреть на этот сайт! Вот он", а затем начинает отправку файлов сайта в браузер в виде небольших порций, называемых пакетными данными (магазин выдает вам ваш товар или вам привозят его домой).</li>
+ <li>Браузер собирает маленькие куски в полноценный сайт и показывает его вам (товар прибывает к вашей двери — новые вещи, потрясающе!).</li>
+</ol>
+
+<h2 id="DNS">DNS</h2>
+
+<p>Реальные веб-адреса - неудобные, незапоминающиеся строки, которые Вы вводите в адресную строку, чтобы найти ваши любимые веб-сайты. Эти строки состоят из чисел, например: <code>63.245.215.20</code>.</p>
+
+<p>Такой набор чисел называется {{Glossary("IP Address", "IP-адресом")}} и представляет собой уникальное местоположение в Интернете. Впрочем, его не очень легко запомнить, правда? Вот почему изобрели DNS. Это специальные сервера, которые связывают веб-адрес, который вы вводите в браузере (например, "mozilla.org"), с реальным IP-адресом сайта.</p>
+
+<p>Сайты можно найти непосредственно через их IP-адреса. Вы можете найти IP-адрес веб-сайта, введя его домен в инструмент, как <a href="https://ipinfo.info/html/ip_checker.php">IP Checker</a>.</p>
+
+<h2 id="Пакеты">Пакеты</h2>
+
+<p>Ранее мы использовали термин "пакеты", чтобы описать формат, в котором данные передаются от сервера к клиенту. Что мы имеем в виду? В основном, когда данные передаются через Интернет, они отправляются в виде тысячи мелких кусочков, так что множество разных пользователей могут скачивать один и тот же сайт одовременно. Если бы сайты отправлялись одним большим куском, тогда бы только один пользователь мог скачать его за один раз, и это, очевидно, сделало бы пользование интернетом не эффективным и не очень радостным.</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/ru/Learn/How_the_Internet_works">Как работает Интернет</a></li>
+ <li><a href="https://dev.opera.com/articles/http-basic-introduction/">HTTP — Протокол уровня приложений</a></li>
+ <li><a href="https://dev.opera.com/articles/http-lets-get-it-on/">HTTP: Давайте изучим его!</a></li>
+ <li><a href="https://dev.opera.com/articles/http-response-codes/">HTTP: Коды ответов</a></li>
+</ul>
+
+<h2 id="Благодарность">Благодарность</h2>
+
+<p>Фото улицы: <a href="https://www.flickr.com/photos/kdigga/9110990882/in/photolist-cXrKFs-c1j6hQ-mKrPUT-oRTUK4-7jSQQq-eT7daG-cZEZrh-5xT9L6-bUnkip-9jAbvr-5hVkHn-pMfobT-dm8JuZ-gjwYYM-pREaSM-822JRW-5hhMf9-9RVQNn-bnDMSZ-pL2z3y-k7FRM4-pzd8Y7-822upY-8bFN4Y-kedD87-pzaATg-nrF8ft-5anP2x-mpVky9-ceKc9W-dG75mD-pY62sp-gZmXVZ-7vVJL9-h7r9AQ-gagPYh-jvo5aM-J32rC-ibP2zY-a4JBcH-ndxM5Y-iFHsde-dtJ15p-8nYRgp-93uCB1-o6N5Bh-nBPUny-dNJ66P-9XWmVP-efXhxJ">Street composing</a>, <a href="https://www.flickr.com/photos/kdigga/">Kevin D</a>.</p>
+
+<p>{{PreviousMenu("Learn/Getting_started_with_the_web/Publishing_your_website", "Learn/Getting_started_with_the_web")}}</p>
+
+<h2 id="В_этом_модуле">В этом модуле</h2>
+
+<ul>
+ <li id="Installing_basic_software"><a href="https://developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web/%D0%A3%D1%81%D1%82%D0%B0%D0%BD%D0%BE%D0%B2%D0%BA%D0%B0_%D0%B1%D0%B0%D0%B7%D0%BE%D0%B2%D0%BE%D0%B3%D0%BE_%D0%BF%D1%80%D0%BE%D0%B3%D1%80%D0%B0%D0%BC%D0%BC%D0%BD%D0%BE%D0%B3%D0%BE_%D0%BE%D0%B1%D0%B5%D1%81%D0%BF%D0%B5%D1%87%D0%B5%D0%BD%D0%B8%D1%8F">Установка базового программного обеспечения</a></li>
+ <li id="What_will_your_website_look_like"><a href="https://developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like">Каким должен быть ваш веб-сайт?</a></li>
+ <li id="Dealing_with_files"><a href="https://developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web/Dealing_with_files">Работа с файлами</a></li>
+ <li id="HTML_basics"><a href="https://developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web/HTML_basics">Основы HTML</a></li>
+ <li id="CSS_basics"><a href="https://developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web/CSS_basics">Основы CSS</a></li>
+ <li id="JavaScript_basics"><a href="https://developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web/JavaScript_basics">Основы JavaScript</a></li>
+ <li id="Publishing_your_website"><a href="https://developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web/Publishing_your_website">Публикация вашего веб-сайта</a></li>
+ <li id="How_the_web_works"><a href="https://developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web/How_the_Web_works">Как работает Веб</a></li>
+</ul>
diff --git a/files/ru/learn/getting_started_with_the_web/html_basics/index.html b/files/ru/learn/getting_started_with_the_web/html_basics/index.html
new file mode 100644
index 0000000000..ecfa21217d
--- /dev/null
+++ b/files/ru/learn/getting_started_with_the_web/html_basics/index.html
@@ -0,0 +1,229 @@
+---
+title: Основы HTML
+slug: Learn/Getting_started_with_the_web/HTML_basics
+tags:
+  - HTML
+  - Web
+  - Новичку
+  - Обучение
+translation_of: Learn/Getting_started_with_the_web/HTML_basics
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/Getting_started_with_the_web/Dealing_with_files", "Learn/Getting_started_with_the_web/CSS_basics", "Learn/Getting_started_with_the_web")}}</div>
+
+<div class="summary">
+<p>HTML (Hypertext Markup Language) - это код, который используется для структурирования и отображения веб-страницы и её контента. Например, контент может быть структурирован внутри множества параграфов, маркированных списков или с использованием изображений и таблиц данных. Как видно из названия, эта статья даст вам базовое понимание HTML и его функций.</p>
+</div>
+
+<h2 id="Что_такое_HTML_на_самом_деле">Что такое HTML на самом деле?</h2>
+
+<p>HTML не является языком программирования; это <em>язык разметки</em>, и используется, чтобы сообщать вашему браузеру, как отображать веб-страницы, которые вы посещаете. Он может быть сложным или простым, в зависимости от того, как хочет веб-дизайнер. HTML состоит из ряда <strong>{{Glossary("element", "элементов")}}</strong>, которые вы используете, чтобы вкладывать или оборачивать различные части контента, чтобы заставить контент отображаться или действовать определенным образом. Ограждающие {{Glossary("tag", "теги")}} могут сделать слово или изображение ссылкой на что-то еще, могут сделать слова курсивом, сделать шрифт больше или меньше и так далее. Например, возьмем следующую строку контента:</p>
+
+<pre class="notranslate">Моя кошка очень раздражена</pre>
+
+<p>Если бы мы хотели, чтобы строка стояла сама по себе, мы могли бы указать, что это абзац, заключая его в теги абзаца:</p>
+
+<pre class="brush: html notranslate">&lt;p&gt;Моя кошка очень раздражена&lt;/p&gt;</pre>
+
+<h3 id="Анатомия_HTML_элемента">Анатомия HTML элемента</h3>
+
+<p>Давайте рассмотрим элемент абзаца более подробно.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9347/grumpy-cat-small.png" style="display: block; height: 255px; margin: 0px auto; width: 821px;"></p>
+
+<p>Главными частями нашего элемента являются:</p>
+
+<ol>
+ <li><strong>Открывающий тег (Opening tag)</strong>: Состоит из имени элемента (в данном случае, "p"), заключенного в открывающие и закрывающие <strong>угловые скобки</strong>.  Открывающий тег указывает, где элемент начинается или начинает действовать, в данном случае — где начинается абзац.</li>
+ <li><strong>Закрывающий тег (Closing tag):</strong> Это то же самое, что и открывающий тег, за исключением того, что он включает в себя косую черту перед именем элемента. Закрывающий элемент указывает, где элемент заканчивается, в данном случае — где заканчивается абзац. Отсутствие закрывающего тега является одной из наиболее распространенных ошибок начинающих и может приводить к странным результатам.</li>
+ <li><strong>Контент (Content)</strong>: Это контент элемента, который в данном случае является просто текстом.</li>
+ <li><strong>Элемент(Element)</strong>: Открывающий тег, закрывающий тег и контент вместе составляют элемент.</li>
+</ol>
+
+<p>Элементы также могут иметь атрибуты, которые выглядят так:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9345/grumpy-cat-attribute-small.png" style="display: block; height: 156px; margin: 0px auto; width: 1287px;"></p>
+
+<p>Атрибуты содержат дополнительную информацию об элементе, которую вы не хотите показывать в фактическом контенте. В данном случае, <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">class</span></font> это <em>имя</em> <em>атрибута,</em> а <code>editor-note</code> это <em>значение атрибута</em>. Класс позволяет дать элементу идентификационное имя, которое может позже использоваться, чтобы обращаться к элементу с информацией о стиле и прочих вещах.</p>
+
+<p>Атрибут всегда должен иметь:</p>
+
+<ol>
+ <li>Пробел между ним и именем элемента (или предыдущим атрибутом, если элемент уже имеет один или несколько атрибутов).</li>
+ <li>Имя атрибута, за которым следует знак равенства.</li>
+ <li>Значение атрибута, заключенное с двух сторон в кавычки.</li>
+</ol>
+
+<h3 id="Вложенные_элементы">Вложенные элементы</h3>
+
+<p>Вы также можете располагать элементы внутри других элементов — это называется <strong>вложением</strong>. Если мы хотим заявить, что наша кошка <strong>очень</strong> раздражена, мы можем заключить слово "очень" в элемент {{htmlelement("strong")}} , который указывает, что слово должно быть сильно акцентированно:</p>
+
+<pre class="brush: html notranslate">&lt;p&gt;Моя кошка &lt;strong&gt;очень&lt;/strong&gt; раздражена.&lt;/p&gt;</pre>
+
+<p>Вы, однако, должны убедиться, что ваши элементы правильно вложены: в примере выше мы открыли первым элемент {{htmlelement("p")}}, затем элемент {{htmlelement("strong")}}, потом мы должны закрыть сначала элемент {{htmlelement("strong")}}, затем {{htmlelement("p")}}. Приведенное ниже неверно:</p>
+
+<pre class="example-bad brush: html notranslate">&lt;p&gt;Моя кошка &lt;strong&gt;очень раздражена.&lt;/p&gt;&lt;/strong&gt;</pre>
+
+<p>Элементы должны открываться и закрываться правильно, поэтому они явно располагаются внутри или снаружи друг друга. Если они перекрываются, как в примере выше,  ваш веб-браузер будет пытаться сделать наилучшее предположение на основе того, что вы пытались сказать, что может привести к неожиданным результатам. Так что не стоит этого делать!</p>
+
+<h3 id="Пустые_элементы">Пустые элементы</h3>
+
+<p>Некоторые элементы не имеют контента, и называются <strong>пустыми элементами</strong>. Возьмем  элемент {{htmlelement("img")}}, который уже имеется в нашем HTML:</p>
+
+<pre class="brush: html notranslate">&lt;img src="images/firefox-icon.png" alt="Моё тестовое изображение"&gt;</pre>
+
+<p>Он содержит два атрибута, но не имеет закрывающего тега <code>&lt;/img&gt;</code>, и никакого внутреннего контента. Это потому, что элемент изображения не оборачивает контент для влияния на него. Его целью является вставка изображения в HTML страницу в нужном месте.</p>
+
+<h3 id="Анатомия_HTML_документа">Анатомия HTML документа</h3>
+
+<p>Мы завершили изучение основ отдельных HTML элементов, но они не очень полезны сами по себе. Теперь мы посмотрим, как отдельные элементы объединяются в целую HTML страницу. Давайте вернемся к коду, который мы записывали в наш <code>index.html</code> (с которым мы впервые встретились в статье <a href="/ru/Learn/Getting_started_with_the_web/Dealing_with_files">Работа с файлами</a>):</p>
+
+<pre class="brush: html notranslate">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta charset="utf-8"&gt;
+    &lt;title&gt;Моя тестовая страница&lt;/title&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    &lt;img src="images/firefox-icon.png" alt="Моё тестовое изображение"&gt;
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p>Здесь мы имеем:</p>
+
+<ul>
+ <li><code>&lt;!DOCTYPE html&gt;</code> — доктайп. В прошлом, когда HTML был молод (около 1991/1992), доктайпы должны были выступать в качестве ссылки на набор правил, которым HTML страница должна была следовать, чтобы считаться хорошим HTML, что могло означать автоматическую проверку ошибок и другие полезные вещи. Однако в наши дни, никто не заботится об этом, и они на самом деле просто исторический артефакт, который должен быть включен для того, что бы все работало правильно. На данный момент это все, что вам нужно знать.</li>
+ <li><code>&lt;html&gt;&lt;/html&gt;</code> — элемент {{htmlelement("html")}}. Этот элемент оборачивает весь контент на всей странице, и иногда известен как корневой элемент.</li>
+ <li><code>&lt;head&gt;&lt;/head&gt;</code> — элемент {{htmlelement("head")}}. Этот элемент выступает в качестве контейнера для всего, что вы пожелаете включить на HTML страницу, но<em> не являющегося </em>контентом, который вы показываете пользователям вашей страницы. К ним относятся такие вещи, как ключевые слова и описание страницы, которые будут появляться в результатах поиска, CSS стили нашего контента, кодировка и многое другое.</li>
+ <li><code>&lt;body&gt;&lt;/body&gt;</code> — элемент {{htmlelement("body")}}. В нем содержится <em>весь</em> контент, который вы хотите показывать пользователям, когда они посещают вашу страницу, будь то текст, изображения, видео, игры, проигрываемые аудиодорожки или что-то еще.</li>
+ <li><code>&lt;meta charset="utf-8"&gt;</code> — этот элемент устанавливает UTF-8 кодировку вашего документа, которая включает в себя большинство символов из всех известных человечеству языков. По сути, теперь документ может обрабатывать любой текстовый контент, который вы в него вложите. Нет причин не устанавливать её, так как это может помочь избежать некоторых проблем в дальнейшем.</li>
+ <li><code>&lt;title&gt;&lt;/title&gt;</code> — элемент {{htmlelement("title")}}. Этот элемент устанавливает заголовок для вашей страницы, который является названием, появляющимся на вкладке браузера загружаемой страницы, и используется для описания страницы, когда вы добавляете ее в закладки/избранное.</li>
+</ul>
+
+<h2 id="Изображения">Изображения</h2>
+
+<p>Давайте снова обратим наше внимание на элемент {{htmlelement("img", "изображения")}}:</p>
+
+<pre class="brush: html notranslate">&lt;img src="images/firefox-icon.png" alt="Mоё тестовое изображение"&gt;</pre>
+
+<p>Как было сказано раньше, код встраивает изображение на нашу страницу в нужном месте. Это делается с помощью атрибута <code>src</code> (source, источник), который содержит путь к нашему файлу изображения.</p>
+
+<p>Мы также включили атрибут <code>alt</code> (alternative, альтернатива). В этом атрибуте, вы указываете поясняющий текст для пользователей, которые не могут увидеть изображение, возможно, по следующим причинам:</p>
+
+<ol>
+ <li>У них присутствуют нарушения зрения. Пользователи со значительным нарушением зрения часто используют инструменты, называемые Screen Readers (экранные дикторы), которые читают для них альтернативный текст.</li>
+ <li>Что-то пошло не так, в результате чего изображение не отобразилось. Например, попробуйте намеренно изменить путь в вашем атрибуте <code>src</code>, сделав его неверным. Если вы сохраните и перезагрузите страницу, то вы должны увидеть что-то подобное вместо изображения:</li>
+</ol>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9349/alt-text-example.png" style="display: block; height: 36px; margin: 0px auto; width: 108px;"></p>
+
+<p>Альтернативный текст - это "пояснительный текст". Он должен предоставить читателю достаточно информации, чтобы иметь представление о том, что передает изображение. В этом примере наш текст "My test image" ("Моё тестовое изображение") не годится. Намного лучшей альтернативой для нашего логотипа Firefox будет "The Firefox logo: a flaming fox surrounding the Earth" ("Логотип Firefox: огненный Лис вокруг Земли").</p>
+
+<p>Сейчас попробуйте придумать более подходящий альтернативный текст для вашего изображения.</p>
+
+<div class="note">
+<p><strong>Примечание</strong>: Узнайте больше о <a href="/ru/docs/Web/Accessibility">специальных возможностях</a>.</p>
+</div>
+
+<h2 id="Разметка_текста">Разметка текста</h2>
+
+<p>В этом разделе рассмотрим некоторые из основных HTML элементов, которые вы будете использовать для разметки текста.</p>
+
+<h3 id="Заголовки">Заголовки</h3>
+
+<p>Элементы заголовка позволяют вам указывать определенные части вашего контента в качестве заголовков или подзаголовков. Точно так же, как книга имеет название, названия глав и подзаголовков, HTML документ может содержать то же самое. HTML включает шесть уровней заголовков {{htmlelement("h1")}}–{{htmlelement("h6")}}, хотя обычно вы будете использовать не более 3-4 :</p>
+
+<pre class="brush: html notranslate">&lt;h1&gt;Мой главный заголовок&lt;/h1&gt;
+&lt;h2&gt;Мой заголовок верхнего уровня&lt;/h2&gt;
+&lt;h3&gt;Мой подзаголовок&lt;/h3&gt;
+&lt;h4&gt;Мой под-подзаголовок&lt;/h4&gt;</pre>
+
+<p>Теперь попробуйте добавить подходящее название для вашей HTML страницы, чуть выше  элемента {{htmlelement("img")}}.</p>
+
+<h3 id="Абзацы">Абзацы</h3>
+
+<p>Как было сказано раньше, элемент {{htmlelement("p")}} предназначен для абзацев текста; вы будете использовать их регулярно при разметке текстового контента:</p>
+
+<pre class="brush: html notranslate">&lt;p&gt;Это одиночный абзац&lt;/p&gt;</pre>
+
+<p>Добавьте свой образец текста (вы создавали его в статье <a href="/ru/Learn/Getting_started_with_the_web/What_should_your_web_site_be_like"><em>Каким должен быть ваш веб-сайт?</em></a>) в один или несколько абзацев, расположенных прямо под элементом {{htmlelement("img")}}.</p>
+
+<h3 id="Списки">Списки</h3>
+
+<p>Большая часть веб-контента является списками и HTML имеет специальные элементы для них. Разметка списка всегда состоит по меньшей мере из двух элементов. Наиболее распространенными типами списков являются нумерованные и ненумерованные списки:</p>
+
+<ol>
+ <li><strong>Ненумерованные списки</strong> - это списки, где порядок пунктов не имеет значения, как в списке покупок. Они оборачиваются в элемент {{htmlelement("ul")}}.</li>
+ <li><strong>Нумерованные списки -</strong> это списки, где порядок пунктов имеет значение, как в рецепте. Они оборачиваются в элемент {{htmlelement("ol")}}.</li>
+</ol>
+
+<p>Каждый пункт внутри списков располагается внутри элемента {{htmlelement("li")}} (list item, элемент списка).</p>
+
+<p>Например, если мы хотим включить часть следующего фрагмента абзаца в список:</p>
+
+<pre class="brush: html notranslate">&lt;p&gt;Mozilla, мы являемся мировым сообществом технологов, мыслителей и строителей, работающих вместе ... &lt;/p&gt;</pre>
+
+<p>Мы могли бы изменить разметку на эту:</p>
+
+<pre class="brush: html notranslate">&lt;p&gt;Mozilla, мы являемся мировым сообществом&lt;/p&gt;
+
+&lt;ul&gt;
+  &lt;li&gt;технологов&lt;/li&gt;
+  &lt;li&gt;мыслителей&lt;/li&gt;
+  &lt;li&gt;строителей&lt;/li&gt;
+&lt;/ul&gt;
+
+&lt;p&gt;работающих вместе ... &lt;/p&gt;</pre>
+
+<p>Попробуйте добавить упорядоченный или неупорядоченный список на свою страницу.</p>
+
+<h2 id="Ссылки">Ссылки</h2>
+
+<p>Ссылки очень важны — это то, что делает Интернет Интернетом. Чтобы добавить ссылку, нам нужно использовать простой элемент — {{htmlelement("a")}} — <em>a</em> это сокращение от "anchor" ("якорь"). Чтобы текст в вашем абзаце стал ссылкой, выполните следующие действия:</p>
+
+<ol>
+ <li>Выберите некоторый текст. Мы выбрали текст "Манифест Mozilla".</li>
+ <li>Оберните текст в элемент {{htmlelement("a")}}, например так:
+  <pre class="brush: html notranslate">&lt;a&gt;Манифест Mozilla&lt;/a&gt;</pre>
+ </li>
+ <li>Задайте элементу {{htmlelement("a")}} атрибут<strong> </strong><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">href</span></font>, например так:
+  <pre class="brush: html notranslate">&lt;a href=""&gt;Манифест Mozilla&lt;/a&gt;</pre>
+ </li>
+ <li>Заполните значение этого атрибута веб-адресом, на который вы хотите указать ссылку:
+  <pre class="brush: html notranslate">&lt;a href="https://www.mozilla.org/ru/about/manifesto/details/"&gt;Манифест Mozilla&lt;/a&gt;</pre>
+ </li>
+</ol>
+
+<p>Вы можете получить неожиданные результаты, если в самом начале веб-адреса вы опустите <code>https://</code> или <code>http://</code> часть, называемую <em>протоколом</em>. После создания ссылки, кликните по ней, чтобы убедиться, что она направляет вас туда, куда вы хотели.</p>
+
+<div class="note">
+<p><code>href</code> сначала может выглядеть довольно непонятым выбором для имени атрибута. Если у вас возникли проблемы с тем, чтобы запомнить его, можете запомнить, что атрибут href образуется как <em><strong>h</strong>ypertext <strong>ref</strong>erence </em>("гипертекстовая ссылка").</p>
+</div>
+
+<p>Теперь добавьте ссылку на вашу страницу, если вы еще не сделали этого.</p>
+
+<h2 id="Заключение">Заключение</h2>
+
+<p>Если вы следовали всем инструкциям в этой статье, то вы должны увидеть в конечном итоге страницу, аналогичную рисунку ниже (вы также можете <a href="http://mdn.github.io/beginner-html-site/">посмотреть ее здесь</a>):<br>
+ <br>
+ <img alt="A web page screenshot showing a firefox logo, a heading saying mozilla is cool, and two paragraphs of filler text" src="https://mdn.mozillademos.org/files/9351/finished-test-page-small.png" style="display: block; height: 838px; margin: 0px auto; width: 716px;"></p>
+
+<p>Если вы застряли, вы всегда можете сравнить свою работу с нашим <a href="https://github.com/mdn/beginner-html-site/blob/gh-pages/index.html">готовым примером кода</a> на GitHub.</p>
+
+<p>Здесь вы узнали только самую поверхность HTML. Чтобы узнать больше, перейдите на страницу <a href="/ru/Learn/HTML">Обучение HTML: руководства и уроки</a>.</p>
+
+<p>{{PreviousMenuNext("Learn/Getting_started_with_the_web/Dealing_with_files", "Learn/Getting_started_with_the_web/CSS_basics", "Learn/Getting_started_with_the_web")}}</p>
+
+<h2 id="В_этом_модуле">В этом модуле</h2>
+
+<ul>
+ <li id="Installing_basic_software"><a href="https://developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web/%D0%A3%D1%81%D1%82%D0%B0%D0%BD%D0%BE%D0%B2%D0%BA%D0%B0_%D0%B1%D0%B0%D0%B7%D0%BE%D0%B2%D0%BE%D0%B3%D0%BE_%D0%BF%D1%80%D0%BE%D0%B3%D1%80%D0%B0%D0%BC%D0%BC%D0%BD%D0%BE%D0%B3%D0%BE_%D0%BE%D0%B1%D0%B5%D1%81%D0%BF%D0%B5%D1%87%D0%B5%D0%BD%D0%B8%D1%8F">Установка базового программного обеспечения</a></li>
+ <li id="What_will_your_website_look_like"><a href="https://developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like">Каким должен быть ваш веб-сайт?</a></li>
+ <li id="Dealing_with_files"><a href="https://developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web/Dealing_with_files">Работа с файлами</a></li>
+ <li id="HTML_basics"><a href="https://developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web/HTML_basics">Основы HTML</a></li>
+ <li id="CSS_basics"><a href="https://developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web/CSS_basics">Основы CSS</a></li>
+ <li id="JavaScript_basics"><a href="https://developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web/JavaScript_basics">Основы JavaScript</a></li>
+ <li id="Publishing_your_website"><a href="https://developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web/Publishing_your_website">Публикация вашего веб-сайта</a></li>
+ <li id="How_the_web_works"><a href="https://developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web/How_the_Web_works">Как работает Веб</a></li>
+</ul>
diff --git a/files/ru/learn/getting_started_with_the_web/index.html b/files/ru/learn/getting_started_with_the_web/index.html
new file mode 100644
index 0000000000..8500828b35
--- /dev/null
+++ b/files/ru/learn/getting_started_with_the_web/index.html
@@ -0,0 +1,69 @@
+---
+title: Начало работы с Вебом
+slug: Learn/Getting_started_with_the_web
+tags:
+  - Beginner
+  - CSS
+  - Design
+  - Guide
+  - HTML
+  - Index
+  - TopicStub
+  - publishing
+  - theory
+  - Новичку
+  - Обучающая зона
+  - Обучение
+  - Руководство
+translation_of: Learn/Getting_started_with_the_web
+---
+<div>{{LearnSidebar}}</div>
+
+<div class="summary">
+<p><em>Начало работы с Вебом</em> - это серия коротких уроков, которые познакомят вас с практическими аспектами веб-разработки. Вы настроите инструменты, необходимые для создания простой веб-страницы и публикации своего собственного кода.</p>
+</div>
+
+<h2 id="История_вашего_первого_веб-сайта">История вашего первого веб-сайта</h2>
+
+<p>Необходимо много работать, чтобы создать профессиональный веб-сайт, так что, если вы новичок в веб-разработке, мы рекомендуем начать с малого. Вы не будете создавать еще один Facebook прямо сейчас, но создать свой простой веб-сайт не так уж и сложно, так что мы начнем с этого.</p>
+
+<p><span class="tlid-translation translation" lang="ru"><span title="">Прорабатывая статьи</span></span>, перечисленные ниже по порядку, вы пройдете путь от нуля до создания своей первой веб-страницы. Ну что, давайте начнем!</p>
+
+<h3 id="Установка_базового_программного_обеспечения"><a href="/ru/docs/Learn/Getting_started_with_the_web/Установка_базового_программного_обеспечения">Установка базового программного обеспечения</a></h3>
+
+<p>Когда речь заходит об инструментаx для создания веб-сайта, тут есть из чего выбрать. Если вы только начинаете, вас может смутить количество текстовых редакторов, фреймворков и инструментов тестирования. В главе <a href="/ru/docs/Learn/Getting_started_with_the_web/Установка_базового_программного_обеспечения">Установка базового программного обеспечения</a> мы покажем вам шаг за шагом, как установить только то программное обеспечение, которое вам понадобится для веб-разработки на начальном этапе.</p>
+
+<h3 id="Каким_должен_быть_ваш_веб-сайт"><a href="/ru/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like">Каким должен быть ваш веб-сайт?</a></h3>
+
+<p>Перед тем, как вы начнете писать код для вашего веб-сайта, нужно составить план. Какую информацию вы демонстрируете? Какие шрифты и цвета вы используете? <a href="/ru/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like">Каким должен быть ваш веб-сайт?</a> Мы опишем простой метод, которому вы сможете следовать, чтобы спланировать содержание и дизайн вашего сайта.</p>
+
+<h3 id="Работа_с_файлами"><a href="/ru/docs/Learn/Getting_started_with_the_web/Dealing_with_files">Работа с файлами</a></h3>
+
+<p>Веб-сайт состоит из множества файлов: текстового содержания, кода, таблиц стилей, медиа-контента, и так далее. Когда вы создаете веб-сайт, вам нужно собрать эти файлы в разумную структуру и убедиться, что они могут взаимодействовать друг с другом. <a href="/ru/docs/Learn/Getting_started_with_the_web/Dealing_with_files">Работа с файлами</a> объясняет, как создать разумную файловую структуру для вашего веб-сайта и про какие проблемы вы должны знать.</p>
+
+<h3 id="Основы_HTML"><a href="/ru/docs/Learn/Getting_started_with_the_web/HTML_basics">Основы HTML</a></h3>
+
+<p>Язык гипертекстовой разметки (Hypertext Markup Language, HTML) - это код, который вы используете для структурирования веб-содержимого и придания ему смысла и цели. Например, является ли мое содержимое набором абзацев, либо списком маркированных пунктов? Нужно ли вставить изображения на мою страницу? Есть ли у меня таблица данных? Не перегружая вас, статья <a href="/ru/docs/Learn/Getting_started_with_the_web/HTML_basics">Основы HTML</a> предоставляет достаточно информации для вашего знакомства с HTML.</p>
+
+<h3 id="Основы_CSS"><a href="/ru/docs/Learn/Getting_started_with_the_web/CSS_basics">Основы CSS</a></h3>
+
+<p>Каскадные таблицы стилей (Cascading Stylesheets, CSS) - это код, который вы используете для стилизации своего веб-сайта. Например, хотите ли вы, чтобы текст был черным или красным? Где должно быть нарисовано содержимое на экране? Какие фоновые изображения и цвета должны быть использованы, чтобы украсить ваш веб-сайт? <a href="/ru/docs/Learn/Getting_started_with_the_web/CSS_basics">Основы CSS</a> проведет вас через то, что вам нужно знать, чтобы начать.</p>
+
+<h3 id="Основы_JavaScript"><a href="/ru/docs/Learn/Getting_started_with_the_web/JavaScript_basics">Основы JavaScript</a></h3>
+
+<p>JavaScript - это язык программирования, который вы используете для добавления интерактивных функций для вашего веб-сайта, например, игр, событий, которые происходят при нажатии кнопок или ввода данных в формы, динамических эффектов стилизации, анимации и многого другого. <a href="/ru/docs/Learn/Getting_started_with_the_web/JavaScript_basics">Основы JavaScript</a> дает вам представление о том, что можно сделать с помощью этого захватывающего языка, и как начать.</p>
+
+<h3 id="Публикация_вашего_веб-сайта"><a href="/ru/docs/Learn/Getting_started_with_the_web/Publishing_your_website">Публикация вашего веб-сайта</a></h3>
+
+<p>После того как вы закончили писать код и организовали файлы, которые составляют ваш веб-сайт, нужно разместить все это в Интернете так, чтобы люди могли его найти. <a href="/ru/docs/Learn/Getting_started_with_the_web/Publishing_your_website">Публикация вашего сайта</a> описывает, как отобразить ваш простой пример кода в Интернете с минимальными усилиями.</p>
+
+<h3 id="Как_работает_Интернет"><a href="/ru/docs/Learn/Getting_started_with_the_web/How_the_Web_works">Как работает Интернет</a></h3>
+
+<p>Когда вы заходите на свой любимый веб-сайт, в фоновом режиме происходит много сложных вещей, о которых вы можете не знать. Статья <a href="/ru/docs/Learn/Getting_started_with_the_web/How_the_Web_works">Как работает Интернет</a> описывает, что происходит, когда вы просматриваете веб-страницы на своем компьютере.</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="https://www.youtube.com/playlist?list=PLo3w8EB99pqLEopnunz-dOOBJ8t-Wgt2g">Web Demystified</a>(web обзор): большая серия видеороликов, объясняющая основы web, нацеленных на начинающих веб-разработчиков. Создано <a href="https://twitter.com/JeremiePat">Жереми Патонье</a>.</li>
+ <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/The_web_and_web_standards">The web and web standards</a> (веб и веб стандарты): В этой статье приведена полезная информация о Вебе — как он появился, что такое технологии веб-стандартов, как они работают вместе, почему "веб-разработчик"  - это отличная карьера, <span class="tlid-translation translation" lang="ru"><span title="">и какие виды наилучшей практики вы узнаете в ходе курса.</span></span></li>
+</ul>
diff --git a/files/ru/learn/getting_started_with_the_web/javascript_basics/index.html b/files/ru/learn/getting_started_with_the_web/javascript_basics/index.html
new file mode 100644
index 0000000000..5cdf99a8da
--- /dev/null
+++ b/files/ru/learn/getting_started_with_the_web/javascript_basics/index.html
@@ -0,0 +1,413 @@
+---
+title: Основы JavaScript
+slug: Learn/Getting_started_with_the_web/JavaScript_basics
+tags:
+  - Beginner
+  - CodingScripting
+  - JavaScript
+  - Learn
+  - Новичку
+  - Обучение
+translation_of: Learn/Getting_started_with_the_web/JavaScript_basics
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/Getting_started_with_the_web/CSS_basics", "Learn/Getting_started_with_the_web/Publishing_your_website", "Learn/Getting_started_with_the_web")}}</div>
+
+<div class="summary">
+<p>JavaScript – это язык программирования, который добавляет интерактивность на ваш веб-сайт (например: игры, отклик при нажатии кнопок или при вводе данных в формы, динамические стили, анимация). Эта статья поможет вам начать работать с этим захватывающим языком и даст вам представление о том, на что он способен.</p>
+</div>
+
+<h2 id="Что_такое_JavaScript_на_самом_деле">Что такое JavaScript на самом деле?</h2>
+
+<p>{{Glossary("JavaScript")}} ("JS" для краткости) — это полноценный {{Glossary("Dynamic programming language", "динамический язык программирования")}}, который применяется к {{Glossary("HTML")}} документу, и может обеспечить динамическую интерактивность на веб-сайтах. Его разработал Brendan Eich, сооснователь проекта Mozilla, Mozilla Foundation и Mozilla Corporation.</p>
+
+<p>JavaScript невероятно универсален и дружелюбен к новичкам. Обладая большим опытом, вы сможете создавать игры, анимированную 2D и 3D графику, полномасштабные приложения с базами данных и многое другое!</p>
+
+<p>JavaScript сам по себе довольно компактный, но очень гибкий. Разработчиками написано большое количество инструментов поверх основного языка JavaScript, которые разблокируют огромное количество дополнительных функций с очень небольшим усилием. К ним относятся:</p>
+
+<ul>
+ <li>Программные интерфейсы приложения ({{Glossary("API","API")}}), встроенные в браузеры, обеспечивающие различные функциональные возможности, такие как динамическое создание HTML и установку CSS стилей, захват и манипуляция видеопотоком, работа с веб-камерой пользователя или генерация 3D графики и аудио сэмплов.</li>
+ <li>Сторонние API позволяют разработчикам внедрять функциональность в свои сайты от других разработчиков, таких как Twitter или Facebook.</li>
+ <li>Также вы можете применить к вашему HTML сторонние фреймворки и библиотеки, что позволит вам ускорить создание сайтов и приложений.</li>
+</ul>
+
+<p>Поскольку эта статья должна быть только лёгким введением в JavaScript, мы не собираемся путать вас на этом этапе, подробно рассказывая о том, какая разница между основным языком JavaScript и различными инструментами, перечисленными выше. Вы можете подробно изучить все это позже, в нашей <a href="https://developer.mozilla.org/ru/docs/Learn/JavaScript">учебной области JavaScript </a> и в остальной части MDN. </p>
+
+<p>Ниже мы познакомим вас с некоторыми аспектами основного языка, и вы также будете играть с несколькими функциями API браузера. Веселитесь!</p>
+
+<h2 id="Пример_hello_world">Пример "hello world"</h2>
+
+<p>Предыдущий раздел звучит очень многообещающе, и это на самом деле так — JavaScript является одной из самых перспективных веб-технологий, и когда вы освоитесь и начнёте использовать его, ваши веб-сайты перейдут в новое измерение мощи и креативности.</p>
+
+<p>Тем не менее, с JavaScript немного более сложно освоиться, чем с HTML и CSS. Вам придется начать с малого, продолжая изучение небольшими шагами. Для начала мы покажем вам, как добавить некоторые основы JavaScript на вашу страницу, чтобы создать "hello world!" пример (<a href="https://ru.wikipedia.org/wiki/Hello,_world!">стандарт в начальных примерах программирования</a>).</p>
+
+<div class="warning">
+<p><strong>Важно</strong>: Если вы не следили за остальным нашим курсом, <a href="https://github.com/mdn/beginner-html-site-styled/archive/gh-pages.zip">скачайте этот пример кода</a> и используйте его в качестве стартовой точки.</p>
+</div>
+
+<ol>
+ <li>Для начала перейдите на ваш тестовый сайт и создайте папку с именем 'scripts' (без кавычек). Затем, в новой папке скриптов, которую вы только что создали, создайте новый файл с именем <code>main.js</code>. Сохраните его в вашей папке <code>scripts</code>.</li>
+ <li>Далее перейдите в ваш <code>index.html</code> файл и введите следующий элемент на новой строке прямо перед закрывающим тегом <code>&lt;/body&gt;</code>:
+  <pre class="brush: html notranslate">&lt;script src="scripts/main.js"&gt;&lt;/script&gt;</pre>
+ </li>
+ <li> В основном этот код выполняет ту же работу, что и элемент {{htmlelement("link")}} для CSS — добавляет JavaScript на страницу, позволяя ему взаимодействовать с HTML (и CSS, и чем-нибудь ещё на странице).</li>
+ <li>Теперь добавьте следующий код в файл <code>main.js</code>:
+  <pre class="brush: js notranslate">var myHeading = document.querySelector('h1');
+myHeading.textContent = 'Hello world!';</pre>
+ </li>
+ <li>Теперь убедитесь, что HTML и JavaScript файлы сохранены, и загрузите <code>index.html</code> в браузере. Вы должны увидеть что-то вроде этого: <img alt="" src="https://mdn.mozillademos.org/files/9543/hello-world.png" style="display: block; height: 236px; margin: 0px auto; width: 806px;"></li>
+</ol>
+
+<div class="note">
+<p><strong>Примечание</strong>: Причиной, по которой мы поставили элемент {{htmlelement("script")}} в нижней части HTML файла, является то, что HTML-элементы загружаются браузером в том порядке, в котором они расположены в файле. Поэтому, если JavaScript загружается первым и ему нужно взаимодействовать с HTML ниже его, он не сможет работать, так как JavaScript будет загружен раньше, чем HTML, с которым нужно работать. Поэтому, располагать JavaScript в нижней части HTML страницы считается лучшей стратегией.</p>
+</div>
+
+<h3 id="Что_произошло">Что произошло?</h3>
+
+<p>Итак, ваш заголовок текста был изменен на "Hello world!" с помощью JavaScript. Мы сделали это с помощью вызова функции {{domxref("Document.querySelector", "querySelector()")}}, захватив ссылку на наш заголовок и сохранив её в переменной, названной <code>myHeading</code>. Это очень похоже на то, что мы делали в CSS с помощью селекторов. Если вы хотите что-то сделать с элементом, то для начала вам нужно его выбрать.</p>
+
+<p>После этого, вы устанавливаете значение переменной <code>myHeading</code> в {{domxref("Node.textContent", "textContent")}} свойство (которое представляет собой контент заголовка) "Hello world!".</p>
+
+<h2 id="Ускоренный_курс_по_основам_языка">Ускоренный курс по основам языка</h2>
+
+<p>Давайте познакомимся с некоторыми основными возможностями языка JavaScript, чтобы дать вам больше понимания, как это всё работает. Более того, эти возможности являются общими для всех языков программирования. Если вы сможете понять эти основы, вы будете в состоянии начать программировать, как ни в чём не бывало!</p>
+
+<div class="warning">
+<p><strong>Важно</strong>: В этой статье попробуйте вводить примеры строк кода в вашей JavaScript консоли, чтобы увидеть, что происходит. Для более подробной информации о JavaScript консоли смотрите статью <a href="/ru/Learn/Discover_browser_developer_tools">Откройте для себя браузерные инструменты разработчика</a>.</p>
+</div>
+
+<h3 id="Переменные">Переменные</h3>
+
+<p>{{Glossary("Variable", "Переменные")}} — это контейнеры, внутри которых вы можете хранить значения. Вы начинаете с того, что объявляете переменную с помощью ключевого слова <code><a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Statements/var">var</a></code> <span class="tlid-translation translation" lang="ru"><span title="">(не рекомендуется, продолжайте читать, чтобы получить объяснения)</span></span> или <code><a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Statements/let">let</a></code>, за которым следует любое имя, которым вы захотите её назвать:</p>
+
+<pre class="brush: js notranslate">let myVariable;</pre>
+
+<div class="note">
+<p><strong>Примечание</strong>: Точка с запятой в конце строки указывает, где заканчивается оператор; это абсолютно необходимо, когда вам нужно разделить оператора на одной строке. Однако некоторые люди считают, что хорошая практика - указывать их в конце каждого оператора. Существуют и другие правила, когда вы должны и не должны их использовать - смотрите более подробно в статье <a href="http://news.codecademy.com/your-guide-to-semicolons-in-javascript/">ваше руководство по точкам с запятой в JavaScript</a>.</p>
+</div>
+
+<div class="note">
+<p><strong>Примечание</strong>: Вы можете назвать переменную практически как угодно, но есть некоторые ограничения для её имени (смотрите<a href="http://www.codelifter.com/main/tips/tip_020.shtml"> в правилах именования переменных</a>.) Если вы не уверены, вы можете <a href="https://mothereff.in/js-variables">проверить имя вашей переменной</a>, чтобы увидеть корректно ли оно.</p>
+</div>
+
+<div class="note">
+<p><strong>Примечание</strong>: JavaScript чувствителен к регистру — <code>myVariable</code> отличается от переменной <code>myvariable</code>. Если у вас возникают проблемы в вашем коде, проверьте регистр!</p>
+</div>
+
+<div class="blockIndicator note">
+<p><strong>Примечание: </strong>Для получения более подробной информации о разнице между var и let, смотрите:  <a href="https://wiki.developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Statements/let">Разница между var и let</a>.</p>
+</div>
+
+<p>После объявления переменной вы можете присвоить ей значение:</p>
+
+<pre class="brush: js notranslate">myVariable = 'Bob';</pre>
+
+<p>Вы можете сделать обе эти операции на одной и той же строке, если вы захотите:</p>
+
+<pre class="brush: js notranslate">var myVariable = 'Bob';</pre>
+
+<p>Вы можете получить значение, просто вызвав переменную по имени:</p>
+
+<pre class="brush: js notranslate">myVariable;</pre>
+
+<p>После установки значения переменной  вы можете изменить его позже:</p>
+
+<pre class="notranslate">var myVariable = 'Bob';
+myVariable = 'Steve';</pre>
+
+<p>Обратите внимание, что переменные имеют разные <a href="/ru/docs/Web/JavaScript/Data_structures">типы данных</a>:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="row">Переменная</th>
+   <th scope="col">Пояснение</th>
+   <th scope="col">Пример</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th scope="row">{{Glossary("String")}}</th>
+   <td>Последовательность текста, называемая строкой. Чтобы указать, что это значение является строкой, вы должны заключить его в кавычки.</td>
+   <td><code>var myVariable = 'Bob';</code></td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Number")}}</th>
+   <td>Числа. Числа не имеют кавычек вокруг них.</td>
+   <td><code>var myVariable = 10;</code></td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Boolean")}}</th>
+   <td>Значение True(Правда)/False(Ложь). Слова <code>true</code> и <code>false</code> специальные ключевые слова в JS, и не нуждаются в кавычках.</td>
+   <td><code>var myVariable = true;</code></td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Array")}}</th>
+   <td>Массив, который позволяет хранить несколько значений в одной ссылке.</td>
+   <td><code>var myVariable = [1,'Bob','Steve',10];</code><br>
+    Обратиться к каждому элементу массива можно так:<br>
+    <code>myVariable[0]</code>, <code>myVariable[1]</code>, и т.д.</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Object")}}</th>
+   <td>В принципе, что угодно. Все в JavaScript является объектом, и может храниться в переменной. Имейте это в виду, пока вы учитесь.</td>
+   <td><code>var myVariable = document.querySelector('h1');</code><br>
+    Все это из вышеприведённых примеров.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Так для чего нам нужны переменные? Что ж, переменные должны были сделать что-нибудь интересное в программировании. Если значения не могли бы изменяться, то вы не могли бы ничего сделать динамическим, например, персонализировать приветственное сообщение или сменить изображение, отображаемое в галерее изображений.</p>
+
+<h3 id="Комментарии">Комментарии</h3>
+
+<p>Комментарии - это, по сути, короткие фрагменты текста, которые могут быть добавлены в код, и которые игнорируются браузером. Вы можете поместить комментарии в JavaScript код, так же как вы делали это в CSS:</p>
+
+<pre class="brush: js notranslate">/*
+Всё, что находится тут - комментарий.
+*/</pre>
+
+<p>Если ваш комментарий не содержит переноса строк, то зачастую легче поставить две косые черты, как тут:</p>
+
+<pre class="brush: js notranslate" style="font-size: 14px;">// Это комментарий
+</pre>
+
+<h3 id="Операторы">Операторы</h3>
+
+<p>{{Glossary("operator")}} — это математический символ, который производит результат, основанный на двух значениях (или переменных). В приведенной ниже таблице вы можете увидеть некоторые из наиболее простых операторов, наряду с некоторыми примерами, которые опробуете в JavaScript консоли.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="row">Оператор</th>
+   <th scope="col">Пояснение</th>
+   <th scope="col">Символ(ы)</th>
+   <th scope="col">Пример</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th scope="row">Сложение (Конкатенация)</th>
+   <td>Используется для сложения двух чисел или склеивания двух строк вместе.</td>
+   <td><code>+</code></td>
+   <td><code>6 + 9;<br>
+    "Hello " + "world!";</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Вычитание, Умножение, Деление</th>
+   <td>Они делают то, чего вы от них ожидаете в математике.</td>
+   <td><code>-</code>, <code>*</code>, <code>/</code></td>
+   <td><code>9 - 3;<br>
+    8 * 2; // умножение в JS это звездочка<br>
+    9 / 3;</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Присваивание</th>
+   <td>Вы уже это видели: он присваивает значение переменной.</td>
+   <td><code>=</code></td>
+   <td><code>var myVariable = 'Bob';</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Равенство (Тождество)</th>
+   <td>Делает проверку, если увидит, что два значения равны друг другу, то возвращает результат <code>true</code>/<code>false</code> (Boolean).</td>
+   <td><code>===</code></td>
+   <td><code>var myVariable = 3;<br>
+    myVariable === 4;</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Отрицание (Неравенство)</th>
+   <td>Возвращает логически противоположное значение, которое ему предшествует; превращает <code>true</code> в <code>false</code>, и т.д. Когда используется вместе с оператором равенства, оператор отрицания проверяет, являются ли два значения <em>не</em> равными.</td>
+   <td><code>!</code>, <code>!==</code></td>
+   <td>
+    <p>Основное выражение <code>true</code>, но сравнение возвращает <code>false</code>, потому что мы отрицаем его:</p>
+
+    <p><code>var myVariable = 3;<br>
+     !(myVariable === 3);</code></p>
+
+    <p>Здесь мы проверяем "<code>myVariable</code> НЕ равно 3". Это возвращает <code>false</code>, потому что <code>myVariable</code> равно 3.</p>
+
+    <p><code><code>var myVariable = 3;</code><br>
+     myVariable !== 3;</code></p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Существует намного больше операторов для изучения, но этих пока хватит. Смотрите их полный список в разделе <a href="/ru/docs/Web/JavaScript/Reference/Operators">выражения и операторы</a>.</p>
+
+<div class="note">
+<p><strong>Примечание</strong>: Смешивание типов данных может привести к некоторым неожиданным результатам при выполнении вычислений, поэтому будьте осторожны, правильно ссылайтесь на ваши переменные, чтобы получать ожидаемые результаты. Например, введите <code>"35" + "25"</code> в вашу консоль. Почему вы не получили результат, который вы ожидали? Потому, что кавычки превратили числа в строки, так что у вас в итоге получилась конкатенация строк, а не сложение чисел. Если вы введёте, <code>35 + 25</code>, то получите правильный результат.</p>
+</div>
+
+<h3 id="Условия">Условия</h3>
+
+<p>Условия — это кодовые структуры, которые позволяют вам проверять, истинно или ложно выражение, а затем выполнить другой код в зависимости от результата. Самая распространенная форма условия называется, <code>if ... else</code>. Например:</p>
+
+<pre class="brush: js notranslate">var iceCream = 'chocolate';
+if (iceCream === 'chocolate') {
+  alert('Yay, I love chocolate ice cream!');
+} else {
+  alert('Awwww, but chocolate is my favorite...');
+}</pre>
+
+<p>Выражение внутри <code>if ( ... )</code> — это проверка, которая использует тождественный оператор (как описано выше), чтобы сравнить переменную <code>iceCream</code> со строкой <code>chocolate</code> и увидеть равны ли они. Если это сравнение возвращает <code>true</code>, выполнится первый блок кода. Если нет, этот код пропустится и выполнится второй блок кода, после инструкции <code>else</code>.</p>
+
+<h3 id="Функции">Функции</h3>
+
+<p>{{Glossary("Function", "Функции")}} - способ упаковки функциональности, которую вы хотите использовать повторно. Всякий раз, когда вам нужна определенная процедура, вы можете просто вызвать функцию по её имени, а не переписывать весь код каждый раз. Вы уже видели некоторые функции, описанные выше, например:</p>
+
+<ol>
+ <li>
+  <pre class="brush: js notranslate">var myVariable = document.querySelector('h1');</pre>
+ </li>
+ <li>
+  <pre class="brush: js notranslate">alert('hello!');</pre>
+ </li>
+</ol>
+
+<p>Эти функции, <code>document.querySelector</code> и <code>alert</code>, встроены в браузер для того, чтобы вы использовали их всякий раз, когда вам это необходимо.</p>
+
+<p>Если вы видите что-то, что выглядит как имя переменной, но имеет после него скобки — <code>()</code>, скорее всего, это функция. Функции часто принимают {{Glossary("Argument", "аргументы")}} — биты данных, которые им необходимы для выполнения своей работы. Они находятся в скобках, и разделяются запятыми, если присутствует более одного аргумента.</p>
+
+<p>Например, функция <code>alert()</code> вызывает всплывающий блок, появляющийся в окне браузера, но мы должны дать ему строку в качестве аргумента, чтобы сказать функции, что писать во всплывающем блоке.</p>
+
+<p>Хорошая новость заключается в том, что вы можете определить свои собственные функции — в следующем примере мы напишем простую функцию, которая принимает два числа в качестве аргументов и умножает их:</p>
+
+<pre class="brush: js notranslate">function multiply(num1,num2) {
+  var result = num1 * num2;
+  return result;
+}</pre>
+
+<p>Попробуйте запустить вышеупомянутую функцию в консоли, затем попробуйте изменить аргументы, например:</p>
+
+<pre class="brush: js notranslate">multiply(4,7);
+multiply(20,20);
+multiply(0.5,3);</pre>
+
+<div class="note">
+<p><strong>Примечание</strong>: Инструкция <a href="/ru/docs/Web/JavaScript/Reference/Statements/return"><code>return</code></a> сообщает браузеру, что нужно вернуть переменную <code>result</code> из функции, которую можно будет использовать. Это необходимо потому, что переменные, определенные внутри функций, доступны только внутри этих функций. Это называется {{Glossary("Scope", "областью видимости")}} переменной. (Читайте <a href="/ru/docs/Web/JavaScript/Guide/Values,_variables,_and_literals#Variable_scope">больше об области видимости переменных</a>.)</p>
+</div>
+
+<h3 id="События">События</h3>
+
+<p>Для создания действительной интерактивности на веб-сайте вам необходимы события. События — это структура, которая слушает то, что происходит в браузере, а затем позволяет вам запускать код в ответ на это. Наиболее очевидным является <a href="/ru/docs/Web/Events/click">событие клика</a>, которое вызывается браузером, когда мы щёлкаем по чему-то мышью. Для демонстрации этого события введите следующую команду в вашу консоль, а затем щёлкните по текущей веб-странице:</p>
+
+<pre class="brush: js notranslate">document.querySelector('html').onclick = function() {
+    alert('Ouch! Stop poking me!');
+}</pre>
+
+<p>Существуют множество способов прикрепить событие к элементу. Здесь мы выбираем {{htmlelement("html")}} элемент и устанавливаем ему обработчик свойства <code><a href="/ru/docs/Web/API/GlobalEventHandlers.onclick">onclick</a></code> анонимной функцией (т.е. безымянной) которая содержит код, который мы хотим запустить для события клика.</p>
+
+<p>Обратите внимание, что</p>
+
+<pre class="brush: js notranslate">document.querySelector('html').onclick = function() {};</pre>
+
+<p>эквивалентно</p>
+
+<pre class="brush: js notranslate">var myHTML = document.querySelector('html');
+myHTML.onclick = function() {};</pre>
+
+<p>Просто так короче.</p>
+
+<h2 id="Прокачаем_пример_нашего_веб-сайта">Прокачаем пример нашего веб-сайта</h2>
+
+<p>Теперь, когда мы прошли некоторые основы JavaScript, давайте добавим несколько крутых несложных функций в пример нашего сайта, чтобы дать вам некоторое представление о принципах работы.</p>
+
+<h3 id="Добавление_смены_изображения">Добавление смены изображения</h3>
+
+<p>В этом разделе мы добавим ещё одно изображение на наш сайт и добавим некоторый простой JavaScript для переключения между двумя изображениями, когда по ним щелкнули.</p>
+
+<ol>
+ <li>В первую очередь найдите другое изображение, которые вы хотели бы показать на вашем сайте. Убедитесь что оно такого же размера, как ваше первое изображение или максимально близкое к нему.</li>
+ <li>Сохраните изображение в вашу папку <code>images</code>.</li>
+ <li>Переименуйте это изображение в 'firefox2.png' (без кавычек).</li>
+ <li>Перейдите в ваш файл <code>main.js</code> и введите следующий JavaScript. (Если ваш "hello world" JavaScript по-прежнему существует, удалите его.)
+  <pre class="brush: js notranslate">var myImage = document.querySelector('img');
+
+myImage.onclick = function() {
+    var mySrc = myImage.getAttribute('src');
+    if(mySrc === 'images/firefox-icon.png') {
+      myImage.setAttribute ('src','images/firefox2.png');
+    } else {
+      myImage.setAttribute ('src','images/firefox-icon.png');
+    }
+}</pre>
+ </li>
+ <li>Сохраните все файлы и загрузите <code>index.html</code> в браузере. Теперь, когда вы щёлкните по изображению, оно должно измениться на другое!</li>
+</ol>
+
+<p>Итак, мы сохраняем ссылку на наш элемент {{htmlelement("img")}} в переменной <code>myImage</code>. Далее, мы создаём этой переменной обработчик события <code>onclick</code> с анонимной функцией. Теперь, каждый раз, когда на этот элемент изображения щёлкнут:</p>
+
+<ol>
+ <li>Мы получаем значение из атрибута <code>src</code> изображения.</li>
+ <li>Мы используем условие для проверки значения <code>src,</code> равен ли путь к исходному изображению:
+  <ol>
+   <li>Если это так, мы меняем значение <code>src</code> на путь ко 2-му изображению, заставляя другое изображение загружаться внутри элемента {{htmlelement("image")}}.</li>
+   <li>Если это не так (значит, оно должно было уже измениться), мы меняем значение <code>src</code>, возвращаясь к первоначальному пути изображения, каким он был изначально.</li>
+  </ol>
+ </li>
+</ol>
+
+<h3 id="Добавление_персонального_приветственного_сообщения">Добавление персонального приветственного сообщения</h3>
+
+<p>Далее мы добавим немного другого кода, чтобы изменить заголовок страницы на персонализированное приветственное сообщение, когда пользователь впервые зайдет на сайт. Это приветственное сообщение будет сохраняться, когда пользователь покинет сайт, а позже вернется - мы сохраним его с помощью <a href="https://developer.mozilla.org/ru/docs/Web/API/Web_Storage_API">Web Storage API</a>. Мы также включим возможность изменить пользователя и, следовательно, приветственное сообщение, в любое время, когда это будет необходимо.</p>
+
+<ol>
+ <li>В <code>index.html</code>, добавьте следующую строку перед элементом {{htmlelement("script")}}:
+
+  <pre class="brush: html notranslate">&lt;button&gt;Change user&lt;/button&gt;</pre>
+ </li>
+ <li>В <code>main.js</code>, добавьте следующий код в конец файла, точно так, как написано - он захватит ссылки на новую кнопку и заголовок, и сохранит их в переменные:
+  <pre class="brush: js notranslate">var myButton = document.querySelector('button');
+var myHeading = document.querySelector('h1');</pre>
+ </li>
+ <li>Теперь добавьте следующую функцию для установки персонализированного приветствия - она ничего не будет делать, но мы будем использовать её позже:
+  <pre class="brush: js notranslate">function setUserName() {
+  var myName = prompt('Please enter your name.');
+  localStorage.setItem('name', myName);
+  myHeading.<span class="pl-smi">textContent</span> = 'Mozilla is cool, ' + myName;
+}</pre>
+  Эта функция содержит функцию <a href="/ru/docs/Web/API/Window.prompt"><code>prompt()</code></a>, которая вызывает диалоговое окно, немного похожее на <code>alert()</code> кроме того, что <code>prompt()</code> просит пользователя ввести некоторые данные, и сохраняет эти данные в переменной, после того как пользователь нажимает <strong>OK</strong>. В данном случае, мы просим пользователя ввести его имя. Далее, мы вызываем API под названием <code>localStorage</code>, который позволяет нам хранить данные в браузере и извлекать их позднее. Мы используем функцию <code>setItem()</code> из localStorage для создания и хранения данных в свойстве под названием <code>'name'</code>, и устанавливаем это значение в переменную <code>myName</code>, которая содержит имя введенное пользователем. В конце мы устанавливаем <code>textContent</code> заголовку в виде строки и имени пользователя.</li>
+ <li>Затем добавьте блок <code>if ... else</code> - мы могли бы назвать это кодом инициализации, поскольку он структурирует приложение при его первой загрузке:
+  <pre class="brush: js notranslate">if(!localStorage.getItem('name')) {
+  setUserName();
+} else {
+  var storedName = localStorage.getItem('name');
+  myHeading.<span class="pl-smi">textContent</span> = 'Mozilla is cool, ' + storedName;
+}</pre>
+  Этот блок сначала использует оператор отрицания (логическое НЕ, представленное в виде !) чтобы проверить, существуют ли данные в пункте <code>name</code>. Если нет, то функция <code>setUserName()</code> запускается для их создания. Если данные существуют (то есть, пользователь установил его во время предыдущего посещения), мы извлекаем сохраненное имя, с помощью <code>getItem()</code> и устанавливаем <code>textContent</code> заголовку в виде строки плюс имя пользователя, так же, как мы делали внутри <code>setUserName()</code>.</li>
+ <li>Наконец, установите обработчик события <code>onclick</code> на кнопку. При нажатии кнопки запускается функция <code>setUserName()</code>. Это позволяет пользователю установить новое имя, всякий раз, когда он захочет, нажатием кнопки:
+  <pre class="brush: js notranslate">myButton.onclick = function() {
+  setUserName();
+}
+</pre>
+ </li>
+</ol>
+
+<p>Теперь, когда вы впервые заходите на сайт, он попросит вас указать имя пользователя, а затем предоставит вам персональное сообщение. Вы можете изменить имя в любое время, нажав на кнопку. В качестве дополнительного бонуса, поскольку имя хранится внутри localStorage, оно сохраняется после закрытия сайта, сохраняя при этом персонализированное сообщение при следующем открытии сайта!</p>
+
+<h2 id="Заключение">Заключение</h2>
+
+<p>Если вы следовали всем инструкциям в этой статье, в конечном итоге вы должны получить страницу, которая выглядит примерно так (вы также можете <a href="https://mdn.github.io/beginner-html-site-scripted/">посмотреть нашу версию здесь</a>):</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9539/website-screen-scripted.png" style="display: block; height: 995px; margin: 0px auto; width: 800px;"></p>
+
+<p>Если вы застряли, вы всегда можете сравнить свою работу с нашим <a href="https://github.com/mdn/beginner-html-site-scripted/blob/gh-pages/scripts/main.js">готовым примером кода на Github</a>.</p>
+
+<p>Здесь мы узнали только самую поверхность JavaScript. Если вам понравился этот язык и вы хотите изучить его поглубже, перейдите к нашему разделу <a href="/ru/docs/Learn/JavaScript">изучение JavaScript</a>.</p>
+
+<p>{{PreviousMenuNext("Learn/Getting_started_with_the_web/CSS_basics", "Learn/Getting_started_with_the_web/Publishing_your_website", "Learn/Getting_started_with_the_web")}}</p>
+
+<h2 id="В_этом_модуле">В этом модуле</h2>
+
+<ul>
+ <li id="Installing_basic_software"><a href="https://developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web/%D0%A3%D1%81%D1%82%D0%B0%D0%BD%D0%BE%D0%B2%D0%BA%D0%B0_%D0%B1%D0%B0%D0%B7%D0%BE%D0%B2%D0%BE%D0%B3%D0%BE_%D0%BF%D1%80%D0%BE%D0%B3%D1%80%D0%B0%D0%BC%D0%BC%D0%BD%D0%BE%D0%B3%D0%BE_%D0%BE%D0%B1%D0%B5%D1%81%D0%BF%D0%B5%D1%87%D0%B5%D0%BD%D0%B8%D1%8F">Установка базового программного обеспечения</a></li>
+ <li id="What_will_your_website_look_like"><a href="https://developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like">Каким должен быть ваш веб-сайт?</a></li>
+ <li id="Dealing_with_files"><a href="https://developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web/Dealing_with_files">Работа с файлами</a></li>
+ <li id="HTML_basics"><a href="https://developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web/HTML_basics">Основы HTML</a></li>
+ <li id="CSS_basics"><a href="https://developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web/CSS_basics">Основы CSS</a></li>
+ <li id="JavaScript_basics"><a href="https://developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web/JavaScript_basics">Основы JavaScript</a></li>
+ <li id="Publishing_your_website"><a href="https://developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web/Publishing_your_website">Публикация вашего веб-сайта</a></li>
+ <li id="How_the_web_works"><a href="https://developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web/How_the_Web_works">Как работает Веб</a></li>
+</ul>
diff --git a/files/ru/learn/getting_started_with_the_web/publishing_your_website/index.html b/files/ru/learn/getting_started_with_the_web/publishing_your_website/index.html
new file mode 100644
index 0000000000..3e70566e96
--- /dev/null
+++ b/files/ru/learn/getting_started_with_the_web/publishing_your_website/index.html
@@ -0,0 +1,183 @@
+---
+title: Публикация вашего веб-сайта
+slug: Learn/Getting_started_with_the_web/Publishing_your_website
+tags:
+  - FTP
+  - GitHub
+  - Google App Engine
+  - Веб
+  - Веб сервер
+  - Изучение
+  - Начинающий
+  - Публикация
+  - Хостинг
+translation_of: Learn/Getting_started_with_the_web/Publishing_your_website
+---
+<p>{{LearnSidebar}}{{PreviousMenuNext("Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web/How_the_Web_works", "Learn/Getting_started_with_the_web")}}</p>
+
+<div class="summary">
+<p>После того, как вы закончите писать код и организовывать файлы, которые составляют ваш веб-сайт, вам нужно расположить все это в Интернете, чтобы люди могли найти ваш сайт. В этой статье описывается, как разместить простой пример вашего кода с минимальными усилиями.</p>
+</div>
+
+<h2 id="Какие_существуют_варианты">Какие существуют варианты?</h2>
+
+<p>Публикация веб-сайта это не простая тема, главным образом, потому что существует много различных способов сделать это. В этой статье мы не стремимся документировать все возможные методы. Скорее, мы обсудим плюсы и минусы трех обширных стратегий с точки зрения новичка, а затем вы пройдете через один метод, который будет работать в настоящее время.</p>
+
+<h3 id="Получение_хостинга_и_доменного_имени">Получение хостинга и доменного имени</h3>
+
+<p>Чтобы иметь больший контроль над контентом и внешним видом веб-сайта, большинство людей предпочитают покупать веб-хостинг и доменное имя:</p>
+
+<ul>
+ <li>Хостинг — арендованное файловое пространство на <a href="/en-US/Learn/What_is_a_web_server">веб-сервере</a> хостинговой компании. Вы размещаете ваши файлы веб-сайта в этом пространстве, и веб-сервер выдает контент для веб-пользователей, которые запрашивают его.</li>
+ <li><a href="/en-US/Learn/Understanding_domain_names">Доменное имя</a> — уникальный адрес по которому люди могут найти ваш веб-сайт, например <code>http://www.mozilla.org</code> или <code>http://www.bbc.co.uk</code>. Вы можете арендовать доменное имя на столько лет, сколько захотите (минимум на 1 год) у <strong>регистратора доменов</strong>.</li>
+</ul>
+
+<p>Множество профессиональных веб-сайтов располагается в Интернете именно таким образом.</p>
+
+<p>Кроме того, вам потребуется {{Glossary("FTP", "File Transfer Protocol (FTP)")}}-клиент (более подробно см. <a href="/en-US/Learn/How_much_does_it_cost#Software">Сколько это стоит: программное обеспечение</a>), чтобы передать файлы веб-сайта на сервер. Существует множество FTP-клиентов, но, как правило, вам нужно войти на веб-сервер, используя данные, предоставленные вашей хостинговой компанией (например: имя пользователя (логин), пароль, имя хоста). Затем FTP-клиент отобразит файлы на вашем компьютере в одной половине окна и файлы на хостинговом сервере в другой половине, так вы сможете перетаскивая копировать файлы с вашего компьютера на сервер и обратно.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9469/ftp.jpg" style="display: block; height: 487px; margin: 0px auto; width: 800px;"></p>
+
+<h4 id="Советы_по_поиску_хостингов_и_доменов">Советы по поиску хостингов и доменов</h4>
+
+<ul>
+ <li>Здесь мы не продвигаем какие-то конкретные хостинговые компании. Чтобы найти хостинг и регистратора доменных имен, просто поищите "веб-хостинг" и "доменные имена". Во всех таких сервисах есть функция, позволяющая вам проверить, доступно ли имя домена, или кто-то другой уже зарегестрировал его. </li>
+ <li>Ваш домашний или рабочий {{Glossary("ISP", "Интернет-провайдер")}} может предоставлять хостинговые услуги для небольших веб-сайтов. Набор возможностей в таком случае может быть ограничен, но, тем не менее, он может отлично подойти для ваших первых экспериментов - свяжитесь с ними и узнайте! </li>
+ <li>Также есть несколько бесплатных сервисов, таких как <a href="https://neocities.org/">Neocities</a>, <a href="https://www.blogger.com">Blogspot</a>, и <a href="https://wordpress.com/">Wordpress</a>. Опять же, вы получаете то, за что платите, но они идеально подходят для ваших первоначальных экспериментов. Бесплатные сервисы по большей части не требуют FTP-клиентов - вы можете перетаскивать ваши файлы напрямую в веб-интерфейсе.</li>
+ <li>Иногда компании предлагают одновременно и хостинг и домен.</li>
+</ul>
+
+<h3 id="Использование_онлайн_инструментов_таких_как_GitHub_или_Google_App_Engine">Использование онлайн инструментов, таких как GitHub или Google App Engine</h3>
+
+<p>Некоторые сервисы позволяют вам опубликовать сайт:</p>
+
+<ul>
+ <li><a href="https://github.com/">GitHub</a> - это "социальная сеть программистов". С помощью нее можно загружать репозитории с вашими разработками для хранения в <a href="http://git-scm.com/">Git</a> - <strong>систему контроля версий. </strong>По-умолчанию все разработки хранятся с открытым исходным кодом, а это значит, что ваш код будет доступен любому - участники могут по нему учиться либо же предлагать свои улучшения. Вы также можете объединяться с другими кодерами! Это очень большое и полезное сообщество, в чьи ряды лучше вступить, и Git/GitHub это очень популярная <a href="http://git-scm.com/book/en/v2/Getting-Started-About-Version-Control">система контроля версий</a> — большинство компаний сейчас использует ее для работы. GitHub имеет очень полезную функцию <a href="https://pages.github.com/">GitHub pages</a>, с помощью которой вы сможете опубликовать ваш код (ваш сайт) в интернете.</li>
+ <li><a href="https://cloud.google.com/appengine/" title="App Engine - Build Scalable Web &amp; Mobile Backends in Any Language  |  Google Cloud Platform">Google App Engine</a> - это мощная платформа, которая позволяет создавать и запускать приложения в инфраструктуре Google — нужно ли вам создать многоуровневое веб-приложение с нуля или разместить статический веб-сайт. Смотрите <a href="https://developer.mozilla.org/ru/docs/Learn/Common_questions/How_do_you_host_your_website_on_Google_App_Engine">как разместить ваш веб-сайт на Google App Engine</a> чтобы узнать больше информации.</li>
+</ul>
+
+<p>В отличие от других хостингов, эти услуги обычно бесплатны, но взамен вы получите ограниченный набор инструментов.</p>
+
+<h3 id="Использование_облачных_IDE_таких_как_CodePen">Использование облачных IDE, таких как CodePen</h3>
+
+<p>Существует ряд веб-приложений, эмулирующих среду веб-разработки, позволяющих вводить HTML, CSS и JavaScript, а затем отображать результат этого кода в виде сайта - и все это на одной вкладке браузера. Вообще говоря, эти инструменты достаточно просты, отлично подходят для обучения, хороши для того, чтобы делиться кодом (например, если вы хотите поделиться техникой с коллегой или обратиться за помощью в отладке к коллегам из другого офиса) и бесплатны (основные функции). Они размещают вашу отрендереную страницу на уникальном веб-адресе. Однако, основные функции довольно ограничены, и приложения обычно не предоставляют хостинговое пространство для таких файлов, как изображения и т.д.</p>
+
+<p>Попробуйте один из этих и посмотрите, какой из них вам больше нравится:</p>
+
+<ul>
+ <li><a href="https://jsfiddle.net/">JSFiddle</a></li>
+ <li><a href="https://thimble.mozilla.org">Thimble</a></li>
+ <li><a href="http://jsbin.com/">JSBin</a></li>
+ <li><a href="https://codepen.io/">CodePen</a></li>
+</ul>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9471/jsbin-screen.png" style="display: block; height: 849px; margin: 0px auto; width: 1392px;"></p>
+
+<h2 id="Публикация_с_помощью_GitHub">Публикация с помощью GitHub</h2>
+
+<p>А теперь, давайте рассмотрим, как опубликовать свой сайт на страницах GitHub. Мы не хотим сказать, что этот метод является единственным и наиболее верным, но это бесплатно, достаточно просто, а также затрагивает определённые навыки, которые точно будут полезны для вашего дальнейшего обучения.</p>
+
+<h3 id="Основная_настройка">Основная настройка</h3>
+
+<ol>
+ <li>Прежде всего, <a href="http://git-scm.com/downloads">установите Git</a> на ваш компьютер. Это основная версия системы управления версий, поддерживающая GitHub.</li>
+ <li>Далее, <a href="https://github.com/join">создайте аккаунт в GitHub</a>. Это просто и легко.</li>
+ <li>После того как вы зарегистрировались, войдите в github.com используя ваш логин и пароль.</li>
+ <li>Далее, вам нужно создать новый репозиторий для ваших файлов. Нажмитре Плюс (+) в правом верхнем углу главной страницы GitHub, затем выберите <em>New repository</em>.</li>
+</ol>
+
+<p>На этой странице, в поле <em>Repository name</em>, введите <em>username</em>.github.io, где <em>username</em> это ваше имя пользователя. Так, например, наш друг <em>valerii15298</em> введёт <em>valerii15298.github.io</em>.</p>
+
+<p><img alt="" src="https://i.imgur.com/hdCboGw.png" style="display: block; height: 849px; margin: 0px auto; width: 1392px;"></p>
+
+<p>Нажмите <em>Create repository</em> и вы окажетесь на следующей странице:</p>
+
+<p><img alt="" src="https://i.imgur.com/ZWE2DMv.png" style="display: block; height: 849px; margin: 0px auto; width: 1392px;"></p>
+
+<h3 id="Загрузка_ваших_файлов_на_GitHub">Загрузка ваших файлов на GitHub</h3>
+
+<p>Здесь у нас будет использоваться командная строка чтобы отправить наш репозиторий на GitHub. Командная строка - это окно где вы вводите команды для быстрого выполнения таких вещей, как создание файла или запуск программы, без использования пользовательского интерфейса. Командная строка выглядит примерно так:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9483/command-line.png" style="display: block; height: 478px; margin: 0px auto; width: 697px;"></p>
+
+<div class="note">
+<p><strong>Заметка</strong>: Вы также можете использовать графический пользовательский интерфейс <a href="http://git-scm.com/downloads/guis">Git</a> для этих же целей, если вам не удобно работать с командной строкой.</p>
+</div>
+
+<p><span id="command-line">У всех операционных систем есть командная строка:</span></p>
+
+<ul>
+ <li><strong>Windows</strong>: <strong>Командная строка. </strong>Чтобы открыть её нажмите клавишу Windows, затем введите <em>Командная строка </em>в поле поиска, и выберите её в появившемся списке. Заметьте, что Windows имеет свои собственные соглашения команд, отличные от Linux и OS X, поэтому приведенные ниже команды могут отличаться на вашем компьютере.</li>
+ <li><strong>OS X</strong>: <strong>Terminal</strong> можно найти в <em>Приложения &gt; Утилиты</em>.</li>
+ <li><strong>Linux</strong>: Обычно вы можете вытащить терминал с помощью Ctrl + Alt + T. Если это не сработает, найдите <strong>Терминал</strong> в панели приложений или меню.</li>
+</ul>
+
+<p>Сначала это может показаться немного страшным, но не волнуйтесь - вы скоро освоите основы. Вы говорите компьютеру сделать что-то в терминале, введя команду и нажав Enter.</p>
+
+<ol>
+ <li>Укажите в командной строке каталог <code>test-site</code> (или другое название каталога, содержащего ваш сайт). Для этого используйте команду <code>cd</code> (т.е. «change directory»). Вот то, что вы наберете, если разместили свой веб-сайт в каталоге под названием <code>test-site</code> на рабочем столе:
+
+  <pre class="brush: bash notranslate">cd Desktop/test-site</pre>
+ </li>
+ <li>Когда командная строка указывает внутрь вашего каталога веб-сайта, введите следующую команду, которая сообщает инструменту <code>git</code>, чтобы он превратил каталог в репозиторий git:
+  <pre class="brush: bash notranslate">git init</pre>
+ </li>
+ <li>Далее вернемся к сайту GitHub. На текущей странице вас интересует раздел "…or push an existing repository from the command line". Вы должны увидеть две строки кода в этом разделе. Скопируйте всю первую строку, вставьте ее в командную строку и нажмите Enter. Команда должна выглядеть примерно так:
+  <pre class="brush: bash notranslate">git remote add origin https://github.com/bobsmith/bobsmith.github.io.git</pre>
+ </li>
+ <li>Далее введите следующие две команды, нажимая Enter после каждой. Это подготовит код к загрузке на GitHub, и укажет Git управлять этими файлами.
+  <pre class="brush: bash notranslate">git add --all
+git commit -m 'adding my files to my repository'</pre>
+ </li>
+ <li>Наконец, загрузите код на GitHub - вернитесь на веб-страницу GitHub, на которой вы находились, и введите в терминал команду:
+  <pre class="brush: bash notranslate">git push -u origin master</pre>
+ </li>
+ <li>Теперь, когда вы перейдете по веб-адресу, созданному в GitHub, в новом окне браузера (<em>username.github.io</em>), вы увидите ваш сайт онлайн! Разошлите ссылку вашим друзьям, пусть оценят ваше мастерство.</li>
+</ol>
+
+<div class="note">
+<p><strong>Заметка</strong>: Если вы застряли, <a href="https://pages.github.com/">GitHub Pages homepage</a> будет очень полезна для вас.</p>
+</div>
+
+<h3 id="Дальнейшее_изучение_GitHub">Дальнейшее изучение GitHub</h3>
+
+<p>Если вы хотите сделать больше изменений на своем тестовом сайте и загрузить их в GitHub, вам просто нужно внести изменения в свои файлы, как и раньше. Затем вам нужно ввести следующие команды (нажав Enter после каждого), чтобы вставить эти изменения в GitHub:</p>
+
+<pre class="notranslate">git add --all
+git commit -m 'another commit'
+git push</pre>
+
+<p>Вы можете заменить <em>another commit</em> более подходящим сообщением, описывающим какие изменения вы только что сделали. </p>
+
+<p>Мы едва затронули Git. Чтобы узнать больше,  начните с <a href="https://help.github.com/index.html">GitHub Help site</a>.</p>
+
+<h2 id="Заключение">Заключение</h2>
+
+<p>К этому моменту, у вас должен быть собственный пример веб-сайта, доступный по уникальному веб-адресу. Отлично!</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9485/hosted-final-site.png" style="display: block; height: 1049px; margin: 0px auto; width: 878px;"></p>
+
+<h3 id="Дальнейшее_чтение">Дальнейшее чтение</h3>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/ru/docs/Learn/%D0%A7%D1%82%D0%BE_%D1%82%D0%B0%D0%BA%D0%BE%D0%B5_%D0%B2%D0%B5%D0%B1_%D1%81%D0%B5%D1%80%D0%B2%D0%B5%D1%80">Что такое веб-сервер?</a></li>
+ <li><a href="https://developer.mozilla.org/ru/docs/Learn/Understanding_domain_names">Что такое доменные имена?</a></li>
+ <li><a href="/en-US/Learn/How_much_does_it_cost">Сколько стоит сделать что-то в Интернете?</a></li>
+ <li><a href="https://www.codecademy.com/learn/deploy-a-website">Развертывание сайта</a>: хороший курс от Codecademy, который забегает немного вперёд и показывает некоторые дополнительные техники.</li>
+ <li><a href="http://alignedleft.com/resources/cheap-web-hosting">Cheap or Free Static Website Hosting</a>, статья написанная Скоттом Мюрреем содержит некоторые полезные идеи о доступных сервисах.</li>
+</ul>
+
+<p>{{PreviousMenuNext("Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web/How_the_Web_works", "Learn/Getting_started_with_the_web")}}</p>
+
+<h2 id="В_этом_модуле">В этом модуле</h2>
+
+<ul>
+ <li id="Installing_basic_software"><a href="https://developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web/%D0%A3%D1%81%D1%82%D0%B0%D0%BD%D0%BE%D0%B2%D0%BA%D0%B0_%D0%B1%D0%B0%D0%B7%D0%BE%D0%B2%D0%BE%D0%B3%D0%BE_%D0%BF%D1%80%D0%BE%D0%B3%D1%80%D0%B0%D0%BC%D0%BC%D0%BD%D0%BE%D0%B3%D0%BE_%D0%BE%D0%B1%D0%B5%D1%81%D0%BF%D0%B5%D1%87%D0%B5%D0%BD%D0%B8%D1%8F">Установка базового программного обеспечения</a></li>
+ <li id="What_will_your_website_look_like"><a href="https://developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like">Каким должен быть ваш веб-сайт?</a></li>
+ <li id="Dealing_with_files"><a href="https://developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web/Dealing_with_files">Работа с файлами</a></li>
+ <li id="HTML_basics"><a href="https://developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web/HTML_basics">Основы HTML</a></li>
+ <li id="CSS_basics"><a href="https://developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web/CSS_basics">Основы CSS</a></li>
+ <li id="JavaScript_basics"><a href="https://developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web/JavaScript_basics">Основы JavaScript</a></li>
+ <li id="Publishing_your_website"><a href="https://developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web/Publishing_your_website">Публикация вашего веб-сайта</a></li>
+ <li id="How_the_web_works"><a href="https://developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web/How_the_Web_works">Как работает Веб</a></li>
+</ul>
diff --git a/files/ru/learn/getting_started_with_the_web/what_will_your_website_look_like/index.html b/files/ru/learn/getting_started_with_the_web/what_will_your_website_look_like/index.html
new file mode 100644
index 0000000000..c6ef10460d
--- /dev/null
+++ b/files/ru/learn/getting_started_with_the_web/what_will_your_website_look_like/index.html
@@ -0,0 +1,123 @@
+---
+title: Каким должен быть ваш веб-сайт?
+slug: Learn/Getting_started_with_the_web/What_will_your_website_look_like
+tags:
+  - Assets
+  - Beginner
+  - Composing
+  - Content
+  - Design
+  - Fonts
+  - Learn
+  - Plan
+  - Дизайн
+  - Контент
+  - Новичку
+  - Шрифты
+translation_of: Learn/Getting_started_with_the_web/What_will_your_website_look_like
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/Getting_started_with_the_web/Installing_basic_software", "Learn/Getting_started_with_the_web/Dealing_with_files", "Learn/Getting_started_with_the_web")}}</div>
+
+<div class="summary">
+<p><em>Каким должен быть ваш веб-сайт?</em> обсудите план и дизайн веб-сайта, <em>прежде</em> чем приступить к написанию кода, в том числе "Какую информацию будет содержать мой веб-сайт?" "Какие шрифты и цвета я хочу использовать?" "Что будет делать мой сайт?"</p>
+</div>
+
+<h2 id="Перво-наперво_планирование">Перво-наперво: планирование</h2>
+
+<p>Перед тем как делать что-то, вам нужны идеи. Что ваш веб-сайт должен фактически делать? По существу, ваш веб-сайт может делать все, что угодно, но для вашей первой попытки, вы должны придерживаться простых вещей. Мы начнем с создания простой веб-страницы, содержащую заголовок, изображение и несколько абзацев.</p>
+
+<p>Для начала, вам будет нужно ответить на следующие вопросы:</p>
+
+<ol>
+ <li><strong>О чем ваш веб-сайт?</strong> Вам нравятся собаки, Нью-Йорк или Pacman?</li>
+ <li><strong>Какую информацию вы предоставляете о предмете?</strong> Напишите заголовок и несколько абзацев, и подумайте над изображениями, которые вы хотите показать на своей странице.</li>
+ <li><strong>Как будет выглядеть ваш веб-сайт</strong>, в простых терминах высокого уровня. Какой цвет фона? Какой вид шрифта будет уместен: деловой, мультяшный, жирный и кричащий или тонкий?</li>
+</ol>
+
+<div class="note">
+<p><strong>Примечание</strong>: Комплексные проекты нуждаются в детализированных руководствах, которые включают все детали цветов, шрифтов, расстояния между элементами на странице, соответствующий стиль письма и так далее. Их иногда называют руководствами по проектированию или бренд-бук, вы можете увидеть пример в <a href="https://www.mozilla.org/en-US/styleguide/products/firefox-os/">Руководство Firefox OS</a>.</p>
+</div>
+
+<h2 id="Сделайте_набросок_вашего_дизайна">Сделайте набросок вашего дизайна</h2>
+
+<p>Теперь возьмите ручку и бумагу и сделайте примерный набросок того, как вы хотите, чтобы выглядел ваш сайт. Для вашей первой веб-страницы должен получиться небольшой набросок, и вы должны взять это в привычку. Это действительно помогает, и вам не нужно быть Ван Гогом!</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9239/website-drawing-scan.png" style="display: block; height: 460px; margin: 0px auto; width: 640px;"></p>
+
+<div class="note">
+<p><strong>Примечание</strong>: Даже в реальных, сложных веб-сайтах, команда разработчиков обычно начинает с наброска на бумаге и потом строит цифровые макеты используя графические редакторы или веб-технологии.</p>
+
+<p>Веб-команда часто включает в себя пару графических дизайнеров и дизайнера с опытом взаимодействия (user-experience (UX) designer). Графические дизайнеры, очевидно, работают вместе над визуализацией веб-сайта. UX дизайнеры играют более абстрактную роль, обращаясь к тому как пользователи будут пользоваться и взаимодействовать с веб-сайтом.</p>
+</div>
+
+<h2 id="Выберите_свои_активы">Выберите свои активы</h2>
+
+<p>На данном этапе хорошо бы начать собирать контент, который в конечном итоге появится на вашей веб-странице.</p>
+
+<h3 id="Текст">Текст</h3>
+
+<p>У вас должен быть текст, разбитый на заголовки и параграфы. Придерживайтесь этого правила.</p>
+
+<h3 id="Цветовая_схема">Цветовая схема</h3>
+
+<p>Чтобы выбрать цвет, перейдите в <a href="/ru/docs/Web/CSS/CSS_Colors/Color_picker_tool">инструмент выбора цвета</a> и выберите цвет, который вам нравится. Когда вы щёлкните по цвету, вы увидите странный код из шести цифр, например, <code>#660066</code>. Это называется <em>шестнадцатеричный код (hex(adecimal) code)</em> и он представляет ваш цвет. Скопируйте это код куда-нибудь прямо сейчас.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8975/Screenshot%20from%202014-11-03%2017:40:49.png" style="height: 262px; width: 448px;"></p>
+
+<h3 id="Изображения">Изображения</h3>
+
+<p>Чтобы выбрать изображение, перейдите в <a href="https://www.google.com/imghp?gws_rd=ssl">Google Картинки</a> и найдите что-нибудь подходящее.</p>
+
+<ol>
+ <li>Когда вы найдете изображение, которое хотели, щёлкните по нему.</li>
+ <li>Нажмите кнопку <em>В полном размере (View image)</em>.</li>
+ <li>На следующей странице, правым щелчком мыши на изображении (Ctrl + клик на Mac), выберите Сохранить изображение как... (<em>Save Image As...)</em>, и выберите место для сохранения вашего изображения. В качестве альтернативы, скопируйте адрес изображения из адресной строки браузера для последующего использования.</li>
+</ol>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8985/Screenshot%20from%202014-11-04%2015:09:21.png" style="height: 293px; width: 420px;"></p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8989/Screenshot%20from%202014-11-04%2015:20:48.png" style="height: 292px; width: 340px;"></p>
+
+<div class="note">
+<p><strong>Примечание</strong>: Большинство изображений в Интернете, использованных в Google Картинках имеют авторские права. Для снижения вероятности нарушения авторских прав, используйте фильтр лицензии Google. Для этого: 1) кликните на <strong>Инструменты поиска (Search tools)</strong>, затем на 2) <strong>Права на использование (Usage rights)</strong>:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8981/Screenshot%20from%202014-11-04%2014:27:45.png" style="height: 195px; width: 587px;"></p>
+</div>
+
+<h3 id="Шрифт">Шрифт</h3>
+
+<p>Чтобы выбрать шрифт:</p>
+
+<ol>
+ <li>Перейдите на <a href="http://www.google.com/fonts">Google Fonts</a> и прокрутите список вниз, пока не найдете шрифт, который вам понравится. Вы также можете использовать элементы управления справа для дальнейшей фильтрации результатов.</li>
+ <li>Щёлкните по кнопке "плюс" рядом со шрифтом, который вы хотите выбрать.</li>
+ <li>Щёлкните по кнопке "* Family Selected" на панели в нижней части страницы. ("*" зависит от того, сколько шрифтов вы выбрали)</li>
+ <li>В всплывающем окне вы можете увидеть и скопировать строки кода, которые предоставляет Google, чтобы сохранить их позже в вашем текстовом редакторе.</li>
+</ol>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13871/font1.png"></p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13873/font2.png"></p>
+
+<p>{{PreviousMenuNext("Learn/Getting_started_with_the_web/Installing_basic_software", "Learn/Getting_started_with_the_web/Dealing_with_files", "Learn/Getting_started_with_the_web")}}</p>
+
+<p> </p>
+
+<p> </p>
+
+<h2 id="В_этом_модуле">В этом модуле</h2>
+
+<ul>
+ <li id="Installing_basic_software"><a href="https://developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web/%D0%A3%D1%81%D1%82%D0%B0%D0%BD%D0%BE%D0%B2%D0%BA%D0%B0_%D0%B1%D0%B0%D0%B7%D0%BE%D0%B2%D0%BE%D0%B3%D0%BE_%D0%BF%D1%80%D0%BE%D0%B3%D1%80%D0%B0%D0%BC%D0%BC%D0%BD%D0%BE%D0%B3%D0%BE_%D0%BE%D0%B1%D0%B5%D1%81%D0%BF%D0%B5%D1%87%D0%B5%D0%BD%D0%B8%D1%8F">Установка базового программного обеспечения</a></li>
+ <li id="What_will_your_website_look_like"><a href="https://developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like">Каким должен быть ваш веб-сайт?</a></li>
+ <li id="Dealing_with_files"><a href="https://developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web/Dealing_with_files">Работа с файлами</a></li>
+ <li id="HTML_basics"><a href="https://developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web/HTML_basics">Основы HTML</a></li>
+ <li id="CSS_basics"><a href="https://developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web/CSS_basics">Основы CSS</a></li>
+ <li id="JavaScript_basics"><a href="https://developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web/JavaScript_basics">Основы JavaScript</a></li>
+ <li id="Publishing_your_website"><a href="https://developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web/Publishing_your_website">Публикация вашего веб-сайта</a></li>
+ <li id="How_the_web_works"><a href="https://developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web/How_the_Web_works">Как работает Веб</a></li>
+</ul>
+
+<p> </p>
diff --git a/files/ru/learn/getting_started_with_the_web/веб_и_веб_стандарты/index.html b/files/ru/learn/getting_started_with_the_web/веб_и_веб_стандарты/index.html
new file mode 100644
index 0000000000..08fad617b5
--- /dev/null
+++ b/files/ru/learn/getting_started_with_the_web/веб_и_веб_стандарты/index.html
@@ -0,0 +1,167 @@
+---
+title: Всемирная сеть (веб) и веб-стандарты
+slug: Learn/Getting_started_with_the_web/Веб_и_веб_стандарты
+tags:
+  - Веб-стандарты
+  - Изучение
+translation_of: Learn/Getting_started_with_the_web/The_web_and_web_standards
+---
+<p dir="ltr">{{learnsidebar}}</p>
+
+<p dir="ltr">Статья содержит общую информацию о всемирной сети (the Web) — откуда она взялась, что такое веб-стандарты, как они связанны, почему "веб разработчик" отличный карьерный выбор и чему полезному можно научиться изучая этот курс.</p>
+
+<h2 dir="ltr" id="Краткая_история_сети_веб">Краткая история сети веб</h2>
+
+<p dir="ltr">Мы постарались максимально кратко изложить здесь информацию. Если вы более детально заинтересованы в истории веб сети, то попробуйте поискать это в интернете.</p>
+
+<p dir="ltr">В конце 1960-х военные США разработали коммуникационную сеть <a href="/en-US/docs/Glossary/Arpanet">ARPANET</a>. Вполне можно её рассматривать в качестве прародителя современной сети, так как она работала с помощью <a href="https://ru.wikipedia.org/wiki/%D0%9A%D0%BE%D0%BC%D0%BC%D1%83%D1%82%D0%B0%D1%86%D0%B8%D1%8F_%D0%BF%D0%B0%D0%BA%D0%B5%D1%82%D0%BE%D0%B2">коммутации пакетов</a>, и для неё впервые была внедрена сетевая модель <a href="https://ru.wikipedia.org/wiki/TCP/IP">TCP/IP</a>. Эти две технологии послужили основой, на которой затем был построен интернет.</p>
+
+<p dir="ltr">В 1980 году Тим Бернерс-Ли (aka TimBL) написал программу под названием ENQUIRE, которая позволяла устанавливать связь между двумя узлами. Ничего не напоминает?</p>
+
+<p dir="ltr">В 1989 году TimBL выступил в организации <a href="https://ru.wikipedia.org/wiki/%D0%A6%D0%95%D0%A0%D0%9D">ЦЕРН</a> с идеями о методах структурирования, обработке и обмена информацией (<a href="https://www.w3.org/History/1989/proposal.html">Information Management: A Proposal</a>), предложив при этом концепцию "<a href="https://ru.wikipedia.org/wiki/%D0%93%D0%B8%D0%BF%D0%B5%D1%80%D1%82%D0%B5%D0%BA%D1%81%D1%82">гипертекста</a>". Идеи Тима были одобрены и он начал воплощать в реальность свой проект. Современная сеть построена на основании его работ. </p>
+
+<p dir="ltr">К концу 1990-го года Тим Бернерс разработал все необходимые для запуска сети средства — <a href="/en-US/docs/Web/HTTP">HTTP</a>, <a href="/en-US/docs/Web/HTML">HTML</a>, первый в мире веб браузер (<a href="https://en.wikipedia.org/wiki/WorldWideWeb">WorldWideWeb</a>), сервер HTTP и несколько веб страниц для наглядности.</p>
+
+<p dir="ltr">В течение нескольких последующих лет веб сеть расширялась, выпускались новые браузеры, были установлены тысячи серверов и созданны миллионы веб страниц. Как и обещали, достаточно краткая история.</p>
+
+<p dir="ltr">Стоит отметить, что в 1994 году TimBL основал консорциум Всемирной паутины (<a href="https://www.w3.org/">World Wide Web Consortium (W3C)</a>)  - организацию, связывающую множество компаний для сплочения усилий в области разработки веб технологий. После этого появились технологии, например, такие как <a href="/en-US/docs/Web/CSS">CSS</a> и <a href="/en-US/docs/Web/JavaScript">JavaScript</a>, которые преобразовали веб сеть в тот вид, в котором мы наблюдаем её сейчас.</p>
+
+<h2 dir="ltr" id="Веб-стандарты">Веб-стандарты</h2>
+
+<p dir="ltr"><strong>Веб-стандарты</strong> - это технологии, используемые для создания веб страниц. Стандарты существуют в виде технической документации (спецификаций), которая точно описывает как та, или иная технология должна работать. Документация никак не поможет изучить то, как пользоваться описываемыми в ней технологиями (вот почему существет сайт MDN Web Docs). Она используются разработчиками ПО для внендрения технологий (например, в веб браузеры).</p>
+
+<p dir="ltr">В качестве примера приведем стандарт <a href="https://html.spec.whatwg.org/multipage/">HTML Living Standard</a>. Он описывает как HTML (все элементы HTML, связанные с ними API и остальные близкие технологии) должны быть реализованы.</p>
+
+<p dir="ltr">Веб-стандарты создаются организациями стандартов — институтами, которые приглашают группы людей из различных компаний для согласования того, как технологии должны применяться наиболее эффективным образом в рассматриваемых случаях. Самая известная организация веб-стандартов - W3C. Существуют и другие: <a href="https://whatwg.org/">WHATWG</a> (ответственны за модернизацию языка html), <a href="https://www.ecma-international.org/">ECMA</a> (выпускают стандарты языка ECMAScript, на котором построен JavaScript), <a href="https://www.khronos.org/">Khronos</a> (создают технологии для 3D графики, например WebGL).</p>
+
+<h3 dir="ltr" id="Open_standards">"Open" standards</h3>
+
+<p dir="ltr">One of the key aspects of web standards, which TimBL and the W3C agreed on from the start, is that the web (and web technologies) should be free to both contribute and use, and not encumbered by patents/licensing. Therefore anyone can write the code to build a website for free, and anyone can contribute to the standards creation process, where the specs are written.</p>
+
+<p dir="ltr">Because web technologies are created openly, in collaboration between many different companies, it means that no one company gets to control them, which is a really good thing. You wouldn't want a single company suddenly deciding to put the entire web behind a paywall, or releasing a new version of HTML that everyone has to buy to continue making web sites, or worse still, just deciding they aren't interested any more and just turning it off.</p>
+
+<p dir="ltr">This allows the web to remain a freely-available public resource.</p>
+
+<h3 dir="ltr" id="Не_разорви_сеть">Не разорви сеть</h3>
+
+<p dir="ltr">Популярная в области веб-стандартов фраза гласит: "не разорви сеть". Это означает, что каждая новая веб-технология должна быть совместима со всеми предыдущими технологиями (поэтому старые сайты до сих пор работают), и со всеми последующими (разрабатываемые в последствии технологии, в свою очередь, должны быть совместимы с имеющимися). В процессе изучения представленного здесь материала вы начнете понимать каким образом это реализуется.</p>
+
+<h2 id="Being_a_web_developer_is_good">Being a web developer is good</h2>
+
+<p>The web industry is a very attractive market to enter if you are looking for a job. Recent published figures say that there are currently around 19 million web developers in the world, and that figure is set more than double in the next decade. And at the same time, there is a skill shortage in the industry — so what better time to learn web development?</p>
+
+<p>It isn't all fun and games however — building web sites is a more complicated proposition than it used to be, and you'll have to put some time in to studying all the different technologies you need to use, all the techniques and best practices you need to know, and all the typical patterns you'll be called upon to implement. It'll take you a few months to really start to get into it, and then you'll need to keep learning so that your knowledge stays up-to-date with all the new tools and features that appear on the web platform, and keep practicing and refining your craft.</p>
+
+<p><em>The only constant is change.</em></p>
+
+<p>Does this sound hard? Don't worry — we aim to give you everything you need to know to get started, and things will get easier. Once you embrace the constant change and uncertainty of the web, you'll start to enjoy yourself. As a part of the web community, you'll have an entire web of contacts and useful material to help you, and you'll start to enjoy the creative possibilities it brings.</p>
+
+<p>You're a digital creative now. Enjoy the experience, and the potential for earning a living.</p>
+
+<h2 id="Overview_of_modern_web_technologies">Overview of modern web technologies</h2>
+
+<p>There are a number of technologies to learn if you want to be a front-end web developer. In this section we will describe them briefly. For a more detailed explanation of how some of them work together, read our article <a href="/en-US/docs/Learn/Getting_started_with_the_web/How_the_Web_works">How the web works</a>.</p>
+
+<h3 id="Browsers">Browsers</h3>
+
+<p>You are probably reading these words inside a web browser in this very moment (unless you've printed it out, or are using assistive technology, such as a screenreader to read it out to you). Web browsers are the software programs people use to consume the web, and include <a href="https://www.mozilla.org/en-US/firefox/">Firefox</a>, <a href="https://www.google.com/chrome/">Chrome</a>, <a href="https://www.opera.com/">Opera</a>, <a href="https://www.apple.com/safari/">Safari</a>, and <a href="https://www.microsoft.com/en-us/windows/microsoft-edge">Edge</a>.</p>
+
+<h3 id="HTTP">HTTP</h3>
+
+<p>Hypertext Transfer Protocol, or <a href="/en-US/docs/Web/HTTP/Basics_of_HTTP">HTTP</a>, is a messaging protocol that allows web browsers to communicate with web servers (where web sites are stored). A typical conversation goes something like</p>
+
+<pre class="notranslate">"Hello web server. Can you give me the files I need to render bbc.co.uk"?
+
+"Sure thing web browser — here you go"
+
+[Downloads files and renders web page]</pre>
+
+<p>The actual syntax for HTTP messages (called requests and responses) is not that human-readable, but this gives you the basic idea.</p>
+
+<h3 id="HTML_CSS_and_JavaScript">HTML, CSS, and JavaScript</h3>
+
+<p><a href="/en-US/docs/Web/HTML">HTML</a>, <a href="/en-US/docs/Web/CSS">CSS</a>, and <a href="/en-US/docs/Web/JavaScript">JavaScript</a> are the main three technologies you'll use to build a website:</p>
+
+<ul>
+ <li>
+  <p>Hypertext markup language, or <strong>HTML</strong>, is a markup language consisting of different elements you can wrap (mark up) content in to give it meaning (semantics) and structure. Simple HTML looks like this:</p>
+
+  <pre class="brush: html notranslate">&lt;h1&gt;This is a top-level heading&lt;/h1&gt;
+
+&lt;p&gt;This is a paragraph of text.&lt;/p&gt;
+
+&lt;img src="cat.jpg" alt="A picture of my cat"&gt;</pre>
+
+  <p>If we adopted a house-building analogy, HTML would be like the foundations and walls of the house, which give it structure and hold it together.</p>
+ </li>
+ <li>
+  <p>Cascading Style Sheets (<strong>CSS</strong>) is a rule-based language used to apply styles to your HTML, for example setting text and background colors, adding borders, animating things, or laying out a page in a certain way. As a simple example, the following code would turn our HTML paragraph red:</p>
+
+  <pre class="brush: css notranslate">p  {
+  color: red;
+}</pre>
+
+  <p>In the house analogy, CSS is like the paint, wallpaper, carpets and paintings you'd use to make the house look nice.</p>
+ </li>
+ <li>
+  <p><strong>JavaScript</strong> is the programming language we use to add interactivity to web sites, from dynamic style switching, to fetching updates from the server, right through to complex 3D graphics. The following simple JavaScript will store a reference to our paragraph in memory and change the text inside it:</p>
+
+  <pre class="brush: js notranslate">let pElem = document.querySelector('p');
+pElem.textContent =  'We changed the text!';</pre>
+
+  <p>In the house analogy, JavaScript is like the cooker, TV, Microwave, or hairdryer — the things that give your house useful functionality</p>
+ </li>
+</ul>
+
+<h3 id="Tooling">Tooling</h3>
+
+<p>Once you've learned the "raw" technologies that can be used to build web pages (such as HTML, CSS, and JavaScript), you'll soon start to come across various tools that can be used to make your work easier or more efficient. Examples include:</p>
+
+<ul>
+ <li>The <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">developer tools</a> inside modern browsers that can be used to debug your code.</li>
+ <li><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing">Testing tools</a> that can be used to run tests to show whether your code is behaving as you intended it to.</li>
+ <li>Libraries and frameworks built on top of JavaScript that allow you to build certain types of web site much more quickly and effectively.</li>
+ <li>So-called "Linters", which take a set of rules, look at your code, and highlight places where you haven't followed the rules properly.</li>
+ <li>Minifiers, which remove all the whitespace from your code files to make it so that they  are smaller and therefore download from the server more quickly.</li>
+</ul>
+
+<h3 id="Server-side_languages_and_frameworks">Server-side languages and frameworks</h3>
+
+<p>HTML, CSS, and JavaScript are front-end (or client-side) languages, which means they are run by the browser to produce a website front-end that your users can use.</p>
+
+<p>There are another class of languages called back-end (or server-side) languages, meaning that they are run on the server before the result is then sent to the browser to be displayed. A typical use for a server-side language is to get some data out of a database and generate some HTML to contain the data, before then sending the HTML over to the browser to display it to the user.</p>
+
+<p>Example server-side languages include ASP.NET, Python, PHP, and NodeJS.</p>
+
+<h2 id="Web_best_practices">Web best practices</h2>
+
+<p>We have briefly talked about the technologies that you'll use to build websites. Now let's discuss the best practices you should employ to make sure you are using those technologies in the best way that you can.</p>
+
+<p>When doing web development, the main cause of uncertainty comes from the fact that you don't know what combination of technology each user will use to view your web site:</p>
+
+<ul>
+ <li>User 1 might be looking at it on an iPhone, with a small, narrow screen.</li>
+ <li>User 2 might be looking at it on a Windows laptop with a widescreen monitor attached to it.</li>
+ <li>User 3 might be blind, and using a screenreader to read the web page out to them.</li>
+ <li>User 4 might be using a really old desktop machine that can't run modern browsers.</li>
+</ul>
+
+<p>Because you don't know exactly what your users will use, you need to design defensively — make your web site as flexible as possible, so that all of the above users can make use of it, even if they might not all get the same experience. In short, we are trying to make the web work for all, as much as possible.</p>
+
+<p>You'll come across the below concepts at some point in your studies.</p>
+
+<ul>
+ <li><strong>Cross-browser compatibility</strong> is the practice of trying to make sure your webpage works across as many devices as possible. This includes using technologies that all the browsers support, delivering better experiences to browsers that can handle them (progressive enhancement), and/or writing code so that it falls back to a simpler but still usable experience in older browsers (graceful degradation). It also involves a lot of testing to see if anything fails in certain browsers, and then more work to fix those failures.</li>
+ <li><strong>Responsive web design</strong> is the practice of making your functionality and layouts flexible so they can automatically adapt to different browsers. An obvious example is a website that is laid out one way in a widescreen browser on the desktop, but displays as a more compact, single-column layout on mobile phone browsers. Try adjusting the width of your browser window now, and see what happens.</li>
+ <li><strong>Performance</strong> means getting web sites to load as quickly as possible, but also making them intuitive and easy to use so that users don't get frustrated and go somewhere else.</li>
+ <li><strong>Accessibility</strong> means making your websites usable by as many different kinds of people as possible (related concepts are diversity and inclusion, and inclusive design). This includes people with visual impairments, hearing impairments, cognitive disabilities, or physical disabilities. It also goes beyond people with disabilities — how about young or old people, people from different cultures, people using mobile devices, or people with unreliable or slow network connections?</li>
+ <li><strong>Internationalization</strong> means making websites usable by people from different cultures, who speak different languages to your own. There are technical considerations here (such as altering your layout so that it still works OK for right-to-left, or even vertical languages), and human ones (such as using simple, non-slang language so that people who have your language as their second or third language are more likely to understand your text).</li>
+ <li><strong>Privacy &amp; Security</strong>. These two concepts are related but different. Privacy refers to allowing people to go about their business privately and not spying on them or collecting more of their data than you absolutely need to. Security refers to constructing your website in a secure way so that malicious users cannot steal information contained on it from you or your users.</li>
+</ul>
+
+<h2 dir="ltr" id="See_also">See also</h2>
+
+<ul dir="ltr">
+ <li><a href="https://en.wikipedia.org/wiki/History_of_the_World_Wide_Web">History of the World Wide Web</a></li>
+ <li><a href="/en-US/docs/Learn/Common_questions/How_does_the_Internet_work">How does the internet work?</a></li>
+</ul>
diff --git a/files/ru/learn/getting_started_with_the_web/установка_базового_программного_обеспечения/index.html b/files/ru/learn/getting_started_with_the_web/установка_базового_программного_обеспечения/index.html
new file mode 100644
index 0000000000..40b4254712
--- /dev/null
+++ b/files/ru/learn/getting_started_with_the_web/установка_базового_программного_обеспечения/index.html
@@ -0,0 +1,78 @@
+---
+title: Установка базового программного обеспечения
+slug: Learn/Getting_started_with_the_web/Установка_базового_программного_обеспечения
+tags:
+  - WebMechanics
+  - Браузер
+  - Интрументы
+  - Начинающий
+  - Новичку
+  - Обучение
+  - Текстовый редактор
+  - Установка
+translation_of: Learn/Getting_started_with_the_web/Installing_basic_software
+---
+<div>
+<div>{{LearnSidebar}}</div>
+
+<div>{{NextMenu("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web")}}</div>
+</div>
+
+<div class="summary">
+<p>В <em>Установке базового программного обеспечения</em>, мы покажем вам, какие инструменты вам необходимы для простой веб-разработки, и как правильно установить их.</p>
+</div>
+
+<h2 id="Какие_инструменты_используют_профессионалы">Какие инструменты используют профессионалы?</h2>
+
+<ul>
+ <li><strong>Компьютер</strong>. Может быть, это звучит очевидно для некоторых людей, но некоторые из вас читают эту статью с телефона или библиотечного компьютера. Для серьезной веб-разработки, лучше приобрести настольный компьютер (Windows, Mac или Linux).</li>
+ <li><strong>Текстовый редактор</strong>, чтобы писать код. Это может быть текстовый редактор (например, <a href="https://code.visualstudio.com/">Visual Studio Code</a>, <a href="https://notepad-plus-plus.org/">Notepad++</a>, <a href="https://www.sublimetext.com/">Sublime Text</a>, <a href="https://atom.io/">Atom</a>, <a href="https://www.gnu.org/software/emacs/">GNU Emacs</a>, или <a href="https://www.vim.org/">VIM</a>) или гибридный редактор (например, <a href="https://www.adobe.com/products/dreamweaver.html">Dreamweaver </a>or <a href="https://www.jetbrains.com/webstorm/">WebStorm</a>). Офисные редакторы не подходят для этого, посколько они зависят от скрытых элементов, которые мешают движкам рендеринга, <span class="tlid-translation translation" lang="ru"><span title="">используемым веб-браузерами</span></span>.</li>
+ <li><strong>Веб-браузеры</strong>, для тестирования кода. В настоящее время наиболее часто используемые браузеры это <a href="https://www.mozilla.org/ru/firefox/new/">Firefox</a>, <a href="https://www.google.com/chrome/browser/">Chrome</a>, <a href="http://www.opera.com/">Opera</a>, <a href="https://www.apple.com/safari/">Safari</a>, и <a href="http://windows.microsoft.com/ru/internet-explorer/download-ie">Internet Explorer</a>. Вы также должны тестировать ваш сайт на то, как он работает на мобильных устройствах и на любых старых браузерах, которые ваша целевая аудитория может все ещё широко использовать (например, IE 6-8). <a href="https://lynx.browser.org/">Lynx</a>, текстовый веб-браузер для терминала, отлично подходит для того, чтобы увидеть, как ваш сайт воспринимается слабовидящими пользователями.</li>
+ <li><strong>Графический редактор</strong>, такие как <a href="http://www.gimp.org/">The Gimp</a>, <a href="http://www.getpaint.net/">Paint.NET</a>, или <a href="http://www.adobe.com/uk/products/photoshop.html">Photoshop</a>, чтобы создавать изображения для ваших веб-страниц.</li>
+ <li><strong>Система контроля версий</strong>, чтобы управлять файлами на сервере, для совместной работы над проектом с командой, обмениваться кодом и избегать редакторских конфликтов. Сейчас <a href="http://git-scm.com/">Git</a> является наиболее популярным инструментом контроля версий, и репозиторий кода <a href="https://github.com/">Github</a>, основанный на Git, также является очень популярным.</li>
+ <li><strong>FTP программа</strong>, чтобы загружать веб-страницы на сервер для публичного просмотра. Существует обилие таких программ, доступных в том числе <a href="https://cyberduck.io/">Cyberduck</a>, <a href="http://fetchsoftworks.com/">Fetch</a>, и <a href="https://filezilla-project.org/">FileZilla</a>.</li>
+ <li><strong>Система автоматизации</strong>, такая как <a href="http://gruntjs.com/">Grunt</a> или <a href="http://gulpjs.com/">Gulp</a>, для автоматического выполнения повторяющихся задач, например, минимизации кода и запуска тестов.</li>
+ <li>Шаблоны, библиотеки, фреймворки и т. д., чтобы ускорить написание общей функциональности.</li>
+ <li>А также некоторые другие инструменты!</li>
+</ul>
+
+<h2 id="Какие_инструменты_на_самом_деле_нужны_мне_прямо_сейчас">Какие инструменты на самом деле нужны мне прямо сейчас?</h2>
+
+<p>Этот список выглядит страшновато, но, к счастью, вы можете начать веб-разработку, не зная ничего о большинстве из того, что в нем написано. В этой статье мы установим базовый минимум - текстовый редактор и некоторые современные веб-браузеры.</p>
+
+<h3 id="Установка_текстового_редактора">Установка текстового редактора</h3>
+
+<p>У вас, наверное, уже есть базовый текстовый редактор на вашем компьютере. По умолчанию Windows включает <a href="https://ru.wikipedia.org/wiki/%D0%91%D0%BB%D0%BE%D0%BA%D0%BD%D0%BE%D1%82_%28%D0%BF%D1%80%D0%BE%D0%B3%D1%80%D0%B0%D0%BC%D0%BC%D0%B0%29">Блокнот</a> и Mac OS X поставляется с <a href="https://ru.wikipedia.org/wiki/TextEdit">TextEdit</a>. Linux дистрибутивы варьируются; Ubuntu поставляется с <a href="https://ru.wikipedia.org/wiki/Gedit">gedit</a> по умолчанию.</p>
+
+<p>Для веб-разработки вам, вероятно, понадобится больше, чем могут предложить Notepad или TextEdit. Мы рекомендуем начать с <a href="https://www.sublimetext.com/"> </a><a href="https://code.visualstudio.com/">Visual Studio Code</a>, <span class="tlid-translation translation" lang="ru"><span title="">который является бесплатным редактором, который предлагает </span></span><span class="tlid-translation translation" lang="ru"><span title="">предварительный просмотр и подсказки во время написания кода.</span></span></p>
+
+<h3 id="Установка_современных_веб-браузеров">Установка современных веб-браузеров</h3>
+
+<p>На данный момент, мы установим только пару настольных веб-браузеров, чтобы проверять наш код. Выберите вашу операционную систему ниже и нажмите на соответствующие ссылки для загрузки установочных программ ваших любимых браузеров:</p>
+
+<ul>
+ <li>Linux: <a href="https://www.mozilla.org/ru/firefox/new/">Firefox</a>, <a href="https://www.google.com/chrome/browser/">Chrome</a>, <a href="http://www.opera.com/">Opera</a>, <a href="https://brave.com">Brave</a>.</li>
+ <li>Windows: <a href="https://www.mozilla.org/ru/firefox/new/">Firefox</a>, <a href="https://www.google.com/chrome/browser/">Chrome</a>, <a href="http://www.opera.com/">Opera</a>, <a href="http://windows.microsoft.com/ru/internet-explorer/download-ie">Internet Explorer</a>, <a href="https://brave.com">Brave</a> (Если у вас есть Windows 8 или выше, вы можете установить IE 10 или более позднюю версию; иначе, вам следует установить альтернативный браузер)</li>
+ <li>Mac: <a href="https://www.mozilla.org/ru/firefox/new/">Firefox</a>, <a href="https://www.google.com/chrome/browser/">Chrome</a>, <a href="http://www.opera.com/">Opera</a>, <a href="https://www.apple.com/safari/">Safari</a>, <a href="https://brave.com">Brave</a> (Safari постовляется с iOS и OS X по умолчанию)</li>
+</ul>
+
+<p>Прежде, чем идти дальше, вам следует установить, по крайней мере, два из этих браузеров, чтобы использовать их для тестирования.</p>
+
+<h3 id="Установка_локального_веб-сервера">Установка локального веб-сервера</h3>
+
+<p>Некоторые примеры для успешной работы необходимо будет запустить на веб-сервере. Вы можете узнать, как это сделать в статье <a href="https://developer.mozilla.org/en-US/docs/Learn/Common_questions/set_up_a_local_testing_server">How do you set up a local testing server?</a></p>
+
+<p>{{NextMenu("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web")}}</p>
+
+<h2 id="В_этом_модуле">В этом модуле</h2>
+
+<ul>
+ <li id="Installing_basic_software"><a href="https://developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web/%D0%A3%D1%81%D1%82%D0%B0%D0%BD%D0%BE%D0%B2%D0%BA%D0%B0_%D0%B1%D0%B0%D0%B7%D0%BE%D0%B2%D0%BE%D0%B3%D0%BE_%D0%BF%D1%80%D0%BE%D0%B3%D1%80%D0%B0%D0%BC%D0%BC%D0%BD%D0%BE%D0%B3%D0%BE_%D0%BE%D0%B1%D0%B5%D1%81%D0%BF%D0%B5%D1%87%D0%B5%D0%BD%D0%B8%D1%8F">Установка базового программного обеспечения</a></li>
+ <li id="What_will_your_website_look_like"><a href="https://developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like">Каким должен быть ваш веб-сайт?</a></li>
+ <li id="Dealing_with_files"><a href="https://developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web/Dealing_with_files">Работа с файлами</a></li>
+ <li id="HTML_basics"><a href="https://developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web/HTML_basics">Основы HTML</a></li>
+ <li id="CSS_basics"><a href="https://developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web/CSS_basics">Основы CSS</a></li>
+ <li id="JavaScript_basics"><a href="https://developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web/JavaScript_basics">Основы JavaScript</a></li>
+ <li id="Publishing_your_website"><a href="https://developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web/Publishing_your_website">Публикация вашего веб-сайта</a></li>
+ <li id="How_the_web_works"><a href="https://developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web/How_the_Web_works">Как работает Веб</a></li>
+</ul>
author	Peter Bengtsson <mail@peterbe.com>	2020-12-08 14:42:52 -0500
committer	Peter Bengtsson <mail@peterbe.com>	2020-12-08 14:42:52 -0500
commit	074785cea106179cb3305637055ab0a009ca74f2 (patch)
tree	e6ae371cccd642aa2b67f39752a2cdf1fd4eb040 /files/ru/learn/getting_started_with_the_web
parent	da78a9e329e272dedb2400b79a3bdeebff387d47 (diff)
download	translated-content-074785cea106179cb3305637055ab0a009ca74f2.tar.gz translated-content-074785cea106179cb3305637055ab0a009ca74f2.tar.bz2 translated-content-074785cea106179cb3305637055ab0a009ca74f2.zip