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> --- .../css_basics/index.html | 38 +++++++++++----------- .../javascript_basics/index.html | 28 ++++++++-------- 2 files changed, 33 insertions(+), 33 deletions(-) (limited to 'files/ru/learn/getting_started_with_the_web') 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, пространство вокруг внешней стороны элемента
    4. -

    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 { -

    Поскольку эта статья должна быть только лёгким введением в 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!';
    -
  4. Теперь убедитесь, что HTML и JavaScript файлы сохранены, и загрузите index.html в браузере. Вы должны увидеть что-то вроде этого:
    5. +
  5. Теперь убедитесь, что 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'); -- cgit v1.2.3-54-g00ecf