From 0faf2eec1bc89fbd18f4e0fc2756f20a206a9dcd Mon Sep 17 00:00:00 2001 From: julieng Date: Thu, 15 Sep 2022 14:36:04 +0200 Subject: [PATCH 1/6] Remove spans and fonts as a starter --- .../accessibility_troubleshooting/index.html | 36 +-- files/ru/learn/accessibility/html/index.html | 54 ++-- .../accessibility/wai-aria_basics/index.html | 22 +- .../how_much_does_it_cost/index.html | 2 +- .../index.html | 2 +- .../thinking_before_coding/index.html | 8 +- .../using_github_pages/index.html | 4 +- .../index.html | 12 +- .../what_are_hyperlinks/index.html | 6 +- .../what_is_a_domain_name/index.html | 2 +- .../what_is_a_web_server/index.html | 16 +- .../backgrounds_and_borders/index.html | 102 ++++---- .../cascade_and_inheritance/index.html | 78 +++--- .../building_blocks/cascade_tasks/index.html | 2 +- .../building_blocks/debugging_css/index.html | 30 +-- .../images_media_form_elements/index.html | 18 +- .../selectors/attribute_selectors/index.html | 28 +-- .../index.html | 4 +- .../type_class_and_id_selectors/index.html | 28 +-- .../values_and_units/index.html | 12 +- .../ru/learn/css/css_layout/floats/index.html | 24 +- .../css/css_layout/floats_skills/index.html | 10 +- .../ru/learn/css/css_layout/grids/index.html | 2 +- .../css/css_layout/introduction/index.html | 22 +- .../css/css_layout/multicol_skills/index.html | 4 +- .../multiple-column_layout/index.html | 8 +- .../css/css_layout/position_skills/index.html | 8 +- .../css/css_layout/positioning/index.html | 34 +-- .../css_layout/responsive_design/index.html | 38 +-- .../how_css_is_structured/index.html | 2 +- files/ru/learn/css/howto/index.html | 4 +- .../css/styling_text/fundamentals/index.html | 26 +- files/ru/learn/css/styling_text/index.html | 2 +- .../css/styling_text/styling_links/index.html | 28 +-- .../css/styling_text/styling_lists/index.html | 26 +- .../css/styling_text/web_fonts/index.html | 36 +-- .../basic_native_form_controls/index.html | 2 +- .../example/index.md | 12 +- .../how_to_structure_a_web_form/index.html | 2 +- .../index.html | 2 +- .../learn/forms/styling_web_forms/index.html | 2 +- .../learn/front-end_web_developer/index.html | 2 +- .../html_basics/index.html | 4 +- .../getting_started_with_the_web/index.html | 4 +- .../installing_basic_software/index.html | 4 +- .../javascript_basics/index.html | 6 +- .../publishing_your_website/index.html | 2 +- files/ru/learn/html/howto/index.html | 2 +- .../advanced_text_formatting/index.html | 22 +- .../creating_hyperlinks/index.html | 18 +- .../debugging_html/index.html | 2 +- .../document_and_website_structure/index.html | 4 +- .../html_text_fundamentals/index.html | 122 ++++----- .../index.html | 6 +- .../other_embedding_technologies/index.html | 12 +- .../responsive_images/index.html | 8 +- .../tables/structuring_planet_data/index.html | 2 +- files/ru/learn/index.html | 8 +- .../learn/javascript/asynchronous/index.html | 2 +- .../asynchronous/introducing/index.html | 6 +- .../building_blocks/events/index.html | 12 +- .../javascript/building_blocks/index.html | 2 +- .../building_blocks/looping_code/index.html | 2 +- .../building_blocks/return_values/index.html | 2 +- .../client-side_storage/index.html | 10 +- .../fetching_data/index.html | 2 +- .../client-side_web_apis/index.html | 2 +- .../third_party_apis/index.html | 6 +- .../first_steps/a_first_splash/index.html | 42 ++-- .../javascript/first_steps/arrays/index.html | 14 +- .../learn/javascript/first_steps/index.html | 2 +- .../silly_story_generator/index.html | 18 +- .../javascript/first_steps/strings/index.html | 6 +- .../first_steps/what_is_javascript/index.html | 12 +- .../first_steps/what_went_wrong/index.html | 44 ++-- .../adding_bouncing_balls_features/index.html | 10 - .../javascript/objects/basics/index.html | 2 +- files/ru/learn/javascript/objects/index.html | 2 +- .../learn/javascript/objects/json/index.html | 8 - .../objects/object_prototypes/index.html | 8 +- files/ru/learn/performance/index.html | 2 +- .../apache_configuration_htaccess/index.html | 2 +- .../server-side/django/admin_site/index.html | 2 +- .../django/authentication/index.html | 80 +++--- .../server-side/django/deployment/index.html | 31 +-- .../learn/server-side/django/forms/index.html | 2 +- .../django/introduction/index.html | 4 +- .../django/skeleton_website/index.html | 16 +- .../web_application_security/index.html | 2 +- .../development_environment/index.html | 146 +++++------ .../author_list_page/index.html | 42 ++-- .../displaying_data/book_list_page/index.html | 38 +-- .../bookinstance_list_page/index.html | 54 ++-- .../date_formatting_using_moment/index.html | 22 +- .../flow_control_using_async/index.html | 124 +++++----- .../locallibrary_base_template/index.html | 10 +- .../template_primer/index.html | 24 +- .../forms/create_bookinstance_form/index.html | 132 +++++----- .../forms/update_book_form/index.html | 232 +++++++++--------- .../server-side/express_nodejs/index.html | 10 +- .../express_nodejs/introduction/index.html | 210 ++++++++-------- .../express_nodejs/mongoose/index.html | 14 +- .../skeleton_website/index.html | 18 +- .../tutorial_local_library_website/index.html | 10 +- .../client-server_overview/index.html | 2 +- .../first_steps/introduction/index.html | 2 +- .../first_steps/web_frameworks/index.html | 177 ++++++------- .../first_steps/website_security/index.html | 33 ++- .../index.html | 2 +- .../feature_detection/index.html | 12 +- .../html_and_css/index.html | 38 +-- 111 files changed, 1303 insertions(+), 1392 deletions(-) diff --git a/files/ru/learn/accessibility/accessibility_troubleshooting/index.html b/files/ru/learn/accessibility/accessibility_troubleshooting/index.html index f486ddb73dbf8c..5eb0ae505e197c 100644 --- a/files/ru/learn/accessibility/accessibility_troubleshooting/index.html +++ b/files/ru/learn/accessibility/accessibility_troubleshooting/index.html @@ -50,44 +50,44 @@

Semantic HTML

-

Note: You'll need to update the CSS rule selectors that style the tags to their proper equivalents for the semantic headings. Once you add paragraph elements, you'll notice the styling looking better.

+

Note: You'll need to update the CSS rule selectors that style the tags to their proper equivalents for the semantic headings. Once you add paragraph elements, you'll notice the styling looking better.

-

The images

+

The images

-

The images are currently inaccessible to screenreader users. Can you fix this?

+

The images are currently inaccessible to screenreader users. Can you fix this?

-

The audio player

+

The audio player

    -
  1. The <audio> player isn't accessible to hearing impaired (deaf) people — can you add some kind of accessible alternative for these users?
    2. -
  2. The <audio> player isn't accessible to those using older browsers that don't support HTML5 audio. How can you allow them to still access the audio?
    3. +
  3. The <audio> player isn't accessible to hearing impaired (deaf) people — can you add some kind of accessible alternative for these users?
    4. +
  4. The <audio> player isn't accessible to those using older browsers that don't support HTML5 audio. How can you allow them to still access the audio?
-

The forms

+

The forms

    -
  1. The <input> element in the search form at the top could do with a label, but we don't want to add a visible text label that would potentially spoil the design and isn't really needed by sighted users. How can you add a label that is only accessible to screenreaders?
    2. -
  2. The two <input> elements in the comment form have visible text labels, but they are not unambiguously associated with their labels — how do you achieve this? Note that you'll need to update some of the CSS rule as well.
    3. +
  3. The <input> element in the search form at the top could do with a label, but we don't want to add a visible text label that would potentially spoil the design and isn't really needed by sighted users. How can you add a label that is only accessible to screenreaders?
    4. +
  4. The two <input> elements in the comment form have visible text labels, but they are not unambiguously associated with their labels — how do you achieve this? Note that you'll need to update some of the CSS rule as well.
-

The show/hide comment control

+

The show/hide comment control

-

The show/hide comment control button is not current keyboard-accessible. Can you make it keyboard accessible, both in terms of focusing it using the tab key, and activating it using the return key?

+

The show/hide comment control button is not current keyboard-accessible. Can you make it keyboard accessible, both in terms of focusing it using the tab key, and activating it using the return key?

-

The table

+

The table

-

The data table is not currently very accessible — it is hard for screenreader users to associate data rows and columns together, and the table also has no kind of summary to make it clear what it shows. Can you add some features to your HTML to fix this problem?

+

The data table is not currently very accessible — it is hard for screenreader users to associate data rows and columns together, and the table also has no kind of summary to make it clear what it shows. Can you add some features to your HTML to fix this problem?

-

Other considerations?

+

Other considerations?

-

Can you list two more ideas for improvements that would make the website more accessible?

+

Can you list two more ideas for improvements that would make the website more accessible?

-

Assessment

+

Assessment

-

If you are following this assessment as part of an organized course, you should be able to give your work to your teacher/mentor for marking. If you are self-learning, then you can get the marking guide fairly easily by asking on the discussion thread for this exercise, or in the #mdn IRC channel on Mozilla IRC. Try the exercise first — there is nothing to be gained by cheating!

+

If you are following this assessment as part of an organized course, you should be able to give your work to your teacher/mentor for marking. If you are self-learning, then you can get the marking guide fairly easily by asking on the discussion thread for this exercise, or in the #mdn IRC channel on Mozilla IRC. Try the exercise first — there is nothing to be gained by cheating!

-

{{PreviousMenu("Learn/Accessibility/Mobile", "Learn/Accessibility")}}

+

{{PreviousMenu("Learn/Accessibility/Mobile", "Learn/Accessibility")}}

В этом модуле

diff --git a/files/ru/learn/accessibility/html/index.html b/files/ru/learn/accessibility/html/index.html index f65d96fe1c9eb2..7e1a7398882abf 100644 --- a/files/ru/learn/accessibility/html/index.html +++ b/files/ru/learn/accessibility/html/index.html @@ -78,25 +78,25 @@

Текстовый контент

Одно из самых лучших вспомогательных средств доступности для пользователя скринридера — хорошая структура заголовков, параграфов, список и т.д. Пример хорошей семантики может выглядеть так:

-
<h1>Мой заголовок</h1>
+
<h1>Мой заголовок</h1>
 
-<p>Это первый раздел моей страницы.</p>
+<p>Это первый раздел моей страницы.</p>
 
-<p>Я добавлю ещё один параграф тут.</p>
+<p>Я добавлю ещё один параграф тут.</p>
 
 <ol>
   <li>Это</li>
   <li>список для</li>
   <li>чтения</li>
-</ol>
+</ol>
 
-<h2>Мой подзаголовок</h2>
+<h2>Мой подзаголовок</h2>
 
-<p>Это первый подраздел моей страницы. Я бы хотела, чтобы люди могли найти этот контент!</p>
+<p>Это первый подраздел моей страницы. Я бы хотела, чтобы люди могли найти этот контент!</p>
 
-<h2>Мой второй подзаголовок</h2>
+<h2>Мой второй подзаголовок</h2>
 
-<p>Это второй подраздел. Думаю, он намного интереснее, чем предыдущий.</p>

+<p>Это второй подраздел. Думаю, он намного интереснее, чем предыдущий.</p>

Мы подготовили версию с длинными текстом, чтобы вы попробовали со скринридером (смотрите good-semantics.html). Если вы попробуете поперемещаться, то увидите, как легко ориентироваться на странице:

@@ -109,24 +109,24 @@

Текстовый контент

Иногда люди используют презентационные элементы HTML и перенос строки, чтобы написать заголовки или параграфы:

-
<font size="7">Мой заголовок</font>
-<br><br>
-Это первый раздел моей страницы.
-<br><br>
-Я добавлю ещё один параграф тут.
-<br><br>
+
<font size="7">Мой заголовок</font>
+<br><br>
+Это первый раздел моей страницы.
+<br><br>
+Я добавлю ещё один параграф тут.
+<br><br>
 1. Это
-<br><br>
+<br><br>
 2. список для
-<br><br>
+<br><br>
 3. чтения
-<br><br>
-<font size="5">Мой подзаголовок</font>
-<br><br>
+<br><br>
+<font size="5">Мой подзаголовок</font>
+<br><br>
 Это первый подраздел моей страницы. Я бы хотела, чтобы люди могли найти этот контент!
-<br><br>
-<font size="5">Мой второй подзаголовок</font>
-<br><br>
+<br><br>
+<font size="5">Мой второй подзаголовок</font>
+<br><br>
 Это второй подраздел. Думаю, он намного интереснее, чем предыдущий.

 
 
Если вы попробуете полную версию с помощью скринридера (смотрите bad-semantics.html), вам не слишком это понравится: скринридеру нечего использовать как ориентир, поэтому вы не сможете получить содержание, а вся страница для скринридера — это один большой блок, поэтому он озвучит всё за один раз, без остановок. 

@@ -339,11 +339,11 @@ 
Д
 
 
Хотя дополнение, которые мы сделали, позволяет нам перемещаться по кнопкам с помощью Tab, оно не позволяет нам активировать их кнопкой Enter. Для этого нам необходимо добавить хитрый кусочек JavaScript:

 
-
document.onkeydown = function(e) {
-  if(e.keyCode === 13) { // Кнопка Enter
-    document.activeElement.click();
-  }
-};

+
document.onkeydown = function(e) {
+  if(e.keyCode === 13) { // Кнопка Enter
+    document.activeElement.click();
+  }
+};

 
 
Мы навешиваем обработчик событий на document для обнаружения нажатий с клавиатуры. Далее, через свойство объекта события keyCode, проверяем, какая кнопка была нажата. Если код клавиши совпадает с кодом клавиши Enter, мы выполняем функцию, которая хранится в обработчике кнопки onclick, используя document.activeElement.click(). activeElement возвращает текущий сфокусированный элемент.

 
diff --git a/files/ru/learn/accessibility/wai-aria_basics/index.html b/files/ru/learn/accessibility/wai-aria_basics/index.html
index 40d3e70277c927..f4d2a573d5f1c8 100644
--- a/files/ru/learn/accessibility/wai-aria_basics/index.html
+++ b/files/ru/learn/accessibility/wai-aria_basics/index.html
@@ -10,7 +10,7 @@
 
 
{{PreviousMenuNext("Learn/Accessibility/CSS_and_JavaScript","Learn/Accessibility/Multimedia", "Learn/Accessibility")}}

 
-
Исходя из предыдущей статьи, иногда создание сложных элементов UI, которые включают в себя несемантичный HTML и динамически обновляемый с помощью JavaScript контент, может быть затруднено. WAI-ARIA - это технология, которая может помочь в решении таких проблем, добавляя дополнительную разметку, которую браузеры и вспомогательные технологии могут распознавать и использовать, чтобы пользователи знали, что происходит. В этой статье мы покажем, как использовать эту технологию на базовом уровне для улучшения доступности.

+
Исходя из предыдущей статьи, иногда создание сложных элементов UI, которые включают в себя несемантичный HTML и динамически обновляемый с помощью JavaScript контент, может быть затруднено. WAI-ARIA - это технология, которая может помочь в решении таких проблем, добавляя дополнительную разметку, которую браузеры и вспомогательные технологии могут распознавать и использовать, чтобы пользователи знали, что происходит. В этой статье мы покажем, как использовать эту технологию на базовом уровне для улучшения доступности.

 
 
@@ -33,7 +33,7 @@ 
Новый набор пробле
 
 
С тех пор как веб-приложения стали более сложными и динамичными, появились новые специальные возможности и проблемы.

 
-
Например, HTML5 ввёл ряд семантических элементов, чтобы определить общую разметку страниц ( <nav>, <footer>и т.д.). До того как они были доступны, разработчики просто использовали <div> с идентификаторами или классами, например <div class="nav">, но это создавало проблемы, так как не было никакого простого способа найти определённый раздел страницы программным способом.

+
Например, HTML5 ввёл ряд семантических элементов, чтобы определить общую разметку страниц ( <nav>, <footer>и т.д.). До того как они были доступны, разработчики просто использовали <div> с идентификаторами или классами, например <div class="nav">, но это создавало проблемы, так как не было никакого простого способа найти определённый раздел страницы программным способом.

 
 
Первоначальным решением было добавить одну или несколько скрытых ссылок вверху страницы для ссылки на навигацию (или на что-то ещё), например:

 
@@ -46,7 +46,7 @@ 
Новый набор пробле
 
<input type="date">
 <input type="range">

 
-
Они не очень хорошо поддерживаются в разных браузерах, и их очень сложно стилизовать, что делает их не очень полезными для интеграции с дизайном сайтов. В результате разработчики нередко используют библиотеки JavaScript, которые генерируют такие элементы управления, как последовательность вложенных <div>элементов или ячеек таблиц с именами классов, которые затем стилизуются с помощью CSS и управляют с помощью JavaScript.

+
Они не очень хорошо поддерживаются в разных браузерах, и их очень сложно стилизовать, что делает их не очень полезными для интеграции с дизайном сайтов. В результате разработчики нередко используют библиотеки JavaScript, которые генерируют такие элементы управления, как последовательность вложенных <div>элементов или ячеек таблиц с именами классов, которые затем стилизуются с помощью CSS и управляют с помощью JavaScript.

 
 
The problem here is that visually they work, but screenreaders can't make any sense of what they are at all, and their users just get told that they can see a jumble of elements with no semantics to describe what they mean.

 
@@ -83,7 +83,7 @@ 
Where is WAI-ARIA supported?
    
  
  1. Browser support is generally quite good — at the time of writing, caniuse.com stated that global browser support for WAI-ARIA was around 88%.
    2. 
- 
  2. Screenreader support for ARIA features isn't quite at this level, but the most popular screenreaders are getting there. You can get an idea of support levels by looking at Powermapper's WAI-ARIA Screen reader compatibility article.
    3. 
+ 
  3. Screenreader support for ARIA features isn't quite at this level, but the most popular screenreaders are getting there. You can get an idea of support levels by looking at Powermapper's WAI-ARIA Screen reader compatibility article.
    4. 
 
In this article, we won't attempt to cover every WAI-ARIA feature, and its exact support details. Instead, we will cover the most critical WAI-ARIA features for you to know about; if we don't mention any support details, you can assume that the feature is well-supported. We will clearly mention any exceptions to this.

@@ -265,10 +265,10 @@ 
Form validation and error alerts
First of all, let's revisit the form example we first looked at in our CSS and JavaScript accessibility article (read Keeping it unobtrusive for a full recap). At the end of this section we showed that we have included some ARIA attributes on the error message box that appears when there are validation errors when you try to submit the form:

 
-
<div class="errors" role="alert" aria-relevant="all">
-  <ul>
-  </ul>
-</div>

+
<div class="errors" role="alert" aria-relevant="all">
+  <ul>
+  </ul>
+</div>
    
  
  • role="alert" automatically turns the element it is applied to into a live region, so changes to it are read out; it also semantically identifies it as an alert message (important time/context sensitive information), and represents a better, more accessible way of delivering an alert to a user (modal dialogs like alert() calls have a number of accessibility problems; see Popup Windows by WebAIM).
    • 
@@ -298,11 +298,11 @@ 
    Form validation and error alerts
    
 
    Note: You can see the finished example live at form-validation-updated.html.
    
 
 
-
    WAI-ARIA also enables some advanced form labelling techniques, beyond the classic {{htmlelement("label")}} element. We already talked about using the aria-label property to provide a label where we don't want the label to be visible to sighted users (see the Signposts/Landmarks section, above). There are some other labelling techniques that use other properties such as aria-labelledby if you want to designate a non-<label> element as a label or label multiple form inputs with the same label, and aria-describedby, if you want to associate other information with a form input and have it read out as well. See WebAIM's Advanced Form Labeling article for more details.
    
+
    WAI-ARIA also enables some advanced form labelling techniques, beyond the classic {{htmlelement("label")}} element. We already talked about using the aria-label property to provide a label where we don't want the label to be visible to sighted users (see the Signposts/Landmarks section, above). There are some other labelling techniques that use other properties such as aria-labelledby if you want to designate a non-<label> element as a label or label multiple form inputs with the same label, and aria-describedby, if you want to associate other information with a form input and have it read out as well. See WebAIM's Advanced Form Labeling article for more details.
    
 
-
    There are many other useful properties and states too, for indicating the status of form elements. For example, aria-disabled="true" can be used to indicate that a form field is disabled. Many browsers will just skip past disabled form fields, and they won't even be read out by screenreaders, but in some cases they will be perceived, so it is a good idea to include this attribute to let the screenreader know that a disabled input is in fact disabled.
    
+
    There are many other useful properties and states too, for indicating the status of form elements. For example, aria-disabled="true" can be used to indicate that a form field is disabled. Many browsers will just skip past disabled form fields, and they won't even be read out by screenreaders, but in some cases they will be perceived, so it is a good idea to include this attribute to let the screenreader know that a disabled input is in fact disabled.
    
 
-
    If the disabled state of an input is likely to change, then it is also a good idea to indicate when it happens, and what the result is. For example, in our form-validation-checkbox-disabled.html demo there is a checkbox that when checked, enables another form input to allow further information be entered. We've set up a hidden live region:
    
+
    If the disabled state of an input is likely to change, then it is also a good idea to indicate when it happens, and what the result is. For example, in our form-validation-checkbox-disabled.html demo there is a checkbox that when checked, enables another form input to allow further information be entered. We've set up a hidden live region:
    
 
 
    <p class="hidden-alert" aria-live="assertive"></p>
    
 
diff --git a/files/ru/learn/common_questions/how_much_does_it_cost/index.html b/files/ru/learn/common_questions/how_much_does_it_cost/index.html
index 095c8adbbb7cfb..5e9e49bf34d36c 100644
--- a/files/ru/learn/common_questions/how_much_does_it_cost/index.html
+++ b/files/ru/learn/common_questions/how_much_does_it_cost/index.html
@@ -26,7 +26,7 @@
 
 
    Резюме
    
 
-
    Запуск сайта может вам обойтись в сущее ничто, однако, ваши расходы могут достичь и критических значений. В этой статье мы обсудим, как дорого может что-либо стоить, и как вам получить то, за что вы заплатили (или не платили). 
    
+
    Запуск сайта может вам обойтись в сущее ничто, однако, ваши расходы могут достичь и критических значений. В этой статье мы обсудим, как дорого может что-либо стоить, и как вам получить то, за что вы заплатили (или не платили). 
    
 
 
    Программное обеспечение
    
 
diff --git a/files/ru/learn/common_questions/pages_sites_servers_and_search_engines/index.html b/files/ru/learn/common_questions/pages_sites_servers_and_search_engines/index.html
index c1e74704e4d61b..6ebbbcc05ecb95 100644
--- a/files/ru/learn/common_questions/pages_sites_servers_and_search_engines/index.html
+++ b/files/ru/learn/common_questions/pages_sites_servers_and_search_engines/index.html
@@ -12,7 +12,7 @@
 original_slug: Learn/Pages_sites_servers_and_search_engines
 ---
 
    
-
    В этой статье мы расскажем о различных понятиях связанных с Веб: о веб-страницах, веб-сайтах, веб-серверах и о поисковых системах. Эти термины часто ставят в тупик как начинающих работу с Веб, так и людей, редко пользующихся сетью. Давайте же разберёмся, что именно эти понятия означают!
    
+
    В этой статье мы расскажем о различных понятиях связанных с Веб: о веб-страницах, веб-сайтах, веб-серверах и о поисковых системах. Эти термины часто ставят в тупик как начинающих работу с Веб, так и людей, редко пользующихся сетью. Давайте же разберёмся, что именно эти понятия означают!
    
 
    
 
 

  
 
 
 
 
 
 
 
 

diff --git a/files/ru/learn/common_questions/thinking_before_coding/index.html b/files/ru/learn/common_questions/thinking_before_coding/index.html
index 70d6521d125daa..8f2ebd646bbae3 100644
--- a/files/ru/learn/common_questions/thinking_before_coding/index.html
+++ b/files/ru/learn/common_questions/thinking_before_coding/index.html
@@ -25,7 +25,7 @@
 
 
Определение идеи проекта

 
-
Большинство людей, начиная свой web-проект, фокусируются прежде всего на технической его стороне. Безусловно, вы должны иметь представление о технической стороне своей работы, но гораздо важнее сперва узнать, что вы хотели бы получить в результате. Конечно это кажется очевидным, однако слишком много проектов не доживают до релиза не из-за отсутствия технических знаний, но из-за отсутствия целей и видения.

+
Большинство людей, начиная свой web-проект, фокусируются прежде всего на технической его стороне. Безусловно, вы должны иметь представление о технической стороне своей работы, но гораздо важнее сперва узнать, что вы хотели бы получить в результате. Конечно это кажется очевидным, однако слишком много проектов не доживают до релиза не из-за отсутствия технических знаний, но из-за отсутствия целей и видения.
Так что когда у вас появляется какая-то идея и желание воплотить её в web-сайте, вам необходимо ответить на 3 простых вопроса, и уже потом предпринимать что-либо иное :

 
@@ -53,7 +53,7 @@ 
Более глубо
 
Примечание: Имеется неисчислимое множество способов, как сформулировать идею проекта. К сожалению, мы не можем собрать здесь все сразу (и даже увесистой книги не хватит). То, что мы представляем в этой статье - это простой способ выполнить шаги, которые профессионалы называют Project Ideation, Project Planning и Project Management.

 
 
-
Что же в конце концов я хочу получить?

+
Что же в конце концов я хочу получить?
Этот вопрос наиболее остро нуждается в ответе, поскольку ответ является решающим в дальнейших действиях. Лучше всего подойдёт список целей, которых вы хотите достичь. Это может быть что угодно: интернет-магазин, выражение политических взглядов, расширение круга общения, организация концертов, коллекционирование картинок с котиками, или что угодно ещё, что вы хотите получить.

 
@@ -85,7 +85,7 @@ 
Как сайт поможет мне в достижении цели?

+
Как сайт поможет мне в достижении цели?
И так, у вас есть конкретная цель и вам кажется, что для её достижения нужен веб-сайт. Вы уверены?

 
@@ -97,7 +97,7 @@ 
Что и в какие сроки должно быть реализовано для достижения целей?

+
Что и в какие сроки должно быть реализовано для достижения целей?
Теперь, когда вы уже узнали, что вам на самом деле нужно, настало время составить план, раскладывающий ваши цели на небольшие выполнимые шаги. Ещё нужно помнить, что все ваши планы не есть догмы. Они постоянно эволюционируют вместе с изменением курса проекта. К примеру, если вы вдруг вспомните о чем-то ранее неучтённом, или просто измените своё видение проекта.

 
diff --git a/files/ru/learn/common_questions/using_github_pages/index.html b/files/ru/learn/common_questions/using_github_pages/index.html
index 67e1e15fdff51c..49a7c2348b836f 100644
--- a/files/ru/learn/common_questions/using_github_pages/index.html
+++ b/files/ru/learn/common_questions/using_github_pages/index.html
@@ -51,7 +51,7 @@ 
графический пользовательский интерфейс Git для выполнения тех же задач, если вам неудобно работать с командной строкой.

 
 
-
Каждая операционная система поставляется с инструментом командной строки:

+
Каждая операционная система поставляется с инструментом командной строки:

 
 
    
  
  • Windows: Командную строку (Command Prompt) можно вызвать, нажав клавишу Windows, набрав Command Prompt и выбрав её из появившегося списка. Обратите внимание, что в Windows свои собственные условные обозначения команд, отличные от Linux и OS X, поэтому приведённые ниже команды могут отличаться на вашем компьютере.
    • 
@@ -77,7 +77,7 @@ 
    Загрузка файлов
 
      
  
    1. На текущей странице вас интересует раздел …or push an existing repository from the command line («...или загрузите существующий репозиторий с помощью командной строки»). В этом разделе вы должны увидеть две строки кода. Скопируйте всю первую строку, вставьте её в командную строку и нажмите Enter. Команда должна выглядеть примерно так:
 
-  
      git remote add origin https://github.com/chrisdavidmills/my-repository.git
      
+  
      git remote add origin https://github.com/chrisdavidmills/my-repository.git
      
  
      2. 
  
    2. Затем введите следующие две команды, нажимая Enter после каждой из них. Они готовят код для загрузки в GitHub и просят Git управлять этими файлами.
   
      git add --all
diff --git a/files/ru/learn/common_questions/what_are_browser_developer_tools/index.html b/files/ru/learn/common_questions/what_are_browser_developer_tools/index.html
index 6f53543754a864..59a0e8237afd9c 100644
--- a/files/ru/learn/common_questions/what_are_browser_developer_tools/index.html
+++ b/files/ru/learn/common_questions/what_are_browser_developer_tools/index.html
@@ -40,15 +40,15 @@ 
      (сочетание клавиш - ⌘ + ⌥ + I )
      3. 
+   
    3. Mac OS X. (сочетание клавиш - ⌘ + ⌥ + I )
      4. 
   

  
- 
  • Панель Меню. 
+ 
  • Панель Меню. 
   
      
-   
    • Firefox. Открыть меню  ➤ ➤ Инструменты разработки, или Инструменты ➤ Веб-разработка ➤ Инструменты разработки
      • 
-   
    • Chrome. Дополнительные инструменты ➤ Инструменты разработчика
      • 
-   
    • Safari. Разработка ➤ Показать Web Inspector . Если вы не видите меню "Разработка", зайдите в  Safari ➤ Настройки ➤ Дополнительно,  и проверьте стоит ли галочка напротив "Показать меню разработки". 
      • 
-   
    • Opera. Меню  ➤  Разработка ➤ Инструменты разработчика.  Если вы не видите меню "Разработка",  включите его отображение, перейдя в Меню ➤  Другие инструменты ➤ Показать меню разработчика.
      • 
+   
    • Firefox. Открыть меню  ➤ ➤ Инструменты разработки, или Инструменты ➤ Веб-разработка ➤ Инструменты разработки
      • 
+   
    • Chrome. Дополнительные инструменты ➤ Инструменты разработчика
      • 
+   
    • Safari. Разработка ➤ Показать Web Inspector . Если вы не видите меню "Разработка", зайдите в  Safari ➤ Настройки ➤ Дополнительно,  и проверьте стоит ли галочка напротив "Показать меню разработки". 
      • 
+   
    • Opera. Меню  ➤  Разработка ➤ Инструменты разработчика.  Если вы не видите меню "Разработка",  включите его отображение, перейдя в Меню ➤  Другие инструменты ➤ Показать меню разработчика.
      • 
   
    
  
    • 
  
  • Контекстное меню. Нажмите правой кнопкой мыши на любом участке веб-страницы (Ctrl-клик для Mac), появится контекстное меню, в котором вам нужно выбрать пункт Исследовать Элемент. (дополнение: этот способ отобразит вам код того элемента, на котором вы щёлкнули правой кнопкой.)
    • 
diff --git a/files/ru/learn/common_questions/what_are_hyperlinks/index.html b/files/ru/learn/common_questions/what_are_hyperlinks/index.html
index a7d1f3330cb2da..5ad6e9c6a6cd2e 100644
--- a/files/ru/learn/common_questions/what_are_hyperlinks/index.html
+++ b/files/ru/learn/common_questions/what_are_hyperlinks/index.html
@@ -53,7 +53,7 @@ 
    Активно изучаем
    Глубокое погружение
    
 
-
    Как мы определили, ссылка —  это строка, которая связана с URL. Мы используем ссылки, чтобы с лёгкостью перепрыгивать с одного документа на другой. Здесь существуют некоторые нюансы, которые важно рассмотреть: 
    
+
    Как мы определили, ссылка —  это строка, которая связана с URL. Мы используем ссылки, чтобы с лёгкостью перепрыгивать с одного документа на другой. Здесь существуют некоторые нюансы, которые важно рассмотреть: 
    Типы ссылок
    
 
@@ -61,7 +61,7 @@ 
    Типы ссылок
    Внутренняя ссылка
    Ссылка между двумя веб-страницами, принадлежащими к одному веб-сайту. Без внутренних ссылок нет такого понятия как веб-сайт (конечно, если это не одностраничный сайт).
    Внешняя ссылка
    
- 
    Ссылка с вашей веб-страницы на чью-либо другую веб-страницу. Без внешних ссылок не будет Веба, так как Веб —  это сеть веб-страниц. Используйте внешние ссылки для того, чтобы предоставить информацию помимо той, что вы поддерживаете на вашем сайте. 
    
+ 
    Ссылка с вашей веб-страницы на чью-либо другую веб-страницу. Без внешних ссылок не будет Веба, так как Веб —  это сеть веб-страниц. Используйте внешние ссылки для того, чтобы предоставить информацию помимо той, что вы поддерживаете на вашем сайте. 
    Входящие ссылки
    Ссылка с чьей-либо веб-страницы на ваш сайт. Это внешняя ссылка наоборот. Имейте в виду, что вам не обязательно отвечать тем же кому-то, кто ссылается на ваш сайт.
    
@@ -85,7 +85,7 @@ 
    Ссылки и по
 
      
  
    • Текст ссылки влияет на то, какой поисковый запрос выдаст URL.
      • 
  
    • Чем больше существует входящих ссылок на сайт, тем выше он будет в результатах поиска. 
      • 
- 
    • Внешние ссылки влияют на оценку и сайта источника, и сайта, на который они ссылаются, но в какой степени, —  неизвестно. 
      • 
+ 
    • Внешние ссылки влияют на оценку и сайта источника, и сайта, на который они ссылаются, но в какой степени, —  неизвестно. 
      • 
 
    
 
 
    SEO (поисковая оптимизация) - это комплекс мер для "поднятия" позиции сайтов в поисковой выдаче. Оптимизация использования ссылок на сайте является одной из ключевых в SEO.
    
diff --git a/files/ru/learn/common_questions/what_is_a_domain_name/index.html b/files/ru/learn/common_questions/what_is_a_domain_name/index.html
index 3949a16ee4a4dd..84b26c4c07458e 100644
--- a/files/ru/learn/common_questions/what_is_a_domain_name/index.html
+++ b/files/ru/learn/common_questions/what_is_a_domain_name/index.html
@@ -29,7 +29,7 @@
 
 
    Summary
    
 
-
    Доменные имена - ключевая составляющая инфраструктуры Интернета. Они предоставляют человеко-читаемые адреса веб-серверов, доступных в Интернете.
    
+
    Доменные имена - ключевая составляющая инфраструктуры Интернета. Они предоставляют человеко-читаемые адреса веб-серверов, доступных в Интернете.
    Каждый компьютер подключён к Интернету и может быть доступен через публичный {{Glossary("IP")}}-адрес, который состоит из 32 бит для IPv4 адреса (такие адреса обычно записываются в виде четырёх чисел от 0 до 255, разделённых точками (напр.., 173.194.121.32) или 128 bit для IPv6 адреса (они обычно записываются в виде 8 групп по 4 шестнадцатеричных чисел, разделённых двоеточиями (напр., 2027:0da8:8b73:0000:0000:8a2e:0370:1337). Компьютеры могут легко обрабатывать эти адреса , но у живых людей уходит слишком много времени на использование таких адресов. IP-адреса также сложно запоминаются и часто меняются со временем. Для решения этой проблемы в Интернете используются человеко-читаемые адреса, называемые доменными именами.
    
 
diff --git a/files/ru/learn/common_questions/what_is_a_web_server/index.html b/files/ru/learn/common_questions/what_is_a_web_server/index.html
index bc67a40dabcf3f..67804f204f3edc 100644
--- a/files/ru/learn/common_questions/what_is_a_web_server/index.html
+++ b/files/ru/learn/common_questions/what_is_a_web_server/index.html
@@ -31,10 +31,10 @@
 
 
    Введение
    
 
-
    Понятие «веб-сервер» может относиться как к аппаратной начинке, так и к программному обеспечению. Или даже к обеим частям, работающим совместно.
    
+
    Понятие «веб-сервер» может относиться как к аппаратной начинке, так и к программному обеспечению. Или даже к обеим частям, работающим совместно.
      
- 
    1. С точки зрения "железа", «веб-сервер» — это компьютер, который хранит файлы сайта (HTML-документы, CSS-стили, JavaScript-файлы, картинки и другие) и доставляет их на устройство конечного пользователя (веб-браузер и т.д.). Он подключён к сети Интернет и может быть доступен через доменное имя, подобное mozilla.org.
      2. 
+ 
    2. С точки зрения "железа", «веб-сервер» — это компьютер, который хранит файлы сайта (HTML-документы, CSS-стили, JavaScript-файлы, картинки и другие) и доставляет их на устройство конечного пользователя (веб-браузер и т.д.). Он подключён к сети Интернет и может быть доступен через доменное имя, подобное mozilla.org.
      3. 
  
    3. С точки зрения ПО, веб-сервер включает в себя несколько компонентов, которые контролируют доступ веб-пользователей к размещённым на сервере файлам, как минимум — это HTTP-сервер. HTTP-сервер — это часть ПО, которая понимает {{Glossary("URL","URL-адреса")}} (веб-адреса) и {{Glossary("HTTP")}} (протокол, который ваш браузер использует для просмотра веб-страниц).
      4. 
 
    
 
@@ -44,9 +44,9 @@ 
    Введение
    Чтобы опубликовать веб-сайт, необходим либо статический, либо динамический веб-сервер.
    
 
-
    Статический веб-сервер, или стек, состоит из компьютера ("железо") с сервером HTTP (ПО). Мы называем это «статикой», потому что сервер посылает размещённые файлы в браузер «как есть».
    
+
    Статический веб-сервер, или стек, состоит из компьютера ("железо") с сервером HTTP (ПО). Мы называем это «статикой», потому что сервер посылает размещённые файлы в браузер «как есть».
    
 
-
    Динамический веб-сервер состоит из статического веб-сервера и дополнительного программного обеспечения, чаще всего сервера приложения и базы данных. Мы называем его «динамическим», потому что сервер приложений изменяет исходные файлы перед отправкой в ваш браузер по HTTP.
    
+
    Динамический веб-сервер состоит из статического веб-сервера и дополнительного программного обеспечения, чаще всего сервера приложения и базы данных. Мы называем его «динамическим», потому что сервер приложений изменяет исходные файлы перед отправкой в ваш браузер по HTTP.
    Например, для получения итоговой страницы, которую вы просматриваете в браузере, сервер приложений может заполнить HTML-шаблон данными из базы данных. Такие сайты, как MDN или Википедия, состоят из тысяч веб-страниц, но они не являются реальными HTML документами — лишь несколько HTML-шаблонов и гигантские базы данных. Эта структура упрощает и ускоряет сопровождение веб-приложений и доставку контента.
    
 
@@ -106,9 +106,9 @@ 
    Связь по HTTP
    Статический и Динамический контент
    
 
-
    Грубо говоря, сервер может отдавать статическое или динамическое содержимое. «Статическое» означает «отдаётся как есть». Статические веб-сайты делаются проще всего, поэтому мы предлагаем вам сделать свой первый сайт статическим.
    
+
    Грубо говоря, сервер может отдавать статическое или динамическое содержимое. «Статическое» означает «отдаётся как есть». Статические веб-сайты делаются проще всего, поэтому мы предлагаем вам сделать свой первый сайт статическим.
    
 
-
    «Динамическое» означает, что сервер обрабатывает данные или даже генерирует их на лету из базы данных. Это обеспечивает большую гибкость, но технически сложнее в реализации и обслуживании, из-за чего процесс создания сайта очень сильно усложняется.
    
+
    «Динамическое» означает, что сервер обрабатывает данные или даже генерирует их на лету из базы данных. Это обеспечивает большую гибкость, но технически сложнее в реализации и обслуживании, из-за чего процесс создания сайта очень сильно усложняется.
    Возьмём для примера страницу, которую вы сейчас читаете. На веб-сервере, где она хостится, есть сервер приложения, который извлекает содержимое статьи из базы данных, форматирует его, добавляет в HTML-шаблоны и отправляет вам результат. В нашем случае, сервер приложения называется Kuma, написан он на языке программирования Python (используя фреймворк Django). Команда Mozilla создала Kuma для конкретных нужд MDN, но есть множество подобных приложений, построенных совершенно на других технологиях.
    
 
@@ -123,7 +123,3 @@ 
    Следующие шаги
  • узнать больше о разнообразии ПО, которое может пригодиться для создания веб-сайта
  • двигаться к практике: например, узнать как загружать файлы на веб-сервер.
    • 
-
-
    
-
-
    
diff --git a/files/ru/learn/css/building_blocks/backgrounds_and_borders/index.html b/files/ru/learn/css/building_blocks/backgrounds_and_borders/index.html
index 3e65340d1cef79..da21d605703bc8 100644
--- a/files/ru/learn/css/building_blocks/backgrounds_and_borders/index.html
+++ b/files/ru/learn/css/building_blocks/backgrounds_and_borders/index.html
@@ -15,7 +15,7 @@
 ---
 
    {{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/The_box_model", "Learn/CSS/Building_blocks/Handling_different_text_directions", "Learn/CSS/Building_blocks")}}
    
 
-
    В этом уроке мы рассмотрим некоторые интересные возможности, которые вы можете сделать с помощью CSS-свойств фона и границ . Благодаря добавлению градиентов, фоновых изображений и закруглённых углов свойства фона и границ ответят на многие вопросы стилизации в CSS.
    
+
    В этом уроке мы рассмотрим некоторые интересные возможности, которые вы можете сделать с помощью CSS-свойств фона и границ . Благодаря добавлению градиентов, фоновых изображений и закруглённых углов свойства фона и границ ответят на многие вопросы стилизации в CSS.
    
 
 
 
 
 
 
 
 
 
 
 
 
  
  
  
  
  
 
 
 
 
 
 
 
 
 
 
 
 
 
  
  
 
 
 
    
@@ -32,7 +32,7 @@
 
 
    Стилизация фона в CSS
    
 
-
    CSS-свойство {{cssxref ("background")}} является сокращением для ряда полных свойств фона, с которыми мы познакомимся в этом уроке. Если вы обнаружите сложное свойство background в таблице стилей, это может показаться трудным для понимания, так как одновременно может быть передано так много значений.
    
+
    CSS-свойство {{cssxref ("background")}} является сокращением для ряда полных свойств фона, с которыми мы познакомимся в этом уроке. Если вы обнаружите сложное свойство background в таблице стилей, это может показаться трудным для понимания, так как одновременно может быть передано так много значений.
    .box {
   background: linear-gradient(105deg, rgba(255,255,255,.2) 39%, rgba(51,56,57,1) 96%) center center / 400px 200px no-repeat,
@@ -40,33 +40,33 @@ 
    Стилизация фона в C
 } 
 
    
 
-
    Мы вернёмся к тому, как работает сокращение позже, а пока давайте взглянем на различные вещи, которые вы можете делать с фоном в CSS, посмотрев на отдельные свойства background.
    
+
    Мы вернёмся к тому, как работает сокращение позже, а пока давайте взглянем на различные вещи, которые вы можете делать с фоном в CSS, посмотрев на отдельные свойства background.
    Фоновый цвет
    
 
-
    Свойство {{cssxref ("background-color")}} определяет цвет фона для любого элемента в CSS. Свойство принимает любой допустимый цвет <color>. background-color распространяется на сам контент и отступы от него (padding).
    
+
    Свойство {{cssxref ("background-color")}} определяет цвет фона для любого элемента в CSS. Свойство принимает любой допустимый цвет <color>. background-color распространяется на сам контент и отступы от него (padding).
    
 
-
    В приведённом ниже примере мы использовали различные значения цвета, чтобы добавить цвет фона к блоку, заголовку и элементу {{htmlelement ("span")}}.
    
+
    В приведённом ниже примере мы использовали различные значения цвета, чтобы добавить цвет фона к блоку, заголовку и элементу {{htmlelement ("span")}}.
    
 
-
    Поиграйте с ними, используя любое доступное значение <color>.
    
+
    Поиграйте с ними, используя любое доступное значение <color>.
    {{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/color.html", '100%', 600)}}
    Фоновое изображение
    
 
-
    Свойство {{cssxref ("background-image")}} позволяет отображать изображение в качестве фона элемента. В приведённом ниже примере у нас есть два блока — в одном фоновое изображение больше, чем размеры блока, а в другом - маленькое изображение звезды.
    
+
    Свойство {{cssxref ("background-image")}} позволяет отображать изображение в качестве фона элемента. В приведённом ниже примере у нас есть два блока — в одном фоновое изображение больше, чем размеры блока, а в другом - маленькое изображение звезды.
    
 
-
    Этот пример демонстрирует две особенности фоновых изображений. По умолчанию большое изображение не масштабируется до размера блока, поэтому мы видим только его небольшой угол, в то время как маленькое изображение повторяется, чтобы заполнить весь блок. В нашем случае фактически было использовано изображение одной маленькой звезды.
    
+
    Этот пример демонстрирует две особенности фоновых изображений. По умолчанию большое изображение не масштабируется до размера блока, поэтому мы видим только его небольшой угол, в то время как маленькое изображение повторяется, чтобы заполнить весь блок. В нашем случае фактически было использовано изображение одной маленькой звезды.
    {{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/background-image.html", '100%', 600)}}
    
-
    Если кроме фонового изображения вы добавили фоновый цвет, то изображение будет отображаться над цветом. Попробуйте добавить свойство background-color в приведённый выше пример, чтобы увидеть это в действии.
    
+
    Если кроме фонового изображения вы добавили фоновый цвет, то изображение будет отображаться над цветом. Попробуйте добавить свойство background-color в приведённый выше пример, чтобы увидеть это в действии.
    
 
    Свойство  background-repeat
    
 
-
    Свойство {{cssxref ("background-repeat")}} используется для управления повторениями фонового изображения. Доступные значения:
    
+
    Свойство {{cssxref ("background-repeat")}} используется для управления повторениями фонового изображения. Доступные значения:
      
  
    • no-repeat — останавливает повторение фонового изображения во всех направлениях.
      • 
@@ -75,46 +75,46 @@ 
      Свойство  background-repeat<
  
    • repeat — повторение фонового изображения в обоих направлениях. Установлено по умолчанию.
      • 
 
    
 
-
    Попробуйте эти значения в примере ниже. Мы установили значение no-repeat, поэтому вы видите только одну звезду. Попробуйте разные значения -  repeat-x  и  repeat-y —  чтобы увидеть, какие эффекты они оказывают.
    
+
    Попробуйте эти значения в примере ниже. Мы установили значение no-repeat, поэтому вы видите только одну звезду. Попробуйте разные значения -  repeat-x  и  repeat-y —  чтобы увидеть, какие эффекты они оказывают.
    {{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/repeat.html", '100%', 480)}}
    Изменение размеров фонового изображения
    
 
-
    В приведённом выше примере у нас есть большое изображение, которое в конечном итоге было обрезано, так как оно больше, чем элемент, фоном которого оно является. В этом случае мы могли бы использовать свойство {{cssxref ("background-size")}}, которое может принимать значения длины или в процентах, чтобы размер изображения соответствовал размеру фона.
    
+
    В приведённом выше примере у нас есть большое изображение, которое в конечном итоге было обрезано, так как оно больше, чем элемент, фоном которого оно является. В этом случае мы могли бы использовать свойство {{cssxref ("background-size")}}, которое может принимать значения длины или в процентах, чтобы размер изображения соответствовал размеру фона.
    
 
-
    Вы также можете использовать ключевые слова:
    
+
    Вы также можете использовать ключевые слова:
      
- 
    • cover  — браузер сделает изображение достаточно большим, чтобы оно полностью заполнило блок, сохраняя при этом соотношение сторон. В этом случае часть изображения, скорее всего, окажется за пределами блока.
      • 
- 
    • contain — браузер сделает изображение нужного размера, чтобы поместиться в блоке. В этом случае могут появиться пробелы с обеих сторон или сверху и снизу изображения, если соотношение сторон изображения отличается от соотношения сторон блока.
      • 
+ 
    • cover  — браузер сделает изображение достаточно большим, чтобы оно полностью заполнило блок, сохраняя при этом соотношение сторон. В этом случае часть изображения, скорее всего, окажется за пределами блока.
      • 
+ 
    • contain — браузер сделает изображение нужного размера, чтобы поместиться в блоке. В этом случае могут появиться пробелы с обеих сторон или сверху и снизу изображения, если соотношение сторон изображения отличается от соотношения сторон блока.
      • 
 
    Ниже я применил значения длины к размерам изображения. Глядите, как это исказило изображение.
    
 
-
    В приведённом ниже примере я использовал большое изображение из ранее рассмотренного примера и указал значения длины, чтобы определить его размер внутри блока. Вы можете посмотреть, как это исказило изображение.
    
+
    В приведённом ниже примере я использовал большое изображение из ранее рассмотренного примера и указал значения длины, чтобы определить его размер внутри блока. Вы можете посмотреть, как это исказило изображение.
    Попробуйте следующее.
      
- 
    • Измените значения длины, используемые для изменения размера фона.
      • 
+ 
    • Измените значения длины, используемые для изменения размера фона.
      • 
  
    • Измените значение длины на background-size: cover или background-size: contain. 
      • 
- 
    • Если ваше изображение меньше размеров блока, вы можете изменить значение свойства background-repeat, чтобы повторить изображение.
      • 
+ 
    • Если ваше изображение меньше размеров блока, вы можете изменить значение свойства background-repeat, чтобы повторить изображение.
      • 
 
    {{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/size.html", '100%', 600)}}
    Позиционирование фонового изображения
    
 
-
    Свойство {{cssxref ("background-position")}} позволяет вам изменять позицию, в которой фоновое изображение появляется в блоке. При этом используется система координат, в которой левый верхний угол блока равен (0,0), а сам блок располагается вдоль горизонтальной (x) и вертикальной (y) осей.
    
+
    Свойство {{cssxref ("background-position")}} позволяет вам изменять позицию, в которой фоновое изображение появляется в блоке. При этом используется система координат, в которой левый верхний угол блока равен (0,0), а сам блок располагается вдоль горизонтальной (x) и вертикальной (y) осей.
    
 
    Примечание: По умолчанию значение background-position равно (0,0).
    
 
    
 
-
    Обычно свойство background-position задают в виде двух последовательных значений  —  значение по горизонтали, за которым следует значение по вертикали.
    
+
    Обычно свойство background-position задают в виде двух последовательных значений  —  значение по горизонтали, за которым следует значение по вертикали.
    
 
-
    Вы можете использовать такие ключевые слова, как top и right (с остальными можете ознакомиться на странице {{cssxref ("background-position")}}):
    
+
    Вы можете использовать такие ключевые слова, как top и right (с остальными можете ознакомиться на странице {{cssxref ("background-position")}}):
    .box {
   background-image: url(star.png);
@@ -132,7 +132,7 @@ 
    Вы также можете смешивать значения ключевых слов с длинами или процентами, например:
    
+
    Вы также можете смешивать значения ключевых слов с длинами или процентами, например:
    
 
 
    .box {
   background-image: url(star.png);
@@ -140,7 +140,7 @@ 
    И наконец, вы также можете использовать синтаксис с четырьмя значениями, чтобы указать расстояние от определённых краёв блока - единица длины в данном случае представляет собой смещение от значения ключевого слова. Итак, в CSS ниже мы сместили фон на 20 пикселей сверху и на 10 пикселей справа:
    
+
    И наконец, вы также можете использовать синтаксис с четырьмя значениями, чтобы указать расстояние от определённых краёв блока - единица длины в данном случае представляет собой смещение от значения ключевого слова. Итак, в CSS ниже мы сместили фон на 20 пикселей сверху и на 10 пикселей справа:
    
 
 
    .box {
   background-image: url(star.png);
@@ -148,21 +148,21 @@ 
    Используйте приведённый ниже пример, чтобы поэкспериментировать с этими значениями и переместить звезду внутри блока.
    
+
    Используйте приведённый ниже пример, чтобы поэкспериментировать с этими значениями и переместить звезду внутри блока.
    
 
 
    {{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/position.html", '100%', 480)}}
    
 
 
    
-
    Примечание: background-position — это сокращение для {{cssxref("background-position-x")}} и {{cssxref("background-position-y")}}, которые позволяют вам устанавливать различные значения положения по оси индивидуально.
    
+
    Примечание: background-position — это сокращение для {{cssxref("background-position-x")}} и {{cssxref("background-position-y")}}, которые позволяют вам устанавливать различные значения положения по оси индивидуально.
    
 
    
 
 
    Градиент в качестве фона
    
 
-
    Градиент - при использовании для фона - действует так же, как изображение, и поэтому задаётся свойством {{cssxref ("background-image")}}.
    
+
    Градиент - при использовании для фона - действует так же, как изображение, и поэтому задаётся свойством {{cssxref ("background-image")}}.
    
 
-
    Вы можете прочитать больше о различных типах градиентов и о том, что вы можете с ними делать на странице MDN для типа данных <gradient>. Поиграть с градиентами вы можете используя один из многих генераторов градиентов CSS, доступных в Интернете, например этот. Вы можете создать градиент, а затем скопировать и вставить его в свой код.
    
+
    Вы можете прочитать больше о различных типах градиентов и о том, что вы можете с ними делать на странице MDN для типа данных <gradient>. Поиграть с градиентами вы можете используя один из многих генераторов градиентов CSS, доступных в Интернете, например этот. Вы можете создать градиент, а затем скопировать и вставить его в свой код.
    
 
-
    Попробуйте использовать разные градиенты в примере ниже. В двух блоках соответственно у нас есть линейный градиент, растянутый на весь блок, и радиальный градиент с заданным размером, который поэтому повторяется.
    
+
    Попробуйте использовать разные градиенты в примере ниже. В двух блоках соответственно у нас есть линейный градиент, растянутый на весь блок, и радиальный градиент с заданным размером, который поэтому повторяется.
    
 
 
    {{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/gradients.html", '100%', 600)}}
    
 
@@ -170,70 +170,70 @@ 
    Несколь
 
 
    Также возможно создавать несколько фоновых изображений — просто разделив значения свойства background-image запятыми.
    
 
-
    Когда вы сделаете это, произойдёт наложение фоновых изображений друг на друга. Фоновые изображения будут наложены слоями, где каждое новое фоновое изображение, перечисленное в коде, будет накладываться поверх ранее указанного изображения. 
    
+
    Когда вы сделаете это, произойдёт наложение фоновых изображений друг на друга. Фоновые изображения будут наложены слоями, где каждое новое фоновое изображение, перечисленное в коде, будет накладываться поверх ранее указанного изображения. 
    
 
 
    
-
    Примечание: Градиенты можно легко смешивать с обычными фоновыми изображениями.
    
+
    Примечание: Градиенты можно легко смешивать с обычными фоновыми изображениями.
    
 
    
 
-
    Другие свойства background- * также могут иметь значения, разделённые запятыми,  как и background-image:
    
+
    Другие свойства background- * также могут иметь значения, разделённые запятыми,  как и background-image:
    
 
 
    background-image: url(image1.png), url(image2.png), url(image3.png), url(image1.png);
 background-repeat: no-repeat, repeat-x, repeat;
 background-position: 10px 20px,  top right;
    
 
-
    Каждое значение различных свойств будет соответствовать значениям в той же позиции в других свойствах. Выше, например, значение background-repeat для image1 будет no-repeat. Однако, что происходит, когда разные свойства имеют разное количество значений? Ответ заключается в том, что меньшее количество значений будет циклически повторяться - в приведённом выше примере есть четыре фоновых изображения, и только два значения background-position. Первые два значения позиции будут применены к первым двум изображениям, затем они снова будут циклически повторяться - image3 будет присвоено первое значение позиции, а image4 будет присвоено второе значение позиции.
    
+
    Каждое значение различных свойств будет соответствовать значениям в той же позиции в других свойствах. Выше, например, значение background-repeat для image1 будет no-repeat. Однако, что происходит, когда разные свойства имеют разное количество значений? Ответ заключается в том, что меньшее количество значений будет циклически повторяться - в приведённом выше примере есть четыре фоновых изображения, и только два значения background-position. Первые два значения позиции будут применены к первым двум изображениям, затем они снова будут циклически повторяться - image3 будет присвоено первое значение позиции, а image4 будет присвоено второе значение позиции.
    
 
-
    Поиграем? В приведённом ниже примере я добавил два изображения. Чтобы продемонстрировать порядок наложения, попробуйте поменять порядок фоновых изображений в списке. Или поиграйте с другими свойствами, чтобы изменить положение, размер или повторяемость значений.
    
+
    Поиграем? В приведённом ниже примере я добавил два изображения. Чтобы продемонстрировать порядок наложения, попробуйте поменять порядок фоновых изображений в списке. Или поиграйте с другими свойствами, чтобы изменить положение, размер или повторяемость значений.
    
 
 
    {{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/multiple-background-image.html", '100%', 480)}}
    
 
 
    Закрепление фона
    
 
-
    Другая опция, которую можно применить к фону, - это указать, как он будет прокручиваться при прокрутке содержимого. Это контролируется с помощью свойства {{cssxref ("background-attachment")}}, которое может принимать следующие значения:
    
+
    Другая опция, которую можно применить к фону, - это указать, как он будет прокручиваться при прокрутке содержимого. Это контролируется с помощью свойства {{cssxref ("background-attachment")}}, которое может принимать следующие значения:
    
 
 
      
- 
    • scroll: Заставляет элементы фона прокручиваться при прокрутке страницы. Если содержимое элемента прокручивается, фон не перемещается. Фактически, фон фиксируется в той же позиции на странице, поэтому он прокручивается по мере прокрутки страницы.
      • 
- 
    • fixed: Фиксирует  элементы фона в области просмотра, чтобы он не прокручивался при прокрутке страницы или содержимого элемента. Фон всегда будет оставаться на одном и том же месте на экране.
      • 
- 
    • local: Это значение было добавлено позже (оно поддерживается только в Internet Explorer 9+, тогда как другие поддерживаются в IE4+), потому что значение scroll довольно запутанно и во многих случаях действительно не делает то, что вы хотите. Значение local фиксирует фон для элемента, к которому он применён, поэтому, когда вы прокручиваете элемент, фон прокручивается вместе с ним.  
      • 
+ 
    • scroll: Заставляет элементы фона прокручиваться при прокрутке страницы. Если содержимое элемента прокручивается, фон не перемещается. Фактически, фон фиксируется в той же позиции на странице, поэтому он прокручивается по мере прокрутки страницы.
      • 
+ 
    • fixed: Фиксирует  элементы фона в области просмотра, чтобы он не прокручивался при прокрутке страницы или содержимого элемента. Фон всегда будет оставаться на одном и том же месте на экране.
      • 
+ 
    • local: Это значение было добавлено позже (оно поддерживается только в Internet Explorer 9+, тогда как другие поддерживаются в IE4+), потому что значение scroll довольно запутанно и во многих случаях действительно не делает то, что вы хотите. Значение local фиксирует фон для элемента, к которому он применён, поэтому, когда вы прокручиваете элемент, фон прокручивается вместе с ним.  
      • 
 
    
 
-
    Свойство {{cssxref ("background-attachment")}} действует только тогда, когда есть контент для прокрутки, поэтому мы сделали пример, чтобы продемонстрировать различия между тремя значениями - взгляните на background-attachment.html (также смотри исходный код здесь).
    
+
    Свойство {{cssxref ("background-attachment")}} действует только тогда, когда есть контент для прокрутки, поэтому мы сделали пример, чтобы продемонстрировать различия между тремя значениями - взгляните на background-attachment.html (также смотри исходный код здесь).
    
 
-
    Использование сокращённого свойства background
    
+
    Использование сокращённого свойства background
    
 
-
    Как я упоминал в начале этого урока, вы часто будете видеть фон, заданный с помощью свойства {{cssxref ("background")}}. Это сокращение позволяет вам одновременно устанавливать все различные свойства.
    
+
    Как я упоминал в начале этого урока, вы часто будете видеть фон, заданный с помощью свойства {{cssxref ("background")}}. Это сокращение позволяет вам одновременно устанавливать все различные свойства.
    
 
-
    При использовании нескольких фонов необходимо указать все свойства для первого фона, а затем добавить следующий фон после запятой. В приведённом ниже примере у нас есть градиент с размером и положением, затем фоновое изображение со значением no-repeat и положением, затем цвет.
    
+
    При использовании нескольких фонов необходимо указать все свойства для первого фона, а затем добавить следующий фон после запятой. В приведённом ниже примере у нас есть градиент с размером и положением, затем фоновое изображение со значением no-repeat и положением, затем цвет.
    
 
-
    При записи сокращённых значений фонового изображения необходимо соблюдать несколько правил, например:
    
+
    При записи сокращённых значений фонового изображения необходимо соблюдать несколько правил, например:
    
 
 
      
  
    • background-color можно указывать только после последней запятой.
      • 
  
    • Значения background-size могут быть включены только сразу после background-position, разделённые символом '/', например: center/80%. 
      • 
 
    
 
-
    Посетите страницу MDN свойства {{cssref ("background")}}, чтобы увидеть полное описание.
    
+
    Посетите страницу MDN свойства {{cssref ("background")}}, чтобы увидеть полное описание.
    
 
 
    {{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/background.html", '100%', 600)}} 
    
 
 
    Доступность просмотра
    
 
-
    Помещая текст поверх фонового изображения или цвета, вы должны позаботиться о том, чтобы у вас было достаточно контраста, чтобы текст был читаемым для посетителей вашего сайта. Если указывается изображение, и текст будет помещён поверх этого изображения, вы также должны указать background-color, который позволит тексту быть разборчивым, если изображение не загружается.
    
+
    Помещая текст поверх фонового изображения или цвета, вы должны позаботиться о том, чтобы у вас было достаточно контраста, чтобы текст был читаемым для посетителей вашего сайта. Если указывается изображение, и текст будет помещён поверх этого изображения, вы также должны указать background-color, который позволит тексту быть разборчивым, если изображение не загружается.
    
 
 
    Программы чтения с экрана не могут анализировать фоновые изображения, поэтому они должны быть чисто декоративными; любой важный контент должен быть частью HTML-страницы, а не находиться в фоне.
    
 
 
    Границы
    
 
-
    Изучая Блочную модель, мы обнаружили, как границы влияют на размер нашего блока. В этом уроке мы рассмотрим, как творчески использовать границы. Обычно, когда мы добавляем границы к элементу с помощью CSS, мы используем сокращённое свойство, которое устанавливает цвет, ширину и стиль границы в одной строке CSS.
    
+
    Изучая Блочную модель, мы обнаружили, как границы влияют на размер нашего блока. В этом уроке мы рассмотрим, как творчески использовать границы. Обычно, когда мы добавляем границы к элементу с помощью CSS, мы используем сокращённое свойство, которое устанавливает цвет, ширину и стиль границы в одной строке CSS.
    
 
-
    Мы можем установить границу для всех четырёх сторон блока с помощью {{cssxref ("border")}}:
    
+
    Мы можем установить границу для всех четырёх сторон блока с помощью {{cssxref ("border")}}:
    
 
 
    .box {
   border: 1px solid black;
 } 
    
 
-
    Или мы можем нацеливаться на один край блока, например:
    
+
    Или мы можем нацеливаться на один край блока, например:
    
 
 
    .box {
   border-top: 1px solid black;
@@ -247,7 +247,7 @@ 
    Границы
    
   border-color: black;
 } 
    
 
-
    И более детально:
    
+
    И более детально:
    
 
 
    .box {
   border-top-width: 1px;
@@ -256,10 +256,10 @@ 
    Границы
    
 } 
    
 
 
    
-
    Примечание: Свойства границ top, right, bottom, и left также имеют сопоставленные логические свойства, которые относятся к режиму написания документа (например, текст слева направо, справа налево или сверху вниз). Мы рассмотрим их в следующем уроке, который касается работы с разными направлениями текста.
    
+
    Примечание: Свойства границ top, right, bottom, и left также имеют сопоставленные логические свойства, которые относятся к режиму написания документа (например, текст слева направо, справа налево или сверху вниз). Мы рассмотрим их в следующем уроке, который касается работы с разными направлениями текста.
    
 
    
 
-
    Есть множество стилей, которые вы можете использовать для границ. В приведённом ниже примере мы использовали разные стили границ для четырёх сторон моего блока. Поиграйте со стилем, шириной и цветом границы, чтобы увидеть, как они работают.
    
+
    Есть множество стилей, которые вы можете использовать для границ. В приведённом ниже примере мы использовали разные стили границ для четырёх сторон моего блока. Поиграйте со стилем, шириной и цветом границы, чтобы увидеть, как они работают.
    
 
 
    {{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/borders.html", '100%', 640)}}
    
 
@@ -296,7 +296,7 @@ 
    Упражне
 
    {{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/task.html", '100%', 555)}} 
    
 
 
    
-
    Примечание: вы можете посмотреть решение здесь — но сначала попробуйте сделать это сами!
    
+
    Примечание: вы можете посмотреть решение здесь — но сначала попробуйте сделать это сами!
    
 
    
 
 
    Итоги
    
diff --git a/files/ru/learn/css/building_blocks/cascade_and_inheritance/index.html b/files/ru/learn/css/building_blocks/cascade_and_inheritance/index.html
index 6ff0434568feb1..da4ed6a56ff7cb 100644
--- a/files/ru/learn/css/building_blocks/cascade_and_inheritance/index.html
+++ b/files/ru/learn/css/building_blocks/cascade_and_inheritance/index.html
@@ -35,7 +35,7 @@ 
    Конфликтующие п
 
 
    CSS (Cascading Style Sheets) означает Каскадные Таблицы Стилей и первое слово "каскадные" является невероятно важным для понимания: то, как ведёт себя каскад — ключевой момент в понимании CSS.
    
 
-
    В какой-то момент, работая над проектом, вы обнаружите, что CSS, который, по-вашему, должен быть применён к элементу, не работает. Обычно проблема заключается в том, что вы создали два правила, которые могут потенциально применяться к одному и тому же элементу. Каскад и тесно связанная концепция специфичности —  это механизмы, которые контролируют, какое именно правило применяется, когда имеется такой конфликт. Стиль вашего элемента может определять не то правило, на которое вы рассчитывали, поэтому вам необходимо понимать, как работают эти механизмы.
    
+
    В какой-то момент, работая над проектом, вы обнаружите, что CSS, который, по-вашему, должен быть применён к элементу, не работает. Обычно проблема заключается в том, что вы создали два правила, которые могут потенциально применяться к одному и тому же элементу. Каскад и тесно связанная концепция специфичности —  это механизмы, которые контролируют, какое именно правило применяется, когда имеется такой конфликт. Стиль вашего элемента может определять не то правило, на которое вы рассчитывали, поэтому вам необходимо понимать, как работают эти механизмы.
    
 
 
    Также значимой является концепция наследования, которая заключается в том, что некоторые свойства CSS наследуют по умолчанию значения, установленные для родительского элемента текущего элемента, а некоторые не наследуют. Это также может стать причиной поведения, которое вы, возможно, не ожидаете.
    
 
@@ -45,7 +45,7 @@ 
    Каскад
    
 
 
    Каскад таблицы стилей, если говорить упрощённо, означает, что порядок следования правил в CSS имеет значение; когда применимы два правила, имеющие одинаковую специфичность, используется то, которое идёт в CSS последним.
    
 
-
    В приведённом ниже примере у нас есть два правила, которые могут применяться к h1. В результате h1 окрасится синим цветом — эти правила имеют идентичный селектор и, следовательно, одинаковую специфичность, поэтому побеждает последний в порядке следования.
    
+
    В приведённом ниже примере у нас есть два правила, которые могут применяться к h1. В результате h1 окрасится синим цветом — эти правила имеют идентичный селектор и, следовательно, одинаковую специфичность, поэтому побеждает последний в порядке следования.
    
 
 
    {{EmbedGHLiveSample("css-examples/learn/cascade/cascade-simple.html", '100%', 400)}} 
    
 
@@ -163,32 +163,32 @@ 
    Порядок следования
 
 
    Специфичность
    
 
-
    Понимая, что порядок следования правил имеет значение, в какой-то момент вы окажетесь в ситуации, когда вы знаете, что правило появляется позже в таблице стилей, но применяется более раннее, конфликтующее правило. Это связано с тем, что более раннее правило имеет более высокую специфичность — оно более специфично и поэтому выбирается браузером как правило, которое должно стилизовать элемент.
    
+
    Понимая, что порядок следования правил имеет значение, в какой-то момент вы окажетесь в ситуации, когда вы знаете, что правило появляется позже в таблице стилей, но применяется более раннее, конфликтующее правило. Это связано с тем, что более раннее правило имеет более высокую специфичность — оно более специфично и поэтому выбирается браузером как правило, которое должно стилизовать элемент.
    
 
-
    Как мы видели ранее в этом уроке, селектор класса имеет больший вес, чем селектор элемента, поэтому свойства, определённые в классе, будут переопределять свойства, применённые непосредственно к элементу.
    
+
    Как мы видели ранее в этом уроке, селектор класса имеет больший вес, чем селектор элемента, поэтому свойства, определённые в классе, будут переопределять свойства, применённые непосредственно к элементу.
    
 
-
    Здесь следует отметить, что, хотя мы думаем о селекторах и правилах, применяемых к объекту, который они выбирают, переписывается не всё правило, а только свойства, которые являются одинаковыми.
    
+
    Здесь следует отметить, что, хотя мы думаем о селекторах и правилах, применяемых к объекту, который они выбирают, переписывается не всё правило, а только свойства, которые являются одинаковыми.
    
 
-
    Такое поведение помогает избежать повторения в вашем CSS. Обычной практикой является определение общих стилей для базовых элементов, а затем создание классов для тех, которые отличаются. Например, в таблице стилей ниже мы определяем общие стили для заголовков второго уровня, а затем создаём несколько классов, которые изменяют только некоторые свойства и значения. Определённые вначале значения применяются ко всем заголовкам, затем к заголовкам с классами применяются более конкретные значения.
    
+
    Такое поведение помогает избежать повторения в вашем CSS. Обычной практикой является определение общих стилей для базовых элементов, а затем создание классов для тех, которые отличаются. Например, в таблице стилей ниже мы определяем общие стили для заголовков второго уровня, а затем создаём несколько классов, которые изменяют только некоторые свойства и значения. Определённые вначале значения применяются ко всем заголовкам, затем к заголовкам с классами применяются более конкретные значения.
    
 
 
    {{EmbedGHLiveSample("css-examples/learn/cascade/mixing-rules.html", '100%', 700)}} 
    
 
-
    Давайте теперь посмотрим, как браузер будет вычислять специфичность. Мы уже знаем, что селектор элемента имеет низкую специфичность и может быть перезаписан классом. По существу, значение в баллах присуждается различным типам селекторов, и их сложение даёт вам вес этого конкретного селектора, который затем может быть оценён в сравнении с другими потенциальными соперниками.
    
+
    Давайте теперь посмотрим, как браузер будет вычислять специфичность. Мы уже знаем, что селектор элемента имеет низкую специфичность и может быть перезаписан классом. По существу, значение в баллах присуждается различным типам селекторов, и их сложение даёт вам вес этого конкретного селектора, который затем может быть оценён в сравнении с другими потенциальными соперниками.
    
 
-
    Степень специфичности, которой обладает селектор, измеряется с использованием четырёх различных значений (или компонентов), которые можно представить как тысячи, сотни, десятки и единицы — четыре однозначные цифры в четырёх столбцах:
    
+
    Степень специфичности, которой обладает селектор, измеряется с использованием четырёх различных значений (или компонентов), которые можно представить как тысячи, сотни, десятки и единицы — четыре однозначные цифры в четырёх столбцах:
    
 
 
      
  
    1. Тысячи: поставьте единицу в эту колонку, если объявление стиля находится внутри атрибута {{htmlattrxref("style")}} (встроенные стили). Такие объявления не имеют селекторов, поэтому их специфичность всегда просто 1000.
      2. 
  
    2. Сотни: поставьте единицу в эту колонку за каждый селектор ID, содержащийся в общем селекторе.
      3. 
- 
    3. Десятки: поставьте единицу в эту колонку за каждый селектор класса, селектор атрибута или псевдокласс, содержащийся в общем селекторе.
      4. 
- 
    4. Единицы: поставьте общее число единиц в эту колонку за каждый селектор элемента или псевдоэлемент, содержащийся в общем селекторе.
      5. 
+ 
    5. Десятки: поставьте единицу в эту колонку за каждый селектор класса, селектор атрибута или псевдокласс, содержащийся в общем селекторе.
      6. 
+ 
    6. Единицы: поставьте общее число единиц в эту колонку за каждый селектор элемента или псевдоэлемент, содержащийся в общем селекторе.
      7. 
 
    
 
 
    
-
    Примечание: Универсальный селектор (*), комбинаторы (+, >,  ~, '') и псевдокласс отрицания (:not) не влияют на специфичность.
    
+
    Примечание: Универсальный селектор (*), комбинаторы (+, >,  ~, '') и псевдокласс отрицания (:not) не влияют на специфичность.
    
 
    
 
-
    Следующая таблица показывает несколько несвязанных примеров, которые помогут вам разобраться. Посмотрите их все и убедитесь, что вы понимаете, почему они обладают той специфичностью, которую мы им дали. Мы ещё не рассмотрели селекторы детально, но вы можете найти подробную информацию о каждом селекторе в справочнике селекторов MDN.
    
+
    Следующая таблица показывает несколько несвязанных примеров, которые помогут вам разобраться. Посмотрите их все и убедитесь, что вы понимаете, почему они обладают той специфичностью, которую мы им дали. Мы ещё не рассмотрели селекторы детально, но вы можете найти подробную информацию о каждом селекторе в справочнике селекторов MDN.
    
 
 
    
  
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
    
@@ -245,16 +245,16 @@ 
    Специфичность
    
  
 
    
  
    
 
-
    Прежде чем мы продолжим, давайте посмотрим на пример в действии.
    
+
    Прежде чем мы продолжим, давайте посмотрим на пример в действии.
    
 
 
    {{EmbedGHLiveSample("css-examples/learn/cascade/specificity-boxes.html", '100%', 700)}} 
    
 
-
    Так что здесь происходит? Прежде всего, нас интересуют только первые семь правил этого примера, и, как вы заметите, мы включили их значения специфичности в комментарий перед каждым правилом.
    
+
    Так что здесь происходит? Прежде всего, нас интересуют только первые семь правил этого примера, и, как вы заметите, мы включили их значения специфичности в комментарий перед каждым правилом.
    
 
 
      
- 
    • Первые два правила конкурируют за стилизацию цвета фона ссылки  —  второе выигрывает и делает фоновый цвет синим, потому что у него есть дополнительный селектор ID в цепочке: его специфичность 201 против 101.
      • 
- 
    • Третье и четвёртое правило конкурируют за стилизацию цвета текста ссылки — второе выигрывает и делает текст белым, потому что, хотя у него на один селектор элемента меньше, отсутствующий селектор заменяется на селектор класса, который оценивается в десять вместо единицы. Таким образом, приоритетная специфичность составляет 113 против 104.
      • 
- 
    • Правила 5–7 соревнуются за определение стиля границы ссылки при наведении курсора. Шестой селектор со специфичностью 23 явно проигрывает пятому со специфичностью 24 — у него в цепочке на один селектор элемента меньше. Седьмой селектор, однако, превосходит как пятый, так и шестой — он имеет то же количество подселекторов в цепочке, что и пятый, но один элемент заменён селектором класса. Таким образом, приоритетная специфичность 33 против 23 и 24.
      • 
+ 
    • Первые два правила конкурируют за стилизацию цвета фона ссылки  —  второе выигрывает и делает фоновый цвет синим, потому что у него есть дополнительный селектор ID в цепочке: его специфичность 201 против 101.
      • 
+ 
    • Третье и четвёртое правило конкурируют за стилизацию цвета текста ссылки — второе выигрывает и делает текст белым, потому что, хотя у него на один селектор элемента меньше, отсутствующий селектор заменяется на селектор класса, который оценивается в десять вместо единицы. Таким образом, приоритетная специфичность составляет 113 против 104.
      • 
+ 
    • Правила 5–7 соревнуются за определение стиля границы ссылки при наведении курсора. Шестой селектор со специфичностью 23 явно проигрывает пятому со специфичностью 24 — у него в цепочке на один селектор элемента меньше. Седьмой селектор, однако, превосходит как пятый, так и шестой — он имеет то же количество подселекторов в цепочке, что и пятый, но один элемент заменён селектором класса. Таким образом, приоритетная специфичность 33 против 23 и 24.
      • 
 
    
 
 
    
@@ -265,58 +265,58 @@ 
    Специфичность
    
 
 
    !important
    
 
-
    Существует специальный элемент CSS, который вы можете использовать для отмены всех вышеперечисленных вычислений, однако вы должны быть очень осторожны с его использованием — !important. Он используется, чтобы сделать конкретное свойство и значение самыми специфичными, таким образом переопределяя нормальные правила каскада.
    
+
    Существует специальный элемент CSS, который вы можете использовать для отмены всех вышеперечисленных вычислений, однако вы должны быть очень осторожны с его использованием — !important. Он используется, чтобы сделать конкретное свойство и значение самыми специфичными, таким образом переопределяя нормальные правила каскада.
    
 
-
    Взгляните на этот пример, где у нас есть два абзаца, один из которых имеет ID.
    
+
    Взгляните на этот пример, где у нас есть два абзаца, один из которых имеет ID.
    
 
 
    {{EmbedGHLiveSample("css-examples/learn/cascade/important.html", '100%', 700)}} 
    
 
-
    Давайте пройдёмся по этому примеру, чтобы увидеть, что происходит — попробуйте удалить некоторые свойства, чтобы увидеть, что получится, если вам трудно понять:
    
+
    Давайте пройдёмся по этому примеру, чтобы увидеть, что происходит — попробуйте удалить некоторые свойства, чтобы увидеть, что получится, если вам трудно понять:
    
 
 
      
- 
    1. Вы увидите, что применены значения {{cssxref("color")}} и {{cssxref("padding")}} третьего правила, но {{cssxref("background-color")}} — нет. Почему? Действительно, все три безусловно должны применяться, потому что правила, более поздние в порядке следования, обычно переопределяют более ранние правила.
      2. 
- 
    2. Однако вышеприведённые правила выигрывают, потому что селекторы классов имеют более высокую специфичность, чем селекторы элементов.
      3. 
- 
    3. Оба элемента имеют {{htmlattrxref("class")}} с названием better, но у второго также есть {{htmlattrxref("id")}} с названием winning. Поскольку ID имеют ещё более высокую специфичность, чем классы (у вас может быть только один элемент с каждым уникальным ID на странице, но много элементов с одним и тем же классом — селекторы ID очень специфичны, на что они и нацелены), красный цвет фона и однопиксельная чёрная граница должны быть применены ко 2-му элементу, причём первый элемент получает серый фоновый цвет и отсутствие границы, как определено классом.
      4. 
- 
    4. 2-й элемент получил красный цвет фона и отсутствие границы. Почему?  Из-за объявления !important во втором правиле — размещение которого после border: none означает, что это объявление перевесит значение границы в предыдущем правиле, даже если ID имеет более высокую специфичность.
      5. 
+ 
    5. Вы увидите, что применены значения {{cssxref("color")}} и {{cssxref("padding")}} третьего правила, но {{cssxref("background-color")}} — нет. Почему? Действительно, все три безусловно должны применяться, потому что правила, более поздние в порядке следования, обычно переопределяют более ранние правила.
      6. 
+ 
    6. Однако вышеприведённые правила выигрывают, потому что селекторы классов имеют более высокую специфичность, чем селекторы элементов.
      7. 
+ 
    7. Оба элемента имеют {{htmlattrxref("class")}} с названием better, но у второго также есть {{htmlattrxref("id")}} с названием winning. Поскольку ID имеют ещё более высокую специфичность, чем классы (у вас может быть только один элемент с каждым уникальным ID на странице, но много элементов с одним и тем же классом — селекторы ID очень специфичны, на что они и нацелены), красный цвет фона и однопиксельная чёрная граница должны быть применены ко 2-му элементу, причём первый элемент получает серый фоновый цвет и отсутствие границы, как определено классом.
      8. 
+ 
    8. 2-й элемент получил красный цвет фона и отсутствие границы. Почему?  Из-за объявления !important во втором правиле — размещение которого после border: none означает, что это объявление перевесит значение границы в предыдущем правиле, даже если ID имеет более высокую специфичность.
      9. 
 
    
 
 
    
-
    Примечание: Единственный способ переопределить объявление !important –  это включить другое объявление !important в правило с такой же специфичностью позже или в правило с более высокой специфичностью.
    
+
    Примечание: Единственный способ переопределить объявление !important –  это включить другое объявление !important в правило с такой же специфичностью позже или в правило с более высокой специфичностью.
    
 
    
 
-
    Полезно знать о существовании !important, чтобы вы понимали, что это такое, когда встретите в чужом коде. Тем не менее, мы настоятельно рекомендуем вам никогда не использовать его, если в этом нет острой необходимости. !important меняет обычный порядок работы каскада, поэтому он может серьёзно затруднить отладку проблем CSS, особенно в большой таблице стилей.
    
+
    Полезно знать о существовании !important, чтобы вы понимали, что это такое, когда встретите в чужом коде. Тем не менее, мы настоятельно рекомендуем вам никогда не использовать его, если в этом нет острой необходимости. !important меняет обычный порядок работы каскада, поэтому он может серьёзно затруднить отладку проблем CSS, особенно в большой таблице стилей.
    
 
-
    Одна из ситуаций, в которой вам, возможно, придётся это использовать,  —  это когда вы работаете с CMS, где вы не можете редактировать модули CSS ядра, и вы действительно хотите переопределить стиль, который нельзя переопределить другим способом. Но, вообще говоря, не стоит использовать этот элемент, если можно этого избежать.
    
+
    Одна из ситуаций, в которой вам, возможно, придётся это использовать,  —  это когда вы работаете с CMS, где вы не можете редактировать модули CSS ядра, и вы действительно хотите переопределить стиль, который нельзя переопределить другим способом. Но, вообще говоря, не стоит использовать этот элемент, если можно этого избежать.
    
 
 
    Влияние расположения CSS
    
 
-
    Наконец, также полезно отметить, что важность объявления CSS зависит от того, в какой таблице стилей оно указано — у пользователя есть возможность установить индивидуальные таблицы стилей для переопределения стилей разработчика, например, пользователь может иметь проблемы со зрением и захочет установить размер шрифта на всех посещаемых им веб-страницах в два раза больше нормального размера, чтобы облегчить чтение.
    
+
    Наконец, также полезно отметить, что важность объявления CSS зависит от того, в какой таблице стилей оно указано — у пользователя есть возможность установить индивидуальные таблицы стилей для переопределения стилей разработчика, например, пользователь может иметь проблемы со зрением и захочет установить размер шрифта на всех посещаемых им веб-страницах в два раза больше нормального размера, чтобы облегчить чтение.
    
 
 
    Подведение итогов
    
 
-
    Конфликтующие объявления будут применяться в следующем порядке, с учётом замены более ранних более поздними:
    
+
    Конфликтующие объявления будут применяться в следующем порядке, с учётом замены более ранних более поздними:
    
 
 
      
- 
    1. Объявления в таблицах стилей клиентского приложения (например, стили браузера по умолчанию, используемые, когда не заданы другие стили).
      2. 
- 
    2. Обычные объявления в пользовательских таблицах стилей (индивидуальные стили устанавливаются пользователем).
      3. 
- 
    3. Обычные объявления в авторских таблицах стилей (это стили, установленные нами, веб-разработчиками).
      4. 
- 
    4. Важные объявления в авторских таблицах стилей.
      5. 
- 
    5. Важные объявления в пользовательских таблицах стилей.
      6. 
+ 
    6. Объявления в таблицах стилей клиентского приложения (например, стили браузера по умолчанию, используемые, когда не заданы другие стили).
      7. 
+ 
    7. Обычные объявления в пользовательских таблицах стилей (индивидуальные стили устанавливаются пользователем).
      8. 
+ 
    8. Обычные объявления в авторских таблицах стилей (это стили, установленные нами, веб-разработчиками).
      9. 
+ 
    9. Важные объявления в авторских таблицах стилей.
      10. 
+ 
    10. Важные объявления в пользовательских таблицах стилей.
      11. 
 
    
 
-
    Для таблиц стилей веб-разработчиков имеет смысл переопределить пользовательские таблицы стилей так, чтобы можно было сохранить запланированный дизайн, но иногда у пользователей есть веские причины для переопределения стилей веб-разработчика, как упомянуто выше — это может быть достигнуто с помощью использования !important в их правилах.
    
+
    Для таблиц стилей веб-разработчиков имеет смысл переопределить пользовательские таблицы стилей так, чтобы можно было сохранить запланированный дизайн, но иногда у пользователей есть веские причины для переопределения стилей веб-разработчика, как упомянуто выше — это может быть достигнуто с помощью использования !important в их правилах.
    
 
-
    Проверьте ваши навыки
    
+
    Проверьте ваши навыки
    
 
 
    Мы охватили много тем в этой статье. А вы смогли запомнить наиболее важную информацию? Можете пройти несколько дополнительных тестов для того чтобы убедиться в том, что вы усвоили эту информацию, прежде чем пойдёте дальше — смотрите Test your skills: the Cascade.
    
 
 
    Что дальше?
    
 
-
    Если вы поняли большую часть этой статьи, отлично — вы начали знакомиться с фундаментальными механизмами CSS. Далее мы рассмотрим селекторы подробно.
    
+
    Если вы поняли большую часть этой статьи, отлично — вы начали знакомиться с фундаментальными механизмами CSS. Далее мы рассмотрим селекторы подробно.
    
 
-
    Если вы не до конца поняли каскад, специфичность и наследование, не волнуйтесь! Это, безусловно, самая сложная вещь из тех, что мы до сих пор  изучали в курсе, и даже профессиональные веб-разработчики иногда считают её коварной. Мы советуем вам вернуться к этой статье несколько раз в ходе изучения курса и продолжать обдумывать эту тему.
    
+
    Если вы не до конца поняли каскад, специфичность и наследование, не волнуйтесь! Это, безусловно, самая сложная вещь из тех, что мы до сих пор  изучали в курсе, и даже профессиональные веб-разработчики иногда считают её коварной. Мы советуем вам вернуться к этой статье несколько раз в ходе изучения курса и продолжать обдумывать эту тему.
    
 
-
    Обратитесь сюда, если вы столкнётесь со странными проблемами, когда стили применяются не так, как вы ожидаете. Это может быть проблемой специфичности.
    
+
    Обратитесь сюда, если вы столкнётесь со странными проблемами, когда стили применяются не так, как вы ожидаете. Это может быть проблемой специфичности.
    
 
 
    {{NextMenu("Learn/CSS/Building_blocks/Selectors", "Learn/CSS/Building_blocks")}}
    
 
diff --git a/files/ru/learn/css/building_blocks/cascade_tasks/index.html b/files/ru/learn/css/building_blocks/cascade_tasks/index.html
index 8fad2111787cd9..97435a634f821b 100644
--- a/files/ru/learn/css/building_blocks/cascade_tasks/index.html
+++ b/files/ru/learn/css/building_blocks/cascade_tasks/index.html
@@ -45,7 +45,7 @@ 
    Оценка ил
   
      
    
    • Описательный заголовок, например, "Необходима оценка для теста 1 Каскад" ("Assessment wanted for Cascade skill test 1").
      • 
    
    • Подробности того, что вы уже попытались сделать, и чего бы вы хотели от нас, т.е. или вы в тупике и нуждаетесь в помощи, или хотите оценки.
      • 
-   
    • Ссылка на пример, который вы просите оценить или который вызвал затруднения, в онлайн-редакторе с возможностью совместного редактирования (как указано в шаге 1 выше). Это принятая практика погружения в вопрос — очень трудно помочь кому-либо решить проблему кодирования, если вы не видите его код.
      • 
+   
    • Ссылка на пример, который вы просите оценить или который вызвал затруднения, в онлайн-редакторе с возможностью совместного редактирования (как указано в шаге 1 выше). Это принятая практика погружения в вопрос — очень трудно помочь кому-либо решить проблему кодирования, если вы не видите его код.
      • 
    
    • Ссылка на страницу с заданием, чтобы мы могли найти вопрос, на который вы затрудняетесь ответить.
      • 
   
    
  
diff --git a/files/ru/learn/css/building_blocks/debugging_css/index.html b/files/ru/learn/css/building_blocks/debugging_css/index.html
index 27cec98d2e59ef..75889d703d19ec 100644
--- a/files/ru/learn/css/building_blocks/debugging_css/index.html
+++ b/files/ru/learn/css/building_blocks/debugging_css/index.html
@@ -5,7 +5,7 @@
 ---
 
    {{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Styling_tables", "Learn/CSS/Building_blocks/Organizing", "Learn/CSS/Building_blocks")}}
    
 
-
    Порой, при написании CSS, вы будете сталкиваться с проблемой, при которой будет казаться, что CSS не делает того, чего вы ожидаете от него. Возможно, вы считаете, что определённый селектор должен соответствовать элементу, но ничего не происходит, или поле имеет размер, отличный от ожидаемого. Эта статья поможет вам с тем, как отладить CSS проблемы и покажет вам как DevTools (инструменты разработчика), включённые во все современные браузеры, могут помочь разобраться с тем, что происходит.
    
+
    Порой, при написании CSS, вы будете сталкиваться с проблемой, при которой будет казаться, что CSS не делает того, чего вы ожидаете от него. Возможно, вы считаете, что определённый селектор должен соответствовать элементу, но ничего не происходит, или поле имеет размер, отличный от ожидаемого. Эта статья поможет вам с тем, как отладить CSS проблемы и покажет вам как DevTools (инструменты разработчика), включённые во все современные браузеры, могут помочь разобраться с тем, что происходит.
    
 
 
@@ -26,17 +26,17 @@ 
    Ка
 
 
    Статья What are browser developer tools это обновлённое руководство объясняющее как получить доступ к инструментам разных браузеров и платформ. Хотя вы можете выбрать в основном разрабатывать в конкретном браузере и поэтому инструменты, включённые в этот браузер, будут вам знакомы больше всего, стоит знать, как получать доступ к инструментам и в других браузерах. Это поможет вам если вы наблюдаете разное отображение среди разных браузеров.
    
 
-
    Вы также обнаружите, что браузеры фокусировались на различных областях при создании своих DevTools. Например в Firefox существует несколько замечательных инструментов для визуальной работы с CSS Layout (разметкой), позволяющих вам проводить инспекцию и править Grid Layouts, Flexbox, и Shapes. Тем не менее, все другие браузеры имеют схожие фундаментальные инструменты, например для инспекции свойств и значений применённых к элементам на вашей странице и для выполнения изменений к ним в редакторе.
    
+
    Вы также обнаружите, что браузеры фокусировались на различных областях при создании своих DevTools. Например в Firefox существует несколько замечательных инструментов для визуальной работы с CSS Layout (разметкой), позволяющих вам проводить инспекцию и править Grid Layouts, Flexbox, и Shapes. Тем не менее, все другие браузеры имеют схожие фундаментальные инструменты, например для инспекции свойств и значений применённых к элементам на вашей странице и для выполнения изменений к ним в редакторе.
    
 
 
    В этом уроке мы рассмотрим некоторые полезные функции Firefox DevTools для работы с CSS. Для того чтобы сделать это я буду использовать файл примера. Загрузите его в новой вкладке если хотите следовать и откройте ваш DevTools как описано в статье, ссылка на которую дана выше.
    
 
 
    DOM vs View Source
    
 
-
    То, что может сбить с толку новичков в DevTools, —  это разница между тем, что вы видите когда просматриваете источник веб-страницы или смотрите на HTML файл который поместили на сервер и то что вы видите на HTML панели DevTools. Хотя это выглядит примерно так же, как то, что вы видите через View Source, существуют некоторые отличия.
    
+
    То, что может сбить с толку новичков в DevTools, —  это разница между тем, что вы видите когда просматриваете источник веб-страницы или смотрите на HTML файл который поместили на сервер и то что вы видите на HTML панели DevTools. Хотя это выглядит примерно так же, как то, что вы видите через View Source, существуют некоторые отличия.
    В визуализированном DOM браузер мог скорректировать некоторый плохо-написанный HTML за вас. Если вы неправильно закрыли элемент, например открывали <h2>, но закрыли </h3>, браузер поймёт, что вы хотели сделать и HTML в DOM будет правильно закрывать <h2> с </h2>. Браузер также нормализует весь HTML,а DOM также покажет любые изменения сделанные через JavaScript.
    
 
-
    View Source же для сравнения — это просто исходный код HTML, хранящийся на сервере. HTML дерево в вашем DevTools показывает, что именно браузер отображает в любой момент времени, что даёт вам представление от том, что действительно происходит.
    
+
    View Source же для сравнения — это просто исходный код HTML, хранящийся на сервере. HTML дерево в вашем DevTools показывает, что именно браузер отображает в любой момент времени, что даёт вам представление от том, что действительно происходит.
    Инспекция применённого CSS
    
 
@@ -46,11 +46,11 @@ 
    Инспекция пр
 
 
    Если вы посмотрите на Rules view справа от вашего HTML, вы должны увидеть свойства и значения CSS применённые к элементу. Вы увидите правила, напрямую применённые к классу box1 и также CSS который наследуется блоком от предков, в этом случае от <body>. Это полезно в случае, если вы видите, что применяется какой-либо CSS, который вы не ожидали. Вполне возможно, что он наследуется от родительского элемента и вам необходимо добавить правило, чтобы переписать его в контексте этого элемента.
    
 
-
    Также полезна возможность расширения (развёртывания) свойств коротких записей. В нашем примере используется короткая запись margin.
    
+
    Также полезна возможность расширения (развёртывания) свойств коротких записей. В нашем примере используется короткая запись margin.
    
 
 
    Кликните по маленькой стрелке для того, чтобы развернуть вид, показывающий полную запись различных свойств и значений.
    
 
-
    Вы можете переключать значения в Rules view в положение включено или выключено если эта панель активна — если навести на неё курсор мыши, появятся флажки. Снимите флажок правила, например, border-radius, и CSS перестанет применяться.
    
+
    Вы можете переключать значения в Rules view в положение включено или выключено если эта панель активна — если навести на неё курсор мыши, появятся флажки. Снимите флажок правила, например, border-radius, и CSS перестанет применяться.
    
 
 
    Вы можете использовать это чтобы делать сравнения по типу A/B, принимая решение если что-то выглядит лучше с применённым правилом или нет, а также это помогает в отладке — например если layout не в порядке и вы пытаетесь разобраться какое свойство является причиной проблемы.
    
 
@@ -58,7 +58,7 @@ 
    Редактирован
 
 
    В дополнение к включению и выключению свойств, вы можете редактировать их значения. Возможно, вам захочется посмотреть будет ли другой цвет выглядеть лучше или захотите настроить размер чего-либо. DevTools поможет вам сэкономить кучу времени редактируя таблицу стиля и перезагружая страницу.
    
 
-
    Выбрав box1, кликните на образчик (маленький цветной круг) который показывает цвет, применённый к границе. Откроется панель выбора цвета и сможете попробовать некоторые другие цвета; это действие обновится на странице в режиме реального времени.  Аналогичным образом вы можете изменить ширину или стиль границ.
    
+
    Выбрав box1, кликните на образчик (маленький цветной круг) который показывает цвет, применённый к границе. Откроется панель выбора цвета и сможете попробовать некоторые другие цвета; это действие обновится на странице в режиме реального времени.  Аналогичным образом вы можете изменить ширину или стиль границ.
    
 
 
    DevTools Styles Panel with a color picker open.
    
 
@@ -76,7 +76,7 @@ 
    Добавление
 
 
    Понимание модели блоков
    
 
-
    В предыдущем уроке мы обсудили модель блоков и тот факт, что у нас есть альтернативная модель блоков, которая изменяет способ расчёта размера элементов основываясь на размере который вы им задаёте, плюс padding и границы. DevTools может действительно помочь вам понять, как вычисляется размер элемента.
    
+
    В предыдущем уроке мы обсудили модель блоков и тот факт, что у нас есть альтернативная модель блоков, которая изменяет способ расчёта размера элементов основываясь на размере который вы им задаёте, плюс padding и границы. DevTools может действительно помочь вам понять, как вычисляется размер элемента.
    Layout view показывает вам диаграмму блочной модели выбранного элемента, вместе с описанием свойств и значений, которые изменяют способ расположения элемента. Это включает описание свойств, которые вы могли и не использовать напрямую к элементу, но которые имеют набор начальных значений.
    
 
@@ -84,7 +84,7 @@ 
    Понимание мод
 
 
    Сравните два блока с классами box1 и box2. Они оба имеют одинаковую ширину (400px) применённую к ним, однако box1 визуально шире. В layout panel вы можете увидеть, что он использует content-box. Это значение, которое принимает размер, который вы даёте элементу и затем добавляет padding и ширину границ.
    
 
-
    Элемент с классом box2 использует border-box, поэтому здесь padding и граница вычтены из размера, который вы дали элементу. Это означает, что пространство, занимаемое на странице блоком, соответствует указанному вами размеру — в нашем случае width: 400px.
    
+
    Элемент с классом box2 использует border-box, поэтому здесь padding и граница вычтены из размера, который вы дали элементу. Это означает, что пространство, занимаемое на странице блоком, соответствует указанному вами размеру — в нашем случае width: 400px.
    
 
 
    The Layout section of the DevTools
    
 
@@ -117,7 +117,7 @@ 
    Решение
 
 
    Узнайте больше о Firefox DevTools
    
 
-
    На MDN имеется много информации о Firefox DevTools. Взгляните на основной раздел DevTools, а больше деталей о вещах которые коротко рассмотрели в этом уроке смотрите The How To Guides.
    
+
    На MDN имеется много информации о Firefox DevTools. Взгляните на основной раздел DevTools, а больше деталей о вещах которые коротко рассмотрели в этом уроке смотрите The How To Guides.
    Отладка проблем в CSS
    
 
@@ -142,7 +142,7 @@ 
    
 
-
    Вы также можете смотреть таблицы совместимости браузеров в конце всех страниц свойств MDN. Они показывают, что браузер поддерживает это свойство, часто "ломается", если есть поддержка только для какого-то использования свойства, и нет для других. Таблица ниже показывает данные совместимости свойства  {{cssxref("shape-outside")}}.
    
+
    Вы также можете смотреть таблицы совместимости браузеров в конце всех страниц свойств MDN. Они показывают, что браузер поддерживает это свойство, часто "ломается", если есть поддержка только для какого-то использования свойства, и нет для других. Таблица ниже показывает данные совместимости свойства  {{cssxref("shape-outside")}}.
    
 
 
    {{compat("css.shape-outside")}}
    
 
@@ -150,11 +150,11 @@ 
    Сделайте сокращённый контрольный пример проблемы
    
+
    Сделайте сокращённый контрольный пример проблемы
    
 
-
    Если проблема не решена шагами, описанными выше, тогда вам надо будет сделать своего рода расследование. Лучшее что можно сделать в этом случае это создать нечто известное как сокращенный контрольный пример. Возможность "уменьшить проблему" — действительно полезный навык. Он поможет вам найти проблемы как в вашем собственном коде, так в коде ваших коллег, а также позволит вам сообщать об ошибках и более эффективно обращаться за помощью.
    
+
    Если проблема не решена шагами, описанными выше, тогда вам надо будет сделать своего рода расследование. Лучшее что можно сделать в этом случае это создать нечто известное как сокращенный контрольный пример. Возможность "уменьшить проблему" — действительно полезный навык. Он поможет вам найти проблемы как в вашем собственном коде, так в коде ваших коллег, а также позволит вам сообщать об ошибках и более эффективно обращаться за помощью.
    
 
-
    Сокращённый контрольный пример — это пример кода, который демонстрирует проблему самым простым способом с удалением несвязанного окружающего контента и стиля.  Это часто будет означать удаление проблемного кода из вашего макета (layout), чтобы сделать небольшой пример, который показывает только этот код или функцию.
    
+
    Сокращённый контрольный пример — это пример кода, который демонстрирует проблему самым простым способом с удалением несвязанного окружающего контента и стиля.  Это часто будет означать удаление проблемного кода из вашего макета (layout), чтобы сделать небольшой пример, который показывает только этот код или функцию.
    Создание сокращённого контрольного примера:
    
 
@@ -165,7 +165,7 @@ 
    Это может дать вам достаточно информации для поиска возможных проблем и обходных путей.
    
+
    В процессе вы можете обнаружить что причиняет проблему или, хотя бы, сможете включать или выключать её путём удаления чего-то конкретного. Стоит добавлять какие-то комментарии к вашему коду по ходу изучения вещей. Если вам надо попросить помощи, то они покажут человеку, помогающему вам что вы уже пытались сделать. Это может дать вам достаточно информации для поиска возможных проблем и обходных путей.
    
 
 
    If you are still struggling to fix the problem then having a reduced test case gives you something to ask for help with, by posting to a forum, or showing to a co-worker. You are much more likely to get help if you can show that you have done the work of reducing the problem and identifying exactly where it happens, before asking for help. A more experienced developer might be able to quickly spot the problem and point you in the right direction, and even if not, your reduced test case will enable them to have a quick look and hopefully be able to offer at least some help.
    
 
diff --git a/files/ru/learn/css/building_blocks/images_media_form_elements/index.html b/files/ru/learn/css/building_blocks/images_media_form_elements/index.html
index 269e5dff8e9534..5d7cb2eaa152a5 100644
--- a/files/ru/learn/css/building_blocks/images_media_form_elements/index.html
+++ b/files/ru/learn/css/building_blocks/images_media_form_elements/index.html
@@ -41,7 +41,7 @@ 
    Размер 
 
 
    Так что же мы можем сделать с проблемой перекрывания?
    
 
-
    Как мы учили в нашем предыдущем уроке, распространённая техника — это сделать {{cssxref("max-width")}} изображения - 100%. Это позволит уменьшить размер изображения по отношению к блоку, но не увеличит его. Такой метод будет работать и с другими замещаемыми элементами такими как <video> или <iframe>.
    
+
    Как мы учили в нашем предыдущем уроке, распространённая техника — это сделать {{cssxref("max-width")}} изображения - 100%. Это позволит уменьшить размер изображения по отношению к блоку, но не увеличит его. Такой метод будет работать и с другими замещаемыми элементами такими как <video> или <iframe>.
    
 
 
    Попробуйте добавить max-width: 100% к элементу <img> в примере выше. Вы увидите, что меньшее изображение останется неизмененным, а большее изображение станет меньше, чтобы заполнить блок.
    
 
@@ -59,7 +59,7 @@ 
    Размер 
 
 
    Замещаемые элементы в вёрстке
    
 
-
    При использовании различных методов вёрстки CSS на замещаемых элементах, вы можете обнаружить, что они ведут себя немного иначе, чем другие элементы. Например, во flex или grid layout элементы растягиваются по умолчанию чтобы заполнить всю площадь. Изображения растягиваться не будут, вместо этого они будут выравнены на начало площади flex- или grig-контейнера.
    
+
    При использовании различных методов вёрстки CSS на замещаемых элементах, вы можете обнаружить, что они ведут себя немного иначе, чем другие элементы. Например, во flex или grid layout элементы растягиваются по умолчанию чтобы заполнить всю площадь. Изображения растягиваться не будут, вместо этого они будут выравнены на начало площади flex- или grig-контейнера.
    Вы можете увидеть, как это происходит в примере ниже, где мы имеем grid-контейнер из двух столбцов и двух строк, который содержит 4 объекта. Все <div> элементы имеют цвет фона и растягиваются чтобы заполнить строки и столбцы. Однако, изображение не растягивается.
    
 
@@ -78,11 +78,11 @@ 
    Замещае
 
 
    Элементы форм
    
 
-
    Элементы форм могут быть сложной проблемой когда дело касается их стилизации в CSS, и Web Forms module содержит детальные руководства по хитрым аспектам стилизации элементов форм, которые я не буду представлять здесь в полном объёме. В этом разделе статьи стоит выделить несколько ключевых моментов.
    
+
    Элементы форм могут быть сложной проблемой когда дело касается их стилизации в CSS, и Web Forms module содержит детальные руководства по хитрым аспектам стилизации элементов форм, которые я не буду представлять здесь в полном объёме. В этом разделе статьи стоит выделить несколько ключевых моментов.
    
 
-
    Многие элементы управления форм добавляются на вашу страницу с помощью элемента <input> — он определяет простые поля формы, такие как ввод текста, и более сложные поля, добавленные в HTML5, такие как средства выбора цвета и даты. Существуют некоторые дополнительные элементы, такие как <textarea> для ввода многострочного текста, а также элементы которые содержали части маркировки форм, такие как <fieldset> и <legend>.
    
+
    Многие элементы управления форм добавляются на вашу страницу с помощью элемента <input> — он определяет простые поля формы, такие как ввод текста, и более сложные поля, добавленные в HTML5, такие как средства выбора цвета и даты. Существуют некоторые дополнительные элементы, такие как <textarea> для ввода многострочного текста, а также элементы которые содержали части маркировки форм, такие как <fieldset> и <legend>.
    
 
-
    HTML5 также содержит атрибуты, которые позволяют веб-разработчикам указывать какие поля являются обязательными и даже тип контента, который необходимо вводить. Если пользователь вводит неожидаемые данные или оставляет обязательные поля пустыми, браузер может выдать сообщение об ошибке. Разные браузеры несовместимы в том, сколько стилей и настроек они допускают для таких элементов.
    
+
    HTML5 также содержит атрибуты, которые позволяют веб-разработчикам указывать какие поля являются обязательными и даже тип контента, который необходимо вводить. Если пользователь вводит неожидаемые данные или оставляет обязательные поля пустыми, браузер может выдать сообщение об ошибке. Разные браузеры несовместимы в том, сколько стилей и настроек они допускают для таких элементов.
    Стилизация элементов ввода текста
    
 
@@ -93,10 +93,10 @@ 
    Сти
 
    {{EmbedGHLiveSample("css-examples/learn/images/form.html", '100%', 1000)}}
    
 
 
    
-
    Важно:  При изменении стиля элементов формы следует соблюдать осторожность, чтобы убедиться, что для пользователя все ещё очевидно, что они являются элементами форм. Вы можете создать форму ввода без границ и фона, которая практически неотличима от окружающего контента и это может сделать очень сложно распознаваемой, чтобы заполнить её.
    
+
    Важно:  При изменении стиля элементов формы следует соблюдать осторожность, чтобы убедиться, что для пользователя все ещё очевидно, что они являются элементами форм. Вы можете создать форму ввода без границ и фона, которая практически неотличима от окружающего контента и это может сделать очень сложно распознаваемой, чтобы заполнить её.
    
 
    
 
-
    Как объяснено в уроке стилизация форм в части HTML этого курса, многие из более сложных типов ввода определяются операционной системой и не доступны для стилизации. Поэтому вы всегда должны предполагать, что формы будут выглядеть по-разному для разных пользователей и тестировать сложные формы во многих браузерах.
    
+
    Как объяснено в уроке стилизация форм в части HTML этого курса, многие из более сложных типов ввода определяются операционной системой и не доступны для стилизации. Поэтому вы всегда должны предполагать, что формы будут выглядеть по-разному для разных пользователей и тестировать сложные формы во многих браузерах.
    
 
 
    Наследование и элементы форм
    
 
@@ -112,7 +112,7 @@ 
    Наследов
 
 
    Элементы форм и box-sizing
    
 
-
    В разных браузерах элементы формы используют разные правила определения размеров блоков для разных виджетов. вы изучали свойство box-sizing в нашем уроке Блоки в CSS и можете использовать эти знания при стилизации форм для обеспечения единообразия при настройке ширины и высоты элементов форм.
    
+
    В разных браузерах элементы формы используют разные правила определения размеров блоков для разных виджетов. вы изучали свойство box-sizing в нашем уроке Блоки в CSS и можете использовать эти знания при стилизации форм для обеспечения единообразия при настройке ширины и высоты элементов форм.
    Для единообразия рекомендуется устанавливать margin и padding на 0 для всех элементов, а затем добавлять их (margin и padding) при стилизации отдельных элементов.
    
 
@@ -135,7 +135,7 @@ 
    Другие поле
 
 
    Собираем все вместе в "перезагрузку"
    
 
-
    В качестве последнего шага, мы можем обернуть различные свойства, обсуждаемые выше, в следующую «форму перезагрузки», чтобы обеспечить согласованную основу для работы. Это включает все элементы упомянутые в последних трёх разделах:
    
+
    В качестве последнего шага, мы можем обернуть различные свойства, обсуждаемые выше, в следующую «форму перезагрузки», чтобы обеспечить согласованную основу для работы. Это включает все элементы упомянутые в последних трёх разделах:
    button,
 input,
diff --git a/files/ru/learn/css/building_blocks/selectors/attribute_selectors/index.html b/files/ru/learn/css/building_blocks/selectors/attribute_selectors/index.html
index d18a3aa3bb5503..d4ad04dc5db078 100644
--- a/files/ru/learn/css/building_blocks/selectors/attribute_selectors/index.html
+++ b/files/ru/learn/css/building_blocks/selectors/attribute_selectors/index.html
@@ -12,7 +12,7 @@
 ---
 
    {{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements", "Learn/CSS/Building_blocks")}}
    
 
-
    Как вы знаете из курса о HTML, элементы могут иметь атрибуты, которые дают дополнительную информацию о размечаемом элементе. В CSS вы можете использовать селекторы атрибута для стилизации элементов с определёнными атрибутами. Этот урок покажет вам, как использовать эти очень полезные селекторы.
    
+
    Как вы знаете из курса о HTML, элементы могут иметь атрибуты, которые дают дополнительную информацию о размечаемом элементе. В CSS вы можете использовать селекторы атрибута для стилизации элементов с определёнными атрибутами. Этот урок покажет вам, как использовать эти очень полезные селекторы.
    
 
 
    
  
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
    
@@ -27,9 +27,9 @@
  
    
  
 
    
 
-
    Селекторы наличия и значения
    
+
    Селекторы наличия и значения
    
 
-
    Эти селекторы делают возможным выбор элемента, основанный только на наличии атрибута (например, href) или на всевозможных разного рода сочетаниях со значением атрибута.
    
+
    Эти селекторы делают возможным выбор элемента, основанный только на наличии атрибута (например, href) или на всевозможных разного рода сочетаниях со значением атрибута.
    
 
 
@@ -43,29 +43,29 @@ 
    Выбирает элементы с атрибутом attr (имя которого  —  это значение в квадратных скобках).
+   
    
-   
+   
-   
+   
    
  
    Выбирает элементы с атрибутом attr (имя которого  —  это значение в квадратных скобках).
   
    
   
    
    [attr=value]
    a[href="https://example.com"]Выбирает элементы с атрибутом attr, значение которого в точности равно value  — строке внутри кавычек.Выбирает элементы с атрибутом attr, значение которого в точности равно value  — строке внутри кавычек.
   
    
   
    
    [attr~=value]
    p[class~="special"]
    
-    
    Выбирает элементы с атрибутом attr, значение которого в точности равно value или содержит value в своём (разделённом пробелами) списке значений.
    
+    
    Выбирает элементы с атрибутом attr, значение которого в точности равно value или содержит value в своём (разделённом пробелами) списке значений.
    
        		
   
    
   
    
    [attr|=value]
    div[lang|="zh"]Выбирает элементы с атрибутом attr, значение которого в точности равно value или начинается с value, за которым сразу следует дефис.Выбирает элементы с атрибутом attr, значение которого в точности равно value или начинается с value, за которым сразу следует дефис.
   
    
  
 
    
 
-
    В приведённом ниже примере вы можете увидеть использование этих селекторов.
    
+
    В приведённом ниже примере вы можете увидеть использование этих селекторов.
    
 
 
      
  
    • Используя li[class], мы можем выбрать каждый селектор с атрибутом класса. Это соответствует всем пунктам списка, за исключением первого.
      • 
@@ -75,9 +75,9 @@ 
      
 
-
      Селекторы вхождения подстроки
      
+
      Селекторы вхождения подстроки
      
 
-
      Эти селекторы предоставляют более широкие возможности для выявления вхождения подстроки в значение атрибута. Например, если у вас есть классы box-warning и box-error и вы хотите выбрать всё, что начинается со строки "box-", вы можете использовать [class^="box-"], чтобы выбрать оба класса (или [class|="box"] как описано в предыдущем разделе).
      
+
      Эти селекторы предоставляют более широкие возможности для выявления вхождения подстроки в значение атрибута. Например, если у вас есть классы box-warning и box-error и вы хотите выбрать всё, что начинается со строки "box-", вы можете использовать [class^="box-"], чтобы выбрать оба класса (или [class|="box"] как описано в предыдущем разделе).
      
 
 
@@ -91,7 +91,7 @@ 
      
-   
      
+   
@@ -120,14 +120,14 @@ 
      Чувствительность к регистру
      
 
-
      Если вы хотите выбрать значения атрибута без учёта регистра, вы можете использовать значение i перед закрывающей скобкой. Этот признак говорит браузеру, что символы ASCII должны сопоставляться без учёта регистра. Без этого признака значения будут сопоставлены в соответствии с чувствительностью к регистру языка документа — в случае HTML такая чувствительность присутствует.
      
+
      Если вы хотите выбрать значения атрибута без учёта регистра, вы можете использовать значение i перед закрывающей скобкой. Этот признак говорит браузеру, что символы ASCII должны сопоставляться без учёта регистра. Без этого признака значения будут сопоставлены в соответствии с чувствительностью к регистру языка документа — в случае HTML такая чувствительность присутствует.
      
 
-
      В примере ниже первый селектор выберет значение, начинающееся с a — это соответствует только первому элементу списка, потому что два других элемента списка начинаются с заглавной буквы A. Второй селектор использует признак нечувствительности к регистру и поэтому выберет все элементы списка.
      
+
      В примере ниже первый селектор выберет значение, начинающееся с a — это соответствует только первому элементу списка, потому что два других элемента списка начинаются с заглавной буквы A. Второй селектор использует признак нечувствительности к регистру и поэтому выберет все элементы списка.
      {{EmbedGHLiveSample("css-examples/learn/selectors/attribute-case.html", '100%', 800)}}
      
-
      Примечание: Существует также более новое значение s, которое вызывает сопоставление с учётом регистра в контекстах, где сопоставление обычно не учитывает регистр, однако это не так хорошо поддерживается в браузерах и не очень полезно в контексте HTML.
      
+
      Примечание: Существует также более новое значение s, которое вызывает сопоставление с учётом регистра в контекстах, где сопоставление обычно не учитывает регистр, однако это не так хорошо поддерживается в браузерах и не очень полезно в контексте HTML.
      
 
      Следующие шаги
      
diff --git a/files/ru/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.html b/files/ru/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.html
index ef009cc4098bd2..68805c472677a5 100644
--- a/files/ru/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.html
+++ b/files/ru/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.html
@@ -107,9 +107,9 @@ 
      
 
 
      {{EmbedGHLiveSample("css-examples/learn/selectors/before.html", '100%', 400)}}
      
 
-
      Однако вставка строк текста из CSS в реальности происходит не слишком часто, поскольку этот текст недоступен для некоторых экранных дикторов и его будет трудно найти и отредактировать в будущем.
      
+
      Однако вставка строк текста из CSS в реальности происходит не слишком часто, поскольку этот текст недоступен для некоторых экранных дикторов и его будет трудно найти и отредактировать в будущем.
      
 
-
      Более корректным использованием этих псевдоэлементов является вставка значка, например маленькой стрелки, добавленной в приведённом ниже примере, которая является визуальным указателем, не предназначенным для зачитывания с помощью экранного диктора:
      
+
      Более корректным использованием этих псевдоэлементов является вставка значка, например маленькой стрелки, добавленной в приведённом ниже примере, которая является визуальным указателем, не предназначенным для зачитывания с помощью экранного диктора:
      
 
 
      {{EmbedGHLiveSample("css-examples/learn/selectors/after-icon.html", '100%', 400)}}
      
 
diff --git a/files/ru/learn/css/building_blocks/selectors/type_class_and_id_selectors/index.html b/files/ru/learn/css/building_blocks/selectors/type_class_and_id_selectors/index.html
index d4f36d1b6d377d..4f58fcd078196d 100644
--- a/files/ru/learn/css/building_blocks/selectors/type_class_and_id_selectors/index.html
+++ b/files/ru/learn/css/building_blocks/selectors/type_class_and_id_selectors/index.html
@@ -23,14 +23,14 @@
   
      
-   
+   
      
  
      Выбирает элементы с атрибутом attr (его имя  —  это значение в квадратных скобках), значение которого начинается с value.Выбирает элементы с атрибутом attr (его имя  —  это значение в квадратных скобках), значение которого начинается с value.
   
      
   
      
    [attr$=value]
 
 
 
 
 
 
      
   
      
    Задача:Изучить различные селекторы CSS, которые мы можем использовать, чтобы применить CSS к документу.Изучить различные селекторы CSS, которые мы можем использовать, чтобы применить CSS к документу.
   
      
  
 
      
 
 
      Селекторы типа
      
 
-
      Селектор типа иногда называется селектором имени тега или селектором элемента, поскольку он выбирает тег/элемент HTML в вашем документе. В примере ниже мы использовали селекторы span, em и strong.
      
+
      Селектор типа иногда называется селектором имени тега или селектором элемента, поскольку он выбирает тег/элемент HTML в вашем документе. В примере ниже мы использовали селекторы span, em и strong.
      
 
 
      Попробуйте добавить CSS-правило, чтобы выбрать элемент <h1> и изменить его цвет на синий.
      
 
@@ -42,19 +42,19 @@ 
      Универсальный
 
 
      {{EmbedGHLiveSample("css-examples/learn/selectors/universal.html", '100%', 750)}}
      
 
-
      Такого рода поведение иногда можно увидеть в «таблицах сброса стилей», которые вычищают всю стилизацию браузера. Так как универсальный селектор вызывает глобальные изменения, мы используем его в очень специфических ситуациях, таких как та, что описана ниже.
      
+
      Такого рода поведение иногда можно увидеть в «таблицах сброса стилей», которые вычищают всю стилизацию браузера. Так как универсальный селектор вызывает глобальные изменения, мы используем его в очень специфических ситуациях, таких как та, что описана ниже.
      
 
-
      Использование универсального селектора для облегчения чтения ваших селекторов
      
+
      Использование универсального селектора для облегчения чтения ваших селекторов
      
 
-
      Одно из применений универсального селектора состоит в том, чтобы облегчить чтение селекторов и сделать их более удобопонятными с точки зрения того, что они делают. Например, если мы хотим выбрать элементы-потомки элемента <article>, которые являются первыми дочерними элементами своего родителя, включая дочерние элементы самого <article>, и сделать их шрифт жирным, мы могли бы использовать псевдокласс {{cssxref(":first-child")}}, который мы будем изучать в уроке о псевдоклассах и псевдо-элементах, как селектор-потомок вместе с селектором элемента <article>: 
      
+
      Одно из применений универсального селектора состоит в том, чтобы облегчить чтение селекторов и сделать их более удобопонятными с точки зрения того, что они делают. Например, если мы хотим выбрать элементы-потомки элемента <article>, которые являются первыми дочерними элементами своего родителя, включая дочерние элементы самого <article>, и сделать их шрифт жирным, мы могли бы использовать псевдокласс {{cssxref(":first-child")}}, который мы будем изучать в уроке о псевдоклассах и псевдо-элементах, как селектор-потомок вместе с селектором элемента <article>: 
      
 
 
      article :first-child {
   font-weight: bold;
 }
      
 
-
      Однако этот селектор можно спутать с article:first-child, который выберет любой элемент <article>, являющийся первым дочерним элементом другого элемента .
      
+
      Однако этот селектор можно спутать с article:first-child, который выберет любой элемент <article>, являющийся первым дочерним элементом другого элемента .
      
 
-
      Чтобы избежать этой путаницы, мы можем добавить универсальный селектор в псевдокласс :first-child , чтобы было очевидно, что делает селектор. Он выбирает любой элемент, который является первым дочерним элементом элемента <article> или первым дочерним элементом любого потомка элемента <article>:
      
+
      Чтобы избежать этой путаницы, мы можем добавить универсальный селектор в псевдокласс :first-child , чтобы было очевидно, что делает селектор. Он выбирает любой элемент, который является первым дочерним элементом элемента <article> или первым дочерним элементом любого потомка элемента <article>:
      
 
 
      article *:first-child {
   font-weight: bold;
@@ -64,25 +64,25 @@ 
      Селекторы класса
      
 
-
      Селектор класса начинается с символа точки (.). Он выберет в документе всё, к чему применён этот класс. В живом примере ниже мы создали класс с именем .highlight, и применили его к нескольким местам в документе. Все элементы, к которым применён класс, подсвечиваются.
      
+
      Селектор класса начинается с символа точки (.). Он выберет в документе всё, к чему применён этот класс. В живом примере ниже мы создали класс с именем .highlight, и применили его к нескольким местам в документе. Все элементы, к которым применён класс, подсвечиваются.
      
 
 
      {{EmbedGHLiveSample("css-examples/learn/selectors/class.html", '100%', 750)}}
      
 
-
      Нацеливание классов на отдельные элементы
      
+
      Нацеливание классов на отдельные элементы
      
 
-
      Вы можете создать селектор, нацеленный на конкретные элементы, к которым применён класс. В следующем примере мы подсветим <span> с классом highlight иначе, чем заголовок <h1> с классом highlight. Мы сделаем это, используя селектор типа для элемента, на который нацелены, с классом, добавленным с помощью точки, без пробела между ними.
      
+
      Вы можете создать селектор, нацеленный на конкретные элементы, к которым применён класс. В следующем примере мы подсветим <span> с классом highlight иначе, чем заголовок <h1> с классом highlight. Мы сделаем это, используя селектор типа для элемента, на который нацелены, с классом, добавленным с помощью точки, без пробела между ними.
      
 
 
      {{EmbedGHLiveSample("css-examples/learn/selectors/class-type.html", '100%', 750)}}
      
 
-
      Этот подход сужает границы правила. Правило будет применяться только к этой конкретной комбинации элемента и класса. Вам нужно будет добавить другой селектор, если вы решили, что правило должно применяться и к другим элементам.
      
+
      Этот подход сужает границы правила. Правило будет применяться только к этой конкретной комбинации элемента и класса. Вам нужно будет добавить другой селектор, если вы решили, что правило должно применяться и к другим элементам.
      
 
-
      Нацеливание на элемент, к которому применено более одного класса
      
+
      Нацеливание на элемент, к которому применено более одного класса
      
 
-
      Вы можете применить несколько классов к элементу и нацелиться на них по отдельности, или выбрать элемент только если присутствуют все классы селектора. Это может быть полезно при создании компонентов, которые могут сочетаться на вашем сайте разными способами.
      
+
      Вы можете применить несколько классов к элементу и нацелиться на них по отдельности, или выбрать элемент только если присутствуют все классы селектора. Это может быть полезно при создании компонентов, которые могут сочетаться на вашем сайте разными способами.
      
 
 
      В примере ниже у нас есть <div>, содержащий примечание. Серая граница применяется когда блок имеет класс notebox. Если у блока есть также класс warning или danger, мы меняем {{cssxref("border-color")}}.
      
 
-
      Мы можем указать браузеру, что мы хотим подобрать только такой элемент, к которому применены два класса, сцепив их вместе без пробелов между ними.  Вы увидите, что к последнему <div>  не применён ни один стиль, так как он имеет только класс danger; ему нужен ещё и класс  notebox, чтобы получить какую-нибудь стилизацию.
      
+
      Мы можем указать браузеру, что мы хотим подобрать только такой элемент, к которому применены два класса, сцепив их вместе без пробелов между ними.  Вы увидите, что к последнему <div>  не применён ни один стиль, так как он имеет только класс danger; ему нужен ещё и класс  notebox, чтобы получить какую-нибудь стилизацию.
      
 
 
      {{EmbedGHLiveSample("css-examples/learn/selectors/class-many.html", '100%', 900)}}
      
 
diff --git a/files/ru/learn/css/building_blocks/values_and_units/index.html b/files/ru/learn/css/building_blocks/values_and_units/index.html
index a03538982610df..7043accb519d6e 100644
--- a/files/ru/learn/css/building_blocks/values_and_units/index.html
+++ b/files/ru/learn/css/building_blocks/values_and_units/index.html
@@ -22,7 +22,7 @@
 
 
      Что такое значение CSS?
      
 
-
      В спецификациях CSS и на страницах свойств здесь в MDN вы сможете определять (узнавать) значения, потому как они будут заключены в угловые скобки, например <color> или <length>. Если вы видите значение <color> как действительное для определённого свойства это значит что вы можете использовать любой валидный цвет в качестве значение для этого свойства, как перечислено на странице <color>.
      
+
      В спецификациях CSS и на страницах свойств здесь в MDN вы сможете определять (узнавать) значения, потому как они будут заключены в угловые скобки, например <color> или <length>. Если вы видите значение <color> как действительное для определённого свойства это значит что вы можете использовать любой валидный цвет в качестве значение для этого свойства, как перечислено на странице <color>.
      
 
 
      
 
      Note: You'll also see CSS values referred to as data types. The terms are basically interchangeable — when you see something in CSS referred to as a data type, it is really just a fancy way of saying value.
      
@@ -87,7 +87,7 @@ 
      Длины
      
 
 
      Абсолютные единицы длины
      
 
-
      Ниже приведены все единицы абсолютной длины — они не являются относительными к чему-либо и обычно считаются всегда одинакового размера.
      
+
      Ниже приведены все единицы абсолютной длины — они не являются относительными к чему-либо и обычно считаются всегда одинакового размера.
      
 
 
@@ -140,7 +140,7 @@ 
      Абсолютные е
 
 
      Единицы относительной длины
      
 
-
      Относительные единицы длин являются относительными к чему-то ещё, возможно к размеру родительского шрифта или к размеру окна просмотра. Преимущество использования относительных единиц состоит в том, что при тщательном планировании вы можете сделать так, чтобы размер текста или других элементов масштабировался относительно всего остального на странице. Некоторые наиболее используемые единицы веб-разработки перечислены в таблице ниже.
      
+
      Относительные единицы длин являются относительными к чему-то ещё, возможно к размеру родительского шрифта или к размеру окна просмотра. Преимущество использования относительных единиц состоит в том, что при тщательном планировании вы можете сделать так, чтобы размер текста или других элементов масштабировался относительно всего остального на странице. Некоторые наиболее используемые единицы веб-разработки перечислены в таблице ниже.
      
  
 
 
      
@@ -160,7 +160,7 @@ 
      Единицы о
   
   
      
-   
+   
@@ -168,7 +168,7 @@ 
      Единицы о
   
      
-   
+   
@@ -263,7 +263,7 @@ 
      Ключевые слова цв
 
 
      Попробуйте поиграть с разными значениями цвета на живом примере ниже, чтобы понять больше об идее как они работают.
      
 
-
      Шестнадцатеричные RGB значения
      
+
      Шестнадцатеричные RGB значения
      Следующий тип значения цвета, с которым вы сталкиваетесь вероятнее всего — это шестнадцатеричные коды. Каждое hex-значение состоит из символа решётки (#) за которым следуют 6 шестнадцатеричных чисел, каждое из которых может принимать одно из 16 значений от 0 до f (представляющая 15) — то есть 0123456789abcdef. Каждая пара значений представляет один из каналов — красного, зелёного или синего цветов — и позволяет нам определять любой из 256 доступных значений для каждого (16 x 16 = 256).
      
 
diff --git a/files/ru/learn/css/css_layout/floats/index.html b/files/ru/learn/css/css_layout/floats/index.html
index e35c277e4b828c..e63bf314e70ddb 100644
--- a/files/ru/learn/css/css_layout/floats/index.html
+++ b/files/ru/learn/css/css_layout/floats/index.html
@@ -17,7 +17,7 @@
   
-   
+   
      
  
      
    chПредварительная мера (ширина) глифа "0" шрифта элемента.Предварительная мера (ширина) глифа "0" шрифта элемента.
   
      
   
      
    rem
      
   
      
    lhВысота строки элемента.Высота строки элемента.
   
      
   
      
    vw
 
 
      
   
      
    Задача:Научиться как создавать обтекаемые свойства на веб-страницах и как использовать свойство clear и другие методы очистки обтекаемых элементов.Научиться как создавать обтекаемые свойства на веб-страницах и как использовать свойство clear и другие методы очистки обтекаемых элементов.
   
      
  
 
      
@@ -65,7 +65,7 @@ 
      Простой пример float
      
 
-
      Если вы сохраните и обновите сейчас, то вы увидите нечто похожее на то, чего ожидаете — блок располагается выше текста, при нормальном потоке. Для того чтобы текст обтекал его вокруг добавьте два свойства к правилу .box:
      
+
      Если вы сохраните и обновите сейчас, то вы увидите нечто похожее на то, чего ожидаете — блок располагается выше текста, при нормальном потоке. Для того чтобы текст обтекал его вокруг добавьте два свойства к правилу .box:
      
 
 
      .box {
   float: left;
@@ -77,7 +77,7 @@ 
      Простой пример float
      
 
-
      Если вы сохраните и обновите сейчас, то вы увидите нечто похожее на следующее:
      
+
      Если вы сохраните и обновите сейчас, то вы увидите нечто похожее на следующее:
      
 
 
      
 
      
 
-
      Теперь перезагрузите страницу и блок должен быть очищенным. По сути, это то же самое, как если бы вы добавили HTML-элемент такой как <div> ниже объекта и установили clear: both.
      
+
      Теперь перезагрузите страницу и блок должен быть очищенным. По сути, это то же самое, как если бы вы добавили HTML-элемент такой как <div> ниже объекта и установили clear: both.
      
 
 
      
 
+Сетки (grids) являются установленным инструментом проектирования и многие современные макеты веб-сайта основаны на регулярной сетке. В этой статье мы рассмотрим дизайн на основе сетки и увидим как CSS можно использовать для создания сеток — как с помощью современных инструментов, так и с помощью новых технологий, которые только начинают становиться доступными в браузерах.
      
 
 
diff --git a/files/ru/learn/css/css_layout/introduction/index.html b/files/ru/learn/css/css_layout/introduction/index.html
index b3d3be8077d0d4..32349fa8810135 100644
--- a/files/ru/learn/css/css_layout/introduction/index.html
+++ b/files/ru/learn/css/css_layout/introduction/index.html
@@ -81,7 +81,7 @@ 
      Свойство display 
      Вы можете изменить дефолтное поведение display. К примеру,  {{htmlelement("li")}} отображается как display: block по умолчанию, это означает что элементы списка отображаются один за другим в нашем документе.Если мы изменим значение display на inline они будут отображаться друг за другом, как это делают слова в предложении. Тот факт, что вы можете изменить значение display для любого элемента означает, что вы можете выбирать HTML-элементы по их семантическому значению, не беспокоясь о том как они будут выглядеть. То как они выглядят это то, что вы можете поменять.
      
 
-
      В дополнение к возможности менять значение с  block на inline и обратно, есть и другие возможности вёрстки с другими значениями  display. Однако, в основном все они требуют использования дополнительных свойств. Двумя наиболее важными  для задач вёрстки страниц являются display: flex и display: grid.
      
+
      В дополнение к возможности менять значение с  block на inline и обратно, есть и другие возможности вёрстки с другими значениями  display. Однако, в основном все они требуют использования дополнительных свойств. Двумя наиболее важными  для задач вёрстки страниц являются display: flex и display: grid.
      Flexbox
      
 
@@ -165,7 +165,7 @@ 
      Grid Layout
      В то время как flexbox предназначен для одномерной разметки, Grid Layout предназначен для двумерной — выстраивая предметы в ряды и столбцы.
      
 
-
      Ещё раз, вы можете переключиться на Grid Layout при помощи конкретного значения отображения — display: grid. Пример ниже использует разметку подобную примеру flex, а также мы определяем некоторые дорожки рядов и столбцов в родительском элементе, используя свойства {{cssxref("grid-template-rows")}} и {{cssxref("grid-template-columns")}} соответственно. Мы определили три столбца каждый по 1fr и два ряда по 100px. Мне не надо вводить какие-либо правила для дочерних элементов; они автоматически помещаются в ячейки, созданные нашей сеткой.
      
+
      Ещё раз, вы можете переключиться на Grid Layout при помощи конкретного значения отображения — display: grid. Пример ниже использует разметку подобную примеру flex, а также мы определяем некоторые дорожки рядов и столбцов в родительском элементе, используя свойства {{cssxref("grid-template-rows")}} и {{cssxref("grid-template-columns")}} соответственно. Мы определили три столбца каждый по 1fr и два ряда по 100px. Мне не надо вводить какие-либо правила для дочерних элементов; они автоматически помещаются в ячейки, созданные нашей сеткой.
      
 
      
  
 
 
 
 
 
 
 
 
      
@@ -27,14 +27,14 @@
 
 
      Исторические макеты сайтов
      
 
-
      В какой-то момент истории при разработке веб-сайта у вас было два варианта:
      
+
      В какой-то момент истории при разработке веб-сайта у вас было два варианта:
        
  
      • Вы могли создать жидкий сайт, который будет растягиваться чтобы заполнить окно браузера
        • 
  
      • или сайт с фиксированной шириной, который будет иметь фиксированный размер в пикселях.
        • 
 
      
 
-
      Эти два подхода, как правило, приводили к тому, что веб-сайт лучше всего выглядел на экране человека, создавшего сайт! Жидкий сайт приводил к раздавленному дизайну на маленьких экранах (как видно ниже) и не читаемо длинным строкам на больших.
      
+
      Эти два подхода, как правило, приводили к тому, что веб-сайт лучше всего выглядел на экране человека, создавшего сайт! Жидкий сайт приводил к раздавленному дизайну на маленьких экранах (как видно ниже) и не читаемо длинным строкам на больших.
      A layout with two columns squashed into a mobile size viewport.
 
      
@@ -60,17 +60,17 @@ 
      Историческ
 
 
      Когда мобильный веб стал становиться реальностью с первыми функциональными телефонами, компании желающие охватить мобильники начали создавать в основном специальные мобильные версии своих сайтов, с различными URL (часто что-то наподобие m.example.com или example.mobi). Это означало, что необходимо было разрабатывать и поддерживать в актуальном состоянии две отдельные версии сайта.
      
 
-
      Кроме того, эти мобильные сайты часто предлагали очень урезанный вариант. Поскольку мобильные гаджеты стали мощнее и способными отображать целые веб-сайты, пользователей мобильных устройств раздражало, что они обнаруживали себя запертыми в мобильной версии сайта, неспособные получить доступ к информации, которая, как они знали, есть в полнофункциональной версии сайта.
      
+
      Кроме того, эти мобильные сайты часто предлагали очень урезанный вариант. Поскольку мобильные гаджеты стали мощнее и способными отображать целые веб-сайты, пользователей мобильных устройств раздражало, что они обнаруживали себя запертыми в мобильной версии сайта, неспособные получить доступ к информации, которая, как они знали, есть в полнофункциональной версии сайта.
      
 
 
      Гибкий макет до отзывчивого дизайна
      
 
 
      Было разработано несколько подходов чтобы попытаться разрешить недостатки построения веб-сайтов жидким методом или методом с фиксированной шириной. В 2004 году Камерон Адамс написал пост Resolution dependent layout, описывающий метод создания дизайна который мог бы адаптироваться к разным разрешениям экрана. Этот подход требовал, чтобы JavaScript узнавал разрешение экрана и загружал корректный CSS.
      
 
-
      Зои Миккели Гилленвотер сыграла важную роль в свой работе описав и формализовав различные способы посредствам которых могут быть созданы гибкие сайты, пытаясь найти золотую середину между заполнением экрана или полностью фиксированным размером.
      
+
      Зои Миккели Гилленвотер сыграла важную роль в свой работе описав и формализовав различные способы посредствам которых могут быть созданы гибкие сайты, пытаясь найти золотую середину между заполнением экрана или полностью фиксированным размером.
      
 
 
      Отзывчивый дизайн
      
 
-
      Термин адаптивный дизайн был Придуман Итаном Маркоттом в 2010 году и описывал использование трёх методов в сочетании.
      
+
      Термин адаптивный дизайн был Придуман Итаном Маркоттом в 2010 году и описывал использование трёх методов в сочетании.
      
 
 
        
  
      1. Первой была идея жидких сеток, нечто что уже исследовала Гилленвотер, что можно прочитать в статье Маркотта - Fluid Grids (опубликовано в 2009 в A List Apart).
        2. 
@@ -78,13 +78,13 @@ 
        Отзывчивый дизайн
        Третьим ключевым компонентом были медиавыражения. Медиавыражения позволяют переключать тип макета применяя только CSS то, что Камерон Адамс исследовал, используя JavaScript. Вместо того чтобы иметь один макет для всех размеров экранов, макет мог изменяться. Боковые панели можно перемещать для маленьких экранов, либо отображать альтернативную навигацию.
 
      
 
-
      Очень важно понять, что адаптивный веб-дизайн — это не отдельная технология, это термин используемый, чтобы описать подход к веб-дизайну или набор лучших практик, используемых для создания макета, который может реагировать на используемое устройство для просмотра контента. В первоначальном исследовании Маркотта это означало гибкие сетки (с использованием floats) и медиавыражения, однако почти за 10 лет, прошедших с момента написания этой статьи, адаптивная работа стала стандартом по умолчанию. Современные методы макета CSS отзывчивы по своей сути, и у нас есть новые штучки, встроенные в веб-платформу для того, чтобы делать дизайн отзывчивых сайтов проще.
      
+
      Очень важно понять, что адаптивный веб-дизайн — это не отдельная технология, это термин используемый, чтобы описать подход к веб-дизайну или набор лучших практик, используемых для создания макета, который может реагировать на используемое устройство для просмотра контента. В первоначальном исследовании Маркотта это означало гибкие сетки (с использованием floats) и медиавыражения, однако почти за 10 лет, прошедших с момента написания этой статьи, адаптивная работа стала стандартом по умолчанию. Современные методы макета CSS отзывчивы по своей сути, и у нас есть новые штучки, встроенные в веб-платформу для того, чтобы делать дизайн отзывчивых сайтов проще.
      
 
-
      Остальная часть этой статьи укажет вам на различные функции веб-платформы, которые вы, возможно, захотите использовать при создании адаптивного сайта.
      
+
      Остальная часть этой статьи укажет вам на различные функции веб-платформы, которые вы, возможно, захотите использовать при создании адаптивного сайта.
      
 
 
      Медиавыражения
      
 
-
      Отзывчивый дизайн появился благодаря медиавыражениям (media queries). Спецификация Media Queries Level 3 стала Рекомендованным Кандидатом в 2009 году, что означает, что она была признана готовой к реализации в браузерах. Медиавыражения позволяют нам проводить серию тестов (например, является ли экран пользователя больше, чем определённая ширина или разрешение) и выборочно применять CSS к стилю страницы соответственно с нуждами пользователя.
      
+
      Отзывчивый дизайн появился благодаря медиавыражениям (media queries). Спецификация Media Queries Level 3 стала Рекомендованным Кандидатом в 2009 году, что означает, что она была признана готовой к реализации в браузерах. Медиавыражения позволяют нам проводить серию тестов (например, является ли экран пользователя больше, чем определённая ширина или разрешение) и выборочно применять CSS к стилю страницы соответственно с нуждами пользователя.
      
 
 
      Например, следующее медиавыражение проверяет отображается ли текущая страница как экранная медиа (а не как печатный документ) и имеет ли область просмотра ширину как минимум 800 px. CSS будет применяться к селектору .container только если эти две вещи истины.
      
 
@@ -107,7 +107,7 @@ 
      Гибкие сетки
      
 
 
      Используя гибкую сетку, вам всего лишь надо добавить контрольную точку и изменить дизайн в точке, когда ваш контент начинает выглядеть плохо. Например, если длина строки становится нечитаемо длинной при увеличении размера экрана, или блок становится сдавленным с двумя словами в каждой строке при сужении экрана.
      
 
-
      В первые дни отзывчивого дизайна, нашим единственным вариантом выполнения было использование floats. Гибкий обтекаемый макет достигался путём присвоения каждому элементу процентной ширины удостоверившись, что итоговые значения в макете не превышают 100%. В своей оригинальной статье о плавучих сетках Маркотт подробно описал формулу для преобразования макета, созданного с использованием пикселей, в проценты.
      
+
      В первые дни отзывчивого дизайна, нашим единственным вариантом выполнения было использование floats. Гибкий обтекаемый макет достигался путём присвоения каждому элементу процентной ширины удостоверившись, что итоговые значения в макете не превышают 100%. В своей оригинальной статье о плавучих сетках Маркотт подробно описал формулу для преобразования макета, созданного с использованием пикселей, в проценты.
      
 
 
      target / context = result 
 
      
@@ -119,7 +119,7 @@ 
      Гибкие сетки
      
 } 
 
 
-
      Этот подход сегодня можно найти во многих местах в Интернете и он задокументирован здесь в разделе макетов в нашей статье Устаревших методов макетов. В вашей работе вероятно, что вы столкнётесь с веб-сайтами, использующими этот подход, поэтому стоит понимать его, даже если вы не будете строить современные сайты используя гибкие сетки основанные на float.
      
+
      Этот подход сегодня можно найти во многих местах в Интернете и он задокументирован здесь в разделе макетов в нашей статье Устаревших методов макетов. В вашей работе вероятно, что вы столкнётесь с веб-сайтами, использующими этот подход, поэтому стоит понимать его, даже если вы не будете строить современные сайты используя гибкие сетки основанные на float.
      
 
 
      Следующий пример демонстрирует простой отзывчивый дизайн, с использованием медиавыражений и гибких сеток. На узких экранах макет отображает блоки, расположенные друг над другом:
      
 
@@ -159,7 +159,7 @@ 
      Multicol
      
 
 
      Flexbox
      
 
-
      В Flexbox, в качестве исходного поведения, flex элементы будут сжиматься и распределять пространство между элементами в соответствии с пространством в их контейнере. Изменяя значения flex-grow и flex-shrink вы можете указать, как вы хотите, чтобы предметы вели себя когда они сталкиваются с большим или меньшим пространством вокруг себя.
      
+
      В Flexbox, в качестве исходного поведения, flex элементы будут сжиматься и распределять пространство между элементами в соответствии с пространством в их контейнере. Изменяя значения flex-grow и flex-shrink вы можете указать, как вы хотите, чтобы предметы вели себя когда они сталкиваются с большим или меньшим пространством вокруг себя.
      
 
 
      В примере ниже каждый flex элемент будет принимать равное количество пространства во flex контейнере используя запись flex: 1 как описано в главе Flexbox: Гибкое изменение размеров flex элементов.
      
 
@@ -178,7 +178,7 @@ 
      Flexbox
      
 
 
      CSS grid
      
 
-
      В макете CSS Grid единицы измерения fr позволяют распределять доступное пространство между дорожками сетки. Следующий пример создаёт grid контейнер с тремя дорожками размером 1fr. Это создаст три вертикальные дорожки, каждая занимающая одну часть свободного пространства в контейнере. Вы можете узнать больше об этом подходе к созданию сетки в теме Изучение Макета Grid в разделе Гибкие grids с единицами fr.
      
+
      В макете CSS Grid единицы измерения fr позволяют распределять доступное пространство между дорожками сетки. Следующий пример создаёт grid контейнер с тремя дорожками размером 1fr. Это создаст три вертикальные дорожки, каждая занимающая одну часть свободного пространства в контейнере. Вы можете узнать больше об этом подходе к созданию сетки в теме Изучение Макета Grid в разделе Гибкие grids с единицами fr.
      
 
 
      .container {
   display: grid;
@@ -192,18 +192,18 @@ 
      CSS grid
      
 
 
      Отзывчивые изображения
      
 
-
      Самый простой подход к отзывчивым изображениям был описан в ранних статьях Маркотта по отзывчивому дизайну. По сути, вы берёте изображение максимального размера, которое могло понадобиться, и уменьшаете его. Этот подход до сих пор используется и в большинстве таблиц стилей вы найдёте следующий CSS:
      
+
      Самый простой подход к отзывчивым изображениям был описан в ранних статьях Маркотта по отзывчивому дизайну. По сути, вы берёте изображение максимального размера, которое могло понадобиться, и уменьшаете его. Этот подход до сих пор используется и в большинстве таблиц стилей вы найдёте следующий CSS:
      
 
 
      img {
   max-width: 100%;
 } 
 
      
 
-
      Существуют очевидные недостатки к этому подходу. Изображение может быть изображено намного меньше своего исходного размера, что является пустой тратой пропускной способности — пользователь мобильных может загружать изображение, в несколько раз превышающее размер того, что он фактически видит в окне браузера.  Кроме того, вам может не понадобиться такое же соотношение сторон изображения на мобильном устройстве, как на компьютере. Либо, учитывая меньший размер изображения на мобильном телефоне, вы можете захотеть показать совсем другое изображение, которое легче понять на маленьком экране. Такие вещи можно достичь, просто уменьшая изображение.
      
+
      Существуют очевидные недостатки к этому подходу. Изображение может быть изображено намного меньше своего исходного размера, что является пустой тратой пропускной способности — пользователь мобильных может загружать изображение, в несколько раз превышающее размер того, что он фактически видит в окне браузера.  Кроме того, вам может не понадобиться такое же соотношение сторон изображения на мобильном устройстве, как на компьютере. Либо, учитывая меньший размер изображения на мобильном телефоне, вы можете захотеть показать совсем другое изображение, которое легче понять на маленьком экране. Такие вещи можно достичь, просто уменьшая изображение.
      
 
-
      Отзывчивые изображения, используя элемент {{htmlelement("picture")}} и атрибуты srcset и sizes элемента {{htmlelement("img")}} оба решают эти проблемы. Вы можете указать несколько размеров вместе с «подсказками» (метаданные, описывающие размер экрана и разрешение, для которых изображение лучше всего подходит), и браузер выберет наиболее подходящее изображение для каждого устройства, гарантируя, что пользователь загрузит изображение подходящего размера для устройства, которое они используют.
      
+
      Отзывчивые изображения, используя элемент {{htmlelement("picture")}} и атрибуты srcset и sizes элемента {{htmlelement("img")}} оба решают эти проблемы. Вы можете указать несколько размеров вместе с «подсказками» (метаданные, описывающие размер экрана и разрешение, для которых изображение лучше всего подходит), и браузер выберет наиболее подходящее изображение для каждого устройства, гарантируя, что пользователь загрузит изображение подходящего размера для устройства, которое они используют.
      
 
-
      Вы также можете напрямую использовать изображения разных размеров, обеспечивая разное кадрирование или совершенно другое изображение для разных размеров экрана.
      
+
      Вы также можете напрямую использовать изображения разных размеров, обеспечивая разное кадрирование или совершенно другое изображение для разных размеров экрана.
      
 
 
      Вы можете найти подробное руководство по отзывчивым изображениям в разделе изучения HTML на MDN.
      
 
@@ -228,7 +228,7 @@ 
      Отзывчивая тип
 } 
 
      
 
-
      Мы отредактировали наш приведённый выше пример отзывчивой сетки grid, чтобы он также включал в себя адаптивный тип, используя описанный метод. Вы можете видеть, как заголовок меняет размеры, когда макет переходит в версию с двумя столбцами.
      
+
      Мы отредактировали наш приведённый выше пример отзывчивой сетки grid, чтобы он также включал в себя адаптивный тип, используя описанный метод. Вы можете видеть, как заголовок меняет размеры, когда макет переходит в версию с двумя столбцами.
      
 
 
      В мобильных версиях заголовок меньше:
      
 
@@ -246,7 +246,7 @@ 
      Отзывчивая тип
 
      Примечание: смотрите этот пример в действии: пример, исходный код.
      
 
 
-
      Такой подход к типографике показывает, что вам не нужно ограничиваться в использовании медиавыражений только изменением макета страницы. Они могут быть использоваться для настройки любого элемента, чтобы сделать его более удобным или привлекательным при других размерах экрана.
      
+
      Такой подход к типографике показывает, что вам не нужно ограничиваться в использовании медиавыражений только изменением макета страницы. Они могут быть использоваться для настройки любого элемента, чтобы сделать его более удобным или привлекательным при других размерах экрана.
      
 
 
      Using viewport units for responsive typography
      
 
diff --git a/files/ru/learn/css/first_steps/how_css_is_structured/index.html b/files/ru/learn/css/first_steps/how_css_is_structured/index.html
index 886be9cc10f6bc..e2c0ed73ba1351 100644
--- a/files/ru/learn/css/first_steps/how_css_is_structured/index.html
+++ b/files/ru/learn/css/first_steps/how_css_is_structured/index.html
@@ -326,7 +326,7 @@ 
      @правила
      
 
 
      @import 'styles2.css';
      
 
-
      Чаще других встречается @rules под названием @media: оно позволяет вам использовать медиавыражения, чтобы применять CSS в определённых случаях, только если выполняются те или иные условия (например, при изменении размеров окна или при просмотре сайта с иного типа устройства).
      
+
      Чаще других встречается @rules под названием @media: оно позволяет вам использовать медиавыражения, чтобы применять CSS в определённых случаях, только если выполняются те или иные условия (например, при изменении размеров окна или при просмотре сайта с иного типа устройства).
      
 
 
      Ниже у нас CSS-файл, в котором значение заднего фона элемента <body> равно pink. Однако после мы добавили правило @media, которое делает задний фон элемента синим, при условии если ширина окна не менее 30em.
      
 
diff --git a/files/ru/learn/css/howto/index.html b/files/ru/learn/css/howto/index.html
index 1102d84ab0b459..6f1ef6fa98e0f3 100644
--- a/files/ru/learn/css/howto/index.html
+++ b/files/ru/learn/css/howto/index.html
@@ -56,7 +56,7 @@ 
      Блоки и разметка
      
 
 
 
-
      Необычное или передовые технологии
      
+
      Необычное или передовые технологии
      
 
 
      Beyond the basics, CSS is allows very advanced design techniques. These articles help you tackle the hardest use cases you may face.
      
 
@@ -67,7 +67,7 @@ 
      Общие
      
  
    • How to control inheritance in CSS
      • 
 
 
-
      Дополнительные эффекты
      
+
      Дополнительные эффекты
      
 
 
        
  
      • How to use filters in CSS
        • 
diff --git a/files/ru/learn/css/styling_text/fundamentals/index.html b/files/ru/learn/css/styling_text/fundamentals/index.html
index 5f75d1f374ad17..d4ba6db68d2e4c 100644
--- a/files/ru/learn/css/styling_text/fundamentals/index.html
+++ b/files/ru/learn/css/styling_text/fundamentals/index.html
@@ -7,7 +7,7 @@
 
 
        {{NextMenu("Learn/CSS/Styling_text/Styling_lists", "Learn/CSS/Styling_text")}}
        
 
-
        В данной статье мы начнём путь к овладению стилизацией текста при помощи {{glossary("CSS")}}. Мы подробно изучим основы стилизации текста и шрифта, такие как толщина, начертание, семейство, стенография, выравнивание текста и другие эффекты, а также рассмотрим междустрочный и межбуквенный интервалы.
        
+
        В данной статье мы начнём путь к овладению стилизацией текста при помощи {{glossary("CSS")}}. Мы подробно изучим основы стилизации текста и шрифта, такие как толщина, начертание, семейство, стенография, выравнивание текста и другие эффекты, а также рассмотрим междустрочный и межбуквенный интервалы.
        
 
 
      
  
 
 
 
 
      
@@ -155,7 +155,7 @@ 
      Web safe fonts
      Default fonts
      
 
-
      CSS defines five generic names for fonts:  serif, sans-serif, monospace, cursive and fantasy. Those are very generic and the exact font face used when using those generic names is up to each browser and can vary for each operating system they are running on. It represents a worst case scenario where the browser will try to do its best to provide at least a font that looks appropriate. serif, sans-serif and monospace are quite predictable and should provide something reasonable. On the other hand, cursive and fantasy are less predictable and we recommend using them very carefully, testing as you go.
      
+
      CSS defines five generic names for fonts:  serif, sans-serif, monospace, cursive and fantasy. Those are very generic and the exact font face used when using those generic names is up to each browser and can vary for each operating system they are running on. It represents a worst case scenario where the browser will try to do its best to provide at least a font that looks appropriate. serif, sans-serif and monospace are quite predictable and should provide something reasonable. On the other hand, cursive and fantasy are less predictable and we recommend using them very carefully, testing as you go.
      The five names are defined as follows:
      
 
@@ -171,27 +171,27 @@ 
      Default fonts
      
-   
+   
-   
+   
-   
+   
-   
+   
-   
+   
      
  
 
 
 
 
   
      
    serif
    Fonts that have serifs (the flourishes and other small details you see at the ends of the strokes in some typefaces)My big red elephantMy big red elephant
   
      
   
      
    sans-serif
    Fonts that don't have serifs.My big red elephantMy big red elephant
   
      
   
      
    monospace
    Fonts where every character has the same width, typically used in code listings.My big red elephantMy big red elephant
   
      
   
      
    cursive
    Fonts that are intended to emulate handwriting, with flowing, connected strokes.My big red elephantMy big red elephant
   
      
   
      
    fantasy
    Fonts that are intended to be decorative.My big red elephantMy big red elephant
   
      
        
 
      
@@ -304,7 +304,7 @@ 
      Font style, f
   
        
    
      • normal: Sets the text to the normal font (turns existing italics off.)
        • 
    
      • italic: Sets the text to use the italic version of the font if available; if not available, it will simulate italics with oblique instead.
        • 
-   
      • oblique: Sets the text to use a simulated version of an italic font, created by slanting the normal version.
        • 
+   
      • oblique: Sets the text to use a simulated version of an italic font, created by slanting the normal version.
        • 
   
      
  
  
    • {{cssxref("font-weight")}}: Sets how bold the text is. This has many values available in case you have many font variants available (such as -light, -normal, -bold, -extrabold, -black, etc.), but realistically you'll rarely use any of them except for normal and bold:
@@ -317,20 +317,20 @@ 
      Font style, f
  
    • {{cssxref("text-transform")}}: Allows you to set your font to be transformed. Values include:
   
        
    
      • none: Prevents any transformation.
        • 
-   
      • uppercase: Transforms all text to capitals.
        • 
+   
      • uppercase: Transforms all text to capitals.
        • 
    
      • lowercase: Transforms all text to lower case.
        • 
-   
      • capitalize: Transforms all words to have the first letter capitalized.
        • 
-   
      • full-width: Transforms all glyphs to be written inside a fixed-width square, similar to a monospace font, allowing aligning of e.g. Latin characters along with Asian language glyphs (like Chinese, Japanese, Korean).
        • 
+   
      • capitalize: Transforms all words to have the first letter capitalized.
        • 
+   
      • full-width: Transforms all glyphs to be written inside a fixed-width square, similar to a monospace font, allowing aligning of e.g. Latin characters along with Asian language glyphs (like Chinese, Japanese, Korean).
        • 
   
      
  
      • 
  
    • {{cssxref("text-decoration")}}: Sets/unsets text decorations on fonts (you'll mainly use this to unset the default underline on links when styling them.) Available values are:
   
        
    
      • none: Unsets any text decorations already present.
        • 
    
      • underline: Underlines the text.
        • 
-   
      • overline: Gives the text an overline.
        • 
+   
      • overline: Gives the text an overline.
        • 
    
      • line-through: Puts a strikethrough over the text.
        • 
   
      
-  You should note that {{cssxref("text-decoration")}} can accept multiple values at once, if you want to add multiple decorations simultaneously, for example text-decoration: underline overline. Also note that {{cssxref("text-decoration")}} is a shorthand property for {{cssxref("text-decoration-line")}}, {{cssxref("text-decoration-style")}}, and {{cssxref("text-decoration-color")}}. You can use combinations of these property values to create interesting effects, for example text-decoration: line-through red wavy.
      • 
+  You should note that {{cssxref("text-decoration")}} can accept multiple values at once, if you want to add multiple decorations simultaneously, for example text-decoration: underline overline. Also note that {{cssxref("text-decoration")}} is a shorthand property for {{cssxref("text-decoration-line")}}, {{cssxref("text-decoration-style")}}, and {{cssxref("text-decoration-color")}}. You can use combinations of these property values to create interesting effects, for example text-decoration: line-through red wavy.
      • 
 
    
 
 
    Let's look at adding a couple of these properties to our example:
    
diff --git a/files/ru/learn/css/styling_text/index.html b/files/ru/learn/css/styling_text/index.html
index 9b958bee164e54..5f18e2efd9c3c3 100644
--- a/files/ru/learn/css/styling_text/index.html
+++ b/files/ru/learn/css/styling_text/index.html
@@ -56,5 +56,5 @@ 
    Проверка
    
 
 
    
  
    Вёрстка домашней страницы муниципальной школы
    
- 
    В этом задании мы проверим ваше понимание стилизации текста, заставив вас оформить текст для домашней страницы общеобразовательной школы.
    
+ 
    В этом задании мы проверим ваше понимание стилизации текста, заставив вас оформить текст для домашней страницы общеобразовательной школы.
    
 
    
diff --git a/files/ru/learn/css/styling_text/styling_links/index.html b/files/ru/learn/css/styling_text/styling_links/index.html
index 9d29d7cf02d1b2..19fd78dd988026 100644
--- a/files/ru/learn/css/styling_text/styling_links/index.html
+++ b/files/ru/learn/css/styling_text/styling_links/index.html
@@ -24,14 +24,14 @@
 
 
    Давайте посмотрим на некоторые ссылки
    
 
-
    Мы рассматривали как реализуются ссылки в вашем HTML в соответствии с лучшими практиками в Создании гиперссылок. В этой статье мы будем опираться на эти знания, показывая вам лучшие практики по оформлению ссылок.
    
+
    Мы рассматривали как реализуются ссылки в вашем HTML в соответствии с лучшими практиками в Создании гиперссылок. В этой статье мы будем опираться на эти знания, показывая вам лучшие практики по оформлению ссылок.
    
 
 
    Состояния ссылок
    
 
-
    Первое, что нужно понять, это концепция состояний ссылок — разные состояния в которых могут существовать ссылки, которые могут быть стилизованы используя различные псевдоклассы:
    
+
    Первое, что нужно понять, это концепция состояний ссылок — разные состояния в которых могут существовать ссылки, которые могут быть стилизованы используя различные псевдоклассы:
    
 
 
      
- 
    • Link (не посещённая): Состояние по умолчанию, в котором находится ссылка, когда она не находится в каком-либо другом состоянии. Она может быть специфически стилизована используя псевдокласс {{cssxref(":link")}}.
      • 
+ 
    • Link (не посещённая): Состояние по умолчанию, в котором находится ссылка, когда она не находится в каком-либо другом состоянии. Она может быть специфически стилизована используя псевдокласс {{cssxref(":link")}}.
      • 
  
    • Visited: Ссылка, когда она уже была посещена (существует в истории браузера), стилизуется используя псевдокласс {{cssxref(":visited")}}.
      • 
  
    • Hover: Ссылка, когда на неё наведён курсор мыши, стилизуется используя псевдокласс {{cssxref(":hover")}}
      • 
  
    • Focus: Ссылка, когда она была сфокусирована (например когда пользователь переместился на неё используя клавишу Tab или наподобие или программно сфокусирована используя {{domxref("HTMLElement.focus()")}}) — стилизуется используя псевдокласс {{cssxref(":focus")}}.
      • 
@@ -52,14 +52,14 @@ 
      Стили по умолчанию
      
 
 
      {{ EmbedLiveSample('Default_styles', '100%', 120) }}
      
 
-
      Вы заметите несколько вещей при изучении стилей по умолчанию:
      
+
      Вы заметите несколько вещей при изучении стилей по умолчанию:
      
 
 
        
  
      • Ссылки подчёркнуты.
        • 
  
      • Не посещённые ссылки синие.
        • 
  
      • Посещённые ссылки фиолетовые
        • 
  
      • Наведение курсора мыши на ссылку меняют указатель мыши на иконку маленькой руки.
        • 
- 
      • Сфокусированные ссылки имеют контур вокруг себя — вы можете сфокусироваться на ссылках на этой странице с помощью клавиатуры, нажав клавишу табуляции (на Mac, вам может понадобиться включить опцию Full Keyboard Access: All controls нажав Ctrl + F7, прежде чем это будет работать).
        • 
+ 
      • Сфокусированные ссылки имеют контур вокруг себя — вы можете сфокусироваться на ссылках на этой странице с помощью клавиатуры, нажав клавишу табуляции (на Mac, вам может понадобиться включить опцию Full Keyboard Access: All controls нажав Ctrl + F7, прежде чем это будет работать).
        • 
  
      • Активные ссылки красные (попробуйте удерживать кнопку мыши на ссылке, когда вы кликните по ней).
        • 
 
      
 
@@ -75,11 +75,11 @@ 
      Стили по умолчанию
      
 
        
  
      • {{cssxref("color")}} для цвета текста.
        • 
  
      • {{cssxref("cursor")}} для стиля курсора мыши — вы не должны отключать эту опцию только если у вас нет на это веской причины.
        • 
- 
      • {{cssxref("outline")}} для контура текста (контур схож с границей, единственное отличие — это то, что границы занимают место в блоке, а контур — нет; он просто располагается поверх фона). Контур является полезным вспомогательным средством, так что подумайте хорошо, прежде чем отключать его; по крайней мере вы должны удвоить стили, заданные для состояния hover, а также состояния фокусировки.
        • 
+ 
      • {{cssxref("outline")}} для контура текста (контур схож с границей, единственное отличие — это то, что границы занимают место в блоке, а контур — нет; он просто располагается поверх фона). Контур является полезным вспомогательным средством, так что подумайте хорошо, прежде чем отключать его; по крайней мере вы должны удвоить стили, заданные для состояния hover, а также состояния фокусировки.
        • 
 
      
 
 
      
-
      Обратите внимание: вы не ограничены только перечисленными выше свойствами чтобы стилизовать ссылки — вы можете использовать любые свойства, которые вам нравятся.  Просто постарайтесь не сходить с ума слишком сильно!
      
+
      Обратите внимание: вы не ограничены только перечисленными выше свойствами чтобы стилизовать ссылки — вы можете использовать любые свойства, которые вам нравятся.  Просто постарайтесь не сходить с ума слишком сильно!
      
 
      
 
 
@@ -115,7 +115,7 @@ 
    
 
-
    Активное изучение: Стилизация вложенного списка
    
+
    Активное изучение: Стилизация вложенного списка
    
 
 
    В этой сессии активного изучения, мы хотим, чтобы вы взяли всё что вы выучили выше и попробовали стилизовать вложенный список. Мы предоставили вам HTML и хотим, чтобы вы:
    
 
@@ -365,7 +365,7 @@ 
    Playable code
    
 
 
    Смотрите также
    
 
-
    Счётчики CSS предоставляют расширенные инструменты для настройки счета и оформления списков, но они довольно сложные. Мы рекомендуем изучить это, если вы захотите размяться. Смотрите:
    
+
    Счётчики CSS предоставляют расширенные инструменты для настройки счета и оформления списков, но они довольно сложные. Мы рекомендуем изучить это, если вы захотите размяться. Смотрите:
    
 
 
      
  
    • {{cssxref("@counter-style")}}
      • 
@@ -375,7 +375,7 @@ 
      Смотрите также
      
 
 
      Заключение
      
 
-
      В плане стилизации списки сравнительно легко освоить, как только вы освоите несколько связанных базовых принципов и специфичные свойства. В следующей статье мы перейдём к методам стилизации ссылок.
      
+
      В плане стилизации списки сравнительно легко освоить, как только вы освоите несколько связанных базовых принципов и специфичные свойства. В следующей статье мы перейдём к методам стилизации ссылок.
      
 
 
      {{PreviousMenuNext("Learn/CSS/Styling_text/Fundamentals", "Learn/CSS/Styling_text/Styling_links", "Learn/CSS/Styling_text")}}
      
 
diff --git a/files/ru/learn/css/styling_text/web_fonts/index.html b/files/ru/learn/css/styling_text/web_fonts/index.html
index 9a9f4be4ca6a41..fdb644ccbb2259 100644
--- a/files/ru/learn/css/styling_text/web_fonts/index.html
+++ b/files/ru/learn/css/styling_text/web_fonts/index.html
@@ -8,7 +8,7 @@
 
 
      {{PreviousMenuNext("Learn/CSS/Styling_text/Styling_links", "Learn/CSS/Styling_text/Typesetting_a_homepage", "Learn/CSS/Styling_text")}}
      
 
-
      В первой статье модуля, мы изучали основные функции CSS доступные для стилизации шрифтов и текста. В этой статье мы продвинемся дальше изучая веб-шрифты в деталях — они позволяют вам загружать пользовательские шрифты вместе с вашей веб-страницей, чтобы обеспечить более разнообразный, индивидуальный стиль текста.
      
+
      В первой статье модуля, мы изучали основные функции CSS доступные для стилизации шрифтов и текста. В этой статье мы продвинемся дальше изучая веб-шрифты в деталях — они позволяют вам загружать пользовательские шрифты вместе с вашей веб-страницей, чтобы обеспечить более разнообразный, индивидуальный стиль текста.
      
 
 
@@ -33,11 +33,11 @@ 
      К
   font-family: Helvetica, "Trebuchet MS", Verdana, sans-serif;
 }
 
-
      Эта система работает хорошо, но традиционно выбор шрифтов веб-разработчиков была ограниченной. Существует только горсть шрифтов которые вы можете гарантировать, что они являются доступными во всех распространённых системах — так называемые Безопасные веб-шрифты. Вы можете использовать стек шрифта для указания предпочтительных шрифтов, за которыми следует веб-безопасные альтернативы, за которыми следует системный шрифт по умолчанию, но это добавляет дополнительной работы с точки зрения тестирования, чтобы убедиться, что ваш дизайн выглядит хорошо с каждым из шрифтов и т. д.
      
+
      Эта система работает хорошо, но традиционно выбор шрифтов веб-разработчиков была ограниченной. Существует только горсть шрифтов которые вы можете гарантировать, что они являются доступными во всех распространённых системах — так называемые Безопасные веб-шрифты. Вы можете использовать стек шрифта для указания предпочтительных шрифтов, за которыми следует веб-безопасные альтернативы, за которыми следует системный шрифт по умолчанию, но это добавляет дополнительной работы с точки зрения тестирования, чтобы убедиться, что ваш дизайн выглядит хорошо с каждым из шрифтов и т. д.
      
 
 
      Веб-шрифты
      
 
-
      Но есть альтернатива, которая работает очень хорошо начиная с 6-ой версии IE. Веб-шрифты — это функция CSS позволяющая вам указывать файлы шрифтов, загружаемые вместе с вашим веб-сайтом по мере доступа к нему, это означает, что любой браузер, поддерживающий веб-шрифты, может иметь в своём распоряжении именно те шрифты, которые вы укажете. Замечательно! Требуемый синтаксис выглядит примерно так:
      
+
      Но есть альтернатива, которая работает очень хорошо начиная с 6-ой версии IE. Веб-шрифты — это функция CSS позволяющая вам указывать файлы шрифтов, загружаемые вместе с вашим веб-сайтом по мере доступа к нему, это означает, что любой браузер, поддерживающий веб-шрифты, может иметь в своём распоряжении именно те шрифты, которые вы укажете. Замечательно! Требуемый синтаксис выглядит примерно так:
      Во-первых, у вас есть блок {{cssxref("@font-face")}} в начале CSS, который указывает файл(-ы) шрифтов для загрузки:
      
 
@@ -46,19 +46,19 @@ 
      Веб-шрифты
      
   src: url("myFont.woff");
 }
 
-
      Ниже вы можете использовать имя семейства шрифтов, указанное внутри @font-face, чтобы применить свой собственный шрифт ко всему, что вам нравится, как обычно:
      
+
      Ниже вы можете использовать имя семейства шрифтов, указанное внутри @font-face, чтобы применить свой собственный шрифт ко всему, что вам нравится, как обычно:
      html {
   font-family: "myFont", "Bitstream Vera Serif", serif;
 }
      
 
-
      Синтаксис становится немного сложнее, чем этот; мы вдадимся в подробности ниже.
      
+
      Синтаксис становится немного сложнее, чем этот; мы вдадимся в подробности ниже.
      
 
-
      Есть две важные вещи, которые нужно иметь в виду о веб-шрифтах:
      
+
      Есть две важные вещи, которые нужно иметь в виду о веб-шрифтах:
        
  
      1. Браузеры поддерживают разные форматы шрифтов, поэтому вам будут нужны несколько форматов шрифтов для приличной кросс-браузерной поддержки. Например, большинство современных браузеров поддерживают WOFF/WOFF2 (Web Open Font Format versions 1 and 2), наиболее эффективный формат, но старые версии IE поддерживают только шрифты EOT (Embedded Open Type) и вам возможно понадобиться включать версию SVG шрифта для поддержки старых версий браузеров iPhone и Android. Ниже мы покажем вам как генерировать требуемый код.
        2. 
- 
      2. В основном шрифты не бесплатны для использования. Вы должны платить за них и/или соблюдать другие условия лицензии такие как указание создателя шрифта в коде (или на вашем сайте). Вы не должны красть шрифты и использовать их без должного указания авторства.
        3. 
+ 
      3. В основном шрифты не бесплатны для использования. Вы должны платить за них и/или соблюдать другие условия лицензии такие как указание создателя шрифта в коде (или на вашем сайте). Вы не должны красть шрифты и использовать их без должного указания авторства.
        4. 
 
      
@@ -67,7 +67,7 @@ 
      Веб-шрифты
      
 
 
      Активное изучение: пример веб-шрифта
      
 
-
      Имея это в виду, давайте создадим базовый пример веб-шрифта из первых принципов. Сложно продемонстрировать это на встроенном живом примере, поэтому вместо, мы бы хотели, чтобы следовали детальным шагам в секциях ниже, чтобы понять идею процесса
      
+
      Имея это в виду, давайте создадим базовый пример веб-шрифта из первых принципов. Сложно продемонстрировать это на встроенном живом примере, поэтому вместо, мы бы хотели, чтобы следовали детальным шагам в секциях ниже, чтобы понять идею процесса
      
 
 
      Вы должны использовать файлы web-font-start.html и web-font-start.css как отправную точку добавляя в них ваш код (см. живой пример). Сейчас сделайте копию этих файлов в новой директории на вашем компьютере. В файле web-font-start.css вы найдёте некоторый минимальный CSS для работы с базовым макетом и вёрсткой примера.
      
 
@@ -76,14 +76,14 @@ 
      Поиск шрифтов
      
 
      В этом примере мы будем использовать два веб-шрифта, один для заголовков, и другой для основного текста. Для того чтобы начать нам необходимо найти файлы шрифтов, которые содержат эти шрифты. Шрифты созданы шрифтовыми "цехами" и хранятся в разных форматах фалов. Как правило существует три типа сайтов, где вы можете получить шрифты:
      
 
 
        
- 
      • Бесплатный дистрибьютер шрифтов: это сайт, который предоставляет бесплатные шрифты для скачивания (могут существовать некоторые условия лицензии, например, указание создателя шрифта). Примеры включают Font Squirrel, dafont, и Everything Fonts.
        • 
+ 
      • Бесплатный дистрибьютер шрифтов: это сайт, который предоставляет бесплатные шрифты для скачивания (могут существовать некоторые условия лицензии, например, указание создателя шрифта). Примеры включают Font Squirrel, dafont, и Everything Fonts.
        • 
  
      • Платный дистрибьютер шрифтов: это сайт, который предоставляет шрифты за плату, например fonts.com или myfonts.com. Также вы можете купить шрифты напрямую у производителя шрифтов, например Linotype, Monotype, или Exljbris.
        • 
  
      • Сервис онлайн шрифтов: это сайт, который предоставляет вам шрифты, делая весь процесс проще. Смотрите раздел Использование онлайн-сервиса шрифтов для более подробной информации.
        • 
 
      
 
 
      Давайте найдём какие-нибудь шрифты! Отправляйтесь на Font Squirrel и выберите два шрифта — симпатичный интересный шрифт для заголовков (может быть симпатично выглядящий или шрифт с засечками) и немного менее кричащий и более читабельный шрифт для параграфов. Когда вы найдёте каждый шрифт, нажмите на кнопку загрузки и сохраните файлы в той же директории, где ранее вы сохранили файлы HTML и CSS. Не имеет значения являются ли они TTF (True Type Fonts) или OTF (Open Type Fonts).
      
 
-
      В любом случае распакуйте архив со шрифтом (веб-шрифты обычно распространяются в ZIP файлах, содержащих файл(-ы) шрифта и лицензионную информацию). Вы можете обнаружить несколько файлов шрифтов в упаковке (архиве) — некоторые шрифты распространяются как семейство с различными доступными вариантами, например тонкий, средний, жирный, курсив, тонкий курсив и т.д. В этом примере мы просто хотим, чтобы вы позаботились о едином файле шрифта для каждого варианта.
      
+
      В любом случае распакуйте архив со шрифтом (веб-шрифты обычно распространяются в ZIP файлах, содержащих файл(-ы) шрифта и лицензионную информацию). Вы можете обнаружить несколько файлов шрифтов в упаковке (архиве) — некоторые шрифты распространяются как семейство с различными доступными вариантами, например тонкий, средний, жирный, курсив, тонкий курсив и т.д. В этом примере мы просто хотим, чтобы вы позаботились о едином файле шрифта для каждого варианта.
      
 
 
      
 
      Обратите внимание: В разделе "Find fonts" в колонке справа, вы можете кликать по различным тегам и классификациям чтобы отфильтровать отображаемые варианты для выбора.
      
@@ -94,7 +94,7 @@ 
      Генерация т
 
      Теперь вам надо будет сгенерировать требуемый код (и форматы шрифтов). Для каждого шрифта проделайте следующие шаги.
      
 
 
        
- 
      1. Убедитесь, что вы выполнили все лицензионные требования если вы собираетесь использовать это в коммерческих и/или веб проектах.
        2. 
+ 
      2. Убедитесь, что вы выполнили все лицензионные требования если вы собираетесь использовать это в коммерческих и/или веб проектах.
        3. 
  
      3. Перейдите на Fontsquirrel Webfont Generator.
        4. 
  
      4. Выгрузите два ваших файла шрифтов используя кнопку Upload Fonts.
        5. 
  
      5. Поставьте галочку отмеченную "Yes, the fonts I'm uploading are legally eligible for web embedding".
        6. 
@@ -108,7 +108,7 @@ 
        Реализаци
 
        Теперь распакуйте набор веб-шрифта, который вы только что сгенерировали. Внутри распакованной папки вы увидите три полезных элемента:
        
 
 
          
- 
        • несколько версий каждого шрифта (например .ttf, .woff, .woff2 и т.д.; предоставленные шрифты будут обновляться со временем по мере изменения требований поддержки браузера). Как упомянуто выше, несколько шрифтов нужны для кросс-браузерной поддержки — это метод Fontsquirrel быть уверенными что вы получили всё что вам надо.
          • 
+ 
        • несколько версий каждого шрифта (например .ttf, .woff, .woff2 и т.д.; предоставленные шрифты будут обновляться со временем по мере изменения требований поддержки браузера). Как упомянуто выше, несколько шрифтов нужны для кросс-браузерной поддержки — это метод Fontsquirrel быть уверенными что вы получили всё что вам надо.
          • 
  
        • Демо файл HTML для каждого шрифта — загрузите их в ваш браузер чтобы посмотреть, как будет выглядеть шрифт в разных контекстах использования.
          • 
  
        • Файл stylesheet.css, который содержит сгенерированный @font-face код который вам нужен.
          • 
 
        
@@ -124,7 +124,7 @@ 
        Реализаци
 
 
        font-family: 'zantrokeregular', serif;
        
 
-
        Вы должны получить демо-страницу с какими-то реализованными симпатичными шрифтами. Поскольку различные шрифты создаются в разных размерах, вам может понадобиться настроить размер, интервалы и т.д., чтобы отладить внешний вид.
        
+
        Вы должны получить демо-страницу с какими-то реализованными симпатичными шрифтами. Поскольку различные шрифты создаются в разных размерах, вам может понадобиться настроить размер, интервалы и т.д., чтобы отладить внешний вид.
        
 
 
        
 
@@ -144,7 +144,7 @@ 
        
  
      6. Для выбора семейства шрифтов нажмите на кнопку ⊕ рядом с ним.
        7. 
  
      7. Когда вы выбрали семейства шрифтов, нажмите на панель [Number] Families Selected в низу страницы.
        8. 
  
      8. На полученном экране, сначала вам надо скопировать строку показанного HTML кода и вставить её в head вашего HTML файла. Вставьте его выше существующего {{htmlelement("link")}} элемента для того, чтоб шрифт импортировался до того, как вы начнёте пользоваться им в вашем CSS.
        9. 
- 
      9. Далее вам надо скопировать CSS-объявления, перечисленные в вашем CSS, чтобы применить пользовательские шрифты к вашему HTML.
        10. 
+ 
      10. Далее вам надо скопировать CSS-объявления, перечисленные в вашем CSS, чтобы применить пользовательские шрифты к вашему HTML.
        11. 
 
      
 
 
      
@@ -172,16 +172,16 @@ 
      @font-face более детал
 
        
  
      • font-family: В этой строке указывается имя, которое вы хотите использовать для обозначения шрифта. Вы можете указать его как угодно, если вы используете его последовательно в вашем CSS.
        • 
  
      • src: В этой строке указывается путь к файлам шрифтов которые будут импортированы в ваш CSS (url путь) и формат каждого файла шрифта (format часть). Последняя часть в каждом случае опциональна, но полезно объявлять его, потому что это позволяет браузерам быстрее находить шрифт, который они могут использовать. Могут быть перечислены несколько объявлений, разделённых запятыми — браузер будет искать среди них и использовать первый который найдёт и тот который он понимает — поэтому лучше всего ставить новые, лучшие форматы такие как WOFF2 в начало, а старые, не такие хорошие форматы как TTF в конец. Единственное исключение это EOT шрифты — они размещены первыми чтобы исправить пару багов в старых версиях IE который постарается использовать первую вещь, которую найдёт, даже если он не умеет использовать этот шрифт.
        • 
- 
      • {{cssxref("font-weight")}}/{{cssxref("font-style")}}: В этих строках указывается какую толщину имеет шрифт и является ли он курсивом или нет. Если вы импортируете несколько значений толщины одного и того же шрифта вы можете указать какая у них толщина/стиль и затем использовать разные значения {{cssxref("font-weight")}}/{{cssxref("font-style")}} для выбора между ними, вместо того, чтобы называть всех разных членов семейства шрифтов разными именами. @font-face совет: установите font-weight и font-style так чтобы ваш CSS был простым от Роджера Джонсона (Roger Johansson) покажет, что делать более детально.
        • 
+ 
      • {{cssxref("font-weight")}}/{{cssxref("font-style")}}: В этих строках указывается какую толщину имеет шрифт и является ли он курсивом или нет. Если вы импортируете несколько значений толщины одного и того же шрифта вы можете указать какая у них толщина/стиль и затем использовать разные значения {{cssxref("font-weight")}}/{{cssxref("font-style")}} для выбора между ними, вместо того, чтобы называть всех разных членов семейства шрифтов разными именами. @font-face совет: установите font-weight и font-style так чтобы ваш CSS был простым от Роджера Джонсона (Roger Johansson) покажет, что делать более детально.
        • 
 
      
 
 
      
-
      Обратите внимание: вы также можете указать определённые значения {{cssxref("font-variant")}} и {{cssxref("font-stretch")}} для ваших веб-шрифтов. В новых браузерах вы также можете указать значение {{cssxref("unicode-range")}}, который является конкретным диапазоном символов, которые вы хотите использовать из веб-шрифта — в поддерживающих браузерах, будут загружены только указанные символы, сохраняя от ненужной загрузки. Creating Custom Font Stacks with Unicode-Range от Drew McLellan предоставляет некоторые полезные идеи того как это использовать
      
+
      Обратите внимание: вы также можете указать определённые значения {{cssxref("font-variant")}} и {{cssxref("font-stretch")}} для ваших веб-шрифтов. В новых браузерах вы также можете указать значение {{cssxref("unicode-range")}}, который является конкретным диапазоном символов, которые вы хотите использовать из веб-шрифта — в поддерживающих браузерах, будут загружены только указанные символы, сохраняя от ненужной загрузки. Creating Custom Font Stacks with Unicode-Range от Drew McLellan предоставляет некоторые полезные идеи того как это использовать
      
 
      
 
 
      Переменные шрифты
      
 
-
      В браузерах доступна новая технология, называемая переменными шрифтами — это шрифты, которые позволяют включить в единственный файл много разных вариантов дизайнов шрифтов, вместо того чтобы иметь отдельные файлы шрифтов для каждой ширины, толщины или стиля. Они несколько продвинуты для нашего курса для начинающих, но если вы хотите расширить свои знания и посмотреть на них, прочитайте наше Руководство по переменным шрифтам.
      
+
      В браузерах доступна новая технология, называемая переменными шрифтами — это шрифты, которые позволяют включить в единственный файл много разных вариантов дизайнов шрифтов, вместо того чтобы иметь отдельные файлы шрифтов для каждой ширины, толщины или стиля. Они несколько продвинуты для нашего курса для начинающих, но если вы хотите расширить свои знания и посмотреть на них, прочитайте наше Руководство по переменным шрифтам.
      
 
 
      Испытайте свои навыки!
      
 
@@ -189,7 +189,7 @@ 
      Испытайте свои 
 
 
      Заключение
      
 
-
      Теперь, когда вы ознакомились с нашими статьями об основах стилизации текста, пришло время проверить ваше понимание нашей оценкой модуля «Задание: стилизация школьного сайта».
      
+
      Теперь, когда вы ознакомились с нашими статьями об основах стилизации текста, пришло время проверить ваше понимание нашей оценкой модуля «Задание: стилизация школьного сайта».
      
 
 
      {{PreviousMenuNext("Learn/CSS/Styling_text/Styling_links", "Learn/CSS/Styling_text/Typesetting_a_homepage", "Learn/CSS/Styling_text")}}
      
 
diff --git a/files/ru/learn/forms/basic_native_form_controls/index.html b/files/ru/learn/forms/basic_native_form_controls/index.html
index bde62a8778d558..2baebf7b4d8ca2 100644
--- a/files/ru/learn/forms/basic_native_form_controls/index.html
+++ b/files/ru/learn/forms/basic_native_form_controls/index.html
@@ -606,7 +606,7 @@ 
      Image button
      
 
 
      http://foo.com?pos.x=123&pos.y=456
      
 
-
      This is a very convenient way to build a "hot map". How these values are sent and retrieved is detailed in the Sending and retrieving form data article.
      
+
      This is a very convenient way to build a "hot map". How these values are sent and retrieved is detailed in the Sending and retrieving form data article.
      
 
 
      Meters and progress bars
      
 
diff --git a/files/ru/learn/forms/how_to_structure_a_web_form/example/index.md b/files/ru/learn/forms/how_to_structure_a_web_form/example/index.md
index 3e424e63be5a15..04cfd6f7e136ca 100644
--- a/files/ru/learn/forms/how_to_structure_a_web_form/example/index.md
+++ b/files/ru/learn/forms/how_to_structure_a_web_form/example/index.md
@@ -47,21 +47,21 @@ This the example for a basic payment form for the article [How to structure an H
     
     
      
       
       
     
      
     
      
       
       
     
      
     
      
       
       
@@ -71,7 +71,7 @@ This the example for a basic payment form for the article [How to structure an H
     
      Payment information
      
     
      
       
       
     
      
     
      
       
diff --git a/files/ru/learn/forms/how_to_structure_a_web_form/index.html b/files/ru/learn/forms/how_to_structure_a_web_form/index.html
index f5345435669482..d26a623697fa23 100644
--- a/files/ru/learn/forms/how_to_structure_a_web_form/index.html
+++ b/files/ru/learn/forms/how_to_structure_a_web_form/index.html
@@ -240,7 +240,7 @@ 
      <input> с типом number для ввода номера карты. Последний виджет — это элемент <input> с типом date для указания даты окончания действия карты (должен будет появиться виджет с выбором даты или обычное текстовое поле в браузерах, не поддерживающих данные тип). Более новые типы полей описаны в статье The HTML5 input types.
      
+ 
    • Сейчас мы перейдём к второму разделу <section> нашей формы — платёжной информации. В этом разделе у нас есть три отдельных виджета формы со связанными с ними лейблами, находящимися внутри тега <p>. Первый — это выпадающее меню ({{htmlelement("select")}}) для выбора типа кредитной карты. Второй — это элемент <input> с типом number для ввода номера карты. Последний виджет — это элемент <input> с типом date для указания даты окончания действия карты (должен будет появиться виджет с выбором даты или обычное текстовое поле в браузерах, не поддерживающих данные тип). Более новые типы полей описаны в статье The HTML5 input types.
      
   
      
   Вставьте следующий код под предыдущим разделом:
   
      <section>
diff --git a/files/ru/learn/forms/sending_forms_through_javascript/index.html b/files/ru/learn/forms/sending_forms_through_javascript/index.html
index 5eddf1e04bdfc3..69e03b268a5bc8 100644
--- a/files/ru/learn/forms/sending_forms_through_javascript/index.html
+++ b/files/ru/learn/forms/sending_forms_through_javascript/index.html
@@ -6,7 +6,7 @@
 ---
 
      {{LearnSidebar}}
      
 
-
      HTML формы могут декларативно отправлять HTTP-запросы. Но формы также могут подготовить HTTP-запросы для отправки с помощью JavaScript, например при помощи XMLHttpRequest. В этой статье исследуются подобные подходы.
      
+
      HTML формы могут декларативно отправлять HTTP-запросы. Но формы также могут подготовить HTTP-запросы для отправки с помощью JavaScript, например при помощи XMLHttpRequest. В этой статье исследуются подобные подходы.
      
 
 
      Формы не всегда формы
      
 
diff --git a/files/ru/learn/forms/styling_web_forms/index.html b/files/ru/learn/forms/styling_web_forms/index.html
index 6969668ab6b637..ffa9a4e4ec2018 100644
--- a/files/ru/learn/forms/styling_web_forms/index.html
+++ b/files/ru/learn/forms/styling_web_forms/index.html
@@ -6,7 +6,7 @@
 ---
 
      {{LearnSidebar}}{{PreviousMenuNext("Learn/HTML/Forms/HTML_forms_in_legacy_browsers", "Learn/HTML/Forms/Advanced_styling_for_HTML_forms", "Learn/HTML/Forms")}}
      
 
-
      В этой статье Вы узнает, как использовать CSS с HTML-формами, чтобы сделать их (надеюсь) более красивыми. Удивительно, но это может быть немного сложнее. По историческим и техническим причинам виджеты форм плохо сочетаются с CSS. Из-за этих трудностей многие разработчики предпочитают создавать свои собственные HTML-виджеты, чтобы получить контроль над своим внешним видом. Однако в современных браузерах веб-дизайнеры все больше контролируют дизайн элементов формы. Давайте приступим!
      
+
      В этой статье Вы узнает, как использовать CSS с HTML-формами, чтобы сделать их (надеюсь) более красивыми. Удивительно, но это может быть немного сложнее. По историческим и техническим причинам виджеты форм плохо сочетаются с CSS. Из-за этих трудностей многие разработчики предпочитают создавать свои собственные HTML-виджеты, чтобы получить контроль над своим внешним видом. Однако в современных браузерах веб-дизайнеры все больше контролируют дизайн элементов формы. Давайте приступим!
      
 
 
      Почему так сложно стилизовать виджеты форм с помощью CSS?
      
 
diff --git a/files/ru/learn/front-end_web_developer/index.html b/files/ru/learn/front-end_web_developer/index.html
index 4a25f3a8b6b6d8..bc7c3f912eb5ae 100644
--- a/files/ru/learn/front-end_web_developer/index.html
+++ b/files/ru/learn/front-end_web_developer/index.html
@@ -87,7 +87,7 @@ 
      Основные модули
      
  
    • HTML таблицы (5–10 часов чтения/упражнений)
      • 
 
 
-
      Стилизация и размещение с помощью CSS
      
+
      Стилизация и размещение с помощью CSS
      
 
 
      Время завершения: 90–120 часов
      
 
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
index 973519d0a4259b..382b749723c6f1 100644
--- 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
@@ -45,7 +45,7 @@ 
      Анатомия HTML элеме
 
 
      
 
-
      Атрибуты содержат дополнительную информацию об элементе, которую вы не хотите показывать в фактическом контенте. В данном случае, class это имя атрибута, а editor-note это значение атрибута. Класс позволяет дать элементу идентификационное имя, которое может позже использоваться, чтобы обращаться к элементу с информацией о стиле и прочих вещах.
      
+
      Атрибуты содержат дополнительную информацию об элементе, которую вы не хотите показывать в фактическом контенте. В данном случае, class это имя атрибута, а editor-note это значение атрибута. Класс позволяет дать элементу идентификационное имя, которое может позже использоваться, чтобы обращаться к элементу с информацией о стиле и прочих вещах.
      
 
 
      Атрибут всегда должен иметь:
      
 
@@ -187,7 +187,7 @@ 
      Ссылки
      
  
    • Оберните текст в элемент {{htmlelement("a")}}, например так:
   
      <a>Манифест Mozilla</a>
      
  
      • 
- 
    • Задайте элементу {{htmlelement("a")}} атрибут href, например так:
+ 
    • Задайте элементу {{htmlelement("a")}} атрибут href, например так:
   
      <a href="">Манифест Mozilla</a>
      
  
      • 
  
    • Заполните значение этого атрибута веб-адресом, на который вы хотите указать ссылку:
diff --git a/files/ru/learn/getting_started_with_the_web/index.html b/files/ru/learn/getting_started_with_the_web/index.html
index f73a87737dbd9e..b048e42c32cee9 100644
--- a/files/ru/learn/getting_started_with_the_web/index.html
+++ b/files/ru/learn/getting_started_with_the_web/index.html
@@ -27,7 +27,7 @@ 
      Истор
 
 
      Необходимо много работать, чтобы создать профессиональный веб-сайт, так что, если вы новичок в веб-разработке, мы рекомендуем начать с малого. Вы не будете создавать ещё один Facebook прямо сейчас, но создать свой простой веб-сайт не так уж и сложно, так что мы начнём с этого.
      
 
-
      Прорабатывая статьи, перечисленные ниже по порядку, вы пройдёте путь от нуля до создания своей первой веб-страницы. Ну что, давайте начнём!
      
+
      Прорабатывая статьи, перечисленные ниже по порядку, вы пройдёте путь от нуля до создания своей первой веб-страницы. Ну что, давайте начнём!
      
 
 
      Установка базового программного обеспечения
      
 
@@ -65,5 +65,5 @@ 
      Смотрите также
      
 
 
        
  
      • Web Demystified(web обзор): большая серия видеороликов, объясняющая основы web, нацеленных на начинающих веб-разработчиков. Создано Жереми Патонье.
        • 
- 
      • The web and web standards (веб и веб стандарты): В этой статье приведена полезная информация о Вебе — как он появился, что такое технологии веб-стандартов, как они работают вместе, почему "веб-разработчик"  - это отличная карьера, и какие виды наилучшей практики вы узнаете в ходе курса.
        • 
+ 
      • The web and web standards (веб и веб стандарты): В этой статье приведена полезная информация о Вебе — как он появился, что такое технологии веб-стандартов, как они работают вместе, почему "веб-разработчик"  - это отличная карьера, и какие виды наилучшей практики вы узнаете в ходе курса.
        • 
 
      
diff --git a/files/ru/learn/getting_started_with_the_web/installing_basic_software/index.html b/files/ru/learn/getting_started_with_the_web/installing_basic_software/index.html
index 58c3a8002cadf0..78ad30e636f418 100644
--- a/files/ru/learn/getting_started_with_the_web/installing_basic_software/index.html
+++ b/files/ru/learn/getting_started_with_the_web/installing_basic_software/index.html
@@ -27,7 +27,7 @@ 
      Visual Studio Code, Notepad++, Sublime Text, Atom, GNU Emacs, или VIM) или гибридный редактор (например, Dreamweaver or WebStorm). Офисные редакторы не подходят для этого, поскольку они зависят от скрытых элементов, которые мешают движкам рендеринга, используемым веб-браузерами.
      • 
+ 
    • Текстовый редактор, чтобы писать код. Это может быть текстовый редактор (например, Visual Studio Code, Notepad++, Sublime Text, Atom, GNU Emacs, или VIM) или гибридный редактор (например, Dreamweaver or WebStorm). Офисные редакторы не подходят для этого, поскольку они зависят от скрытых элементов, которые мешают движкам рендеринга, используемым веб-браузерами.
      • 
  
    • Веб-браузеры, для тестирования кода. В настоящее время наиболее часто используемые браузеры это Firefox, Chrome, Opera, Safari, и Internet Explorer. Вы также должны тестировать ваш сайт на то, как он работает на мобильных устройствах и на любых старых браузерах, которые ваша целевая аудитория может все ещё широко использовать (например, IE 6-8). Lynx, текстовый веб-браузер для терминала, отлично подходит для того, чтобы увидеть, как ваш сайт воспринимается слабовидящими пользователями.
      • 
  
    • Графический редактор, такие как The Gimp, Paint.NET, или Photoshop, чтобы создавать изображения для ваших веб-страниц.
      • 
  
    • Система контроля версий, чтобы управлять файлами на сервере, для совместной работы над проектом с командой, обмениваться кодом и избегать редакторских конфликтов. Сейчас Git является наиболее популярным инструментом контроля версий, и репозиторий кода Github, основанный на Git, также является очень популярным.
      • 
@@ -45,7 +45,7 @@ 
      Устано
 
 
      У вас, наверное, уже есть базовый текстовый редактор на вашем компьютере. По умолчанию Windows включает Блокнот и Mac OS X поставляется с TextEdit. Linux дистрибутивы варьируются; Ubuntu поставляется с gedit по умолчанию.
      
 
-
      Для веб-разработки вам, вероятно, понадобится больше, чем могут предложить Notepad или TextEdit. Мы рекомендуем начать с  Visual Studio Code, который является бесплатным редактором, который предлагает предварительный просмотр и подсказки во время написания кода.
      
+
      Для веб-разработки вам, вероятно, понадобится больше, чем могут предложить Notepad или TextEdit. Мы рекомендуем начать с  Visual Studio Code, который является бесплатным редактором, который предлагает предварительный просмотр и подсказки во время написания кода.
      
 
 
      Установка современных веб-браузеров
      
 
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
index 05309b8b950caf..4945da9b71aacf 100644
--- 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
@@ -79,7 +79,7 @@ 
      Ускор
 
 
      Переменные
      
 
-
      {{Glossary("Variable", "Переменные")}} — это контейнеры, внутри которых вы можете хранить значения. Вы начинаете с того, что объявляете переменную с помощью ключевого слова var (не рекомендуется, продолжайте читать, чтобы получить объяснения) или let, за которым следует любое имя, которым вы захотите её назвать:
      
+
      {{Glossary("Variable", "Переменные")}} — это контейнеры, внутри которых вы можете хранить значения. Вы начинаете с того, что объявляете переменную с помощью ключевого слова var (не рекомендуется, продолжайте читать, чтобы получить объяснения) или let, за которым следует любое имя, которым вы захотите её назвать:
      
 
 
      let myVariable;
      
 
@@ -366,7 +366,7 @@ 
      function setUserName() {
   var myName = prompt('Please enter your name.');
   localStorage.setItem('name', myName);
-  myHeading.textContent = 'Mozilla is cool, ' + myName;
+  myHeading.textContent = 'Mozilla is cool, ' + myName;
 }
      
   Эта функция содержит функцию prompt(), которая вызывает диалоговое окно, немного похожее на alert() кроме того, что prompt() просит пользователя ввести некоторые данные, и сохраняет эти данные в переменной, после того как пользователь нажимает OK. В данном случае, мы просим пользователя ввести его имя. Далее, мы вызываем API под названием localStorage, который позволяет нам хранить данные в браузере и извлекать их позднее. Мы используем функцию setItem() из localStorage для создания и хранения данных в свойстве под названием 'name', и устанавливаем это значение в переменную myName, которая содержит имя введённое пользователем. В конце мы устанавливаем textContent заголовку в виде строки и имени пользователя.
      • 
  
    • Затем добавьте блок if ... else - мы могли бы назвать это кодом инициализации, поскольку он структурирует приложение при его первой загрузке:
@@ -374,7 +374,7 @@ 
      textContent = 'Mozilla is cool, ' + storedName;
+  myHeading.textContent = 'Mozilla is cool, ' + storedName;
 }
   Этот блок сначала использует оператор отрицания (логическое НЕ, представленное в виде !) чтобы проверить, существуют ли данные в пункте name. Если нет, то функция setUserName() запускается для их создания. Если данные существуют (то есть, пользователь установил его во время предыдущего посещения), мы извлекаем сохранённое имя, с помощью getItem() и устанавливаем textContent заголовку в виде строки плюс имя пользователя, так же, как мы делали внутри setUserName().
      • 
  
    • Наконец, установите обработчик события onclick на кнопку. При нажатии кнопки запускается функция setUserName(). Это позволяет пользователю установить новое имя, всякий раз, когда он захочет, нажатием кнопки:
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
index 3a10e796aa3f23..998a53e41ebdb1 100644
--- 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
@@ -104,7 +104,7 @@ 
      Загрузка 
 
      Примечание: вы также можете использовать графический пользовательский интерфейс Git для этих же целей, если вам не удобно работать с командной строкой.
      
 
      • 
 
-
      У всех операционных систем есть командная строка:
      
+
      У всех операционных систем есть командная строка:
      
 
 
        
  
      • Windows: Командная строка. Чтобы открыть её нажмите клавишу Windows, затем введите Командная строка в поле поиска, и выберите её в появившемся списке. Заметьте, что Windows имеет свои собственные соглашения команд, отличные от Linux и OS X, поэтому приведённые ниже команды могут отличаться на вашем компьютере.
        • 
diff --git a/files/ru/learn/html/howto/index.html b/files/ru/learn/html/howto/index.html
index a34324e85727c1..9e3a271462775a 100644
--- a/files/ru/learn/html/howto/index.html
+++ b/files/ru/learn/html/howto/index.html
@@ -151,4 +151,4 @@ 
        Производительност
 
      
 
      
 
-
       
      
+
           
      
diff --git a/files/ru/learn/html/introduction_to_html/advanced_text_formatting/index.html b/files/ru/learn/html/introduction_to_html/advanced_text_formatting/index.html
index 1ec8ce0aa37abd..93bc11390c9d55 100644
--- a/files/ru/learn/html/introduction_to_html/advanced_text_formatting/index.html
+++ b/files/ru/learn/html/introduction_to_html/advanced_text_formatting/index.html
@@ -622,7 +622,7 @@ 
      Разметка време
 
 
      HTML также содержит элемент {{htmlelement ("time")}} для отметки времени и дат в машиночитаемом формате. Например:
      
 
-
      <time datetime="2020-01-20">20 Января 2020</time>
      
+
      <time datetime="2020-01-20">20 Января 2020</time>
      
 
 
      Почему это полезно? Ну, есть много разных способов, которыми люди записывают даты. Вышеуказанная дата может быть записана как:
      
 
@@ -632,8 +632,8 @@ 
      Разметка време
  
    • Янв 20 2020
      • 
  
    • 20/01/20
      • 
  
    • 01/20/20
      • 
- 
    • 20e Janvier 2020
      • 
- 
    • 2020年1月20日
      • 
+ 
    • 20e Janvier 2020
      • 
+ 
    • 2020年1月20日
      • 
  
    • и другое...
      • 
 
 
@@ -642,21 +642,21 @@ 
      Разметка време
 
      В приведённом выше базовом примере приведена простая машиносчитываемая дата, но есть много других возможных вариантов, например:
      
 
 
      <!-- Стандартная дата -->
-<time datetime="2020-01-20">20 Января 2020</time>
+<time datetime="2020-01-20">20 Января 2020</time>
 <!-- Только год и месяц -->
-<time datetime="2020-01">Январь 2020</time>
+<time datetime="2020-01">Январь 2020</time>
 <!-- Только месяц и день -->
-<time datetime="01-20">20 Января</time>
+<time datetime="01-20">20 Января</time>
 <!-- Только время, часы и минуты -->
-<time datetime="19:30">19:30</time>
+<time datetime="19:30">19:30</time>
 <!-- Также вы можете отобразить секунды и миллисекунды! -->
-<time datetime="19:30:01.856">19:30:01.856</time>
+<time datetime="19:30:01.856">19:30:01.856</time>
 <!-- Дата и время -->
-<time datetime="2020-01-20T19:30">7.30pm, 20 Января 2020</time>
+<time datetime="2020-01-20T19:30">7.30pm, 20 Января 2020</time>
 <!-- Дата и время со смещением по часовому поясу -->
-<time datetime="2020-01-20T19:30+01:00">7.30pm, 20 Января 2020, — это 8.30pm во Франции.</time>
+<time datetime="2020-01-20T19:30+01:00">7.30pm, 20 Января 2020, — это 8.30pm во Франции.</time>
 <!-- Вызов номера недели -->
-<time datetime="2020-W04">Четвёртая неделя 2020</time>
      
+<time datetime="2020-W04">Четвёртая неделя 2020</time>
 
 
      Заключение
      
 
diff --git a/files/ru/learn/html/introduction_to_html/creating_hyperlinks/index.html b/files/ru/learn/html/introduction_to_html/creating_hyperlinks/index.html
index 9b421a8c98bd16..288d95eef6acee 100644
--- a/files/ru/learn/html/introduction_to_html/creating_hyperlinks/index.html
+++ b/files/ru/learn/html/introduction_to_html/creating_hyperlinks/index.html
@@ -19,13 +19,13 @@
 
 
      {{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Learn/HTML/Introduction_to_HTML")}}
      
 
-
      Гиперссылки действительно важны — они делают Интернет Интернетом. В этой статье представлен синтаксис, необходимый для создания ссылки,  а также обсуждаются лучшие практики обращения со ссылками.
      
+
      Гиперссылки действительно важны — они делают Интернет Интернетом. В этой статье представлен синтаксис, необходимый для создания ссылки,  а также обсуждаются лучшие практики обращения со ссылками.
      
  
 
 
 
 
 
 
 
 
 
 
      
-   
+   
@@ -36,19 +36,19 @@
 
 
      Что такое гиперссылка?
      
 
-
      Гиперссылки — одно из самых интересных нововведений Интернета. Они были особенностью Сети с самого начала, но именно они превращают Интернет в Интернет. Они позволяют нам связывать наши документы с любым другим документом (или ресурсом), с которым мы хотим. С их помощью мы также можем связывать документы с их конкретными частями, и мы можем сделать приложения доступными на простом веб-адресе (сравните это с локальными приложениями, которые должны быть установлены, и другими такими же вещами). Почти любой веб-контент может быть преобразован в ссылку, так что когда вы кликаете по ней (или иным образом активируете), она заставляет веб-браузер перейти на другой веб-адрес ({{glossary("URL")}}.)
      
+
      Гиперссылки — одно из самых интересных нововведений Интернета. Они были особенностью Сети с самого начала, но именно они превращают Интернет в Интернет. Они позволяют нам связывать наши документы с любым другим документом (или ресурсом), с которым мы хотим. С их помощью мы также можем связывать документы с их конкретными частями, и мы можем сделать приложения доступными на простом веб-адресе (сравните это с локальными приложениями, которые должны быть установлены, и другими такими же вещами). Почти любой веб-контент может быть преобразован в ссылку, так что когда вы кликаете по ней (или иным образом активируете), она заставляет веб-браузер перейти на другой веб-адрес ({{glossary("URL")}}.)
      
-
      Примечание: URL-адрес может указывать на файлы HTML, текстовые файлы, изображения, текстовые документы, видео и аудиофайлы и все остальное, что может жить в Интернете. Если веб-браузер не знает, как отображать или обрабатывать файл, он спросит вас, хотите ли вы открыть файл (в этом случае обязанность открытия или обработки файла передаётся в соответствующее локальное приложение на устройстве) или загрузить файл (в этом случае вы можете попытаться разобраться с ним позже).
      
+
      Примечание: URL-адрес может указывать на файлы HTML, текстовые файлы, изображения, текстовые документы, видео и аудиофайлы и все остальное, что может жить в Интернете. Если веб-браузер не знает, как отображать или обрабатывать файл, он спросит вас, хотите ли вы открыть файл (в этом случае обязанность открытия или обработки файла передаётся в соответствующее локальное приложение на устройстве) или загрузить файл (в этом случае вы можете попытаться разобраться с ним позже).
      
 
      
 
-
      Например, домашняя страница BBC содержит большое количество ссылок, которые указывают не только на множество новостей, но и на различные области сайта (меню), страницы входа / регистрации (пользовательские инструменты) и многое другое.
      
+
      Например, домашняя страница BBC содержит большое количество ссылок, которые указывают не только на множество новостей, но и на различные области сайта (меню), страницы входа / регистрации (пользовательские инструменты) и многое другое.
      frontpage of bbc.co.uk, showing many news items, and navigation menu functionality
      Анатомия ссылки
      
 
-
      Простая ссылка создаётся путём обёртывания текста (или другого содержимого, смотрите  Ссылки-блоки), который вы хотите превратить в ссылку, в элемент {{htmlelement ("a")}}, и придания этому элементу атрибута {{htmlattrxref ("href", "a")}} (который также известен как гипертекстовая ссылка, или цель), который будет содержать веб-адрес, на который вы хотите указать ссылку.
      
+
      Простая ссылка создаётся путём обёртывания текста (или другого содержимого, смотрите  Ссылки-блоки), который вы хотите превратить в ссылку, в элемент {{htmlelement ("a")}}, и придания этому элементу атрибута {{htmlattrxref ("href", "a")}} (который также известен как гипертекстовая ссылка, или цель), который будет содержать веб-адрес, на который вы хотите указать ссылку.
      <p>Я создал ссылку на
   <a href="https://www.mozilla.org/ru/">домашнюю страницу Mozilla</a>.
@@ -111,7 +111,7 @@ 
      пока они находятся в разных местах файловой системы.  Многие веб-сайты так делают. Второй index.html, возможно, будет главной лендинг-страницей для связанной с проектом информации.
      
+
      В корне есть ещё два каталога —  pdfs и projects. У каждого из них есть один файл внутри — project-brief.pdf и index.html, соответственно. Обратите внимание на то, что вы можете довольно успешно иметь два index.html файла в одном проекте, пока они находятся в разных местах файловой системы.  Многие веб-сайты так делают. Второй index.html, возможно, будет главной лендинг-страницей для связанной с проектом информации.
      
 
 
        
  
      • 
@@ -123,7 +123,7 @@ 
        ), указывающую на projects/index.html, вам нужно спуститься ниже в директории projects перед тем, как указать файл, который вы хотите. Это делается путём указания имени каталога, после которого идёт слеш и затем имя файла. Итак, URL-адрес, который вы используете - projects/index.html:
        
+  
        Перемещение вниз в подкаталоги: Если вы хотите подключить ссылку внутри index.html (верхний уровень index.html), указывающую на projects/index.html, вам нужно спуститься ниже в директории projects перед тем, как указать файл, который вы хотите. Это делается путём указания имени каталога, после которого идёт слеш и затем имя файла. Итак, URL-адрес, который вы используете - projects/index.html:
        
 
   
        <p>Посетите мою
   <a href="projects/index.html">домашнюю страницу проекта</a>.
@@ -427,7 +427,7 @@ 
        В этом модуле
        
     
        
    
    
      
-   
+   
      
  
   
      
    Предварительные требования:Базовое знакомство с HTML, описанное в статье Начало работы c HTML. Форматирование текста в HTML, описанное в статье Основы редактирования текста в HTML.Базовое знакомство с HTML, описанное в статье Начало работы c HTML. Форматирование текста в HTML, описанное в статье Основы редактирования текста в HTML.
   
      
   
      
    Задача:
 
 
 
 
 
 
 
 Options : History : Feedback : DonateCloseClose
   
      
        
 
      
diff --git a/files/ru/learn/html/introduction_to_html/debugging_html/index.html b/files/ru/learn/html/introduction_to_html/debugging_html/index.html
index ddaeae8760e23f..127deab215eef4 100644
--- a/files/ru/learn/html/introduction_to_html/debugging_html/index.html
+++ b/files/ru/learn/html/introduction_to_html/debugging_html/index.html
@@ -157,7 +157,7 @@ 
      Работа
 
 
      Если некоторые ошибки кажутся вам странными, начните исправление с остальных и проверьте документ ещё раз. Иногда одна ошибка ломает большую часть документа.
      
 
-
      Когда вы увидите эту надпись, в вашем документе больше нет ошибок:
      
+
      Когда вы увидите эту надпись, в вашем документе больше нет ошибок:
      
 
 
      Banner that reads "The document validates according to the specified schema(s) and to additional constraints checked by the validator."
      
 
diff --git a/files/ru/learn/html/introduction_to_html/document_and_website_structure/index.html b/files/ru/learn/html/introduction_to_html/document_and_website_structure/index.html
index 62e1c172657fa9..926ac0b6ba3351 100644
--- a/files/ru/learn/html/introduction_to_html/document_and_website_structure/index.html
+++ b/files/ru/learn/html/introduction_to_html/document_and_website_structure/index.html
@@ -248,7 +248,7 @@ 
      Плани
 
      Когда вы уже спланировали содержание одной веб-страницы, следующий логический шаг — продумать содержание всего веб-сайта: какие страницы нужны, как они будут устроены и связаны друг с другом для лучшего восприятия пользователем. Это называется {{glossary("Information architecture")}}. В большом, сложном веб-сайте на планирование может уходить много времени, однако спроектировать простой веб-сайт из нескольких страниц может быть очень легко и весело!
      
 
 
        
- 
      1. Имейте в виду, что у вас будет несколько элементов, общих для большинства (если не всех) страниц — например, меню навигации и содержимого нижнего колонтитула. Например, для сайта компании хорошая идея разместить контактные данные в нижнем колонтитуле на каждой странице. Составьте список элементов, общих для всех страниц. the common features of the travel site to go on every page: title and logo, contact, copyright, terms and conditions, language chooser, accessibility policy
        2. 
+ 
      2. Имейте в виду, что у вас будет несколько элементов, общих для большинства (если не всех) страниц — например, меню навигации и содержимого нижнего колонтитула. Например, для сайта компании хорошая идея разместить контактные данные в нижнем колонтитуле на каждой странице. Составьте список элементов, общих для всех страниц. the common features of the travel site to go on every page: title and logo, contact, copyright, terms and conditions, language chooser, accessibility policy
        3. 
  
      3. Теперь набросайте структуру страниц (можно взять за образец наш простой дизайн, приведённый раннее). Что находится в этих блоках?A simple diagram of a sample site structure, with a header, main content area, two optional sidebars, and footer
        4. 
  
      4. Теперь составьте список остальной (уникальной для каждой страницы) информации, которую вы разместите на сайте.A long list of all the features that we could put on our travel site, from searching, to special offers and country-specific info
        5. 
  
      5. Сгруппируйте информацию по темам. Какие части можно разместить на одной странице? Это похоже на метод {{glossary("Card sorting")}}. The items that should appear on a holiday site sorted into 5 categories: Search, Specials, Country-specific info, Search results, and Buy things
        6. 
@@ -267,7 +267,7 @@ 
        Заключение
        
 
-
        Вы стали лучше понимать, как структурировать веб-страницу или сайт. В последней статье этого модуля мы узнаем, как отлаживать HTML.
        
+
        Вы стали лучше понимать, как структурировать веб-страницу или сайт. В последней статье этого модуля мы узнаем, как отлаживать HTML.
        
 
 
        Дополнительные материалы
        
 
diff --git a/files/ru/learn/html/introduction_to_html/html_text_fundamentals/index.html b/files/ru/learn/html/introduction_to_html/html_text_fundamentals/index.html
index 9151cd1ebabed2..201b31113e25a4 100644
--- a/files/ru/learn/html/introduction_to_html/html_text_fundamentals/index.html
+++ b/files/ru/learn/html/introduction_to_html/html_text_fundamentals/index.html
@@ -15,11 +15,10 @@
 translation_of: Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals
 original_slug: Learn/HTML/Введение_в_HTML/HTML_text_fundamentals
 ---
-
        
+
 
         {{LearnSidebar}}
        
 
 
        {{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML")}}
        
-
        
 
 
        Одна из основных задач HTML — придавать тексту структуру и смысл, {{glossary("семантику")}}, так, чтобы браузер смог отобразить текст корректно. Эта статья покажет, как можно использовать {{glossary("HTML")}}, чтобы упорядочить текст на странице путём добавления заголовков и абзацев, выделения слов, создания списков и многое другое.
        
 
@@ -80,36 +79,35 @@ 
        Созд
 
          
  
        • Предпочтительнее использовать <h1> только один раз на странице — это заголовок самого верхнего уровня, и все остальные заголовки располагаются ниже его в иерархии.
          • 
  
        • Убедитесь, что вы используете заголовки в правильном порядке в иерархии.  Не используйте <h3> для создания подзаголовков при одновременном использовании <h2> для представления под-подзаголовков — это не имеет смысла и приведёт к странным результатам.
          • 
- 
        • Из шести доступных уровней заголовка вы должны стремиться использовать не более трёх на странице, если только вы не чувствуете, что это необходимо. Документы с большим количеством уровней (то есть с глубокой иерархией) становятся громоздкими и трудными для навигации. В таких случаях рекомендуется распределять контент по нескольким страницам, если это возможно.
          • 
+ 
        • Из шести доступных уровней заголовка вы должны стремиться использовать не более трёх на странице, если только вы не чувствуете, что это необходимо. Документы с большим количеством уровней (то есть с глубокой иерархией) становятся громоздкими и трудными для навигации. В таких случаях рекомендуется распределять контент по нескольким страницам, если это возможно.
          • 
 
        
 
 
        Зачем нам необходима структура?
        
 
-
        Чтобы ответить на этот вопрос, давайте посмотрим на  text-start.html — отправную точку нашего примера для этой статьи (хороший рецепт хумуса). Вы должны сохранить копию этого файла на своём локальном компьютере, так как вам понадобится это для упражнений позже. Сейчас тело этого документа содержит несколько фрагментов контента — они не отмечены каким-либо образом, но они разделены разрывами строк (был нажат Enter / Return  для перехода на следующую строку).
        
+
        Чтобы ответить на этот вопрос, давайте посмотрим на  text-start.html — отправную точку нашего примера для этой статьи (хороший рецепт хумуса). Вы должны сохранить копию этого файла на своём локальном компьютере, так как вам понадобится это для упражнений позже. Сейчас тело этого документа содержит несколько фрагментов контента — они не отмечены каким-либо образом, но они разделены разрывами строк (был нажат Enter / Return  для перехода на следующую строку).
        
 
-
        Однако, когда вы откроете документ в своём браузере, вы увидите, что текст выглядит как один большой кусок!
        
+
        Однако, когда вы откроете документ в своём браузере, вы увидите, что текст выглядит как один большой кусок!
        
 
 
        A webpage that shows a wall of unformatted text, because there are no elements on the page to structure it.
        
 
-
        Это связано с тем, что нет элементов для создания структуры контента, поэтому браузер не знает, где здесь заголовок и где абзац. Более того:
        
+
        Это связано с тем, что нет элементов для создания структуры контента, поэтому браузер не знает, где здесь заголовок и где абзац. Более того:
        
 
 
          
- 
        • Пользователи, просматривающие веб-страницу, быстро сканируют её в поиске подходящего контента, часто просто просматривая только заголовки  (мы обычно тратим очень мало времени на веб-странице). Если они не смогут увидеть ничего полезного в течение нескольких секунд, они, скорее всего, расстроятся и отправятся куда-нибудь ещё.
          • 
- 
        • Поисковые системы, индексирующие вашу страницу, считают содержание заголовков важными ключевыми словами для влияния на ранжирование поиска страницы. Без заголовков ваша страница будет плохо работать с точки зрения {{glossary("SEO")}} (Search Engine Optimization — поисковая оптимизация).
          • 
- 
        • Сильно слабовидящие люди часто не читают веб-страницы — они слушают их вместо этого. Это делается с помощью программного обеспечения, называемого программой чтения с экрана. Это программное обеспечение предоставляет способы быстрого доступа к данному текстовому контенту. Среди различных используемых методов они предоставляют схему документа, считывая заголовки, позволяя своим пользователям быстро находить нужную им информацию. Если заголовки недоступны, они будут вынуждены слушать весь документ вслух.
          • 
- 
        • Чтобы стилизовать контент с помощью {{glossary ("CSS")}} или сделать его интересным с помощью {{glossary ("JavaScript")}}, вам нужно, чтобы элементы обёртывали соответствующий контент, чтобы CSS и JavaScript смогли эффективно работать.
          • 
+ 
        • Пользователи, просматривающие веб-страницу, быстро сканируют её в поиске подходящего контента, часто просто просматривая только заголовки  (мы обычно тратим очень мало времени на веб-странице). Если они не смогут увидеть ничего полезного в течение нескольких секунд, они, скорее всего, расстроятся и отправятся куда-нибудь ещё.
          • 
+ 
        • Поисковые системы, индексирующие вашу страницу, считают содержание заголовков важными ключевыми словами для влияния на ранжирование поиска страницы. Без заголовков ваша страница будет плохо работать с точки зрения {{glossary("SEO")}} (Search Engine Optimization — поисковая оптимизация).
          • 
+ 
        • Сильно слабовидящие люди часто не читают веб-страницы — они слушают их вместо этого. Это делается с помощью программного обеспечения, называемого программой чтения с экрана. Это программное обеспечение предоставляет способы быстрого доступа к данному текстовому контенту. Среди различных используемых методов они предоставляют схему документа, считывая заголовки, позволяя своим пользователям быстро находить нужную им информацию. Если заголовки недоступны, они будут вынуждены слушать весь документ вслух.
          • 
+ 
        • Чтобы стилизовать контент с помощью {{glossary ("CSS")}} или сделать его интересным с помощью {{glossary ("JavaScript")}}, вам нужно, чтобы элементы обёртывали соответствующий контент, чтобы CSS и JavaScript смогли эффективно работать.
          • 
 
        
 
-
        Поэтому нужно дать структурную разметку нашему контенту.
        
+
        Поэтому нужно дать структурную разметку нашему контенту.
        
 
 
        Активное изучение: создание структуры для нашего контента
        
 
-
        Давайте рассмотрим это на живом примере. В приведённом ниже примере добавьте элементы в исходный текст в поле «Редактируемый код», чтобы он отображался как заголовок и два абзаца в поле «Результат».
        
+
        Давайте рассмотрим это на живом примере. В приведённом ниже примере добавьте элементы в исходный текст в поле «Редактируемый код», чтобы он отображался как заголовок и два абзаца в поле «Результат».
        
 
-
        Если вы допустили ошибку, вы всегда можете сбросить её с помощью кнопки Сбросить. Если вы застряли, нажмите кнопку Показать решение, чтобы увидеть ответ.
        
+
        Если вы допустили ошибку, вы всегда можете сбросить её с помощью кнопки Сбросить. Если вы застряли, нажмите кнопку Показать решение, чтобы увидеть ответ.
        
 
 
    
  
  
  • Если мы посмотрим на строку 86 в нашем редакторе кода, мы найдём эту строку:
-  
    guessSubmit.addeventListener('click', checkGuess);
    
+  
    guessSubmit.addeventListener('click', checkGuess);
    
  
    • 
  
  • В сообщении об ошибке говорится, что «guessSubmit.addeventListener не является функцией», поэтому мы, вероятно, где-то ошиблись. Если вы не уверены в правильности написания синтаксиса, часто бывает полезно найти функцию на MDN. Лучший способ сделать это в настоящее время — поиск «mdn имя-функции» в вашей любимой поисковой системе. Вот ссылка, которая поможет сократить вам некоторое время в данном случае: addEventListener().
    • 
  
  • Итак, глядя на эту страницу, кажется, что ошибка в том, что мы неправильно назвали имя функции! Помните, что JavaScript чувствителен к регистру, поэтому любые незначительные отличия в орфографии или регистре текста могут вызвать ошибку. Изменение этого параметра в addEventListener должно быть исправлено. Сделайте это сейчас.
    • 
@@ -94,10 +94,10 @@ 
    Си
   
    Примечание: Эта ошибка не появилась, как только страница была загружена, потому что эта ошибка произошла внутри функции (внутри checkGuess() { ... } block). Об этом вы узнаете более подробно в нашей более поздней статье о функциях, код внутри функций выполняется в отдельной области для кода внешних функций. В этом случае код не был запущен, и ошибка не была брошена до тех пор, пока функция checkGuess() не была запущена строкой 86.
    
  
  
  • Посмотрите на строку 78, и вы увидите следующий код:
-  
    lowOrHi.textContent = «Последнее предположение было слишком высоко!»;
    
+  
    lowOrHi.textContent = «Последнее предположение было слишком высоко!»;
    
  
    • 
  
  • Эта строка пытается установить свойство textContent переменной lowOrHi как текстовую строку, но это не работает, поскольку lowOrHi не содержит того, что должна. Давайте посмотрим, почему так происходит — попробуйте найти другие экземпляры lowOrHi в коде. Самый ранний экземпляр, который вы найдёте в JavaScript, находится в строке 48:
-  
    const lowOrHi = document.querySelector('lowOrHi');
    
+  
    const lowOrHi = document.querySelector('lowOrHi');
    
  
    • 
  
  • На этом этапе мы пытаемся заставить переменную содержать ссылку на элемент документа HTML. Давайте проверим, является ли значение  null после выполнения этой строки. Добавьте следующий код в строку 49:
   
    console.log(lowOrHi);
@@ -151,19 +151,19 @@ 
    Работаем через л
 
 
    Чтобы исправить это, давайте рассмотрим как работает строка. Первое, мы вызываем Math.random(), который генерирует случайное десятичное число, между 0 и 1, например 0.5675493843.
    
 
-
    Math.random()
    
+
    Math.random()
    
 
 
    Дальше, мы передаём результат вызова Math.random() через Math.floor(), который округляет число вниз, до ближайшего целого числа. Затем мы добавляем 1 к данному результату:
    
 
-
    Math.floor(Math.random()) + 1;
    
+
    Math.floor(Math.random()) + 1;
    
 
 
    Округление случайного десятичного числа к меньшему, всегда будет возвращать 0, так что добавление к нему единицы будет возвращать всегда 1.  Нам нужно умножить случайное число на 100, прежде чем мы округлим его к меньшему. Следующая строка вернёт нам случайное число между 0 и 99:
    
 
-
    Math.floor(Math.random() * 100);
    
+
    Math.floor(Math.random() * 100);
    
 
 
    поэтому нам нужно добавить 1, чтоб нам возвращалось случайное число между 1 и 100:
    
 
-
    Math.floor(Math.random() * 100) + 1;
    
+
    Math.floor(Math.random() * 100) + 1;
    
 
 
    А теперь, исправьте обе строки с ошибками, затем сохраните и обновите, игра должна работать так, как мы и планировали!
    
 
@@ -171,15 +171,15 @@ 
    Другие
 
 
    Существуют и другие распространённые ошибки, которые вы обнаружите в своём коде. В этом разделе показано большинство из них.
    
 
-
    SyntaxError: отсутствует ; перед постановкой
    
+
    SyntaxError: отсутствует ; перед постановкой
    
 
 
    Эта ошибка обычно означает что вы упустили точку с запятой в конце одной из ваших строк кода, но иногда ошибка может быть более загадочной. Например, если мы изменим эту строку внутри функции checkGuess() :
    
 
-
    var userGuess = Number(guessField.value);
    
+
    var userGuess = Number(guessField.value);
    
 
 
    на эту
    
 
-
    var userGuess === Number(guessField.value);
    
+
    var userGuess === Number(guessField.value);
    
 
 
    Это вызовет данную ошибку, потому что браузер подумает, что вы пытались сделать что-то другое. Вы должны быть уверены, что вы не перепутали оператор присваивания (=), который присваивает значение переменной — с оператором сравнения (===), который строго сравнивает операнды, и возвращает true/false .
    
 
@@ -191,15 +191,15 @@ 
    if (userGuess === randomNumber) {
    
+
    if (userGuess === randomNumber) {
    
 
 
    на эту
    
 
-
    if (userGuess = randomNumber) {
    
+
    if (userGuess = randomNumber) {
    
 
 
    мы всегда будем получать true, заставляя программу сообщать, что игра была выиграна. Будьте осторожны!
    
 
-
    SyntaxError: отсутствует ) после списка аргументов
    
+
    SyntaxError: отсутствует ) после списка аргументов
    
 
 
    Эта ошибка проста — обычно она означает, что вы пропустили закрывающую скобку с конца вызова функции / метода.
    
 
@@ -211,12 +211,12 @@ 
    SyntaxError: missing : after prop
 
 
    Эта ошибка обычно связана с неправильно сформированным объектом JavaScript, но в этом случае нам удалось получить её, изменив
    
 
-
    function checkGuess() {
    
+
    function checkGuess() {
    
 
 
    на
    
 
-
    function checkGuess( {
-
    
+
    function checkGuess( {
+
    
 
 
    Это заставило браузер думать, что мы пытаемся передать содержимое функции в функцию в качестве аргумента. Будьте осторожны с этими скобками!
    
 
@@ -226,24 +226,24 @@ 
    SyntaxError: missing } after fu
 
 
    SyntaxError: expected expression, got 'string' or SyntaxError: unterminated string literal
    
 
-
    Эти ошибки обычно означает, что вы пропустили открывающую или закрывающую кавычку для строковых значений. В первой ошибки выше,  строка  будет заменена на неожиданный персонаж (ей) , что браузер нашёл вместо кавычек в начале строки. Вторая ошибка означает , что строка не закончилась кавычки.
    
+
    Эти ошибки обычно означает, что вы пропустили открывающую или закрывающую кавычку для строковых значений. В первой ошибки выше,  строка  будет заменена на неожиданный персонаж (ей) , что браузер нашёл вместо кавычек в начале строки. Вторая ошибка означает , что строка не закончилась кавычки.
    
 
 
    При всех этих ошибках действуйте так, как в наших  примерах, которые мы рассмотрели в пошаговом руководстве. Когда возникает ошибка, посмотрите полученный номер строки, перейдите к этой строке и посмотрите, можете ли вы определить, что случилось. Имейте в виду, что ошибка не обязательно будет на этой строке, а также, что ошибка может быть вызвана не такой же проблемой, которую мы привели выше!
    
 
 
    
-
    Примечание : Смотрите наш SyntaxError: Неожиданный токен и SyntaxError: незавершённая строка эталонных страниц для получения более подробной информации об этих ошибках.
    
+
    Примечание : Смотрите наш SyntaxError: Неожиданный токен и SyntaxError: незавершённая строка эталонных страниц для получения более подробной информации об этих ошибках.
    
 
    
 
-
    Резюме
    
+
    Резюме
    
 
 
    Итак, мы научились основам  выяснения ошибок в простых программах JavaScript. Не всегда так просто разобраться, что не так в вашем коде, но, по крайней мере, это сэкономит вам несколько часов сна и позволит вам продвигаться немного быстрее, когда что-либо заработает не так, как ожидалось, в вашем учебном путешествии.
    
 
-
    Смотрите также
    
+
    Смотрите также
    
 
 
    
 
      
- 
    • Есть много других типов ошибок, которые не перечислены здесь; мы составляем ссылку , которая объясняет , что они означают подробно - см. ссылку ошибки JavaScript .
      • 
- 
    • Если вы столкнётесь с любыми ошибками в коде, которые вы не знаете , как исправить после прочтения этой статьи, вы можете получить помощь! Спросите на нить обучения Область дискурсе , или в #mdn IRC канал на Mozilla IRC. Расскажите нам, какая у вас ошибка, и мы постараемся вам помочь. Приложите пример своего кода для большей ясности проблемы.
      • 
+ 
    • Есть много других типов ошибок, которые не перечислены здесь; мы составляем ссылку , которая объясняет , что они означают подробно - см. ссылку ошибки JavaScript .
      • 
+ 
    • Если вы столкнётесь с любыми ошибками в коде, которые вы не знаете , как исправить после прочтения этой статьи, вы можете получить помощь! Спросите на нить обучения Область дискурсе , или в #mdn IRC канал на Mozilla IRC. Расскажите нам, какая у вас ошибка, и мы постараемся вам помочь. Приложите пример своего кода для большей ясности проблемы.
      • 
 
    
 
    
 
diff --git a/files/ru/learn/javascript/objects/adding_bouncing_balls_features/index.html b/files/ru/learn/javascript/objects/adding_bouncing_balls_features/index.html
index 00f36d3d8c1b48..301e1bed09819b 100644
--- a/files/ru/learn/javascript/objects/adding_bouncing_balls_features/index.html
+++ b/files/ru/learn/javascript/objects/adding_bouncing_balls_features/index.html
@@ -201,13 +201,3 @@ 
    In this module
    
  
  • Object building practice
    • 
  
  • Adding features to our bouncing balls demo
    • 
 
-
-
-
-
    
-
-
-
    
-
-
    
-
    
diff --git a/files/ru/learn/javascript/objects/basics/index.html b/files/ru/learn/javascript/objects/basics/index.html
index f7e5187d568e76..3e896ce8fb1c90 100644
--- a/files/ru/learn/javascript/objects/basics/index.html
+++ b/files/ru/learn/javascript/objects/basics/index.html
@@ -58,7 +58,7 @@ 
    Основы объектов
    
 
 
    После сохранения и обновления, попробуйте ввести что-нибудь следующее в консоль JavaScript браузера:
    
 
-
    person.name
+
    person.name
 person.name[0]
 person.age
 person.interests[1]
diff --git a/files/ru/learn/javascript/objects/index.html b/files/ru/learn/javascript/objects/index.html
index e228ba2098f541..17ed89e16710c0 100644
--- a/files/ru/learn/javascript/objects/index.html
+++ b/files/ru/learn/javascript/objects/index.html
@@ -20,7 +20,7 @@ 
    Необходимые знания
 
    Также вам необходимо знать основы JavaScript перед подробным изучением объектов JavaScript. Предварительно поработайте с разделами Первые шаги в JavaScript и Структурные элементы в JavaScript перед началом изучения данного модуля.
    
 
 
    
-
    Примечание: Если вы работаете за компьютером/планшетом/другим устройством, на котором у вас нет возможности создавать собственные файлы, постарайтесь поработать с примерами кода на платформах онлайн-программирования, таких, как JSBin or Thimble.
    
+
    Примечание: Если вы работаете за компьютером/планшетом/другим устройством, на котором у вас нет возможности создавать собственные файлы, постарайтесь поработать с примерами кода на платформах онлайн-программирования, таких, как JSBin or Thimble.
    
 
    
 
 
    Руководства
    
diff --git a/files/ru/learn/javascript/objects/json/index.html b/files/ru/learn/javascript/objects/json/index.html
index 1892288b90e427..c9ba1ada0d7c35 100644
--- a/files/ru/learn/javascript/objects/json/index.html
+++ b/files/ru/learn/javascript/objects/json/index.html
@@ -344,11 +344,3 @@ 
    В этом модуле
    
  
  • Практика построения объектов
    • 
  
  • Добавление функций в нашу демонстрацию прыгающих шаров
    • 
 
-
-
    
-
-
-
    
-
-
    
-
    
diff --git a/files/ru/learn/javascript/objects/object_prototypes/index.html b/files/ru/learn/javascript/objects/object_prototypes/index.html
index d141d33bd7d1e0..15084cc49e9ba2 100644
--- a/files/ru/learn/javascript/objects/object_prototypes/index.html
+++ b/files/ru/learn/javascript/objects/object_prototypes/index.html
@@ -59,9 +59,9 @@ 
    Понимани
 
 
    В этом примере мы определили конструктору функцию, например:
    
 
-
    function Person(first, last, age, gender, interests) {
+
    function Person(first, last, age, gender, interests) {
 
-  // Определения методов и свойств
+  // Определения методов и свойств
   this.name = {
     'first': first,
     'last' : last
@@ -69,7 +69,7 @@ 
    Понимани
   this.age = age;
   this.gender = gender;
   //...см. Введение в объекты для полного определения
-}
    
+}
    
 
 
    Затем мы создаём экземпляр объекта следующим образом:
    
 
@@ -152,7 +152,7 @@ 
    Снова create()
    
  
 
 
-
    Это вернёт объект person1.
    
+
    Это вернёт объект person1.
    
 
 
    Свойство constructor
    
 
diff --git a/files/ru/learn/performance/index.html b/files/ru/learn/performance/index.html
index 725e26c85759a5..fdccc9533c1764 100644
--- a/files/ru/learn/performance/index.html
+++ b/files/ru/learn/performance/index.html
@@ -43,7 +43,7 @@ 
    Справочники
    
  
    What is web performance?
    
  
    You know web performance is important, but what is constitutes web performance? This article introduces the components of performance, from web page loading and rendering, including how your content makes it into your users browser to be viewed, to what groups of people we need to consider when thinking about performance,
    
  
    How do users perceive performance?
    
- 
    More important than how fast your website is in milliseconds, is how fast your users perceive your site to be. These perceptions are impacted by actual page load time, idling, responsiveness to user interaction, and the smoothness of scrolling and other animations. In this article, we discuss the various loading metrics, animation, and responsiveness metrics, along with best practices to improve user perception, if not the actual timings.
    
+ 
    More important than how fast your website is in milliseconds, is how fast your users perceive your site to be. These perceptions are impacted by actual page load time, idling, responsiveness to user interaction, and the smoothness of scrolling and other animations. In this article, we discuss the various loading metrics, animation, and responsiveness metrics, along with best practices to improve user perception, if not the actual timings.
    
 
 
 
    
diff --git a/files/ru/learn/server-side/apache_configuration_htaccess/index.html b/files/ru/learn/server-side/apache_configuration_htaccess/index.html
index cffffc7227281a..07d36bd717fd14 100644
--- a/files/ru/learn/server-side/apache_configuration_htaccess/index.html
+++ b/files/ru/learn/server-side/apache_configuration_htaccess/index.html
@@ -33,6 +33,6 @@ 
    Применение
    
 
 
    Для дополнительной информации читайте статью Redirect your Traffic for Error Handling.
    
 
-
    Кеширование: файл .htaccess может управлять кешированием данных веб-браузером пользователя. Это ускорит загрузку страниц и сократит количество передаваемой информации между сервером и клиентом.
    
+
    Кеширование: файл .htaccess может управлять кешированием данных веб-браузером пользователя. Это ускорит загрузку страниц и сократит количество передаваемой информации между сервером и клиентом.
    
 
 
    MIME типы: смотрите статью correct MIME types для большей информации.
    
diff --git a/files/ru/learn/server-side/django/admin_site/index.html b/files/ru/learn/server-side/django/admin_site/index.html
index ce8a117af4560d..8ae4c016372ef1 100644
--- a/files/ru/learn/server-side/django/admin_site/index.html
+++ b/files/ru/learn/server-side/django/admin_site/index.html
@@ -199,7 +199,7 @@ 
    Настрой
     list_display = ('title', 'author', 'display_genre')
 
    
 
-
    К сожалению, мы не можем напрямую поместить поле genre в list_display, так как оно является  ManyToManyField (Django не позволяет это из-за большой "стоимости" доступа к базе данных). Вместо этого мы определим функцию display_genre для получения строкового представления информации (вызов этой функции есть в list_display,  её определение см. ниже).
    
+
    К сожалению, мы не можем напрямую поместить поле genre в list_display, так как оно является  ManyToManyField (Django не позволяет это из-за большой "стоимости" доступа к базе данных). Вместо этого мы определим функцию display_genre для получения строкового представления информации (вызов этой функции есть в list_display,  её определение см. ниже).
    
 
 
    
 
    Примечание: Получение здесь значения поля genre возможно не самая хорошая идея вследствие "стоимости" операции базы данных. Мы показываем это, потому что вызов функций в ваших моделях может быть очень полезен по другим причинам, например, для добавления ссылки  Delete рядом с каждым пунктом списка.
    
diff --git a/files/ru/learn/server-side/django/authentication/index.html b/files/ru/learn/server-side/django/authentication/index.html
index 273fbdf0ae0b03..10eebb941cd1c4 100644
--- a/files/ru/learn/server-side/django/authentication/index.html
+++ b/files/ru/learn/server-side/django/authentication/index.html
@@ -153,7 +153,7 @@ 
    Проектирование URLs
    Перейдите по http://127.0.0.1:8000/accounts/ URL (обратите внимание на косую черту!), Django покажет ошибку, что он не смог найти этот URL, и перечислить все URL, которые он пытался открыть. Из этого вы можете увидеть URL-адреса, которые будут работать, например:
    
 
 
    
-
    Примечание. Использование вышеуказанного метода добавляет следующие URL-адреса с именами в квадратных скобках, которые могут использоваться для изменения сопоставлений URL-адресов. Вам не нужно реализовывать что-либо ещё - приведённое выше сопоставление URL-адресов автоматически отображает указанные ниже URL-адреса.
    
+
    Примечание. Использование вышеуказанного метода добавляет следующие URL-адреса с именами в квадратных скобках, которые могут использоваться для изменения сопоставлений URL-адресов. Вам не нужно реализовывать что-либо ещё - приведённое выше сопоставление URL-адресов автоматически отображает указанные ниже URL-адреса.
    
 
    
 
 
    
@@ -167,18 +167,18 @@ 
    Проектирование URLs
    
 
    
 
-
    Теперь попробуйте перейти к URL-адресу входа (http://127.0.0.1:8000/accounts/login/). Это приведёт к сбою снова, но с ошибкой, сообщающей вам, что нам не хватает требуемого шаблона (registration / login.html) в пути поиска шаблона. Вы увидите следующие строки, перечисленные в жёлтом разделе вверху:
    
+
    Теперь попробуйте перейти к URL-адресу входа (http://127.0.0.1:8000/accounts/login/). Это приведёт к сбою снова, но с ошибкой, сообщающей вам, что нам не хватает требуемого шаблона (registration / login.html) в пути поиска шаблона. Вы увидите следующие строки, перечисленные в жёлтом разделе вверху:
    
 
 
    Exception Type:    TemplateDoesNotExist
 Exception Value:    registration/login.html
    
 
-
    Следующий шаг - создать каталог регистрации в пути поиска, а затем добавить файл login.html.
    
+
    Следующий шаг - создать каталог регистрации в пути поиска, а затем добавить файл login.html.
    
 
 
    Каталог шаблонов
    
 
-
    URL-адреса (и неявные представления), которые мы только что добавили, ожидают найти связанные с ними шаблоны в каталоге / регистрации / где-то в пути поиска шаблонов.
    
- 
    
- Для этого сайта мы разместим наши HTML-страницы в каталоге templates / registration /. Этот каталог должен находиться в корневом каталоге проекта, то есть в том же каталоге, что и в каталоге и папках locallibrary). Создайте эти папки сейчас.
    
+
    URL-адреса (и неявные представления), которые мы только что добавили, ожидают найти связанные с ними шаблоны в каталоге / регистрации / где-то в пути поиска шаблонов.
    
+
+
    Для этого сайта мы разместим наши HTML-страницы в каталоге templates / registration /. Этот каталог должен находиться в корневом каталоге проекта, то есть в том же каталоге, что и в каталоге и папках locallibrary). Создайте эти папки сейчас.
    
 
 
    
 
    Примечание: ваша структура папок теперь должна выглядеть как показано внизу:
    
@@ -189,7 +189,7 @@ 
    Каталог шаблонов
    
                  |_registration
    
 
    
 
-
    Чтобы сделать эти директории видимыми для загрузчика шаблонов   (т. е. помещать этот каталог в путь поиска шаблона) откройте настройки проекта (/locallibrary/locallibrary/settings.py), и обновите в секции TEMPLATES строку 'DIRS' как показано.
    
+
    Чтобы сделать эти директории видимыми для загрузчика шаблонов   (т. е. помещать этот каталог в путь поиска шаблона) откройте настройки проекта (/locallibrary/locallibrary/settings.py), и обновите в секции TEMPLATES строку 'DIRS' как показано.
    
 
 
    TEMPLATES = [
     {
@@ -199,13 +199,13 @@ 
    Каталог шаблонов
    
         ...
 
    
 
-
    Шаблон аутентификации
    
+
    Шаблон аутентификации
    
 
 
    
-
    Важно: Шаблоны аутентификации, представленные в этой статье, являются очень простой / слегка изменённой версией шаблонов логина демонстрации Django. Возможно, вам придётся настроить их для собственного использования!
    
+
    Важно: Шаблоны аутентификации, представленные в этой статье, являются очень простой / слегка изменённой версией шаблонов логина демонстрации Django. Возможно, вам придётся настроить их для собственного использования!
    
 
    
 
-
    Создайте новый HTML файл, названный /locallibrary/templates/registration/login.html. дайте ему следующее содержание:
    
+
    Создайте новый HTML файл, названный /locallibrary/templates/registration/login.html. дайте ему следующее содержание:
    
 
 
    {% extends "base_generic.html" %}
 
@@ -217,46 +217,46 @@ 
    Шаблон 
 {% if next %}
   {% if user.is_authenticated %}
-    <p>Your account doesn't have access to this page. To proceed,
-    please login with an account that has access.</p>
+    <p>Your account doesn't have access to this page. To proceed,
+    please login with an account that has access.</p>
   {% else %}
-    <p>Please login to see this page.</p>
+    <p>Please login to see this page.</p>
   {% endif %}
 {% endif %}
 
-<form method="post" action="{% url 'login' %}">
+<form method="post" action="{% url 'login' %}">
 {% csrf_token %}
-<table>
+<table>
 
-<tr>
-  <td>\{{ form.username.label_tag }}</td>
-  <td>\{{ form.username }}</td>
-</tr>
+<tr>
+  <td>\{{ form.username.label_tag }}</td>
+  <td>\{{ form.username }}</td>
+</tr>
 
-<tr>
-  <td>\{{ form.password.label_tag }}</td>
-  <td>\{{ form.password }}</td>
-</tr>
-</table>
+<tr>
+  <td>\{{ form.password.label_tag }}</td>
+  <td>\{{ form.password }}</td>
+</tr>
+</table>
 
-<input type="submit" value="login" />
-<input type="hidden" name="next" value="\{{ next }}" />
-</form>
+<input type="submit" value="login" />
+<input type="hidden" name="next" value="\{{ next }}" />
+</form>
 
 {# Assumes you setup the password_reset view in your URLconf #}
-<p><a href="{% url 'password_reset' %}">Lost password?</a></p>
+<p><a href="{% url 'password_reset' %}">Lost password?</a></p>
 
 {% endblock %}
    
 
-
    Этот шаблон имеет сходство с тем, что мы видели раньше - он расширяет наш базовый шаблон и переопределяет блок контента. Остальная часть кода - это довольно стандартный код обработки формы, о котором мы поговорим в следующем учебном пособии. Все, что вам нужно знать, это показ формы, в которой вы можете ввести своё имя пользователя и пароль, а если вы введёте недопустимые значения, вам будет предложено ввести правильные значения, когда страница обновится.
    
+
    Этот шаблон имеет сходство с тем, что мы видели раньше - он расширяет наш базовый шаблон и переопределяет блок контента. Остальная часть кода - это довольно стандартный код обработки формы, о котором мы поговорим в следующем учебном пособии. Все, что вам нужно знать, это показ формы, в которой вы можете ввести своё имя пользователя и пароль, а если вы введёте недопустимые значения, вам будет предложено ввести правильные значения, когда страница обновится.
    
 
 
    Перейдите на страницу входа (http://127.0.0.1:8000/accounts/login/) когда вы сохраните свой шаблон, и вы должны увидеть что-то наподобие этого:
    
 
 
    Library login page v1
    
 
-
    Если ваша попытка войти в систему будет успешной,  вы будете перенаправлены на другую страницу (по умолчанию это будет http://127.0.0.1:8000/accounts/profile/). Проблема здесь в том, что по умолчанию Django ожидает, что после входа в систему вы захотите перейти на страницу профиля, что может быть или не быть. Поскольку вы ещё не определили эту страницу, вы получите ещё одну ошибку!
    
- 
    
- Откройте настройки проекта (/locallibrary/locallibrary/settings.py) и добавьте текст ниже. Теперь, когда вы входите в систему, вы по умолчанию должны перенаправляться на домашнюю страницу сайта.
    
+
    Если ваша попытка войти в систему будет успешной,  вы будете перенаправлены на другую страницу (по умолчанию это будет http://127.0.0.1:8000/accounts/profile/). Проблема здесь в том, что по умолчанию Django ожидает, что после входа в систему вы захотите перейти на страницу профиля, что может быть или не быть. Поскольку вы ещё не определили эту страницу, вы получите ещё одну ошибку!
    
+
+
    Откройте настройки проекта (/locallibrary/locallibrary/settings.py) и добавьте текст ниже. Теперь, когда вы входите в систему, вы по умолчанию должны перенаправляться на домашнюю страницу сайта.
    
 
 
    # Redirect to home URL after login (Default redirects to /accounts/profile/)
 LOGIN_REDIRECT_URL = '/'
@@ -264,9 +264,9 @@ 
    Шаблон Шаблон выхода
    
 
-
    Если вы перейдёте по URL-адресу выхода (http://127.0.0.1:8000/accounts/logout/), то увидите странное поведение - ваш пользователь наверняка выйдет из системы, но вы попадёте на страницу выхода администратора. Это не то, что вам нужно, хотя бы потому, что ссылка для входа на этой странице приведёт вас к экрану входа в систему администратора. (и это доступно только для пользователей, у которых есть разрешение is_staff).
    
+
    Если вы перейдёте по URL-адресу выхода (http://127.0.0.1:8000/accounts/logout/), то увидите странное поведение - ваш пользователь наверняка выйдет из системы, но вы попадёте на страницу выхода администратора. Это не то, что вам нужно, хотя бы потому, что ссылка для входа на этой странице приведёт вас к экрану входа в систему администратора. (и это доступно только для пользователей, у которых есть разрешение is_staff).
    
  
    
- Создайте и откройте /locallibrary/templates/registration/logged_out.html. Скопируйте текст ниже:
    
+ Создайте и откройте /locallibrary/templates/registration/logged_out.html. Скопируйте текст ниже:
    
 
 
    {% extends "base_generic.html" %}
 
@@ -276,19 +276,19 @@ 
    Шаблон выхода
    
 <a href="{% url 'login'%}">Click here to login again.</a>
 {% endblock %}
    
 
-
    Этот шаблон очень прост. Он просто отображает сообщение, информирующее вас о том, что вы вышли из системы, и предоставляет ссылку, которую вы можете нажать, чтобы вернуться на экран входа в систему. Если вы снова перейдёте на страницу выхода из системы, вы увидите эту страницу:
    
+
    Этот шаблон очень прост. Он просто отображает сообщение, информирующее вас о том, что вы вышли из системы, и предоставляет ссылку, которую вы можете нажать, чтобы вернуться на экран входа в систему. Если вы снова перейдёте на страницу выхода из системы, вы увидите эту страницу:
    
 
 
    Library logout page v1
    
 
 
    Шаблон сброса пароля
    
 
-
    Система сброса пароля по умолчанию использует электронную почту, чтобы отправить пользователю ссылку на сброс. Вам необходимо создать формы, чтобы получить адрес электронной почты пользователя, отправить электронное письмо, разрешить им вводить новый пароль и отметить, когда весь процесс будет завершён.
    
- 
    
- В качестве отправной точки можно использовать следующие шаблоны.
    
+
    Система сброса пароля по умолчанию использует электронную почту, чтобы отправить пользователю ссылку на сброс. Вам необходимо создать формы, чтобы получить адрес электронной почты пользователя, отправить электронное письмо, разрешить им вводить новый пароль и отметить, когда весь процесс будет завершён.
    
+
+
    В качестве отправной точки можно использовать следующие шаблоны.
    
 
 
    Форма сброса пароля
    
 
-
    Это форма, используемая для получения адреса электронной почты пользователя (для отправки пароля для сброса пароля). Создайте /locallibrary/templates/registration/password_reset_form.html и дайте ему следующее содержание:
    
+
    Это форма, используемая для получения адреса электронной почты пользователя (для отправки пароля для сброса пароля). Создайте /locallibrary/templates/registration/password_reset_form.html и дайте ему следующее содержание:
    
 
 
    {% extends "base_generic.html" %}
 {% block content %}
@@ -423,7 +423,7 @@ 
    Тестирование 
 
 
    Тестирование в представлениях
    
 
-
    Если вы используете функциональные представления, самым простым способом ограничить доступ к вашим функциям является применение login_required декоратор к вашей функции просмотра, как показано ниже. Если пользователь вошёл в систему, ваш код просмотра будет выполняться как обычно. Если пользователь не вошёл в систему, это перенаправит URL-адрес входа, определённый в настройках проекта. (settings.LOGIN_URL), передав текущий абсолютный путь в качестве next параметра URL. Если пользователю удастся войти в систему, они будут возвращены на эту страницу, но на этот раз аутентифицированы.
    
+
    Если вы используете функциональные представления, самым простым способом ограничить доступ к вашим функциям является применение login_required декоратор к вашей функции просмотра, как показано ниже. Если пользователь вошёл в систему, ваш код просмотра будет выполняться как обычно. Если пользователь не вошёл в систему, это перенаправит URL-адрес входа, определённый в настройках проекта. (settings.LOGIN_URL), передав текущий абсолютный путь в качестве next параметра URL. Если пользователю удастся войти в систему, они будут возвращены на эту страницу, но на этот раз аутентифицированы.
    
 
 
    from django.contrib.auth.decorators import login_required
 
diff --git a/files/ru/learn/server-side/django/deployment/index.html b/files/ru/learn/server-side/django/deployment/index.html
index 96c36cc347c7ed..bee57c410eb5d9 100644
--- a/files/ru/learn/server-side/django/deployment/index.html
+++ b/files/ru/learn/server-side/django/deployment/index.html
@@ -161,32 +161,25 @@ 
    Пример:
 
 
    Почему Heroku?
    
 
-
    Heroku - один из самых продолжительных и популярных облачных сервисов PaaS. Первоначально он поддерживал только приложения Ruby, но теперь его можно использовать для размещения приложений из многих сред программирования, включая Django!
    
+
    Heroku - один из самых продолжительных и популярных облачных сервисов PaaS. Первоначально он поддерживал только приложения Ruby, но теперь его можно использовать для размещения приложений из многих сред программирования, включая Django!
    
 
 
    Мы выбираем для использования Heroku по нескольким причинам:
    
 
 
      
- 
    • У Heroku есть свободный уровень, который действительно свободен (хотя и с некоторыми ограничениями)
      • 
- 
    • Как PaaS, Heroku заботится о большой веб-инфраструктуре для нас. Это значительно облегчает работу, потому что вы не беспокоитесь о серверах, балансирах нагрузки, обратных прокси или любой другой веб-инфраструктуре, которую Heroku предоставляет нам под капотом.
      • 
- 
    • Хотя у этого есть некоторые ограничения, это не повлияет на это конкретное приложение. Например:
+ 
    • У Heroku есть свободный уровень, который действительно свободен (хотя и с некоторыми ограничениями)
      • 
+ 
    • Как PaaS, Heroku заботится о большой веб-инфраструктуре для нас. Это значительно облегчает работу, потому что вы не беспокоитесь о серверах, балансирах нагрузки, обратных прокси или любой другой веб-инфраструктуре, которую Heroku предоставляет нам под капотом.
      • 
+ 
    • Хотя у этого есть некоторые ограничения, это не повлияет на это конкретное приложение. Например:
   
        
-   
      • Heroku предоставляет только недолговечное хранилище, поэтому загруженные пользователем файлы нельзя безопасно хранить на самом Heroku.
        • 
-   
      • Свободный уровень будет спать с неактивным веб-приложением, если в течение получаса не будет запросов. После этого сайт может занять несколько секунд, чтобы ответить, когда он проснулся.
        • 
-   
      • Свободный уровень ограничивает время, в течение которого ваш сайт работает до определённого количества часов каждый месяц (не включая время, когда сайт «спит»). Это нормально для сайта с низким уровнем использования / демонстрации, но не подходит, если требуется 100% время безотказной работы.
        • 
+   
      • Heroku предоставляет только недолговечное хранилище, поэтому загруженные пользователем файлы нельзя безопасно хранить на самом Heroku.
        • 
+   
      • Свободный уровень будет спать с неактивным веб-приложением, если в течение получаса не будет запросов.После этого сайт может занять несколько секунд, чтобы ответить, когда он проснулся.
        • 
+   
      • Свободный уровень ограничивает время, в течение которого ваш сайт работает до определённого количества часов каждый месяц (не включая время, когда сайт «спит»).Это нормально для сайта с низким уровнем использования / демонстрации, но не подходит, если требуется 100% время безотказной работы.
        • 
    
      • Другие ограничения перечислены в Limits (документы Heroku).
        • 
   
      
  
      • 
- 
    • В основном это просто работает, и если вы в конечном итоге полюбите его, масштабирование вашего приложения будет очень простым.
      • 
+ 
    • В основном это просто работает, и если вы в конечном итоге полюбите его, масштабирование вашего приложения будет очень простым.
      • 
 
    
 
-
    Хотя Heroku идеально подходит для проведения этой демонстрации, она может быть не идеальна для вашего реального сайта. Heroku упрощает настройку и масштабирование за счёт меньшей гибкости и, возможно, обойдётся намного дороже, когда вы выходите из свободного уровня.
    
+
    Хотя Heroku идеально подходит для проведения этой демонстрации, она может быть не идеальна для вашего реального сайта. Heroku упрощает настройку и масштабирование за счёт меньшей гибкости и, возможно, обойдётся намного дороже, когда вы выходите из свободного уровня.
    
 
 
    Как работает Heroku?
    
 
@@ -217,13 +210,13 @@ 
    Как работает Heroku?
    
 
 
    Создание репозитория приложения на Github
    
 
-
    Heroku тесно интегрирована с системой управления версиями исходного кода git, используя её для загрузки / синхронизации любых изменений, которые вы вносите в живую систему. Он делает это, добавляя новый «удалённый» репозиторий heroku с именем heroku, указывающий на репозиторий для вашего источника в облаке Heroku. Во время разработки вы используете git для хранения изменений в вашем «master» репозитории. Когда вы хотите развернуть свой сайт, вы синхронизируете свои изменения в репозитории Heroku.
    
+
    Heroku тесно интегрирована с системой управления версиями исходного кода git, используя её для загрузки / синхронизации любых изменений, которые вы вносите в живую систему. Он делает это, добавляя новый «удалённый» репозиторий heroku с именем heroku, указывающий на репозиторий для вашего источника в облаке Heroku. Во время разработки вы используете git для хранения изменений в вашем «master» репозитории. Когда вы хотите развернуть свой сайт, вы синхронизируете свои изменения в репозитории Heroku.
    
 
 
    
-
    Примечание: Если вы привыкли следовать хорошей практике разработки программного обеспечения, вы, вероятно, уже используете git или какую-либо другую систему SCM. Если у вас уже есть git-репозиторий, вы можете пропустить этот шаг.
    
+
    Примечание: Если вы привыкли следовать хорошей практике разработки программного обеспечения, вы, вероятно, уже используете git или какую-либо другую систему SCM. Если у вас уже есть git-репозиторий, вы можете пропустить этот шаг.
    
 
    
 
-
    Существует множество способов работы с git, но одним из самых простых является создание учётной записи в Github, создание репозитория там, а затем синхронизация с ним локально:
    
+
    Существует множество способов работы с git, но одним из самых простых является создание учётной записи в Github, создание репозитория там, а затем синхронизация с ним локально:
    
 
 
      
  
    1. Посетите https://github.com/ и создайте аккаунт.
      2. 
diff --git a/files/ru/learn/server-side/django/forms/index.html b/files/ru/learn/server-side/django/forms/index.html
index 17e710f0fbb4bc..5bcab63dd161b5 100644
--- a/files/ru/learn/server-side/django/forms/index.html
+++ b/files/ru/learn/server-side/django/forms/index.html
@@ -32,7 +32,7 @@
 
 
      Обзор
      
 
-
      HTML форма - это группа из одного или нескольких полей/виджетов на веб-странице, которая используется для сбора информации от пользователей для последующей отправки на сервер. Формы являются гибким механизмом сбора пользовательских данных, поскольку имеют целый набор виджетов для ввода различных типов данных, как то: текстовые поля, флажки, переключатели, установщики дат и т. д. Формы являются относительно безопасным способом взаимодействия пользовательского клиента и сервера, поскольку они позволяют отправлять данные в POST-запросах, применяя защиту от Межсайтовой подделки запроса (Cross Site Request Forgery - CSRF)
      
+
      HTML форма - это группа из одного или нескольких полей/виджетов на веб-странице, которая используется для сбора информации от пользователей для последующей отправки на сервер. Формы являются гибким механизмом сбора пользовательских данных, поскольку имеют целый набор виджетов для ввода различных типов данных, как то: текстовые поля, флажки, переключатели, установщики дат и т. д. Формы являются относительно безопасным способом взаимодействия пользовательского клиента и сервера, поскольку они позволяют отправлять данные в POST-запросах, применяя защиту от Межсайтовой подделки запроса (Cross Site Request Forgery - CSRF)
      
 
 
      Пока что мы не создавали каких-либо форм в этом учебнике, но мы встречались с ними в административной панели Django —  например, снимок экрана ниже показывает форму для редактирования одной из наших моделей книг (Book), состоящую из нескольких списков выбора и текстовых редакторов. 
      
 
diff --git a/files/ru/learn/server-side/django/introduction/index.html b/files/ru/learn/server-side/django/introduction/index.html
index 1d4f02a8eff3f8..1815b09f333922 100644
--- a/files/ru/learn/server-side/django/introduction/index.html
+++ b/files/ru/learn/server-side/django/introduction/index.html
@@ -61,7 +61,7 @@ 
      Как он появился?
      
 
      Django продолжает расти и улучшаться с момента его первого релиза (1.0) в сентябре 2008 года до недавно выпущенной версии 3.1 (2020). В каждой версии добавлены новые функциональные возможности и исправлены ошибки, начиная от поддержки новых типов баз данных, шаблонизаторов и кеширования, до добавления «общих» функций просмотра и классов (уменьшающих объём кода, который разработчики должны писать для ряда программных задач).
      
 
 
      
-
      Примечание: Ознакомьтесь с примечаниями к версии на сайте Django, чтобы увидеть что изменилось в последних версиях и как много работы было проделано, чтобы улучшить Django.
      
+
      Примечание: Ознакомьтесь с примечаниями к версии на сайте Django, чтобы увидеть что изменилось в последних версиях и как много работы было проделано, чтобы улучшить Django.
      
 
      
 
 
      Django — это процветающий совместный проект с открытым исходным кодом, в котором заняты многие тысячи пользователей и участников. Несмотря на то, что у него всё ещё есть некоторые особенности, которые отражают его происхождение, Django превратился в универсальный фреймворк, способный разрабатывать веб-сайты любого типа.
      
@@ -244,7 +244,7 @@ 
      Что ещё можно сде
 
        
  
      • Формы: HTML-формы используются для сбора пользовательских данных для обработки на сервере. Django упрощает создание, проверку и обработку формы.
        • 
  
      • Аутентификация пользователя и разрешения: Django включает надёжную систему аутентификации и авторизации пользователей, которая была построена с учётом безопасности.
        • 
- 
      • Кеширование: Создание динамического контента намного более интенсивно (и медленнее), чем обслуживание статического содержимого. Django обеспечивает гибкое кеширование, чтобы вы могли хранить всю или часть отображаемой страницы, для того, чтобы она не вызывалась повторно, за исключением случаев, когда это необходимо.
        • 
+ 
      • Кеширование: Создание динамического контента намного более интенсивно (и медленнее), чем обслуживание статического содержимого. Django обеспечивает гибкое кеширование, чтобы вы могли хранить всю или часть отображаемой страницы, для того, чтобы она не вызывалась повторно, за исключением случаев, когда это необходимо.
        • 
  
      • Админ-панель: Административная панель в Django включена по умолчанию при создании приложения с использованием основного каркаса. Это упрощает управление админкой администраторам сайта для создания, редактирования и просмотра любых данных на вашем сайте.
        • 
  
      • Сериализация данных (преобразование в последовательную форму): Django упрощает сериализацию и обслуживание ваших данных в таких форматах как XML или JSON. Это может быть полезно при создании веб-сервисов (веб-сайтов, которые исключительно служат для использования данных другими приложениями или сайтами и сами ничего не отображают) или при создании веб-сайта, на котором клиентский код обрабатывает весь рендеринг данных.
        • 
 
      
diff --git a/files/ru/learn/server-side/django/skeleton_website/index.html b/files/ru/learn/server-side/django/skeleton_website/index.html
index 868bba559dba39..21ee6adfeed190 100644
--- a/files/ru/learn/server-side/django/skeleton_website/index.html
+++ b/files/ru/learn/server-side/django/skeleton_website/index.html
@@ -36,14 +36,14 @@ 
      Обзор
      
 
      Алгоритм следующий:
      
 
 
        
- 
      1. Использовать django-admin для создания папки проекта, шаблонов остальных файлов, и скрипта для управления проектом (manage.py).
        2. 
- 
      2. Использовать manage.py для создания одного или нескольких приложений.
+ 
      3. Использовать django-admin для создания папки проекта, шаблонов остальных файлов, и скрипта для управления проектом (manage.py).
        4. 
+ 
      4. Использовать manage.py для создания одного или нескольких приложений.
   
        
   
        Примечание: Сайт может состоять из одной или нескольких различных частей, например: основная часть, блог, вики, раздел загрузок, и так далее. Философия Django подталкивает разработчиков создавать эти части, как разные приложения, которые, если понадобится, могут быть использованы повторно в других проектах. 
        
   
        
  
        5. 
- 
      5. Зарегистрировать в настройках эти приложения, чтобы использовать их в проекте. 
        6. 
- 
      6. Настроить маршруты url адресов для каждого из приложений.
        7. 
+ 
      7. Зарегистрировать в настройках эти приложения, чтобы использовать их в проекте. 
        8. 
+ 
      8. Настроить маршруты url адресов для каждого из приложений.
        9. 
 
      
 
 
      Для Сайта местной библиотеки папка сайта и проекта будет называться locallibrary, и у нас будет одно приложение с названием catalog. Верхняя структура проекта будет следующей:
      
@@ -54,11 +54,11 @@ 
      Обзор
      
     catalog/          # Папка приложения (также создана manage.py)
 
    
 
-
    Следующие разделы статьи разложат по полочкам этапы создания "скелета", и покажут вам, как можно проверить сделанные изменения. В конце статьи мы обсудим некоторые другие настройки сайта, которые можно назначить на этом этапе.
    
+
    Следующие разделы статьи разложат по полочкам этапы создания "скелета", и покажут вам, как можно проверить сделанные изменения. В конце статьи мы обсудим некоторые другие настройки сайта, которые можно назначить на этом этапе.
    
 
 
    Создание проекта
    
 
-
    Для начала откройте командную строку/терминал, перейдите в ту папку, куда вы хотите поместить проект Django(лучше в папке профиля пользователя C:\Users\user_name, при запуске командной строки используется именно эта директория), и создайте папку для вашего нового сайта (в данном случае: locallibrary). Затем войдите в эту папку, используя команду cd:
    
+
    Для начала откройте командную строку/терминал, перейдите в ту папку, куда вы хотите поместить проект Django(лучше в папке профиля пользователя C:\Users\user_name, при запуске командной строки используется именно эта директория), и создайте папку для вашего нового сайта (в данном случае: locallibrary). Затем войдите в эту папку, используя команду cd:
    
 
 
    mkdir locallibrary
 cd locallibrary
    
@@ -81,8 +81,8 @@ 
    Создание проекта
    
 
 
      
  
    • settings.py содержит в себе все настройки проекта. Здесь мы регистрируем приложения, задаём размещение статичных файлов, настройки базы данных и так далее.  
      • 
- 
    • urls.py задаёт ассоциации url адресов с представлениями. Несмотря на то, что этот файл может содержать все настройки url, обычно его делят на части, по одной на приложение, как будет показано далее. 
      • 
- 
    • wsgi.py используется для налаживания связи между вашим Django приложением и веб-сервером. Вы можете воспринимать его, как утилиту.
      • 
+ 
    • urls.py задаёт ассоциации url адресов с представлениями. Несмотря на то, что этот файл может содержать все настройки url, обычно его делят на части, по одной на приложение, как будет показано далее. 
      • 
+ 
    • wsgi.py используется для налаживания связи между вашим Django приложением и веб-сервером. Вы можете воспринимать его, как утилиту.
      • 
 
    
 
 
    Скрипт manage.py используется для создания приложений, работы с базами данных и для запуска отладочного сервера. 
    
diff --git a/files/ru/learn/server-side/django/web_application_security/index.html b/files/ru/learn/server-side/django/web_application_security/index.html
index 7c09a06cff86d3..1deb82395c5469 100644
--- a/files/ru/learn/server-side/django/web_application_security/index.html
+++ b/files/ru/learn/server-side/django/web_application_security/index.html
@@ -113,7 +113,7 @@ 
    Другие атаки
    
 
    
  
    Защита от SQL инъекции
    
  
    Уязвимость SQL инъекции позволяет атакующему выполнить произвольный SQL код в базе данных и получить доступ к данным (прочитать, отредактировать и изменить) независимо от текущих прав доступа пользователя. В большинстве случаев вы будете получать доступ к данным базы данных, используя сущности queryset/model Django. Используя их для генерации SQL запросов, вы получите корректно сформированный и экранированный запрос для выбранной базы данных. Если вам необходимо писать "сырые" запросы, вам так же нужно будет продумать защиту от инъекций.
    
- 
    Защита от Кликджекинга
    
+ 
    Защита от Кликджекинга
    
  
    В данном виде атак атакующий перехватывает ввод на видимом слое страницы и перенаправляет их на скрытый слой под ним. Этот метод может быть использован к примеру для отображения официального сайта банка, с перехватом данных для входа в невидимом  <iframe>, который контролирует атакующий. Django содержит защиту от кликджекинга в виде промежуточного програмного обеспечения (middleware) X-Frame-Options, который поддерживается браузерами и может запретить отображение страницы внутри <iframe>.
    
  
    SSL/HTTPS
    
  
    SSL/HTTPS может быть использован на веб-сервере для шифрования всего трафика между сервером и пользователем, включая данные входа, которые иначе будут отправляться как обычный текст (который сможет прочитать любой перехвативший запрос человек). Использование HTTPS высоко рекомендовано. Если используется HTTPS, Django позволяет использовать следующие методы защиты:
    
diff --git a/files/ru/learn/server-side/express_nodejs/development_environment/index.html b/files/ru/learn/server-side/express_nodejs/development_environment/index.html
index df54495f263a7b..d20239c907b7d6 100644
--- a/files/ru/learn/server-side/express_nodejs/development_environment/index.html
+++ b/files/ru/learn/server-side/express_nodejs/development_environment/index.html
@@ -28,69 +28,69 @@ 
    Обзор сред
 
 
    Что такое среда разработки Express?
    
 
-
    Среда разработки Express включает в себя установку Nodejs, менеджера пакетов NPM и (необязательно) Express Application Generator на локальном компьютере.
    
- 
    
- Узел и менеджер пакетов NPM устанавливаются вместе из подготовленных двоичных пакетов, установщиков, менеджеров пакетов операционной системы или из исходного кода (как показано в следующих разделах). Затем Express устанавливается NPM как зависимость от ваших отдельных веб-приложений Express (наряду с другими библиотеками, такими как механизмы шаблонов, драйверы баз данных, промежуточное программное обеспечение для аутентификации, промежуточное программное обеспечение для обслуживания статических файлов и т. Д.)
    
- 
    
- NPM также можно использовать для (глобальной) установки Express Application Generator, удобного инструмента для создания каркасных веб-приложений Express, которые следуют шаблону MVC. Генератор приложений является необязательным, поскольку вам не нужно использовать этот инструмент для создания приложений, использующих Express, или для приложений для создан Express, имеющих одинаковую архитектурную разметку или зависимости. Мы будем использовать его, потому что это значительно облегчает начало работы и продвигает модульную структуру приложения.
    
+
    Среда разработки Express включает в себя установку Nodejs, менеджера пакетов NPM и (необязательно) Express Application Generator на локальном компьютере.
    
+
+
    Узел и менеджер пакетов NPM устанавливаются вместе из подготовленных двоичных пакетов, установщиков, менеджеров пакетов операционной системы или из исходного кода (как показано в следующих разделах). Затем Express устанавливается NPM как зависимость от ваших отдельных веб-приложений Express (наряду с другими библиотеками, такими как механизмы шаблонов, драйверы баз данных, промежуточное программное обеспечение для аутентификации, промежуточное программное обеспечение для обслуживания статических файлов и т. Д.)
    
+
+
    NPM также можно использовать для (глобальной) установки Express Application Generator, удобного инструмента для создания каркасных веб-приложений Express, которые следуют шаблону MVC. Генератор приложений является необязательным, поскольку вам не нужно использовать этот инструмент для создания приложений, использующих Express, или для приложений для создан Express, имеющих одинаковую архитектурную разметку или зависимости. Мы будем использовать его, потому что это значительно облегчает начало работы и продвигает модульную структуру приложения.
    
 
 
    
-
    Примечание: в отличие от некоторых других веб-сред, среда разработки не включает отдельный веб-сервер разработки. В Node / Express веб-приложение создаёт и запускает собственный веб-сервер!
    
+
    Примечание: в отличие от некоторых других веб-сред, среда разработки не включает отдельный веб-сервер разработки. В Node / Express веб-приложение создаёт и запускает собственный веб-сервер!
    
 
    
 
-
    Существуют и другие периферийные инструменты, которые являются частью типичной среды разработки, в том числе текстовые редакторы или IDE для редактирования кода и инструменты управления исходным кодом, такие как Git, для безопасного управления различными версиями вашего кода. Мы предполагаем, что вы уже установили подобные инструменты (в частности, текстовый редактор).
    
+
    Существуют и другие периферийные инструменты, которые являются частью типичной среды разработки, в том числе текстовые редакторы или IDE для редактирования кода и инструменты управления исходным кодом, такие как Git, для безопасного управления различными версиями вашего кода. Мы предполагаем, что вы уже установили подобные инструменты (в частности, текстовый редактор).
    
+
+
    Какие операционные системы поддерживаются?
    
 
-
    Какие операционные системы поддерживаются?
    
+
    Узел может быть запущен в Windows, macOS, во многих «разновидностях» Linux, Docker и т. Д. (Полный список на странице загрузок nodejs). Практически любой персональный компьютер должен иметь необходимую производительность для запуска Node во время разработки. Express работает в среде Node и, следовательно, может работать на любой платформе, на которой работает Node.
    
 
-
    Узел может быть запущен в Windows, macOS, во многих «разновидностях» Linux, Docker и т. Д. (Полный список на странице загрузок nodejs). Практически любой персональный компьютер должен иметь необходимую производительность для запуска Node во время разработки. Express работает в среде Node и, следовательно, может работать на любой платформе, на которой работает Node.
    
- 
    
- В этой статье мы предоставляем инструкции по установке для Windows, macOS и Ubuntu Linux.
    
+
    В этой статье мы предоставляем инструкции по установке для Windows, macOS и Ubuntu Linux.
    
 
-
    Какую версию Node / Express следует использовать?
    
+
    Какую версию Node / Express следует использовать?
    
 
-
    Существует множество выпусков Node - более новые выпуски содержат исправления ошибок, поддержку более свежих версий стандартов ECMAScript (JavaScript) и улучшения API-интерфейсов Node.
    
- 
    
- Как правило, вы должны использовать самый последний выпуск LTS (с долгосрочной поддержкой), поскольку он будет более стабильным, чем «текущий» выпуск, при этом все ещё имея относительно недавние функции (и все ещё активно поддерживается). Вы должны использовать Текущий выпуск, если вам нужна функция, которой нет в версии LTS.
    
- 
    
- Для Express вы всегда должны использовать последнюю версию.
    
+
    Существует множество выпусков Node - более новые выпуски содержат исправления ошибок, поддержку более свежих версий стандартов ECMAScript (JavaScript) и улучшения API-интерфейсов Node.
    
 
-
    Как насчёт баз данных и других зависимостей?
    
+
    Как правило, вы должны использовать самый последний выпуск LTS (с долгосрочной поддержкой), поскольку он будет более стабильным, чем «текущий» выпуск, при этом все ещё имея относительно недавние функции (и все ещё активно поддерживается). Вы должны использовать Текущий выпуск, если вам нужна функция, которой нет в версии LTS.
    
 
-
    Другие зависимости, такие как драйверы баз данных, механизмы шаблонов, механизмы аутентификации и т. д., Являются частью приложения и импортируются в среду приложения с помощью диспетчера пакетов NPM. Мы обсудим их в следующих статьях для конкретных приложений.
    
+
    Для Express вы всегда должны использовать последнюю версию.
    
+
+
    Как насчёт баз данных и других зависимостей?
    
+
+
    Другие зависимости, такие как драйверы баз данных, механизмы шаблонов, механизмы аутентификации и т. д., Являются частью приложения и импортируются в среду приложения с помощью диспетчера пакетов NPM. Мы обсудим их в следующих статьях для конкретных приложений.
    
 
 
    Установка Node
    
 
-
    Чтобы использовать Express, сначала необходимо установить Nodejs и Node Package Manager (NPM) в вашей операционной системе. В следующих разделах описывается самый простой способ установки версии Nodejs с долгосрочной поддержкой (LTS) в Ubuntu Linux 16.04, macOS и Windows 10.
    
+
    Чтобы использовать Express, сначала необходимо установить Nodejs и Node Package Manager (NPM) в вашей операционной системе. В следующих разделах описывается самый простой способ установки версии Nodejs с долгосрочной поддержкой (LTS) в Ubuntu Linux 16.04, macOS и Windows 10.
    
 
 
    
-
    Совет: В следующих разделах показан самый простой способ установки Node и NPM на наши целевые платформы ОС. Если вы используете другую ОС или просто хотите увидеть некоторые другие подходы для текущих платформ, см. Установка Node.js через менеджер пакетов (nodejs.org).
    
+
    Совет: В следующих разделах показан самый простой способ установки Node и NPM на наши целевые платформы ОС. Если вы используете другую ОС или просто хотите увидеть некоторые другие подходы для текущих платформ, см. Установка Node.js через менеджер пакетов (nodejs.org).
    
 
    
 
 
    Windows и macOS
    
 
-
    Установка Node и NPM в Windows и macOS проста, потому что вы можете просто использовать предоставленный инсталлятор:
    
+
    Установка Node и NPM в Windows и macOS проста, потому что вы можете просто использовать предоставленный инсталлятор:
    
 
 
      
- 
    1. Загрузите необходимый установщик:
+ 
    2. Загрузите необходимый установщик:
 
   
        
    
      1. Перейдите по ссылке https://nodejs.org/en/
        2. 
-   
      2. Нажмите кнопку, чтобы загрузить сборку LTS, которая «Рекомендуется для большинства пользователей».
        3. 
+   
      3. Нажмите кнопку, чтобы загрузить сборку LTS, которая «Рекомендуется для большинства пользователей».
        4. 
   
      
  
      3. 
- 
    3. Установите Node, дважды щёлкнув по загруженному файлу и следуя инструкциям по установке.
      4. 
+ 
    4. Установите Node, дважды щёлкнув по загруженному файлу и следуя инструкциям по установке.
      5. 
 
    
 
 
    Ubuntu 16.04
    
 
-
    Самый простой способ установить последнюю версию LTS Node 6.x - это использовать package manager чтобы получить его из репозитория бинарных дистрибутивов Ubuntu. Это можно сделать очень просто, выполнив следующие две команды на вашем терминале:
    
+
    Самый простой способ установить последнюю версию LTS Node 6.x - это использовать package manager чтобы получить его из репозитория бинарных дистрибутивов Ubuntu. Это можно сделать очень просто, выполнив следующие две команды на вашем терминале:
    
 
 
    curl -sL https://deb.nodesource.com/setup_8.x | sudo -E bash -
 sudo apt-get install -y nodejs
 
    
 
 
    
-
    Внимание: Не устанавливайте напрямую из обычных репозиториев Ubuntu, поскольку они содержат очень старые версии узла.
    
+
    Внимание: Не устанавливайте напрямую из обычных репозиториев Ubuntu, поскольку они содержат очень старые версии узла.
    
 
    
 
 
      
@@ -98,20 +98,20 @@ 
      Ubuntu 16.04
      
 
 
      Проверка вашей установки Nodejs и NPM
      
 
-
      Самый простой способ проверить, установлен ли этот узел, - это запустить команду «версия» в своём терминале / командной строке и проверить, что возвращается строка версии:
      
+
      Самый простой способ проверить, установлен ли этот узел, - это запустить команду «версия» в своём терминале / командной строке и проверить, что возвращается строка версии:
      
 
 
      >node -v
 v8.11.3
      
 
-
      Менеджер пакетов Nodejs NPM также должен быть установлен и может быть протестирован таким же образом:
      
+
      Менеджер пакетов Nodejs NPM также должен быть установлен и может быть протестирован таким же образом:
      
 
 
      >npm -v
 5.8.0
      
 
-
      В качестве немного более захватывающего теста давайте создадим очень простой сервер «чистого узла», который просто печатает «Hello World» в браузере, когда вы посещаете правильный URL в вашем браузере:
      
+
      В качестве немного более захватывающего теста давайте создадим очень простой сервер «чистого узла», который просто печатает «Hello World» в браузере, когда вы посещаете правильный URL в вашем браузере:
      
 
 
        
- 
      1. Скопируйте следующий текст в файл с именем hellonode.js. Здесь используются чистые функции Node (ничего из Express) и некоторый синтаксис ES6:
+ 
      2. Скопируйте следующий текст в файл с именем hellonode.js. Здесь используются чистые функции Node (ничего из Express) и некоторый синтаксис ES6:
 
   
        //Загрузка модуля HTTP
 const http = require("http");
@@ -134,48 +134,48 @@ 
        Прове
 
 
        
 
-  
        Код импортирует модуль «http» и использует его для создания сервера (createServer ()), который обрабатывает HTTP-запросы на порту 3000. Затем сценарий выводит на консоль сообщение о том, какой URL-адрес браузера можно использовать для тестирования сервера. Функция createServer () принимает в качестве аргумента колбэк-функцию, которая будет вызываться при получении HTTP-запроса - она просто возвращает ответ с кодом состояния HTTP 200 («ОК») и простым текстом «Hello World».
        
+  
        Код импортирует модуль «http» и использует его для создания сервера (createServer ()), который обрабатывает HTTP-запросы на порту 3000. Затем сценарий выводит на консоль сообщение о том, какой URL-адрес браузера можно использовать для тестирования сервера. Функция createServer () принимает в качестве аргумента колбэк-функцию, которая будет вызываться при получении HTTP-запроса - она просто возвращает ответ с кодом состояния HTTP 200 («ОК») и простым текстом «Hello World».
        
 
   
        
-  
        Замечание: не беспокойтесь, если вы ещё не совсем понимаете, что делает этот код! Мы объясним наш код более подробно, как только мы начнём использовать Express!
        
+  
        Замечание: не беспокойтесь, если вы ещё не совсем понимаете, что делает этот код! Мы объясним наш код более подробно, как только мы начнём использовать Express!
        
   
        
  
        3. 
- 
      3. Запустите сервер, перейдя в тот же каталог, что и ваш файл hellonode.js в командной строке, и вызвав узел вместе с именем скрипта, например так:
+ 
      4. Запустите сервер, перейдя в тот же каталог, что и ваш файл hellonode.js в командной строке, и вызвав узел вместе с именем скрипта, например так:
   
        >node hellonode.js
 Server running at http://127.0.0.1:3000/
 
        
  
        5. 
- 
      5. Перейдите к URL-адресу http://127.0.0.1:3000. Если все работает, браузер должен просто отобразить строку «Hello World».
        6. 
+ 
      6. Перейдите к URL-адресу http://127.0.0.1:3000. Если все работает, браузер должен просто отобразить строку «Hello World».
        7. 
 
      
 
 
      Использование NPM
      
 
-
      Помимо самого Node, NPM является наиболее важным инструментом для работы с приложениями Node. NPM используется для получения любых пакетов (библиотек JavaScript), которые необходимы приложению для разработки, тестирования и / или производства, а также может использоваться для запуска тестов и инструментов, используемых в процессе разработки.
      
+
      Помимо самого Node, NPM является наиболее важным инструментом для работы с приложениями Node. NPM используется для получения любых пакетов (библиотек JavaScript), которые необходимы приложению для разработки, тестирования и / или производства, а также может использоваться для запуска тестов и инструментов, используемых в процессе разработки.
      
 
 
      
-
      Замечание:  С точки зрения Node, Express - это просто ещё один пакет, который вам нужно установить с помощью NPM, а затем установить его в своём собственном коде.
      
+
      Замечание:  С точки зрения Node, Express - это просто ещё один пакет, который вам нужно установить с помощью NPM, а затем установить его в своём собственном коде.
      
 
      
 
-
      Вы можете вручную использовать NPM для получения каждого необходимого пакета отдельно. Обычно мы вместо этого управляем зависимостями, используя простой текстовый файл с именем package.json. В этом файле перечислены все зависимости для конкретного «пакета» JavaScript, включая имя пакета, версию, описание, исходный файл для выполнения, производственные зависимости, зависимости разработки, версии Node, с которыми он может работать, и т. Д. Файл package.json должен содержать все, что нужно NPM для загрузки и запуска вашего приложения (если вы пишете библиотеку многократного использования, вы можете использовать это определение для загрузки пакета в репозиторий npm и сделать его доступным для других пользователей).
      
+
      Вы можете вручную использовать NPM для получения каждого необходимого пакета отдельно. Обычно мы вместо этого управляем зависимостями, используя простой текстовый файл с именем package.json. В этом файле перечислены все зависимости для конкретного «пакета» JavaScript, включая имя пакета, версию, описание, исходный файл для выполнения, производственные зависимости, зависимости разработки, версии Node, с которыми он может работать, и т. Д. Файл package.json должен содержать все, что нужно NPM для загрузки и запуска вашего приложения (если вы пишете библиотеку многократного использования, вы можете использовать это определение для загрузки пакета в репозиторий npm и сделать его доступным для других пользователей).
      
 
 
      Добавление зависимостей
      
 
-
      Следующие шаги показывают, как вы можете использовать NPM для загрузки пакета, сохранить его в зависимостях проекта, а затем потребовать его в приложении Node.
      
+
      Следующие шаги показывают, как вы можете использовать NPM для загрузки пакета, сохранить его в зависимостях проекта, а затем потребовать его в приложении Node.
      
 
 
      
-
      Замечание:  Здесь мы показываем инструкции для получения и установки пакета Express. Позже мы покажем, как этот пакет и другие уже указаны для нас с помощью Express Application Generator. Этот раздел предоставлен, потому что полезно понять, как работает NPM и что создаётся генератором приложений.
      
+
      Замечание:  Здесь мы показываем инструкции для получения и установки пакета Express. Позже мы покажем, как этот пакет и другие уже указаны для нас с помощью Express Application Generator. Этот раздел предоставлен, потому что полезно понять, как работает NPM и что создаётся генератором приложений.
      
 
      
 
 
        
- 
      1. Сначала создайте каталог для вашего нового приложения и перейдите в него:
+ 
      2. Сначала создайте каталог для вашего нового приложения и перейдите в него:
 
   
        mkdir myapp
 cd myapp
        
  
        3. 
- 
      3. Используйте команду npm init для создания файла package.json для вашего приложения. Эта команда запрашивает у вас несколько вещей, включая имя и версию вашего приложения, а также имя исходного файла точки входа (по умолчанию это index.js). Сейчас просто примите значения по умолчанию:
+ 
      4. Используйте команду npm init для создания файла package.json для вашего приложения. Эта команда запрашивает у вас несколько вещей, включая имя и версию вашего приложения, а также имя исходного файла точки входа (по умолчанию это index.js). Сейчас просто примите значения по умолчанию:
   
        npm init
        
 
-  
        Если вы отобразите файл package.json (cat package.json), вы увидите принятые по умолчанию значения, заканчивающиеся лицензией.
        
+  
        Если вы отобразите файл package.json (cat package.json), вы увидите принятые по умолчанию значения, заканчивающиеся лицензией.
        
 
   
        {
   "name": "myapp",
@@ -190,11 +190,11 @@ 
        Добавление за
 }
 
        
  
        5. 
- 
      5. Теперь установите Express в каталог myapp и сохраните его в списке зависимостей вашего файла package.json
        6. 
+ 
      6. Теперь установите Express в каталог myapp и сохраните его в списке зависимостей вашего файла package.json
        7. 
  
      7. 
   
        npm install express --save
        
 
-  
        Раздел зависимостей вашего package.json теперь появится в конце файла package.json и будет содержать Express.
        
+  
        Раздел зависимостей вашего package.json теперь появится в конце файла package.json и будет содержать Express.
        
 
   
        {
   "name": "myapp",
@@ -212,7 +212,7 @@ 
        Добавление за
 }
 
        
  
        8. 
- 
      8. Для использования библиотеки вы вызываете функцию require (), как показано ниже в вашем файле index.js.
+ 
      9. Для использования библиотеки вы вызываете функцию require (), как показано ниже в вашем файле index.js.
   
        const express = require('express')
 const app = express();
 
@@ -225,25 +225,25 @@ 
        Добавление за
 });
 
        
 
-  
        Этот код показывает минимальное веб-приложение Express «HelloWorld». Это импортирует модуль «экспресс» и использует его для создания сервера (приложения), который обрабатывает HTTP-запросы на порту 8000 и выводит на консоль сообщение, объясняющее, какой URL-адрес браузера можно использовать для тестирования сервера. Функция app.get () отвечает только на запросы HTTP GET с указанным URL-путём ('/'), в этом случае вызывая функцию для отправки нашего Hello World! сообщение.
        
+  
        Этот код показывает минимальное веб-приложение Express «HelloWorld». Это импортирует модуль «экспресс» и использует его для создания сервера (приложения), который обрабатывает HTTP-запросы на порту 8000 и выводит на консоль сообщение, объясняющее, какой URL-адрес браузера можно использовать для тестирования сервера. Функция app.get () отвечает только на запросы HTTP GET с указанным URL-путём ('/'), в этом случае вызывая функцию для отправки нашего Hello World! сообщение.
        
    
        
-   Создайте файл с именем index.js в корне каталога приложения «myapp» и передайте ему содержимое, показанное выше.
        
+   Создайте файл с именем index.js в корне каталога приложения «myapp» и передайте ему содержимое, показанное выше.
        
  
        10. 
- 
      10. Вы можете запустить сервер, вызвав узел с помощью скрипта в командной строке:
+ 
      11. Вы можете запустить сервер, вызвав узел с помощью скрипта в командной строке:
   
        >node index.js
 Example app listening on port 8000
 
        
  
        12. 
- 
      12. Перейдите к URL  (http://127.0.0.1:8000/) . Если все работает, браузер должен просто отобразить строку «Hello World!».
        13. 
+ 
      13. Перейдите к URL  (http://127.0.0.1:8000/) . Если все работает, браузер должен просто отобразить строку «Hello World!».
        14. 
 
      
 
 
      Зависимости разработки
      
 
-
      Если зависимость используется только во время разработки, вы должны вместо этого сохранить её как «зависимость разработки» (чтобы пользователям вашего пакета не приходилось устанавливать её в производстве). Например, чтобы использовать популярный инструмент JavaScript Linting eslint, вы должны вызвать NPM, как показано ниже:
      
+
      Если зависимость используется только во время разработки, вы должны вместо этого сохранить её как «зависимость разработки» (чтобы пользователям вашего пакета не приходилось устанавливать её в производстве). Например, чтобы использовать популярный инструмент JavaScript Linting eslint, вы должны вызвать NPM, как показано ниже:
      
 
 
      npm install eslint --save-dev
      
 
-
      Следующая запись будет добавлена в package.json вашего приложения:
      
+
      Следующая запись будет добавлена в package.json вашего приложения:
      
 
 
        "devDependencies": {
     "eslint": "^4.12.1"
@@ -251,18 +251,18 @@ 
      Зависимости ра
 
      
 
 
      
-
      Примечание: «Линтеры» - это инструменты, которые выполняют статический анализ программного обеспечения, чтобы распознавать и сообщать о приверженности / несоблюдении некоторого набора лучших практик кодирования.
      
+
      Примечание: «Линтеры» - это инструменты, которые выполняют статический анализ программного обеспечения, чтобы распознавать и сообщать о приверженности / несоблюдении некоторого набора лучших практик кодирования.
      
 
      
 
-
      Запуск задач
      
+
      Запуск задач
      
 
-
      В дополнение к определению и извлечению зависимостей вы также можете определить именованные скрипты в ваших файлах package.json и вызвать NPM, чтобы выполнить их с помощью команды run-script. Этот подход обычно используется для автоматизации выполнения тестов и частей набора инструментов разработки или сборки (например, запуска инструментов для минимизации JavaScript, сжатия изображений, LINT / анализа вашего кода и т. Д.).
      
+
      В дополнение к определению и извлечению зависимостей вы также можете определить именованные скрипты в ваших файлах package.json и вызвать NPM, чтобы выполнить их с помощью команды run-script. Этот подход обычно используется для автоматизации выполнения тестов и частей набора инструментов разработки или сборки (например, запуска инструментов для минимизации JavaScript, сжатия изображений, LINT / анализа вашего кода и т. Д.).
      
 
 
      
-
      Замечание: Для запуска тестов и других внешних инструментов могут также использоваться такие исполнители, как Gulp и Grunt.
      
+
      Замечание: Для запуска тестов и других внешних инструментов могут также использоваться такие исполнители, как Gulp и Grunt.
      
 
      
 
-
      Например, чтобы определить скрипт для запуска зависимости разработки eslint, которую мы указали в предыдущем разделе, мы могли бы добавить следующий блок скрипта в наш файл package.json (при условии, что наш источник приложения находится в папке / src / js):
      
+
      Например, чтобы определить скрипт для запуска зависимости разработки eslint, которую мы указали в предыдущем разделе, мы могли бы добавить следующий блок скрипта в наш файл package.json (при условии, что наш источник приложения находится в папке / src / js):
      
 
 
      "scripts": {
   ...
@@ -271,38 +271,38 @@ 
      
 
-
      Чтобы пояснить немного подробнее, eslint src / js - это команда, которую мы могли бы ввести в нашем терминале / командной строке, чтобы запустить eslint для файлов JavaScript, содержащихся в каталоге src / js внутри каталога нашего приложения. Включение вышеупомянутого в файл package.json нашего приложения обеспечивает ярлык для этой команды - lint.
      
+
      Чтобы пояснить немного подробнее, eslint src / js - это команда, которую мы могли бы ввести в нашем терминале / командной строке, чтобы запустить eslint для файлов JavaScript, содержащихся в каталоге src / js внутри каталога нашего приложения. Включение вышеупомянутого в файл package.json нашего приложения обеспечивает ярлык для этой команды - lint.
      
 
-
      Затем мы сможем запустить eslint с помощью NPM, вызвав:
      
+
      Затем мы сможем запустить eslint с помощью NPM, вызвав:
      
 
 
      npm run-script lint
 # OR (using the alias)
 npm run lint
 
      
 
-
      Этот пример может выглядеть не короче, чем исходная команда, но вы можете включить в свои сценарии npm гораздо более крупные команды, включая цепочки из нескольких команд. Вы можете определить один скрипт npm, который запускает все ваши тесты одновременно.
      
+
      Этот пример может выглядеть не короче, чем исходная команда, но вы можете включить в свои сценарии npm гораздо более крупные команды, включая цепочки из нескольких команд. Вы можете определить один скрипт npm, который запускает все ваши тесты одновременно.
      
 
 
      Установка Express Application Generator
      
 
-
      Инструмент Express Application Generator создаёт «скелет» приложения Express. Установите генератор, используя NPM, как показано (флаг -g устанавливает инструмент глобально, чтобы вы могли вызывать его из любого места):
      
+
      Инструмент Express Application Generator создаёт «скелет» приложения Express. Установите генератор, используя NPM, как показано (флаг -g устанавливает инструмент глобально, чтобы вы могли вызывать его из любого места):
      
 
 
      npm install express-generator -g
      
 
-
      Чтобы создать приложение Express с именем «helloworld» с настройками по умолчанию, перейдите туда, где вы хотите его создать, и запустите приложение, как показано ниже:
      
+
      Чтобы создать приложение Express с именем «helloworld» с настройками по умолчанию, перейдите туда, где вы хотите его создать, и запустите приложение, как показано ниже:
      
 
 
      express helloworld
      
 
 
      
-
      Замечание: Вы также можете указать библиотеку шаблонов для использования и ряд других настроек. Используйте команду help, чтобы увидеть все параметры:
      
+
      Замечание: Вы также можете указать библиотеку шаблонов для использования и ряд других настроек. Используйте команду help, чтобы увидеть все параметры:
      
 
 
      express --help
 
      
 
      
 
-
      NPM создаст новое приложение Express в подпапке вашего текущего местоположения, отображая процесс сборки на консоли. По завершении инструмент отобразит команды, которые необходимо ввести, чтобы установить зависимости Node и запустить приложение.
      
+
      NPM создаст новое приложение Express в подпапке вашего текущего местоположения, отображая процесс сборки на консоли. По завершении инструмент отобразит команды, которые необходимо ввести, чтобы установить зависимости Node и запустить приложение.
      
 
 
      
-
      Новое приложение будет иметь файл package.json в своём корневом каталоге. Вы можете открыть это, чтобы увидеть, какие зависимости установлены, включая Express и библиотеку шаблонов Jade:
      
+
      Новое приложение будет иметь файл package.json в своём корневом каталоге. Вы можете открыть это, чтобы увидеть, какие зависимости установлены, включая Express и библиотеку шаблонов Jade:
      
 
 
      {
   "name": "helloworld",
@@ -323,13 +323,13 @@ 
      Установка Exp
 }
      
 
      
 
-
      Установите все зависимости для приложения helloworld, используя NPM, как показано ниже:
      
+
      Установите все зависимости для приложения helloworld, используя NPM, как показано ниже:
      
 
 
      cd helloworld
 npm install
 
      
 
-
      Затем запустите приложение (команды немного отличаются для Windows и Linux / macOS), как показано ниже:
      
+
      Затем запустите приложение (команды немного отличаются для Windows и Linux / macOS), как показано ниже:
      
 
 
      # Run the helloworld on Windows with Command Prompt
 SET DEBUG=helloworld:* & npm start
@@ -341,7 +341,7 @@ 
      Установка Exp
 DEBUG=helloworld:* npm start
 
      
 
-
      Команда DEBUG создаёт полезное ведение журнала, что приводит к выводу, подобному показанному ниже.
      
+
      Команда DEBUG создаёт полезное ведение журнала, что приводит к выводу, подобному показанному ниже.
      
 
 
      >SET DEBUG=helloworld:* & npm start
 
@@ -350,20 +350,20 @@ 
      Установка Exp
 
   helloworld:server Listening on port 3000 +0ms
      
 
-
      Откройте браузер и перейдите по адресу http://127.0.0.1:3000/, чтобы увидеть страницу приветствия Express по умолчанию.
      
+
      Откройте браузер и перейдите по адресу http://127.0.0.1:3000/, чтобы увидеть страницу приветствия Express по умолчанию.
      
 
 
      Express - Generated App Default Screen
      
 
-
      Мы поговорим больше о сгенерированном приложении, когда перейдём к статье о создании каркасного приложения.
      
+
      Мы поговорим больше о сгенерированном приложении, когда перейдём к статье о создании каркасного приложения.
      
 
 
        
 
      
 
 
      Резюме
      
 
-
      Теперь на вашем компьютере установлена и запущена среда разработки Node, которую можно использовать для создания веб-приложений Express. Вы также увидели, как NPM можно использовать для импорта Express в приложение, а также как вы можете создавать приложения с помощью инструмента Express Application Generator и затем запускать их.
      
- 
      
- В следующей статье мы начнём работу с учебным пособием по созданию полноценного веб-приложения с использованием этой среды и связанных инструментов.
      
+
      Теперь на вашем компьютере установлена и запущена среда разработки Node, которую можно использовать для создания веб-приложений Express. Вы также увидели, как NPM можно использовать для импорта Express в приложение, а также как вы можете создавать приложения с помощью инструмента Express Application Generator и затем запускать их.
      
+
+
      В следующей статье мы начнём работу с учебным пособием по созданию полноценного веб-приложения с использованием этой среды и связанных инструментов.
      
 
 
      Смотрите также
      
 
diff --git a/files/ru/learn/server-side/express_nodejs/displaying_data/author_list_page/index.html b/files/ru/learn/server-side/express_nodejs/displaying_data/author_list_page/index.html
index 8ccf967913854e..0f6da75b4be207 100644
--- a/files/ru/learn/server-side/express_nodejs/displaying_data/author_list_page/index.html
+++ b/files/ru/learn/server-side/express_nodejs/displaying_data/author_list_page/index.html
@@ -5,48 +5,48 @@
 ---
 
      Страница списка авторов должна показывать список всех авторов, хранимых в БД, причём каждое имя автора должно быть связано со страницей подробностей для этого автора. Дата рождения автора и дата смерти должны выводиться в одной строке после имени автора.
      
 
-
      Контроллер
      
+
      Контроллер
      
 
 
      Функция контроллера списка авторов должна получить список всех элементов в  Author , и передать этот список в шаблон для отображения.
      
 
 
      Откройте файл /controllers/authorController.js. Найдите экспортируемый метод author_list() в начале файла и замените его следующим ниже кодом:
      
 
-
      // Display list of all Authors.
-exports.author_list = function(req, res, next) {
+
      // Display list of all Authors.
+exports.author_list = function(req, res, next) {
 
-  Author.find()
-    .sort([['family_name', 'ascending']])
-    .exec(function (err, list_authors) {
-      if (err) { return next(err); }
-      //Successful, so render
-      res.render('author_list', { title: 'Author List', author_list: list_authors });
-    });
+  Author.find()
+    .sort([['family_name', 'ascending']])
+    .exec(function (err, list_authors) {
+      if (err) { return next(err); }
+      //Successful, so render
+      res.render('author_list', { title: 'Author List', author_list: list_authors });
+    });
 
-};
      
+};
      
 
 
      Метод использует такие функции модели как find(), sort() и exec() для того, чтобы вернуть все объекты  Author отсортированными по  family_name в алфавитном порядке. В вызове exec() колбэк-функция имеет первый параметр- объект ошибок  (или null) и второй параметр - список всех авторов, если ошибок не было. При ошибках вызывается следующая функция промежуточного слоя  с полученным значением объекта ошибок, а если ошибок не было, отображается шаблон author_list(.pug), передавая странице title и список авторов (author_list).
      
 
-
      Представление
      
+
      Представление
      
 
 
      Создайте файл /views/author_list.pug и поместите в него следующий текст:
      
 
-
      extends layout
+
      extends layout
 
 block content
-  h1= title
+  h1= title
 
   ul
-    each author in author_list
+    each author in author_list
       li
-        a(href=author.url) #{author.name}
-        |  (#{author.date_of_birth} - #{author.date_of_death})
+        a(href=author.url) #{author.name}
+        |  (#{author.date_of_birth} - #{author.date_of_death})
 
-    else
-      li There are no authors.
      
+    else
+      li There are no authors.
      
 
 
      Представление создано по тому же образцу, что и другие шаблоны.
      
 
-
      Как это выглядит?
      
+
      Как это выглядит?
      
 
 
      Запустите приложение и откройте браузер с адресом http://localhost:3000/. Выберите ссылку All authors. Если все было сделано правильно, страница должна выглядеть примерно так, как на следующем скриншоте.
      
 
@@ -58,7 +58,7 @@ 
      Тест - страница списка жанров!Edit
      
+
      Тест - страница списка жанров!Edit
      
 
 
      В этой части требуется создать собственную страницу списка жанров. Страница должна показывать жанры, имеющиеся в БД, а для каждого жанра должна быть создана ссылка на страницу с детальной информацией. Скриншот ожидаемого результата приводится ниже.
      
 
diff --git a/files/ru/learn/server-side/express_nodejs/displaying_data/book_list_page/index.html b/files/ru/learn/server-side/express_nodejs/displaying_data/book_list_page/index.html
index 35d29d59093130..82238d5e295e99 100644
--- a/files/ru/learn/server-side/express_nodejs/displaying_data/book_list_page/index.html
+++ b/files/ru/learn/server-side/express_nodejs/displaying_data/book_list_page/index.html
@@ -5,46 +5,46 @@
 ---
 
      Далее мы реализуем нашу страницу списка книг. На этой странице должен отображаться список всех книг и их авторов в базе данных, причём каждое название книги является гиперссылкой на соответствующую страницу сведений о книге.
      
 
-
      Контроллер
      
+
      Контроллер
      
 
 
      Функция контроллера списка книг должна получить список всех объектов Book в базе данных, а затем передать их для отрисовки шаблона.
      
 
 
      Откройте файл /controllers/bookController.js. Найдите экспортируемый метод контроллера  book_list() и замените его следующим кодом.
      
 
-
      // Display list of all Books.
-exports.book_list = function(req, res, next) {
+
      // Display list of all Books.
+exports.book_list = function(req, res, next) {
 
-  Book.find({}, 'title author')
-    .populate('author')
-    .exec(function (err, list_books) {
-      if (err) { return next(err); }
-      //Successful, so render
-      res.render('book_list', { title: 'Book List', book_list: list_books });
-    });
+  Book.find({}, 'title author')
+    .populate('author')
+    .exec(function (err, list_books) {
+      if (err) { return next(err); }
+      //Successful, so render
+      res.render('book_list', { title: 'Book List', book_list: list_books });
+    });
 
-};
      
+};
      
 
 
      Метод использует функцию моделиfind() для возврата всех объектов Book, выбрав для возврата только заголовок и автора, поскольку нам не нужны другие поля (он также вернёт _id и виртуальные поля). Здесь мы также вызываем populate() on Book, указывая поле  author —это заменит сохранённый идентификатор автора книги полными сведениями об авторе.
      
 
 
      При успешном выполнении, колбэк передаст запрос на отрисовку шаблона book_list(.pug), передаст title иbook_list (список книг с автором) в качестве переменных.
      
 
-
      Представление
      
+
      Представление
      
 
 
      Создайте файл /views/book_list.pug и скопируйте в него текст ниже.
      
 
-
      extends layout
+
      extends layout
 
 block content
-  h1= title
+  h1= title
 
   ul
-  each book in book_list
+  each book in book_list
     li
-      a(href=book.url) #{book.title}
-      |  (#{book.author.name})
+      a(href=book.url) #{book.title}
+      |  (#{book.author.name})
 
-  else
-    li There are no books.
      
+  else
+    li There are no books.
      
 
 
      View расширит базовый шаблон layout.pug и переопределит block с именем 'content'. Он отображает  title который мы передали из контроллера (с помощью метода render() ), а затем перебирает переменную book_list  используя синтаксис each-in-else . Для каждой книги создаётся элемент списка, отображающий название книги в виде ссылки на страницу сведений о книге, за которой следует имя автора. Если в  book_list нет книг,  то выполняется else, и  отображается текст "нет книг".'
      
 
diff --git a/files/ru/learn/server-side/express_nodejs/displaying_data/bookinstance_list_page/index.html b/files/ru/learn/server-side/express_nodejs/displaying_data/bookinstance_list_page/index.html
index a51e8c03f76076..1477f7ac44a490 100644
--- a/files/ru/learn/server-side/express_nodejs/displaying_data/bookinstance_list_page/index.html
+++ b/files/ru/learn/server-side/express_nodejs/displaying_data/bookinstance_list_page/index.html
@@ -5,24 +5,24 @@
 ---
 
      Далее мы реализуем список всех имеющихся в библиотеке копий книги (BookInstance) . Эта страница должна включать название книги из Book,  с которой связаны экземпляры BookInstance (linked to its detail page), а также дополнительную информацию, имеющуюся в модели BookInstance, включая статус, издание, и уникальный идентификатор каждой копии. Уникальное значение идентификатора копии должно быть связано со страницей детальной информации BookInstance.
      
 
-
      Контроллер
      
+
      Контроллер
      
 
 
      Функция контроллера списка BookInstance требуется для получения списка всех экземпляров некоторой книги, для получения информации, связанной с книгой, и для передачи полученного списка в шаблон для отображения.
      
 
 
      Откройте файл /controllers/bookinstanceController.js. Найдите экспортируемый метод bookinstance_list() контроллера и замените его следующим кодом (изменённый код выделен жирным).
      
 
-
      // Display list of all BookInstances.
-exports.bookinstance_list = function(req, res, next) {
+
      // Display list of all BookInstances.
+exports.bookinstance_list = function(req, res, next) {
 
-  BookInstance.find()
-    .populate('book')
-    .exec(function (err, list_bookinstances) {
-      if (err) { return next(err); }
-      // Successful, so render
-      res.render('bookinstance_list', { title: 'Book Instance List', bookinstance_list: list_bookinstances });
-    });
+  BookInstance.find()
+    .populate('book')
+    .exec(function (err, list_bookinstances) {
+      if (err) { return next(err); }
+      // Successful, so render
+      res.render('bookinstance_list', { title: 'Book Instance List', bookinstance_list: list_bookinstances });
+    });
 
-};
      
+};
      
 
 
      Чтобы вернуть все объекты BookInstance, метод использует функцию find() модели. Далее в цепочке вызывается метод populate() с аргументом - полем book, что приводит к замене идентификатора id, хранящегося для каждого экземпляра BookInstance полным документом Book.
      
 
@@ -32,30 +32,30 @@ 
      Представл
 
 
      Создайте файл  /views/bookinstance_list.pug и скопируйте в него текст, приведённый ниже.
      
 
-
      extends layout
+
      extends layout
 
 block content
-  h1= title
+  h1= title
 
   ul
-    each val in bookinstance_list
+    each val in bookinstance_list
       li
-        a(href=val.url) #{val.book.title} : #{val.imprint} -
-        if val.status=='Available'
-          span.text-success #{val.status}
-        else if val.status=='Maintenance'
-          span.text-danger #{val.status}
-        else
-          span.text-warning #{val.status}
-        if val.status!='Available'
-          span  (Due: #{val.due_back} )
-
-    else
-      li There are no book copies in this library.
      
+        a(href=val.url) #{val.book.title} : #{val.imprint} -
+        if val.status=='Available'
+          span.text-success #{val.status}
+        else if val.status=='Maintenance'
+          span.text-danger #{val.status}
+        else
+          span.text-warning #{val.status}
+        if val.status!='Available'
+          span  (Due: #{val.due_back} )
+
+    else
+      li There are no book copies in this library.
      
 
 
      This view is much the same as all the others. It extends the layout, replacing the content block, displays the title passed in from the controller, and iterates through all the book copies in bookinstance_list. For each copy we display its status (colour coded) and if the book is not available, its expected return date. One new feature is introduced—we can use dot notation after a tag to assign a class. So span.text-success will be compiled to <span class="text-success"> (and might also be written in Pug as span(class="text-success").
      
 
-
      What does it look like?
      
+
      What does it look like?
      
 
 
      Run the application, open your browser to http://localhost:3000/, then select the All book-instances link. If everything is set up correctly, your site should look something like the following screenshot.
      
 
diff --git a/files/ru/learn/server-side/express_nodejs/displaying_data/date_formatting_using_moment/index.html b/files/ru/learn/server-side/express_nodejs/displaying_data/date_formatting_using_moment/index.html
index eec00f00daf107..171b72d6cb22b9 100644
--- a/files/ru/learn/server-side/express_nodejs/displaying_data/date_formatting_using_moment/index.html
+++ b/files/ru/learn/server-side/express_nodejs/displaying_data/date_formatting_using_moment/index.html
@@ -11,40 +11,40 @@
 
      Примечание: Можно применять moment для форматирования непосредственно в шаблонах Pug, а можно отформатировать строку в других местах. Использование виртуального свойства позволяет получить дату, отформатированную точно так же, как при помощи due_date. 
      
 
    
 
-
    Установка moment
    
+
    Установка moment
    
 
 
    Ведите следующую команду в корне проекта:
    
 
 
    npm install moment
    
 
-
    Создание виртуального свойства
    
+
    Создание виртуального свойства
    
 
 
      
  
    1. Откройте файл ./models/bookinstance.js.
      2. 
  
    2. В начало файла введите строку для импортирования moment.
-  
      var moment = require('moment');
      
+  
      var moment = require('moment');
      
  
      3. 
 
    
 
 
    Добавьте виртуальное свойство due_back_formatted сразу после свойства url.
    
 
 
    BookInstanceSchema
-.virtual('due_back_formatted')
-.get(function () {
-  return moment(this.due_back).format('MMMM Do, YYYY');
-});
    
+.virtual('due_back_formatted')
+.get(function () {
+  return moment(this.due_back).format('MMMM Do, YYYY');
+});
    
 
 
    
 
    Примечание: Метод format method может вывести дату почти по любому образцу. Синтаксис для представления различных составляющих даты можно найти в документации ( moment documentation).
    
 
    
 
-
    Обновляем представление
    
+
    Обновляем представление
    
 
 
    Откройте файл /views/bookinstance_list.pug и замените due_back на due_back_formatted.
    
 
-
          if val.status!='Available'
-        //span  (Due: #{val.due_back} )
-        span  (Due: #{val.due_back_formatted} )       
    
+
          if val.status!='Available'
+        //span  (Due: #{val.due_back} )
+        span  (Due: #{val.due_back_formatted} )       
    
 
 
    Вот и все. Если вы перейдёте к  All book-instances в боковом меню, вы должны увидеть все даты  в привлекательном формате!
    
 
diff --git a/files/ru/learn/server-side/express_nodejs/displaying_data/flow_control_using_async/index.html b/files/ru/learn/server-side/express_nodejs/displaying_data/flow_control_using_async/index.html
index 52ef2c7161e2d2..985692066ad330 100644
--- a/files/ru/learn/server-side/express_nodejs/displaying_data/flow_control_using_async/index.html
+++ b/files/ru/learn/server-side/express_nodejs/displaying_data/flow_control_using_async/index.html
@@ -20,9 +20,9 @@
  
  • async.waterfall() для операций, которые должны выполняться последовательно, причём каждая операция зависит от результатов предыдущих операций.
    • 
 
 
-
    Почему это необходимо?
    
+
    Почему это необходимо?
    
 
-
    Большинство методов, которые используются в  Express - асинхронные - вы определяете выполняемую операцию, передавая  колбэк-функцию. Метод завершается немедленно, а колбэк-функция вызывается тогда, когда завершилась запрошенная операция. По соглашению, принятому в Express, колбэк-функция передаёт значение ошибки error  как первый параметр (или null при успехе) и результат функции (если есть) как второй параметр.
    
+
    Большинство методов, которые используются в  Express - асинхронные - вы определяете выполняемую операцию, передавая  колбэк-функцию. Метод завершается немедленно, а колбэк-функция вызывается тогда, когда завершилась запрошенная операция. По соглашению, принятому в Express, колбэк-функция передаёт значение ошибки error  как первый параметр (или null при успехе) и результат функции (если есть) как второй параметр.
    
 
 
    Если контроллер должен выполнить только одну асинхронную операцию, чтобы получить информацию для представления страницы, то реализация проста - мы просто представляем шаблон в колбэке. Фрагмент кода (ниже) демонстрирует это для функции, которая подсчитывает количество элементов модели SomeModel (применяя метод Mongoose count() ):
    
 
@@ -41,7 +41,7 @@ 
    Намного лучше было бы выполнять все запросы параллельно, и иметь единственную колбэк-функцию, которая будет вызвана после того как все запросы выполнены. Именно такое выполнение операций модуль Async делает лёгким и простым!
    
 
-
    Параллельные асинхронные операции
    
+
    Параллельные асинхронные операции
    
 
 
    Метод async.parallel() используется для параллельного выполнения нескольких асинхронных операций.
    
 
@@ -51,80 +51,80 @@ 
    async.parallel({
-  one: function(callback) { ... },
-  two: function(callback) { ... },
-  ...
-  something_else: function(callback) { ... }
-  },
-  // optional callback
-  function(err, results) {
-    // 'results' равны: {one: 1, two: 2, ..., something_else: some_value}
-  }
-);
    +
    async.parallel({
+  one: function(callback) { ... },
+  two: function(callback) { ... },
+  ...
+  something_else: function(callback) { ... }
+  },
+  // optional callback
+  function(err, results) {
+    // 'results' равны: {one: 1, two: 2, ..., something_else: some_value}
+  }
+);

    Если вместо объекта передать массив функций как первый аргумент, результатом будет массив (порядок результатов в массиве такой же, как и порядок функций в массиве, а не порядок выполнения функций).

    -

    Последовательные асинхронные операции

    +

    Последовательные асинхронные операции

    -

    Для выполнения нескольких асинхронных операций последовательно используется метод async.series() , при этом последующие функции не зависят от результатов предыдущих функций. Метод определяется и ведёт себя так же, как и async.parallel().

    +

    Для выполнения нескольких асинхронных операций последовательно используется метод async.series() , при этом последующие функции не зависят от результатов предыдущих функций. Метод определяется и ведёт себя так же, как и async.parallel().

    -
    async.series({
-  one: function(callback) { ... },
-  two: function(callback) { ... },
-  ...
-  something_else: function(callback) { ... }
-  },
-  // optional callback after the last asynchronous function completes.
-  function(err, results) {
-    // 'results' is now equals to: {one: 1, two: 2, ..., something_else: some_value} 
-  }
-);
    +
    async.series({
+  one: function(callback) { ... },
+  two: function(callback) { ... },
+  ...
+  something_else: function(callback) { ... }
+  },
+  // optional callback after the last asynchronous function completes.
+  function(err, results) {
+    // 'results' is now equals to: {one: 1, two: 2, ..., something_else: some_value} 
+  }
+);

    Примечание: Спецификация языка ECMAScript (JavaScript) устанавливает, что порядок в перечислении объектов не определён, поэтому возможно, что функции не будут вызываться в том порядке, в котором вы их задали на всех платформах. Если порядок вызова действительно важен, вместо объекта следует передавать массив, как показано ниже.

    -
    async.series([
-  function(callback) {
-    // do some stuff ...
-    callback(null, 'one');
-  },
-  function(callback) {
-    // do some more stuff ... 
-    callback(null, 'two');
-  }
- ],
-  // optional callback
-  function(err, results) {
-  // results is now equal to ['one', 'two'] 
-  }
-);
    - -

    Последовательные зависимые асинхронные операции

    +
    async.series([
+  function(callback) {
+    // do some stuff ...
+    callback(null, 'one');
+  },
+  function(callback) {
+    // do some more stuff ... 
+    callback(null, 'two');
+  }
+ ],
+  // optional callback
+  function(err, results) {
+  // results is now equal to ['one', 'two'] 
+  }
+);
    + +

    Последовательные зависимые асинхронные операции

    Выполнение нескольких асинхронных операций последовательно, когда каждая операция зависит от результатов предыдущих операций, осуществляется методом async.waterfall().

    Функции-callback, которая вызываются асинхронными функциями , содержит null как первый аргумент, и результаты в следующих аргументах. Каждая функция в последовательности (кроме первой) как аргументы использует результаты предыдущих функция, а колбэк-функция является последним аргументом. Когда операции завершаются, вызывается финальная колбэк-функция, аргументы которой - объект err и результат последней операции. Как это работает, станет более ясным после рассмотрения примера - фрагмента кода, приведённого ниже ( пример взят из документации async):

    -
    async.waterfall([
-  function(callback) {//первая функция в цепочке
-    callback(null, 'one', 'two');//результаты 'one' и 'two'
-  },
-  function(arg1, arg2, callback) {//вторая функция в цепочке
-    // arg1 равен 'one' , arg2 равен  'two' 
-    callback(null, 'three'); //результат 'three'
-  },
-  function(arg1, callback) {
-    // arg1 равен 'three'
-    callback(null, 'done'); //результат 'done'
-  }
-], function (err, result) {
-  // result равен 'done'
-}
-);
    - -

    Установка async

    +
    async.waterfall([
+  function(callback) {//первая функция в цепочке
+    callback(null, 'one', 'two');//результаты 'one' и 'two'
+  },
+  function(arg1, arg2, callback) {//вторая функция в цепочке
+    // arg1 равен 'one' , arg2 равен  'two' 
+    callback(null, 'three'); //результат 'three'
+  },
+  function(arg1, callback) {
+    // arg1 равен 'three'
+    callback(null, 'done'); //результат 'done'
+  }
+], function (err, result) {
+  // result равен 'done'
+}
+);
    + +

    Установка async

    Установим модуль async при помощи менеджера пакетов NPM, чтобы использовать его в своём коде. Это делается обычным способом - откроем окно команд в корне проекта LocalLibrary и введём команду:

    diff --git a/files/ru/learn/server-side/express_nodejs/displaying_data/locallibrary_base_template/index.html b/files/ru/learn/server-side/express_nodejs/displaying_data/locallibrary_base_template/index.html index b169f61acc7f85..2a6b31a005be92 100644 --- a/files/ru/learn/server-side/express_nodejs/displaying_data/locallibrary_base_template/index.html +++ b/files/ru/learn/server-side/express_nodejs/displaying_data/locallibrary_base_template/index.html @@ -53,11 +53,11 @@

    Базовый шаблон также ссылается на локальный файл стилей (style.css), что обеспечивает дополнительное управление внешним видом. Откройте /public/stylesheets/style.css и замените его содержимое таким текстом:

    -
    .sidebar-nav {
-    margin-top: 20px;
-    padding: 0;
-    list-style: none;
-}
    +
    .sidebar-nav {
+    margin-top: 20px;
+    padding: 0;
+    list-style: none;
+}

    При запуске нашего сайта мы должны увидеть боковую панель! В следующих разделах мы будем использовать вышеуказанный макет для определения отдельных страниц.

    diff --git a/files/ru/learn/server-side/express_nodejs/displaying_data/template_primer/index.html b/files/ru/learn/server-side/express_nodejs/displaying_data/template_primer/index.html index 23505b0221827f..ed9df33d622e1d 100644 --- a/files/ru/learn/server-side/express_nodejs/displaying_data/template_primer/index.html +++ b/files/ru/learn/server-side/express_nodejs/displaying_data/template_primer/index.html @@ -15,13 +15,13 @@

    Выбор шаблонов Express

    Примечание: недостаток применения Pug - это чувствительность к отступам и пробелам (если добавить лишний пробел в "плохом" месте, можно получить невразумительный код ошибки). Однако, если ваши шаблоны уже действуют, их очень легко читать и поддерживать.

    -

    Конфигурация шаблона

    +

    Конфигурация шаблона

    Когда создавался каркас (the skeleton website) веб-сайта LocalLibrary, он был настроен на использование Pug . Можно было заметить, что модуль pug включён в зависимости в файле package.json, и установлен (app.set(...)) как движок представлений в файле app.js. Эта установка показывает,, что движок представлений - pug, и что Express должен искать шаблоны в подкаталоге /views.

    -
    // View engine setup.
-app.set('views', path.join(__dirname, 'views'));
-app.set('view engine', 'pug');
    +
    // View engine setup.
+app.set('views', path.join(__dirname, 'views'));
+app.set('view engine', 'pug');

    Если посмотреть содержимое каталога views, можно увидеть файлы с расширением .pug, в которых шаблоны представлений по умолчанию. Это представление для домашней страницы (index.pug) и базовый шаблон (layout.pug), который следует заменить нашим содержимым.

    @@ -32,7 +32,7 @@

    -

    Синтаксис шаблонов

    +

    Синтаксис шаблонов

    Пример файла шаблона (ниже) демонстрирует многие наиболее полезные черты Pug.

    @@ -47,11 +47,11 @@

    <em> is emphasised</em>'} and escaped data: #{'<em> is not emphasised</em>'}. + p This line has un-escaped data: !{'<em> is emphasised</em>'} and escaped data: #{'<em> is not emphasised</em>'}. | This line follows on. - p= 'Evaluated and <em>escaped expression</em>:' + title + p= 'Evaluated and <em>escaped expression</em>:' + title - <!-- You can add HTML comments directly --> + <!-- You can add HTML comments directly --> // You can add single line JavaScript comments and they are generated to HTML comments //- Introducing a single line JavaScript comment with "//-" ensures the comment isn't rendered to HTML @@ -86,12 +86,12 @@

    Если после тэга стоит знак = , следующий текст рассматривается как выражение JavaScript. Например, ниже в первой строке, содержимое тэга h1 будет переменной title (которая определена в файле или передана в шаблон из Express). Во второй строке содержимое параграфа - это текстовая строка, соединённая с переменной title . В каждом из случаев поведение по умолчанию - экранировать строки.

    h1= title
-p= 'Evaluated and <em>escaped expression</em>:' + title
    +p= 'Evaluated and <em>escaped expression</em>:' + title

    Если после тэга знак = отсутствует, тогда содержимое рассматривается как обычный текст. Внутри текста можно вставить экранированные или неэкранированные данные, применяя синтаксис #{} и !{}, как показано ниже. В простой текст можно также вставлять "сырой" HTML.

    p This is a line with #[em some emphasis] and #[strong strong text] markup.
-p This line has an un-escaped string: !{'<em> is emphasised</em>'}, an escaped string: #{'<em> is not emphasised</em>'}, and escaped variables: #{title}.
    +p This line has an un-escaped string: !{'<em> is emphasised</em>'}, an escaped string: #{'<em> is not emphasised</em>'}, and escaped variables: #{title}.

    Совет: Почти всегда желательно экранировать данные, полученные от пользователей (при помощи синтаксиса #{} ). Данные, которым можно верить (т.е. подсчитанное количество записей, могут быть выведены без экранирования значений.

    @@ -117,9 +117,9 @@

    Синтаксис разрешает также комментарии (которые попадут в результат или нет, по вашему желанию), смеси для создания повторно используемых блоков кода, операторы выбора case, и много другого. Более подробная информация - в документации The Pug docs.

    -

    Расширение шаблонов

    +

    Расширение шаблонов

    -

    Принято иметь общую структуру для всех страниц сайта, включая стандартную HTML-разметку для заголовка, футера, навигации и т.д. Вместо того, чтобы заставлять разработчиков дублировать эти образцы на каждой странице, Pug позволяет объявить базовой шаблон, а затем модифицировать его, заменяя только те небольшие части, которые различны на каждой конкретной странице.

    +

    Принято иметь общую структуру для всех страниц сайта, включая стандартную HTML-разметку для заголовка, футера, навигации и т.д. Вместо того, чтобы заставлять разработчиков дублировать эти образцы на каждой странице, Pug позволяет объявить базовой шаблон, а затем модифицировать его, заменяя только те небольшие части, которые различны на каждой конкретной странице.

    Например, базовый шаблон layout.pug, созданный в каркасе проекта, имеет такой вид:

    diff --git a/files/ru/learn/server-side/express_nodejs/forms/create_bookinstance_form/index.html b/files/ru/learn/server-side/express_nodejs/forms/create_bookinstance_form/index.html index f4c8388f65cb66..d9f46a375ebaa2 100644 --- a/files/ru/learn/server-side/express_nodejs/forms/create_bookinstance_form/index.html +++ b/files/ru/learn/server-side/express_nodejs/forms/create_bookinstance_form/index.html @@ -3,93 +3,93 @@ slug: Learn/Server-side/Express_Nodejs/forms/Create_BookInstance_form translation_of: Learn/Server-side/Express_Nodejs/forms/Create_BookInstance_form --- -

    EdiВ этой статье показано, как определить страницу / форму для создания объектов BookInstance. Это очень похоже на форму, которую мы использовали для создания объектов Book.

    +

    EdiВ этой статье показано, как определить страницу / форму для создания объектов BookInstance. Это очень похоже на форму, которую мы использовали для создания объектов Book.

    -

    Импорт методов проверки и очистки

    +

    Импорт методов проверки и очистки

    Откройте /controllers/bookinstanceController.js и добавьте следующие строки вверху файла:

    -
    const { body,validationResult } = require('express-validator/check');
-const { sanitizeBody } = require('express-validator/filter');
    +
    const { body,validationResult } = require('express-validator/check');
+const { sanitizeBody } = require('express-validator/filter');
    -

    Controller—get route

    +

    Controller—get route

    At the top of the file, require the Book module (needed because each BookInstance is associated with a particular Book).

    -
    var Book = require('../models/book');
    +
    var Book = require('../models/book');

    Find the exported bookinstance_create_get() controller method and replace it with the following code.

    -
    // Display BookInstance create form on GET.
-exports.bookinstance_create_get = function(req, res, next) {
+
    // Display BookInstance create form on GET.
+exports.bookinstance_create_get = function(req, res, next) {
 
-    Book.find({},'title')
-    .exec(function (err, books) {
-      if (err) { return next(err); }
-      // Successful, so render.
-      res.render('bookinstance_form', {title: 'Create BookInstance', book_list: books});
-    });
+    Book.find({},'title')
+    .exec(function (err, books) {
+      if (err) { return next(err); }
+      // Successful, so render.
+      res.render('bookinstance_form', {title: 'Create BookInstance', book_list: books});
+    });
 
-};
    
+};

    The controller gets a list of all books (book_list) and passes it to the view bookinstance_form.pug (along with the title)

    -

    Controller—post route

    +

    Controller—post route

    Find the exported bookinstance_create_post() controller method and replace it with the following code.

    -
    // Handle BookInstance create on POST.
-exports.bookinstance_create_post = [
-
-    // Validate fields.
-    body('book', 'Book must be specified').isLength({ min: 1 }).trim(),
-    body('imprint', 'Imprint must be specified').isLength({ min: 1 }).trim(),
-    body('due_back', 'Invalid date').optional({ checkFalsy: true }).isISO8601(),
-
-    // Sanitize fields.
-    sanitizeBody('book').escape(),
-    sanitizeBody('imprint').escape(),
-    sanitizeBody('status').trim().escape(),
-    sanitizeBody('due_back').toDate(),
-
-    // Process request after validation and sanitization.
-    (req, res, next) => {
-
-        // Extract the validation errors from a request.
-        const errors = validationResult(req);
-
-        // Create a BookInstance object with escaped and trimmed data.
-        var bookinstance = new BookInstance(
-          { book: req.body.book,
-            imprint: req.body.imprint,
-            status: req.body.status,
-            due_back: req.body.due_back
-           });
-
-        if (!errors.isEmpty()) {
-            // There are errors. Render form again with sanitized values and error messages.
-            Book.find({},'title')
-                .exec(function (err, books) {
-                    if (err) { return next(err); }
-                    // Successful, so render.
-                    res.render('bookinstance_form', { title: 'Create BookInstance', book_list: books, selected_book: bookinstance.book._id , errors: errors.array(), bookinstance: bookinstance });
-            });
-            return;
-        }
-        else {
-            // Data from form is valid.
-            bookinstance.save(function (err) {
-                if (err) { return next(err); }
-                   // Successful - redirect to new record.
-                   res.redirect(bookinstance.url);
-                });
-        }
-    }
-];
    +
    // Handle BookInstance create on POST.
+exports.bookinstance_create_post = [
+
+    // Validate fields.
+    body('book', 'Book must be specified').isLength({ min: 1 }).trim(),
+    body('imprint', 'Imprint must be specified').isLength({ min: 1 }).trim(),
+    body('due_back', 'Invalid date').optional({ checkFalsy: true }).isISO8601(),
+
+    // Sanitize fields.
+    sanitizeBody('book').escape(),
+    sanitizeBody('imprint').escape(),
+    sanitizeBody('status').trim().escape(),
+    sanitizeBody('due_back').toDate(),
+
+    // Process request after validation and sanitization.
+    (req, res, next) => {
+
+        // Extract the validation errors from a request.
+        const errors = validationResult(req);
+
+        // Create a BookInstance object with escaped and trimmed data.
+        var bookinstance = new BookInstance(
+          { book: req.body.book,
+            imprint: req.body.imprint,
+            status: req.body.status,
+            due_back: req.body.due_back
+           });
+
+        if (!errors.isEmpty()) {
+            // There are errors. Render form again with sanitized values and error messages.
+            Book.find({},'title')
+                .exec(function (err, books) {
+                    if (err) { return next(err); }
+                    // Successful, so render.
+                    res.render('bookinstance_form', { title: 'Create BookInstance', book_list: books, selected_book: bookinstance.book._id , errors: errors.array(), bookinstance: bookinstance });
+            });
+            return;
+        }
+        else {
+            // Data from form is valid.
+            bookinstance.save(function (err) {
+                if (err) { return next(err); }
+                   // Successful - redirect to new record.
+                   res.redirect(bookinstance.url);
+                });
+        }
+    }
+];

    The structure and behaviour of this code is the same as for creating our other objects. First we validate and sanitize the data. If the data is invalid, we then re-display the form along with the data that was originally entered by the user and a list of error messages. If the data is valid, we save the new BookInstance record and redirect the user to the detail page.

    -

    View

    +

    View

    Create /views/bookinstance_form.pug and copy in the text below.

    @@ -137,7 +137,7 @@

    View

    Note: The above template hard-codes the Status values (Maintenance, Available, etc.) and does not "remember" the user's entered values. Should you so wish, consider reimplementing the list, passing in option data from the controller and setting the selected value when the form is re-displayed.

    -

    Как это выглядит?

    +

    Как это выглядит?

    Запустите приложение и откройте в браузере http://localhost:3000/. Затем выберите ссылку Create new book instance (copy). Если все настроено правильно, ваш сайт должен выглядеть примерно так, как показано на скриншоте. После того, как вы отправите валидный BookInstance, он должен быть сохранён, и вы попадёте на страницу сведений.

    diff --git a/files/ru/learn/server-side/express_nodejs/forms/update_book_form/index.html b/files/ru/learn/server-side/express_nodejs/forms/update_book_form/index.html index 4f92d591557abc..b4db6faf58db60 100644 --- a/files/ru/learn/server-side/express_nodejs/forms/update_book_form/index.html +++ b/files/ru/learn/server-side/express_nodejs/forms/update_book_form/index.html @@ -3,134 +3,134 @@ slug: Learn/Server-side/Express_Nodejs/forms/Update_Book_form translation_of: Learn/Server-side/Express_Nodejs/forms/Update_Book_form --- -

    EditНаконец, в разделе показано, как определить страницу для обновления объектов Book. Обработка форм при обновлении книги аналогична обработке форм при создании книги, за исключением того, что необходимо заполнить форму в маршруте GET значениями из базы данных.

    +

    EditНаконец, в разделе показано, как определить страницу для обновления объектов Book. Обработка форм при обновлении книги аналогична обработке форм при создании книги, за исключением того, что необходимо заполнить форму в маршруте GET значениями из базы данных.

    -

    Controller—get route

    +

    Controller—get route

    Откройте /controllers/bookController.js. Найдите экспортируемый метод контроллера book_update_get() и замените его на следующий код.

    -
    // Display book update form on GET.
-exports.book_update_get = function(req, res, next) {
-
-    // Get book, authors and genres for form.
-    async.parallel({
-        book: function(callback) {
-            Book.findById(req.params.id).populate('author').populate('genre').exec(callback);
-        },
-        authors: function(callback) {
-            Author.find(callback);
-        },
-        genres: function(callback) {
-            Genre.find(callback);
-        },
-        }, function(err, results) {
-            if (err) { return next(err); }
-            if (results.book==null) { // No results.
-                var err = new Error('Book not found');
-                err.status = 404;
-                return next(err);
-            }
-            // Success.
-            // Mark our selected genres as checked.
-            for (var all_g_iter = 0; all_g_iter < results.genres.length; all_g_iter++) {
-                for (var book_g_iter = 0; book_g_iter < results.book.genre.length; book_g_iter++) {
-                    if (results.genres[all_g_iter]._id.toString()==results.book.genre[book_g_iter]._id.toString()) {
-                        results.genres[all_g_iter].checked='true';
-                    }
-                }
-            }
-            res.render('book_form', { title: 'Update Book', authors:results.authors, genres:results.genres, book: results.book });
-        });
-
-};
    +
    // Display book update form on GET.
+exports.book_update_get = function(req, res, next) {
+
+    // Get book, authors and genres for form.
+    async.parallel({
+        book: function(callback) {
+            Book.findById(req.params.id).populate('author').populate('genre').exec(callback);
+        },
+        authors: function(callback) {
+            Author.find(callback);
+        },
+        genres: function(callback) {
+            Genre.find(callback);
+        },
+        }, function(err, results) {
+            if (err) { return next(err); }
+            if (results.book==null) { // No results.
+                var err = new Error('Book not found');
+                err.status = 404;
+                return next(err);
+            }
+            // Success.
+            // Mark our selected genres as checked.
+            for (var all_g_iter = 0; all_g_iter < results.genres.length; all_g_iter++) {
+                for (var book_g_iter = 0; book_g_iter < results.book.genre.length; book_g_iter++) {
+                    if (results.genres[all_g_iter]._id.toString()==results.book.genre[book_g_iter]._id.toString()) {
+                        results.genres[all_g_iter].checked='true';
+                    }
+                }
+            }
+            res.render('book_form', { title: 'Update Book', authors:results.authors, genres:results.genres, book: results.book });
+        });
+
+};

    Контроллер получит id Book книги для обновления из параметра URL (req.params.id). Он использует метод async.parallel()чтобы получить указанную запись Book (заполнение полей жанра и автора) и список всех объектов Author и Genre. Когда все операции завершены, он помечает выбранные жанры как отмеченные, а затем отображает их в book_form.pug, передаёт переменные itle, book, всех authors, и всеgenres.

    -

    Controller—post route

    +

    Controller—post route

    Найдите экспортируемый метод контроллера book_update_post() и замените его следующим кодом.

    -
    // Handle book update on POST.
-exports.book_update_post = [
-
-    // Convert the genre to an array
-    (req, res, next) => {
-        if(!(req.body.genre instanceof Array)){
-            if(typeof req.body.genre==='undefined')
-            req.body.genre=[];
-            else
-            req.body.genre=new Array(req.body.genre);
-        }
-        next();
-    },
-
-    // Validate fields.
-    body('title', 'Title must not be empty.').isLength({ min: 1 }).trim(),
-    body('author', 'Author must not be empty.').isLength({ min: 1 }).trim(),
-    body('summary', 'Summary must not be empty.').isLength({ min: 1 }).trim(),
-    body('isbn', 'ISBN must not be empty').isLength({ min: 1 }).trim(),
-
-    // Sanitize fields.
-    sanitizeBody('title').trim().escape(),
-    sanitizeBody('author').trim().escape(),
-    sanitizeBody('summary').trim().escape(),
-    sanitizeBody('isbn').trim().escape(),
-    sanitizeBody('genre.*').trim().escape(),
-
-    // Process request after validation and sanitization.
-    (req, res, next) => {
-
-        // Extract the validation errors from a request.
-        const errors = validationResult(req);
-
-        // Create a Book object with escaped/trimmed data and old id.
-        var book = new Book(
-          { title: req.body.title,
-            author: req.body.author,
-            summary: req.body.summary,
-            isbn: req.body.isbn,
-            genre: (typeof req.body.genre==='undefined') ? [] : req.body.genre,
-            _id:req.params.id //This is required, or a new ID will be assigned!
-           });
-
-        if (!errors.isEmpty()) {
-            // There are errors. Render form again with sanitized values/error messages.
-
-            // Get all authors and genres for form.
-            async.parallel({
-                authors: function(callback) {
-                    Author.find(callback);
-                },
-                genres: function(callback) {
-                    Genre.find(callback);
-                },
-            }, function(err, results) {
-                if (err) { return next(err); }
-
-                // Mark our selected genres as checked.
-                for (let i = 0; i < results.genres.length; i++) {
-                    if (book.genre.indexOf(results.genres[i]._id) > -1) {
-                        results.genres[i].checked='true';
-                    }
-                }
-                res.render('book_form', { title: 'Update Book',authors:results.authors, genres:results.genres, book: book, errors: errors.array() });
-            });
-            return;
-        }
-        else {
-            // Data from form is valid. Update the record.
-            Book.findByIdAndUpdate(req.params.id, book, {}, function (err,thebook) {
-                if (err) { return next(err); }
-                   // Successful - redirect to book detail page.
-                   res.redirect(thebook.url);
-                });
-        }
-    }
-];
    +
    // Handle book update on POST.
+exports.book_update_post = [
+
+    // Convert the genre to an array
+    (req, res, next) => {
+        if(!(req.body.genre instanceof Array)){
+            if(typeof req.body.genre==='undefined')
+            req.body.genre=[];
+            else
+            req.body.genre=new Array(req.body.genre);
+        }
+        next();
+    },
+
+    // Validate fields.
+    body('title', 'Title must not be empty.').isLength({ min: 1 }).trim(),
+    body('author', 'Author must not be empty.').isLength({ min: 1 }).trim(),
+    body('summary', 'Summary must not be empty.').isLength({ min: 1 }).trim(),
+    body('isbn', 'ISBN must not be empty').isLength({ min: 1 }).trim(),
+
+    // Sanitize fields.
+    sanitizeBody('title').trim().escape(),
+    sanitizeBody('author').trim().escape(),
+    sanitizeBody('summary').trim().escape(),
+    sanitizeBody('isbn').trim().escape(),
+    sanitizeBody('genre.*').trim().escape(),
+
+    // Process request after validation and sanitization.
+    (req, res, next) => {
+
+        // Extract the validation errors from a request.
+        const errors = validationResult(req);
+
+        // Create a Book object with escaped/trimmed data and old id.
+        var book = new Book(
+          { title: req.body.title,
+            author: req.body.author,
+            summary: req.body.summary,
+            isbn: req.body.isbn,
+            genre: (typeof req.body.genre==='undefined') ? [] : req.body.genre,
+            _id:req.params.id //This is required, or a new ID will be assigned!
+           });
+
+        if (!errors.isEmpty()) {
+            // There are errors. Render form again with sanitized values/error messages.
+
+            // Get all authors and genres for form.
+            async.parallel({
+                authors: function(callback) {
+                    Author.find(callback);
+                },
+                genres: function(callback) {
+                    Genre.find(callback);
+                },
+            }, function(err, results) {
+                if (err) { return next(err); }
+
+                // Mark our selected genres as checked.
+                for (let i = 0; i < results.genres.length; i++) {
+                    if (book.genre.indexOf(results.genres[i]._id) > -1) {
+                        results.genres[i].checked='true';
+                    }
+                }
+                res.render('book_form', { title: 'Update Book',authors:results.authors, genres:results.genres, book: book, errors: errors.array() });
+            });
+            return;
+        }
+        else {
+            // Data from form is valid. Update the record.
+            Book.findByIdAndUpdate(req.params.id, book, {}, function (err,thebook) {
+                if (err) { return next(err); }
+                   // Successful - redirect to book detail page.
+                   res.redirect(thebook.url);
+                });
+        }
+    }
+];

    Это очень похоже на маршрут записи, используемый при создании Book. Сперва мы проверяем и очищаем данные книги и используем их для создание нового объекта Book(устанавливая его значение _id в идентификатор объекта для обновления). Если есть ошибки, когда мы проверяем данные, то мы повторно представляем форму, дополнительно отображая данные, введённые пользователем, ошибки, а также списки жанров и авторов. Если ошибок нет, то мы вызываем Book.findByIdAndUpdate() для обновления документа Book, а затем перенаправить на страницу сведений.

    -

    View

    +

    View

    Откройте /views/book_form.pug и обновите раздел, в котором элемент управления "форма автора" имеет условный код, показанный ниже.

    @@ -166,7 +166,7 @@

    Как это выглядит?

    +

    Как это выглядит?

    Запустите приложение, откройте ваш браузер на http://localhost:3000/, выберите ссылку All books, затем выберите конкретную книгу. Наконец, выберите ссылку Update Book.

    diff --git a/files/ru/learn/server-side/express_nodejs/index.html b/files/ru/learn/server-side/express_nodejs/index.html index e4ef556208a80b..f0a1be42bbd685 100644 --- a/files/ru/learn/server-side/express_nodejs/index.html +++ b/files/ru/learn/server-side/express_nodejs/index.html @@ -28,21 +28,21 @@

    Руководства

    Введение в Express/Node
    -
    В первой статье об Express мы ответим на вопросы "Что такое Node?" и "Что такое Express?" и дадим вам представление о том, что делает веб-фреймворк Express особенным. Мы расскажем об основных функциях и покажем вам некоторые из основных строительных блоков приложений Express (хотя на данный момент у вас ещё нет среды разработки, в которой можно её протестировать).
    +
    В первой статье об Express мы ответим на вопросы "Что такое Node?" и "Что такое Express?" и дадим вам представление о том, что делает веб-фреймворк Express особенным. Мы расскажем об основных функциях и покажем вам некоторые из основных строительных блоков приложений Express (хотя на данный момент у вас ещё нет среды разработки, в которой можно её протестировать).
    Настройка среды разработки Node (Express)
    -
    Теперь, когда вы знаете, что такое Express, мы покажем вам, как настроить и протестировать среду разработки Node/Express в Windows, Linux (Ubuntu) и Mac OS X. Независимо от того, какую популярную операционную систему вы используете, эта статья даст вам то, что вам нужно, чтобы начать разработку приложений Express.
    +
    Теперь, когда вы знаете, что такое Express, мы покажем вам, как настроить и протестировать среду разработки Node/Express в Windows, Linux (Ubuntu) и Mac OS X. Независимо от того, какую популярную операционную систему вы используете, эта статья даст вам то, что вам нужно, чтобы начать разработку приложений Express.
    Учебник Express: сайт LocalLibrary
    -
    Первая статья в нашей серии практических уроков объясняет, что вы будете изучать, и предоставит обзор веб-сайта «локальной библиотеки», над которым мы будем работать и развивать в последующих статьях.
    +
    Первая статья в нашей серии практических уроков объясняет, что вы будете изучать, и предоставит обзор веб-сайта «локальной библиотеки», над которым мы будем работать и развивать в последующих статьях.
    Учебник Express часть 2: Создание скелета веб-сайта
    -
    В этой статье показано, как вы можете создать «скелет» веб-сайта, который затем можно будет заполнить с помощью маршрутов сайта, шаблонов/представлений и баз данных.
    +
    В этой статье показано, как вы можете создать «скелет» веб-сайта, который затем можно будет заполнить с помощью маршрутов сайта, шаблонов/представлений и баз данных.
    Учебник Express часть 3: Использование базы данных (с помощью Mongoose)
    -
    В этой статье кратко представлены базы данных для Node/Express. Затем показывается, как мы можем использовать Mongoose для обеспечения доступа к баз данных для сайта LocalLibrary. В уроке объясняется, как объявляются объектная схема и модели, основные типы полей и базовая валидация. Также кратко показаны некоторые из основных способов доступа к данным модели.
    +
    В этой статье кратко представлены базы данных для Node/Express. Затем показывается, как мы можем использовать Mongoose для обеспечения доступа к баз данных для сайта LocalLibrary. В уроке объясняется, как объявляются объектная схема и модели, основные типы полей и базовая валидация. Также кратко показаны некоторые из основных способов доступа к данным модели.
    Учебник Express часть 4: Маршруты и контроллеры
    В этом уроке мы создадим маршруты (код обработки URL) с "фиктивным" обработчиком функций для всех конечных точек ресурсов, которые нам в конечном итоге понадобятся для сайта LocalLibrary. По завершении мы будем иметь модульную структуру нашего кода обработки маршрута, который мы можем расширить с помощью функций реального обработчика в следующих статьях. Мы также будем очень хорошо понимать, как создавать модульные маршруты, используя Express.
    Учебник Express часть 5: Отображение данных библиотеки
    diff --git a/files/ru/learn/server-side/express_nodejs/introduction/index.html b/files/ru/learn/server-side/express_nodejs/introduction/index.html index 7bc138bef99bcb..0cb322333ef952 100644 --- a/files/ru/learn/server-side/express_nodejs/introduction/index.html +++ b/files/ru/learn/server-side/express_nodejs/introduction/index.html @@ -5,41 +5,41 @@ ---
    {{NextMenu("Learn/Server-side/Express_Nodejs/development_environment", "Learn/Server-side/Express_Nodejs")}}
    -

    В этой первой статье по Express мы ответим на вопросы "Что такое Node?" и "Что такое Express?", и сделаем обзор того, что делает веб-фреймворк Express таким особенным. Мы расскажем об основных функциях и покажем вам некоторые из основных строительных блоков приложения Express (хотя на данный момент у вас ещё нет среды разработки, в которой можно её протестировать).

    +

    В этой первой статье по Express мы ответим на вопросы "Что такое Node?" и "Что такое Express?", и сделаем обзор того, что делает веб-фреймворк Express таким особенным. Мы расскажем об основных функциях и покажем вам некоторые из основных строительных блоков приложения Express (хотя на данный момент у вас ещё нет среды разработки, в которой можно её протестировать).

    - + - +
    Предварительные знания:Базовая компьютерная грамотность. Общее понимание серверного программирования веб-сайтов и, в частности, механики клиент-серверного взаимодействия на веб-сайтах.Базовая компьютерная грамотность. Общее понимание серверного программирования веб-сайтов и, в частности, механики клиент-серверного взаимодействия на веб-сайтах.
    Цель:Ознакомить вас с фреймворком Express и как он вписывается в среду Node, какие функции он предоставляет, и основные строительные блоки приложения Express.Ознакомить вас с фреймворком Express и как он вписывается в среду Node, какие функции он предоставляет, и основные строительные блоки приложения Express.

    Что такое Express и Node?

    -

    Node (или более формально Node.js) - кросплатформенная среда исполнения с открытым исходным кодом, которая позволяет разработчикам создавать всевозможные серверные инструменты и приложения используя язык JavaScript. Среда исполнения предназначена для использования вне контекста браузера (т.е. выполняется непосредственно на компьютере или на серверной ОС). Таким образом, среда исключает API-интерфейсы JavaScript для браузера и добавляет поддержку более традиционных OS API-интерфейсов, включая библиотеки HTTP и файловых систем.

    +

    Node (или более формально Node.js) - кросплатформенная среда исполнения с открытым исходным кодом, которая позволяет разработчикам создавать всевозможные серверные инструменты и приложения используя язык JavaScript. Среда исполнения предназначена для использования вне контекста браузера (т.е. выполняется непосредственно на компьютере или на серверной ОС). Таким образом, среда исключает API-интерфейсы JavaScript для браузера и добавляет поддержку более традиционных OS API-интерфейсов, включая библиотеки HTTP и файловых систем.

    С точки зрения веб-серверной разработки Node имеет ряд преимуществ:

    -

    Вы можете использовать Node.js для создания простого веб сервера используя пакет Node HTTP.

    +

    Вы можете использовать Node.js для создания простого веб сервера используя пакет Node HTTP.

    Hello Node.js

    -

    Следующий пример создаёт веб сервер который обрабатывает любой HTTP запрос на URL http://127.0.0.1:8000/ — когда запрос будет получен, скрипт ответит строкой "Hello World". Если вы уже установили node, можете, следуя шагам инструкции попробовать пример:

    +

    Следующий пример создаёт веб сервер который обрабатывает любой HTTP запрос на URL http://127.0.0.1:8000/ — когда запрос будет получен, скрипт ответит строкой "Hello World". Если вы уже установили node, можете, следуя шагам инструкции попробовать пример:

    1. Откройте терминал (в Windows окно командной строки)
      2. @@ -101,7 +101,7 @@

      Введение в Express

      В то время как сам express довольно минималистичный, разработчики создали совместимые пакеты промежуточного программного обеспечения для решения практически любой проблемы с веб-разработкой. Существуют библиотеки для работы с куки-файлами, сеансами, входами пользователей, параметрами URL, данными POST, заголовками безопасности и многими другими. Вы можете найти список пакетов промежуточного программного обеспечения, поддерживаемых командой Express в Express Middleware (наряду со списком некоторых популярных пакетов сторонних производителей) .

      -

      Примечание: Гибкость это палка о двух концах. Существуют пакеты промежуточного программного обеспечения (middleware) для решения практически любых проблем или для удовлетворения любых ваших требований, но правильный выбор подходящих пакетов иногда может быть проблемой. Также нет «правильного пути» для структурирования приложения, и многие примеры, которые вы можете найти в Интернете, не являются оптимальными или лишь показывают небольшую часть того, что вам нужно сделать для разработки веб-приложения.

      +

      Примечание: Гибкость это палка о двух концах. Существуют пакеты промежуточного программного обеспечения (middleware) для решения практически любых проблем или для удовлетворения любых ваших требований, но правильный выбор подходящих пакетов иногда может быть проблемой. Также нет «правильного пути» для структурирования приложения, и многие примеры, которые вы можете найти в Интернете, не являются оптимальными или лишь показывают небольшую часть того, что вам нужно сделать для разработки веб-приложения.

      Откуда это все взялось?

      @@ -138,10 +138,10 @@

      Как выглядит код E

      Helloworld Express

      -

      Сначала давайте рассмотрим стандартный пример Express Hello World (мы обсудим каждую часть этого ниже и в следующих разделах).

      +

      Сначала давайте рассмотрим стандартный пример Express Hello World (мы обсудим каждую часть этого ниже и в следующих разделах).

      -

      Совет: Если у вас уже установлены Node и Express (или если вы устанавливаете их, как показано в следующей статье), вы можете сохранить этот код в файле с именем app.js и запустить его в командной строке, вызвав узел app.js. отражения).

      +

      Совет: Если у вас уже установлены Node и Express (или если вы устанавливаете их, как показано в следующей статье), вы можете сохранить этот код в файле с именем app.js и запустить его в командной строке, вызвав узел app.js. отражения).

      var express = require('express');
@@ -156,44 +156,44 @@ 
      Helloworld Express
      
 });
      -

      Первые две строки требуют () (импорт) модуля Express и создания приложения Express. Этот объект, который традиционно называется app, имеет методы для маршрутизации HTTP-запросов, настройки промежуточного программного обеспечения, рендеринга представлений HTML, регистрации механизма шаблонов и изменения параметров приложения, которые управляют поведением приложения (например, режим среды, чувствительны ли определения маршрута к регистру). , и т.д.)

      +

      Первые две строки требуют () (импорт) модуля Express и создания приложения Express. Этот объект, который традиционно называется app, имеет методы для маршрутизации HTTP-запросов, настройки промежуточного программного обеспечения, рендеринга представлений HTML, регистрации механизма шаблонов и изменения параметров приложения, которые управляют поведением приложения (например, режим среды, чувствительны ли определения маршрута к регистру). , и т.д.)

      -

      Средняя часть кода (три строки, начинающиеся с app.get) показывает определение маршрута. Метод app.get () указывает колбэк-функцию, которая будет вызываться всякий раз, когда есть HTTP-запрос GET с путём ('/') относительно корня сайта. Колбэк-функция принимает запрос и объект ответа в качестве аргументов и просто вызывает send () для ответа, чтобы вернуть строку «Hello World!»

      +

      Средняя часть кода (три строки, начинающиеся с app.get) показывает определение маршрута. Метод app.get () указывает колбэк-функцию, которая будет вызываться всякий раз, когда есть HTTP-запрос GET с путём ('/') относительно корня сайта. Колбэк-функция принимает запрос и объект ответа в качестве аргументов и просто вызывает send () для ответа, чтобы вернуть строку «Hello World!»

      -

      Последний блок запускает сервер через порт «3000» и печатает комментарий журнала в консоль. Когда сервер работает, вы можете перейти к localhost: 3000 в вашем браузере, чтобы увидеть возвращённый пример ответа.

      +

      Последний блок запускает сервер через порт «3000» и печатает комментарий журнала в консоль. Когда сервер работает, вы можете перейти к localhost: 3000 в вашем браузере, чтобы увидеть возвращённый пример ответа.

      -

      Импорт и создание модулей

      +

      Импорт и создание модулей

      -

      Модуль - это библиотека / файл JavaScript, который вы можете импортировать в другой код с помощью функции require () Node. Express сам по себе является модулем, как и промежуточное программное обеспечение и библиотеки баз данных, которые мы используем в наших приложениях Express.
      -
      - Приведённый ниже код показывает, как мы импортируем модуль по имени, используя в качестве примера платформу Express. Сначала мы вызываем функцию require (), определяя имя модуля в виде строки («express») и вызывая возвращённый объект для создания приложения Express. Затем мы можем получить доступ к свойствам и функциям объекта приложения.

      +

      Модуль - это библиотека / файл JavaScript, который вы можете импортировать в другой код с помощью функции require () Node. Express сам по себе является модулем, как и промежуточное программное обеспечение и библиотеки баз данных, которые мы используем в наших приложениях Express.

      + +

      Приведённый ниже код показывает, как мы импортируем модуль по имени, используя в качестве примера платформу Express. Сначала мы вызываем функцию require (), определяя имя модуля в виде строки («express») и вызывая возвращённый объект для создания приложения Express. Затем мы можем получить доступ к свойствам и функциям объекта приложения.

      var express = require('express');
 var app = express();
      -

      Вы также можете создавать свои собственные модули, которые можно импортировать таким же образом.

      +

      Вы также можете создавать свои собственные модули, которые можно импортировать таким же образом.

      -

      Совет: вы захотите создать свои собственные модули, потому что это позволяет вам организовать ваш код в управляемые части - монолитное однофайловое приложение трудно понять и поддерживать. Использование модулей также помогает вам управлять пространством имён, поскольку при использовании модуля импортируются только те переменные, которые вы явно экспортировали.

      +

      Совет: вы захотите создать свои собственные модули, потому что это позволяет вам организовать ваш код в управляемые части - монолитное однофайловое приложение трудно понять и поддерживать. Использование модулей также помогает вам управлять пространством имён, поскольку при использовании модуля импортируются только те переменные, которые вы явно экспортировали.

      -

      Чтобы сделать объекты доступными вне модуля, вам просто нужно назначить их объекту экспорта. Например, модуль square.js ниже представляет собой файл, который экспортирует методы area () и perimeter ():

      +

      Чтобы сделать объекты доступными вне модуля, вам просто нужно назначить их объекту экспорта. Например, модуль square.js ниже представляет собой файл, который экспортирует методы area () и perimeter ():

      exports.area = function(width) { return width * width; };
 exports.perimeter = function(width) { return 4 * width; };
      -

      Мы можем импортировать этот модуль, используя require (), а затем вызвать экспортированные методы, как показано:

      +

      Мы можем импортировать этот модуль, используя require (), а затем вызвать экспортированные методы, как показано:

      var square = require('./square'); // Here we require() the name of the file without the (optional) .js file extension
 console.log('The area of a square with a width of 4 is ' + square.area(4));
      -

      Примечание. Вы также можете указать абсолютный путь к модулю (или имя, как мы делали изначально).

      +

      Примечание. Вы также можете указать абсолютный путь к модулю (или имя, как мы делали изначально).

      -

      Если вы хотите экспортировать полный объект в одном назначении, а не создавать его по одному свойству за раз, назначьте его для module.exports, как показано ниже (вы также можете сделать это, чтобы сделать корень объекта экспорта конструктором или другой функцией) :

      +

      Если вы хотите экспортировать полный объект в одном назначении, а не создавать его по одному свойству за раз, назначьте его для module.exports, как показано ниже (вы также можете сделать это, чтобы сделать корень объекта экспорта конструктором или другой функцией) :

      module.exports = {
   area: function(width) {
@@ -206,17 +206,17 @@ 
      Для получения дополнительной информации о модулях см. Modules (Node API docs).
      
+
      Для получения дополнительной информации о модулях см. Modules (Node API docs).
      
 
-
      Использование асинхронных API
      
+
      Использование асинхронных API
      
 
-
      Код JavaScript часто использует асинхронные, а не синхронные API для операций, выполнение которых может занять некоторое время. Синхронный API - это тот, в котором каждая операция должна завершиться до начала следующей операции. Например, следующие функции журнала являются синхронными и выводят текст на консоль по порядку (первый, второй).
      
+
      Код JavaScript часто использует асинхронные, а не синхронные API для операций, выполнение которых может занять некоторое время. Синхронный API - это тот, в котором каждая операция должна завершиться до начала следующей операции. Например, следующие функции журнала являются синхронными и выводят текст на консоль по порядку (первый, второй).
      
 
 
      console.log('First');
 console.log('Second');
 
      
 
-
      В отличие от этого, асинхронный API - это тот, в котором API начнёт операцию и сразу же вернётся (до завершения операции). После завершения операции API будет использовать некоторый механизм для выполнения дополнительных операций. Например, приведённый ниже код выведет «Second, First», потому что хотя метод setTimeout () вызывается первым и возвращается немедленно, операция не завершается в течение нескольких секунд.
      
+
      В отличие от этого, асинхронный API - это тот, в котором API начнёт операцию и сразу же вернётся (до завершения операции). После завершения операции API будет использовать некоторый механизм для выполнения дополнительных операций. Например, приведённый ниже код выведет «Second, First», потому что хотя метод setTimeout () вызывается первым и возвращается немедленно, операция не завершается в течение нескольких секунд.
      
 
 
      setTimeout(function() {
    console.log('First');
@@ -224,45 +224,45 @@ 
      Использование неблокирующих асинхронных API-интерфейсов ещё более важно в Node, чем в браузере, поскольку Node - это однопоточная среда выполнения, управляемая событиями. «Однопоточный» означает, что все запросы к серверу выполняются в одном потоке (а не порождаются в отдельных процессах). Эта модель чрезвычайно эффективна с точки зрения скорости и ресурсов сервера, но это означает, что если любая из ваших функций вызывает синхронные методы, выполнение которых занимает много времени, они будут блокировать не только текущий запрос, но и любой другой запрос, обрабатываемый ваше веб-приложение.
      
- 
      
- Есть несколько способов, которыми асинхронный API уведомляет ваше приложение о том, что оно завершено. Наиболее распространённый способ - зарегистрировать колбэк-функцию при вызове асинхронного API, который будет вызываться после завершения операции. Это подход, использованный выше.
      
+
      Использование неблокирующих асинхронных API-интерфейсов ещё более важно в Node, чем в браузере, поскольку Node - это однопоточная среда выполнения, управляемая событиями. «Однопоточный» означает, что все запросы к серверу выполняются в одном потоке (а не порождаются в отдельных процессах). Эта модель чрезвычайно эффективна с точки зрения скорости и ресурсов сервера, но это означает, что если любая из ваших функций вызывает синхронные методы, выполнение которых занимает много времени, они будут блокировать не только текущий запрос, но и любой другой запрос, обрабатываемый ваше веб-приложение.
      
+
+
      Есть несколько способов, которыми асинхронный API уведомляет ваше приложение о том, что оно завершено. Наиболее распространённый способ - зарегистрировать колбэк-функцию при вызове асинхронного API, который будет вызываться после завершения операции. Это подход, использованный выше.
      
 
 
      
-
      Совет: Использование колбэков может быть довольно «грязным», если у вас есть последовательность зависимых асинхронных операций, которые должны выполняться по порядку, потому что это приводит к нескольким уровням вложенных колбэков. Эта проблема широко известна как «ад колбэков». Эту проблему можно решить с помощью хороших методов кодирования (см. Http://callbackhell.com/), использования такого модуля, как async, или даже перехода к функциям ES6, таким как Promises.
      
+
      Совет: Использование колбэков может быть довольно «грязным», если у вас есть последовательность зависимых асинхронных операций, которые должны выполняться по порядку, потому что это приводит к нескольким уровням вложенных колбэков. Эта проблема широко известна как «ад колбэков». Эту проблему можно решить с помощью хороших методов кодирования (см. Http://callbackhell.com/), использования такого модуля, как async, или даже перехода к функциям ES6, таким как Promises.
      
 
      
 
 
      
-
      Примечание. Общим соглашением для Node и Express является использование колбэков с ошибками. В этом соглашении первое значение в ваших колбэк-функциях является значением ошибки, в то время как последующие аргументы содержат данные об успехе. В этом блоге есть хорошее объяснение того, почему этот подход полезен: путь Node.js - понимание колбэков с ошибками (fredkschott.com).
      
+
      Примечание. Общим соглашением для Node и Express является использование колбэков с ошибками. В этом соглашении первое значение в ваших колбэк-функциях является значением ошибки, в то время как последующие аргументы содержат данные об успехе. В этом блоге есть хорошее объяснение того, почему этот подход полезен: путь Node.js - понимание колбэков с ошибками (fredkschott.com).
      
 
      
 
-
      Создание обработчиков маршрута
      
+
      Создание обработчиков маршрута
      
 
-
      В нашем примере Hello World Express (см. Выше) мы определили функцию обработчика маршрута (колбэка) для HTTP-запросов GET к корню сайта ('/').
      
+
      В нашем примере Hello World Express (см. Выше) мы определили функцию обработчика маршрута (колбэка) для HTTP-запросов GET к корню сайта ('/').
      
 
 
      app.get('/', function(req, res) {
   res.send('Hello World!');
 });
 
      
 
-
      Колбэк-функция принимает запрос и объект ответа в качестве аргументов. В этом случае метод просто вызывает send () в ответе, чтобы вернуть строку «Hello World!» Существует ряд других методов ответа для завершения цикла запрос / ответ, например, вы можете вызвать res.json () для отправки ответа JSON или res.sendFile () для отправки файла.
      
+
      Колбэк-функция принимает запрос и объект ответа в качестве аргументов. В этом случае метод просто вызывает send () в ответе, чтобы вернуть строку «Hello World!» Существует ряд других методов ответа для завершения цикла запрос / ответ, например, вы можете вызвать res.json () для отправки ответа JSON или res.sendFile () для отправки файла.
      
 
 
      
-
      Совет по JavaScript: вы можете использовать любые имена аргументов, которые вам нравятся, в колбэк-функциях; при вызове колбэка первый аргумент всегда будет запросом, а второй всегда будет ответом. Имеет смысл назвать их так, чтобы вы могли идентифицировать объект, с которым работаете, в теле колбэка.
      
+
      Совет по JavaScript: вы можете использовать любые имена аргументов, которые вам нравятся, в колбэк-функциях; при вызове колбэка первый аргумент всегда будет запросом, а второй всегда будет ответом. Имеет смысл назвать их так, чтобы вы могли идентифицировать объект, с которым работаете, в теле колбэка.
      
 
      
 
-
      Объект приложения Express также предоставляет методы для определения обработчиков маршрутов для всех других HTTP-глаголов, которые в основном используются одинаково: post (), put (), delete (), options (), trace (), copy ( ), lock (), mkcol (), move (), purge (), propfind (), proppatch (), unlock (), report (), mkactivity (), checkout (), merge ( ), m-search (), notify (), subscribe (), unsubscribe (), patch (), search () и connect ().
      
+
      Объект приложения Express также предоставляет методы для определения обработчиков маршрутов для всех других HTTP-глаголов, которые в основном используются одинаково: post (), put (), delete (), options (), trace (), copy ( ), lock (), mkcol (), move (), purge (), propfind (), proppatch (), unlock (), report (), mkactivity (), checkout (), merge ( ), m-search (), notify (), subscribe (), unsubscribe (), patch (), search () и connect ().
      
 
-
      Существует специальный метод маршрутизации app.all (), который будет вызываться в ответ на любой метод HTTP. Это используется для загрузки функций промежуточного программного обеспечения по определённому пути для всех методов запроса. В следующем примере (из документации Express) показан обработчик, который будет выполняться для запросов к / secret независимо от используемого глагола HTTP (при условии, что он поддерживается модулем http).
      
+
      Существует специальный метод маршрутизации app.all (), который будет вызываться в ответ на любой метод HTTP. Это используется для загрузки функций промежуточного программного обеспечения по определённому пути для всех методов запроса. В следующем примере (из документации Express) показан обработчик, который будет выполняться для запросов к / secret независимо от используемого глагола HTTP (при условии, что он поддерживается модулем http).
      
 
 
      app.all('/secret', function(req, res, next) {
   console.log('Accessing the secret section ...');
   next(); // pass control to the next handler
 });
      
 
-
      Маршруты позволяют сопоставлять определённые шаблоны символов в URL-адресе, извлекать некоторые значения из URL-адреса и передавать их в качестве параметров обработчику маршрута (в качестве атрибутов объекта запроса, передаваемого в качестве параметра).
      
- 
      
- Часто полезно группировать обработчики маршрутов для определённой части сайта и получать к ним доступ с помощью общего префикса маршрута (например, сайт с вики может иметь все связанные с вики маршруты в одном файле и иметь к ним доступ с префиксом маршрута из / вики /). В Express это достигается с помощью объекта express.Router. Например, мы можем создать наш вики-маршрут в модуле с именем wiki.js, а затем экспортировать объект Router, как показано ниже:
      
+
      Маршруты позволяют сопоставлять определённые шаблоны символов в URL-адресе, извлекать некоторые значения из URL-адреса и передавать их в качестве параметров обработчику маршрута (в качестве атрибутов объекта запроса, передаваемого в качестве параметра).
      
+
+
      Часто полезно группировать обработчики маршрутов для определённой части сайта и получать к ним доступ с помощью общего префикса маршрута (например, сайт с вики может иметь все связанные с вики маршруты в одном файле и иметь к ним доступ с префиксом маршрута из / вики /). В Express это достигается с помощью объекта express.Router. Например, мы можем создать наш вики-маршрут в модуле с именем wiki.js, а затем экспортировать объект Router, как показано ниже:
      
 
 
      // wiki.js - Wiki route module
 
@@ -283,33 +283,33 @@ 
      
 
 
      
-
      Примечание. Добавление маршрутов к объекту Router аналогично добавлению маршрутов к объекту приложения (как показано ранее).
      
+
      Примечание. Добавление маршрутов к объекту Router аналогично добавлению маршрутов к объекту приложения (как показано ранее).
      
 
      
 
-
      Чтобы использовать маршрутизатор в нашем главном файле приложения, нам потребуется () модуль route (wiki.js), а затем вызовите use () в приложении Express, чтобы добавить маршрутизатор в путь обработки промежуточного программного обеспечения. Эти два маршрута будут доступны из / wiki / и / wiki / about /.
      
+
      Чтобы использовать маршрутизатор в нашем главном файле приложения, нам потребуется () модуль route (wiki.js), а затем вызовите use () в приложении Express, чтобы добавить маршрутизатор в путь обработки промежуточного программного обеспечения. Эти два маршрута будут доступны из / wiki / и / wiki / about /.
      
 
 
      var wiki = require('./wiki.js');
 // ...
 app.use('/wiki', wiki);
      
 
-
      Мы покажем вам намного больше о работе с маршрутами, и в частности об использовании маршрутизатора, позже в связанном разделе  Routes and controllers .
      
+
      Мы покажем вам намного больше о работе с маршрутами, и в частности об использовании маршрутизатора, позже в связанном разделе  Routes and controllers .
      
 
-
      Использование промежуточного программного обеспечения
      
+
      Использование промежуточного программного обеспечения
      
 
-
      Промежуточное программное обеспечение широко используется в приложениях Express для задач от обслуживания статических файлов до обработки ошибок и сжатия HTTP-ответов. Принимая во внимание, что функции маршрута заканчивают цикл запроса-ответа HTTP, возвращая некоторый ответ клиенту HTTP, функции промежуточного программного обеспечения обычно выполняют некоторую операцию над запросом или ответом и затем вызывают следующую функцию в «стеке», которая может быть большим количеством промежуточного программного обеспечения или маршрута обработчик. Порядок вызова промежуточного программного обеспечения зависит от разработчика приложения.
      
+
      Промежуточное программное обеспечение широко используется в приложениях Express для задач от обслуживания статических файлов до обработки ошибок и сжатия HTTP-ответов. Принимая во внимание, что функции маршрута заканчивают цикл запроса-ответа HTTP, возвращая некоторый ответ клиенту HTTP, функции промежуточного программного обеспечения обычно выполняют некоторую операцию над запросом или ответом и затем вызывают следующую функцию в «стеке», которая может быть большим количеством промежуточного программного обеспечения или маршрута обработчик. Порядок вызова промежуточного программного обеспечения зависит от разработчика приложения.
      
 
 
      
-
      Примечание. Промежуточное программное обеспечение может выполнять любую операцию, выполнять любой код, вносить изменения в объект запроса и ответа, а также может завершать цикл запрос-ответ. Если он не завершает цикл, он должен вызвать next (), чтобы передать управление следующей функции промежуточного программного обеспечения (или запрос останется зависшим).
      
+
      Примечание. Промежуточное программное обеспечение может выполнять любую операцию, выполнять любой код, вносить изменения в объект запроса и ответа, а также может завершать цикл запрос-ответ. Если он не завершает цикл, он должен вызвать next (), чтобы передать управление следующей функции промежуточного программного обеспечения (или запрос останется зависшим).
      
 
      
 
-
      Большинство приложений используют стороннее промежуточное программное обеспечение для упрощения общих задач веб-разработки, таких как работа с файлами cookie, сессиями, аутентификацией пользователя, доступом к данным запросов POST и JSON, ведение журнала и т. д. Список пакетов промежуточного программного обеспечения, поддерживаемых командой Express, можно найти. (который также включает в себя другие популярные сторонние пакеты). Другие экспресс-пакеты доступны в диспетчере пакетов NPM.
      
- 
      
- Для использования стороннего промежуточного программного обеспечения сначала необходимо установить его в своё приложение с помощью NPM. Например, чтобы установить промежуточное программное обеспечение средства регистрации HTTP-запросов morgan, вы должны сделать следующее:
      
+
      Большинство приложений используют стороннее промежуточное программное обеспечение для упрощения общих задач веб-разработки, таких как работа с файлами cookie, сессиями, аутентификацией пользователя, доступом к данным запросов POST и JSON, ведение журнала и т. д. Список пакетов промежуточного программного обеспечения, поддерживаемых командой Express, можно найти. (который также включает в себя другие популярные сторонние пакеты). Другие экспресс-пакеты доступны в диспетчере пакетов NPM.
      
+
+
      Для использования стороннего промежуточного программного обеспечения сначала необходимо установить его в своё приложение с помощью NPM. Например, чтобы установить промежуточное программное обеспечение средства регистрации HTTP-запросов morgan, вы должны сделать следующее:
      
 
 
      $ npm install morgan
 
      
 
-
      Затем вы можете вызвать use () для объекта приложения Express, чтобы добавить промежуточное программное обеспечение в стек:
      
+
      Затем вы можете вызвать use () для объекта приложения Express, чтобы добавить промежуточное программное обеспечение в стек:
      
 
 
      var express = require('express');
 var logger = require('morgan');
@@ -318,14 +318,14 @@ 
      
-
      Примечание. Промежуточное программное обеспечение и функции маршрутизации вызываются в том порядке, в котором они были объявлены. Для некоторого промежуточного программного обеспечения важен порядок (например, если промежуточное программное обеспечение сеанса зависит от промежуточного программного обеспечения cookie, то сначала должен быть добавлен обработчик cookie). Почти всегда случается так, что промежуточное ПО вызывается перед настройкой маршрутов, иначе ваши обработчики маршрутов не будут иметь доступа к функциям, добавленным вашим промежуточным ПО.
      
+
      Примечание. Промежуточное программное обеспечение и функции маршрутизации вызываются в том порядке, в котором они были объявлены. Для некоторого промежуточного программного обеспечения важен порядок (например, если промежуточное программное обеспечение сеанса зависит от промежуточного программного обеспечения cookie, то сначала должен быть добавлен обработчик cookie). Почти всегда случается так, что промежуточное ПО вызывается перед настройкой маршрутов, иначе ваши обработчики маршрутов не будут иметь доступа к функциям, добавленным вашим промежуточным ПО.
      
 
 
-
      Вы можете написать свои собственные функции промежуточного программного обеспечения, и вам, вероятно, придётся это сделать (хотя бы для создания кода обработки ошибок). Единственное различие между функцией промежуточного программного обеспечения и обратным вызовом обработчика маршрута состоит в том, что функции промежуточного программного обеспечения имеют третий аргумент, следующий: какие функции промежуточного программного обеспечения должны вызываться, если они не завершают цикл запроса (когда вызывается функция промежуточного программного обеспечения, она содержит следующую функцию). это надо называть).
      
+
      Вы можете написать свои собственные функции промежуточного программного обеспечения, и вам, вероятно, придётся это сделать (хотя бы для создания кода обработки ошибок). Единственное различие между функцией промежуточного программного обеспечения и обратным вызовом обработчика маршрута состоит в том, что функции промежуточного программного обеспечения имеют третий аргумент, следующий: какие функции промежуточного программного обеспечения должны вызываться, если они не завершают цикл запроса (когда вызывается функция промежуточного программного обеспечения, она содержит следующую функцию). это надо называть).
      
+
+
      Вы можете добавить функцию промежуточного программного обеспечения в цепочку обработки с помощью app.use () или app.add (), в зависимости от того, хотите ли вы применить промежуточное программное обеспечение ко всем ответам или к ответам с определённым глаголом HTTP (GET, POST и т. д.). ). Маршруты задаются одинаково в обоих случаях, хотя маршрут необязателен при вызове app.use ().
      
 
-
      Вы можете добавить функцию промежуточного программного обеспечения в цепочку обработки с помощью app.use () или app.add (), в зависимости от того, хотите ли вы применить промежуточное программное обеспечение ко всем ответам или к ответам с определённым глаголом HTTP (GET, POST и т. д.). ). Маршруты задаются одинаково в обоих случаях, хотя маршрут необязателен при вызове app.use ().
      
- 
      
- В приведённом ниже примере показано, как можно добавить функцию промежуточного программного обеспечения, используя оба метода, а также с / без маршрута.
      
+
      В приведённом ниже примере показано, как можно добавить функцию промежуточного программного обеспечения, используя оба метода, а также с / без маршрута.
      
 
 
      var express = require('express');
 var app = express();
@@ -348,19 +348,19 @@ 
      
-
      Совет по JavaScript: выше мы объявляем функцию промежуточного программного обеспечения отдельно, а затем устанавливаем её в качестве колбэка. В нашей предыдущей функции обработчика маршрута мы объявили колбэк-функцию, когда она использовалась. В JavaScript любой подход является допустимым.
      
+
      Совет по JavaScript: выше мы объявляем функцию промежуточного программного обеспечения отдельно, а затем устанавливаем её в качестве колбэка. В нашей предыдущей функции обработчика маршрута мы объявили колбэк-функцию, когда она использовалась. В JavaScript любой подход является допустимым.
      
 
 
-
      Документация по Express содержит намного больше отличной информации по использованию и написанию промежуточного программного обеспечения Express.
      
+
      Документация по Express содержит намного больше отличной информации по использованию и написанию промежуточного программного обеспечения Express.
      
 
-
      Обслуживание статических файлов
      
+
      Обслуживание статических файлов
      
 
-
      Вы можете использовать промежуточное программное обеспечение express.static для обслуживания статических файлов, включая ваши изображения, CSS и JavaScript (static () - единственная функция промежуточного программного обеспечения, которая фактически является частью Express). Например, вы должны использовать строку ниже для обслуживания изображений, файлов CSS и файлов JavaScript из каталога с именем public на том же уровне, где вы вызываете узел:
      
+
      Вы можете использовать промежуточное программное обеспечение express.static для обслуживания статических файлов, включая ваши изображения, CSS и JavaScript (static () - единственная функция промежуточного программного обеспечения, которая фактически является частью Express). Например, вы должны использовать строку ниже для обслуживания изображений, файлов CSS и файлов JavaScript из каталога с именем public на том же уровне, где вы вызываете узел:
      
 
 
      app.use(express.static('public'));
 
      
 
-
      Любые файлы в публичном каталоге обслуживаются путём добавления их имени файла (относительно базового «публичного» каталога) к базовому URL. Так, например:
      
+
      Любые файлы в публичном каталоге обслуживаются путём добавления их имени файла (относительно базового «публичного» каталога) к базовому URL. Так, например:
      
 
 
      http://localhost:3000/images/dog.jpg
 http://localhost:3000/css/style.css
@@ -368,29 +368,29 @@ 
      
 
-
      Вы можете вызывать static () несколько раз для обслуживания нескольких каталогов. Если файл не может быть найден одной функцией промежуточного программного обеспечения, он будет просто передан последующему промежуточному программному обеспечению (порядок вызова промежуточного программного обеспечения основан на вашем порядке объявления).
      
+
      Вы можете вызывать static () несколько раз для обслуживания нескольких каталогов. Если файл не может быть найден одной функцией промежуточного программного обеспечения, он будет просто передан последующему промежуточному программному обеспечению (порядок вызова промежуточного программного обеспечения основан на вашем порядке объявления).
      
 
 
      app.use(express.static('public'));
 app.use(express.static('media'));
 
      
 
-
      Вы также можете создать виртуальный префикс для ваших статических URL-адресов, вместо добавления файлов к базовому URL-адресу. Например, здесь мы указываем путь монтирования, чтобы файлы загружались с префиксом "/ media":
      
+
      Вы также можете создать виртуальный префикс для ваших статических URL-адресов, вместо добавления файлов к базовому URL-адресу. Например, здесь мы указываем путь монтирования, чтобы файлы загружались с префиксом "/ media":
      
 
 
      app.use('/media', express.static('public'));
 
      
 
-
      Теперь вы можете загружать файлы, находящиеся в публичном каталоге, из префикса / media path.
      
+
      Теперь вы можете загружать файлы, находящиеся в публичном каталоге, из префикса / media path.
      
 
 
      http://localhost:3000/media/images/dog.jpg
 http://localhost:3000/media/video/cat.mp4
 http://localhost:3000/media/cry.mp3
 
      
 
-
      Для получения дополнительной информации см. Serving static files in Express.
      
+
      Для получения дополнительной информации см. Serving static files in Express.
      
 
-
      Обработка ошибок
      
+
      Обработка ошибок
      
 
-
      Ошибки обрабатываются одной или несколькими специальными функциями промежуточного программного обеспечения, которые имеют четыре аргумента вместо обычных трёх: (err, req, res, next). Например:
      
+
      Ошибки обрабатываются одной или несколькими специальными функциями промежуточного программного обеспечения, которые имеют четыре аргумента вместо обычных трёх: (err, req, res, next). Например:
      
 
 
      app.use(function(err, req, res, next) {
   console.error(err.stack);
@@ -398,30 +398,30 @@ 
      Они могут возвращать любой требуемый контент, но должны вызываться после всех других app.use () и маршрутизировать вызовы, чтобы они были последним промежуточным ПО в процессе обработки запросов!
      
- 
      
- Express поставляется со встроенным обработчиком ошибок, который заботится обо всех оставшихся ошибках, которые могут возникнуть в приложении. Эта промежуточная функция обработки ошибок по умолчанию добавляется в конец стека функций промежуточного программного обеспечения. Если вы передаёте ошибку в next () и не обрабатываете её в обработчике ошибок, она будет обработана встроенным обработчиком ошибок; ошибка будет записана клиенту с трассировкой стека.
      
+
      Они могут возвращать любой требуемый контент, но должны вызываться после всех других app.use () и маршрутизировать вызовы, чтобы они были последним промежуточным ПО в процессе обработки запросов!
      
+
+
      Express поставляется со встроенным обработчиком ошибок, который заботится обо всех оставшихся ошибках, которые могут возникнуть в приложении. Эта промежуточная функция обработки ошибок по умолчанию добавляется в конец стека функций промежуточного программного обеспечения. Если вы передаёте ошибку в next () и не обрабатываете её в обработчике ошибок, она будет обработана встроенным обработчиком ошибок; ошибка будет записана клиенту с трассировкой стека.
      
 
 
      
-
      Примечание. Трассировка стека не включена в производственную среду. Чтобы запустить его в производственном режиме, необходимо установить переменную среды NODE_ENV в «производство».
      
+
      Примечание. Трассировка стека не включена в производственную среду. Чтобы запустить его в производственном режиме, необходимо установить переменную среды NODE_ENV в «производство».
      
 
      
 
 
      
-
      Примечание. HTTP404 и другие коды состояния «ошибка» не считаются ошибками. Если вы хотите справиться с этим, вы можете добавить функцию промежуточного программного обеспечения для этого. Для получения дополнительной информации см. FAQ.
      
+
      Примечание. HTTP404 и другие коды состояния «ошибка» не считаются ошибками. Если вы хотите справиться с этим, вы можете добавить функцию промежуточного программного обеспечения для этого. Для получения дополнительной информации см. FAQ.
      
 
      
 
-
      Для получения дополнительной информации см. Error handling (Express docs).
      
+
      Для получения дополнительной информации см. Error handling (Express docs).
      
+
+
      Использование баз данных
      
 
-
      Использование баз данных
      
+
      Приложения Express могут использовать любой механизм базы данных, поддерживаемый Node (сам по себе Express не определяет каких-либо дополнительных действий / требований для управления базой данных). Есть много вариантов, включая PostgreSQL, MySQL, Redis, SQLite, MongoDB и т. Д.
      
 
-
      Приложения Express могут использовать любой механизм базы данных, поддерживаемый Node (сам по себе Express не определяет каких-либо дополнительных действий / требований для управления базой данных). Есть много вариантов, включая PostgreSQL, MySQL, Redis, SQLite, MongoDB и т. Д.
      
- 
      
- Чтобы использовать их, вы должны сначала установить драйвер базы данных, используя NPM. Например, чтобы установить драйвер для популярной NoSQL MongoDB, вы должны использовать команду:
      
+
      Чтобы использовать их, вы должны сначала установить драйвер базы данных, используя NPM. Например, чтобы установить драйвер для популярной NoSQL MongoDB, вы должны использовать команду:
      
 
 
      $ npm install mongodb
 
      
 
-
      Сама база данных может быть установлена локально или на облачном сервере. В вашем экспресс-коде вам требуется драйвер, подключиться к базе данных, а затем выполнить операции создания, чтения, обновления и удаления (CRUD). Пример ниже (из документации Express) показывает, как вы можете найти записи «млекопитающих», используя MongoDB.
      
+
      Сама база данных может быть установлена локально или на облачном сервере. В вашем экспресс-коде вам требуется драйвер, подключиться к базе данных, а затем выполнить операции создания, чтения, обновления и удаления (CRUD). Пример ниже (из документации Express) показывает, как вы можете найти записи «млекопитающих», используя MongoDB.
      
 
 
      var MongoClient = require('mongodb').MongoClient;
 
@@ -435,15 +435,15 @@ 
      Другим популярным подходом является косвенный доступ к вашей базе данных с помощью Object Relational Mapper («ORM»). При таком подходе вы определяете свои данные как «объекты» или «модели», и ORM отображает их в базовый формат базы данных. Этот подход имеет то преимущество, что как разработчик вы можете продолжать думать с точки зрения объектов JavaScript, а не семантики базы данных, и что есть очевидное место для выполнения проверки и проверки входящих данных. Подробнее о базах данных мы поговорим в следующей статье.
      
+
      Другим популярным подходом является косвенный доступ к вашей базе данных с помощью Object Relational Mapper («ORM»). При таком подходе вы определяете свои данные как «объекты» или «модели», и ORM отображает их в базовый формат базы данных. Этот подход имеет то преимущество, что как разработчик вы можете продолжать думать с точки зрения объектов JavaScript, а не семантики базы данных, и что есть очевидное место для выполнения проверки и проверки входящих данных. Подробнее о базах данных мы поговорим в следующей статье.
      
 
-
      Для получения дополнительной информации см. Database integration (Express docs).
      
+
      Для получения дополнительной информации см. Database integration (Express docs).
      
 
-
      Рендеринг данных (просмотров)
      
+
      Рендеринг данных (просмотров)
      
 
-
      Механизмы шаблонов (в Express называемые «механизмами просмотра») позволяют указывать структуру выходного документа в шаблоне, используя заполнители для данных, которые будут заполняться при создании страницы. Шаблоны часто используются для создания HTML, но могут также создавать другие типы документов. В Express есть поддержка ряда шаблонных движков, и здесь есть полезное сравнение более популярных движков: Сравнение шаблонизаторов JavaScript: Jade, Mustache, Dust и More.
      
- 
      
- В своём коде настроек приложения вы задаёте механизм шаблонов для использования и место, где Express должен искать шаблоны, используя настройки «views» и «engine», как показано ниже (вам также нужно будет установить пакет, содержащий вашу библиотеку шаблонов). !)
      
+
      Механизмы шаблонов (в Express называемые «механизмами просмотра») позволяют указывать структуру выходного документа в шаблоне, используя заполнители для данных, которые будут заполняться при создании страницы. Шаблоны часто используются для создания HTML, но могут также создавать другие типы документов. В Express есть поддержка ряда шаблонных движков, и здесь есть полезное сравнение более популярных движков: Сравнение шаблонизаторов JavaScript: Jade, Mustache, Dust и More.
      
+
+
      В своём коде настроек приложения вы задаёте механизм шаблонов для использования и место, где Express должен искать шаблоны, используя настройки «views» и «engine», как показано ниже (вам также нужно будет установить пакет, содержащий вашу библиотеку шаблонов). !)
      
 
 
      var express = require('express');
 var app = express();
@@ -455,28 +455,28 @@ 
      Внешний вид шаблона будет зависеть от того, какой движок вы используете. Предполагая, что у вас есть файл шаблона с именем «index. <Template_extension>», который содержит заполнители для переменных данных с именами «title» и «message», вы должны вызвать Response.render () в функции обработчика маршрута для создания и отправки ответа HTML. :
      
+
      Внешний вид шаблона будет зависеть от того, какой движок вы используете. Предполагая, что у вас есть файл шаблона с именем «index. <Template_extension>», который содержит заполнители для переменных данных с именами «title» и «message», вы должны вызвать Response.render () в функции обработчика маршрута для создания и отправки ответа HTML. :
      
 
 
      app.get('/', function(req, res) {
   res.render('index', { title: 'About dogs', message: 'Dogs rock!' });
 });
      
 
-
      Для получения дополнительной информации см. Using template engines with Express (Express docs).
      
+
      Для получения дополнительной информации см. Using template engines with Express (Express docs).
      
 
-
      Файловая структура
      
+
      Файловая структура
      
 
-
      Express не делает никаких предположений относительно структуры или компонентов, которые вы используете. Маршруты, представления, статические файлы и другая логика конкретного приложения могут находиться в любом количестве файлов с любой структурой каталогов. Хотя вполне возможно иметь все приложения Express в одном файле, обычно имеет смысл разделить ваше приложение на файлы на основе функций (например, управление учётными записями, блоги, доски обсуждений) и проблемной области архитектуры (например, модель, представление или контроллер, если вы случайно используете MVC architecture).
      
+
      Express не делает никаких предположений относительно структуры или компонентов, которые вы используете. Маршруты, представления, статические файлы и другая логика конкретного приложения могут находиться в любом количестве файлов с любой структурой каталогов. Хотя вполне возможно иметь все приложения Express в одном файле, обычно имеет смысл разделить ваше приложение на файлы на основе функций (например, управление учётными записями, блоги, доски обсуждений) и проблемной области архитектуры (например, модель, представление или контроллер, если вы случайно используете MVC architecture).
      
 
-
      В более поздней теме мы будем использовать Express Application Generator, который создаёт модульный каркас приложения, который мы можем легко расширить для создания веб-приложений.
      
+
      В более поздней теме мы будем использовать Express Application Generator, который создаёт модульный каркас приложения, который мы можем легко расширить для создания веб-приложений.
      
 
 
        
 
      
 
 
      Резюме
      
 
-
      Поздравляем, вы завершили первый шаг в своём путешествии Express / Node! Теперь вы должны понимать основные преимущества Express и Node, а также примерно то, как могут выглядеть основные части приложения Express (маршруты, промежуточное ПО, обработка ошибок и код шаблона). Вы также должны понимать, что с Express, который является непонятным фреймворком, то, как вы собираете эти части вместе, и библиотеки, которые вы используете, в значительной степени зависит от вас!
      
- 
      
- Конечно, Express - это очень лёгкая платформа для веб-приложений, поэтому большая часть её преимуществ и возможностей обеспечивается сторонними библиотеками и функциями. Мы рассмотрим это более подробно в следующих статьях. В нашей следующей статье мы рассмотрим настройку среды разработки Node, чтобы вы могли увидеть некоторый код Express в действии.
      
+
      Поздравляем, вы завершили первый шаг в своём путешествии Express / Node! Теперь вы должны понимать основные преимущества Express и Node, а также примерно то, как могут выглядеть основные части приложения Express (маршруты, промежуточное ПО, обработка ошибок и код шаблона). Вы также должны понимать, что с Express, который является непонятным фреймворком, то, как вы собираете эти части вместе, и библиотеки, которые вы используете, в значительной степени зависит от вас!
      
+
+
      Конечно, Express - это очень лёгкая платформа для веб-приложений, поэтому большая часть её преимуществ и возможностей обеспечивается сторонними библиотеками и функциями. Мы рассмотрим это более подробно в следующих статьях. В нашей следующей статье мы рассмотрим настройку среды разработки Node, чтобы вы могли увидеть некоторый код Express в действии.
      
 
 
      Смотрите также
      
 
@@ -494,19 +494,3 @@ 
      Смотрите также
      
 
 
 
      {{NextMenu("Learn/Server-side/Express_Nodejs/development_environment", "Learn/Server-side/Express_Nodejs")}}
      
-
-
      
-
-
      
-
      
-
      
-
      
-
-
      
-
-
      
-
      
-
-
      
-
      
-
      
diff --git a/files/ru/learn/server-side/express_nodejs/mongoose/index.html b/files/ru/learn/server-side/express_nodejs/mongoose/index.html
index 01b52606e71718..94f2697a2f1431 100644
--- a/files/ru/learn/server-side/express_nodejs/mongoose/index.html
+++ b/files/ru/learn/server-side/express_nodejs/mongoose/index.html
@@ -66,10 +66,10 @@ 
      
  
    2. Objection: Делает настолько лёгким, насколько возможно, использование всей мощи SQL и движка базы данных ( поддерживает  SQLite3, Postgres, и MySQL).
      3. 
  
    3. Sequelize: Основанная на промисах ORM для Node.js и io.js. Поддерживает диалекты PostgreSQL, MySQL, MariaDB, SQLite и MSSQL, обладает надёжной поддержкой транзакций, отношений, чтения копий и т.д.
      4. 
  
    4. 
-  
      Node ORM2 -- это OR менеджер для NodeJS. Поддерживает MySQL, SQLite и Progress, помогает работать с БД, используя объектный подход.
      
+  
      Node ORM2 -- это OR менеджер для NodeJS. Поддерживает MySQL, SQLite и Progress, помогает работать с БД, используя объектный подход.
      
  
      5. 
  
    5. 
-  
      JugglingDB -- это кросс-ДБ ORM для NodeJS, обеспечивающая общий интерфейс для доступа к наиболее популярным форматам БД. Поддерживает MySQL, SQLite3, Postgres, MongoDB, Redis и хранение данных в памяти js (собственный движок, только для тестирования).
      
+  
      JugglingDB -- это кросс-ДБ ORM для NodeJS, обеспечивающая общий интерфейс для доступа к наиболее популярным форматам БД. Поддерживает MySQL, SQLite3, Postgres, MongoDB, Redis и хранение данных в памяти js (собственный движок, только для тестирования).
      
  
      6. 
 
 
@@ -77,15 +77,15 @@ 
      
 
 
      Применение Mongoose и MongoDb для LocalLibrary
      
 
-
      В примере LocalLibrary (и до конца раздела) мы будем использовать Mongoose ODM для доступа к данным нашей библиотеки. Mongoose является интерфейсом для MongoDB, NoSQL-базы данных с открытым исходным кодом, в которой использована документов-ориентированная модель данных. В MongoDB «коллекции» и «документы» -- это аналоги «таблиц» и «строк» в реляционных БД.
      
+
      В примере LocalLibrary (и до конца раздела) мы будем использовать Mongoose ODM для доступа к данным нашей библиотеки. Mongoose является интерфейсом для MongoDB, NoSQL-базы данных с открытым исходным кодом, в которой использована документов-ориентированная модель данных. В MongoDB «коллекции» и «документы» -- это аналоги «таблиц» и «строк» в реляционных БД.
      
 
-
      Это сочетание ODM и БД весьма популярно в сообществе Node, частично потому, что система хранения документов и запросов очень похожа на JSON и поэтому знакома разработчикам JavaScript.
      
+
      Это сочетание ODM и БД весьма популярно в сообществе Node, частично потому, что система хранения документов и запросов очень похожа на JSON и поэтому знакома разработчикам JavaScript.
      
 
 
      
-
      Совет: Не обязательно знать MongoDB, чтобы использовать Mongoose, хотя   документацию Mongoose легче использовать и понимать, если вы уже знакомы с MongoDB.
      
+
      Совет: Не обязательно знать MongoDB, чтобы использовать Mongoose, хотя   документацию Mongoose легче использовать и понимать, если вы уже знакомы с MongoDB.
      
 
      
 
-
      Далее показано, как определить и получить доступ к схеме и моделям Mongoose для примера веб-сайта LocalLibrary.
      
+
      Далее показано, как определить и получить доступ к схеме и моделям Mongoose для примера веб-сайта LocalLibrary.
      
 
 
      Проектирование моделей LocalLibrary
      
 
@@ -233,7 +233,7 @@ 
      Типы схемы (поля)
      
 
        
  
      • ObjectId: Представляет отдельный экземпляр модели в БД. Например, book может ссылаться на объект- автора. Поле будет содержать уникальный идентификатор (_id) отдельного объекта. При необходимости использования этой информации применяют метод populate().
        • 
  
      • Mixed: Произвольный тип в схеме.
        • 
- 
      • []: Массив элементов. В таких моделях можно выполнять JavaScript-операции для массивов (push, pop, unshift, etc.).  Выше показан пример массивы объектов неопределённого типа и массив строк, но можно использовать массив объектов любого типа.
        • 
+ 
      • []: Массив элементов. В таких моделях можно выполнять JavaScript-операции для массивов (push, pop, unshift, etc.).  Выше показан пример массивы объектов неопределённого типа и массив строк, но можно использовать массив объектов любого типа.
        • 
 
      
 
 
      Код содержит также два способа объявления полей:
      
diff --git a/files/ru/learn/server-side/express_nodejs/skeleton_website/index.html b/files/ru/learn/server-side/express_nodejs/skeleton_website/index.html
index 124dedd1f70aba..06199cbe48f075 100644
--- a/files/ru/learn/server-side/express_nodejs/skeleton_website/index.html
+++ b/files/ru/learn/server-side/express_nodejs/skeleton_website/index.html
@@ -29,7 +29,7 @@ 
      Обзор
      
 
      Далее показано, как вызвать генератор приложений, и даётся небольшое пояснение различных вариантов представлений и CSS. Мы поясним структуру каркаса веб-сайта. В конце мы покажем, как запустить веб-сайт, чтобы убедиться, что он работает.
      
 
 
      
-
      Замечание: Express Application Generator — не единственный генератор Express-приложений, и созданный проект --не единственный жизнеспособный способ организации ваших файлов и каталогов. Однако созданный сайт имеет модульную структуру, которую легко понять и расширить. О минимальном Express приложении смотрите Hello world example в документации Express.
      
+
      Замечание: Express Application Generator — не единственный генератор Express-приложений, и созданный проект --не единственный жизнеспособный способ организации ваших файлов и каталогов. Однако созданный сайт имеет модульную структуру, которую легко понять и расширить. О минимальном Express приложении смотрите Hello world example в документации Express.
      
 
      
 
 
      Применение генератора приложений
      
@@ -61,11 +61,11 @@ 
      Прим
     -f, --force          force on non-empty directory (работать в каталоге с файлами)
 
      
 
-
      Команда express создаст проект в текущем каталоге с использованием (устаревшего) движка представления Jade и обычного CSS. Если указать express name, проект будет создан в подкаталоге name текущего каталога. 
      
+
      Команда express создаст проект в текущем каталоге с использованием (устаревшего) движка представления Jade и обычного CSS. Если указать express name, проект будет создан в подкаталоге name текущего каталога. 
      
 
 
      express
      
 
-
      Можно выбрать движок представления (шаблон), используя --view; параметр --css  позволяет выбрать движок для создания CSS.
      
+
      Можно выбрать движок представления (шаблон), используя --view; параметр --css  позволяет выбрать движок для создания CSS.
      
 
 
      
 
      Примечание: Другие опции (--hogan, --ejs, --hbs и пр.) для выбора шаблонизатора устарели. Используйте --view (или -v)!
      
@@ -76,7 +76,7 @@ 
      EJS, Hbs, Pug (Jade), Twig, и Vash, но по умолчанию  выбран Jade. Экспресс сразу после установки может поддерживать большое количество и других шаблонизаторов.
      
 
 
      
-
      Примечание: При желании использовать шаблонизатор, который не поддерживается генератором,  просмотрите  документацию Using template engines with Express  и документацию для нужного шаблонизатора.
      
+
      Примечание: При желании использовать шаблонизатор, который не поддерживается генератором,  просмотрите  документацию Using template engines with Express  и документацию для нужного шаблонизатора.
      
 
      
 
 
      Как правило, следует выбрать шаблонизатор, который имеет всю необходимую вам функциональность и обеспечивает вам высокую производительность - так же, как вы выбираете любой другой компонент! Некоторые критерии для сравнения шаблонизаторов:
      
@@ -125,12 +125,12 @@ 
      Создание проекта
      
 
 
      Разрабатывая пример - приложение Local Library, мы построим проект с именем express-locallibrary-tutorial. Используем библиотеку шаблонов Pug, а движок CSS применять не будем.
      
 
-
      Выберем место для нового проекта — каталог express-locallibrary-tutorial - и выполним команду:
      
+
      Выберем место для нового проекта — каталог express-locallibrary-tutorial - и выполним команду:
      
 
 
      express express-locallibrary-tutorial --view=pug
 
      
 
-
      Будет создан каталог express-locallibrary-tutorial и выведен список созданных внутри каталога проектных файлов.
      
+
      Будет создан каталог express-locallibrary-tutorial и выведен список созданных внутри каталога проектных файлов.
      
 
 
         create : express-locallibrary-tutorial
    create : express-locallibrary-tutorial/package.json
@@ -220,7 +220,7 @@ 
      npm install -g nodemon
      
+
      npm install -g nodemon
      
 
 
 
@@ -461,11 +461,11 @@ 
      Пути (Routes)
      
 
      Совет: запустите сервер и задайте в браузере URL http://localhost:3000/users/. Вы должны увидеть сообщение: 'respond with a resource'.
      
 
      
 
-
      Стоит отметить, что колбэк-функция имеет третий аргумент - 'next', т. е. является не простой колбэк-функцией, а колбэк-функцией промежуточного модуля. Пока третий аргумент не используется, но будет полезен в дальнейшем, если мы захотим создать несколько обработчиков пути '/'.
      
+
      Стоит отметить, что колбэк-функция имеет третий аргумент - 'next', т. е. является не простой колбэк-функцией, а колбэк-функцией промежуточного модуля. Пока третий аргумент не используется, но будет полезен в дальнейшем, если мы захотим создать несколько обработчиков пути '/'.
      
 
 
      Представления (шаблоны)
      
 
-
      Файлы преставлений (шаблонов) хранятся в каталоге /views (это указано в app.js) и имеют расширение .pug. Метод Response.render() выполняет указанный шаблон, передавая объекту значение именованной переменной, и затем посылает результат как ответ. В коде из /routes/index.js (приводится ниже) можно увидеть, что роут отвечает, используя шаблон "index" с переданным значением переменной "title" из шаблона.
      
+
      Файлы преставлений (шаблонов) хранятся в каталоге /views (это указано в app.js) и имеют расширение .pug. Метод Response.render() выполняет указанный шаблон, передавая объекту значение именованной переменной, и затем посылает результат как ответ. В коде из /routes/index.js (приводится ниже) можно увидеть, что роут отвечает, используя шаблон "index" с переданным значением переменной "title" из шаблона.
      
 
 
      /* GET home page. */
 router.get('/', function(req, res) {
diff --git a/files/ru/learn/server-side/express_nodejs/tutorial_local_library_website/index.html b/files/ru/learn/server-side/express_nodejs/tutorial_local_library_website/index.html
index 880378219ef424..df8770ee704efa 100644
--- a/files/ru/learn/server-side/express_nodejs/tutorial_local_library_website/index.html
+++ b/files/ru/learn/server-side/express_nodejs/tutorial_local_library_website/index.html
@@ -33,9 +33,9 @@
 
 
      Обзор
      
 
-
      Добро пожаловать в учебник MDN «Local Library» Express (Node), в котором мы разрабатываем веб-сайт, который может использоваться для управления каталогом локальной библиотеки.
      
+
      Добро пожаловать в учебник MDN «Local Library» Express (Node), в котором мы разрабатываем веб-сайт, который может использоваться для управления каталогом локальной библиотеки.
      
 
-
      В этой серии обучающих статей вы будете:
      
+
      В этой серии обучающих статей вы будете:
      
 
 
        
  
      • Использовать инструмент Express Application Generator для создания веб-сайта и скелета приложения.
        • 
@@ -55,15 +55,15 @@ 
        Сайт LocalLibrary
        
 
        Этот пример был тщательно подобран, потому что он может масштабироваться, чтобы отображать насколько можно много или мало записей, и может использоваться для демонстрации почти любой возможности Express. Что ещё более важно, это позволяет нам обеспечить управляемый путь через функциональность, которая вам понадобится на любом веб-сайте:
        
 
 
          
- 
        • В первых учебных статьях мы определим простую библиотеку, доступную только для просмотра, которую могут использовать члены библиотеки, чтобы узнать, какие книги доступны. Это позволяет нам исследовать операции, общие для почти каждого сайта: чтение и отображение содержимого из базы данных.
          • 
- 
        • По мере нашего развития, пример библиотеки, естественно, будет расширяться, чтобы продемонстрировать более продвинутые функции веб-сайта. Например, мы можем расширить библиотеку, чтобы разрешить создание новых книг, и использовать это, чтобы продемонстрировать, как использовать формы, а также поддерживать аутентификацию пользователей.
          • 
+ 
        • В первых учебных статьях мы определим простую библиотеку, доступную только для просмотра, которую могут использовать члены библиотеки, чтобы узнать, какие книги доступны. Это позволяет нам исследовать операции, общие для почти каждого сайта: чтение и отображение содержимого из базы данных.
          • 
+ 
        • По мере нашего развития, пример библиотеки, естественно, будет расширяться, чтобы продемонстрировать более продвинутые функции веб-сайта. Например, мы можем расширить библиотеку, чтобы разрешить создание новых книг, и использовать это, чтобы продемонстрировать, как использовать формы, а также поддерживать аутентификацию пользователей.
          • 
 
        
 
 
        Несмотря на то, что это очень масштабируемый пример, он называется LocalLibrary, потому что мы надеемся показать минимальную информацию, которая поможет быстро начать работать с Express. В результате мы будем хранить информацию о книгах, копиях книг, авторов и другой ключевой информации. Однако, мы не будем хранить информацию о других предметах, которые может предоставить библиотека, или предоставить инфраструктуру, необходимую для поддержки нескольких сайтов библиотек или других функций "большой библиотеки".
        
 
 
        Я застрял, где я могу посмотреть код?
        
 
-
        По мере того, как вы работаете над учебником, мы предоставим вам соответствующие фрагменты кода для копирования и вставки в каждой точке, а также будет другой код, который, мы надеемся, вы расширите самостоятельно (с некоторыми рекомендациями).
        
+
        По мере того, как вы работаете над учебником, мы предоставим вам соответствующие фрагменты кода для копирования и вставки в каждой точке, а также будет другой код, который, мы надеемся, вы расширите самостоятельно (с некоторыми рекомендациями).
        
 
 
        Если вы застряли, вы можете найти полностью разработанную версию веб-сайта на Github.
        
 
diff --git a/files/ru/learn/server-side/first_steps/client-server_overview/index.html b/files/ru/learn/server-side/first_steps/client-server_overview/index.html
index a748bf9046edd2..2391df40fe4e63 100644
--- a/files/ru/learn/server-side/first_steps/client-server_overview/index.html
+++ b/files/ru/learn/server-side/first_steps/client-server_overview/index.html
@@ -255,7 +255,7 @@ 
        Анатом
  
      • Веб-сервер загружает статические файлы из файловой системы и возвращает их непосредственно в браузер (опять же, правильная обработка файлов основана на правилах конфигурации и сопоставлении шаблонов URL).
        •
    -

    Операция по обновлению записи в базе данных будет обрабатываться аналогичным образом, за исключением того, что, как и любое обновление базы данных, HTTP-запрос из браузера должен быть закодирован как запрос POST.

    +

    Операция по обновлению записи в базе данных будет обрабатываться аналогичным образом, за исключением того, что, как и любое обновление базы данных, HTTP-запрос из браузера должен быть закодирован как запрос POST.

    Выполнение другой работы

    diff --git a/files/ru/learn/server-side/first_steps/introduction/index.html b/files/ru/learn/server-side/first_steps/introduction/index.html index ba9fd8912360d0..7e5068c844c264 100644 --- a/files/ru/learn/server-side/first_steps/introduction/index.html +++ b/files/ru/learn/server-side/first_steps/introduction/index.html @@ -14,7 +14,7 @@
    {{NextMenu("Learn/Server-side/First_steps/Client-Server_overview", "Learn/Server-side/First_steps")}}
    -

    Добро пожаловать на курс для начинающих по программированию серверной части сайта! В этой первой статье мы рассмотрим программирование на стороне сервера с высокого уровня, отвечая на такие вопросы, как «что это»?, «как это отличается от программирования на стороне клиента»? и «почему это так полезно»? После прочтения этой статьи вы поймёте дополнительные возможности, доступные веб-сайтам посредством программирования на стороне сервера.

    +

    Добро пожаловать на курс для начинающих по программированию серверной части сайта! В этой первой статье мы рассмотрим программирование на стороне сервера с высокого уровня, отвечая на такие вопросы, как «что это»?, «как это отличается от программирования на стороне клиента»? и «почему это так полезно»? После прочтения этой статьи вы поймёте дополнительные возможности, доступные веб-сайтам посредством программирования на стороне сервера.

    diff --git a/files/ru/learn/server-side/first_steps/web_frameworks/index.html b/files/ru/learn/server-side/first_steps/web_frameworks/index.html index 98fa30ccad03c2..e61057325b1ccf 100644 --- a/files/ru/learn/server-side/first_steps/web_frameworks/index.html +++ b/files/ru/learn/server-side/first_steps/web_frameworks/index.html @@ -80,22 +80,22 @@

    Уп

    Данные могут быть закодированы в HTTP-запросе разными способами. Для получения файлов или данных с сервера, HTTP-запрос GET может кодировать, какие данные требуются в URL-параметрах или в структуре URL. HTTP-запрос POST для обновления ресурса на сервере вместо этого будет включать обновлённую информацию как «POST данные» внутри тела запроса. HTTP-запрос может также включать информацию о текущей сессии или пользователе в cookie со стороны клиента.

    -

    Веб-фреймворки предоставляют соответствующие языку программирования механизмы доступа к этой информации. Например, объект HttpRequest, который Django передаёт каждой функции «view», содержит методы и свойства для доступа к целевому URL, типу запроса (например, HTTP GET), параметрам GET или POST, файлам cookie и данным сеанса и т. д. Django также может передавать информацию, закодированную в структуре URL, путём определения «шаблонов захвата» в преобразователе URL (см. последний фрагмент кода в разделе выше).

    +

    Веб-фреймворки предоставляют соответствующие языку программирования механизмы доступа к этой информации. Например, объект HttpRequest, который Django передаёт каждой функции «view», содержит методы и свойства для доступа к целевому URL, типу запроса (например, HTTP GET), параметрам GET или POST, файлам cookie и данным сеанса и т. д. Django также может передавать информацию, закодированную в структуре URL, путём определения «шаблонов захвата» в преобразователе URL (см. последний фрагмент кода в разделе выше).

    -

    Абстрагируйте и упростите доступ к базе данных

    +

    Абстрагируйте и упростите доступ к базе данных

    -

    Веб-сайты используют базы данных для хранения информации как для пользователей, так и о пользователях. Веб-фреймворки часто предоставляют слой базы данных, который абстрагирует операции чтения, записи, запроса и удаления базы данных. Этот уровень абстракции называется Object-Relational Mapper (ORM).

    +

    Веб-сайты используют базы данных для хранения информации как для пользователей, так и о пользователях. Веб-фреймворки часто предоставляют слой базы данных, который абстрагирует операции чтения, записи, запроса и удаления базы данных. Этот уровень абстракции называется Object-Relational Mapper (ORM).

    -

    Использование ORM имеет два преимущества:

    +

    Использование ORM имеет два преимущества:

    -

    Например, веб-фреймворк Django предоставляет ORM и ссылается на объект, используемый для определения структуры записи в качестве модели. Модель задаёт типы полей, которые должны быть сохранены, что может обеспечить проверку на уровне поля того, какая информация может быть сохранена (например, поле электронной почты будет разрешать только действительные адреса электронной почты). В определениях полей также можно указать их максимальный размер, значения по умолчанию, параметры списка выбора, текст справки для документации, текст метки для форм и т. д. Модель не содержит никакой информации о базе данных, поскольку это параметр конфигурации, который может быть изменён отдельно от нашего кода.
    -
    - Первый фрагмент кода ниже показывает очень простую модель Django для объекта     Team. Это сохраняет название команды и уровень команды как символьные поля и определяет максимальное количество символов для каждой записи. team_level — это поле выбора, поэтому здесь мы связываем варианты значений на выбор с сохраняемыми данными, а также значение по умолчанию.

    +

    Например, веб-фреймворк Django предоставляет ORM и ссылается на объект, используемый для определения структуры записи в качестве модели. Модель задаёт типы полей, которые должны быть сохранены, что может обеспечить проверку на уровне поля того, какая информация может быть сохранена (например, поле электронной почты будет разрешать только действительные адреса электронной почты). В определениях полей также можно указать их максимальный размер, значения по умолчанию, параметры списка выбора, текст справки для документации, текст метки для форм и т. д. Модель не содержит никакой информации о базе данных, поскольку это параметр конфигурации, который может быть изменён отдельно от нашего кода.

    + +

    Первый фрагмент кода ниже показывает очень простую модель Django для объекта Team. Это сохраняет название команды и уровень команды как символьные поля и определяет максимальное количество символов для каждой записи. team_level — это поле выбора, поэтому здесь мы связываем варианты значений на выбор с сохраняемыми данными, а также значение по умолчанию.

    #best/models.py
 
@@ -113,9 +113,9 @@ 
    Модель Django предоставляет простой API запросов для поиска в базе данных. Это может соответствовать нескольким полям одновременно, используя различные критерии (например, exact (точный), case-insensitive (без учёта регистра), greater than (больше чем) и т. п.), а также может поддерживать сложные операторы (например, вы можете указать поиск для команд U11, в которых есть команда имя, которое начинается с «Fr» или заканчивается на «al»).
    
- 
    
- Второй фрагмент кода показывает функцию представления (обработчик ресурсов) для отображения всех наших команд U09. В этом случае мы указываем, что мы хотим фильтровать для всех записей, где поле     team_level имеет в точности текст «U09» (обратите внимание ниже, как этот критерий передаётся функции filter() в качестве аргумента с именем поля и типом соответствия, отделённым двойным подчёркиванием: team_level__exact).
    
+
    Модель Django предоставляет простой API запросов для поиска в базе данных. Это может соответствовать нескольким полям одновременно, используя различные критерии (например, exact (точный), case-insensitive (без учёта регистра), greater than (больше чем) и т. п.), а также может поддерживать сложные операторы (например, вы можете указать поиск для команд U11, в которых есть команда имя, которое начинается с «Fr» или заканчивается на «al»).
    
+
+
    Второй фрагмент кода показывает функцию представления (обработчик ресурсов) для отображения всех наших команд U09. В этом случае мы указываем, что мы хотим фильтровать для всех записей, где поле team_level имеет в точности текст «U09» (обратите внимание ниже, как этот критерий передаётся функции filter() в качестве аргумента с именем поля и типом соответствия, отделённым двойным подчёркиванием: team_level__exact).
    
 
 
    #best/views.py
 
@@ -131,19 +131,19 @@ 
    Отрисовка данных
    
+
    Отрисовка данных
    
+
+
    Веб-фреймворки часто предоставляют системы шаблонов. Они позволяют вам указать структуру выходного документа, используя заполнители для данных, которые будут добавлены при создании страницы. Шаблоны часто используются для создания HTML, но могут также создавать другие типы документов.
    
 
-
    Веб-фреймворки часто предоставляют системы шаблонов. Они позволяют вам указать структуру выходного документа, используя заполнители для данных, которые будут добавлены при создании страницы. Шаблоны часто используются для создания HTML, но могут также создавать другие типы документов.
    
- 
    
- Веб-фреймворки часто предоставляют механизм, позволяющий легко создавать другие форматы из хранимых данных, включая {{glossary ("JSON")}} и {{glossary ("XML")}}.
    
- 
    
- Например, система шаблонов Django позволяет вам задавать переменные с использованием синтаксиса «двойных велосипедных рулей» (например,     {{ имя_переменной }}), которые будут заменены значениями, передаваемыми из функции «view» при отрисовке страницы. Система шаблонов также обеспечивает поддержку выражений (с синтаксисом: {% выражение %}), которые позволяют шаблонам выполнять простые операции, такие как повторение значений списка, передаваемых в шаблон.
    
+
    Веб-фреймворки часто предоставляют механизм, позволяющий легко создавать другие форматы из хранимых данных, включая {{glossary ("JSON")}} и {{glossary ("XML")}}.
    
+
+
    Например, система шаблонов Django позволяет вам задавать переменные с использованием синтаксиса «двойных велосипедных рулей» (например, {{ имя_переменной }}), которые будут заменены значениями, передаваемыми из функции «view» при отрисовке страницы. Система шаблонов также обеспечивает поддержку выражений (с синтаксисом: {% выражение %}), которые позволяют шаблонам выполнять простые операции, такие как повторение значений списка, передаваемых в шаблон.
    
 
 
    
-
    На заметку. Многие другие системы шаблонов используют аналогичный синтаксис, например: Jinja2 (Python),  handlebars  (JavaScript),  moustache  (JavaScript) и т. п.
    
+
    На заметку. Многие другие системы шаблонов используют аналогичный синтаксис, например: Jinja2 (Python),  handlebars  (JavaScript),  moustache  (JavaScript) и т. п.
    
 
    
 
-
    Фрагмент кода ниже показывает, как это работает. Продолжая пример «самой молодой команды» из предыдущего раздела, HTML-шаблон передаёт представлению переменную списка youngest_teams. Внутри скелета HTML у нас есть выражение, которое сначала проверяет, существует ли переменная youngest_teams, а затем повторяет её в цикле for. На каждой итерации шаблон отображает значение team_name команды в элементе списка.
    
+
    Фрагмент кода ниже показывает, как это работает. Продолжая пример «самой молодой команды» из предыдущего раздела, HTML-шаблон передаёт представлению переменную списка youngest_teams. Внутри скелета HTML у нас есть выражение, которое сначала проверяет, существует ли переменная youngest_teams, а затем повторяет её в цикле for. На каждой итерации шаблон отображает значение team_name команды в элементе списка.
    
 
 
    #best/templates/best/index.html
 
@@ -165,130 +165,129 @@ 
    Как выбрать веб-фреймворк
    
+
    Как выбрать веб-фреймворк
    
 
-
    Многочисленные веб-фреймворки существуют практически для каждого языка программирования, который вы, возможно, захотите использовать (мы перечислим несколько наиболее популярных фреймворков в следующем разделе). При таком большом количестве вариантов может оказаться затруднительным определить, какой фреймворк обеспечивает лучшую отправную точку для вашего нового веб-приложения.
    
+
    Многочисленные веб-фреймворки существуют практически для каждого языка программирования, который вы, возможно, захотите использовать (мы перечислим несколько наиболее популярных фреймворков в следующем разделе). При таком большом количестве вариантов может оказаться затруднительным определить, какой фреймворк обеспечивает лучшую отправную точку для вашего нового веб-приложения.
    
 
-
    Вот некоторые из факторов, которые могут повлиять на ваше решение:
    
+
    Вот некоторые из факторов, которые могут повлиять на ваше решение:
    
 
 
      
- 
    • Усилия для изучения: усилия по изучению веб-фреймворка зависят от того, насколько вы знакомы с базовым языком программирования, последовательностью его API, качеством документации, а также размером и активностью поддерживающего его сообщества. Если вы начинаете без какого бы то ни было опыта программирования, подумайте о Django (это один из самых простых способов изучения на основе вышеуказанных критериев). Если вы являетесь частью команды разработчиков, которая уже имеет значительный опыт работы с определённым веб-фреймворком или языком программирования, то имеет смысл остановиться на используемом.
      • 
- 
    • Производительность: Производительность — это показатель того, насколько быстро вы можете создавать новые функции, когда вы знакомы с платформой, и включает в себя как усилия по написанию, так и по обслуживанию кода (поскольку вы не можете писать новые функции, пока старые не работают). Многие из факторов, влияющих на производительность, аналогичны тем, которые используются для «Усилий по обучению» — например, документация, сообщество, опыт программирования и т. д. — другие факторы включают в себя:
+ 
    • Усилия для изучения: усилия по изучению веб-фреймворка зависят от того, насколько вы знакомы с базовым языком программирования, последовательностью его API, качеством документации, а также размером и активностью поддерживающего его сообщества. Если вы начинаете без какого бы то ни было опыта программирования, подумайте о Django (это один из самых простых способов изучения на основе вышеуказанных критериев). Если вы являетесь частью команды разработчиков, которая уже имеет значительный опыт работы с определённым веб-фреймворком или языком программирования, то имеет смысл остановиться на используемом.
      • 
+ 
    • Производительность: Производительность — это показатель того, насколько быстро вы можете создавать новые функции, когда вы знакомы с платформой, и включает в себя как усилия по написанию, так и по обслуживанию кода (поскольку вы не можете писать новые функции, пока старые не работают). Многие из факторов, влияющих на производительность, аналогичны тем, которые используются для «Усилий по обучению» — например, документация, сообщество, опыт программирования и т. д. — другие факторы включают в себя:
   
        
-   
      • Назначение / происхождение фреймворка: Некоторые веб-фреймворки изначально создавались для решения определённых типов проблем и работают лучше при создании веб-приложений с аналогичными ограничениями. Например, Django был создан для поддержки разработки газетного веб-сайта, поэтому он хорош для блогов и других сайтов, связанных с публикацией материалов. Flask, напротив, является гораздо более лёгкой средой и отлично подходит для создания веб-приложений, работающих на встроенных устройствах.
        • 
-   
      • Основанный на мнении сообщества против не имеющего мнения. Фреймворк, основанный на мнении — это тот, в котором рекомендованы «лучшие» способы решения конкретной проблемы. Такие фреймворки, как правило, более продуктивны, когда вы пытаетесь решить общие проблемы, потому что они ведут вас в правильном направлении, однако иногда они менее гибки.
        • 
-   
      • Всё включено против разбирайтесь сами: некоторые веб-фреймворки включают в себя инструменты / библиотеки, которые решают каждую проблему, которую их разработчики могут считать «по умолчанию», в то время как более лёгкие фреймворки ожидают, что веб-разработчики будут выбирать решение проблем из отдельных библиотек (например, Django из первых, в то время как Flask является примером очень лёгкого каркаса). Начать работу с фреймворками, которые включают в себя всё, часто легче, потому что «из коробки» у вас уже есть всё, что вам нужно, и есть вероятность, что они хорошо интегрированы и хорошо документированы. Однако, если меньший фреймворк имеет всё, что вам (когда-либо) понадобится, он может работать в более стеснённых условиях и будет иметь меньший и более простой набор вещей для изучения.
        • 
-   
      • Поощряет ли платформа хорошие практики разработки или нет: например, фреймворк, который поощряет архитектуру Model-View-Controller, разделяющую код на логические функции, приведёт к более поддерживаемому коду, чем тот, который не ожидает этого от разработчиков. Аналогично дизайн фреймворка может оказать большое влияние на то, насколько легко тестировать и повторно использовать код.
        • 
+   
      • Назначение / происхождение фреймворка: Некоторые веб-фреймворки изначально создавались для решения определённых типов проблем и работают лучше при создании веб-приложений с аналогичными ограничениями. Например, Django был создан для поддержки разработки газетного веб-сайта, поэтому он хорош для блогов и других сайтов, связанных с публикацией материалов. Flask, напротив, является гораздо более лёгкой средой и отлично подходит для создания веб-приложений, работающих на встроенных устройствах.
        • 
+   
      • Основанный на мнении сообщества против не имеющего мнения. Фреймворк, основанный на мнении — это тот, в котором рекомендованы «лучшие» способы решения конкретной проблемы. Такие фреймворки, как правило, более продуктивны, когда вы пытаетесь решить общие проблемы, потому что они ведут вас в правильном направлении, однако иногда они менее гибки.
        • 
+   
      • Всё включено против разбирайтесь сами: некоторые веб-фреймворки включают в себя инструменты / библиотеки, которые решают каждую проблему, которую их разработчики могут считать «по умолчанию», в то время как более лёгкие фреймворки ожидают, что веб-разработчики будут выбирать решение проблем из отдельных библиотек (например, Django из первых, в то время как Flask является примером очень лёгкого каркаса). Начать работу с фреймворками, которые включают в себя всё, часто легче, потому что «из коробки» у вас уже есть всё, что вам нужно, и есть вероятность, что они хорошо интегрированы и хорошо документированы. Однако, если меньший фреймворк имеет всё, что вам (когда-либо) понадобится, он может работать в более стеснённых условиях и будет иметь меньший и более простой набор вещей для изучения.
        • 
+   
      • Поощряет ли платформа хорошие практики разработки или нет: например, фреймворк, который поощряет архитектуру Model-View-Controller, разделяющую код на логические функции, приведёт к более поддерживаемому коду, чем тот, который не ожидает этого от разработчиков. Аналогично дизайн фреймворка может оказать большое влияние на то, насколько легко тестировать и повторно использовать код.
        • 
   
      
  
      • 
- 
    • Производительность фреймворка / языка программирования: Обычно «скорость» не является самым значимым критерием при выборе, потому что даже относительно медленные среды выполнения, такие как Python, более чем «достаточно хороши» для сайтов среднего размера, работающих на умеренном оборудовании. Ожидаемым плюсам скорости другого языка, например C++ или JavaScript, могут быть противопоставлены минусы в виде затрат на его изучение и обслуживание. 
      • 
- 
    • Поддержка кеширования: По мере того, как ваш сайт становится более успешным, вы можете столкнуться с тем, что он больше не справляется с количеством запросов, которые получает, когда пользователи им пользуются. На этом этапе вы можете рассмотреть возможность добавления поддержки кеширования. Кеширование — это оптимизация, при которой вы сохраняете весь веб-ответ или его часть так, чтобы его не нужно было пересчитывать при последующих запросах. Возврат кешированного ответа гораздо быстрее, чем его вычисление. Кеширование может быть реализовано в вашем коде или на сервере (см. обратный прокси). Веб-фреймворки будут иметь разные уровни поддержки для определения того, какой контент можно кешировать.
      • 
- 
    • Масштабируемость. Как только ваш веб-сайт станет фантастически успешным, вы исчерпаете преимущества кеширования и даже достигнете пределов вертикального масштабирования (запуска веб-приложения на более мощном оборудовании). На этом этапе вам может потребоваться масштабировать горизонтально (разделить нагрузку, распределяя ваш сайт между несколькими веб-серверами и базами данных) или масштабировать «географически», потому что некоторые из ваших клиентов находятся далеко от вашего сервера. Веб-фреймворк, который вы выберете, может существенно повлиять на то, насколько легко масштабировать ваш сайт.
      • 
- 
    • Веб-безопасность. Некоторые веб-фреймворки предоставляют лучшую поддержку для обработки распространённых веб-атак. Например, Django очищает весь пользовательский ввод от HTML-шаблонов, чтобы введённый пользователем JavaScript не мог быть запущен. Другие платформы предоставляют аналогичную защиту, но она не всегда включена по умолчанию.
      • 
+ 
    • Производительность фреймворка / языка программирования: Обычно «скорость» не является самым значимым критерием при выборе, потому что даже относительно медленные среды выполнения, такие как Python, более чем «достаточно хороши» для сайтов среднего размера, работающих на умеренном оборудовании. Ожидаемым плюсам скорости другого языка, например C++ или JavaScript, могут быть противопоставлены минусы в виде затрат на его изучение и обслуживание. 
      • 
+ 
    • Поддержка кеширования: По мере того, как ваш сайт становится более успешным, вы можете столкнуться с тем, что он больше не справляется с количеством запросов, которые получает, когда пользователи им пользуются. На этом этапе вы можете рассмотреть возможность добавления поддержки кеширования. Кеширование — это оптимизация, при которой вы сохраняете весь веб-ответ или его часть так, чтобы его не нужно было пересчитывать при последующих запросах. Возврат кешированного ответа гораздо быстрее, чем его вычисление. Кеширование может быть реализовано в вашем коде или на сервере (см. обратный прокси). Веб-фреймворки будут иметь разные уровни поддержки для определения того, какой контент можно кешировать.
      • 
+ 
    • Масштабируемость. Как только ваш веб-сайт станет фантастически успешным, вы исчерпаете преимущества кеширования и даже достигнете пределов вертикального масштабирования (запуска веб-приложения на более мощном оборудовании). На этом этапе вам может потребоваться масштабировать горизонтально (разделить нагрузку, распределяя ваш сайт между несколькими веб-серверами и базами данных) или масштабировать «географически», потому что некоторые из ваших клиентов находятся далеко от вашего сервера. Веб-фреймворк, который вы выберете, может существенно повлиять на то, насколько легко масштабировать ваш сайт.
      • 
+ 
    • Веб-безопасность. Некоторые веб-фреймворки предоставляют лучшую поддержку для обработки распространённых веб-атак. Например, Django очищает весь пользовательский ввод от HTML-шаблонов, чтобы введённый пользователем JavaScript не мог быть запущен. Другие платформы предоставляют аналогичную защиту, но она не всегда включена по умолчанию.
      • 
 
    
 
-
    Существует также много других возможных влияющих факторов, включая вопросы лицензирования, зависимость от того, находится ли фреймворк в процессе активной разработки и т. д.
    
- 
    
- Если вы абсолютный новичок в программировании, вы, вероятно, выберете свою среду на основе «простоты обучения». В дополнение к «простоте использования» самого языка, ваши самые ценные ресурсы — это высококачественная документация / учебные пособия и активное сообщество, помогающее новым пользователям. Мы выбрали Django (Python) и Express (Node/JavaScript) для написания наших примеров далее в курсе, главным образом потому, что они просты в освоении и имеют хорошую поддержку.
    
+
    Существует также много других возможных влияющих факторов, включая вопросы лицензирования, зависимость от того, находится ли фреймворк в процессе активной разработки и т. д.
    
+
+
    Если вы абсолютный новичок в программировании, вы, вероятно, выберете свою среду на основе «простоты обучения». В дополнение к «простоте использования» самого языка, ваши самые ценные ресурсы — это высококачественная документация / учебные пособия и активное сообщество, помогающее новым пользователям. Мы выбрали Django (Python) и Express (Node/JavaScript) для написания наших примеров далее в курсе, главным образом потому, что они просты в освоении и имеют хорошую поддержку.
    
 
 
    
-
    На заметку: Давайте перейдём к основным веб-сайтам для Django (Python) и Express (Node/JavaScript) и ознакомимся с их документацией и сообществом.
    
+
    На заметку: Давайте перейдём к основным веб-сайтам для Django (Python) и Express (Node/JavaScript) и ознакомимся с их документацией и сообществом.
    
 
 
      
- 
    1. Перейдите к основным сайтам (ссылки выше)
+ 
    2. Перейдите к основным сайтам (ссылки выше)
 
   
        
-   
      • Нажмите на ссылки меню «Документация» (такие вещи, как «Документация, Руководство, Справочник по API, Начало работы»).
        • 
-   
      • Можете ли вы увидеть темы, показывающие, как настроить маршрутизацию URL, шаблоны и базы данных / модели?
        • 
-   
      • Понятны ли эти документы?
        • 
+   
      • Нажмите на ссылки меню «Документация» (такие вещи, как «Документация, Руководство, Справочник по API, Начало работы»).
        • 
+   
      • Можете ли вы увидеть темы, показывающие, как настроить маршрутизацию URL, шаблоны и базы данных / модели?
        • 
+   
      • Понятны ли эти документы?
        • 
   
      
  
      3. 
- 
    3. Перейдите к спискам рассылки для каждого сайта (доступно по ссылкам сообщества).
+ 
    4. Перейдите к спискам рассылки для каждого сайта (доступно по ссылкам сообщества).
   
        
-   
      • Сколько вопросов было опубликовано за последние несколько дней?
        • 
-   
      • У скольких есть ответы?
        • 
-   
      • Есть ли у них активное сообщество?
        • 
+   
      • Сколько вопросов было опубликовано за последние несколько дней?
        • 
+   
      • У скольких есть ответы?
        • 
+   
      • Есть ли у них активное сообщество?
        • 
   
      
  
      5. 
 
    
 
    
 
-
    Несколько хороших веб-фреймворков?
    
+
    Несколько хороших веб-фреймворков?
    
 
-
    Давайте продолжим и обсудим несколько конкретных серверных веб-фреймворков.
    
- 
    
- Фреймворки на стороне сервера, представленные ниже, представляют собой несколько самых популярных из доступных на момент написания. Все они имеют всё, что вам нужно для продуктивной работы     — они с открытым исходным кодом, находятся в процессе активной разработки, имеют полные энтузиазма сообщества, создающие документацию и помогающие пользователям на форумах, и используются на большом количестве выдающихся веб-сайтов. Существует также много других замечательных серверных фреймворков, которые вы можете найти с помощью обычного поиска в Интернете.
    
+
    Давайте продолжим и обсудим несколько конкретных серверных веб-фреймворков.
    
+
+
    Фреймворки на стороне сервера, представленные ниже, представляют собой несколько самых популярных из доступных на момент написания. Все они имеют всё, что вам нужно для продуктивной работы — они с открытым исходным кодом, находятся в процессе активной разработки, имеют полные энтузиазма сообщества, создающие документацию и помогающие пользователям на форумах, и используются на большом количестве выдающихся веб-сайтов. Существует также много других замечательных серверных фреймворков, которые вы можете найти с помощью обычного поиска в Интернете.
    
 
 
    
-
    На заметку: Описания взяты (частично) с веб-сайтов фреймворка!
    
+
    На заметку: Описания взяты (частично) с веб-сайтов фреймворка!
    
 
    
 
 
    Django (Python)
    
 
-
    Django — это веб-фреймворк высокого уровня на языке Python, который способствует быстрой разработке и чистому, прагматичному дизайну. Созданный опытными разработчиками, он берёт на себя большую часть хлопот веб-разработки, поэтому вы можете сосредоточиться на написании своего приложения без необходимости заново изобретать велосипед. Он бесплатен для использования и имеет открытый исходный код.
    
- 
    
- Django следует философии «Всё включено» и предоставляет практически всё, что большинство разработчиков может пожелать «из коробки». Поскольку всё включено, всё работает вместе, следует последовательным принципам проектирования и имеет обширную и актуальную документацию. Он также быстр, безопасен и очень масштабируем. Основанный на Python, код Django легко читать и поддерживать.
    
+
    Django — это веб-фреймворк высокого уровня на языке Python, который способствует быстрой разработке и чистому, прагматичному дизайну. Созданный опытными разработчиками, он берёт на себя большую часть хлопот веб-разработки, поэтому вы можете сосредоточиться на написании своего приложения без необходимости заново изобретать велосипед. Он бесплатен для использования и имеет открытый исходный код.
    
+
+
    Django следует философии «Всё включено» и предоставляет практически всё, что большинство разработчиков может пожелать «из коробки». Поскольку всё включено, всё работает вместе, следует последовательным принципам проектирования и имеет обширную и актуальную документацию. Он также быстр, безопасен и очень масштабируем. Основанный на Python, код Django легко читать и поддерживать.
    
 
-
    Популярные сайты, использующие Django (с домашней страницы Django), включают в себя: Disqus, Instagram, Knight Foundation, MacArthur Foundation, Mozilla, National Geographic, Open Knowledge Foundation, Pinterest, Open Stack.
    
+
    Популярные сайты, использующие Django (с домашней страницы Django), включают в себя: Disqus, Instagram, Knight Foundation, MacArthur Foundation, Mozilla, National Geographic, Open Knowledge Foundation, Pinterest, Open Stack.
    
 
 
    Flask (Python)
    
 
-
    Flask — это микрофреймворк для Python.
    
- 
    
- И хотя Flask минималистичен, он может создавать серьёзные веб-сайты из коробки. Он содержит сервер разработки и отладчик, а также поддерживает шаблоны Jinja2, безопасные файлы cookie, модульное тестирование и диспетчеризацию запросов RESTful. У него хорошая документация и активное сообщество.
    
+
    Flask — это микрофреймворк для Python.
    
 
-
    Flask стал чрезвычайно популярным, особенно для разработчиков, которым необходимо предоставлять веб-сервисы в небольших системах с ограниченными ресурсами (например, запуск веб-сервера на Raspberry Pi, контроллеры Drone и т. п.).
    
+
    И хотя Flask минималистичен, он может создавать серьёзные веб-сайты из коробки. Он содержит сервер разработки и отладчик, а также поддерживает шаблоны Jinja2, безопасные файлы cookie, модульное тестирование и диспетчеризацию запросов RESTful. У него хорошая документация и активное сообщество.
    
+
+
    Flask стал чрезвычайно популярным, особенно для разработчиков, которым необходимо предоставлять веб-сервисы в небольших системах с ограниченными ресурсами (например, запуск веб-сервера на Raspberry Pi, контроллеры Drone и т. п.).
    
 
 
    Express (Node.js/JavaScript)
    
 
 
    Express — быстрый, непринуждённый, гибкий и минималистский веб-фреймворк для Node.js (node — это серверная среда для запуска JavaScript). Он обеспечивает надёжный набор функций для веб и мобильных приложений и предоставляет полезные HTTP-утилиты и middleware (промежуточные интерфейсы).
    
 
-
    Express чрезвычайно популярен, частично потому, что он облегчает миграцию клиентских веб-программистов JavaScript в разработку на стороне сервера, а частично потому, что он ресурсоэффективен (базовая среда узлов использует лёгкую многозадачность в потоке, а не порождает отдельные процессы для каждого новый веб-запроса).
    
+
    Express чрезвычайно популярен, частично потому, что он облегчает миграцию клиентских веб-программистов JavaScript в разработку на стороне сервера, а частично потому, что он ресурсоэффективен (базовая среда узлов использует лёгкую многозадачность в потоке, а не порождает отдельные процессы для каждого новый веб-запроса).
    
 
-
    Поскольку Express является минималистским веб-фреймворком, он не включает в себя все компоненты, которые вы, возможно, захотите использовать (например, доступ к базе данных и поддержка пользователей и сеансов предоставляются через независимые библиотеки). Есть много отличных независимых компонентов, но иногда бывает сложно решить, какой из них лучше всего подходит для конкретной цели! 
    
+
    Поскольку Express является минималистским веб-фреймворком, он не включает в себя все компоненты, которые вы, возможно, захотите использовать (например, доступ к базе данных и поддержка пользователей и сеансов предоставляются через независимые библиотеки). Есть много отличных независимых компонентов, но иногда бывает сложно решить, какой из них лучше всего подходит для конкретной цели! 
    
 
-
    На Express основаны многие популярные серверные фреймворки, а также фреймворки полного цикла (которые включают как серверную, так и клиентскую часть), в числе которых Feathers, ItemsAPI, KeystoneJS, Kraken, LoopBack, MEAN и Sails.
    
+
    На Express основаны многие популярные серверные фреймворки, а также фреймворки полного цикла (которые включают как серверную, так и клиентскую часть), в числе которых Feathers, ItemsAPI, KeystoneJS, Kraken, LoopBack, MEAN и Sails.
    
 
-
    Express используют многие крупные компании, в том числе: Uber, Accenture, IBM и т. д. (список приведён здесь).
    
+
    Express используют многие крупные компании, в том числе: Uber, Accenture, IBM и т. д. (список приведён здесь).
    
 
 
    Ruby on Rails (Ruby)
    
 
-
    Rails (обычно именуется «Ruby on Rails») — это веб-фреймворк, написанный для языка программирования Ruby.
    
+
    Rails (обычно именуется «Ruby on Rails») — это веб-фреймворк, написанный для языка программирования Ruby.
    
+
+
    Rails следует очень похожей философии дизайна на Django. Как и Django, он предоставляет стандартные механизмы для маршрутизации URL-адресов, доступа к данным из базы данных, генерации HTML из шаблонов и форматирования таких данных как {{glossary ("JSON")}} или {{glossary ("XML")}}. Им точно так же поощряется использование шаблонов проектирования, таких как DRY («не повторяйте себя» — пишите код только один раз, если это возможно), MVC (модель-представление-контроллер) и ряд других.
    
 
-
    Rails следует очень похожей философии дизайна на Django. Как и Django, он предоставляет стандартные механизмы для маршрутизации URL-адресов, доступа к данным из базы данных, генерации HTML из шаблонов и форматирования таких данных как {{glossary ("JSON")}} или {{glossary ("XML")}}. Им точно так же поощряется использование шаблонов проектирования, таких как DRY («не повторяйте себя» — пишите код только один раз, если это возможно), MVC (модель-представление-контроллер) и ряд других.
    
- 
    
- Конечно, в них существует и много различий, которые связаны с конкретными проектными решениями и природой самих языков.
    
- 
    
- Rails использовался для крупных сайтов, в том числе: Basecamp, GitHub, Shopify, Airbnb, Twitch, SoundCloud, Hulu, Zendesk, Square, Highrise.
    
+
    Конечно, в них существует и много различий, которые связаны с конкретными проектными решениями и природой самих языков.
    
+
    Rails использовался для крупных сайтов, в том числе: Basecamp, GitHub, Shopify, Airbnb, Twitch, SoundCloud, Hulu, Zendesk, Square, Highrise.
    
 
 
    ASP.NET
    
 
-
    ASP.NET — это веб-фреймворк с открытым исходным кодом, разработанный Microsoft для создания современных веб-приложений и сервисов. С ASP.NET вы можете быстро создавать веб-сайты на основе HTML, CSS и JavaScript, масштабировать их для использования миллионами пользователей и легко добавлять более сложные возможности, такие как веб-API, формы поверх данных или коммуникации в режиме реального времени.
    
+
    ASP.NET — это веб-фреймворк с открытым исходным кодом, разработанный Microsoft для создания современных веб-приложений и сервисов. С ASP.NET вы можете быстро создавать веб-сайты на основе HTML, CSS и JavaScript, масштабировать их для использования миллионами пользователей и легко добавлять более сложные возможности, такие как веб-API, формы поверх данных или коммуникации в режиме реального времени.
    
 
-
    Одним из отличий ASP.NET является то, что он построен на Common Language Runtime (CLR, «общеязыковая исполняющая среда»), что позволяет программистам писать код ASP.NET с использованием любого поддерживаемого языка .NET (C#, Visual Basic и т. п.). Как и многие продукты Microsoft, он обладает отличными инструментами (часто бесплатными), активным сообществом разработчиков и хорошо написанной документацией.
    
+
    Одним из отличий ASP.NET является то, что он построен на Common Language Runtime (CLR, «общеязыковая исполняющая среда»), что позволяет программистам писать код ASP.NET с использованием любого поддерживаемого языка .NET (C#, Visual Basic и т. п.). Как и многие продукты Microsoft, он обладает отличными инструментами (часто бесплатными), активным сообществом разработчиков и хорошо написанной документацией.
    
 
-
    ASP.NET используется Microsoft, Xbox.com, Stack Overflow и многими другими.
    
+
    ASP.NET используется Microsoft, Xbox.com, Stack Overflow и многими другими.
    
 
 
    Mojolicious (Perl)
    
 
-
    Mojolicious — это веб-фреймворк следующего поколения для языка программирования Perl.
    
+
    Mojolicious — это веб-фреймворк следующего поколения для языка программирования Perl.
    
 
-
    Ещё в первые дни Интернета многие люди изучали Perl из-за замечательной библиотеки Perl под названием CGI. Язык позволял довольно просто начать, не зная многого о языке, и был достаточно мощным, чтобы вы продолжали работу. Mojolicious реализует эту идею, используя новейшие технологии.
    
+
    Ещё в первые дни Интернета многие люди изучали Perl из-за замечательной библиотеки Perl под названием CGI. Язык позволял довольно просто начать, не зная многого о языке, и был достаточно мощным, чтобы вы продолжали работу. Mojolicious реализует эту идею, используя новейшие технологии.
    
 
-
    Некоторые из функций, предоставляемых Mojolicious:
    
+
    Некоторые из функций, предоставляемых Mojolicious:
    
 
 
      
- 
    • веб-инфраструктура в режиме реального времени, позволяющая легко превращать отдельные файловые прототипы в хорошо структурированные веб-приложения MVC.
      • 
- 
    • RESTful маршруты, плагины, команды, шаблоны Perl-ish, согласование контента, управление сеансами, проверка форм, структура тестирования, статический файловый сервер, обнаружение CGI/PSGI, первоклассная поддержка Unicode.
      • 
- 
    • Реализация полного стека HTTP и WebSocket клиент/сервер с IPv6, TLS, SNI, IDNA, HTTP/SOCKS5 прокси, сокет домена UNIX, Comet (длинный опрос), поддержка активности, пул соединений, тайм-аут, cookie, поддержка нескольких частей и сжатия gzip.
      • 
- 
    • Парсеры и генераторы JSON и HTML/XML с поддержкой селекторов CSS.
      • 
- 
    • Очень чистый, портативный и объектно-ориентированный Perl API без скрытой магии.
      • 
- 
    • Свежий код, основанный на многолетнем опыте, бесплатный и с открытым исходным кодом.
      • 
+ 
    • веб-инфраструктура в режиме реального времени, позволяющая легко превращать отдельные файловые прототипы в хорошо структурированные веб-приложения MVC.
      • 
+ 
    • RESTful маршруты, плагины, команды, шаблоны Perl-ish, согласование контента, управление сеансами, проверка форм, структура тестирования, статический файловый сервер, обнаружение CGI/PSGI, первоклассная поддержка Unicode.
      • 
+ 
    • Реализация полного стека HTTP и WebSocket клиент/сервер с IPv6, TLS, SNI, IDNA, HTTP/SOCKS5 прокси, сокет домена UNIX, Comet (длинный опрос), поддержка активности, пул соединений, тайм-аут, cookie, поддержка нескольких частей и сжатия gzip.
      • 
+ 
    • Парсеры и генераторы JSON и HTML/XML с поддержкой селекторов CSS.
      • 
+ 
    • Очень чистый, портативный и объектно-ориентированный Perl API без скрытой магии.
      • 
+ 
    • Свежий код, основанный на многолетнем опыте, бесплатный и с открытым исходным кодом.
      • 
 
    
 
-
    Резюме
    
+
    Резюме
    
 
-
    Эта статья показала, что веб-фреймворки могут упростить разработку и поддержку кода на стороне сервера. Она также предоставила общий обзор нескольких популярных платформ и обсудила критерии выбора платформы веб-приложений. Теперь у вас должно быть хотя бы представление о том, как выбрать веб-фреймворк для собственной разработки на стороне сервера. Если нет, то не беспокойтесь — позже в курсе мы дадим вам подробные учебники по Django и Express, чтобы дать вам некоторый опыт работы с веб-фреймворком. 
    
+
    Эта статья показала, что веб-фреймворки могут упростить разработку и поддержку кода на стороне сервера. Она также предоставила общий обзор нескольких популярных платформ и обсудила критерии выбора платформы веб-приложений. Теперь у вас должно быть хотя бы представление о том, как выбрать веб-фреймворк для собственной разработки на стороне сервера. Если нет, то не беспокойтесь — позже в курсе мы дадим вам подробные учебники по Django и Express, чтобы дать вам некоторый опыт работы с веб-фреймворком. 
    
 
 
    Для следующей статьи в этом модуле мы немного изменим направление и рассмотрим веб-безопасность.
    
 
@@ -302,19 +301,3 @@ 
    В этом модуле
    
  
  • Server-side web frameworks
    • 
  
  • Website security
    • 
 
-
-
    
-
-
    
-
    
-
    
-
    
-
-
    
-
-
    
-
    
-
-
    
-
    
-
    
diff --git a/files/ru/learn/server-side/first_steps/website_security/index.html b/files/ru/learn/server-side/first_steps/website_security/index.html
index bc9992d0dcf3cb..66c3046c59fd5b 100644
--- a/files/ru/learn/server-side/first_steps/website_security/index.html
+++ b/files/ru/learn/server-side/first_steps/website_security/index.html
@@ -54,38 +54,35 @@ 
    Межсайтовый с
 
      
  
    • Отражённая XSS-уязвимость возникает, когда пользовательский контент, который передаётся на сервер, немедленно и без изменений возвращается для отображения в браузере. Любой скрипт в исходном пользовательском контенте запустится при загрузке новой страницы. Например, рассмотрим строку поиска по сайту, в которой поисковые слова закодированы как параметры URL, и эти слова отображаются вместе с результатами. Злоумышленник может создать поисковую ссылку, которая будет содержать вредоносный скрипт в качестве параметра (например: http://mysite.com?q=beer<script%20src="http://evilsite.com/tricky.js"></script>) и переслать его другому пользователю по электронной почте. Если целевой пользователь кликнет по этой «интересной ссылке», то скрипт выполнится при отображении результатов поиска. Как мы уже говорили, злоумышленник  таким образом получает всю информацию, необходимую ему для входа на сайт в качестве целевого пользователя, потенциального совершения покупок от имени пользователя или получения его контактной информации.
      • 
  
    • 
-  
      Постоянная уязвимость XSS возникает, когда вредоносный скрипт хранится на веб-сайте, а затем снова отображается без изменений, чтобы другие пользователи могли выполнять его невольно.
      
-   Например, доска обсуждений, которая принимает комментарии, содержащие неизмененный HTML, может хранить вредоносный скрипт от злоумышленника. Когда комментарии отображаются, скрипт выполняется и может отправить злоумышленнику информацию, необходимую для доступа к учётной записи пользователя. Атака такого рода чрезвычайно популярна и мощна, потому что злоумышленник может даже не иметь прямого отношения к жертвам.
      
-   
      
-   Хотя данные из запросов POST или GET являются наиболее распространённым источником уязвимостей XSS, любые данные из браузера потенциально уязвимы, такие как данные cookie, отображаемые браузером, или пользовательские файлы, которые загружаются и отображаются.
      
-   
      
-   Наилучшей защитой от уязвимостей XSS является удаление или отключение любой разметки, которая потенциально может содержать инструкции по запуску кода. Для HTML это включает такие элементы, как <script>, <object>, <embed> и <link>.
      
-   
      
-   Процесс изменения пользовательских данных, чтобы их нельзя было использовать для запуска сценариев или иным образом влиять на выполнение серверного кода, называется очисткой ввода. Многие веб-фреймворки автоматически очищают пользовательский ввод от HTML-форм по умолчанию.
      
+  
      Постоянная уязвимость XSS возникает, когда вредоносный скрипт хранится на веб-сайте, а затем снова отображается без изменений, чтобы другие пользователи могли выполнять его невольно.
      
+  
      Например, доска обсуждений, которая принимает комментарии, содержащие неизмененный HTML, может хранить вредоносный скрипт от злоумышленника. Когда комментарии отображаются, скрипт выполняется и может отправить злоумышленнику информацию, необходимую для доступа к учётной записи пользователя. Атака такого рода чрезвычайно популярна и мощна, потому что злоумышленник может даже не иметь прямого отношения к жертвам.
      
+  
      Хотя данные из запросов POST или GET являются наиболее распространённым источником уязвимостей XSS, любые данные из браузера потенциально уязвимы, такие как данные cookie, отображаемые браузером, или пользовательские файлы, которые загружаются и отображаются.
      
+  
      Наилучшей защитой от уязвимостей XSS является удаление или отключение любой разметки, которая потенциально может содержать инструкции по запуску кода. Для HTML это включает такие элементы, как <script>, <object>, <embed> и <link>.
      
+  
      Процесс изменения пользовательских данных, чтобы их нельзя было использовать для запуска сценариев или иным образом влиять на выполнение серверного кода, называется очисткой ввода. Многие веб-фреймворки автоматически очищают пользовательский ввод от HTML-форм по умолчанию.
      
  
      • 
 
    
 
 
    SQL injection
    
 
-
    Уязвимости SQL-инъекций позволяют злоумышленникам выполнять произвольный код SQL в базе данных, позволяя получать, изменять или удалять данные независимо от разрешений пользователя. Успешная инъекционная атака может подделать удостоверения, создать новые удостоверения с правами администратора, получить доступ ко всем данным на сервере или уничтожить / изменить данные, чтобы сделать их непригодными для использования.
    
- 
    
- Типы внедрения SQL включают внедрение SQL на основе ошибок, внедрение SQL на основе логических ошибок и внедрение SQL на основе времени.
    
- 
    
- Эта уязвимость присутствует, если пользовательский ввод, который передаётся в базовый оператор SQL, может изменить смысл оператора. Например, следующий код предназначен для перечисления всех пользователей с определённым именем (userName), которое было предоставлено из формы HTML:
    
+
    Уязвимости SQL-инъекций позволяют злоумышленникам выполнять произвольный код SQL в базе данных, позволяя получать, изменять или удалять данные независимо от разрешений пользователя. Успешная инъекционная атака может подделать удостоверения, создать новые удостоверения с правами администратора, получить доступ ко всем данным на сервере или уничтожить / изменить данные, чтобы сделать их непригодными для использования.
    
+
+
    Типы внедрения SQL включают внедрение SQL на основе ошибок, внедрение SQL на основе логических ошибок и внедрение SQL на основе времени.
    
+
+
    Эта уязвимость присутствует, если пользовательский ввод, который передаётся в базовый оператор SQL, может изменить смысл оператора. Например, следующий код предназначен для перечисления всех пользователей с определённым именем (userName), которое было предоставлено из формы HTML:
    
 
 
    statement = "SELECT * FROM users WHERE name = '" + userName + "';"
    
 
-
    Если пользователь указывает реальное имя, оператор будет работать так, как задумано. Однако злонамеренный пользователь может полностью изменить поведение этого оператора SQL на новый оператор в следующем примере, просто указав текст полужирным шрифтом для userName.
    
+
    Если пользователь указывает реальное имя, оператор будет работать так, как задумано. Однако злонамеренный пользователь может полностью изменить поведение этого оператора SQL на новый оператор в следующем примере, просто указав текст полужирным шрифтом для userName.
    
 
 
    SELECT * FROM users WHERE name = 'a';DROP TABLE users; SELECT * FROM userinfo WHERE 't' = 't';
 
    
 
-
    Модифицированный оператор создаёт действительный оператор SQL, который удаляет таблицу пользователей и выбирает все данные из таблицы userinfo (которая раскрывает информацию о каждом пользователе). Это работает, потому что первая часть введённого текста (a ';) завершает исходное утверждение.
    
- 
    
- Чтобы избежать такого рода атак, вы должны убедиться, что любые пользовательские данные, которые передаются в запрос SQL, не могут изменить природу запроса. Один из способов сделать это - экранировать все символы пользовательского ввода, которые имеют особое значение в SQL.
    
+
    Модифицированный оператор создаёт действительный оператор SQL, который удаляет таблицу пользователей и выбирает все данные из таблицы userinfo (которая раскрывает информацию о каждом пользователе). Это работает, потому что первая часть введённого текста (a ';) завершает исходное утверждение.
    
+
+
    Чтобы избежать такого рода атак, вы должны убедиться, что любые пользовательские данные, которые передаются в запрос SQL, не могут изменить природу запроса. Один из способов сделать это - экранировать все символы пользовательского ввода, которые имеют особое значение в SQL.
    
 
 
    
-
    Примечание. Инструкция SQL обрабатывает символ ' как начало и конец строкового литерала. Поместив обратную косую черту перед этим символом (\ '), мы экранируем символ и говорим SQL вместо этого трактовать его как символ (только часть строки).
    
+
    Примечание. Инструкция SQL обрабатывает символ ' как начало и конец строкового литерала. Поместив обратную косую черту перед этим символом (\ '), мы экранируем символ и говорим SQL вместо этого трактовать его как символ (только часть строки).
    
 
    
 
 
    В следующей инструкции мы экранируем символ '. Теперь SQL будет интерпретировать имя как всю строку, выделенную жирным шрифтом (это действительно очень странное имя, но безопасное).
    
diff --git a/files/ru/learn/tools_and_testing/client-side_javascript_frameworks/index.html b/files/ru/learn/tools_and_testing/client-side_javascript_frameworks/index.html
index 00f25e4daa9401..ab3b66c1145289 100644
--- a/files/ru/learn/tools_and_testing/client-side_javascript_frameworks/index.html
+++ b/files/ru/learn/tools_and_testing/client-side_javascript_frameworks/index.html
@@ -107,7 +107,7 @@ 
    Vue tutorials
    
  
    2. Creating our first Vue component
    
  
    Now it's time to dive deeper into Vue, and create our own custom component — we'll start by creating a component to represent each item in the todo list. Along the way, we'll learn about a few important concepts such as calling components inside other components, passing data to them via props, and saving data state.
    
  
    3. Rendering a list of Vue components
    
- 
    At this point we've got a fully working component; we're now ready to add multiple ToDoItem components to our App. In this artcle we'll look at adding a set of todo item data to our App.vue component, which we'll then loop through and display inside ToDoItem components using the v-for directive. 
    
+ 
    At this point we've got a fully working component; we're now ready to add multiple ToDoItem components to our App. In this artcle we'll look at adding a set of todo item data to our App.vue component, which we'll then loop through and display inside ToDoItem components using the v-for directive.
    
  
    4. Adding a new todo form: Vue events, methods, and models
    
  
    We now have sample data in place, and a loop that takes each bit of data and renders it inside a ToDoItem in our app. What we really need next is the ability to allow our users to enter their own todo items into the app, and for that we'll need a text <input>, an event to fire when the data is submitted, a method to fire upon submission to add the data and rerender the list, and a model to control the data. This is what we'll cover in this article.
    
  
    5. Styling Vue components with CSS
    
diff --git a/files/ru/learn/tools_and_testing/cross_browser_testing/feature_detection/index.html b/files/ru/learn/tools_and_testing/cross_browser_testing/feature_detection/index.html
index 029511be021e48..0fc29afbcdc05c 100644
--- a/files/ru/learn/tools_and_testing/cross_browser_testing/feature_detection/index.html
+++ b/files/ru/learn/tools_and_testing/cross_browser_testing/feature_detection/index.html
@@ -28,13 +28,13 @@ 
    Концеп
 
 
    Давайте подведём итоги и посмотрим на пример, который мы затронули в нашем документе Решение самых распространённых проблем JavaScript— Использование геолокации (который предоставляет доступные данные о местоположении для устройства, на котором работает веб-браузер) есть основная точка входа для его использования, свойство geolocation,  доступное на глобальном объекте Navigator. Следовательно, вы можете определить, поддерживает ли браузер геолокацию или нет, используя что-то вроде следующего:
    
 
-
    if ("geolocation" in navigator) {
-  navigator.geolocation.getCurrentPosition(function(position) {
+
    if ("geolocation" in navigator) {
+  navigator.geolocation.getCurrentPosition(function(position) {
     // show the location on a map, perhaps using the Google Maps API
-  });
-} else {
+  });
+} else {
   // Give the user a choice of static maps instead perhaps
-}
    
+}
    
 
 
    Однако, вероятно, лучше использовать установленную библиотеку обнаружения объектов, а не писать свою собственную все время. Modernizr - это отраслевой стандарт для тестирования функций, и мы рассмотрим это позже.
    
 
@@ -177,7 +177,7 @@ 
    matchMedia
    
 
 
    В качестве примера, наша демо версия Snapshot использует её для выборочного применения библиотеки Brick JavaScript и её использования для обработки макета пользовательского интерфейса, но только для небольшого экрана (шириной 480 пикселей или меньше). Сначала мы используем атрибут media,чтобы применить CSS-код Brick к странице, только если ширина страницы составляет 480px или меньше:
    
 
-
    <link href="dist/brick.css" type="text/css" rel="stylesheet" media="all and (max-width: 480px)">
    
+
    <link href="dist/brick.css" type="text/css" rel="stylesheet" media="all and (max-width: 480px)">
    
 
 
    Затем мы используем matchMedia() в JavaScript несколько раз, чтобы запускать функции навигации Brick только в том случае, если мы на маленьком экране (в более широких экранах все можно увидеть сразу, поэтому нам не нужно переходить между различными изображениями).
    
 
diff --git a/files/ru/learn/tools_and_testing/cross_browser_testing/html_and_css/index.html b/files/ru/learn/tools_and_testing/cross_browser_testing/html_and_css/index.html
index c6083b0b791ccd..6f639b97a7a55b 100644
--- a/files/ru/learn/tools_and_testing/cross_browser_testing/html_and_css/index.html
+++ b/files/ru/learn/tools_and_testing/cross_browser_testing/html_and_css/index.html
@@ -115,21 +115,21 @@ 
    HTML fallback behaviour
    
 
 
    For example:
    
 
-
    <video id="video" controls preload="metadata" poster="img/poster.jpg">
-  <source src="video/tears-of-steel-battle-clip-medium.mp4" type="video/mp4">
-  <source src="video/tears-of-steel-battle-clip-medium.webm" type="video/webm">
-  <source src="video/tears-of-steel-battle-clip-medium.ogg" type="video/ogg">
-  <!-- Flash fallback -->
-  <object type="application/x-shockwave-flash" data="flash-player.swf?videoUrl=video/tears-of-steel-battle-clip-medium.mp4" width="1024" height="576">
-     <param name="movie" value="flash-player.swf?videoUrl=video/tears-of-steel-battle-clip-medium.mp4" />
-     <param name="allowfullscreen" value="true" />
-     <param name="wmode" value="transparent" />
-     <param name="flashvars" value="controlbar=over&amp;image=img/poster.jpg&amp;file=flash-player.swf?videoUrl=video/tears-of-steel-battle-clip-medium.mp4" />
-      <img alt="Tears of Steel poster image" src="img/poster.jpg" width="1024" height="428" title="No video playback possible, please download the video from the link below" />
-  </object>
-  <!-- Offer download -->
-  <a href="video/tears-of-steel-battle-clip-medium.mp4">Download MP4</a>
-</video>
    
+
    <video id="video" controls preload="metadata" poster="img/poster.jpg">
+  <source src="video/tears-of-steel-battle-clip-medium.mp4" type="video/mp4">
+  <source src="video/tears-of-steel-battle-clip-medium.webm" type="video/webm">
+  <source src="video/tears-of-steel-battle-clip-medium.ogg" type="video/ogg">
+  <!-- Flash fallback -->
+  <object type="application/x-shockwave-flash" data="flash-player.swf?videoUrl=video/tears-of-steel-battle-clip-medium.mp4" width="1024" height="576">
+     <param name="movie" value="flash-player.swf?videoUrl=video/tears-of-steel-battle-clip-medium.mp4" />
+     <param name="allowfullscreen" value="true" />
+     <param name="wmode" value="transparent" />
+     <param name="flashvars" value="controlbar=over&amp;image=img/poster.jpg&amp;file=flash-player.swf?videoUrl=video/tears-of-steel-battle-clip-medium.mp4" />
+      <img alt="Tears of Steel poster image" src="img/poster.jpg" width="1024" height="428" title="No video playback possible, please download the video from the link below" />
+  </object>
+  <!-- Offer download -->
+  <a href="video/tears-of-steel-battle-clip-medium.mp4">Download MP4</a>
+</video>
    
 
 
    This example (taken from Creating a cross-browser video player) includes not only a Flash video fallback for older IE versions, but also a simple link allowing you to download the video if even the Flash player doesn't work, so at least the user can still access the video.
    
 
@@ -252,15 +252,15 @@ 
    IE conditional comments
    
 
 
    IE conditional comments are a modified proprietary HTML comment syntax, which can be used to selectively apply HTML code to different versions of IE. This has proven to be a very effective mechanism for fixing cross browser bugs. The syntax looks like this:
    
 
-
    <!--[if lte IE 8]>
-  <script src="ie-fix.js"></script>
+
    <!--[if lte IE 8]>
+  <script src="ie-fix.js"></script>
   <link href="ie-fix.css" rel="stylesheet" type="text/css">
-<![endif]-->
    
+<![endif]-->
    
 
 
    This block will apply the IE-specific CSS and JavaScript only if the browser viewing the page is IE 8 or older. lte means "less than or equal to", but you can also use lt, gt, gte, ! for NOT, and other logical syntax.
    
 
 
    
-
    Note: Sitepoint's Internet Explorer Conditional Comments provides a useful beginner's tutorial/reference that explains the conditional comment syntax in detail.
    
+
    Note: Sitepoint's Internet Explorer Conditional Comments provides a useful beginner's tutorial/reference that explains the conditional comment syntax in detail.
    
 
    
 
 
    As you can see, this is especially useful for applying code fixes to old versions of IE. The use case we mentioned earlier (making modern semantic elements styleable in old versions of IE) can be achieved easily using conditional comments, for example you could put something like this in your IE stylesheet:
    

From 39b783cdb4ce7d108f94f87b790efbb230f08ae2 Mon Sep 17 00:00:00 2001
From: julieng 
Date: Thu, 15 Sep 2022 17:35:56 +0200
Subject: [PATCH 2/6] Fix everything except dls

---
 .../accessibility_troubleshooting/index.html  |   2 +-
 .../css_and_javascript/index.html             |   2 +-
 files/ru/learn/accessibility/html/index.html  |   2 +-
 .../ru/learn/accessibility/mobile/index.html  |   2 +-
 .../learn/accessibility/multimedia/index.html |   2 +-
 .../accessibility/wai-aria_basics/index.html  |   2 +-
 .../what_is_accessibility/index.html          |   2 +-
 .../available_text_editors/index.html         |   2 +-
 .../design_for_all_types_of_users/index.html  |   2 +-
 .../how_does_the_internet_work/index.html     |   2 +-
 .../how_much_does_it_cost/index.html          |   2 +-
 .../index.html                                |   2 +-
 .../set_up_a_local_testing_server/index.html  |   2 +-
 .../thinking_before_coding/index.html         |   2 +-
 .../upload_files_to_a_web_server/index.html   |   2 +-
 .../using_github_pages/index.html             |   2 +-
 .../what_are_hyperlinks/index.html            |   2 +-
 .../what_is_a_domain_name/index.html          |   2 +-
 .../common_questions/what_is_a_url/index.html |   2 +-
 .../what_is_a_web_server/index.html           |   2 +-
 .../what_software_do_i_need/index.html        |   2 +-
 .../advanced_styling_effects/index.html       |   2 +-
 .../backgrounds_and_borders/index.html        |   2 +-
 .../cascade_and_inheritance/index.html        |   6 +-
 .../building_blocks/debugging_css/index.html  |   2 +-
 .../fundamental_css_comprehension/index.html  |   2 +-
 .../index.html                                |   2 +-
 .../images_media_form_elements/index.html     |   2 +-
 .../css/building_blocks/organizing/index.html |   2 +-
 .../overflowing_content/index.html            |   2 +-
 .../selectors/attribute_selectors/index.html  |   2 +-
 .../selectors/combinators/index.html          |   2 +-
 .../css/building_blocks/selectors/index.html  |   2 +-
 .../index.html                                |   2 +-
 .../type_class_and_id_selectors/index.html    |   2 +-
 .../sizing_items_in_css/index.html            |   2 +-
 .../building_blocks/styling_tables/index.html |   2 +-
 .../building_blocks/the_box_model/index.html  |   2 +-
 .../values_and_units/index.html               |   2 +-
 .../learn/css/css_layout/flexbox/index.html   |   2 +-
 .../ru/learn/css/css_layout/floats/index.html |   2 +-
 .../index.html                                |   2 +-
 .../ru/learn/css/css_layout/grids/index.html  |   2 +-
 .../css/css_layout/introduction/index.html    |   2 +-
 .../multiple-column_layout/index.html         |   2 +-
 .../css/css_layout/normal_flow/index.html     |   2 +-
 .../css/css_layout/positioning/index.html     |   2 +-
 .../practical_positioning_examples/index.html |   2 +-
 .../css_layout/responsive_design/index.html   |  26 ++---
 .../first_steps/getting_started/index.html    |   2 +-
 .../how_css_is_structured/index.html          |   2 +-
 .../css/first_steps/how_css_works/index.html  |   2 +-
 .../styling_a_biography_page/index.html       |   2 +-
 .../css/first_steps/what_is_css/index.html    |   2 +-
 .../css/styling_text/fundamentals/index.html  |   2 +-
 .../css/styling_text/styling_links/index.html |   2 +-
 .../css/styling_text/styling_lists/index.html |   2 +-
 .../typesetting_a_homepage/index.html         |   2 +-
 .../css/styling_text/web_fonts/index.html     |   2 +-
 .../basic_native_form_controls/index.html     |   2 +-
 .../ru/learn/forms/form_validation/index.html |   2 +-
 .../how_to_structure_a_web_form/index.html    |   2 +-
 .../index.html                                |   2 +-
 files/ru/learn/html/index.html                |   2 -
 .../advanced_text_formatting/index.html       |   4 +-
 .../creating_hyperlinks/index.html            | 107 ++----------------
 .../debugging_html/index.html                 |   2 +-
 .../document_and_website_structure/index.html |   2 +-
 .../getting_started/index.html                |   2 +-
 .../html_text_fundamentals/index.html         |   2 +-
 .../marking_up_a_letter/index.html            |   2 +-
 .../structuring_a_page_of_content/index.html  |   2 +-
 .../the_head_metadata_in_html/index.html      |   2 +-
 .../index.html                                |   2 +-
 .../images_in_html/index.html                 |   2 +-
 .../mozilla_splash_page/index.html            |   2 +-
 .../other_embedding_technologies/index.html   |   2 +-
 .../responsive_images/index.html              |   2 +-
 .../video_and_audio_content/index.html        |  10 +-
 .../ru/learn/html/tables/advanced/index.html  |  34 +-----
 files/ru/learn/html/tables/basics/index.html  |   8 +-
 .../tables/structuring_planet_data/index.html |   2 +-
 files/ru/learn/index.html                     |   2 +-
 .../asynchronous/introducing/index.html       |   2 +-
 .../asynchronous/promises/index.html          |   2 +-
 .../build_your_own_function/index.html        |   2 +-
 .../building_blocks/conditionals/index.html   |   2 +-
 .../building_blocks/events/index.html         |   4 +-
 .../building_blocks/functions/index.html      |   2 +-
 .../building_blocks/image_gallery/index.html  |   2 +-
 .../building_blocks/looping_code/index.html   |  21 +---
 .../building_blocks/return_values/index.html  |   2 +-
 .../client-side_storage/index.html            |   2 +-
 .../fetching_data/index.html                  |   2 +-
 .../introduction/index.html                   |   2 +-
 .../manipulating_documents/index.html         |   2 +-
 .../third_party_apis/index.html               |   2 +-
 .../first_steps/a_first_splash/index.html     |  10 +-
 .../javascript/first_steps/arrays/index.html  |   2 +-
 .../javascript/first_steps/math/index.html    |   4 +-
 .../silly_story_generator/index.html          |   2 +-
 .../javascript/first_steps/strings/index.html |   2 +-
 .../useful_string_methods/index.html          |   5 +-
 .../first_steps/variables/index.html          |   4 +-
 .../first_steps/what_is_javascript/index.html |   2 +-
 .../first_steps/what_went_wrong/index.html    |   2 +-
 .../adding_bouncing_balls_features/index.html |   2 +-
 .../javascript/objects/basics/index.html      |   2 +-
 .../objects/classes_in_javascript/index.html  |  19 +---
 .../learn/javascript/objects/json/index.html  |   2 +-
 .../object_building_practice/index.html       |   2 +-
 .../objects/object_prototypes/index.html      |   2 +-
 .../business_case_for_performance/index.html  |  10 +-
 .../server-side/django/admin_site/index.html  |   2 +-
 .../django/authentication/index.html          |   2 +-
 .../server-side/django/deployment/index.html  |   2 +-
 .../django/development_environment/index.html |   2 +-
 .../django/django_assessment_blog/index.html  |   2 +-
 .../learn/server-side/django/forms/index.html |   2 +-
 .../django/generic_views/index.html           |   2 +-
 .../server-side/django/home_page/index.html   |   2 +-
 .../django/introduction/index.html            |   2 +-
 .../server-side/django/models/index.html      |   2 +-
 .../server-side/django/sessions/index.html    |   2 +-
 .../django/skeleton_website/index.html        |   2 +-
 .../server-side/django/testing/index.html     |   2 +-
 .../tutorial_local_library_website/index.html |   2 +-
 .../web_application_security/index.html       |   2 +-
 .../development_environment/index.html        |   2 +-
 .../author_list_page/index.html               |   2 +-
 .../express_nodejs/displaying_data/index.html |   2 +-
 .../forms/create_bookinstance_form/index.html |   2 +-
 .../express_nodejs/forms/index.html           |   2 +-
 .../forms/update_book_form/index.html         |   2 +-
 .../express_nodejs/introduction/index.html    |  59 +++++-----
 .../express_nodejs/mongoose/index.html        |   2 +-
 .../express_nodejs/routes/index.html          |   2 +-
 .../skeleton_website/index.html               |   2 +-
 .../tutorial_local_library_website/index.html |   2 +-
 .../client-server_overview/index.html         |   2 +-
 .../first_steps/introduction/index.html       |   2 +-
 .../first_steps/web_frameworks/index.html     |   2 +-
 .../first_steps/website_security/index.html   |   2 +-
 .../angular_getting_started/index.html        |   2 +-
 .../react_getting_started/index.html          |   2 +-
 .../feature_detection/index.html              |   2 +-
 .../html_and_css/index.html                   |   4 +-
 .../introduction/index.html                   |   2 +-
 148 files changed, 204 insertions(+), 393 deletions(-)

diff --git a/files/ru/learn/accessibility/accessibility_troubleshooting/index.html b/files/ru/learn/accessibility/accessibility_troubleshooting/index.html
index 5eb0ae505e197c..53049d677b9af5 100644
--- a/files/ru/learn/accessibility/accessibility_troubleshooting/index.html
+++ b/files/ru/learn/accessibility/accessibility_troubleshooting/index.html
@@ -10,7 +10,7 @@
 
 
    In the assessment for this module, we present to you a simple site with a number of accessibility issues that you need to diagnose and fix.
    
 
-
    +
    diff --git a/files/ru/learn/accessibility/css_and_javascript/index.html b/files/ru/learn/accessibility/css_and_javascript/index.html index 570af0e8a1ad39..22e315bfd962ed 100644 --- a/files/ru/learn/accessibility/css_and_javascript/index.html +++ b/files/ru/learn/accessibility/css_and_javascript/index.html @@ -22,7 +22,7 @@

    В CSS и JavaScript есть множество возможностей для создания доступных интерфейсов. Но это обоюдоострый клинок — при неосторожном обращении они могут доступности и значительно навредить. В этой статье мы рассмотрим лучшие практики в CSS и JavaScript, которые позволят даже сложному контенту оставаться доступным настолько, насколько это возможно.

    -
    Prerequisites:
    +
    diff --git a/files/ru/learn/accessibility/html/index.html b/files/ru/learn/accessibility/html/index.html index 7e1a7398882abf..e2ee0ba1c85d84 100644 --- a/files/ru/learn/accessibility/html/index.html +++ b/files/ru/learn/accessibility/html/index.html @@ -21,7 +21,7 @@

    Большая часть содержимого интернета может быть сделана доступной просто благодаря использованию правильных HTML-элементов по назначению. В этой статье подробно рассмотрено как HTML может быть использован для обеспечения максимальной доступности.

    -
    Необходимые знания:
    +
    diff --git a/files/ru/learn/accessibility/mobile/index.html b/files/ru/learn/accessibility/mobile/index.html index 4ea9bddee8f384..856f00d85bc75d 100644 --- a/files/ru/learn/accessibility/mobile/index.html +++ b/files/ru/learn/accessibility/mobile/index.html @@ -13,7 +13,7 @@

    With web access on mobile devices being so popular, and popular platforms such as iOS and Android having fully fledged accessibility tools, it is important to consider the accessibility of your web content on these platforms. This article looks at mobile-specific accessibility considerations.

    -
    Необходимые знания:
    +
    diff --git a/files/ru/learn/accessibility/multimedia/index.html b/files/ru/learn/accessibility/multimedia/index.html index 4fb2e0644be1e9..b996f2e5ef1cde 100644 --- a/files/ru/learn/accessibility/multimedia/index.html +++ b/files/ru/learn/accessibility/multimedia/index.html @@ -12,7 +12,7 @@

    Another category of content that can create accessibility problems is multimedia — video, audio, and image content need to be given proper textual alternatives so they can be understood by assistive technologies and their users. This article shows how.

    -
    Prerequisites:
    +
    diff --git a/files/ru/learn/accessibility/wai-aria_basics/index.html b/files/ru/learn/accessibility/wai-aria_basics/index.html index f4d2a573d5f1c8..9483d7223b6f5e 100644 --- a/files/ru/learn/accessibility/wai-aria_basics/index.html +++ b/files/ru/learn/accessibility/wai-aria_basics/index.html @@ -12,7 +12,7 @@

    Исходя из предыдущей статьи, иногда создание сложных элементов UI, которые включают в себя несемантичный HTML и динамически обновляемый с помощью JavaScript контент, может быть затруднено. WAI-ARIA - это технология, которая может помочь в решении таких проблем, добавляя дополнительную разметку, которую браузеры и вспомогательные технологии могут распознавать и использовать, чтобы пользователи знали, что происходит. В этой статье мы покажем, как использовать эту технологию на базовом уровне для улучшения доступности.

    -
    Prerequisites:
    +
    diff --git a/files/ru/learn/accessibility/what_is_accessibility/index.html b/files/ru/learn/accessibility/what_is_accessibility/index.html index 2e3eb71b84fda5..bae890df79cbc6 100644 --- a/files/ru/learn/accessibility/what_is_accessibility/index.html +++ b/files/ru/learn/accessibility/what_is_accessibility/index.html @@ -23,7 +23,7 @@

    Данная статья открывает модуль, в котором рассматривается, что такое доступность на самом деле — она включает в себя группы людей, которые нам нужно учитывать и почему, какие инструменты используют разные пользователи для взаимодействия с вебом, и как мы можем сделать доступность частью нашего рабочего процесса веб-разработки.

    -
    Необходимые знания:
    +
    diff --git a/files/ru/learn/common_questions/available_text_editors/index.html b/files/ru/learn/common_questions/available_text_editors/index.html index 7eaed54046c04c..e4b83d9915d8c1 100644 --- a/files/ru/learn/common_questions/available_text_editors/index.html +++ b/files/ru/learn/common_questions/available_text_editors/index.html @@ -9,7 +9,7 @@

    In this article we highlight some things to think about when installing a text editor for web development.

    -
    Необходимые знания:
    +
    diff --git a/files/ru/learn/common_questions/design_for_all_types_of_users/index.html b/files/ru/learn/common_questions/design_for_all_types_of_users/index.html index dc6853e99b72fc..860271cf1041ec 100644 --- a/files/ru/learn/common_questions/design_for_all_types_of_users/index.html +++ b/files/ru/learn/common_questions/design_for_all_types_of_users/index.html @@ -14,7 +14,7 @@

    Эта статья содержит основные советы, которые помогут вам создавать веб-сайты для любого типа пользователей.

    -
    Необходимые знания:
    +
    diff --git a/files/ru/learn/common_questions/how_does_the_internet_work/index.html b/files/ru/learn/common_questions/how_does_the_internet_work/index.html index 0992c6602158b3..27267bd79ca97d 100644 --- a/files/ru/learn/common_questions/how_does_the_internet_work/index.html +++ b/files/ru/learn/common_questions/how_does_the_internet_work/index.html @@ -15,7 +15,7 @@

    Эта статья о том, что такое Интернет, и как он работает.

    -
    Перед началом:
    +
    diff --git a/files/ru/learn/common_questions/how_much_does_it_cost/index.html b/files/ru/learn/common_questions/how_much_does_it_cost/index.html index 5e9e49bf34d36c..38db795a52dba8 100644 --- a/files/ru/learn/common_questions/how_much_does_it_cost/index.html +++ b/files/ru/learn/common_questions/how_much_does_it_cost/index.html @@ -11,7 +11,7 @@

    Веб-разработка обходится не так дёшево, как вам может показаться. В этой статье мы обсудим, как много вам потребуется потратить и почему.

    -
    Необходимые знания:
    +
    diff --git a/files/ru/learn/common_questions/pages_sites_servers_and_search_engines/index.html b/files/ru/learn/common_questions/pages_sites_servers_and_search_engines/index.html index 6ebbbcc05ecb95..9509c3ab080818 100644 --- a/files/ru/learn/common_questions/pages_sites_servers_and_search_engines/index.html +++ b/files/ru/learn/common_questions/pages_sites_servers_and_search_engines/index.html @@ -15,7 +15,7 @@

    В этой статье мы расскажем о различных понятиях связанных с Веб: о веб-страницах, веб-сайтах, веб-серверах и о поисковых системах. Эти термины часто ставят в тупик как начинающих работу с Веб, так и людей, редко пользующихся сетью. Давайте же разберёмся, что именно эти понятия означают!

    -
    Прежде чем приступить:
    +
    diff --git a/files/ru/learn/common_questions/set_up_a_local_testing_server/index.html b/files/ru/learn/common_questions/set_up_a_local_testing_server/index.html index 9701eb79cee48c..c8cecd1699255c 100644 --- a/files/ru/learn/common_questions/set_up_a_local_testing_server/index.html +++ b/files/ru/learn/common_questions/set_up_a_local_testing_server/index.html @@ -7,7 +7,7 @@

    Эта статья объясняет как установить простой локальный тестовый сервер на вашем компьютере, а так же основы его использования.

    -
    Необходимые знания:
    +
    diff --git a/files/ru/learn/common_questions/thinking_before_coding/index.html b/files/ru/learn/common_questions/thinking_before_coding/index.html index 8f2ebd646bbae3..a2d641dcef0f56 100644 --- a/files/ru/learn/common_questions/thinking_before_coding/index.html +++ b/files/ru/learn/common_questions/thinking_before_coding/index.html @@ -10,7 +10,7 @@ ---

    Эта статья покрывает первый и крайне важный шаг в создании любого проекта: определить, что вы хотите получить.

    -
    Требования:
    +
    diff --git a/files/ru/learn/common_questions/upload_files_to_a_web_server/index.html b/files/ru/learn/common_questions/upload_files_to_a_web_server/index.html index 01a2c375c08232..27330d3ffa10d9 100644 --- a/files/ru/learn/common_questions/upload_files_to_a_web_server/index.html +++ b/files/ru/learn/common_questions/upload_files_to_a_web_server/index.html @@ -7,7 +7,7 @@

    Данная статья покажет, как можно опубликовать сайт в Интернет с помощью инструментов передачи файлов(file transfer tools).

    -
    Необходимые знания:
    +
    diff --git a/files/ru/learn/common_questions/using_github_pages/index.html b/files/ru/learn/common_questions/using_github_pages/index.html index 49a7c2348b836f..24dc63e9a46502 100644 --- a/files/ru/learn/common_questions/using_github_pages/index.html +++ b/files/ru/learn/common_questions/using_github_pages/index.html @@ -77,7 +77,7 @@

    Загрузка файлов
    1. На текущей странице вас интересует раздел …or push an existing repository from the command line («...или загрузите существующий репозиторий с помощью командной строки»). В этом разделе вы должны увидеть две строки кода. Скопируйте всю первую строку, вставьте её в командную строку и нажмите Enter. Команда должна выглядеть примерно так: - 
      git remote add origin https://github.com/chrisdavidmills/my-repository.git
      + 
      git remote add origin https://github.com/chrisdavidmills/my-repository.git
    2. Затем введите следующие две команды, нажимая Enter после каждой из них. Они готовят код для загрузки в GitHub и просят Git управлять этими файлами. 
      git add --all
diff --git a/files/ru/learn/common_questions/what_are_hyperlinks/index.html b/files/ru/learn/common_questions/what_are_hyperlinks/index.html
index 5ad6e9c6a6cd2e..b76d7cf21d5acd 100644
--- a/files/ru/learn/common_questions/what_are_hyperlinks/index.html
+++ b/files/ru/learn/common_questions/what_are_hyperlinks/index.html
@@ -12,7 +12,7 @@
 
      В данной статье мы узнаем, что такое ссылки и почему они важны.
      
 
 
-

    Необходимые знания:
    +
    diff --git a/files/ru/learn/common_questions/what_is_a_domain_name/index.html b/files/ru/learn/common_questions/what_is_a_domain_name/index.html index 84b26c4c07458e..76435372de90a1 100644 --- a/files/ru/learn/common_questions/what_is_a_domain_name/index.html +++ b/files/ru/learn/common_questions/what_is_a_domain_name/index.html @@ -14,7 +14,7 @@

    В этом материале мы обсудим доменные имена: что это такое, как они формируются и как зарегистрировать домен для себя.

    -
    Предварительно:
    +
    diff --git a/files/ru/learn/common_questions/what_is_a_url/index.html b/files/ru/learn/common_questions/what_is_a_url/index.html index 759f1cb908f2a6..7fef62f150108b 100644 --- a/files/ru/learn/common_questions/what_is_a_url/index.html +++ b/files/ru/learn/common_questions/what_is_a_url/index.html @@ -16,7 +16,7 @@

    Данная статья описывает Единый локатор ресурсов или Uniform Resource Locators (URLs), объясняет, что это такое, и описывает его структуру.

    -
    Необходимые знания:
    +
    diff --git a/files/ru/learn/common_questions/what_is_a_web_server/index.html b/files/ru/learn/common_questions/what_is_a_web_server/index.html index 67804f204f3edc..572aa6414f3b2c 100644 --- a/files/ru/learn/common_questions/what_is_a_web_server/index.html +++ b/files/ru/learn/common_questions/what_is_a_web_server/index.html @@ -13,7 +13,7 @@

    В этой статье мы узнаем, что из себя представляют веб-серверы, как они работают, и почему они так важны.

    -
    Предварительно:
    +
    Необходимые
    diff --git a/files/ru/learn/common_questions/what_software_do_i_need/index.html b/files/ru/learn/common_questions/what_software_do_i_need/index.html index fe2f34fa80eda5..6cab33c577ad5c 100644 --- a/files/ru/learn/common_questions/what_software_do_i_need/index.html +++ b/files/ru/learn/common_questions/what_software_do_i_need/index.html @@ -7,7 +7,7 @@

    В этой статье мы изложим какие программные компоненты вам понадобятся при редактировании, загрузке или просмотре веб-сайта.

    - +
    diff --git a/files/ru/learn/css/building_blocks/advanced_styling_effects/index.html b/files/ru/learn/css/building_blocks/advanced_styling_effects/index.html index d4a1648743b2be..cf9904885a95aa 100644 --- a/files/ru/learn/css/building_blocks/advanced_styling_effects/index.html +++ b/files/ru/learn/css/building_blocks/advanced_styling_effects/index.html @@ -21,7 +21,7 @@

    В этой статье описаны некоторые хитрости, которые познакомят вас с такими узкоспециализированными свойствами, как box-shadow, режимы смешивания и фильтры.

    -
    Необходимые знания:
    +
    diff --git a/files/ru/learn/css/building_blocks/backgrounds_and_borders/index.html b/files/ru/learn/css/building_blocks/backgrounds_and_borders/index.html index da21d605703bc8..c3de39ef25fd5f 100644 --- a/files/ru/learn/css/building_blocks/backgrounds_and_borders/index.html +++ b/files/ru/learn/css/building_blocks/backgrounds_and_borders/index.html @@ -17,7 +17,7 @@

    В этом уроке мы рассмотрим некоторые интересные возможности, которые вы можете сделать с помощью CSS-свойств фона и границ . Благодаря добавлению градиентов, фоновых изображений и закруглённых углов свойства фона и границ ответят на многие вопросы стилизации в CSS.

    -
    Необходимые знания:
    +
    diff --git a/files/ru/learn/css/building_blocks/cascade_and_inheritance/index.html b/files/ru/learn/css/building_blocks/cascade_and_inheritance/index.html index da4ed6a56ff7cb..7172bd0f22c84b 100644 --- a/files/ru/learn/css/building_blocks/cascade_and_inheritance/index.html +++ b/files/ru/learn/css/building_blocks/cascade_and_inheritance/index.html @@ -18,7 +18,7 @@

    Хотя изучение этого урока может показаться менее актуальным и немного более академичным, чем некоторые другие части курса, понимание этих вещей спасёт вас от головной боли в дальнейшем! Мы рекомендуем вам внимательно изучить этот раздел и убедиться, что вы понимаете концепции, перед тем, как двигаться дальше.

    -
    Необходимые умения:
    +
    @@ -55,9 +55,7 @@

    Специфичность

    • Селектор элементов ( например h1 ) менее специфичен — он выберет все элементы этого типа на странице — поэтому получит меньше баллов.
      • -
    • -

      Селектор класса более специфичен — он выберет только те элементы на странице, которые имеют конкретное значение атрибута class — поэтому получит больше баллов, селектор класса применится после селектора элемента и поэтому перекроет его стили.

      -
      • +
    • Селектор класса более специфичен — он выберет только те элементы на странице, которые имеют конкретное значение атрибута class — поэтому получит больше баллов, селектор класса применится после селектора элемента и поэтому перекроет его стили.

    Например. Как указано ниже, у нас опять есть два правила, которые могут применяться к h1. h1 в результате будет окрашен красным цветом — селектор класса даёт своему правилу более высокую специфичность, поэтому он будет применён, несмотря на то, что правило для селектора элемента расположено ниже в таблице стилей.

    diff --git a/files/ru/learn/css/building_blocks/debugging_css/index.html b/files/ru/learn/css/building_blocks/debugging_css/index.html index 75889d703d19ec..078ed1281399be 100644 --- a/files/ru/learn/css/building_blocks/debugging_css/index.html +++ b/files/ru/learn/css/building_blocks/debugging_css/index.html @@ -7,7 +7,7 @@

    Порой, при написании CSS, вы будете сталкиваться с проблемой, при которой будет казаться, что CSS не делает того, чего вы ожидаете от него. Возможно, вы считаете, что определённый селектор должен соответствовать элементу, но ничего не происходит, или поле имеет размер, отличный от ожидаемого. Эта статья поможет вам с тем, как отладить CSS проблемы и покажет вам как DevTools (инструменты разработчика), включённые во все современные браузеры, могут помочь разобраться с тем, что происходит.

    -
    Необходимые условия:
    +
    diff --git a/files/ru/learn/css/building_blocks/fundamental_css_comprehension/index.html b/files/ru/learn/css/building_blocks/fundamental_css_comprehension/index.html index 5b721ccd3016d8..a54e625db16fc3 100644 --- a/files/ru/learn/css/building_blocks/fundamental_css_comprehension/index.html +++ b/files/ru/learn/css/building_blocks/fundamental_css_comprehension/index.html @@ -10,7 +10,7 @@

    Вы многое прошли в этом модуле, и должно быть вас посетило это прекрасное чувство, что дошли до конца! Последний шаг перед тем, как двигаться дальше, это попытка пройти проверку по материалам модуля — это включает в себя ряд соответствующих упражнений, которые должны быть выполнены для того, чтобы создать заключительный проект — визитка, карточка игрока, профиль в социальной сети.

    -
    Необходимые знания:
    +
    diff --git a/files/ru/learn/css/building_blocks/handling_different_text_directions/index.html b/files/ru/learn/css/building_blocks/handling_different_text_directions/index.html index 5a0f7d4e74e718..179bfbd5e42902 100644 --- a/files/ru/learn/css/building_blocks/handling_different_text_directions/index.html +++ b/files/ru/learn/css/building_blocks/handling_different_text_directions/index.html @@ -9,7 +9,7 @@

    Однако в последние годы CSS развивался чтобы лучше поддерживать разную направленность контента, включая контент с направлением справа налево, а также контент сверху вниз (например, в японском языке) - эти разные направления называются режимами письма. По мере того, как вы продвигаетесь в обучении и начинаете работать с макетом, понимание режимов письма будет вам очень полезно, поэтому мы сейчас и познакомимся с ними.

    -
    Предварительно:
    +
    diff --git a/files/ru/learn/css/building_blocks/images_media_form_elements/index.html b/files/ru/learn/css/building_blocks/images_media_form_elements/index.html index 5d7cb2eaa152a5..7cda4e3bdf936e 100644 --- a/files/ru/learn/css/building_blocks/images_media_form_elements/index.html +++ b/files/ru/learn/css/building_blocks/images_media_form_elements/index.html @@ -7,7 +7,7 @@

    В этом уроке мы рассмотрим, как обрабатываются определённые специальные элементы в CSS. Элементы изображений, других медиа и форм ведут себя иначе при их стилизации в CSS чем обычные блоки. Понимание того, что возможно, а что нет спасут вас от лишних разочарований и этот урок прольёт свет на некоторые из этих основных вещей, которые вам нужно знать.

    -
    Prerequisites:
    +
    diff --git a/files/ru/learn/css/building_blocks/organizing/index.html b/files/ru/learn/css/building_blocks/organizing/index.html index 11d9b75bfb75a6..9160a383f41c09 100644 --- a/files/ru/learn/css/building_blocks/organizing/index.html +++ b/files/ru/learn/css/building_blocks/organizing/index.html @@ -7,7 +7,7 @@

    As you start to work on larger stylesheets and big projects you will discover that maintaining a huge CSS file can be challenging. In this article we will take a brief look at some best practices for writing your CSS to make it easily maintainable, and some of the solutions you will find in use by others to help improve maintainability.

    -
    Prerequisites:
    +
    diff --git a/files/ru/learn/css/building_blocks/overflowing_content/index.html b/files/ru/learn/css/building_blocks/overflowing_content/index.html index 0ab58134e6d7d0..d2ffb9feaee460 100644 --- a/files/ru/learn/css/building_blocks/overflowing_content/index.html +++ b/files/ru/learn/css/building_blocks/overflowing_content/index.html @@ -7,7 +7,7 @@

    В этом уроке мы рассмотрим другую важную концепцию в CSS — переполнение. Переполнение это то, что случается когда слишком много контента содержится внутри блока. В этом гайде вы изучите что это и как этим управлять.

    -
    Prerequisites:
    +
    diff --git a/files/ru/learn/css/building_blocks/selectors/attribute_selectors/index.html b/files/ru/learn/css/building_blocks/selectors/attribute_selectors/index.html index d4ad04dc5db078..c53f17a093bbbb 100644 --- a/files/ru/learn/css/building_blocks/selectors/attribute_selectors/index.html +++ b/files/ru/learn/css/building_blocks/selectors/attribute_selectors/index.html @@ -14,7 +14,7 @@

    Как вы знаете из курса о HTML, элементы могут иметь атрибуты, которые дают дополнительную информацию о размечаемом элементе. В CSS вы можете использовать селекторы атрибута для стилизации элементов с определёнными атрибутами. Этот урок покажет вам, как использовать эти очень полезные селекторы.

    -
    Необходимые условия:
    +
    diff --git a/files/ru/learn/css/building_blocks/selectors/combinators/index.html b/files/ru/learn/css/building_blocks/selectors/combinators/index.html index 86eba522267f14..8f9908d618a89b 100644 --- a/files/ru/learn/css/building_blocks/selectors/combinators/index.html +++ b/files/ru/learn/css/building_blocks/selectors/combinators/index.html @@ -12,7 +12,7 @@

    Наконец мы рассмотрим селекторы, которые называются комбинаторами, поскольку они соединяют другие селекторы, создавая полезную связь селекторов друг с другом и расположением содержимого в документе.

    -
    Необходимые условия:
    +
    diff --git a/files/ru/learn/css/building_blocks/selectors/index.html b/files/ru/learn/css/building_blocks/selectors/index.html index bb66f6f8681cfd..c6a60952c540e7 100644 --- a/files/ru/learn/css/building_blocks/selectors/index.html +++ b/files/ru/learn/css/building_blocks/selectors/index.html @@ -20,7 +20,7 @@

    В {{Glossary("CSS")}}-селекторы используются для стилизации {{glossary("HTML")}} элементов на веб-странице. Существует широкий выбор CSS-селекторов, позволяющий максимально точно отбирать элементы для стилизации. В этой статье и её подстатьях мы в мельчайших подробностях рассмотрим разные их типы и увидим, как они работают.

    -
    Необходимые условия:
    +
    diff --git a/files/ru/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.html b/files/ru/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.html index 68805c472677a5..6d901f554cf25f 100644 --- a/files/ru/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.html +++ b/files/ru/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.html @@ -16,7 +16,7 @@

    Следующий набор селекторов, который мы рассмотрим, относится к псевдоклассам и псевдоэлементам. Их очень много, и они часто служат довольно специфическим целям. После того как вы узнаете порядок их использования, просмотрите список — не найдётся ли в нём что-либо, что поможет решить стоящую перед вами задачу. Кроме того, будет полезным заглянуть на соответствующую каждому селектору страницу MDN, чтобы прояснить, как его обрабатывает браузер.

    -
    Необходимые знания:
    +
    diff --git a/files/ru/learn/css/building_blocks/selectors/type_class_and_id_selectors/index.html b/files/ru/learn/css/building_blocks/selectors/type_class_and_id_selectors/index.html index 4f58fcd078196d..d271c13ee520ee 100644 --- a/files/ru/learn/css/building_blocks/selectors/type_class_and_id_selectors/index.html +++ b/files/ru/learn/css/building_blocks/selectors/type_class_and_id_selectors/index.html @@ -15,7 +15,7 @@

    В этом уроке мы рассмотрим некоторые из базисных селекторов, которые вы, вероятно, будете чаще всего использовать в вашей работе.

    -
    Необходимые условия:
    +
    diff --git a/files/ru/learn/css/building_blocks/sizing_items_in_css/index.html b/files/ru/learn/css/building_blocks/sizing_items_in_css/index.html index 9cf98e7529313d..72913de5e1b1ca 100644 --- a/files/ru/learn/css/building_blocks/sizing_items_in_css/index.html +++ b/files/ru/learn/css/building_blocks/sizing_items_in_css/index.html @@ -7,7 +7,7 @@

    В предыдущих уроках вы познакомились с некоторыми способами изменения размеров элементов на веб-странице с помощью CSS. Понимание того, насколько велики будут различные элементы в вашем дизайне — важно, и в этом уроке мы подведем итог по различным способам задания размеров элементов с помощью CSS и расскажем о некоторых терминах, связанных с размерами, которые помогут вам в будущем.

    -
    Необходимые условия:
    +
    diff --git a/files/ru/learn/css/building_blocks/styling_tables/index.html b/files/ru/learn/css/building_blocks/styling_tables/index.html index c18390ba241e83..48f22a95e3f29b 100644 --- a/files/ru/learn/css/building_blocks/styling_tables/index.html +++ b/files/ru/learn/css/building_blocks/styling_tables/index.html @@ -13,7 +13,7 @@

    Стилизация HTML таблиц это не самая гламурная работа в мире, но иногда нам нужно это делать. Эта статья руководство как сделать, чтобы ваши HTML таблицы выглядели хорошо, с некоторыми свойствами подробно рассмотренными в предыдущих статьях.

    -
    Необходимые условия:
    +
    diff --git a/files/ru/learn/css/building_blocks/the_box_model/index.html b/files/ru/learn/css/building_blocks/the_box_model/index.html index bc9ab325424666..dc07ba0597f69e 100644 --- a/files/ru/learn/css/building_blocks/the_box_model/index.html +++ b/files/ru/learn/css/building_blocks/the_box_model/index.html @@ -18,7 +18,7 @@ -
    Необходимые знания:
    +
    diff --git a/files/ru/learn/css/building_blocks/values_and_units/index.html b/files/ru/learn/css/building_blocks/values_and_units/index.html index 7043accb519d6e..3618f7643e575a 100644 --- a/files/ru/learn/css/building_blocks/values_and_units/index.html +++ b/files/ru/learn/css/building_blocks/values_and_units/index.html @@ -7,7 +7,7 @@

    Каждое свойство используемое в CSS имеет значение или набор значений которые допустимы для этого свойства, и изучение страниц MDN со свойствами поможет вам понять какие значения валидны для того или иного свойства. В этом уроке мы рассмотрим некоторые наиболее общие значения и единицы в использовании.

    -
    Необходимые условия:
    +
    diff --git a/files/ru/learn/css/css_layout/flexbox/index.html b/files/ru/learn/css/css_layout/flexbox/index.html index 5b44c93a4eec7f..b3ef1555373351 100644 --- a/files/ru/learn/css/css_layout/flexbox/index.html +++ b/files/ru/learn/css/css_layout/flexbox/index.html @@ -13,7 +13,7 @@

    Это новая технология, которая уже имеет достаточно широкую поддержку браузеров. Flexbox предоставляет инструменты для быстрого создания сложных, гибких макетов, и функции, которые были сложны в традиционных методах CSS. В этой статье объясняются все основы данной технологии.

    -
    Prerequisites:
    +
    diff --git a/files/ru/learn/css/css_layout/floats/index.html b/files/ru/learn/css/css_layout/floats/index.html index e63bf314e70ddb..0d4dda3be7fc0e 100644 --- a/files/ru/learn/css/css_layout/floats/index.html +++ b/files/ru/learn/css/css_layout/floats/index.html @@ -9,7 +9,7 @@

    Первоначально используемое для "обтекания" картинок текстом, свойство {{cssxref("float")}} стало одним из наиболее часто используемых инструментов для создания макетов из нескольких столбцов на веб-страницах. С появлением flexbox и grid оно снова используется как задумывалось в начале, о чем подробнее в этой статье.

    -
    Необходимые навыки:
    +
    diff --git a/files/ru/learn/css/css_layout/fundamental_layout_comprehension/index.html b/files/ru/learn/css/css_layout/fundamental_layout_comprehension/index.html index 81a050ba947d19..a4a878c77371b5 100644 --- a/files/ru/learn/css/css_layout/fundamental_layout_comprehension/index.html +++ b/files/ru/learn/css/css_layout/fundamental_layout_comprehension/index.html @@ -12,7 +12,7 @@

    Если вы проработали этот модуль, то уже имеете базовое представление о том, что вам нужно знать, чтобы создавать современную CSS раскладку и работать с более старым CSS. Это задание проверит некоторые из ваших знаний путём разработки раскладки для простой веб-страницы, используя различные техники.

    -
    Предварительные требования:
    +
    diff --git a/files/ru/learn/css/css_layout/grids/index.html b/files/ru/learn/css/css_layout/grids/index.html index f02e89dbdc6734..023990a28fec7a 100644 --- a/files/ru/learn/css/css_layout/grids/index.html +++ b/files/ru/learn/css/css_layout/grids/index.html @@ -9,7 +9,7 @@
    {{PreviousMenuNext("Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout/Floats", "Learn/CSS/CSS_layout")}}
    Сетки (grids) являются установленным инструментом проектирования и многие современные макеты веб-сайта основаны на регулярной сетке. В этой статье мы рассмотрим дизайн на основе сетки и увидим как CSS можно использовать для создания сеток — как с помощью современных инструментов, так и с помощью новых технологий, которые только начинают становиться доступными в браузерах. -
    Необходимое условие:
    +
    diff --git a/files/ru/learn/css/css_layout/introduction/index.html b/files/ru/learn/css/css_layout/introduction/index.html index 32349fa8810135..b9717e4b89cf47 100644 --- a/files/ru/learn/css/css_layout/introduction/index.html +++ b/files/ru/learn/css/css_layout/introduction/index.html @@ -9,7 +9,7 @@

    В этой статье мы рассмотрим некоторые функции макета CSS, которые мы затрагивали в предыдущих статьях, например различные значения свойства {{cssxref("display")}}, и разберём некоторые концепции, которые будут рассмотрены в этой статье.

    -
    Необходимые навыки:
    +
    diff --git a/files/ru/learn/css/css_layout/multiple-column_layout/index.html b/files/ru/learn/css/css_layout/multiple-column_layout/index.html index 4026d30e6ede1d..8089368558f50e 100644 --- a/files/ru/learn/css/css_layout/multiple-column_layout/index.html +++ b/files/ru/learn/css/css_layout/multiple-column_layout/index.html @@ -10,7 +10,7 @@

    Спецификация макет с несколькими столбцами даёт вам метод вёрстки контента по столбцам, точно также как вы можете видеть в газете. Эта статья объясняет, как использовать эту функцию.

    -
    Требования:
    +
    diff --git a/files/ru/learn/css/css_layout/normal_flow/index.html b/files/ru/learn/css/css_layout/normal_flow/index.html index eb3a6d4fc8367f..1d1f3dd0a220d3 100644 --- a/files/ru/learn/css/css_layout/normal_flow/index.html +++ b/files/ru/learn/css/css_layout/normal_flow/index.html @@ -13,7 +13,7 @@

    Эта статья объясняет нормальный/базовый поток (normal flow) или способ, которым элементы страницы располагаются на веб-странице по умолчанию.

    -
    Необходимые знания:
    +
    diff --git a/files/ru/learn/css/css_layout/positioning/index.html b/files/ru/learn/css/css_layout/positioning/index.html index 5cf1394121a48a..31a4fced4b0296 100644 --- a/files/ru/learn/css/css_layout/positioning/index.html +++ b/files/ru/learn/css/css_layout/positioning/index.html @@ -9,7 +9,7 @@

    Позиционирование позволяет вам изымать элементы из нормального потока макета документа и заставить их вести себя по-другому; например, располагаться друг на друге или всегда оставаться на одном и том же месте внутри окна просмотра браузера. Эта статья объясняет разные значения {{cssxref("position")}} и как их использовать.

    -
    Что нужно знать прежде чем изучать:
    +
    diff --git a/files/ru/learn/css/css_layout/practical_positioning_examples/index.html b/files/ru/learn/css/css_layout/practical_positioning_examples/index.html index 33631115e72f95..2293133fee7e36 100644 --- a/files/ru/learn/css/css_layout/practical_positioning_examples/index.html +++ b/files/ru/learn/css/css_layout/practical_positioning_examples/index.html @@ -9,7 +9,7 @@

    Основы позиционирования, приведённые в последней статье, мы теперь рассмотрим, как создать некоторые примеры реального мира, чтобы проиллюстрировать, какие вещи вы можете сделать с позиционированием.

    -
    Необходимые знания:
    +
    diff --git a/files/ru/learn/css/css_layout/responsive_design/index.html b/files/ru/learn/css/css_layout/responsive_design/index.html index 9c438d4ee0d424..5ece4b377b042a 100644 --- a/files/ru/learn/css/css_layout/responsive_design/index.html +++ b/files/ru/learn/css/css_layout/responsive_design/index.html @@ -8,7 +8,7 @@

    На заре веб-дизайна страницы создавались для экрана определённого размера. Если у пользователя был экран большего или меньшего размера чем ожидал дизайнер, то результат мог быть от нежелательных полос прокрутки, до слишком длинной строки и плохого использования пространства. Поскольку становились доступны много различных размеров экранов, появилась концепция отзывчивого (адаптивного) веб-дизайна (responsive web design (RWD)) — набор методов, которые позволяют веб-страницам менять свой макет и внешний вид в соответствии с разной шириной экрана, разрешением и т.д. Это та самая, идея которая изменила подход к дизайну веба для множества устройств, и в этой статье мы поможем вам понять основные методы, которые вам необходимо знать, чтобы освоить его.

    -
    Предпосылки:
    +
    @@ -36,9 +36,7 @@

    Историческ

    Эти два подхода, как правило, приводили к тому, что веб-сайт лучше всего выглядел на экране человека, создавшего сайт! Жидкий сайт приводил к раздавленному дизайну на маленьких экранах (как видно ниже) и не читаемо длинным строкам на больших.

    -
    A layout with two columns squashed into a mobile size viewport. -
    -
    +A layout with two columns squashed into a mobile size viewport.

    Примечание: Посмотрите этот простой жидкий макет: пример, исходный код. При просмотре примера, растягивайте и сжимайте окно браузера чтобы увидеть, как это выглядит при разных размерах.

    @@ -46,9 +44,7 @@

    Историческ

    Сайт с фиксированной шириной рисковал иметь горизонтальную полосу прокрутки на экранах меньших чем ширина сайта (как видно ниже) и много белого пространства на краях дизайна на больших экранах.

    -
    A layout with a horizontal scrollbar in a mobile viewport. -
    -
    +A layout with a horizontal scrollbar in a mobile viewport.

    Примечание: Посмотрите этот простой макет с фиксированной шириной: пример, исходный код. Снова изучите результат по мере изменения размера окна браузера.

    @@ -123,15 +119,11 @@

    Гибкие сетки

    Следующий пример демонстрирует простой отзывчивый дизайн, с использованием медиавыражений и гибких сеток. На узких экранах макет отображает блоки, расположенные друг над другом:

    -
    A mobile view of the layout with boxes stacked on top of each other vertically. -
    -
    +A mobile view of the layout with boxes stacked on top of each other vertically.

    На более широких экранах они перемещаются в два столбца:

    -
    A desktop view of a layout with two columns. -
    -
    +A desktop view of a layout with two columns.

    Примечание: вы можете найти живой пример и исходный код этого примера на GitHub.

    @@ -232,15 +224,11 @@

    Отзывчивая тип

    В мобильных версиях заголовок меньше:

    -
    A stacked layout with a small heading size. -
    -
    +A stacked layout with a small heading size.

    На компьютерах, однако, мы видим больший размер заголовка:

    -
    A two column layout with a large heading. -
    -
    +A two column layout with a large heading.

    Примечание: смотрите этот пример в действии: пример, исходный код.

    diff --git a/files/ru/learn/css/first_steps/getting_started/index.html b/files/ru/learn/css/first_steps/getting_started/index.html index 61a507030fe3a1..0b1d2ef1586138 100644 --- a/files/ru/learn/css/first_steps/getting_started/index.html +++ b/files/ru/learn/css/first_steps/getting_started/index.html @@ -17,7 +17,7 @@

    В этой статье мы возьмём простой HTML-документ и применим к нему CSS, изучая некоторые практические вещи о языке.

    -

    Необходимые знания:
    +
    diff --git a/files/ru/learn/css/first_steps/how_css_is_structured/index.html b/files/ru/learn/css/first_steps/how_css_is_structured/index.html index e2c0ed73ba1351..1a9062c93bad4b 100644 --- a/files/ru/learn/css/first_steps/how_css_is_structured/index.html +++ b/files/ru/learn/css/first_steps/how_css_is_structured/index.html @@ -23,7 +23,7 @@

    Теперь, когда у вас есть представление о том, чем является CSS, и о его основах, настало время посмотреть немного глубже в структуру самого языка. Нам уже встречались многие из обсуждаемых здесь концепций; вы можете вернуться к этому, чтобы разобраться, если вы обнаружите какие-либо более поздние концепции запутанными.

    -
    Необходимые знания:
    +
    diff --git a/files/ru/learn/css/first_steps/how_css_works/index.html b/files/ru/learn/css/first_steps/how_css_works/index.html index 93f9df355144fc..643b746f7e5499 100644 --- a/files/ru/learn/css/first_steps/how_css_works/index.html +++ b/files/ru/learn/css/first_steps/how_css_works/index.html @@ -17,7 +17,7 @@

    Мы уже изучили основы CSS, для чего он нужен и как создавать простые таблицы стилей. В этом уроке мы посмотрим, как браузер обрабатывает CSS и HTML и выводит содержимое на веб-страницу.

    -
    Необходимые знания:
    +
    diff --git a/files/ru/learn/css/first_steps/styling_a_biography_page/index.html b/files/ru/learn/css/first_steps/styling_a_biography_page/index.html index cfe08710a1f3bc..f1e5cbd8ece166 100644 --- a/files/ru/learn/css/first_steps/styling_a_biography_page/index.html +++ b/files/ru/learn/css/first_steps/styling_a_biography_page/index.html @@ -17,7 +17,7 @@
    С учётом того что вы узнали за последние несколько уроков, вы должны обнаружить, что вы можете форматировать простые текстовые документы с использованием CSS, чтобы добавить к ним свой собственный стиль. Эта статья даёт вам возможность сделать это.
    -
    Необходимые знания:
    +
    diff --git a/files/ru/learn/css/first_steps/what_is_css/index.html b/files/ru/learn/css/first_steps/what_is_css/index.html index 4cbd049468283b..44405da5990cb0 100644 --- a/files/ru/learn/css/first_steps/what_is_css/index.html +++ b/files/ru/learn/css/first_steps/what_is_css/index.html @@ -19,7 +19,7 @@

    {{Glossary("CSS")}} (Каскадные таблицы стилей) позволяет создавать великолепно выглядящие веб-страницы, но как же это работает? Эта статья объясняет, что такое CSS, с помощью простого примера синтаксиса, а также охватывает некоторые ключевые термины о языке.

    -
    Необходимые знания:
    +
    diff --git a/files/ru/learn/css/styling_text/fundamentals/index.html b/files/ru/learn/css/styling_text/fundamentals/index.html index d4ba6db68d2e4c..2e71fbb4903310 100644 --- a/files/ru/learn/css/styling_text/fundamentals/index.html +++ b/files/ru/learn/css/styling_text/fundamentals/index.html @@ -9,7 +9,7 @@

    В данной статье мы начнём путь к овладению стилизацией текста при помощи {{glossary("CSS")}}. Мы подробно изучим основы стилизации текста и шрифта, такие как толщина, начертание, семейство, стенография, выравнивание текста и другие эффекты, а также рассмотрим междустрочный и межбуквенный интервалы.

    -
    Требуемые знания:
    +
    diff --git a/files/ru/learn/css/styling_text/styling_links/index.html b/files/ru/learn/css/styling_text/styling_links/index.html index 19fd78dd988026..5924f85cddaeb5 100644 --- a/files/ru/learn/css/styling_text/styling_links/index.html +++ b/files/ru/learn/css/styling_text/styling_links/index.html @@ -9,7 +9,7 @@

    При стилизации ссылок, важно понимать как использовать псевдоклассы, чтобы стилизировать состояния ссылок эффективно, и как стилизировать ссылки для использования в общих разнообразных функциях интерфейса: таких как например навигационное меню и вкладки. Мы рассмотрим все эти темы в этой статье.

    -
    Необходимые знания:
    +
    diff --git a/files/ru/learn/css/styling_text/styling_lists/index.html b/files/ru/learn/css/styling_text/styling_lists/index.html index 72c90ed9cdfbec..ce9c76a9b67554 100644 --- a/files/ru/learn/css/styling_text/styling_lists/index.html +++ b/files/ru/learn/css/styling_text/styling_lists/index.html @@ -10,7 +10,7 @@

    Списки, по-большому счету, ведут себя также как любой другой текст, но существуют некоторые специфичные настройки CSS, о которых вы должны знать. В этой статье они все описываются.

    -
    Для изучения вам потребуется:
    +
    diff --git a/files/ru/learn/css/styling_text/typesetting_a_homepage/index.html b/files/ru/learn/css/styling_text/typesetting_a_homepage/index.html index 736958129edfd5..faffe04172fdc9 100644 --- a/files/ru/learn/css/styling_text/typesetting_a_homepage/index.html +++ b/files/ru/learn/css/styling_text/typesetting_a_homepage/index.html @@ -10,7 +10,7 @@

    В этой оценке мы проверим ваше понимание всех методов стилизации текста, которые мы рассмотрели в этом модуле дав вам задание стилизовать текст домашней страницы общественной школы. Вы можете просто развлечься, выполняя задание.

    -
    Требования:
    +
    diff --git a/files/ru/learn/css/styling_text/web_fonts/index.html b/files/ru/learn/css/styling_text/web_fonts/index.html index fdb644ccbb2259..77486483f471eb 100644 --- a/files/ru/learn/css/styling_text/web_fonts/index.html +++ b/files/ru/learn/css/styling_text/web_fonts/index.html @@ -10,7 +10,7 @@

    В первой статье модуля, мы изучали основные функции CSS доступные для стилизации шрифтов и текста. В этой статье мы продвинемся дальше изучая веб-шрифты в деталях — они позволяют вам загружать пользовательские шрифты вместе с вашей веб-страницей, чтобы обеспечить более разнообразный, индивидуальный стиль текста.

    -
    Предварительные требования:
    +
    diff --git a/files/ru/learn/forms/basic_native_form_controls/index.html b/files/ru/learn/forms/basic_native_form_controls/index.html index 2baebf7b4d8ca2..c9fb46b2800a21 100644 --- a/files/ru/learn/forms/basic_native_form_controls/index.html +++ b/files/ru/learn/forms/basic_native_form_controls/index.html @@ -10,7 +10,7 @@

    Сейчас мы детально изучим возможности различных виджетов форм, посмотрим, какие функции доступны для получения информации в различных представлениях. Это исчерпывающая статья, описывающая все доступные стандартные виджеты форм.

    -
    Предварительные требования:
    +
    diff --git a/files/ru/learn/forms/form_validation/index.html b/files/ru/learn/forms/form_validation/index.html index f7a87cbb4f20df..91aeba923424fb 100644 --- a/files/ru/learn/forms/form_validation/index.html +++ b/files/ru/learn/forms/form_validation/index.html @@ -18,7 +18,7 @@

    Перед отправкой данных на сервер важно убедиться, что все обязательные поля формы заполнены данными в корректном формате. Это называется валидацией на стороне клиента и помогает убедиться, что данные, введённые в каждый элемент формы, соответствуют требованиям. Данная статья проведёт вас через основные концепци и примеры валидации на стороне клиента.

    -
    Требования:
    +
    diff --git a/files/ru/learn/forms/how_to_structure_a_web_form/index.html b/files/ru/learn/forms/how_to_structure_a_web_form/index.html index d26a623697fa23..5b566b231710c2 100644 --- a/files/ru/learn/forms/how_to_structure_a_web_form/index.html +++ b/files/ru/learn/forms/how_to_structure_a_web_form/index.html @@ -17,7 +17,7 @@

    Получив базовые знания, теперь мы более подробно рассмотрим элементы, используемые для придания структуры и значения различным частям форм.

    -
    Начальные требования:
    +
    diff --git a/files/ru/learn/forms/sending_and_retrieving_form_data/index.html b/files/ru/learn/forms/sending_and_retrieving_form_data/index.html index ef2eb30a0d690a..9724ee5fe6dcf6 100644 --- a/files/ru/learn/forms/sending_and_retrieving_form_data/index.html +++ b/files/ru/learn/forms/sending_and_retrieving_form_data/index.html @@ -8,7 +8,7 @@

    В этой статье рассматривается, что происходит, когда пользователь отправляет форму - куда передаются данные и как мы их обрабатываем, когда они туда попадают? Мы также рассмотрим некоторые проблемы безопасности, связанные с отправкой данных формы.

    -
    Уровень подготовки:
    +
    diff --git a/files/ru/learn/html/index.html b/files/ru/learn/html/index.html index be3b3223c7a06d..8bb385762e5cea 100644 --- a/files/ru/learn/html/index.html +++ b/files/ru/learn/html/index.html @@ -52,9 +52,7 @@

    Решение общих HTM

    Смотрите также:

    -
    HTML (HyperText Markup Language) на MDN.
    Отправная точка HTML документации на MDN, там вы сможете найти как подробное описание основных элементов и их атрибутов, так и более продвинутые уроки по языку, это отличное место для старта.
    -
    diff --git a/files/ru/learn/html/introduction_to_html/advanced_text_formatting/index.html b/files/ru/learn/html/introduction_to_html/advanced_text_formatting/index.html index 93bc11390c9d55..1a243f68b5e7e7 100644 --- a/files/ru/learn/html/introduction_to_html/advanced_text_formatting/index.html +++ b/files/ru/learn/html/introduction_to_html/advanced_text_formatting/index.html @@ -16,7 +16,7 @@

    В HTML для форматирования текста есть много других элементов, не рассмотренных в статье Основы редактирования текста в HTML. Элементы, описанные в этой статье, не так часто используются, но всё же полезны для понимания (и это всё ещё будет не полный список элементов). Здесь вы узнаете о цитатах, списках описания, компьютерном коде и другом виде текстовых элементов, подстрочном и надстрочном тексте, контактной информации и других типах текста.

    -
    Предварительные знания:
    +
    @@ -217,7 +217,7 @@

    Блочные цитаты

    Если часть содержимого уровня блока (будь то абзац, несколько абзацев, список и т. д.) цитируется из другого источника, вы должны обернуть её внутри элемента {{htmlelement ("blockquote")}}, чтобы обозначить это, и указать URL-адрес, указывающий на источник цитаты, внутри атрибута {{htmlattrxref ("cite", "blockquote")}}.

    -

    Например, следующая разметка берётся из страницы элемента MDN <blockquote>:

    +

    Например, следующая разметка берётся из страницы элемента MDN <blockquote>:

    <p><strong>HTML-элемент<code>&lt;blockquote&gt;</code></strong> (от англ. <em>HTML Block
 Quotation Element</em>) указывает на то, что заключённый в нём текст является развёрнутой цитатой.</p>
    diff --git a/files/ru/learn/html/introduction_to_html/creating_hyperlinks/index.html b/files/ru/learn/html/introduction_to_html/creating_hyperlinks/index.html index 288d95eef6acee..6055a2b1c161e2 100644 --- a/files/ru/learn/html/introduction_to_html/creating_hyperlinks/index.html +++ b/files/ru/learn/html/introduction_to_html/creating_hyperlinks/index.html @@ -21,11 +21,11 @@

    Гиперссылки действительно важны — они делают Интернет Интернетом. В этой статье представлен синтаксис, необходимый для создания ссылки, а также обсуждаются лучшие практики обращения со ссылками.

    -
    Предварительные требования:
    +
    - + @@ -341,96 +341,13 @@

    Заключение

    В этом модуле

    - -
    - - - - -
    Предварительные требования:Базовое знакомство с HTML, описанное в статье Начало работы c HTML. Форматирование текста в HTML, описанное в статье Основы редактирования текста в HTML.Базовое знакомство с HTML, описанное в статье Начало работы c HTML. Форматирование текста в HTML, описанное в статье Основы редактирования текста в HTML.
    Задача:
    - - - - - - - - - - - - - -
    -
    -     		-
    -     		-
    -     		-
    - -
    -     		-
    -     		-
    -
    - - - -
    - -
    - -
    - -
    Text-to-speech function is limited to 200 characters
    - -
    -
    - - - - - - - - - - -
    -
    -     		Options : History : Feedback : DonateClose
    -
    - - +
  • Начало работы с HTML
    • +
  • Что такое заголовок? Метаданные в HTML
    • +
  • Основы редактирования текста в HTML
    • +
  • Создание гиперссылок
    • +
  • Углублённое форматирование текста
    • +
  • Структура документа и веб-сайта
    • +
  • Отладка HTML
    • +
  • Разметка письма
    • +
  • Структурируем страницу
    • + \ No newline at end of file diff --git a/files/ru/learn/html/introduction_to_html/debugging_html/index.html b/files/ru/learn/html/introduction_to_html/debugging_html/index.html index 127deab215eef4..eb14c7a8d88ac6 100644 --- a/files/ru/learn/html/introduction_to_html/debugging_html/index.html +++ b/files/ru/learn/html/introduction_to_html/debugging_html/index.html @@ -16,7 +16,7 @@

    Написать HTML — здорово, но как понять, где ошибка, когда что-то не работает? В этой статье описаны несколько инструментов, которые помогают искать и исправлять ошибки в HTML.

    - +
    diff --git a/files/ru/learn/html/introduction_to_html/document_and_website_structure/index.html b/files/ru/learn/html/introduction_to_html/document_and_website_structure/index.html index 926ac0b6ba3351..3a5e91a3c7172a 100644 --- a/files/ru/learn/html/introduction_to_html/document_and_website_structure/index.html +++ b/files/ru/learn/html/introduction_to_html/document_and_website_structure/index.html @@ -18,7 +18,7 @@

    В дополнение к определению отдельных частей вашей страницы (таких как «абзац» или «изображение»), {{glossary("HTML")}} также содержит ряд элементов блочного уровня, используемых для определения областей вашего веб-сайта (такие как «заголовок», «навигационное меню», «колонка основного содержимого»). В этой статье рассматривается, как планировать базовую структуру сайта и писать HTML для представления этой структуры.

    -
    Что нужно знать:
    +
    diff --git a/files/ru/learn/html/introduction_to_html/getting_started/index.html b/files/ru/learn/html/introduction_to_html/getting_started/index.html index 2d1c09aa7ca42f..cbd0efe77d2a63 100644 --- a/files/ru/learn/html/introduction_to_html/getting_started/index.html +++ b/files/ru/learn/html/introduction_to_html/getting_started/index.html @@ -21,7 +21,7 @@

    В этой статье мы охватим азы HTML, необходимые для начала работы. Дадим определение «элементам», «атрибутам», «тегам» и прочим важным понятиям, о которых вы, возможно, слышали, а также об их роли в языке. Мы также покажем, как устроены HTML-элементы, типичная HTML-страница, и объясним другие важные аспекты языка. По ходу дела, чтобы вы не заскучали, мы поиграем с настоящей HTML-страницей!

    -
    Необходимые знания:
    +
    diff --git a/files/ru/learn/html/introduction_to_html/html_text_fundamentals/index.html b/files/ru/learn/html/introduction_to_html/html_text_fundamentals/index.html index 201b31113e25a4..987ce7d702964a 100644 --- a/files/ru/learn/html/introduction_to_html/html_text_fundamentals/index.html +++ b/files/ru/learn/html/introduction_to_html/html_text_fundamentals/index.html @@ -22,7 +22,7 @@

    Одна из основных задач HTML — придавать тексту структуру и смысл, {{glossary("семантику")}}, так, чтобы браузер смог отобразить текст корректно. Эта статья покажет, как можно использовать {{glossary("HTML")}}, чтобы упорядочить текст на странице путём добавления заголовков и абзацев, выделения слов, создания списков и многое другое.

    -
    Необходимые знания:
    +
    diff --git a/files/ru/learn/html/introduction_to_html/marking_up_a_letter/index.html b/files/ru/learn/html/introduction_to_html/marking_up_a_letter/index.html index 0d14dcfc251ec5..145734d89becdc 100644 --- a/files/ru/learn/html/introduction_to_html/marking_up_a_letter/index.html +++ b/files/ru/learn/html/introduction_to_html/marking_up_a_letter/index.html @@ -12,7 +12,7 @@

    Мы все учимся писать письма рано или поздно; это также хороший способ испытать наши навыки форматирования! В этом задании у вас будет письмо для проверки ваших навыков форматирования текста HTML, использования гиперссылок и элемента <head>.

    -
    Предварительные требования:
    +
    diff --git a/files/ru/learn/html/introduction_to_html/structuring_a_page_of_content/index.html b/files/ru/learn/html/introduction_to_html/structuring_a_page_of_content/index.html index 5bfd6ac10f9b40..b31f64216f0df3 100644 --- a/files/ru/learn/html/introduction_to_html/structuring_a_page_of_content/index.html +++ b/files/ru/learn/html/introduction_to_html/structuring_a_page_of_content/index.html @@ -12,7 +12,7 @@

    Разметить страницу так, чтобы к ней было просто применить CSS — первое, чему должен научиться будущий веб-разработчик. В этом задании вам придётся подумать о том, как должна выглядеть страница, и подобрать подходящую семантическую разметку.

    -
    Знания:
    +
    diff --git a/files/ru/learn/html/introduction_to_html/the_head_metadata_in_html/index.html b/files/ru/learn/html/introduction_to_html/the_head_metadata_in_html/index.html index d348f7b99cf012..d9637abfdfea4d 100644 --- a/files/ru/learn/html/introduction_to_html/the_head_metadata_in_html/index.html +++ b/files/ru/learn/html/introduction_to_html/the_head_metadata_in_html/index.html @@ -32,7 +32,7 @@

    В этой статье мы рассмотрим всё вышеперечисленное и многое другое, чтобы дать вам хорошую основу для работы с разметкой.

    -
    Что нужно знать:
    +
    diff --git a/files/ru/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/index.html b/files/ru/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/index.html index d647ea20f241c7..6159940bf86c8a 100644 --- a/files/ru/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/index.html +++ b/files/ru/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/index.html @@ -12,7 +12,7 @@

    Векторная графика очень полезна во многих случаях. Она имеет малые размеры файла и высокую масштабируемость – при увеличении масштаба пиксели не увеличиваются вместе с графикой. В данной статье мы покажем, как встраивать векторную графику на Вашу страницу.

    -
    Предварительные требования:
    +
    diff --git a/files/ru/learn/html/multimedia_and_embedding/images_in_html/index.html b/files/ru/learn/html/multimedia_and_embedding/images_in_html/index.html index ddb3044f579c3f..a223e3b5708a80 100644 --- a/files/ru/learn/html/multimedia_and_embedding/images_in_html/index.html +++ b/files/ru/learn/html/multimedia_and_embedding/images_in_html/index.html @@ -10,7 +10,7 @@

    В начале Web был просто текстом, что было довольно скучно. К счастью, это продолжалось не долго - до появления возможности вставлять изображения (и другие, более интересные, типы контента) в веб-страницы. Существуют и другие типы мультимедиа, однако логичнее начать со скромного {{htmlelement("img")}} элемента, используемого для вставки простого изображения в веб-страницу. В этой статье мы рассмотрим, как использовать элемент, начиная с основ, снабжать примечаниями, используя {{htmlelement("figure")}}, и разберём, как это относится к фоновым изображениям {{glossary("CSS")}}.

    -
    Навыки:
    +
    diff --git a/files/ru/learn/html/multimedia_and_embedding/mozilla_splash_page/index.html b/files/ru/learn/html/multimedia_and_embedding/mozilla_splash_page/index.html index 3fc9d0d0051167..1203ff487aac4d 100644 --- a/files/ru/learn/html/multimedia_and_embedding/mozilla_splash_page/index.html +++ b/files/ru/learn/html/multimedia_and_embedding/mozilla_splash_page/index.html @@ -10,7 +10,7 @@

    В этом задании мы проверим ваши знания приёмов, рассмотренных в статьях этого модуля, через добавление изображений и видео на забавную страницу о Mozilla!

    -
    Необходимы:
    +
    diff --git a/files/ru/learn/html/multimedia_and_embedding/other_embedding_technologies/index.html b/files/ru/learn/html/multimedia_and_embedding/other_embedding_technologies/index.html index de8cb834a3483b..72e9a8af545b31 100644 --- a/files/ru/learn/html/multimedia_and_embedding/other_embedding_technologies/index.html +++ b/files/ru/learn/html/multimedia_and_embedding/other_embedding_technologies/index.html @@ -9,7 +9,7 @@

    К настоящему моменту вы уже должны уметь прикреплять вложения на свои веб-страницы, включая изображения, видео и аудио. На этом этапе мы хотели бы сделать шаг в сторону, рассматривая некоторые элементы, которые позволяют встраивать в ваши веб-страницы самые разнообразные типы контента: {{htmlelement ("iframe")}}, {{htmlelement ( "embed")}} и {{htmlelement ("object")}}. <iframe> предназначен для встраивания других веб-страниц, а два других позволяют встраивать PDF-файлы, SVG и даже Flash - устаревшую технологию, которую вы всё равно иногда увидите.

    -
    Предпосылки:
    +
    diff --git a/files/ru/learn/html/multimedia_and_embedding/responsive_images/index.html b/files/ru/learn/html/multimedia_and_embedding/responsive_images/index.html index 6a97083a5acb99..b3cbc024873564 100644 --- a/files/ru/learn/html/multimedia_and_embedding/responsive_images/index.html +++ b/files/ru/learn/html/multimedia_and_embedding/responsive_images/index.html @@ -11,7 +11,7 @@

    В данной статье мы изучим концепцию гибких (responsive) изображений — таких, которые отображаются хорошо на устройствах с сильно отличающимися размерами экрана, разрешением, и другими характеристиками — и рассмотрим инструменты, которые имеются в HTML для их реализации. Responsive images - только одна часть (и хорошее начало) гибкого веб-дизайна, темы, которая будет рассмотрена подробнее в будущем модуле на тему CSS.

    -
    Предпосылки:
    +
    diff --git a/files/ru/learn/html/multimedia_and_embedding/video_and_audio_content/index.html b/files/ru/learn/html/multimedia_and_embedding/video_and_audio_content/index.html index 4096ea204dcecc..2df3ace7b516db 100644 --- a/files/ru/learn/html/multimedia_and_embedding/video_and_audio_content/index.html +++ b/files/ru/learn/html/multimedia_and_embedding/video_and_audio_content/index.html @@ -9,7 +9,7 @@

    Теперь, когда мы спокойно добавляем простые изображения на веб-страницу, сделаем следующий шаг — начнём добавлять видео и аудиоплееры в ваши HTML-документы! В этой статье вы увидите, как это делать с элементами {{htmlelement("video")}} и {{htmlelement("audio")}} ; а в завершение посмотрите, как добавить титры и субтитры к вашим видео.

    -
    Требования:
    +
    @@ -193,7 +193,7 @@

    Разве было бы неплохо иметь возможность предоставить этим людям транскрипцию слов, произносимых в аудио или видео? Благодаря HTML5 вы можете это сделать с форматом WebVTT и элементом {{htmlelement ("track")}}.

    -

    Замечание: "Транскрибировать" значит записывать устную речь в виде текста. Полученный текст представляет собой «стенограмму».

    +

    Замечание : "Транскрибировать" значит записывать устную речь в виде текста. Полученный текст представляет собой «стенограмму».

    WebVTT - это формат для записи текстовых файлов, содержащих несколько строк текста, а также метаданные, такие как время, в которое вы хотите отображать каждую текстовую строку, и даже ограниченную информацию о стиле/позиционировании. Эти текстовые строки называются репликами, и вы можете отображать разные типы для разных целей, наиболее распространёнными являются:

    @@ -209,7 +209,7 @@

    Типичный файл WebVTT будет выглядеть примерно так:

    -
    WEBVTT
+
    WEBVTT
 
 1
 00:00:22.230 --> 00:00:24.606
@@ -219,7 +219,7 @@ 
    
 00:00:30.739 --> 00:00:34.074
 Это второй.
 
-  ...
+  ...
 
    
 
 
    Чтобы отобразить это вместе с воспроизведением мультимедиа HTML, вам необходимо:
    
@@ -245,7 +245,7 @@ 
    
 
    Подробнее читайте в разделе добавление титров и субтитров к видео HTML5. Вы можете найти пример, который соответствует этой статье в Github, написанной Яном Девлином (см. также исходный код). В этом примере используется JavaScript, позволяющий пользователям выбирать между различными субтитрами. Обратите внимание, что для включения субтитров вам нужно нажать кнопку «CC» и выбрать вариант - английский, немецкий или испанский.
    
 
 
    
-
    Примечание: Текстовые треки также помогут вам с {{glossary ("SEO")}}, так как поисковые системы особенно преуспевают в работе с текстом. Текстовые треки даже позволяют поисковым системам напрямую связываться с местом, происходящим в видео.
    
+
    Примечание: Текстовые треки также помогут вам с {{glossary ("SEO")}}, так как поисковые системы особенно преуспевают в работе с текстом. Текстовые треки даже позволяют поисковым системам напрямую связываться с местом, происходящим в видео.
    
 
    
 
 
    Активное обучение: Внедрение собственного аудио и видео
    
diff --git a/files/ru/learn/html/tables/advanced/index.html b/files/ru/learn/html/tables/advanced/index.html
index a676da6c52299d..ffed8415de7d23 100644
--- a/files/ru/learn/html/tables/advanced/index.html
+++ b/files/ru/learn/html/tables/advanced/index.html
@@ -9,7 +9,7 @@
 
 
    Во второй статье этого модуля мы рассматриваем ещё несколько продвинутых возможностей в HTML таблицах — такие как заголовок/описание и группировка строк внутри head, body и footer секциях таблицы, а также доступность таблиц для пользователей с ограниченными возможностями.
    
 
-

    Предпосылки:
    +
    @@ -250,38 +250,6 @@

    Вложенные таблицы

    -

    Результат которого выглядит примерно так:

    - -
    Необходимые знания:
    - - - - - - - - - - - - - - - - - -
    title1title2title3
    - - - - - - - - -
    cell1cell2cell3
    -     		cell2cell3
    cell4cell5cell6
    -

    Таблицы для пользователей с ограниченными возможностями

    Давайте кратко опишем как мы используем данные таблицы. Таблицы могут быть удобным инструментом, который даёт нам быстрый доступ к данным и позволяет искать разные значения. Например, быстрого взгляда на таблицу ниже достаточно, чтобы найти сколько колец было продано в Амстердаме в августе 2016. Чтобы понять эту информацию, мы проводим визуальные ассоциации между данными в этой таблице и её заголовками колонок и/или строк.

    diff --git a/files/ru/learn/html/tables/basics/index.html b/files/ru/learn/html/tables/basics/index.html index 916e1258ffb095..4d37cb182d2e36 100644 --- a/files/ru/learn/html/tables/basics/index.html +++ b/files/ru/learn/html/tables/basics/index.html @@ -9,7 +9,7 @@

    Этот раздел познакомит вас с таблицами HTML, представив самые базовые понятия - строки и ячейки, заголовки, слияние строк и столбцов, а также объединение всех ячеек в столбце в целях стилизации.

    - +
    @@ -61,17 +61,17 @@

    Как работает табл

    - + - + - + diff --git a/files/ru/learn/html/tables/structuring_planet_data/index.html b/files/ru/learn/html/tables/structuring_planet_data/index.html index dd1f4bbd859cfe..3a815eabb9a4a2 100644 --- a/files/ru/learn/html/tables/structuring_planet_data/index.html +++ b/files/ru/learn/html/tables/structuring_planet_data/index.html @@ -13,7 +13,7 @@

    В нашей аттестации, мы предоставим вам некоторые данные о планетах солнечной системы, и убедим вас структурировать их в HTML таблицу.

    -
    Начальные условия:
    3 Лицо♂♂ он его
    ♀♀ она её
    oo оно его
    +
    diff --git a/files/ru/learn/index.html b/files/ru/learn/index.html index e34e39470e6e0b..083bdc114f05a9 100644 --- a/files/ru/learn/index.html +++ b/files/ru/learn/index.html @@ -39,7 +39,7 @@

    Х

    С чего начать

    -
      +
      • Я новичок Если вы совсем новичок в веб-разработке, мы рекомендуем вам начать работу со статьи «Начало работы с вебом», которая представляет собой практическое вступление в веб-разработку.
      • Уже что-то знаю Если у вас уже есть какой-то набор знаний, то следующим шагом будет изучение {{glossary("HTML")}} и {{glossary("CSS")}} во всех подробностях: начните с нашей статьи «Введение в HTML», а затем загляните в статью «Вступление в CSS».
      • Погружаемся в программирование Если вы уже чувствуете себя комфортно с HTML и CSS или в основном интересуетесь кодингом, то вы захотите погрузиться в {{glossary("JavaScript")}} или разработку на стороне сервера. Загляните в разделы «Первые шаги в JavaScript» и «Первые шаги в программировании веб-сайтов на стороне сервера».
        • diff --git a/files/ru/learn/javascript/asynchronous/introducing/index.html b/files/ru/learn/javascript/asynchronous/introducing/index.html index 36f0e4f9346d2c..cc448c7628b28c 100644 --- a/files/ru/learn/javascript/asynchronous/introducing/index.html +++ b/files/ru/learn/javascript/asynchronous/introducing/index.html @@ -17,7 +17,7 @@

        В этой статье мы кратко остановимся на проблемах, связанных с синхронным Javascript, а также ознакомимся с несколькими асинхронными методами, демонстрирующими как они могут помочь нам подобные проблемы решить.

        -
    Необходимые навыки:
    +
    diff --git a/files/ru/learn/javascript/asynchronous/promises/index.html b/files/ru/learn/javascript/asynchronous/promises/index.html index 9ac9f253be926f..08a56746c103f7 100644 --- a/files/ru/learn/javascript/asynchronous/promises/index.html +++ b/files/ru/learn/javascript/asynchronous/promises/index.html @@ -14,7 +14,7 @@

    В ECMAScript версии 2017 появились async functions и ключевое слово await (ECMAScript Next support in Mozilla). По существу, такие функции есть синтаксический сахар над Promises и Generator functions (ts39). С их помощью легче писать/читать асинхронный код, ведь они позволяют использовать привычный синхронный стиль написания. В этой статье мы на базовом уровне разберёмся в их устройстве.

    -
    Необходимое условие:
    +
    diff --git a/files/ru/learn/javascript/building_blocks/build_your_own_function/index.html b/files/ru/learn/javascript/building_blocks/build_your_own_function/index.html index 3bdf421b9e8eb7..22ff8b6cc74359 100644 --- a/files/ru/learn/javascript/building_blocks/build_your_own_function/index.html +++ b/files/ru/learn/javascript/building_blocks/build_your_own_function/index.html @@ -10,7 +10,7 @@

    Эта статья призвана дать практический опыт на основе теоретических знаний приведённых в предыдущей статье. Попутно мы также объясним некоторые важные детали работы с функциями.

    -
    Примечания:
    +
    diff --git a/files/ru/learn/javascript/building_blocks/conditionals/index.html b/files/ru/learn/javascript/building_blocks/conditionals/index.html index 3900d4e61f5c28..57ced9be083630 100644 --- a/files/ru/learn/javascript/building_blocks/conditionals/index.html +++ b/files/ru/learn/javascript/building_blocks/conditionals/index.html @@ -17,7 +17,7 @@

    Во многих языках программирования код должен иметь возможность принимать решения на основе введённых пользователем данных. Например, в игре, если у пользователя осталось 0 жизней, то игра завершается. В приложении о погоде утром отображается восход солнца, а вечером звезды и луна. В этой статье мы рассмотрим как в JavaScript работают так называемые "условия".

    -
    Предпосылки:
    +
    diff --git a/files/ru/learn/javascript/building_blocks/events/index.html b/files/ru/learn/javascript/building_blocks/events/index.html index 8984b6c3032f61..6d794a27812644 100644 --- a/files/ru/learn/javascript/building_blocks/events/index.html +++ b/files/ru/learn/javascript/building_blocks/events/index.html @@ -15,7 +15,7 @@

    События — это действия или случаи, возникающие в программируемой вами системе, о которых система сообщает вам для того, чтобы вы могли с ними взаимодействовать. Например, если пользователь нажимает кнопку на веб-странице, вы можете ответить на это действие, отобразив информационное окно. В этой статье мы обсудим некоторые важные концепции, связанные с событиями, и посмотрим, как они работают в браузерах. Эта статья не является исчерпывающим источником по этой теме — здесь только то, что вам нужно знать на этом этапе.

    -
    Необходимое условие:
    +
    @@ -170,7 +170,7 @@

    Обратите внимание, что для перебора всех элементов, которые содержит объект NodeList, можно воспользоваться встроенным методом forEach():

    +

    Обратите внимание, что для перебора всех элементов, которые содержит объект NodeList, можно воспользоваться встроенным методом forEach():

    buttons.forEach(function(button) {
   button.onclick = bgChange;
diff --git a/files/ru/learn/javascript/building_blocks/functions/index.html b/files/ru/learn/javascript/building_blocks/functions/index.html
index 2cb12c4bf187af..d440da05ad664b 100644
--- a/files/ru/learn/javascript/building_blocks/functions/index.html
+++ b/files/ru/learn/javascript/building_blocks/functions/index.html
@@ -16,7 +16,7 @@
 
 
    В этой статье мы рассмотрим фундаментальные концепции функций, такие как базовый синтаксис, способы вызова и их определения, область действия и параметры.
    
 
-

    Предпосылки:
    +
    diff --git a/files/ru/learn/javascript/building_blocks/image_gallery/index.html b/files/ru/learn/javascript/building_blocks/image_gallery/index.html index 3e5b76691a79da..8485306f3a7c66 100644 --- a/files/ru/learn/javascript/building_blocks/image_gallery/index.html +++ b/files/ru/learn/javascript/building_blocks/image_gallery/index.html @@ -15,7 +15,7 @@

    Теперь, после изучения основ JavaScript, мы проверим ваши знания циклов, функций, условных операторов и событий предложив вам написать популярный элемент который вы увидите на многих сайтах - галерея на JavaScript.

    -
    Предпосылки:
    +
    diff --git a/files/ru/learn/javascript/building_blocks/looping_code/index.html b/files/ru/learn/javascript/building_blocks/looping_code/index.html index 04e882eac53596..94ba7ffb013cb6 100644 --- a/files/ru/learn/javascript/building_blocks/looping_code/index.html +++ b/files/ru/learn/javascript/building_blocks/looping_code/index.html @@ -9,7 +9,7 @@

    Языки программирования очень полезны для быстрой реализации повторяющихся задач. От базовых числовых операций до любой другой ситуации, когда у вас есть много похожих операций, которые нужно выполнить. В этой статье мы рассмотрим структуры циклов, доступные в JavaScript, которые можно использовать для этих целей.

    -
    Необходимые знания:
    +
    @@ -592,12 +592,6 @@
    Active learning
    </div> -

    - -

    - -

    - 
    html {
   font-family: sans-serif;
 }
@@ -618,14 +612,6 @@ 
    Active learning
    
   background: #f5f9fa;
 }
    -

    - -

    - -

    - -

    - 
    var textarea = document.getElementById('code');
 var reset = document.getElementById('reset');
 var solution = document.getElementById('solution');
@@ -703,7 +689,6 @@ 
    Active learning
    
   updateCode();
 };
    -

    {{ EmbedLiveSample('Active_learning', '100%', 880, "", "", "hide-codepen-jsfiddle") }}

    @@ -916,9 +901,7 @@

    Дополнител
  • for свойства и характеристики
  • while и do...while описание
  • break и continue описание
    • -
  • -

    What’s the Best Way to Write a JavaScript For Loop? — статья о практическом применении циклов

    -
    • +
  • What’s the Best Way to Write a JavaScript For Loop? — статья о практическом применении циклов

    • {{PreviousMenuNext("Learn/JavaScript/Building_blocks/conditionals","Learn/JavaScript/Building_blocks/Functions", "Learn/JavaScript/Building_blocks")}}

    diff --git a/files/ru/learn/javascript/building_blocks/return_values/index.html b/files/ru/learn/javascript/building_blocks/return_values/index.html index d1764c656fc7a6..bf9aaaa50da9bd 100644 --- a/files/ru/learn/javascript/building_blocks/return_values/index.html +++ b/files/ru/learn/javascript/building_blocks/return_values/index.html @@ -9,7 +9,7 @@

    Для нас в этом курсе имеется ещё один важный момент. Посмотрим внимательнее на возвращаемое значение функций. Некоторые функции не возвращают существенное значение после завершения, но некоторые возвращают, и важно понимать что это за значение и как использовать его в своём коде и как сделать так чтобы ваши собственные функции возвращали полезные значения. Мы объясним всё это ниже.

    -

    Требования:
    +
    diff --git a/files/ru/learn/javascript/client-side_web_apis/client-side_storage/index.html b/files/ru/learn/javascript/client-side_web_apis/client-side_storage/index.html index 38bcc1b21f43e6..b0fec281a83538 100644 --- a/files/ru/learn/javascript/client-side_web_apis/client-side_storage/index.html +++ b/files/ru/learn/javascript/client-side_web_apis/client-side_storage/index.html @@ -11,7 +11,7 @@

    Современные веб-браузеры поддерживают несколько способов хранения данных из веб-сайтов на компьютере пользователя - с разрешения пользователя - чтобы потом получать их, когда это необходимо. Это позволяет долгосрочно хранить данные, сохранять сайты или документы для использования без подключения к сети, сохранять пользовательские настройки для вашего сайта и многое другое. В этой статье объясняются основы того, как это все работает.

    -
    Необходимые навыки:
    +
    diff --git a/files/ru/learn/javascript/client-side_web_apis/fetching_data/index.html b/files/ru/learn/javascript/client-side_web_apis/fetching_data/index.html index 6f724e5a2221db..dc4270f4e67656 100644 --- a/files/ru/learn/javascript/client-side_web_apis/fetching_data/index.html +++ b/files/ru/learn/javascript/client-side_web_apis/fetching_data/index.html @@ -16,7 +16,7 @@

    Другой очень распространённой задачей в современных веб-сайтах и ​​приложениях является получение отдельных элементов данных с сервера для обновления разделов веб-страницы без необходимости загрузки всей новой страницы. Эта, казалось бы, небольшая деталь оказала огромное влияние на производительность и поведение сайтов, поэтому в этой статье мы объясним концепцию и рассмотрим технологии, которые делают это возможным, например XMLHttpRequest и API Fetch.

    -
    Что нужно знать:
    +
    diff --git a/files/ru/learn/javascript/client-side_web_apis/introduction/index.html b/files/ru/learn/javascript/client-side_web_apis/introduction/index.html index 77b6a9d4a20330..bcb12f14af9e18 100644 --- a/files/ru/learn/javascript/client-side_web_apis/introduction/index.html +++ b/files/ru/learn/javascript/client-side_web_apis/introduction/index.html @@ -9,7 +9,7 @@

    Начнём с рассмотрения того что представляют собой API на высоком уровне и выясним, как они работают, как их использовать в своих программах и как они структурированы. Также рассмотрим основные виды API и их применение.

    -
    Необходимые условия:
    +
    diff --git a/files/ru/learn/javascript/client-side_web_apis/manipulating_documents/index.html b/files/ru/learn/javascript/client-side_web_apis/manipulating_documents/index.html index 9ee3673b9f6e83..7639b978d37911 100644 --- a/files/ru/learn/javascript/client-side_web_apis/manipulating_documents/index.html +++ b/files/ru/learn/javascript/client-side_web_apis/manipulating_documents/index.html @@ -16,7 +16,7 @@

    При написании веб-страниц и приложений вам придётся часто каким-либо образом управлять структурой документа. Обычно это делается с помощью Document Object Model (DOM), набора API для управления разметкой HTML и стилями, которая сильно использует объект {{domxref ("Document")}}. В этой статье мы подробно рассмотрим, как использовать DOM и некоторые другие интересные API, которые могут изменить вашу среду интересными способами.

    -
    Необходимые знания:
    +
    diff --git a/files/ru/learn/javascript/client-side_web_apis/third_party_apis/index.html b/files/ru/learn/javascript/client-side_web_apis/third_party_apis/index.html index 4ad5382bce1ce9..27698b2901649a 100644 --- a/files/ru/learn/javascript/client-side_web_apis/third_party_apis/index.html +++ b/files/ru/learn/javascript/client-side_web_apis/third_party_apis/index.html @@ -12,7 +12,7 @@

    API, которые мы рассмотрели до сих пор, встроены в браузер, но не все API таковы. Многие крупные веб-сайты и сервисы, такие как Google Maps, Twitter, Facebook, PayPal и т. д., Предоставляют API-интерфейсы, позволяющие разработчикам использовать свои данные (например, показывать ваш твиттер-поток в вашем блоге) или сервисы (например, отображение пользовательских карт Google на вашем сайте, или использование логина Facebook для входа в систему ваших пользователей). В этой статье рассматривается различие между API-интерфейсами браузера и сторонними API и показано типичное использование последних.

    -
    Предпосылки:
    +
    diff --git a/files/ru/learn/javascript/first_steps/a_first_splash/index.html b/files/ru/learn/javascript/first_steps/a_first_splash/index.html index 626562d7791e7c..84aa8bbed18229 100644 --- a/files/ru/learn/javascript/first_steps/a_first_splash/index.html +++ b/files/ru/learn/javascript/first_steps/a_first_splash/index.html @@ -10,7 +10,7 @@

    Теперь, когда вы получили базовое представление о JavaScript — самое время познакомиться с ним на практике! В данной статье представлен ускоренный практический курс, демонстрирующий основные возможности JavaScript. В этом курсе, шаг за шагом, вы создадите простую игру «Угадай число».

    -
    Необходимые условия:
    +
    @@ -599,13 +599,9 @@

    Завершение игры

    Циклы (Loops)

    -
    -
    -
    Одна часть вышеприведённого кода, которую мы должны рассмотреть более подробно, - это цикл for. Циклы - очень важная концепция программирования, которая позволяет вам снова и снова запускать кусок кода, пока не будет выполнено определённое условие.
    +

    Одна часть вышеприведённого кода, которую мы должны рассмотреть более подробно, - это цикл for. Циклы - очень важная концепция программирования, которая позволяет вам снова и снова запускать кусок кода, пока не будет выполнено определённое условие.

    -
    Для начала перейдите в панель инструментов разработчика JavaScript-консоли и введите следующее:
    -
    -
    +

    Для начала перейдите в панель инструментов разработчика JavaScript-консоли и введите следующее:

    for (var i = 1 ; i < 21 ; i++) { console.log(i) }
    diff --git a/files/ru/learn/javascript/first_steps/arrays/index.html b/files/ru/learn/javascript/first_steps/arrays/index.html index 8583fa0b58db91..c7982427127fa1 100644 --- a/files/ru/learn/javascript/first_steps/arrays/index.html +++ b/files/ru/learn/javascript/first_steps/arrays/index.html @@ -19,7 +19,7 @@

    В финальной статье этого раздела, мы познакомимся с массивами — лаконичным способом хранения списка элементов под одним именем. Мы поймём, чем они полезны, затем узнаем, как создать массив, получить, добавить и удалить элементы, хранящиеся в массиве.

    -
    Необходимые навыки:
    +
    diff --git a/files/ru/learn/javascript/first_steps/math/index.html b/files/ru/learn/javascript/first_steps/math/index.html index da57ea33861ad9..313cd1601b0af9 100644 --- a/files/ru/learn/javascript/first_steps/math/index.html +++ b/files/ru/learn/javascript/first_steps/math/index.html @@ -20,7 +20,7 @@

    В этой части курса мы обсуждаем математику в JavaScript — как мы можем использовать {{Glossary("Operator","operators")}} и другие функции, чтобы успешно манипулировать числами для выполнения наших задач.

    -
    Необходимые навыки:
    +
    @@ -292,7 +292,7 @@

    Операторы прис x *= y; // x содержит значение 12
    -

    Примечание: есть ещё другие операторы присваивания, в этой статье перечислены только самые базовые.

    +

    Примечание: есть ещё другие операторы присваивания, в этой статье перечислены только самые базовые.

    Активное обучение: меняем размеры коробки

    diff --git a/files/ru/learn/javascript/first_steps/silly_story_generator/index.html b/files/ru/learn/javascript/first_steps/silly_story_generator/index.html index 29ee851064da2a..50a2895aaa4f24 100644 --- a/files/ru/learn/javascript/first_steps/silly_story_generator/index.html +++ b/files/ru/learn/javascript/first_steps/silly_story_generator/index.html @@ -22,7 +22,7 @@

    В этом испытании вам будет нужно, используя знания, полученные в статьях этого модуля, применить их для создания забавного приложения, создающего случайные глупые истории. Удачно повеселиться!

    -
    Необходимые условия:
    +
    diff --git a/files/ru/learn/javascript/first_steps/strings/index.html b/files/ru/learn/javascript/first_steps/strings/index.html index ef1275b23214e2..85548b56eb4fc3 100644 --- a/files/ru/learn/javascript/first_steps/strings/index.html +++ b/files/ru/learn/javascript/first_steps/strings/index.html @@ -10,7 +10,7 @@

    Теперь мы обратим внимание на строки — в программировании так называют части текста. В этой статье мы рассмотрим все распространённые вещи, которые вы должны действительно знать о строках при изучении JavaScript, например, создание строк, экранирование кавычек в строках и объединение строк вместе.

    -
    Требования:
    +
    diff --git a/files/ru/learn/javascript/first_steps/useful_string_methods/index.html b/files/ru/learn/javascript/first_steps/useful_string_methods/index.html index 2eda162e09164a..159a3ec45e6d83 100644 --- a/files/ru/learn/javascript/first_steps/useful_string_methods/index.html +++ b/files/ru/learn/javascript/first_steps/useful_string_methods/index.html @@ -22,7 +22,7 @@

    Мы рассмотрели базовые понятия, касающиеся строк. Давайте пойдём дальше и рассмотрим, какие полезные операции мы можем выполнять со строками, используя встроенные функции, такие как поиск длины текстовой строки, объединение и разделение строк, замена одного символа из строки другим и многое другое.

    -
    Необходимые навыки:
    +
    @@ -74,9 +74,6 @@

    browserType.indexOf('zilla'); Это даёт нам результат 2, потому что подстрока «zilla» начинается в позиции 2 ("m" — 0, "o" — 1, "z" — 2) внутри «mozilla». Такой код можно использовать для фильтрации строк. Например, если есть список веб-адресов и вы хотите распечатать только те, которые содержат «mozilla». - - -
    1. Это можно сделать по-другому, что, возможно, ещё более эффективно. Введите следующее: 
      browserType.indexOf('vanilla');
      Это должно дать вам результат -1. Такое значение возвращается, когда подстрока, в данном случае «vanilla», не найдена в основной строке.
      diff --git a/files/ru/learn/javascript/first_steps/variables/index.html b/files/ru/learn/javascript/first_steps/variables/index.html index a3c698e7338936..388cef127eb431 100644 --- a/files/ru/learn/javascript/first_steps/variables/index.html +++ b/files/ru/learn/javascript/first_steps/variables/index.html @@ -10,7 +10,7 @@

      После прочтения последних двух статей вы знаете, что такое JavaScript, что он может сделать для вас, как использовать его вместе с другими веб-технологиями и какими он обладает функциями высокого уровня. В этой статье мы перейдём к реальным основам, рассмотрим, как работать с большинством базовых блоков JavaScript — Переменными.

      -

    Необходимые знания:
    +
    @@ -284,7 +284,7 @@

    Правила

    Примеры имён переменных, которые вызовут ошибки:

    -
    var
+
    var
 Document
 
    
 
diff --git a/files/ru/learn/javascript/first_steps/what_is_javascript/index.html b/files/ru/learn/javascript/first_steps/what_is_javascript/index.html
index ef31893f159f04..2d7a71af72b191 100644
--- a/files/ru/learn/javascript/first_steps/what_is_javascript/index.html
+++ b/files/ru/learn/javascript/first_steps/what_is_javascript/index.html
@@ -10,7 +10,7 @@
 
 
    Добро пожаловать на курс MDN JavaScript для начинающих! В первой статье курса мы дадим базовое определение JavaScript, ответим на вопросы «Что такое JavaScript?» и «Что он делает?», узнаем как работает JavaScript и как добавить его на веб-страницу.
    
 
-

    Необходимые навыки:
    +
    diff --git a/files/ru/learn/javascript/first_steps/what_went_wrong/index.html b/files/ru/learn/javascript/first_steps/what_went_wrong/index.html index eb9c984110b94f..26ccc2fcaac046 100644 --- a/files/ru/learn/javascript/first_steps/what_went_wrong/index.html +++ b/files/ru/learn/javascript/first_steps/what_went_wrong/index.html @@ -10,7 +10,7 @@

    Когда вы создали игру «Угадай номер» в предыдущей статье, вы, возможно, обнаружили, что она не работает. Не бойтесь — эта статья призвана избавить вас от разрыва волос над такими проблемами, предоставив вам несколько простых советов о том, как найти и исправить ошибки в программах JavaScript.

    -
    Необходимые навыки:
    +
    diff --git a/files/ru/learn/javascript/objects/adding_bouncing_balls_features/index.html b/files/ru/learn/javascript/objects/adding_bouncing_balls_features/index.html index 301e1bed09819b..4198bc634e5e5e 100644 --- a/files/ru/learn/javascript/objects/adding_bouncing_balls_features/index.html +++ b/files/ru/learn/javascript/objects/adding_bouncing_balls_features/index.html @@ -10,7 +10,7 @@

    В этом упражнении мы будем использовать проект прыгающих шаров из предыдущей статьи и добавим в него новые интересные возможности.

    - +
    diff --git a/files/ru/learn/javascript/objects/basics/index.html b/files/ru/learn/javascript/objects/basics/index.html index 3e896ce8fb1c90..ff32dde49a7134 100644 --- a/files/ru/learn/javascript/objects/basics/index.html +++ b/files/ru/learn/javascript/objects/basics/index.html @@ -13,7 +13,7 @@

    В этой статье мы рассмотрим объекты в JavaScript. Мы будем разбирать основы синтаксиса объектов JavaScript и заново изучим некоторые возможности JavaScript, которые мы уже исследовали ранее на курсе, подтвердив тот факт, что большая часть функциональности, с которой мы уже столкнулись, в действительности является объектами.

    -
    Требования:
    +
    diff --git a/files/ru/learn/javascript/objects/classes_in_javascript/index.html b/files/ru/learn/javascript/objects/classes_in_javascript/index.html index 32608e3f42888c..becbd8fb77fc4a 100644 --- a/files/ru/learn/javascript/objects/classes_in_javascript/index.html +++ b/files/ru/learn/javascript/objects/classes_in_javascript/index.html @@ -8,23 +8,6 @@ translation_of: Learn/JavaScript/Objects/Inheritance original_slug: Learn/JavaScript/Objects/Inheritance --- -

    - -

    - -
    {{LearnSidebar}}
    @@ -32,7 +15,7 @@

    Теперь, когда объясняется большая часть подробностей OOJS, эта статья показывает, как создавать «дочерние» классы объектов (конструкторы), которые наследуют признаки из своих «родительских» классов. Кроме того, мы дадим некоторые советы о том, когда и где вы можете использовать OOJS , и посмотрим, как классы рассматриваются в современном синтаксисе ECMAScript.

    -
    Необходимые знания:
    +
    diff --git a/files/ru/learn/javascript/objects/json/index.html b/files/ru/learn/javascript/objects/json/index.html index c9ba1ada0d7c35..e14c322183c4a0 100644 --- a/files/ru/learn/javascript/objects/json/index.html +++ b/files/ru/learn/javascript/objects/json/index.html @@ -14,7 +14,7 @@

    Обозначение объектов JavaScript (JSON - JavaScript Object Notation) - стандартный текстовый формат для представления структурированных данных на основе синтаксиса объекта JavaScript. Он обычно используется для передачи данных в веб-приложениях (например, отправка некоторых данных с сервера клиенту,таким образом чтобы это могло отображаться на веб-странице или наоборот). Вы будете сталкиваться с этим довольно часто, поэтому в этой статье мы даём вам все, что вам нужно для работы с JSON используя JavaScript, включая парсинг JSON, чтобы вы могли получить доступ к данным внутри него при создании JSON.

    -
    Необходимые знания:
    +
    diff --git a/files/ru/learn/javascript/objects/object_building_practice/index.html b/files/ru/learn/javascript/objects/object_building_practice/index.html index d1d8a757c366e8..015b7c45959c47 100644 --- a/files/ru/learn/javascript/objects/object_building_practice/index.html +++ b/files/ru/learn/javascript/objects/object_building_practice/index.html @@ -13,7 +13,7 @@

    В предыдущих статьях мы рассмотрели всю существенную теорию объектов JavaScript и детали синтаксиса, давая вам прочную основу для начала. В этой статье мы погружаемся в практическое упражнение, давая вам больше практики в создании пользовательских объектов JavaScript, с весёлым и красочным результатом.

    -
    Необходимые знания:
    +
    diff --git a/files/ru/learn/javascript/objects/object_prototypes/index.html b/files/ru/learn/javascript/objects/object_prototypes/index.html index 15084cc49e9ba2..f723803e034041 100644 --- a/files/ru/learn/javascript/objects/object_prototypes/index.html +++ b/files/ru/learn/javascript/objects/object_prototypes/index.html @@ -22,7 +22,7 @@ -
    Необходимые знания:
    +
    diff --git a/files/ru/learn/performance/business_case_for_performance/index.html b/files/ru/learn/performance/business_case_for_performance/index.html index ee461ae6f950ce..a12cda5fd2d5c0 100644 --- a/files/ru/learn/performance/business_case_for_performance/index.html +++ b/files/ru/learn/performance/business_case_for_performance/index.html @@ -11,7 +11,7 @@

    Мы обсудили важность производительности веб-приложений. Вы изучили, что вам нужно для того, чтобы её оптимизировать. Но как убедить ваших клиентов и/или менеджмент в том, что нужно инвестировать в производительность? В этом разделе мы обсудим создание такой аргументации, чтобы ответственные за принятие решений менеджеры согласились на инвестиции.

    -
    Необходимые знания:
    +
    @@ -54,14 +54,6 @@

    Ключевые пока

    Установка уровня конверсии, времени на сайте и/или уровня лояльности клиентов в виде KPI даёт другим департаментам наглядный пример того, зачем нужно тратить усилия на производительность.

    - -
    {{PreviousMenu("Learn/Performance/Mobile", "Learn/Performance")}}

    Смотрите также:

    diff --git a/files/ru/learn/server-side/django/admin_site/index.html b/files/ru/learn/server-side/django/admin_site/index.html index 8ae4c016372ef1..89c6aa94dd2bba 100644 --- a/files/ru/learn/server-side/django/admin_site/index.html +++ b/files/ru/learn/server-side/django/admin_site/index.html @@ -9,7 +9,7 @@

    Теперь, когда модели для сайта местной библиотеки созданы, добавим некоторые "настоящие" данные о книгах, используя административную панель Django Admin. Для начала мы покажем, как зарегистрировать в ней модели, потом как войти и создать какие-нибудь данные. В конце статьи мы покажем некоторые способы дальнейшего улучшения вида админ-панели.

    -

    Необходимо:
    +
    diff --git a/files/ru/learn/server-side/django/authentication/index.html b/files/ru/learn/server-side/django/authentication/index.html index 10eebb941cd1c4..419e5639e8d2da 100644 --- a/files/ru/learn/server-side/django/authentication/index.html +++ b/files/ru/learn/server-side/django/authentication/index.html @@ -24,7 +24,7 @@

    В данном руководстве мы продемонстрируем вам систему входа пользователя на ваш сайт используя его собственный аккаунт. Кроме того, мы покажем как реализовать контроль того, что может видеть и делать пользователь, в зависимости от того, залогинен он, или нет, а также имеет ли он соответствующий уровень прав доступа (permissions). Для того чтобы продемонстрировать все это, мы расширим LocalLibrary, добавив страницы для входа/выхода, а также страницы просмотра/редактирования книг, специфические для пользователя и персонала.

    -
    Предусловия:
    +
    diff --git a/files/ru/learn/server-side/django/deployment/index.html b/files/ru/learn/server-side/django/deployment/index.html index bee57c410eb5d9..4b9d57b2b04900 100644 --- a/files/ru/learn/server-side/django/deployment/index.html +++ b/files/ru/learn/server-side/django/deployment/index.html @@ -15,7 +15,7 @@

    Теперь, когда вы создали (и протестировали) свой шикарный сайт LocalLibrary, у вас скорее всего, есть желание разместить его на публичном веб-сервере, чтобы он стал доступен через интернет персоналу и посетителям библиотеки. Данная статья даёт общее представление о том, каким образом подойти к поиску хостинга для размещения сайта, а также, что нужно сделать чтобы подготовить свой сайт к публикации.

    -
    Требования:
    +
    diff --git a/files/ru/learn/server-side/django/development_environment/index.html b/files/ru/learn/server-side/django/development_environment/index.html index a5eabbea16875b..950643d29b20e7 100644 --- a/files/ru/learn/server-side/django/development_environment/index.html +++ b/files/ru/learn/server-side/django/development_environment/index.html @@ -9,7 +9,7 @@

    Теперь, когда вы знаете, что такое Django, мы покажем вам, как настроить и протестировать среду разработки Django для Windows, Linux (Ubuntu) и Mac OS X - какую бы операционную систему вы не использовали, эта статья должна дать вам все, что необходимо для возможности начать разрабатывать приложения Django.

    -
    Требования:
    +
    diff --git a/files/ru/learn/server-side/django/django_assessment_blog/index.html b/files/ru/learn/server-side/django/django_assessment_blog/index.html index 170a4e38b27eb9..3ef9dd21fce08b 100644 --- a/files/ru/learn/server-side/django/django_assessment_blog/index.html +++ b/files/ru/learn/server-side/django/django_assessment_blog/index.html @@ -18,7 +18,7 @@

    В этом задании вы будете оценивать знания Django, которые вы приобрели в Django Web Framework (Python), чтобы создать очень простой блог.

    -
    Требования:
    +
    diff --git a/files/ru/learn/server-side/django/forms/index.html b/files/ru/learn/server-side/django/forms/index.html index 5bcab63dd161b5..bccde7196b06fe 100644 --- a/files/ru/learn/server-side/django/forms/index.html +++ b/files/ru/learn/server-side/django/forms/index.html @@ -17,7 +17,7 @@

    На этом уроке мы покажем вам процесс работы с HTML-формами в Django. В частности, продемонстрируем самый простой способ построения формы для создания, обновления и удаления экземпляров модели. При этом мы расширим сайт местной библиотеки, чтобы библиотекари могли обновлять книги, создавать, обновлять и удалять авторов, используя наши собственные формы (а не возможности приложения администратора).

    -
    Предпосылки:
    +
    diff --git a/files/ru/learn/server-side/django/generic_views/index.html b/files/ru/learn/server-side/django/generic_views/index.html index b118c37edbcfa2..9b794c8c3744c2 100644 --- a/files/ru/learn/server-side/django/generic_views/index.html +++ b/files/ru/learn/server-side/django/generic_views/index.html @@ -14,7 +14,7 @@

    Данная часть расширяет наш сайт LocalLibrary, добавляя в него списки и страницы, путём предоставления подробной информации о книгах и авторах. В текущей части мы подробно изучим обобщённые базовые классы отображения и покажем как они могут существенно сократить количество кода, который вы должны были бы написать в обычной ситуации. Кроме того, мы более подробно рассмотрим управление и настройки URL-адресов, показывая как выполнить простое сопоставление какой-либо строки паттерну регулярного выражения.

    -
    Необходимые условия:
    +
    diff --git a/files/ru/learn/server-side/django/home_page/index.html b/files/ru/learn/server-side/django/home_page/index.html index 5b65c39713207a..11d85aa67f4fc4 100644 --- a/files/ru/learn/server-side/django/home_page/index.html +++ b/files/ru/learn/server-side/django/home_page/index.html @@ -19,7 +19,7 @@

    Теперь мы готовы создать код нашей первой страницы — домашняя страница сайта LocalLibrary будет показывать количество записей в каждой модели, кроме того, она будет выводить боковую навигационную панель с ссылками на другие страницы сайта. В результате мы приобретём практический навык написания простых URL-преобразований и отображений, получения записей из базы данных и применения шаблонов.

    -
    Требования:
    +
    diff --git a/files/ru/learn/server-side/django/introduction/index.html b/files/ru/learn/server-side/django/introduction/index.html index 1815b09f333922..4f4c88e686f6fc 100644 --- a/files/ru/learn/server-side/django/introduction/index.html +++ b/files/ru/learn/server-side/django/introduction/index.html @@ -17,7 +17,7 @@

    В первой статье о Django мы отвечаем на вопрос «Что такое Django?» и даём обзор того, что делает его особенным. Мы опишем основные функции, в том числе некоторые из расширенных функций, которые у нас не будет времени подробно рассмотреть в этом модуле. Мы также покажем вам некоторые основные строительные блоки приложения Django (хотя на данный момент у вас ещё не будет среды разработки для тестирования).

    -
    Требования:
    +
    diff --git a/files/ru/learn/server-side/django/models/index.html b/files/ru/learn/server-side/django/models/index.html index 5ccbac1be396d1..35996f69d8e4e2 100644 --- a/files/ru/learn/server-side/django/models/index.html +++ b/files/ru/learn/server-side/django/models/index.html @@ -14,7 +14,7 @@

    В этой статье показано, как определить модели для LocalLibrary сайта. Она объясняет, что такое модель, как она объявляется, и некоторые из основных типов полей. В ней также кратко показаны некоторые из основных способов доступа к данным модели.

    -
    Требования:
    +
    diff --git a/files/ru/learn/server-side/django/sessions/index.html b/files/ru/learn/server-side/django/sessions/index.html index 67005d988b3101..fc542177ec6e90 100644 --- a/files/ru/learn/server-side/django/sessions/index.html +++ b/files/ru/learn/server-side/django/sessions/index.html @@ -21,7 +21,7 @@

    Эта часть расширяет наш сайт LocalLibrary, добавляя счётчик посещений домашней страницы, реализованного при помощи сессий. Это относительно простой пример, но он демонстрирует то, как при помощи сессий реализовать анализ поведения анонимных пользователей на сайте.

    -
    Предпосылки
    +
    diff --git a/files/ru/learn/server-side/django/skeleton_website/index.html b/files/ru/learn/server-side/django/skeleton_website/index.html index 21ee6adfeed190..67ee62eb3013fd 100644 --- a/files/ru/learn/server-side/django/skeleton_website/index.html +++ b/files/ru/learn/server-side/django/skeleton_website/index.html @@ -14,7 +14,7 @@

    Это вторая статья из нашего руководства по Django, которая показывает, как можно создать "скелет" сайта, как фундамент, на котором можно строить всё остальное: настройки, ссылки, модели, контроллеры и представления.

    -
    Требования:
    +
    diff --git a/files/ru/learn/server-side/django/testing/index.html b/files/ru/learn/server-side/django/testing/index.html index 0996ef708fe5ec..ca00b91754cf98 100644 --- a/files/ru/learn/server-side/django/testing/index.html +++ b/files/ru/learn/server-side/django/testing/index.html @@ -20,7 +20,7 @@

    Сайты, в процессе развития и разработки, становится все сложнее тестировать вручную. Кроме такого тестирования, сложными становятся внутренние взаимодействия между компонентами - внесение небольшого изменения в одной части приложения влияет на другие. При этом, чтобы все продолжало работать нужно вносить все больше и больше изменений и, желательно так, чтобы не добавлялись новые ошибки. Одним из способов который позволяет смягчить последствия добавления изменений, является внедрение в разработку автоматического тестирования - оно должно просто и надёжно запускаться каждый раз, когда вы вносите изменения в свой код. Данное руководство рассматривает вопросы автоматизации юнит-тестирования вашего сайта при помощи фреймворка Django для тестов.

    -
    Необходимо:
    +
    diff --git a/files/ru/learn/server-side/django/tutorial_local_library_website/index.html b/files/ru/learn/server-side/django/tutorial_local_library_website/index.html index 695e848ab16d4e..78f25db0cd20bc 100644 --- a/files/ru/learn/server-side/django/tutorial_local_library_website/index.html +++ b/files/ru/learn/server-side/django/tutorial_local_library_website/index.html @@ -13,7 +13,7 @@

    Первая статья в нашем цикле объясняет, что вы узнаете, и разбирает пример сайта "местная библиотека", который мы будем разрабатывать и улучшать в последующих статьях.

    -
    Требования:
    +
    diff --git a/files/ru/learn/server-side/django/web_application_security/index.html b/files/ru/learn/server-side/django/web_application_security/index.html index 1deb82395c5469..bb45fdf8ef4566 100644 --- a/files/ru/learn/server-side/django/web_application_security/index.html +++ b/files/ru/learn/server-side/django/web_application_security/index.html @@ -9,7 +9,7 @@

    Защита пользовательских данных - важная часть проектирования любого веб-сайта.Ранее мы рассматривали некоторые наиболее распространённые угрозы безопасности в теме Веб безопасность. В данной статье будет представлена практическая демонстрация того, как встроенные механизмы защиты Django's обрабатывают подобные угрозы.

    -
    Необходимо:
    +
    diff --git a/files/ru/learn/server-side/express_nodejs/development_environment/index.html b/files/ru/learn/server-side/express_nodejs/development_environment/index.html index d20239c907b7d6..179a8272d235b4 100644 --- a/files/ru/learn/server-side/express_nodejs/development_environment/index.html +++ b/files/ru/learn/server-side/express_nodejs/development_environment/index.html @@ -9,7 +9,7 @@

    Теперь, когда вы знаете, что такое Express, мы покажем вам, как настроить и протестировать среду разработки Express для Windows, Linux (Ubuntu) и Mac OS X - какую бы операционную систему вы не использовали, эта статья должна дать вам все, что необходимо для возможности начать разрабатывать приложения Express.

    -
    Требования:
    +
    diff --git a/files/ru/learn/server-side/express_nodejs/displaying_data/author_list_page/index.html b/files/ru/learn/server-side/express_nodejs/displaying_data/author_list_page/index.html index 0f6da75b4be207..ed8cd501547fe9 100644 --- a/files/ru/learn/server-side/express_nodejs/displaying_data/author_list_page/index.html +++ b/files/ru/learn/server-side/express_nodejs/displaying_data/author_list_page/index.html @@ -58,7 +58,7 @@

    Как это

    return this.date_of_birth ? moment(this.date_of_birth).format('YYYY-MM-DD') : '';

    -

    Тест - страница списка жанров!Edit

    +

    Тест - страница списка жанров!

    В этой части требуется создать собственную страницу списка жанров. Страница должна показывать жанры, имеющиеся в БД, а для каждого жанра должна быть создана ссылка на страницу с детальной информацией. Скриншот ожидаемого результата приводится ниже.

    diff --git a/files/ru/learn/server-side/express_nodejs/displaying_data/index.html b/files/ru/learn/server-side/express_nodejs/displaying_data/index.html index 3f8c1c750a2838..70bd190b39c065 100644 --- a/files/ru/learn/server-side/express_nodejs/displaying_data/index.html +++ b/files/ru/learn/server-side/express_nodejs/displaying_data/index.html @@ -9,7 +9,7 @@

    Теперь мы готовы добавить страницы, на которых будут отображаться книги веб-сайта LocalLibrary и другие данные. Страницы будут включать главную страницу, которая показывает сколько записей определённого типа мы имеем и отдельные страницы для детального просмотра записей. Попутно мы приобретём практический опыт в получении записей из баз данных и использовании шаблонов.

    -
    Требования:
    +
    diff --git a/files/ru/learn/server-side/express_nodejs/forms/create_bookinstance_form/index.html b/files/ru/learn/server-side/express_nodejs/forms/create_bookinstance_form/index.html index d9f46a375ebaa2..11974c8c1c46be 100644 --- a/files/ru/learn/server-side/express_nodejs/forms/create_bookinstance_form/index.html +++ b/files/ru/learn/server-side/express_nodejs/forms/create_bookinstance_form/index.html @@ -3,7 +3,7 @@ slug: Learn/Server-side/Express_Nodejs/forms/Create_BookInstance_form translation_of: Learn/Server-side/Express_Nodejs/forms/Create_BookInstance_form --- -

    EdiВ этой статье показано, как определить страницу / форму для создания объектов BookInstance. Это очень похоже на форму, которую мы использовали для создания объектов Book.

    +

    В этой статье показано, как определить страницу / форму для создания объектов BookInstance. Это очень похоже на форму, которую мы использовали для создания объектов Book.

    Импорт методов проверки и очистки

    diff --git a/files/ru/learn/server-side/express_nodejs/forms/index.html b/files/ru/learn/server-side/express_nodejs/forms/index.html index 300d2aa1090945..1456d0963c67c6 100644 --- a/files/ru/learn/server-side/express_nodejs/forms/index.html +++ b/files/ru/learn/server-side/express_nodejs/forms/index.html @@ -13,7 +13,7 @@

    В этой главе мы покажем вам как работать с HTML формами в Express, используя Pug, и в частности как написать формы для создания, обновления и удаления документов из базы данных.

    -
    Предварительные знания:
    +
    diff --git a/files/ru/learn/server-side/express_nodejs/forms/update_book_form/index.html b/files/ru/learn/server-side/express_nodejs/forms/update_book_form/index.html index b4db6faf58db60..418373eb5c49db 100644 --- a/files/ru/learn/server-side/express_nodejs/forms/update_book_form/index.html +++ b/files/ru/learn/server-side/express_nodejs/forms/update_book_form/index.html @@ -3,7 +3,7 @@ slug: Learn/Server-side/Express_Nodejs/forms/Update_Book_form translation_of: Learn/Server-side/Express_Nodejs/forms/Update_Book_form --- -

    EditНаконец, в разделе показано, как определить страницу для обновления объектов Book. Обработка форм при обновлении книги аналогична обработке форм при создании книги, за исключением того, что необходимо заполнить форму в маршруте GET значениями из базы данных.

    +

    Наконец, в разделе показано, как определить страницу для обновления объектов Book. Обработка форм при обновлении книги аналогична обработке форм при создании книги, за исключением того, что необходимо заполнить форму в маршруте GET значениями из базы данных.

    Controller—get route

    diff --git a/files/ru/learn/server-side/express_nodejs/introduction/index.html b/files/ru/learn/server-side/express_nodejs/introduction/index.html index 0cb322333ef952..3f45e5431f428f 100644 --- a/files/ru/learn/server-side/express_nodejs/introduction/index.html +++ b/files/ru/learn/server-side/express_nodejs/introduction/index.html @@ -7,7 +7,7 @@

    В этой первой статье по Express мы ответим на вопросы "Что такое Node?" и "Что такое Express?", и сделаем обзор того, что делает веб-фреймворк Express таким особенным. Мы расскажем об основных функциях и покажем вам некоторые из основных строительных блоков приложения Express (хотя на данный момент у вас ещё нет среды разработки, в которой можно её протестировать).

    -
    Предварительные знания:
    +
    @@ -43,38 +43,31 @@

    Hello Node.js

    1. Откройте терминал (в Windows окно командной строки)
      2. -
    2. Создайте папку, куда вы хотите сохранить программу, к примеру test-node и перейдите в неё с помощью следующей команды:
      3. -
    - -
    cd test-node
    - -
      -
    1. Используя любимый текстовый редактор, создайте файл hello.js и вставьте в него код:
      2. -
    - -
    // Загружаем HTTP модуль
-const http = require("http");
-
-const hostname = "127.0.0.1";
-const port = 8000;
-
-// Создаём HTTP-сервер
-const server = http.createServer((req, res) => {
-
-   // Устанавливаем HTTP-заголовок ответа с HTTP статусом и Content type
-   res.writeHead(200, {'Content-Type': 'text/plain'});
-
-   // Отсылаем тело ответа "Hello World"
-   res.end('Hello World\n');
-});
-
-// Выводим лог как только сервер будет запущен
-server.listen(port, hostname, () => {
-   console.log(`Server running at http://${hostname}:${port}/`);
-})
-
    - -
      +

    1. Создайте папку, куда вы хотите сохранить программу, к примеру test-node и перейдите в неё с помощью следующей команды:

      + 
      cd test-node
      2. +

    2. Используя любимый текстовый редактор, создайте файл hello.js и вставьте в него код:

      + 
      // Загружаем HTTP модуль
+    const http = require("http");
+    
+    const hostname = "127.0.0.1";
+    const port = 8000;
+    
+    // Создаём HTTP-сервер
+    const server = http.createServer((req, res) => {
+    
+       // Устанавливаем HTTP-заголовок ответа с HTTP статусом и Content type
+       res.writeHead(200, {'Content-Type': 'text/plain'});
+    
+       // Отсылаем тело ответа "Hello World"
+       res.end('Hello World\n');
+    });
+    
+    // Выводим лог как только сервер будет запущен
+    server.listen(port, hostname, () => {
+       console.log(`Server running at http://${hostname}:${port}/`);
+    })
+
      +
    3. Сохраните файл в папку, созданную выше.
    4. Вернитесь в терминал и выполните следующую команду:
    diff --git a/files/ru/learn/server-side/express_nodejs/mongoose/index.html b/files/ru/learn/server-side/express_nodejs/mongoose/index.html index 94f2697a2f1431..bfb2a34abbeece 100644 --- a/files/ru/learn/server-side/express_nodejs/mongoose/index.html +++ b/files/ru/learn/server-side/express_nodejs/mongoose/index.html @@ -9,7 +9,7 @@

    В этой статье даётся краткое введение в базы данных, и методика их использования в приложениях Node/Express. Затем мы покажем, как можно использовать Mongoose для доступа к базе данных веб-сайта LocalLibrary. Мы объясним, как объявляются схемы и модели объектов, укажем основные типы полей, и методику базовой валидации. В статье также кратко показаны основные методы доступа к данным модели.

    -
    Предварительные знания:
    +
    diff --git a/files/ru/learn/server-side/express_nodejs/routes/index.html b/files/ru/learn/server-side/express_nodejs/routes/index.html index 400457d1761460..0b4e561b38ad31 100644 --- a/files/ru/learn/server-side/express_nodejs/routes/index.html +++ b/files/ru/learn/server-side/express_nodejs/routes/index.html @@ -9,7 +9,7 @@

    В этом уроке мы настроим маршруты (код обработки URL) с "фиктивными" функциями-обработчиками для всех конечных точек ресурса, которые нам понадобятся на веб-сайте LocalLibrary. По завершении мы получим модульную структуру для нашего кода обработки маршрута, который будет расширен реальными функциями-обработчиками в следующих статьях. У нас также будет хорошее понимание того, как создавать модульные маршруты с помощью Express!

    -
    Предварительные сведения:
    +
    diff --git a/files/ru/learn/server-side/express_nodejs/skeleton_website/index.html b/files/ru/learn/server-side/express_nodejs/skeleton_website/index.html index 06199cbe48f075..6d7139575b7293 100644 --- a/files/ru/learn/server-side/express_nodejs/skeleton_website/index.html +++ b/files/ru/learn/server-side/express_nodejs/skeleton_website/index.html @@ -9,7 +9,7 @@

    Эта вторая статья в нашем учебнике Express показывает, как создать каркас проекта веб-сайта, который позже можно будет заполнить с помощью путей сайта, шаблонов представлений и обращений к базе данных.

    - +
    diff --git a/files/ru/learn/server-side/express_nodejs/tutorial_local_library_website/index.html b/files/ru/learn/server-side/express_nodejs/tutorial_local_library_website/index.html index df8770ee704efa..25771dfef07561 100644 --- a/files/ru/learn/server-side/express_nodejs/tutorial_local_library_website/index.html +++ b/files/ru/learn/server-side/express_nodejs/tutorial_local_library_website/index.html @@ -18,7 +18,7 @@

    Первая статья в нашей серии практических уроков объясняет, что вы будете изучать, и предоставит обзор сайта "локальной библиотеки" ("local library"), над которым мы будем работать и развивать в последующих статьях.

    -
    Необходимые знания:
    +
    diff --git a/files/ru/learn/server-side/first_steps/client-server_overview/index.html b/files/ru/learn/server-side/first_steps/client-server_overview/index.html index 2391df40fe4e63..e26e85f42b5ec0 100644 --- a/files/ru/learn/server-side/first_steps/client-server_overview/index.html +++ b/files/ru/learn/server-side/first_steps/client-server_overview/index.html @@ -22,7 +22,7 @@

    Теперь, когда вы знаете цель и потенциальные преимущества программирования на стороне сервера, мы подробно рассмотрим, что происходит, когда сервер получает «динамический запрос» от браузера. Поскольку большая часть серверного кода веб-сайта обрабатывает запросы и ответы аналогичным образом, это поможет вам понять, что нужно делать при написании большей части собственного кода.

    -
    Необходимые знания:
    +
    diff --git a/files/ru/learn/server-side/first_steps/introduction/index.html b/files/ru/learn/server-side/first_steps/introduction/index.html index 7e5068c844c264..15dde7177f9872 100644 --- a/files/ru/learn/server-side/first_steps/introduction/index.html +++ b/files/ru/learn/server-side/first_steps/introduction/index.html @@ -16,7 +16,7 @@

    Добро пожаловать на курс для начинающих по программированию серверной части сайта! В этой первой статье мы рассмотрим программирование на стороне сервера с высокого уровня, отвечая на такие вопросы, как «что это»?, «как это отличается от программирования на стороне клиента»? и «почему это так полезно»? После прочтения этой статьи вы поймёте дополнительные возможности, доступные веб-сайтам посредством программирования на стороне сервера.

    -
    Перед стартом:
    +
    diff --git a/files/ru/learn/server-side/first_steps/web_frameworks/index.html b/files/ru/learn/server-side/first_steps/web_frameworks/index.html index e61057325b1ccf..542e14f64fbfee 100644 --- a/files/ru/learn/server-side/first_steps/web_frameworks/index.html +++ b/files/ru/learn/server-side/first_steps/web_frameworks/index.html @@ -14,7 +14,7 @@

    В предыдущей статье было показано, как выглядит общение между веб-клиентами и серверами, характер HTTP-запросов и ответов, а также то, что веб-приложение на стороне сервера должно выполнять, чтобы отвечать на запросы из веб-браузера. Благодаря этим знаниям настало время изучить, как веб-интерфейсы могут упростить эти задачи, и дать вам представление о том, как выбрать структуру для своего первого веб-приложения на стороне сервера.

    -
    Перед стартом:
    +
    diff --git a/files/ru/learn/server-side/first_steps/website_security/index.html b/files/ru/learn/server-side/first_steps/website_security/index.html index 66c3046c59fd5b..b3b7c1c8f4ee8f 100644 --- a/files/ru/learn/server-side/first_steps/website_security/index.html +++ b/files/ru/learn/server-side/first_steps/website_security/index.html @@ -10,7 +10,7 @@

    Безопасность сайта требует бдительности во всех аспектах дизайна и использования сайта. Эта вводная статья не сделает из вас гуру безопасности веб-сайта, но она поможет вам понять, откуда приходят угрозы, и что вы можете сделать, чтобы укрепить своё веб-приложение против наиболее распространённых атак.

    -
    Необходимые навыки:
    +
    diff --git a/files/ru/learn/tools_and_testing/client-side_javascript_frameworks/angular_getting_started/index.html b/files/ru/learn/tools_and_testing/client-side_javascript_frameworks/angular_getting_started/index.html index 10b9438740caa0..3f8a6681749e6c 100644 --- a/files/ru/learn/tools_and_testing/client-side_javascript_frameworks/angular_getting_started/index.html +++ b/files/ru/learn/tools_and_testing/client-side_javascript_frameworks/angular_getting_started/index.html @@ -18,7 +18,7 @@

    Пришло время взглянуть на фреймворк от Google — Angular, еще один популярный вариант, с которым вы часто будете сталкиваться. В этой статье мы рассмотрим, что Angular может предложить, установим необходимые компоненты, запустим пример приложения, и разберём базовую архитектуру Angular.

    -
    Условия:
    +
    diff --git a/files/ru/learn/tools_and_testing/client-side_javascript_frameworks/react_getting_started/index.html b/files/ru/learn/tools_and_testing/client-side_javascript_frameworks/react_getting_started/index.html index 54d0023a0f89d3..615ae111a96ce1 100644 --- a/files/ru/learn/tools_and_testing/client-side_javascript_frameworks/react_getting_started/index.html +++ b/files/ru/learn/tools_and_testing/client-side_javascript_frameworks/react_getting_started/index.html @@ -12,7 +12,7 @@

    В этой статье мы скажем привет React. Мы узнаем немного подробностей о его происхождении и сценариях использования, настроим базовый набор инструментов на нашем локальном компьютере, а также создадим и поиграем с простым приложением для начинающих, и в процессе узнаем немного о том, как React работает .

    -
    Необходимые условия:
    +
    diff --git a/files/ru/learn/tools_and_testing/cross_browser_testing/feature_detection/index.html b/files/ru/learn/tools_and_testing/cross_browser_testing/feature_detection/index.html index 0fc29afbcdc05c..a27f6cde336f08 100644 --- a/files/ru/learn/tools_and_testing/cross_browser_testing/feature_detection/index.html +++ b/files/ru/learn/tools_and_testing/cross_browser_testing/feature_detection/index.html @@ -9,7 +9,7 @@

    Обнаружение функций включает определение того, поддерживает ли браузер определённый блок кода, и выполнение другого кода в зависимости от того, поддерживает ли он или нет, так что браузер всегда может обеспечить работу, а не сбой / ошибку в некоторых браузерах. В этой статье подробно описывается, как написать собственное простое обнаружение функций, как использовать библиотеку для ускорения реализации, а также встроенные функции для обнаружения функций, такие как @supports.

    -
    Что нужно знать:
    +
    diff --git a/files/ru/learn/tools_and_testing/cross_browser_testing/html_and_css/index.html b/files/ru/learn/tools_and_testing/cross_browser_testing/html_and_css/index.html index 6f639b97a7a55b..0d2a2f0583bd63 100644 --- a/files/ru/learn/tools_and_testing/cross_browser_testing/html_and_css/index.html +++ b/files/ru/learn/tools_and_testing/cross_browser_testing/html_and_css/index.html @@ -9,7 +9,7 @@

    With the scene set, we'll now look specifically at the common cross-browser problems you will come across in HTML and CSS code, and what tools can be used to prevent problems from happening, or fix problems that occur. This includes linting code, handling CSS prefixes, using browser dev tools to track down problems, using polyfills to add support into browsers, tackling responsive design problems, and more.

    -
    Предусловия:
    +
    @@ -182,8 +182,6 @@
    Hidden example
    margin: 0 auto; } -

    - 
    <form>
       <div>
         <label for="date">Enter a date:</label>
diff --git a/files/ru/learn/tools_and_testing/cross_browser_testing/introduction/index.html b/files/ru/learn/tools_and_testing/cross_browser_testing/introduction/index.html
index 72b444d020be93..bf9e431cb7fa33 100644
--- a/files/ru/learn/tools_and_testing/cross_browser_testing/introduction/index.html
+++ b/files/ru/learn/tools_and_testing/cross_browser_testing/introduction/index.html
@@ -11,7 +11,7 @@
 
 
    Эта статья начинает модуль с обзора темы кросс-браузерного тестирования, отвечая на такие вопросы как "что такое кросс-браузерное тестирование?", "с какими распространёнными проблемами можно столкнуться?" и "какие основные подходы для тестирования, обнаружения и исправления проблем существуют?"
    
 
-
    Пререквизиты:
    +
    From d8e0909d768ab6db68d04238a4c56700abf1e668 Mon Sep 17 00:00:00 2001 From: julieng Date: Thu, 15 Sep 2022 17:48:15 +0200 Subject: [PATCH 3/6] Fix dls and some table elements --- .../common_questions/what_is_a_url/index.html | 7 +-- .../styling_a_biography_page/index.html | 4 +- .../author_fast-loading_html_pages/index.html | 61 +++++++------------ .../html/howto/use_data_attributes/index.html | 58 ------------------ .../advanced_text_formatting/index.html | 4 +- .../django/introduction/index.html | 10 +-- .../express_nodejs/routes/index.html | 10 +-- 7 files changed, 34 insertions(+), 120 deletions(-) diff --git a/files/ru/learn/common_questions/what_is_a_url/index.html b/files/ru/learn/common_questions/what_is_a_url/index.html index 7fef62f150108b..4c5e0db632af93 100644 --- a/files/ru/learn/common_questions/what_is_a_url/index.html +++ b/files/ru/learn/common_questions/what_is_a_url/index.html @@ -130,11 +130,8 @@

    Примеры относ
    Дочерние ресурсы
    -
    - 
    Skills/Infrastructure/Understanding_URLs
-
    -
    -
    Поскольку URL не начинается с /, браузер сделает попытку найти документ в поддиректории относительно текущего документа. В данном примере будет запрошен этот URL: https://developer.mozilla.org/ru/docs/Learn/Skills/Infrastructure/Understanding_URLs
    + 
    Skills/Infrastructure/Understanding_URLs
    +

    Поскольку URL не начинается с /, браузер сделает попытку найти документ в поддиректории относительно текущего документа. В данном примере будет запрошен этот URL: https://developer.mozilla.org/ru/docs/Learn/Skills/Infrastructure/Understanding_URLs

    Назад по дереву папок
    ../CSS/display
    diff --git a/files/ru/learn/css/first_steps/styling_a_biography_page/index.html b/files/ru/learn/css/first_steps/styling_a_biography_page/index.html index f1e5cbd8ece166..6483b6c21eb3fb 100644 --- a/files/ru/learn/css/first_steps/styling_a_biography_page/index.html +++ b/files/ru/learn/css/first_steps/styling_a_biography_page/index.html @@ -13,9 +13,7 @@ ---

    {{LearnSidebar}}{{PreviousMenu("Learn/CSS/First_steps/How_CSS_works", "Learn/CSS/First_steps")}}

    -
    -
    С учётом того что вы узнали за последние несколько уроков, вы должны обнаружить, что вы можете форматировать простые текстовые документы с использованием CSS, чтобы добавить к ним свой собственный стиль. Эта статья даёт вам возможность сделать это.
    -
    +

    С учётом того что вы узнали за последние несколько уроков, вы должны обнаружить, что вы можете форматировать простые текстовые документы с использованием CSS, чтобы добавить к ним свой собственный стиль. Эта статья даёт вам возможность сделать это.

    Необходимые условия:
    diff --git a/files/ru/learn/html/howto/author_fast-loading_html_pages/index.html b/files/ru/learn/html/howto/author_fast-loading_html_pages/index.html index 0479977efc2bfc..559f280e585b57 100644 --- a/files/ru/learn/html/howto/author_fast-loading_html_pages/index.html +++ b/files/ru/learn/html/howto/author_fast-loading_html_pages/index.html @@ -144,44 +144,29 @@

    Пример структуры страницы

    · HTML

    -
    -
    · HEAD
    -
    - -
    -
    -
    -
    · LINK ...
    - CSS файлы необходимы для отображения веб-страницы. Минимизируйте количество файлов для производительности, сохраняя несвязанные CSS в отдельных файлах для обслуживания.
    -
    -
    -
    - -
    -
    -
    -
    · SCRIPT ...
    - Файлы JavaScript для функций, необходимых при загрузке страницы, но не для любого DHTML, который может работать только после загрузки страницы
    -
    Минимизируйте количество файлов для повышения производительности, сохраняя несвязанный JavaScript в отдельных файлах для обслуживания.
    -
    -
    -
    - -
    -
    · BODY
    -
    · Видимое пользователем содержимое страницы небольшими порциями (tables / divs) что можно отобразить, не дожидаясь загрузки полной страницы.
    -
    - -
    -
    -
    -
    · SCRIPT ...
    - Любые сценарии, которые будут использоваться для выполнения DHTML. Сценарий DHTML обычно может запускаться только после полной загрузки страницы и инициализации всех необходимых объектов. Нет необходимости загружать эти скрипты перед содержимым страницы. Это только замедляет первоначальный вид загрузки страницы.
    -
    Минимизируйте количество файлов для повышения производительности, сохраняя несвязанный JavaScript в отдельных файлах для обслуживания
    -
    Если какие-либо изображения используются для эффектов ролловера, вам следует предварительно загрузить их здесь после загрузки содержимого страницы.
    -
    -
    -
    +
      +
    • · HEAD
      • +
      • +
      • +

        · LINK ...

        +

        CSS файлы необходимы для отображения веб-страницы. Минимизируйте количество файлов для производительности, сохраняя несвязанные CSS в отдельных файлах для обслуживания.

        +
        • +
      • +
      • +
      • +

        · SCRIPT ...

        +

        Файлы JavaScript для функций, необходимых при загрузке страницы, но не для любого DHTML, который может работать только после загрузки страницы

        +

        Минимизируйте количество файлов для повышения производительности, сохраняя несвязанный JavaScript в отдельных файлах для обслуживания.

        +
        • +
      • +
    • · BODY
      • +
    • · Видимое пользователем содержимое страницы небольшими порциями (tables / divs) что можно отобразить, не дожидаясь загрузки полной страницы.
      • +
      • +

      • · SCRIPT ...

        +

        Любые сценарии, которые будут использоваться для выполнения DHTML. Сценарий DHTML обычно может запускаться только после полной загрузки страницы и инициализации всех необходимых объектов. Нет необходимости загружать эти скрипты перед содержимым страницы. Это только замедляет первоначальный вид загрузки страницы.

        +

        Минимизируйте количество файлов для повышения производительности, сохраняя несвязанный JavaScript в отдельных файлах для обслуживания

        +

        Если какие-либо изображения используются для эффектов ролловера, вам следует предварительно загрузить их здесь после загрузки содержимого страницы.

        +

    diff --git a/files/ru/learn/html/howto/use_data_attributes/index.html b/files/ru/learn/html/howto/use_data_attributes/index.html index 4377175f411664..7c49542770b1a1 100644 --- a/files/ru/learn/html/howto/use_data_attributes/index.html +++ b/files/ru/learn/html/howto/use_data_attributes/index.html @@ -64,64 +64,6 @@

    Проблемы

    Тем не менее, для пользовательских метаданных, связанных с элементами, data-атрибуты являются отличным решением.

    -

    Поддержка в браузерах

    - -
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    caniuse
    -

    IE

    -     		-

    Edge

    -     		-

    Firefox

    -     		-

    Chrome

    -     		-

    Safari

    -     		-

    Opera

    -     		-

    iOS Safari

    -     		-

    Opera Mini*

    -     		-

    Android Browser

    -     		-

    Chrome for Android

    -
    11+14+52+49+10.1+46+9.3+all4.4+59+
    - -

    - -

    Тем не менее, для содержимого, которое не надо показывать это является отличным решением.

    -

    Смотрите также

      diff --git a/files/ru/learn/html/introduction_to_html/advanced_text_formatting/index.html b/files/ru/learn/html/introduction_to_html/advanced_text_formatting/index.html index 1a243f68b5e7e7..6c804fa44ec289 100644 --- a/files/ru/learn/html/introduction_to_html/advanced_text_formatting/index.html +++ b/files/ru/learn/html/introduction_to_html/advanced_text_formatting/index.html @@ -73,8 +73,8 @@

      Списки описания

      Ремарка
      -
      В драме: речь персонажа, при которой делается замечание с юмористическим или драматическим эффектом; чаще всего это чувства, мысли или предпосылки к чему-либо.
      -
      В письменности: отметка, примечание (устар.).
      +

      В драме: речь персонажа, при которой делается замечание с юмористическим или драматическим эффектом; чаще всего это чувства, мысли или предпосылки к чему-либо.

      +

      В письменности: отметка, примечание (устар.).

      Активное обучение: разметка набора определений

      diff --git a/files/ru/learn/server-side/django/introduction/index.html b/files/ru/learn/server-side/django/introduction/index.html index 4f4c88e686f6fc..ba53070b2f7c42 100644 --- a/files/ru/learn/server-side/django/introduction/index.html +++ b/files/ru/learn/server-side/django/introduction/index.html @@ -40,12 +40,12 @@

      Что такое Django?

      Полным
      Django следует философии «Всё включено» и предоставляет почти всё, что разработчики могут захотеть сделать «из коробки». Поскольку всё, что вам нужно, является частью единого «продукта», всё это безупречно работает вместе, соответствует последовательным принципам проектирования и имеет обширную и актуальную документацию.
      Разносторонним
      -
      Django может быть (и был) использован для создания практически любого типа веб-сайтов — от систем управления контентом и wiki до социальных сетей и новостных сайтов. Он может работать с любой клиентской средой и может доставлять контент практически в любом формате (включая HTML, RSS-каналы, JSON, XML и т. д.). Сайт, который вы сейчас читаете, создан с помощью Django!
      -
      Хотя Django предоставляет решения практически для любой функциональности, которая вам может понадобиться (например, для нескольких популярных баз данных, шаблонизаторов и т. д.), внутренне он также может быть расширен сторонними компонентами, если это необходимо.
      +

      Django может быть (и был) использован для создания практически любого типа веб-сайтов — от систем управления контентом и wiki до социальных сетей и новостных сайтов. Он может работать с любой клиентской средой и может доставлять контент практически в любом формате (включая HTML, RSS-каналы, JSON, XML и т. д.). Сайт, который вы сейчас читаете, создан с помощью Django!

      +

      Хотя Django предоставляет решения практически для любой функциональности, которая вам может понадобиться (например, для нескольких популярных баз данных, шаблонизаторов и т. д.), внутренне он также может быть расширен сторонними компонентами, если это необходимо.

      Безопасным
      -
      Django помогает разработчикам избежать многих распространённых ошибок безопасности, предоставляя фреймворк, разработанный чтобы «делать правильные вещи» для автоматической защиты сайта. Например, Django предоставляет безопасный способ управления учётными записями пользователей и паролями, избегая распространённых ошибок, таких как размещение информации о сеансе в файлы cookie, где она уязвима (вместо этого файлы cookie содержат только ключ, а фактические данные хранятся в базе данных) или непосредственное хранение паролей вместо хэша пароля.
      -
      Хэш пароля — это значение фиксированной длины, созданное путём обработки пароля через криптографическую хэш-функцию. Django может проверить правильность введённого пароля, пропустив его через хэш-функцию и сравнив вывод с сохранённым значением хэша. Благодаря «одностороннему» характеру функции, даже если сохранённое хэш-значение скомпрометировано, злоумышленнику будет сложно определить исходный пароль.
      -
      Django, по умолчанию, обеспечивает защиту от многих уязвимостей, включая SQL-инъекцию, межсайтовый скриптинг, подделку межсайтовых запросов и кликджекинг (см. Website security для получения дополнительной информации об этих атаках).
      +

      Django помогает разработчикам избежать многих распространённых ошибок безопасности, предоставляя фреймворк, разработанный чтобы «делать правильные вещи» для автоматической защиты сайта. Например, Django предоставляет безопасный способ управления учётными записями пользователей и паролями, избегая распространённых ошибок, таких как размещение информации о сеансе в файлы cookie, где она уязвима (вместо этого файлы cookie содержат только ключ, а фактические данные хранятся в базе данных) или непосредственное хранение паролей вместо хэша пароля.

      +

      Хэш пароля — это значение фиксированной длины, созданное путём обработки пароля через криптографическую хэш-функцию. Django может проверить правильность введённого пароля, пропустив его через хэш-функцию и сравнив вывод с сохранённым значением хэша. Благодаря «одностороннему» характеру функции, даже если сохранённое хэш-значение скомпрометировано, злоумышленнику будет сложно определить исходный пароль.

      +

      Django, по умолчанию, обеспечивает защиту от многих уязвимостей, включая SQL-инъекцию, межсайтовый скриптинг, подделку межсайтовых запросов и кликджекинг (см. Website security для получения дополнительной информации об этих атаках).

      Масштабируемым
      Django использует компонентную “shared-nothing” архитектуру (каждая её часть независима от других и, следовательно, может быть заменена или изменена, если это необходимо). Чёткое разделение частей означает, что Django может масштабироваться при увеличении трафика, путём добавления оборудования на любом уровне: серверы кеширования, серверы баз данных или серверы приложений. Одни из самых загруженных сайтов успешно масштабировали Django (например, Instagram и Disqus, если назвать только два из них).
      Удобным в сопровождении
      diff --git a/files/ru/learn/server-side/express_nodejs/routes/index.html b/files/ru/learn/server-side/express_nodejs/routes/index.html index 0b4e561b38ad31..d92b4ccba9393f 100644 --- a/files/ru/learn/server-side/express_nodejs/routes/index.html +++ b/files/ru/learn/server-side/express_nodejs/routes/index.html @@ -12,15 +12,7 @@ - + From fbf31896e9113dcadea34e40cffa512636042993 Mon Sep 17 00:00:00 2001 From: Sasha Sushko Date: Thu, 29 Sep 2022 10:01:18 +0500 Subject: [PATCH 4/6] Update files/ru/learn/html/howto/author_fast-loading_html_pages/index.html --- .../author_fast-loading_html_pages/index.html | 49 +++++++++++-------- 1 file changed, 29 insertions(+), 20 deletions(-) diff --git a/files/ru/learn/html/howto/author_fast-loading_html_pages/index.html b/files/ru/learn/html/howto/author_fast-loading_html_pages/index.html index 559f280e585b57..e4a29052f074e2 100644 --- a/files/ru/learn/html/howto/author_fast-loading_html_pages/index.html +++ b/files/ru/learn/html/howto/author_fast-loading_html_pages/index.html @@ -145,28 +145,37 @@

      Пример структуры страницы

      · HTML

        -
      • · HEAD
        • -
        • -
        • -

          · LINK ...

          -

          CSS файлы необходимы для отображения веб-страницы. Минимизируйте количество файлов для производительности, сохраняя несвязанные CSS в отдельных файлах для обслуживания.

          +
        • HEAD
          • +
        • +
            +
          • +

            LINK ...

            +

            CSS файлы необходимы для отображения веб-страницы. Минимизируйте количество файлов для производительности, сохраняя несвязанные CSS в отдельных файлах для обслуживания.

            +
            • +
          • -
        • -
        • -
        • -

          · SCRIPT ...

          -

          Файлы JavaScript для функций, необходимых при загрузке страницы, но не для любого DHTML, который может работать только после загрузки страницы

          -

          Минимизируйте количество файлов для повышения производительности, сохраняя несвязанный JavaScript в отдельных файлах для обслуживания.

          +
        • +
            +
          • +

            SCRIPT ...

            +

            Файлы JavaScript для функций, необходимых при загрузке страницы, но не для любого DHTML, который может работать только после загрузки страницы

            +

            Минимизируйте количество файлов для повышения производительности, сохраняя несвязанный JavaScript в отдельных файлах для обслуживания.

            +
            • +
          • -
        • -
      • · BODY
        • -
      • · Видимое пользователем содержимое страницы небольшими порциями (tables / divs) что можно отобразить, не дожидаясь загрузки полной страницы.
        • -
        • -

        • · SCRIPT ...

          -

          Любые сценарии, которые будут использоваться для выполнения DHTML. Сценарий DHTML обычно может запускаться только после полной загрузки страницы и инициализации всех необходимых объектов. Нет необходимости загружать эти скрипты перед содержимым страницы. Это только замедляет первоначальный вид загрузки страницы.

          -

          Минимизируйте количество файлов для повышения производительности, сохраняя несвязанный JavaScript в отдельных файлах для обслуживания

          -

          Если какие-либо изображения используются для эффектов ролловера, вам следует предварительно загрузить их здесь после загрузки содержимого страницы.

          -
      +
    • BODY
      • +
    • Видимое пользователем содержимое страницы небольшими порциями (tables / divs) что можно отобразить, не дожидаясь загрузки полной страницы.
      • +
    • +
        +
      • +

        SCRIPT ...

        +

        Любые сценарии, которые будут использоваться для выполнения DHTML. Сценарий DHTML обычно может запускаться только после полной загрузки страницы и инициализации всех необходимых объектов. Нет необходимости загружать эти скрипты перед содержимым страницы. Это только замедляет первоначальный вид загрузки страницы.

        +

        Минимизируйте количество файлов для повышения производительности, сохраняя несвязанный JavaScript в отдельных файлах для обслуживания

        +

        Если какие-либо изображения используются для эффектов ролловера, вам следует предварительно загрузить их здесь после загрузки содержимого страницы.

        +
        • +
      +
      • +

      From ac86274633ab3e1408b9e1cc5489e84d1c9ca9e1 Mon Sep 17 00:00:00 2001 From: Sasha Sushko Date: Thu, 29 Sep 2022 10:01:25 +0500 Subject: [PATCH 5/6] Update files/ru/learn/html/howto/index.html --- files/ru/learn/html/howto/index.html | 1 - 1 file changed, 1 deletion(-) diff --git a/files/ru/learn/html/howto/index.html b/files/ru/learn/html/howto/index.html index 9e3a271462775a..026a4b71b5dbb5 100644 --- a/files/ru/learn/html/howto/index.html +++ b/files/ru/learn/html/howto/index.html @@ -151,4 +151,3 @@

      Производительност -

      From d1a51f59dabbf5bbc7fa524329453d361df08887 Mon Sep 17 00:00:00 2001 From: Sasha Sushko Date: Thu, 29 Sep 2022 10:01:32 +0500 Subject: [PATCH 6/6] Update files/ru/learn/javascript/client-side_web_apis/index.html --- files/ru/learn/javascript/client-side_web_apis/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/ru/learn/javascript/client-side_web_apis/index.html b/files/ru/learn/javascript/client-side_web_apis/index.html index 239272567b26f3..40d6bc0c02822f 100644 --- a/files/ru/learn/javascript/client-side_web_apis/index.html +++ b/files/ru/learn/javascript/client-side_web_apis/index.html @@ -39,7 +39,7 @@

      Руководства

      Введение в различные web API
      Прежде всего, мы начнём изучение API с основ - что это такое, как это работает, как вы используете их в своём коде и как они структурированы? Мы также рассмотрим, что представляют собой различные основные классы API, и как их можно использовать.
      Управление документами
      -
      При написании веб-страниц и приложений вы чаще всего будете управлять каким-либо образом веб-документами. Обычно это делается с помощью Document Object Model (DOM), набора API-интерфейсов для управления HTML-разметкой и стилями, которые используют объект {{domxref ("Document")}}. В этой статье мы рассмотрим, как использовать DOM, а также некоторые интересные API, которые могут изменить рабочую среду интересными способами.
      +
      При написании веб-страниц и приложений вы чаще всего будете управлять каким-либо образом веб-документами. Обычно это делается с помощью Document Object Model (DOM), набора API-интерфейсов для управления HTML-разметкой и стилями, которые используют объект {{domxref ("Document")}}. В этой статье мы рассмотрим, как использовать DOM, а также некоторые интересные API, которые могут изменить рабочую среду интересными способами.
      Получение данных с сервера
      Другой очень распространённой задачей в современных веб-сайтах и приложениях является получение отдельных элементов данных с сервера для обновления разделов веб-страницы без необходимости загрузки абсолютно новой страницы. Эта, казалось бы, небольшая деталь оказала огромное влияние на производительность и поведение сайтов, поэтому в этой статье мы объясним концепцию и рассмотрим технологии, которые позволяют это, например {{domxref("XMLHttpRequest")}} и Fetch API.
      Сторонние API

      - - - - - - -
      Предварительные знания:
      -       		Предварительные знания: Прочесть введение в Express/Node . Завершить предыдущие уроки (включая Express Tutorial Part 3: Using a Database (with Mongoose)).