From 85c36d462d9d5baf5296be994675f4b1189bff3e Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Wed, 14 Jul 2021 01:23:40 -0400 Subject: fix various fixable flaws in Learn tree (ru) (#1429) * fix various fixable flaws in Learn tree (ru) * Update index.html * Update index.html * removed error-chrome-win7.png * error-opera-macos.png Co-authored-by: Maxim Postautov <54762420+mpstv@users.noreply.github.com> --- .../what_is_a_web_server/index.html | 20 +++--- .../fundamental_css_comprehension/index.html | 26 ++++---- .../learn/css/building_blocks/selectors/index.html | 60 +++++++++--------- .../css/building_blocks/styling_tables/index.html | 34 +++++------ .../css/styling_text/styling_links/index.html | 30 ++++----- .../css/styling_text/styling_lists/index.html | 18 +++--- .../styling_text/typesetting_a_homepage/index.html | 6 +- .../basic_native_form_controls/all-buttons.png | Bin 0 -> 10974 bytes .../basic_native_form_controls/all-checkbox.png | Bin 0 -> 5722 bytes .../basic_native_form_controls/all-datalist.png | Bin 0 -> 11460 bytes .../all-multi-lines-select.png | Bin 0 -> 29071 bytes .../all-multi-lines-text-field.png | Bin 0 -> 14295 bytes .../forms/basic_native_form_controls/all-radio.png | Bin 0 -> 6173 bytes .../all-search-field.png | Bin 0 -> 10796 bytes .../basic_native_form_controls/all-select.png | Bin 0 -> 29525 bytes .../all-single-line-text-field.png | Bin 0 -> 9586 bytes .../datalist-firefox-macos.png | Bin 0 -> 4135 bytes .../basic_native_form_controls/datalist-safari.png | Bin 0 -> 3159 bytes .../basic_native_form_controls/email-invalid.png | Bin 0 -> 5862 bytes .../forms/basic_native_form_controls/index.html | 68 ++++++++++----------- .../sending_and_retrieving_form_data/index.html | 40 ++++++------ .../css_basics/index.html | 38 ++++++------ .../javascript_basics/index.html | 28 ++++----- .../images_in_html/index.html | 20 +++--- files/ru/learn/html/tables/basics/index.html | 24 ++++---- .../javascript/first_steps/strings/index.html | 4 +- 26 files changed, 208 insertions(+), 208 deletions(-) create mode 100644 files/ru/learn/forms/basic_native_form_controls/all-buttons.png create mode 100644 files/ru/learn/forms/basic_native_form_controls/all-checkbox.png create mode 100644 files/ru/learn/forms/basic_native_form_controls/all-datalist.png create mode 100644 files/ru/learn/forms/basic_native_form_controls/all-multi-lines-select.png create mode 100644 files/ru/learn/forms/basic_native_form_controls/all-multi-lines-text-field.png create mode 100644 files/ru/learn/forms/basic_native_form_controls/all-radio.png create mode 100644 files/ru/learn/forms/basic_native_form_controls/all-search-field.png create mode 100644 files/ru/learn/forms/basic_native_form_controls/all-select.png create mode 100644 files/ru/learn/forms/basic_native_form_controls/all-single-line-text-field.png create mode 100644 files/ru/learn/forms/basic_native_form_controls/datalist-firefox-macos.png create mode 100644 files/ru/learn/forms/basic_native_form_controls/datalist-safari.png create mode 100644 files/ru/learn/forms/basic_native_form_controls/email-invalid.png (limited to 'files/ru') 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 aedb2fffec..1ae3ee4805 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 @@ -18,7 +18,7 @@ original_slug: Learn/Что_такое_веб_сервер Необходимые
знания: - Вы должны уже знать, как работает Интернет и понимать разницу между страницей, сайтом, сервером и поисковой системой. + Вы должны уже знать, как работает Интернет и понимать разницу между страницей, сайтом, сервером и поисковой системой. Цель: @@ -40,7 +40,7 @@ original_slug: Learn/Что_такое_веб_сервер

На самом базовом уровне, когда браузеру нужен файл, размещённый на веб-сервере, браузер запрашивает его через HTTP-протокол. Когда запрос достигает нужного веб-сервера ("железо"), сервер HTTP (ПО) принимает запрос, находит запрашиваемый документ (если нет, то сообщает об ошибке 404) и отправляет обратно, также через HTTP.

-

Basic representation of a client/server connection through HTTP

+

Basic representation of a client/server connection through HTTP

Чтобы опубликовать веб-сайт, необходим либо статический, либо динамический веб-сервер.

@@ -52,7 +52,7 @@ original_slug: Learn/Что_такое_веб_сервер

Активное изучение

-

Активное изучение пока не доступно. Пожалуйста, рассмотрите возможность внести свой вклад.

+

Активное изучение пока не доступно. Пожалуйста, рассмотрите возможность внести свой вклад.

Погружаемся глубже

@@ -71,9 +71,9 @@ original_slug: Learn/Что_такое_веб_сервер
  • обслуживается третьей, сторонней компанией
    • -

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

    +

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

    -

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

    +

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

    Связь по HTTP

    @@ -96,7 +96,7 @@ original_slug: Learn/Что_такое_веб_сервер
  • Веб-сервер  должен ответить на каждый HTTP-запрос, по крайней мере сообщением об ошибке.
    • -

    The MDN 404 page as an example of such error pageНа веб-сервере HTTP-сервер отвечает за обработку входящих запросов и ответ на них.

    +

    The MDN 404 page as an example of such error pageНа веб-сервере HTTP-сервер отвечает за обработку входящих запросов и ответ на них.

    1. При получении запроса, HTTP-сервер сначала проверяет, существует ли ресурс по данному URL.
      2. @@ -110,7 +110,7 @@ original_slug: Learn/Что_такое_веб_сервер

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

      -

      Возьмём для примера страницу, которую вы сейчас читаете. На веб-сервере, где она хостится, есть сервер приложения, который извлекает содержимое статьи из базы данных, форматирует его, добавляет в HTML-шаблоны и отправляет вам результат. В нашем случае, сервер приложения называется Kuma, написан он на языке программирования Python (используя фреймворк Django). Команда Mozilla создала Kuma для конкретных нужд MDN, но есть множество подобных приложений, построенных совершенно на других технологиях.

      +

      Возьмём для примера страницу, которую вы сейчас читаете. На веб-сервере, где она хостится, есть сервер приложения, который извлекает содержимое статьи из базы данных, форматирует его, добавляет в HTML-шаблоны и отправляет вам результат. В нашем случае, сервер приложения называется Kuma, написан он на языке программирования Python (используя фреймворк Django). Команда Mozilla создала Kuma для конкретных нужд MDN, но есть множество подобных приложений, построенных совершенно на других технологиях.

      Существует так много серверов приложений, что довольно трудно предложить какой-то один. Некоторые серверы приложений заточены под определённые категории веб-сайтов, такие как блоги, вики-страницы или интернет-магазины; другие, называемые {{Glossary("CMS", "CMSs")}} (системы управления контентом), более универсальны. Если вы создаёте динамический сайт, потратьте немного времени на выбор инструмента, который соответствует вашим потребностям. Если вы не хотите изучать веб-программирование (хотя это увлекательно само по себе!), то вам не нужно создавать свой собственный сервер приложения. Это будет изобретением очередного велосипеда.

      @@ -119,9 +119,9 @@ original_slug: Learn/Что_такое_веб_сервер

      Теперь, когда вы познакомились с веб-серверами, вы можете:

      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 eb4a2d4b0f..286708f392 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 @@ -33,7 +33,7 @@ original_slug: Learn/CSS/Introduction_to_CSS/Ponimanie_osnov_CSS
      -

      Примечание: Вместо этого вы можете использовать для проверки такие сайты как  JSBin или Thimble. Вы можете скопировать HTML и заполнить CSS в одном из этих онлайн редакторов и использовать этот URL чтобы указать элементу <img> файл изображения. Если используемый онлайн-редактор не имеет отдельной панели для CSS, вы можете поместить его в элемент <style> в заголовке документа.

      +

      Примечание: Вместо этого вы можете использовать для проверки такие сайты как  JSBin или Thimble. Вы можете скопировать HTML и заполнить CSS в одном из этих онлайн редакторов и использовать этот URL чтобы указать элементу <img> файл изображения. Если используемый онлайн-редактор не имеет отдельной панели для CSS, вы можете поместить его в элемент <style> в заголовке документа.

      Краткое описание проекта

      @@ -97,7 +97,7 @@ original_slug: Learn/CSS/Introduction_to_CSS/Ponimanie_osnov_CSS

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

      -

      A view of the finished business card, show a reader header and footer, and a darker center panel containing the main details and image.

      +

      A view of the finished business card, show a reader header and footer, and a darker center panel containing the main details and image.

      Проверка

      @@ -108,17 +108,17 @@ original_slug: Learn/CSS/Introduction_to_CSS/Ponimanie_osnov_CSS

      В этом модуле

      diff --git a/files/ru/learn/css/building_blocks/selectors/index.html b/files/ru/learn/css/building_blocks/selectors/index.html index 242a0859fa..090f134d91 100644 --- a/files/ru/learn/css/building_blocks/selectors/index.html +++ b/files/ru/learn/css/building_blocks/selectors/index.html @@ -24,7 +24,7 @@ original_slug: Learn/CSS/Building_blocks/Селекторы Необходимые знания: - Базовая компьютерная грамотность, основное программное обеспечение, понимание работы с файлами, базовые знания HTML (смотрите Введение в HTML), и представление о том, как работает CSS (смотрите Введение в CSS). + Базовая компьютерная грамотность, основное программное обеспечение, понимание работы с файлами, базовые знания HTML (смотрите Введение в HTML), и представление о том, как работает CSS (смотрите Введение в CSS). Цель: @@ -37,7 +37,7 @@ original_slug: Learn/CSS/Building_blocks/Селекторы

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

      -

      Some code with the h1 highlighted.

      +

      Some code with the h1 highlighted.

      Ранее вы встречали несколько разных селекторов и узнали, что существуют селекторы, которые по-разному относятся к документу, — например используя элемент h1 или класс .special.

      @@ -47,26 +47,26 @@ original_slug: Learn/CSS/Building_blocks/Селекторы

      Несколько селекторов, использующих одни и те же таблицы стилей, можно объединить в лист селекторов: правило будет добавлено к каждому селектору. К примеру, у меня есть одинаковые правила для заголовка h1 и класса .special; я могу написать их так:

      -
      h1 {
+
      h1 {
   color: blue;
 }
 
 .special {
   color: blue;
-} 
      
+}

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

      -
      h1, .special {
+
      h1, .special {
   color: blue;
-} 
      
+}

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

      -
      h1,
+
      h1,
 .special {
   color: blue;
-} 
      
+}

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

      @@ -76,19 +76,19 @@ original_slug: Learn/CSS/Building_blocks/Селекторы

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

      -
      h1 {
+
      h1 {
   color: blue;
 }
 
 ..special {
   color: blue;
-} 
      
+}

      Но если мы объединим селекторы, правило не применится ни к h1, ни к классу: оно считается недействительным.

      -
      h1, ..special {
+
      h1, ..special {
   color: blue;
-} 
      
+}

      Типы селекторов

      @@ -136,7 +136,7 @@ original_slug: Learn/CSS/Building_blocks/Селекторы

      Продолжение

      -

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

      +

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

      {{PreviousMenuNext("Learn/CSS/Building_blocks/Cascade_and_inheritance", "Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks")}}

      @@ -156,57 +156,57 @@ original_slug: Learn/CSS/Building_blocks/Селекторы Селектор по типу h1 {  } - Селектор по типу + Селектор по типу Универсальный селектор * {  } - Универсальный селектор + Универсальный селектор Селектор класса .box {  } - Селекторы классов + Селекторы классов Селектор ID #unique { } - Селекторы по ID + Селекторы по ID Селектор атрибутов a[title] {  } - Селекторы атрибутов + Селекторы атрибутов - Селектор псевдоклассов + Селектор псевдоклассов p:first-child { } - Псевдоклассы + Псевдоклассы Селектор псевдоэлементов p::first-line { } - Псевдоэлементы + Псевдоэлементы Селектор потомков article p - Селектор потомков + Селектор потомков Селектор дочерних элементов article > p - Селектор дочерних элементов + Селектор дочерних элементов Смежные селекторы h1 + p - Смежные селекторы + Смежные селекторы Селектор братских элементов h1 ~ p - Селектор братских элементов + Селектор братских элементов @@ -215,12 +215,12 @@ original_slug: Learn/CSS/Building_blocks/Селекторы
      1. Каскад и наследование
        2. -
      2. CSS-селекторы +
      3. CSS-селекторы
      4. Блоки в CSS
        5. 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 563122004b..7cdc57a8de 100644 --- a/files/ru/learn/css/building_blocks/styling_tables/index.html +++ b/files/ru/learn/css/building_blocks/styling_tables/index.html @@ -17,7 +17,7 @@ translation_of: Learn/CSS/Building_blocks/Styling_tables Необходимые знания: - Базовый HTML (Введение в HTML), HTML таблицы (смотрите раздел HTML таблицы (TBD)), и представление о том как работает CSS (Введение в CSS). + Базовый HTML (Введение в HTML), HTML таблицы (смотрите раздел HTML таблицы (TBD)), и представление о том как работает CSS (Введение в CSS). Цель: @@ -71,9 +71,9 @@ translation_of: Learn/CSS/Building_blocks/Styling_tables </tfoot> </table> -

        Таблица размечена, немного стилизована и понятна, благодаря использованию таких свойств как {{htmlattrxref("scope","th")}}, {{htmlelement("caption")}}, {{htmlelement("thead")}}, {{htmlelement("tbody")}} и т.д. К сожалению при просмотре в браузере она не очень хорошо выглядит (посмотреть можно здесь punk-bands-unstyled.html):

        +

        Таблица размечена, немного стилизована и понятна, благодаря использованию таких свойств как {{htmlattrxref("scope","th")}}, {{htmlelement("caption")}}, {{htmlelement("thead")}}, {{htmlelement("tbody")}} и т.д. К сожалению при просмотре в браузере она не очень хорошо выглядит (посмотреть можно здесь punk-bands-unstyled.html):

        -

        +

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

        @@ -128,14 +128,14 @@ th, td {
      5. Свойство {{cssxref("table-layout")}} со значением fixed как правило полезно использовать для вашей таблицы, это делает поведение таблицы немного более предсказуемым, чем значение по умолчанию. Обычно столбцы таблицы имеют размер в зависимости от того сколько в них контента, что приводит иногда к некоторым странным результатам. Когда table-layout: fixed, размер ваших столбцов определяется шириной их заголовков и делает их контент соответствующего размера. Вот почему вы выбрали четыре разных заголовка с помощью селектора thead th:nth-child(n) ({{cssxref(":nth-child")}}) ("Выберите n-ый дочерний элемент {{htmlelement("th")}} в последовательности, внутри элемента {{htmlelement("thead")}}") и задать им заданную в процентах ширину. Ширина колонки соответствует ширине её заголовка, это правильное решение при определении размеров колонок таблицы. Крис Койер (Chris Coyier) более подробно рассматривает эту технику в статье Fixed Table Layouts.

        Мы также использовали {{cssxref("width")}} 100%, что означает, что таблица заполнит любой контейнер и будет отзывчивой (хотя для этого потребуется ещё некоторая работа для правильного отображения на экранах небольших размеров).
        6. -
      6. Свойство {{cssxref("border-collapse")}} со значением collapse это стандартная практика при стилизации любой таблицы. По умолчанию, когда вы задали рамки для элементов таблицы, все они будут иметь пробелы между собой, как показано на рисунке ниже: Это не очень хорошо выглядит (хотя может это то что вам нужно, кто знает?). Если установить border-collapse: collapse;  рамки схлопываются в одну и так выглядит намного лучше:
        7. +
      7. Свойство {{cssxref("border-collapse")}} со значением collapse это стандартная практика при стилизации любой таблицы. По умолчанию, когда вы задали рамки для элементов таблицы, все они будут иметь пробелы между собой, как показано на рисунке ниже: Это не очень хорошо выглядит (хотя может это то что вам нужно, кто знает?). Если установить border-collapse: collapse;  рамки схлопываются в одну и так выглядит намного лучше:
      8. Мы установили {{cssxref("border")}} вокруг всей таблицы, это понадобится когда чуть позже мы будет устанавливать рамки вокруг header и footer таблицы — когда по периметру всей таблицы нет рамки и граница заканчивается просто отступом, таблица выглядит странно и разрозненно.
      9. Мы установили {{cssxref("padding")}} на элементах {{htmlelement("th")}} и {{htmlelement("td")}} — это создаёт в талице воздух, который позволяет ей дышать, делая её более понятной.

        10. На этом этапе наша таблица выглядит уже гораздо лучше:

        -

        +

        Немного простой типографики

        @@ -186,7 +186,7 @@ tfoot th {

        В результате таблица выглядит немного аккуратнее:

        -

        +

        Графика и цвета

        @@ -210,7 +210,7 @@ thead th, tfoot th, tfoot td {

        Мы добавили {{cssxref("background-image")}} в {{htmlelement("thead")}}, {{htmlelement("tfoot")}} и изменили {{cssxref("color")}} для всего текста внутри header и footer на белый (и ещё {{cssxref("text-shadow")}}) для лучшей читаемости. Вы должны всегда быть уверены что ваш текст хорошо контрастирует с фоном, для обеспечения читаемости.

        -

        Также мы добавили линейный градиент для {{htmlelement("th")}} и {{htmlelement("td")}} элементов внутри header и footer для придания лёгкой приятной текстуры, а также установили этим элементам яркие пурпурные границы. Полезно иметь несколько вложенных элементов, это позволяет накладывать несколько стилей друг на друга. Да, мы могли бы установить и фоновое изображение, и линейный градиент на {{htmlelement("thead")}} и {{htmlelement("tfoot")}} элементы используя множественные фоновые изображения, но мы решили сделать это отдельно для старых браузеров, которые не поддерживают несколько фоновых изображений и линейные градиенты.

        +

        Также мы добавили линейный градиент для {{htmlelement("th")}} и {{htmlelement("td")}} элементов внутри header и footer для придания лёгкой приятной текстуры, а также установили этим элементам яркие пурпурные границы. Полезно иметь несколько вложенных элементов, это позволяет накладывать несколько стилей друг на друга. Да, мы могли бы установить и фоновое изображение, и линейный градиент на {{htmlelement("thead")}} и {{htmlelement("tfoot")}} элементы используя множественные фоновые изображения, но мы решили сделать это отдельно для старых браузеров, которые не поддерживают несколько фоновых изображений и линейные градиенты.

        Полосатая зебра

        @@ -240,7 +240,7 @@ table {

        Этот взрыв цвета выглядит следующим образом:

        -

        +

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

        @@ -258,9 +258,9 @@ table { letter-spacing: 1px; } -

        Здесь нет ничего особенного, кроме свойства {{cssxref("caption-side")}}, которое имеет значение bottom. В этом случае заголовок будет размещён внизу таблицы и это вместе со всем остальным обеспечивает нашей таблице окончательный вид (можно посмотреть по ссылке punk-bands-complete.html):

        +

        Здесь нет ничего особенного, кроме свойства {{cssxref("caption-side")}}, которое имеет значение bottom. В этом случае заголовок будет размещён внизу таблицы и это вместе со всем остальным обеспечивает нашей таблице окончательный вид (можно посмотреть по ссылке punk-bands-complete.html):

        -

        +

        Активное обучение: Стилизация вашей собственной таблицы

        @@ -290,13 +290,13 @@ table {

        В этом блоке

         

        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 5d66f90825..81b8c0bfc1 100644 --- a/files/ru/learn/css/styling_text/styling_links/index.html +++ b/files/ru/learn/css/styling_text/styling_links/index.html @@ -13,7 +13,7 @@ translation_of: Learn/CSS/Styling_text/Styling_links Для изучения вам потребуется: - Основы компьютерной грамотности, базовые знания HTML (изучите Введение в HTML), основы CSS (изучите Введение в CSS), базовые знания о текстах и шрифтах CSS. + Основы компьютерной грамотности, базовые знания HTML (изучите Введение в HTML), основы CSS (изучите Введение в CSS), базовые знания о текстах и шрифтах CSS. Вы узнаете: @@ -28,7 +28,7 @@ translation_of: Learn/CSS/Styling_text/Styling_links

        Состояния ссылок

        -

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

        +

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

        • Link (не посещённая): Состояние по умолчанию, в котором находится ссылка, когда она не находится в каком-либо другом состоянии. Она может быть специфически стилизована используя псевдокласс {{cssxref(":link")}}.
          • @@ -38,7 +38,7 @@ translation_of: Learn/CSS/Styling_text/Styling_links
        • Active: Ссылка, когда она активируется (например при клике по ней), стилизуется используя псевдокласс {{cssxref(":active")}}
        -

        Стили по умолчанию

        +

        Стили по умолчанию

        Следующий пример показывает, как будет вести себя ссылка по умолчанию (CSS просто увеличивает и центрирует текст чтоб больше выделить его).

        @@ -50,7 +50,7 @@ translation_of: Learn/CSS/Styling_text/Styling_links text-align: center; } -

        {{ EmbedLiveSample('Стили_по_умолчанию', '100%', 120) }}

        +

        {{ EmbedLiveSample('Default_styles', '100%', 120) }}

        Вы заметите несколько вещей при изучении стилей по умолчанию:

        @@ -82,7 +82,7 @@ translation_of: Learn/CSS/Styling_text/Styling_links

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

        -

        Стилизация некоторых ссылок

        +

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

        @@ -165,7 +165,7 @@ Firefox</a>, <a href="https://www.google.com/chrome/index.html">Goog

        Объединение этих двух даёт нам такой результат:

        -

        {{ EmbedLiveSample('Стилизация_некоторых_ссылок', '100%', 150) }}

        +

        {{ EmbedLiveSample('Styling_some_links', '100%', 150) }}

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

        @@ -268,7 +268,7 @@ window.addEventListener("load", drawOutput);

        {{ EmbedLiveSample('Playable_code', 700, 800) }}

        -

        Добавление иконок в ссылки

        +

        Обычной практикой является добавление иконок в ссылки, чтобы предоставить больше индикатора того, на какой контент указывает ссылка. Давайте рассмотрим очень простой пример, который добавляет иконку к внешним ссылкам (ссылки, которые ведут на другие сайты). Такая ссылка обычно выглядит как маленькая стрела торчащая из коробочки — например, мы будем использовать этот отличный образец с сайта icons8.com.

        @@ -313,28 +313,28 @@ a:active { } a[href*="http"] { - background: url('https://mdn.mozillademos.org/files/12982/external-link-52.png') no-repeat 100% 0; + background: url('external-link-52.png') no-repeat 100% 0; background-size: 16px 16px; padding-right: 19px; } -

        {{ EmbedLiveSample('Добавление_иконок_в_ссылки', '100%', 150) }}

        +

        {{ EmbedLiveSample('Including_icons_on_links', '100%', 150) }}

        -

        Итак, что же тут происходит? Мы пропустим большую часть CSS так как это та же информация, которую вы рассматривали ранее. Однако, последнее правило интересное — тут мы вставляем пользовательское фоновое изображение во внешнюю ссылку схожим способом как мы делали пользовательские маркеры для пунктов списка в последней статье — в этот раз, однако, мы используем короткую запись {{cssxref("background")}} вместо индивидуальных свойств. Мы задаём путь к изображению, которое хотим вставить, устанавливаем no-repeat чтобы мы получили только одну копию вставленного и затем устанавливаем позицию на 100% до правого края изображения и 0 пикселей от верхнего края.

        +

        Итак, что же тут происходит? Мы пропустим большую часть CSS так как это та же информация, которую вы рассматривали ранее. Однако, последнее правило интересное — тут мы вставляем пользовательское фоновое изображение во внешнюю ссылку схожим способом как мы делали пользовательские маркеры для пунктов списка в последней статье — в этот раз, однако, мы используем короткую запись {{cssxref("background")}} вместо индивидуальных свойств. Мы задаём путь к изображению, которое хотим вставить, устанавливаем no-repeat чтобы мы получили только одну копию вставленного и затем устанавливаем позицию на 100% до правого края изображения и 0 пикселей от верхнего края.

        Также мы используем {{cssxref("background-size")}} для того чтобы указать размер в котором бы хотим чтобы было показано фоновое изображение — полезно иметь иконку большего размера и далее менять его размер так, как нужно для адаптивного (отзывчивого) веб-дизайна. Однако это работает только в IE9 и следующих версиях так что, если вам нужна поддержка тех старых браузеров вам просто придётся менять размер изображения и вставлять его как есть.

        Наконец, мы задаём некоторый {{cssxref("padding-right")}} для ссылки чтобы добавить пространство в котором появляется фоновое изображение, таким образом, чтобы мы не накладывали его на текст.

        -

        И последнее слово — как мы выбрали только внешние ссылки? Ну, если вы пишете свои HTML ссылки правильно, то вы должны были использовать только абсолютные URL для внешних ссылок — гораздо эффективнее использовать относительные ссылки для связи с другими частями вашего сайта. Текст "http" таким образом должен появляться только во внешних ссылках и можем выбрать его при помощи селектора атрибутов: a[href*="http"] выбирает элементы {{htmlelement("a")}}, но только если они имеют атрибут {{htmlattrxref("href","a")}} со значением содержащим "http" где-то внутри него.

        +

        И последнее слово — как мы выбрали только внешние ссылки? Ну, если вы пишете свои HTML ссылки правильно, то вы должны были использовать только абсолютные URL для внешних ссылок — гораздо эффективнее использовать относительные ссылки для связи с другими частями вашего сайта. Текст "http" таким образом должен появляться только во внешних ссылках и можем выбрать его при помощи селектора атрибутов: a[href*="http"] выбирает элементы {{htmlelement("a")}}, но только если они имеют атрибут {{htmlattrxref("href","a")}} со значением содержащим "http" где-то внутри него.

        Ну вот и все — попробуйте посетить секцию активного изучения выше и испытайте этот новый метод!

        -

        Обратите внимание: Не переживайте если вы ещё не знакомы с фоном и адаптивным (отзывчивым) веб-дизайном; это объяснено в других местах

        +

        Обратите внимание: Не переживайте если вы ещё не знакомы с фоном и адаптивным (отзывчивым) веб-дизайном; это объяснено в других местах

        -

        Стилизация ссылок в виде кнопок

        +

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

        @@ -392,13 +392,13 @@ a:active {

        Что даёт нам следующий результат:

        -

        {{ EmbedLiveSample('Стилизация_ссылок_в_виде_кнопок', '100%', 100) }}

        +

        {{ EmbedLiveSample('Styling_links_as_buttons', '100%', 100) }}

        Давайте объясним, что тут происходит, фокусируясь на самых интересных частях:

        • Наше второе правило удаляет заданный по умолчанию {{cssxref("padding")}} у элемента {{htmlelement("ul")}} и устанавливает его ширину так, чтобы охватить 100% внешнего контейнера (в этом случае {{htmlelement("body")}}).
          • -
        • Элементы {{htmlelement("li")}} по умолчанию в норме являются блочными (см. типы блоков CSS чтобы вспомнить), что значит что они будут располагаться на своих собственных строках. В этом случае мы создаём горизонтальный список ссылок, поэтому в третьем правиле задаём свойству {{cssxref("display")}} значение inline, что приводит к тому, что элементы списка располагаются в одной строке друг с другом — теперь они ведут себя как строчные элементы.
          • +
        • Элементы {{htmlelement("li")}} по умолчанию в норме являются блочными (см. типы блоков CSS чтобы вспомнить), что значит что они будут располагаться на своих собственных строках. В этом случае мы создаём горизонтальный список ссылок, поэтому в третьем правиле задаём свойству {{cssxref("display")}} значение inline, что приводит к тому, что элементы списка располагаются в одной строке друг с другом — теперь они ведут себя как строчные элементы.
        • четвёртое правило — которое стилизует элемент {{htmlelement("a")}} — самое сложное; давайте пройдёмся по нему шаг за шагом:
          • как в предыдущем примере, мы начинаем отключать настройки по умолчанию для {{cssxref("text-decoration")}} и {{cssxref("outline")}} — мы не хотим, чтоб они портили нам вид.
            • 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 fd507cffeb..9fb3de53ff 100644 --- a/files/ru/learn/css/styling_text/styling_lists/index.html +++ b/files/ru/learn/css/styling_text/styling_lists/index.html @@ -8,14 +8,14 @@ original_slug: Learn/CSS/Styling_text/Стилизация_списков
            {{PreviousMenuNext("Learn/CSS/Styling_text/Fundamentals", "Learn/CSS/Styling_text/Styling_links", "Learn/CSS/Styling_text")}}
            -

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

            +

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

            @@ -27,7 +27,7 @@ original_slug: Learn/CSS/Styling_text/Стилизация_списков

            Пример простого списка

            -

            Для начала, давайте взглянем на пример простого списка. В данной статье мы рассмотрим ненумерованный, нумерованный и описательный списки  — все они имеют аналогичные свойства стилизации, но некоторые имеют свои специальные свойства. Не стилизованный пример доступен на Github (проверьте также источник кода.)

            +

            Для начала, давайте взглянем на пример простого списка. В данной статье мы рассмотрим ненумерованный, нумерованный и описательный списки  — все они имеют аналогичные свойства стилизации, но некоторые имеют свои специальные свойства. Не стилизованный пример доступен на Github (проверьте также источник кода.)

            HTML для нашего примера списка представлен ниже:

            @@ -83,7 +83,7 @@ paragraph for reference, paragraph for reference, paragraph for reference.</p

            Управление интервалами списков

            -

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

            +

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

            CSS, используемый для оформления текста и интервалов, выглядит следующим образом:

            @@ -148,7 +148,7 @@ dd {

            Это даёт нам следующий вид:

            -

            an ordered list with the bullet points set to appear outside the list item text.

            +

            an ordered list with the bullet points set to appear outside the list item text.

            Вы можете найти гораздо больше опций, заглянув на справочную страницу {{cssxref ("list-style-type")}}.

            @@ -163,7 +163,7 @@ dd { list-style-position: inside; } -

            an ordered list with the bullet points set to appear inside the list item text.

            +

            an ordered list with the bullet points set to appear inside the list item text.

            Использование пользовательского изображения как маркер

            @@ -173,7 +173,7 @@ dd { list-style-image: url(star.svg); } -

            Однако это свойство немного ограничено с точки зрения управления позициями, размерами (и т.д.) маркеров. Вам лучше использовать семейство свойств {{cssxref ("background")}}, о которых вы узнаете намного больше в модуле Styling boxes. А пока вот вам образец для дегустации!

            +

            Однако это свойство немного ограничено с точки зрения управления позициями, размерами (и т.д.) маркеров. Вам лучше использовать семейство свойств {{cssxref ("background")}}, о которых вы узнаете намного больше в модуле Styling boxes. А пока вот вам образец для дегустации!

            В нашем законченном примере мы оформили неупорядоченный список следующим образом (поверх того, что вы уже видели выше):

            @@ -207,7 +207,7 @@ ul li {

            Это даёт нам следующий результат:

            -

            an unordered list with the bullet points set as little star images

            +

            an unordered list with the bullet points set as little star images

            короткая запись list-style

            @@ -386,5 +386,5 @@ window.addEventListener("load", drawOutput);
          • Стилизация списков
          • Стилизация ссылок
          • Веб-шрифты
            • -
          • Вёрстка домашней страницы общественной школы
            • +
          • Вёрстка домашней страницы общественной школы
            • 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 53db98ecdd..d19626e533 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 @@ -32,7 +32,7 @@ original_slug: Learn/CSS/Styling_text/Задание:_Стилизировани
          • Сделайте их копии на вашем компьютере.
            • -

            В качестве альтернативы, вы можете пользоваться сайтами как  JSBin или Glitch чтобы выполнить оценку. Вы можете вставить HTML и заполнить CSS в одном из этих онлайн-редакторов и использовать этот URL чтобы указать фоновое изображение. Если же онлайн-редактор, которым вы пользуетесь, не имеет отдельной CSS панели, тогда вводите его в элемент <style> в head документа.

            +

            В качестве альтернативы, вы можете пользоваться сайтами как  JSBin или Glitch чтобы выполнить оценку. Вы можете вставить HTML и заполнить CSS в одном из этих онлайн-редакторов и использовать этот URL чтобы указать фоновое изображение. Если же онлайн-редактор, которым вы пользуетесь, не имеет отдельной CSS панели, тогда вводите его в элемент <style> в head документа.

            Обратите внимание: Если вы застрянете, то попросите помощи — см. секцию {{anch("Оценка или дальнейшая помощь")}} в конце этой страницы.

            @@ -96,7 +96,7 @@ original_slug: Learn/CSS/Styling_text/Задание:_Стилизировани

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

            -

            +

            Оценка или дальнейшая помощь

            @@ -123,5 +123,5 @@ original_slug: Learn/CSS/Styling_text/Задание:_Стилизировани
          • Стилизация списков
          • Стилизация ссылок
          • Веб-шрифты
            • -
          • Задании: Стилизация школьного сайта
            • +
          • Задании: Стилизация школьного сайта
            • diff --git a/files/ru/learn/forms/basic_native_form_controls/all-buttons.png b/files/ru/learn/forms/basic_native_form_controls/all-buttons.png new file mode 100644 index 0000000000..1f43c4f1fb Binary files /dev/null and b/files/ru/learn/forms/basic_native_form_controls/all-buttons.png differ diff --git a/files/ru/learn/forms/basic_native_form_controls/all-checkbox.png b/files/ru/learn/forms/basic_native_form_controls/all-checkbox.png new file mode 100644 index 0000000000..2769f0594d Binary files /dev/null and b/files/ru/learn/forms/basic_native_form_controls/all-checkbox.png differ diff --git a/files/ru/learn/forms/basic_native_form_controls/all-datalist.png b/files/ru/learn/forms/basic_native_form_controls/all-datalist.png new file mode 100644 index 0000000000..f89c3e1eb9 Binary files /dev/null and b/files/ru/learn/forms/basic_native_form_controls/all-datalist.png differ diff --git a/files/ru/learn/forms/basic_native_form_controls/all-multi-lines-select.png b/files/ru/learn/forms/basic_native_form_controls/all-multi-lines-select.png new file mode 100644 index 0000000000..bae88512cb Binary files /dev/null and b/files/ru/learn/forms/basic_native_form_controls/all-multi-lines-select.png differ diff --git a/files/ru/learn/forms/basic_native_form_controls/all-multi-lines-text-field.png b/files/ru/learn/forms/basic_native_form_controls/all-multi-lines-text-field.png new file mode 100644 index 0000000000..6c6bc1862f Binary files /dev/null and b/files/ru/learn/forms/basic_native_form_controls/all-multi-lines-text-field.png differ diff --git a/files/ru/learn/forms/basic_native_form_controls/all-radio.png b/files/ru/learn/forms/basic_native_form_controls/all-radio.png new file mode 100644 index 0000000000..e5a36ca200 Binary files /dev/null and b/files/ru/learn/forms/basic_native_form_controls/all-radio.png differ diff --git a/files/ru/learn/forms/basic_native_form_controls/all-search-field.png b/files/ru/learn/forms/basic_native_form_controls/all-search-field.png new file mode 100644 index 0000000000..83e4c0ff3a Binary files /dev/null and b/files/ru/learn/forms/basic_native_form_controls/all-search-field.png differ diff --git a/files/ru/learn/forms/basic_native_form_controls/all-select.png b/files/ru/learn/forms/basic_native_form_controls/all-select.png new file mode 100644 index 0000000000..fde1fbf68b Binary files /dev/null and b/files/ru/learn/forms/basic_native_form_controls/all-select.png differ diff --git a/files/ru/learn/forms/basic_native_form_controls/all-single-line-text-field.png b/files/ru/learn/forms/basic_native_form_controls/all-single-line-text-field.png new file mode 100644 index 0000000000..84cccbee6a Binary files /dev/null and b/files/ru/learn/forms/basic_native_form_controls/all-single-line-text-field.png differ diff --git a/files/ru/learn/forms/basic_native_form_controls/datalist-firefox-macos.png b/files/ru/learn/forms/basic_native_form_controls/datalist-firefox-macos.png new file mode 100644 index 0000000000..4e7466691e Binary files /dev/null and b/files/ru/learn/forms/basic_native_form_controls/datalist-firefox-macos.png differ diff --git a/files/ru/learn/forms/basic_native_form_controls/datalist-safari.png b/files/ru/learn/forms/basic_native_form_controls/datalist-safari.png new file mode 100644 index 0000000000..c1c6e68cd3 Binary files /dev/null and b/files/ru/learn/forms/basic_native_form_controls/datalist-safari.png differ diff --git a/files/ru/learn/forms/basic_native_form_controls/email-invalid.png b/files/ru/learn/forms/basic_native_form_controls/email-invalid.png new file mode 100644 index 0000000000..25ab5fcacd Binary files /dev/null and b/files/ru/learn/forms/basic_native_form_controls/email-invalid.png differ 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 996ff8bede..7da1a16864 100644 --- a/files/ru/learn/forms/basic_native_form_controls/index.html +++ b/files/ru/learn/forms/basic_native_form_controls/index.html @@ -23,10 +23,10 @@ original_slug: Learn/HTML/Forms/Стандартные_виджеты_форм
            Требования: -

            Базовая компьютерная грамотность, основы HTML (изучите Введение в HTML), основы CSS (изучите Введение в CSS), CSS основы по тексту и шрифтам.

            +

            Базовая компьютерная грамотность, основы HTML (изучите Введение в HTML), основы CSS (изучите Введение в CSS), CSS основы по тексту и шрифтам.
            -

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

            +

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

            -

            Note: Большая часть признаков обсуждаемых в этой статье имеют широкую поддержку в браузерах; мы отметим исключения из этого правила. Если вы хотите больше точных сведений, вам следует обратиться к HTML forms element reference, и в частости к нашей обширной ссылке <input> types.

            +

            Note: Большая часть признаков обсуждаемых в этой статье имеют широкую поддержку в браузерах; мы отметим исключения из этого правила. Если вы хотите больше точных сведений, вам следует обратиться к HTML forms element reference, и в частости к нашей обширной ссылке <input> types.

            Стандартные атрибуты

            @@ -75,7 +75,7 @@ original_slug: Learn/HTML/Forms/Стандартные_виджеты_форм

            Текстовые поля {{htmlelement("input")}}  являются самыми базовыми виджетами форм. Эти поля наиболее удобны для пользовательского ввода различной информации. Однако, некоторые текстовые поля отличаются от данного и используются для специфических нужд. Мы уже видели несколько простых примеров.

            -

            Note: HTML form text fields are simple plain text input controls. This means that you cannot use them to perform rich editing (bold, italic, etc.). All rich text editors you'll encounter out there are custom widgets created with HTML, CSS, and JavaScript.

            +

            Note: HTML form text fields are simple plain text input controls. This means that you cannot use them to perform rich editing (bold, italic, etc.). All rich text editors you'll encounter out there are custom widgets created with HTML, CSS, and JavaScript.

            Все текстовые поля имеют общие атрибуты:

            @@ -83,8 +83,8 @@ original_slug: Learn/HTML/Forms/Стандартные_виджеты_форм
            • Они могут быть помечены как {{htmlattrxref("readonly","input")}} (пользователь не может изменять начальное значение) или даже {{htmlattrxref("disabled","input")}} начальное значение никогда не посылается вместе с остальными данными формами).
            • Они могут иметь атрибут {{htmlattrxref("placeholder","input")}}; это текст, который появляется внутри теста поля формы и кратко описывает, для чего используется данная форма.
              • -
            • Существуют общие характеристики {{htmlattrxref("size","input")}} (физический размер поля) и длину (максимальное количество символов, которые может ввести пользователь).
              • -
            • Они могут быть определены с помощью spell checking, если браузер поддерживает данную функцию.
              • +
            • Существуют общие характеристики {{htmlattrxref("size","input")}} (физический размер поля) и длину (максимальное количество символов, которые может ввести пользователь).
              • +
            • Они могут быть определены с помощью spell checking, если браузер поддерживает данную функцию.
            @@ -105,7 +105,7 @@ original_slug: Learn/HTML/Forms/Стандартные_виджеты_форм

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

            -

            Screenshots of single line text fields on several platforms.

            +

            Screenshots of single line text fields on several platforms.

            HTML5 enhances the basic single line text field by adding special values for the {{htmlattrxref("type","input")}} attribute. Those values still turn an {{HTMLElement("input")}} element into a single line text field but they add a few extra constraints and features to the field.

            @@ -117,14 +117,14 @@ original_slug: Learn/HTML/Forms/Стандартные_виджеты_форм

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

            -

            An invalid email input showing the message Please enter an email address.

            +

            An invalid email input showing the message Please enter an email address.

            It's also possible to let the user type several e-mail addresses into the same input (separated by commas) by including the {{htmlattrxref("multiple","input")}} attribute.

            On some devices (especially on mobile), a different virtual keypad might be presented that is more suitable for entering email addresses.

            -

            Note: You can find out more about form validation in the article Form data validation.

            +

            Note: You can find out more about form validation in the article Form data validation.

            Password field

            @@ -147,7 +147,7 @@ original_slug: Learn/HTML/Forms/Стандартные_виджеты_форм

            The main difference between a text field and a search field is how the browser styles it — often, search fields are rendered with rounded corners, and/or given an "x" to press to clear the entered value. However, there is another added feature worth noting: their values can be automatically saved to be auto completed across multiple pages on the same site.

            -

            Screenshots of search fields on several platforms.

            +

            Screenshots of search fields on several platforms.

            Phone number field

            @@ -168,7 +168,7 @@ original_slug: Learn/HTML/Forms/Стандартные_виджеты_форм
            Note: Just because the URL is well-formed doesn't necessarily mean that it refers to a location that actually exists.
            -

            Note: Fields that have special constraints and are in error prevent the form from being sent; in addition, they can be styled so as to make the error clear. We will discuss this in detail in the article: Data form validation.

            +

            Note: Fields that have special constraints and are in error prevent the form from being sent; in addition, they can be styled so as to make the error clear. We will discuss this in detail in the article: Data form validation.

            Multi-line text fields

            @@ -179,7 +179,7 @@ original_slug: Learn/HTML/Forms/Стандартные_виджеты_форм

            The main difference between a textarea and a regular single line text field is that users are allowed to type text that includes hard line breaks (i.e. pressing return).

            -

            Screenshots of multi-lines text fields on several platforms.

            +

            Screenshots of multi-lines text fields on several platforms.

            Note: You can find an example of a multi-line text field on GitHub at multi-line-text-field.html (see it live also). Have a look at it, and notice how in most browsers, the text area is given a drag handle on the bottom right to allow the user to resize it. This resizing ability can be turned off by setting the text area's {{cssxref("resize")}} property to none using CSS.

            @@ -257,7 +257,7 @@ original_slug: Learn/HTML/Forms/Стандартные_виджеты_форм   </optgroup> </select> -

            Screenshots of single line select box on several platforms.

            +

            Screenshots of single line select box on several platforms.

            If an {{HTMLElement("option")}} element is set with a value attribute, that attribute's value is sent when the form is submitted. If the value attribute is omitted, the content of the {{HTMLElement("option")}} element is used as the select box's value.

            @@ -275,7 +275,7 @@ original_slug: Learn/HTML/Forms/Стандартные_виджеты_форм <option>Lemon</option> </select> -

            Screenshots of multi-lines select box on several platforms.

            +

            Screenshots of multi-lines select box on several platforms.

            Note: All browsers that support the {{HTMLElement("select")}} element also support the {{htmlattrxref("multiple","select")}} attribute on it.
            @@ -300,9 +300,9 @@ original_slug: Learn/HTML/Forms/Стандартные_виджеты_форм   <option>Pear</option> </datalist> -
            Note: According to the HTML specification, the {{htmlattrxref("list","input")}} attribute and the {{HTMLElement("datalist")}} element can be used with any kind of widget requiring a user input. However, it is unclear how it should work with controls other than text (color or date for example), and different browsers behave differently from case to case. Because of that, be cautious using this feature with anything but text fields.
            +
            Note: According to the HTML specification, the {{htmlattrxref("list","input")}} attribute and the {{HTMLElement("datalist")}} element can be used with any kind of widget requiring a user input. However, it is unclear how it should work with controls other than text (color or date for example), and different browsers behave differently from case to case. Because of that, be cautious using this feature with anything but text fields.
            -
            Screenshots of datalist on several platforms.
            +
            Screenshots of datalist on several platforms.
            @@ -336,11 +336,11 @@ original_slug: Learn/HTML/Forms/Стандартные_виджеты_форм Safari 6 - Screenshot of the datalist element fallback with Safari on Mac OS + Screenshot of the datalist element fallback with Safari on Mac OS Firefox 18 - Screenshot of the datalist element with Firefox on Mac OS + Screenshot of the datalist element with Firefox on Mac OS @@ -368,7 +368,7 @@ original_slug: Learn/HTML/Forms/Стандартные_виджеты_форм

            Including the checked attribute makes the checkbox checked automatically when the page loads.

            -

            Screenshots of check boxes on several platforms.

            +

            Screenshots of check boxes on several platforms.

            Radio button

            @@ -396,7 +396,7 @@ original_slug: Learn/HTML/Forms/Стандартные_виджеты_форм   </ul> </fieldset> -

            Screenshots of radio buttons on several platforms.

            +

            Screenshots of radio buttons on several platforms.

            Buttons

            @@ -448,7 +448,7 @@ original_slug: Learn/HTML/Forms/Стандартные_виджеты_форм
          • With {{HTMLElement("button")}} elements, it's possible to have a value different than the button's label (by setting it inside a value attribute). This isn't reliable in versions of Internet Explorer prior to IE 8.
          -

          Screenshots of buttons on several platforms.

          +

          Screenshots of buttons on several platforms.

          Technically speaking, there is almost no difference between a button defined with the {{HTMLElement("button")}} element or the {{HTMLElement("input")}} element. The only noticeable difference is the label of the button itself. Within an {{HTMLElement("input")}} element, the label can only be character data, whereas in a {{HTMLElement("button")}} element, the label can be HTML, so it can be styled accordingly.

          @@ -569,7 +569,7 @@ beans.oninput = function() {

          File picker

          -

          HTML forms are able to send files to a server; this specific action is detailed in the article Sending and retrieving form data. The file picker widget is how the user can choose one or more files to send.

          +

          HTML forms are able to send files to a server; this specific action is detailed in the article Sending and retrieving form data. The file picker widget is how the user can choose one or more files to send.

          To create a file picker widget, you use the {{HTMLElement("input")}} element with its {{htmlattrxref("type","input")}} attribute set to file. The types of files that are accepted can be constrained using the {{htmlattrxref("accept","input")}} attribute. In addition, if you want to let the user pick more than one file, you can do so by adding the {{htmlattrxref("multiple","input")}} attribute.

          @@ -606,7 +606,7 @@ beans.oninput = function() { 
          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

          @@ -669,7 +669,7 @@ beans.oninput = function() {

          {{PreviousMenuNext("Learn/HTML/Forms/How_to_structure_an_HTML_form", "Learn/HTML/Forms/Sending_and_retrieving_form_data", "Learn/HTML/Forms")}}

          @@ -677,15 +677,15 @@ beans.oninput = function() {

          In this module

          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 155242dff0..d152e456b0 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 @@ -12,7 +12,7 @@ original_slug: Learn/HTML/Forms/Отправка_и_Получение_данн Предварительные знания: - Базовая компьютерная грамотность, понимание HTML и базовые знания по HTTP и программированию на стороне сервера. + Базовая компьютерная грамотность, понимание HTML и базовые знания по HTTP и программированию на стороне сервера. Задача: @@ -27,7 +27,7 @@ original_slug: Learn/HTML/Forms/Отправка_и_Получение_данн

          О клиентской/серверной архитектуре

          -

          WEB основан на очень простой клиент-серверной архитектуре, которую можно обобщить следующим образом: клиент (обычно веб-браузер) отправляет запрос на сервер (в основном веб-сервер, такой как Apache, Nginx, IIS, Tomcat, и т. д.), используя протокол HTTP. Сервер отвечает на запрос, используя тот же протокол.A basic schema of the Web client/server architecture

          +

          WEB основан на очень простой клиент-серверной архитектуре, которую можно обобщить следующим образом: клиент (обычно веб-браузер) отправляет запрос на сервер (в основном веб-сервер, такой как Apache, Nginx, IIS, Tomcat, и т. д.), используя протокол HTTP. Сервер отвечает на запрос, используя тот же протокол.A basic schema of the Web client/server architecture

          На стороне клиента HTML-форма - это не более чем удобный способ настройки HTTP-запроса для отправки данных на сервер. Это позволяет пользователю предоставлять информацию для доставки в HTTP-запросе .

          @@ -65,7 +65,7 @@ original_slug: Learn/HTML/Forms/Отправка_и_Получение_данн

          Атрибут {{htmlattrxref("method","form")}}

          -

          Этот атрибут определяет способ отправки данных. Протокол HTTP предоставляет несколько способов выполнить запрос;  Данные HTML-формы могут передаваться несколькими различными способами, наиболее распространёнными из которых являются метод GET и метод POST.

          +

          Этот атрибут определяет способ отправки данных. Протокол HTTP предоставляет несколько способов выполнить запрос;  Данные HTML-формы могут передаваться несколькими различными способами, наиболее распространёнными из которых являются метод GET и метод POST.

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

          @@ -91,7 +91,7 @@ original_slug: Learn/HTML/Forms/Отправка_и_Получение_данн

          Поскольку используется метод GET, вы увидите URL www.foo.com/?say=Hi&to=Mom, который появится в адресной строке браузера при отправке формы.

          -

          Данные добавляются в URL как последовательность пар имя / значение. После того, как URL веб-адрес закончился, мы добавляем знак вопроса (?), за которым следуют пары имя / значение, каждая из которых разделена амперсандом (&). В этом случае мы передаём две части данных на сервер:

          +

          Данные добавляются в URL как последовательность пар имя / значение. После того, как URL веб-адрес закончился, мы добавляем знак вопроса (?), за которым следуют пары имя / значение, каждая из которых разделена амперсандом (&). В этом случае мы передаём две части данных на сервер:

          • say, со значением Hi
            • @@ -156,7 +156,7 @@ say=Hi&to=Mom

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

            -

            +

            Единственное, что отображается пользователю — вызываемый URL. Как упоминалось раннее, запрос с методом GET позволит пользователю увидеть информацию из запроса в URL, а запрос с методом POST не позволит. Две причины, почему это может быть важно:

            @@ -184,7 +184,7 @@ say=Hi&to=Mom

            Пример показывает страницу с данными, которые мы отправили. Вы можете посмотреть это в действии в нашем файле с примером: php-example.html — который содержит те же данные, которые вы видели раньше:  method : post и action из php-example.php. Когда данные переданы на отправку (submit), они переданы в форму php-example.php, которая содержит PHP код из примера выше. Когда код будет выполнен, браузер выведет (output) обработанное сообщение: Hi Mom.

            -

            +

            Примечание: Этот пример не будет работать, когда вы загружаете его в браузер локально — браузер не может интерпретировать PHP код, после отправки данных из формы, браузер просто предложит загрузить PHP файл. Чтобы пример заработал, необходимо отправить его на PHP сервер. Для тестирования PHP на локальных серверах можете пробовать MAMP (Mac and Windows) и/или AMPPS (Mac, Windows, Linux).

            @@ -217,7 +217,7 @@ if __name__ == "__main__":
          -

          Примечание: Опять же, этот код не будет работать, если вы просто попробуете загрузить его прямо в браузер. Python работает немного иначе, чем PHP — чтобы запустить этот код, нужно установить Python/PIP, потом установить Flask используя команду: pip3 install flask. После этого, вы сможете запустить файл из примера, используя команду: python3 python-example.py, потом открыть localhost:5000 в своём браузере.

          +

          Примечание: Опять же, этот код не будет работать, если вы просто попробуете загрузить его прямо в браузер. Python работает немного иначе, чем PHP — чтобы запустить этот код, нужно установить Python/PIP, потом установить Flask используя команду: pip3 install flask. После этого, вы сможете запустить файл из примера, используя команду: python3 python-example.py, потом открыть localhost:5000 в своём браузере.

          Другие языки и фреймворки

          @@ -251,7 +251,7 @@ if __name__ == "__main__":
          • Указать {{htmlattrxref("method","form")}} атрибут POST, поскольку содержимое файла, как и сам файл, не могут быть отображены в URL параметрах.
          • Установить в {{htmlattrxref("enctype","form")}} значение multipart/form-data, потому что данные будут разбиты на несколько частей: одна часть на файл (две части на два файла), и одна часть на текстовые данные (при условии, если форма содержит поле для получения тестовых данных).
            • -
          • Подключите один или более File picker виджетов, чтобы позволить своим пользователям выбрать, какие и сколько файлов будут загружены.
            • +
          • Подключите один или более File picker виджетов, чтобы позволить своим пользователям выбрать, какие и сколько файлов будут загружены.

          Пример:

          @@ -322,7 +322,7 @@ if __name__ == "__main__":

          Заключение

          -

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

          +

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

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

          @@ -339,15 +339,15 @@ if __name__ == "__main__":

          В этом модуле

          diff --git a/files/ru/learn/getting_started_with_the_web/css_basics/index.html b/files/ru/learn/getting_started_with_the_web/css_basics/index.html index 0e5373c160..c7b482741e 100644 --- a/files/ru/learn/getting_started_with_the_web/css_basics/index.html +++ b/files/ru/learn/getting_started_with_the_web/css_basics/index.html @@ -31,7 +31,7 @@ translation_of: Learn/Getting_started_with_the_web/CSS_basics

          Давайте попробуем: вставьте эти три строки CSS в новый файл в ваш текстовый редактор, а затем сохраните файл как style.css в вашей папке styles.

          -

          Но нам всё равно нужно применить CSS к нашему HTML документу. В противном случае, CSS стиль не повлияет на то, как ваш браузер отобразит HTML документ. (Если вы не следили за нашим проектом, то прочитайте раздел Работа с файлами и Основы HTML, чтобы узнать, что вам нужно сделать в первую очередь.)

          +

          Но нам всё равно нужно применить CSS к нашему HTML документу. В противном случае, CSS стиль не повлияет на то, как ваш браузер отобразит HTML документ. (Если вы не следили за нашим проектом, то прочитайте раздел Работа с файлами и Основы HTML, чтобы узнать, что вам нужно сделать в первую очередь.)

          1. Откройте ваш файл index.html и вставьте следующую строку куда-нибудь в шапку, между <head> и </head> тегами: @@ -41,13 +41,13 @@ translation_of: Learn/Getting_started_with_the_web/CSS_basics
          2. Сохраните index.html и загрузите его в вашем браузере. Вы должны увидеть что-то вроде этого:
          -

          A mozilla logo and some paragraphs. The paragraph text has been styled red by our css.Если текст вашего абзаца теперь красный, примите наши поздравления! Вы написали свой первый успешный CSS!

          +

          A mozilla logo and some paragraphs. The paragraph text has been styled red by our css.Если текст вашего абзаца теперь красный, примите наши поздравления! Вы написали свой первый успешный CSS!

          Анатомия набора правил CSS

          Давайте взглянем на вышеупомянутый CSS немного более подробно:

          -

          +

          Вся структура называется набором правил (но зачастую для краткости "правило"). Отметим также имена отдельных частей:

          @@ -139,7 +139,7 @@ translation_of: Learn/Getting_started_with_the_web/CSS_basics

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

            -
          1. Прежде всего, вернитесь и найдите вывод из Google Fonts, который вы уже где-то сохранили. Добавьте элемент {{htmlelement("link")}} где-нибудь внутри шапки вашего index.html (снова, в любом месте между тегами <head> и </head>). Это будет выглядеть примерно так: +
          2. Прежде всего, вернитесь и найдите вывод из Google Fonts, который вы уже где-то сохранили. Добавьте элемент {{htmlelement("link")}} где-нибудь внутри шапки вашего index.html (снова, в любом месте между тегами <head> и </head>). Это будет выглядеть примерно так: 
            <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
            Этот код связывает вашу страницу с таблицой стилями, которая загружает семейство шрифтов Open Sans вместе с вашей страницей и позволяет вам применять их к вашим HTML элементам используя свою собственную таблицу стилей.
            3. @@ -170,13 +170,13 @@ p, li {

            Вы можете настроить значения px так, как вам нравится, чтобы ваш дизайн выглядел так, как вы хотите, но, в общем, ваш дизайн должен выглядеть вот так:

            -

            a mozilla logo and some paragraphs. a sans-serif font has been set, the font sizes, line height and letter spacing are adjusted, and the main page heading has been centered

            +

            a mozilla logo and some paragraphs. a sans-serif font has been set, the font sizes, line height and letter spacing are adjusted, and the main page heading has been centered

            Блоки, блоки и ещё раз блоки

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

            -

            a big stack of boxes or crates sat on top of one another

            +

            a big stack of boxes or crates sat on top of one another

            Не удивительно, макет CSS основан, главным образом, на блочной модели (box model). Каждый из блоков, занимающий пространство на вашей странице имеет такие свойства, как:

            @@ -186,7 +186,7 @@ p, li {
          3. margin, пространство вокруг внешней стороны элемента
        -

        three boxes sat inside one another. From outside to in they are labelled margin, border and padding

        +

        three boxes sat inside one another. From outside to in they are labelled margin, border and padding

        В этом разделе мы также используем:

        @@ -206,7 +206,7 @@ p, li { background-color: #00539F; } -

        Это правило устанавливает цвет фона для всей страницы. Измените код цвета сверху, на цвет который вы выбрали при планировании вашего сайта.

        +

        Это правило устанавливает цвет фона для всей страницы. Измените код цвета сверху, на цвет который вы выбрали при планировании вашего сайта.

        Разбираемся с телом

        @@ -222,7 +222,7 @@ p, li {
        • width: 600px; — заставляет тело быть всегда 600 пикселей в ширину.
          • -
        • margin: 0 auto; — когда вы устанавливаете два значения для таких свойств как margin или padding, первое значение элемента влияет на верхнюю и нижнюю сторону (делает их 0 в данном случае), и второе значение на левую и правую сторону (здесь, auto является особым значением, которое делит доступное пространство по горизонтали поровну слева и справа). Вы также можете использовать один, три или четыре значения, как описано здесь.
          • +
        • margin: 0 auto; — когда вы устанавливаете два значения для таких свойств как margin или padding, первое значение элемента влияет на верхнюю и нижнюю сторону (делает их 0 в данном случае), и второе значение на левую и правую сторону (здесь, auto является особым значением, которое делит доступное пространство по горизонтали поровну слева и справа). Вы также можете использовать один, три или четыре значения, как описано здесь.
        • background-color: #FF9500; — как и прежде, устанавливает цвет фона элемента. Я использовал красновато-оранжевый для тела, в отличие от темно-синего цвета для {{htmlelement("html")}} элемента, но не стесняйтесь и экспериментируйте.
        • padding: 0 20px 20px 20px; — у нас есть четыре значения, установленные для padding, чтобы сделать немного пространства вокруг нашего контента. В этот раз мы не устанавливаем padding на верхней части тела, но делаем 20 пикселей слева, снизу и справа. Значения устанавливаются сверху, справа, снизу, слева, в таком порядке.
        • border: 5px solid black; — просто устанавливает сплошную чёрную рамку шириной 5 пикселей со всех сторон тела.
          • @@ -271,13 +271,13 @@ p, li {

          Заключение

          -

          Если вы следовали всем инструкциям в этой статье, вы должны получить страницу, которая выглядит примерно так (вы также можете посмотреть нашу версию здесь):

          +

          Если вы следовали всем инструкциям в этой статье, вы должны получить страницу, которая выглядит примерно так (вы также можете посмотреть нашу версию здесь):

          -

          a mozilla logo, centered, and a header and paragraphs. It now looks nicely styled, with a blue background for the whole page and orange background for the centered main content strip.

          +

          a mozilla logo, centered, and a header and paragraphs. It now looks nicely styled, with a blue background for the whole page and orange background for the centered main content strip.

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

          -

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

          +

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

          {{PreviousMenuNext("Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web")}}

          @@ -285,11 +285,11 @@ p, li { 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 f506a21200..f3ecfbe95c 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 @@ -32,7 +32,7 @@ translation_of: Learn/Getting_started_with_the_web/JavaScript_basics
        • Также вы можете применить к вашему HTML сторонние фреймворки и библиотеки, что позволит вам ускорить создание сайтов и приложений.
        -

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

        +

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

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

        @@ -56,7 +56,7 @@ translation_of: Learn/Getting_started_with_the_web/JavaScript_basics 
        var myHeading = document.querySelector('h1');
 myHeading.textContent = 'Hello world!';
        -
      10. Теперь убедитесь, что HTML и JavaScript файлы сохранены, и загрузите index.html в браузере. Вы должны увидеть что-то вроде этого:
        11. +
      11. Теперь убедитесь, что HTML и JavaScript файлы сохранены, и загрузите index.html в браузере. Вы должны увидеть что-то вроде этого:
      @@ -74,12 +74,12 @@ myHeading.textContent = 'Hello world!';

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

      -

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

      +

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

      Переменные

      -

      {{Glossary("Variable", "Переменные")}} — это контейнеры, внутри которых вы можете хранить значения. Вы начинаете с того, что объявляете переменную с помощью ключевого слова var (не рекомендуется, продолжайте читать, чтобы получить объяснения) или let, за которым следует любое имя, которым вы захотите её назвать:

      +

      {{Glossary("Variable", "Переменные")}} — это контейнеры, внутри которых вы можете хранить значения. Вы начинаете с того, что объявляете переменную с помощью ключевого слова var (не рекомендуется, продолжайте читать, чтобы получить объяснения) или let, за которым следует любое имя, которым вы захотите её назвать:

      let myVariable;
      @@ -286,7 +286,7 @@ multiply(20,20); multiply(0.5,3);
      -

      Примечание: Инструкция return сообщает браузеру, что нужно вернуть переменную result из функции, которую можно будет использовать. Это необходимо потому, что переменные, определённые внутри функций, доступны только внутри этих функций. Это называется {{Glossary("Scope", "областью видимости")}} переменной. (Читайте больше об области видимости переменных.)

      +

      Примечание: Инструкция return сообщает браузеру, что нужно вернуть переменную result из функции, которую можно будет использовать. Это необходимо потому, что переменные, определённые внутри функций, доступны только внутри этих функций. Это называется {{Glossary("Scope", "областью видимости")}} переменной. (Читайте больше об области видимости переменных.)

      События

      @@ -351,7 +351,7 @@ myImage.onclick = function() {

      Добавление персонального приветственного сообщения

      -

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

      +

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

      1. В index.html, добавьте следующую строку перед элементом {{htmlelement("script")}}: @@ -391,7 +391,7 @@ var myHeading = document.querySelector('h1');

        Если вы следовали всем инструкциям в этой статье, в конечном итоге вы должны получить страницу, которая выглядит примерно так (вы также можете посмотреть нашу версию здесь):

        -

        +

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

        @@ -403,11 +403,11 @@ var myHeading = document.querySelector('h1'); 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 efca6f0536..8621a782a0 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 @@ -14,7 +14,7 @@ original_slug: Learn/HTML/Multimedia_and_embedding/Изображения_в_HTM Необходимы: - Базовые знания компьютера, установленное базовое ПО, базовые знания по работе с файлами, знания основ HTML (как описано в статье Начало работы с HTML). + Базовые знания компьютера, установленное базовое ПО, базовые знания по работе с файлами, знания основ HTML (как описано в статье Начало работы с HTML). Цель: @@ -28,7 +28,7 @@ original_slug: Learn/HTML/Multimedia_and_embedding/Изображения_в_HTM

        Чтобы разместить изображение на странице, нужно использовать тег {{htmlelement("img")}}. Это пустой элемент (имеется ввиду, что не содержит текста и закрывающего тега), который требует минимум один атрибут для использования — src (произносится эс-ар-си, иногда говорят его полное название, source). Атрибут src содержит путь к изображению, которое вы хотите встроить в страницу, и может быть относительным или абсолютным URL, точно так же, как значения атрибута href для элемента {{htmlelement("a")}}.

        -

        Примечание: Перед тем как продолжить, вам стоит вспомнить про типы адресов URL, чтобы обновить в памяти про относительные и абсолютные адреса.

        +

        Примечание: Перед тем как продолжить, вам стоит вспомнить про типы адресов URL, чтобы обновить в памяти про относительные и абсолютные адреса.

        Например, если ваше изображение называется dinosaur.jpg, и оно находится в той же директории что и ваша HTML страница, вы можете встроить это изображение как:

        @@ -65,10 +65,10 @@ original_slug: Learn/HTML/Multimedia_and_embedding/Изображения_в_HTM

        Наш код выше даст нам следующий результат:

        -

        A basic image of a dinosaur, embedded in a browser, with Images in HTML written above it

        +

        A basic image of a dinosaur, embedded in a browser, with Images in HTML written above it

        -

        Примечание: Такие элементы как {{htmlelement("img")}} и {{htmlelement("video")}} иногда называются замещаемыми элементами. Это потому что содержание элемента и размер, определяет внешний ресурс (как изображение или видео файл), а не содержание самого элемента. Вы можете узнать о них больше в Замещаемых элементах.

        +

        Примечание: Такие элементы как {{htmlelement("img")}} и {{htmlelement("video")}} иногда называются замещаемыми элементами. Это потому что содержание элемента и размер, определяет внешний ресурс (как изображение или видео файл), а не содержание самого элемента. Вы можете узнать о них больше в Замещаемых элементах.

        @@ -85,7 +85,7 @@ original_slug: Learn/HTML/Multimedia_and_embedding/Изображения_в_HTM

        Самый простой способ увидеть атрибут alt в действии — это сделать намеренную ошибку в имени файла. Например, если бы мы написали имя изображения как dinosooooor.jpg, браузер не смог бы его отобразить, и на экране появился бы текст из атрибута alt:

        -

        The Images in HTML title, but this time the dinosaur image is not displayed, and alt text is in its place.Итак, в каких случаях текст из атрибута alt может быть нам полезен? Приведём несколько примеров:

        +

        The Images in HTML title, but this time the dinosaur image is not displayed, and alt text is in its place.Итак, в каких случаях текст из атрибута alt может быть нам полезен? Приведём несколько примеров:

        • Пользователь с нарушением зрения использует устройство чтения с экрана, которое может читать вслух описание элементов веб-страницы. На самом деле, наличие текста в атрибуте alt для описания изображения может быть полезно для большинства пользователей.
          • @@ -100,14 +100,14 @@ original_slug: Learn/HTML/Multimedia_and_embedding/Изображения_в_HTM
          • Декорация. Вы должны использовать {{anch ("Фоновые изображения CSS")}} для декоративных изображений, но если вы должны использовать HTML, добавьте пустой alt = "". Если изображение служит просто украшением и не является частью содержимого, добавьте пустой alt="". Например, программа чтения с экрана не тратит время на чтение содержимого, которое не является важным для пользователя.
          • Контент. Если ваше изображение содержит важную информацию, передайте ту же информацию через краткий alt. Или даже лучше, в главном тексте, который все увидят. Не используйте alt , если можете обойтись без него. Насколько неудобно было бы для пользователя, если бы параграфы были написаны дважды в главном контенте? Если изображение адекватно описано в основном тексте, можете просто использовать alt="".
            • -
          • Ссылка. Если вы помещаете изображение в {{htmlelement("a")}}, для того, чтобы сделать из него ссылку, вы всё ещё должны использовать чёткие формулировки описания ссылок. В таком случае, вы сможете использовать элемент <a>  или атрибут alt . Старайтесь выбрать лучший вариант.
            • +
          • Ссылка. Если вы помещаете изображение в {{htmlelement("a")}}, для того, чтобы сделать из него ссылку, вы всё ещё должны использовать чёткие формулировки описания ссылок. В таком случае, вы сможете использовать элемент <a>  или атрибут alt . Старайтесь выбрать лучший вариант.
          • Текст. Не пишите текст в изображениях. Если вашему заголовку понадобится тень, то лучше используйте для этого CSS вместо добавления текста в изображение. Однако, если  действительно этого не избежать, то вам следует дополнить текст в атрибуте alt.

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

          -

          Примечание: Более подробную информацию, смотрите здесь: Альтернативный текст.

          +

          Примечание: Более подробную информацию, смотрите здесь: Альтернативный текст.

          Ширина и высота

          @@ -122,7 +122,7 @@ original_slug: Learn/HTML/Multimedia_and_embedding/Изображения_в_HTM

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

          -

          The Images in HTML title, with dinosaur alt text, displayed inside a large box that results from width and height settings

          +

          The Images in HTML title, with dinosaur alt text, displayed inside a large box that results from width and height settings

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

          @@ -134,7 +134,7 @@ original_slug: Learn/HTML/Multimedia_and_embedding/Изображения_в_HTM

          Заголовок изображения

          -

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

          +

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

          <img src="images/dinosaur.jpg"
      alt="The head and torso of a dinosaur skeleton;
@@ -145,7 +145,7 @@ original_slug: Learn/HTML/Multimedia_and_embedding/Изображения_в_HTM
 
 
          Это даёт нам всплывающую подсказку при наведении курсора мыши, также как и в ссылках:
          
 
-
          The dinosaur image, with a tooltip title on top of it that reads A T-Rex on display at the Manchester University Museum 
          
+
          The dinosaur image, with a tooltip title on top of it that reads A T-Rex on display at the Manchester University Museum 
          
 
 
          Однако это не рекомендуется - title имеет ряд проблем с доступностью, в основном из-за того, что поддержка программ чтения с экрана очень непредсказуема, и большинство браузеров не будут отображать её, если вы не наведёте курсор мыши (например, нет доступа для пользователей клавиатуры). Зачастую лучше включить такого рода вспомогательную информацию в основной текст статьи, чем прикреплять её к изображению. Однако, она полезна в некоторых обстоятельствах; например, в галереях изображений, когда у вас нет места для их заголовков.
          
 
diff --git a/files/ru/learn/html/tables/basics/index.html b/files/ru/learn/html/tables/basics/index.html
index a87d4503a0..bd9b5f4fb4 100644
--- a/files/ru/learn/html/tables/basics/index.html
+++ b/files/ru/learn/html/tables/basics/index.html
@@ -26,13 +26,13 @@ translation_of: Learn/HTML/Tables/Basics
 
 
          Таблица - это структурированный набор данных, состоящий из строк и столбцов (табличных данных). Таблицы позволяют быстро и легко посмотреть значения, показывающие некоторую взаимосвязь между различными типами данных, например - человек и его возраст, или расписание в плавательном бассейне.
          
 
-
          A sample table showing names and ages of some people - Chris 38, Dennis 45, Sarah 29, Karen 47.
          
+
          A sample table showing names and ages of some people - Chris 38, Dennis 45, Sarah 29, Karen 47.
          
 
-
          A swimming timetable showing a sample data table
          
+
          A swimming timetable showing a sample data table
          
 
 
          Люди постоянно используют таблицы, причём уже давно, как показывает документ по переписи в США, относящийся к 1800 году:
          
 
-
          A very old parchment document; the data is not easily readable, but it clearly shows a data table being used.
          
+
          A very old parchment document; the data is not easily readable, but it clearly shows a data table being used.
          
 
 
          Так что не удивительно, что создатели HTML включили в него средства для структурирования и представления табличных данных в сети.
          
 
@@ -98,24 +98,24 @@ translation_of: Learn/HTML/Tables/Basics
 
 
          Оформление таблиц
          
 
-
          Исходный код HTML (HTML source code) вышеприведённой таблице есть в GitHub; посмотрите его и живой пример (look at the live example)! Вы заметите, что таблица там выглядит иначе — это потому, что на сайте MDN к этим данным была применена таблица стилей, а приведённый в GitHub пример информации о стиле не имеет.
          
+
          Исходный код HTML (HTML source code) вышеприведённой таблице есть в GitHub; посмотрите его и живой пример (look at the live example)! Вы заметите, что таблица там выглядит иначе — это потому, что на сайте MDN к этим данным была применена таблица стилей, а приведённый в GitHub пример информации о стиле не имеет.
          
 
-
          Не питайте ложных иллюзий - чтобы эффективно представлять таблицы в веб, необходимо придать им хорошую структуру в HTML и применить к ним таблицы стилей (CSS). В данном разделе мы сфокусируемся на HTML, чтобы узнать о том, что касается CSS, вам надо обратиться к статье Стилизация таблиц.
          
+
          Не питайте ложных иллюзий - чтобы эффективно представлять таблицы в веб, необходимо придать им хорошую структуру в HTML и применить к ним таблицы стилей (CSS). В данном разделе мы сфокусируемся на HTML, чтобы узнать о том, что касается CSS, вам надо обратиться к статье Стилизация таблиц.
          
 
 
          В этом разделе мы не фокусируемся на CSS, но всё же дали простейшую таблицу стилей CSS, чтобы сделать таблицы более читабельными. Эту таблицу стилей можно найти здесь, можно также использовать шаблон HTML, применяющий эту стаблицу стилей — вместе они дадут вам хорошую основу для экспериментов с таблицами HTML.
          
 
 
          
-
          Примечание: Посмотрите также таблицу personal_pronouns с применённым к ней стилем, чтобы получить представление о том, как она выглядит.
          
+
          Примечание: Посмотрите также таблицу personal_pronouns с применённым к ней стилем, чтобы получить представление о том, как она выглядит.
          
 
          
 
 
          Когда не надо использовать таблицы HTML?
          
 
-
          HTML-таблицы следует использовать для табличных данных — это то, для чего они предназначены. К сожалению, многие используют таблицы HTML для оформления веб-страниц, например, одна строка для заголовка, одна для содержимого, одна для сносок, и тому подобное. Подробнее об этом можно узнать в разделе Вёрстка на Начальном обучающем модуле доступности. Это происходило из-за плохой поддержки CSS в разных браузерах; в наше время такое встречается гораздо реже, но иногда всё же попадается.
          
+
          HTML-таблицы следует использовать для табличных данных — это то, для чего они предназначены. К сожалению, многие используют таблицы HTML для оформления веб-страниц, например, одна строка для заголовка, одна для содержимого, одна для сносок, и тому подобное. Подробнее об этом можно узнать в разделе Вёрстка на Начальном обучающем модуле доступности. Это происходило из-за плохой поддержки CSS в разных браузерах; в наше время такое встречается гораздо реже, но иногда всё же попадается.
          
 
 
          Короче говоря, использование таблиц в целях оформления вместо методов CSS является плохой идеей по следующим причинам :
          
 
 
            
- 
          1. Таблицы, используемые для оформления, уменьшают доступность страниц для людей, имеющих проблемы со зрением: Скринридеры (Screenreaders), используемые ими, интерпретируют HTML-теги и читают содержимое пользователю. Поскольку таблицы не являются средством для представления структуры таблицы, и разметка получается сложнее, чем при использовании методов CSS, скринридеры вводят пользователей в заблуждение.
            2. 
+ 
          2. Таблицы, используемые для оформления, уменьшают доступность страниц для людей, имеющих проблемы со зрением: Скринридеры (Screenreaders), используемые ими, интерпретируют HTML-теги и читают содержимое пользователю. Поскольку таблицы не являются средством для представления структуры таблицы, и разметка получается сложнее, чем при использовании методов CSS, скринридеры вводят пользователей в заблуждение.
            3. 
  
          3. Таблицы создают путаницу тегов: Как уже упоминалось, оформление страниц с помощью таблиц даёт более сложную структуру разметки, чем специально предназначенные для этого методы. Соответственно, такой код труднее писать, поддерживать и отлаживать.
            4. 
  
          4. Таблицы не реагируют автоматически на тип устройства: У надлежащих контейнеров (например, {{htmlelement("header")}}, {{htmlelement("section")}}, {{htmlelement("article")}}, или {{htmlelement("div")}}) ширина по умолчанию равна 100% от их родительского элемента. У таблиц же размер по умолчанию подстраивается под их содержимое, так что чтобы они одинаково хорошо работали на разных типах устройств необходимо принимать дополнительные меры.
            5. 
 
          
@@ -175,7 +175,7 @@ translation_of: Learn/HTML/Tables/Basics
 
 
 
          
-
          Примечание: Этот пример можно также найти на GitHub под названием simple-table.html (see it live also).
          
+
          Примечание: Этот пример можно также найти на GitHub под названием simple-table.html (see it live also).
          
 
          
 
 
          Добавление заголовков с помощью элементов <th>
          
@@ -275,7 +275,7 @@ translation_of: Learn/HTML/Tables/Basics
      -

      Примечание: Законченный пример можно найти на dogs-table-fixed.html в GitHub (посмотрите живой пример).

      +

      Примечание: Законченный пример можно найти на dogs-table-fixed.html в GitHub (посмотрите живой пример).

      Для чего нужны заголовки?

      @@ -362,7 +362,7 @@ translation_of: Learn/HTML/Tables/Basics
    -

    Примечание: Законченный пример можно посмотреть в animals-table-fixed.html на GitHub (живой пример).

    +

    Примечание: Законченный пример можно посмотреть в animals-table-fixed.html на GitHub (живой пример).

    @@ -521,7 +521,7 @@ translation_of: Learn/HTML/Tables/Basics
  • Последние два дня выходные; значением атрибута style будет width: 42px;
    • -

    Посмотрите, что у вас получилось. Если застрянете, или захотите себя проверить, можете посмотреть нашу версию в timetable-fixed.html (посмотрите живой пример).

    +

    Посмотрите, что у вас получилось. Если застрянете, или захотите себя проверить, можете посмотреть нашу версию в timetable-fixed.html (посмотрите живой пример).

    Итог

    diff --git a/files/ru/learn/javascript/first_steps/strings/index.html b/files/ru/learn/javascript/first_steps/strings/index.html index 0158a4ce38..aad1044a22 100644 --- a/files/ru/learn/javascript/first_steps/strings/index.html +++ b/files/ru/learn/javascript/first_steps/strings/index.html @@ -82,7 +82,7 @@ dblSgl;
    var bigmouth = 'I\'ve got no right to take my place...';
 bigmouth;
    -

    Так лучше. Таким же образом можно экранировать и другие символы, например "\. Кроме того существуют специальные коды. Для дополнительной информации см. Escape notation.

    +

    Так лучше. Таким же образом можно экранировать и другие символы, например "\. Кроме того существуют специальные коды. Для дополнительной информации см. Escape notation.

    Конкатенация строк

    @@ -143,7 +143,7 @@ typeof myDate; var myNum = Number(myString); typeof myNum; -
  • С другой стороны, каждое число имеет метод, называемый toString(), который преобразует его в эквивалентную строку. Попробуй это: +
  • С другой стороны, каждое число имеет метод, называемый toString(), который преобразует его в эквивалентную строку. Попробуй это: 
    var myNum = 123;
 var myString = myNum.toString();
 typeof myString;
    -- cgit v1.2.3-54-g00ecf